chat icon/text is now dynamic

This commit is contained in:
ian ramzy 2020-03-29 22:41:15 -04:00
parent e723a47aaa
commit 2db08f913d
2 changed files with 25 additions and 6 deletions

View File

@ -107,10 +107,10 @@
<div class="HoverState" id="caption-text">Start Live Caption</div> <div class="HoverState" id="caption-text">Start Live Caption</div>
</div> </div>
<div class="buttonContainer"> <div class="buttonContainer">
<button class="hoverButton" onclick="{$('#entire-chat').fadeToggle();}"> <button class="hoverButton" onclick="{toggleChat()}">
<i class="fas fa-comment-alt fa-xs"></i> <i id="chat-icon" class="fas fa-comment fa-xs"></i>
</button> </button>
<div class="HoverState">Open Chat</div> <div class="HoverState" id="chat-text">Show Chat</div>
</div> </div>
<div class="buttonContainer"> <div class="buttonContainer">
<button class="hoverButton" id="pip-button" onclick="{togglePictureInPicture()}"> <button class="hoverButton" id="pip-button" onclick="{togglePictureInPicture()}">

View File

@ -355,7 +355,6 @@ function muteMicrophone() {
function pauseVideo() { function pauseVideo() {
var paused = VideoChat.localStream.getVideoTracks()[0].enabled; var paused = VideoChat.localStream.getVideoTracks()[0].enabled;
alert(paused);
VideoChat.localStream.getVideoTracks()[0].enabled = !paused; VideoChat.localStream.getVideoTracks()[0].enabled = !paused;
const micIcon = document.getElementById("video-icon"); const micIcon = document.getElementById("video-icon");
const micText = document.getElementById("video-text"); const micText = document.getElementById("video-text");
@ -585,8 +584,28 @@ input.addEventListener('keypress', function (event) {
socket.on('chat message', function (msg) { socket.on('chat message', function (msg) {
$('.chat-messages').append('<div class="message-item moderator"><div class="message-bloc"><div class="message">' + msg + '</div></div></div>'); $('.chat-messages').append('<div class="message-item moderator"><div class="message-bloc"><div class="message">' + msg + '</div></div></div>');
$('#chat-zone').scrollTop($('#chat-zone')[0].scrollHeight); $('#chat-zone').scrollTop($('#chat-zone')[0].scrollHeight);
$('#entire-chat').fadeIn(); if ($('#entire-chat').is(":hidden")){
toggleChat()
}
}); });
function toggleChat() {
var entireChat = $('#entire-chat');
var chatIcon = document.getElementById("chat-icon");
var chatText = $('#chat-text');
if (entireChat.is(":visible")){
entireChat.fadeOut();
chatText.text("Show Chat");
chatIcon.classList.remove("fa-comment-slash");
chatIcon.classList.add("fa-comment");
} else {
entireChat.fadeIn();
chatText.text("Hide Chat");
chatIcon.classList.remove("fa-comment");
chatIcon.classList.add("fa-comment-slash");
}
}
// Chat // Chat
@ -599,7 +618,7 @@ function togglePictureInPicture() {
.catch(error => { .catch(error => {
logIt("Error exiting pip."); logIt("Error exiting pip.");
logIt(error); logIt(error);
}) });
} else { } else {
pipVideo.requestPictureInPicture() pipVideo.requestPictureInPicture()
.catch(error => { .catch(error => {