conflict fix

This commit is contained in:
steveseguin 2023-04-09 15:08:33 -04:00
commit 4f09a34bad
5 changed files with 339 additions and 322 deletions

View File

@ -1523,10 +1523,6 @@ iframe {
.popup .menu { margin: 2px; }
.my-float {
margin-top: 7px;
opacity: 0.9;
}
.toggleSize {
font-size: 32px;
color: white;

View File

@ -137,85 +137,85 @@
<div id="subControlButtons">
<div id="blindAllGuests" title="Blind all guests in room (toggle)" alt="Blind all guests in room (toggle)" aria-label="Blind all guests in room" onmousedown="event.preventDefault(); event.stopPropagation();" onclick="blindAllGuests(this, event)" tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;" >
<i class="toggleSize las la-eye my-float"></i>
<i class="toggleSize las la-eye"></i>
</div>
<div id="queuebutton" title="Load the next guest in queue" alt="Load the next guest in queue" aria-label="Load next guest in queue" onmousedown="event.preventDefault(); event.stopPropagation();" onclick="nextQueue()" tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;" >
<i id="queuetoggle" class="toggleSize las la-stream my-float"></i>
<i id="queuetoggle" class="toggleSize las la-stream"></i>
<div id="queueNotification"></div>
</div>
<div id="sharefilebutton" title="Transfer any file to the group" alt="Transfer any file to the group" aria-label="Select file to transfer" onmousedown="event.preventDefault(); event.stopPropagation();" onclick="toggleFileshare()" tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float" style="cursor: pointer;" >
<i id="filesharetoggle" class="toggleSize las la-file-upload my-float"></i>
<i id="filesharetoggle" class="toggleSize las la-file-upload"></i>
<div id="transferNotification"></div>
</div>
<div id="chatbutton" title="Toggle the Chat" alt="Toggle the Chat" aria-label="Text chat" onmousedown="event.preventDefault(); event.stopPropagation();" onclick="toggleChat()" tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;" >
<i id="chattoggle" class="toggleSize las la-comment-alt my-float"></i>
<i id="chattoggle" class="toggleSize las la-comment-alt"></i>
<div id="chatNotification"></div>
</div>
<div id="mutespeakerbutton" onmousedown="event.preventDefault(); event.stopPropagation();" alt="Toggle the speaker output." aria-label="Mute Speaker output" title="Mute the Speaker" onclick="toggleSpeakerMute()" tabindex="17" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;" >
<i id="mutespeakertoggle" class="toggleSize las la-volume-up my-float" style="position: relative; top: 0.5px;"></i>
<i id="mutespeakertoggle" class="toggleSize las la-volume-up" style="position: relative; top: 0.5px;"></i>
</div>
<div id="mutebutton" onmousedown="toggleMute(false, event);event.preventDefault(); event.stopPropagation();" alt="Mute the Mic" aria-label="Mute Microphone" title="Mute the Mic" ontouchstart="toggleMute(false, event);event.preventDefault(); event.stopPropagation();" tabindex="18" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;">
<i id="mutetoggle" class="toggleSize las la-microphone my-float" style="position: relative; top: 0.5px;"></i>
<i id="mutetoggle" class="toggleSize las la-microphone" style="position: relative; top: 0.5px;"></i>
</div>
<div id="mutevideobutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Disable the Camera" alt="Disable the Camera" aria-label="Mute Camera" onclick="toggleVideoMute()" tabindex="19" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;">
<i id="mutevideotoggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-video my-float"></i>
<i id="mutevideotoggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-video"></i>
</div>
<div id="screensharebutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Share a Screen with others" alt="Share a Screen with others" aria-label="Share a screen" onclick="screenshareTypeDecider(1)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float hidden task" data-menu="context-menu-screen-share" style="cursor: pointer;">
<i id="screensharetoggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-desktop my-float"></i>
<i id="screensharetoggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-desktop"></i>
</div>
<div id="screenshare2button" onmousedown="event.preventDefault(); event.stopPropagation();" title="Add a Screen Share" alt="Add a Screen Share" aria-label="Share a screen" onclick="screenshareTypeDecider(2)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float hidden task" data-menu="context-menu-screen-share" style="cursor: pointer;">
<i id="screenshare2toggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-tv my-float"></i>
<i id="screenshare2toggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-tv"></i>
</div>
<div id="screenshare3button" onmousedown="event.preventDefault(); event.stopPropagation();" title="Share a Screen with others" alt="Add a Screen Share" aria-label="Share a screen" onclick="screenshareTypeDecider(3)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float hidden task" data-menu="context-menu-screen-share" style="cursor: pointer;">
<i id="screenshare3toggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-tv my-float"></i>
<i id="screenshare3toggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-tv"></i>
</div>
<div id="websitesharebutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Share a website with your guests (IFRAME)" aria-label="Share a website" alt="Share a website with your guests (IFRAME)" onclick="shareWebsite(false, event)" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float hidden" style="cursor: pointer;">
<i id="websitesharetoggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-window-maximize my-float"></i>
<i id="websitesharetoggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-window-maximize"></i>
</div>
<div id="websitesharebutton2" onmousedown="event.preventDefault(); event.stopPropagation();" title="Hold CTRL (or CMD) and click to spotlight this video" alt="Share a website as an embedded iFRAME" aria-label="Share a website" onclick="shareWebsite(false, event)" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float2 orange shake hidden" style="cursor: pointer;max-width: 200px;margin: auto;padding: 0 10px;">
<i onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las my-float la-window-close" style="display: inline-block;"></i>
<i onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-window-close" style="display: inline-block;"></i>
<div style="display: inline-block;width: 85px;line-height: 1; font-size: 0.9em;">
Stop Sharing Website
</div>
</div>
<div id="fullscreenPage" onmousedown="event.preventDefault(); event.stopPropagation();" title="Full-screen the page" alt="Full-screen the page" aria-label="Full screen" onclick="fullscreenPageToggle()" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float hidden" style="cursor: pointer;">
<i id="fullscreenPageToggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-expand-arrows-alt my-float"></i>
<i id="fullscreenPageToggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-expand-arrows-alt"></i>
</div>
<div id="flipcamerabutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Cycle the Cameras" onclick="cycleCameras()" class="hidden float" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" aria-label="Cycle Cameras" alt="Cycle the Cameras">
<i id="settingstoggle" class="toggleSize las la-sync-alt my-float"></i>
<i id="settingstoggle" class="toggleSize las la-sync-alt"></i>
</div>
<div id="obscontrolbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="OBS Remote Controller; start/stop and change scenes." onclick="toggleOBSControls();" class="hidden float" tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" aria-label="Remote OBS control menu" alt="Toggle the Remote OBS Controls Menu">
<i id="obscontroltoggle" class="toggleSize las la-gamepad my-float"></i>
<i id="obscontroltoggle" class="toggleSize las la-gamepad"></i>
</div>
<div id="roomsettingsbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Room Settings" onclick="toggleRoomSettings();" class="hidden float" tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Toggle the Room Settings Menu" aria-label="Room settings menu">
<i id="roomsettingstoggle" class="toggleSize las la-users-cog my-float"></i>
<i id="roomsettingstoggle" class="toggleSize las la-users-cog"></i>
</div>
<div id="settingsbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Your audio and video Settings" onclick="toggleSettings()" class="hidden float" tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Toggle Settings Menu" aria-label="Settings menu">
<i id="settingstoggle" class="toggleSize las la-cog my-float"></i>
<i id="settingstoggle" class="toggleSize las la-cog"></i>
</div>
<div id="hangupbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Hangup the Call" aria-label="Hang up" alt="Hangup the Call" onclick="hangup()" class="hidden float" tabindex="23" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" >
<i class="toggleSize my-float las la-phone rotate225" aria-hidden="true"></i>
<i class="toggleSize las la-phone rotate225" aria-hidden="true"></i>
</div>
<div id="raisehandbutton" onmousedown="event.preventDefault(); event.stopPropagation();" data-raised="0" title="Alert the host you want to speak" aria-label="Raise hand" alt="Alert the host you want to speak" tabindex="24" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="raisehand()" class="hidden float" style="cursor: pointer;">
<i class="toggleSize my-float las la-hand-paper" style="position: relative; right: 1px;" aria-hidden="true"></i>
<i class="toggleSize las la-hand-paper" style="position: relative; right: 1px;" aria-hidden="true"></i>
</div>
<div id="pptbackbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Go back a slide" aria-label="Back a slide" alt="Go back a slide" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="gobackSlide()" class="hidden float red" style="cursor: pointer;">
<i class="toggleSize my-float las la-chevron-left" style="position: relative; right: 1px;" aria-hidden="true"></i>
<i class="toggleSize las la-chevron-left" style="position: relative; right: 1px;" aria-hidden="true"></i>
</div>
<div id="pptnextbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Next slide" aria-label="Next slide" alt="Next slide" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="nextSlide()" class="hidden float" style="cursor: pointer;">
<i class="toggleSize my-float las la-chevron-right" style="position: relative; right: 1px;" aria-hidden="true"></i>
<i class="toggleSize las la-chevron-right" style="position: relative; right: 1px;" aria-hidden="true"></i>
</div>
<div id="recordLocalbutton" onmousedown="event.preventDefault(); event.stopPropagation();" data-state="0" title="Record your stream to disk" aria-label="Record your stream to disk" alt="Record your stream to disk" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="recordLocalVideoToggle();" class="hidden float" style="cursor: pointer;">
<i class="toggleSize my-float las la-dot-circle" style="position: relative;" aria-hidden="true"></i>
<i class="toggleSize las la-dot-circle" style="position: relative;" aria-hidden="true"></i>
</div>
<div id="recordLocalScreenbutton" onmousedown="event.preventDefault(); event.stopPropagation();" data-state="0" title="Stop screen share recording" aria-label="Stop screen share recording" alt="Stop screen recording" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="recordLocalScreenStopRecord();" class="hidden float" style="cursor: pointer;">
<small>Stop<br>Screen<br>Record</small>
@ -224,7 +224,7 @@
<span id="rooms" class="hidden" style="padding-top:3px;padding-left:6px;pointer-events: auto;color:#fff;"></span>
<span id="groups" class="hidden" style="padding-top:3px;padding-left:6px;pointer-events: auto;color:#fff;text-align: center;"></span>
<div id="hangupbutton2" onmousedown="event.preventDefault(); event.stopPropagation();" title="Cancel the Director's Video/Audio" onclick="hangup2()" class="hidden float" tabindex="26" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" aria-label="stop publishing audio and video" alt="Disconnect Direcotor's cam">
<i class="toggleSize my-float las la-phone rotate225" aria-hidden="true"></i>
<i class="toggleSize las la-phone rotate225" aria-hidden="true"></i>
</div>
</div>
</div>

396
lib.js
View File

@ -2168,112 +2168,149 @@ function makeMiniDraggableElement(elmnt) {
elmnt.ontouchstart = dragMouseDown;
}
function makeDraggableElement(elmnt, absolute=false) {
// function makeDraggableElement(elmnt, absolute=false) {
if (session.disableMouseEvents){return;}
// if (session.disableMouseEvents){return;}
try {
elmnt.dragElement = false;
elmnt.style.bottom = "auto";
elmnt.style.cursor = "grab";
elmnt.stashonmouseup = null;
elmnt.stashonmousemove = null;
} catch (e) {
errorlog(e);
return;
}
var pos1 = 0;
var pos2 = 0;
var pos3 = 0;
var pos4 = 0;
var timestamp = false;
// try {
// elmnt.dragElement = false;
// elmnt.style.bottom = "auto";
// elmnt.style.cursor = "grab";
// elmnt.stashonmouseup = null;
// elmnt.stashonmousemove = null;
// } catch (e) {
// errorlog(e);
// return;
// }
// var pos1 = 0;
// var pos2 = 0;
// var pos3 = 0;
// var pos4 = 0;
// var timestamp = false;
var enterEventCount = 0;
var leaveEventCount = 0;
// var enterEventCount = 0;
// var leaveEventCount = 0;
function dragMouseDown(e) {
timestamp = Date.now();
// function dragMouseDown(e) {
// timestamp = Date.now();
e = e || window.event;
e.preventDefault();
// e = e || window.event;
// e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
//elmnt.stashonmouseup = document.onmouseup; // I don't want to interfere with other drag events.
//elmnt.stashonmousemove = document.onmousemove;
//elmnt.stashonclick = document.onclick;
// pos3 = e.clientX;
// pos4 = e.clientY;
// //elmnt.stashonmouseup = document.onmouseup; // I don't want to interfere with other drag events.
// //elmnt.stashonmousemove = document.onmousemove;
// //elmnt.stashonclick = document.onclick;
document.onmouseup = function(event){closeDragElement(event, elmnt);};
// document.onmouseup = function(event){closeDragElement(event, elmnt);};
document.onmousemove = function(event){elementDrag(elmnt,event);};
// document.onmousemove = function(event){elementDrag(elmnt,event);};
if ("stopDragTimeout" in elmnt){clearTimeout(elmnt.stopDragTimeout);}
// if ("stopDragTimeout" in elmnt){clearTimeout(elmnt.stopDragTimeout);}
elmnt.onmouseleave = function(event){
leaveEventCount+=1;
elmnt.stopDragTimeout = setTimeout(function(ele,evt1){
closeDragElement(evt1, ele);}
,100, elmnt, event);
};
elmnt.onmouseenter = function(event){
enterEventCount+=1;
if (enterEventCount>=leaveEventCount){
if ("stopDragTimeout" in elmnt){clearTimeout(elmnt.stopDragTimeout);}
} else {
if (("stopDragTimeout" in elmnt) && (elmnt.stopDragTimeout)){
clearTimeout(elmnt.stopDragTimeout);
elmnt.stopDragTimeout = setTimeout(function(ele,evt1){
// elmnt.onmouseleave = function(event){
// leaveEventCount+=1;
// elmnt.stopDragTimeout = setTimeout(function(ele,evt1){
// closeDragElement(evt1, ele);}
// ,100, elmnt, event);
// };
// elmnt.onmouseenter = function(event){
// enterEventCount+=1;
// if (enterEventCount>=leaveEventCount){
// if ("stopDragTimeout" in elmnt){clearTimeout(elmnt.stopDragTimeout);}
// } else {
// if (("stopDragTimeout" in elmnt) && (elmnt.stopDragTimeout)){
// clearTimeout(elmnt.stopDragTimeout);
// elmnt.stopDragTimeout = setTimeout(function(ele,evt1){
closeDragElement(evt1, ele);}
,100, elmnt, event);
}
}
};
// closeDragElement(evt1, ele);}
// ,100, elmnt, event);
// }
// }
// };
}
function elementDrag(ele,e) {
// }
// function elementDrag(ele,e) {
e = e || window.event;
if (("buttons" in e) && (e.buttons!==1)){return;}
// e = e || window.event;
// if (("buttons" in e) && (e.buttons!==1)){return;}
e.preventDefault();
// e.preventDefault();
ele.dragElement = true;
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// ele.dragElement = true;
// pos1 = pos3 - e.clientX;
// pos2 = pos4 - e.clientY;
// pos3 = e.clientX;
// pos4 = e.clientY;
var topDrag = (ele.offsetTop - pos2 );
if (absolute){
if (topDrag > (-3 + (window.innerHeight - ele.clientHeight))){
topDrag = (-3 + (window.innerHeight - ele.clientHeight));
}
} else {
if (topDrag > -3){
topDrag = -3;
}
}
ele.style.top = topDrag + "px";
ele.style.left = (ele.offsetLeft - pos1) + "px";
// var topDrag = (ele.offsetTop - pos2 );
// if (absolute){
// if (topDrag > (-3 + (window.innerHeight - ele.clientHeight))){
// topDrag = (-3 + (window.innerHeight - ele.clientHeight));
// }
// } else {
// if (topDrag > -3){
// topDrag = -3;
// }
// }
// ele.style.top = topDrag + "px";
// ele.style.left = (ele.offsetLeft - pos1) + "px";
}
function closeDragElement(event=false, ele=false) {
document.onmouseup = null;
document.onmousemove = null
ele.onmouseleave = null;
ele.onmouseenter = null;
enterEventCount = 0;
leaveEventCount = 0;
updateMixer();
//document.onclick = elmnt.stashonclick;
}
// }
// function closeDragElement(event=false, ele=false) {
// document.onmouseup = null;
// document.onmousemove = null
// ele.onmouseleave = null;
// ele.onmouseenter = null;
// enterEventCount = 0;
// leaveEventCount = 0;
// updateMixer();
// //document.onclick = elmnt.stashonclick;
// }
elmnt.onmousedown = dragMouseDown;
// elmnt.onmousedown = dragMouseDown;
// }
let isDragging = false;
let draggable = document.querySelector('#subControlButtons');
let initialX;
let currentX;
let xOffset = 0;
let initialY;
let currentY;
let yOffset = 0;
draggable.addEventListener('mousedown', dragStart);
draggable.addEventListener('mouseup', dragEnd);
function dragStart(e) {
initialX = e.clientX - xOffset;
initialY = e.clientY - yOffset;
isDragging = true;
}
function dragEnd(e) {
initialX = currentX;
initialY = currentY;
isDragging = false;
}
document.addEventListener('mousemove', drag);
function drag(e) {
if (isDragging) {
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
xOffset = currentX;
yOffset = currentY;
draggable.style.transform = `translate(${currentX}px, ${currentY}px)`;
}
}
function removeStorage(cname){
localStorage.removeItem(cname);
}
@ -2389,12 +2426,12 @@ function nextQueue(){
if (!session.queue){return;}
if (!session.director){return;}
if (session.queueList.length==0){
getById("queuebutton").classList.add("float2");
// getById("queuebutton").classList.add("float2");
getById("queuebutton").classList.add("red");
getById("queuebutton").classList.remove("float");
// getById("queuebutton").classList.remove("float");
setTimeout(function(){
getById("queuebutton").classList.add("float");
getById("queuebutton").classList.remove("float2");
// getById("queuebutton").classList.add("float");
// getById("queuebutton").classList.remove("float2");
getById("queuebutton").classList.remove("red");
},50);
return;
@ -2402,11 +2439,11 @@ function nextQueue(){
var nextStream = session.queueList.shift();
getById("queuebutton").classList.add("float2");
getById("queuebutton").classList.remove("float");
// getById("queuebutton").classList.add("float2");
// getById("queuebutton").classList.remove("float");
setTimeout(function(){
getById("queuebutton").classList.add("float");
getById("queuebutton").classList.remove("float2");
// getById("queuebutton").classList.add("float");
// getById("queuebutton").classList.remove("float2");
},200);
updateQueue();
@ -5650,8 +5687,6 @@ eventer(messageEvent, function(e) { // this listens for child IFRAMES.
session.screenShareElement = false;
updateMixer();
getById("screenshare2button").classList.add("float");
getById("screenshare2button").classList.remove("float2");
}
}
} else if (e.data.action == "video-loaded") {
@ -10317,12 +10352,9 @@ function toggleMute(apply = false, event=false) { // TODO: I need to have this b
if (session.muted == false) {
session.muted = true;
getById("mutetoggle").className = "las la-microphone-slash my-float toggleSize";
if (!(session.cleanOutput)){
getById("mutebutton").classList.remove("float");
getById("mutebutton").classList.add("float2");
getById("mutebutton").classList.add("red");
getById("mutebutton").classList.add("puslate");
getById("mutetoggle").className = "las la-microphone-slash toggleSize";
if (!(session.cleanOutput)){
getById("mutebutton").classList.add("red", "pulsate");
getById("header").classList.add('red');
if (session.localMuteElement){
@ -10343,14 +10375,12 @@ function toggleMute(apply = false, event=false) { // TODO: I need to have this b
} else {
session.muted = false;
getById("mutetoggle").className = "las la-microphone my-float toggleSize";
getById("mutetoggle").className = "las la-microphone toggleSize";
if (!(session.cleanOutput)){
getById("mutebutton").classList.add("float");
getById("mutebutton").classList.remove("float2");
getById("mutebutton").classList.remove("red");
getById("mutebutton").classList.remove("puslate");
// getById("mutebutton").classList.add("float");
// getById("mutebutton").classList.remove("float2");
getById("mutebutton").classList.remove("red", "pulsate");
getById("header").classList.remove('red');
if (session.localMuteElement){
@ -10410,9 +10440,9 @@ function toggleSpeakerMute(apply = false) { // TODO: I need to have this be MUTE
}
if (session.speakerMuted == false) { // mute output
session.speakerMuted = true;
getById("mutespeakertoggle").className = "las la-volume-mute my-float toggleSize";
getById("mutespeakertoggle").className = "las la-volume-mute toggleSize";
if (!(session.cleanOutput)){
getById("mutespeakerbutton").className = "float2 red";
getById("mutespeakerbutton").className = "float red";
}
var sounds = document.getElementsByTagName("video");
@ -10430,7 +10460,7 @@ function toggleSpeakerMute(apply = false) { // TODO: I need to have this be MUTE
} else {
session.speakerMuted = false; // unmute output
getById("mutespeakertoggle").className = "las la-volume-up my-float toggleSize";
getById("mutespeakertoggle").className = "las la-volume-up toggleSize";
if (!(session.cleanOutput)){
getById("mutespeakerbutton").className = "float";
}
@ -10526,13 +10556,13 @@ function toggleChat(event = null) { // TODO: I need to have this be MUTE, toggle
return false;
});
session.chat = true;
getById("chattoggle").className = "las la-comment-dots my-float toggleSize";
getById("chatbutton").className = "float2";
getById("chattoggle").className = "las la-comment-dots toggleSize";
getById("chatbutton").className = "float";
getById("chatModule").style.display = "block";
getById("chatInput").focus(); // give it keyboard focus
} else {
session.chat = false;
getById("chattoggle").className = "las la-comment-alt my-float toggleSize";
getById("chattoggle").className = "las la-comment-alt toggleSize";
getById("chatbutton").className = "float";
getById("chatModule").style.display = "none";
@ -10675,10 +10705,10 @@ function toggleVideoMute(apply = false) { // TODO: I need to have this be MUTE,
if (session.videoMuted == false) {
session.videoMuted = true;
getById("mutevideotoggle").className = "las la-video-slash my-float toggleSize";
getById("mutevideotoggle").className = "las la-video-slash toggleSize";
if (!(session.cleanOutput)){
getById("mutevideobutton").className = "float2 red";
getById("header").classList.add("red2");
getById("mutevideobutton").className = "float red";
getById("header").classList.add("red");
if (session.remoteVideoMuted){
getById("head8").classList.remove("hidden");
}
@ -10690,10 +10720,10 @@ function toggleVideoMute(apply = false) { // TODO: I need to have this be MUTE,
}
} else if (session.remoteVideoMuted){ // the director has muted this guest's video feed
session.videoMuted = false; // just setting it back to the pre-toggled state
getById("mutevideotoggle").className = "las la-video my-float toggleSize";
getById("mutevideotoggle").className = "las la-video toggleSize";
if (!(session.cleanOutput)){
getById("head8").classList.remove("hidden");
getById("header").classList.add("red2");
getById("header").classList.add("red");
getById("mutevideobutton").className = "float";
}
if (session.streamSrc) {
@ -10705,10 +10735,10 @@ function toggleVideoMute(apply = false) { // TODO: I need to have this be MUTE,
} else {
session.videoMuted = false;
getById("mutevideotoggle").className = "las la-video my-float toggleSize";
getById("mutevideotoggle").className = "las la-video toggleSize";
if (!(session.cleanOutput)){
getById("mutevideobutton").className = "float";
getById("header").classList.remove("red2");
getById("header").classList.remove("red");
}
if (session.streamSrc) {
session.streamSrc.getVideoTracks().forEach((track) => {
@ -10801,8 +10831,9 @@ async function toggleSettings(forceShow = false) { // TODO: I need to have this
}
getById("popupSelector").style.display = "inline-block"
getById("settingsbutton").classList.add("float2");
getById("settingsbutton").classList.remove("float");
getById("settingsbutton").classList.add("brown");
// getById("settingsbutton").classList.add("float2");
// getById("settingsbutton").classList.remove("float");
loadTFLITEImages() // only triggers if effects==5 is true
@ -10819,8 +10850,10 @@ async function toggleSettings(forceShow = false) { // TODO: I need to have this
getById("popupSelector").style.right = "-400px";
getById("settingsbutton").classList.add("float");
getById("settingsbutton").classList.remove("float2");
getById("settingsbutton").classList.remove("brown");
// getById("settingsbutton").classList.add("float");
// getById("settingsbutton").classList.remove("float2");
setTimeout(function() {
getById("popupSelector").style.display = "none";
}, 200);
@ -10876,14 +10909,13 @@ function hangup2() {
getById("mutevideobutton").classList.add("hidden");
getById("screenshare2button").classList.add("hidden");
getById("screensharebutton").classList.add("float");
getById("screensharebutton").classList.remove("float2");
getById("screensharebutton").classList.remove("green");
if (session.showDirector == false) {
getById("miniPerformer").innerHTML = '<button id="press2talk" onmousedown="event.preventDefault(); event.stopPropagation();" style="width:auto;margin-left:5px;height:45px;border-radius: 38px;" class="float" onclick="press2talk(true);" title="You can also enable the director`s Video Output afterwards by clicking the Setting`s button"><i class="las la-headset"></i><span data-translate="push-to-talk-enable"> enable director`s microphone or video<br />(only guests can see this feed)</span></button>';
getById("miniPerformer").innerHTML = '<button id="press2talk" onmousedown="event.preventDefault(); event.stopPropagation();" class="float green" onclick="press2talk(true);" title="You can also enable the director`s Video Output afterwards by clicking the Setting`s button"><i class="las la-headset"></i><span data-translate="push-to-talk-enable"> enable director`s microphone or video<br />(only guests can see this feed)</span></button>';
miniTranslate(getById("miniPerformer"));
} else {
getById("miniPerformer").innerHTML = '<button id="press2talk" onmousedown="event.preventDefault(); event.stopPropagation();" style="width:auto;margin-left:5px;height:45px;border-radius: 38px;" class="float" onclick="press2talk(true);" title="You can also enable the director`s Video Output afterwards by clicking the Setting`s button"><i class="las la-headset"></i><span data-translate="push-to-talk-enable-2"> enable director`s microphone or video</span></button>';
getById("miniPerformer").innerHTML = '<button id="press2talk" onmousedown="event.preventDefault(); event.stopPropagation();" class="float green" onclick="press2talk(true);" title="You can also enable the director`s Video Output afterwards by clicking the Setting`s button"><i class="las la-headset"></i><span data-translate="push-to-talk-enable-2"> enable director`s microphone or video</span></button>';
}
getById("miniPerformer").className = "";
}
@ -11668,7 +11700,7 @@ async function directTimer(ele, event=false) { // A directing room only is cont
log("directTimer");
var msg = {};
ele.classList.remove("blue");
ele.classList.remove("red2");
ele.classList.remove("red");
if (!event || (!((event.ctrlKey) || (event.metaKey)))) {
if (ele.value == 0 || ele.value == 2) {
var getTime = await promptAlt("Time to set count down timer", false, false, parseInt(getById("overlayClockContainer").dataset.initial), true);
@ -11676,7 +11708,7 @@ async function directTimer(ele, event=false) { // A directing room only is cont
getById("overlayClockContainer").dataset.initial = parseInt(getTime);
ele.value = 1;
ele.classList.add("pressed");
ele.classList.remove("red2");
ele.classList.remove("red");
msg.setClock = getTime;
msg.showClock = true;
msg.startClock = true;
@ -11685,7 +11717,7 @@ async function directTimer(ele, event=false) { // A directing room only is cont
} else if (ele.value == 3) {
ele.value = 1;
msg.resumeClock = true;
ele.classList.add("red2");
ele.classList.add("red");
} else {
ele.value = 2;
ele.classList.remove("pressed");
@ -11702,7 +11734,7 @@ async function directTimer(ele, event=false) { // A directing room only is cont
} else if (ele.value == 3) {
ele.value = 1;
msg.resumeClock = true;
ele.classList.add("red2");
ele.classList.add("red");
}
}
@ -11800,7 +11832,7 @@ async function directRoomTimer(ele, event=false) { // A directing room only is
log("directGlobalRoomTimer");
var msg = {};
ele.classList.remove("blue");
ele.classList.remove("red2");
ele.classList.remove("red");
getById("overlayClockContainer").style.fontSize = "50px";
@ -11812,7 +11844,7 @@ async function directRoomTimer(ele, event=false) { // A directing room only is
getById("overlayClockContainer").dataset.initial = getTime;
ele.value = 1;
ele.classList.add("pressed");
ele.classList.remove("red2");
ele.classList.remove("red");
session.roomTimer = Date.now()/1000 + getTime;
@ -11834,7 +11866,7 @@ async function directRoomTimer(ele, event=false) { // A directing room only is
} else {
session.roomTimer = Date.now()/1000 - session.roomTimer;
}
ele.classList.add("red2");
ele.classList.add("red");
} else {
ele.value = 2;
ele.classList.remove("pressed");
@ -11872,7 +11904,7 @@ async function directRoomTimer(ele, event=false) { // A directing room only is
session.roomTimer = Date.now()/1000 - session.roomTimer;
}
ele.classList.add("red2");
ele.classList.add("red");
}
}
if (ele.dataset.UUID){
@ -11893,17 +11925,17 @@ function updateRemoteTimerButton(UUID, currentTime) {
time = time * -1;
var minutes = Math.floor(time / 60);
var seconds = time - minutes * 60;
elements[0].classList.add("red2");
elements[0].classList.add("red");
elements[0].innerHTML = '<i class="las la-clock"></i> -' + (minutes) + "m : " + zpadTime(seconds) + "s";
} else {
var minutes = Math.floor(time / 60);
var seconds = time - minutes * 60;
elements[0].classList.remove("red2");
elements[0].classList.remove("red");
elements[0].innerHTML = '<i class="las la-clock"></i> ' + (minutes) + "m : " + zpadTime(seconds) + "s";
}
} else {
elements[0].classList.remove("pressed");
elements[0].classList.remove("red2");
elements[0].classList.remove("red");
elements[0].innerHTML = '<i class="las la-clock"></i><span data-translate="create-timer"> Create Timer</span>';
}
}
@ -12047,12 +12079,12 @@ function blindAllGuests(ele, event=false){
ele.value = 0;
ele.classList.remove("pressed");
ele.classList.remove("red");
ele.innerHTML = '<i class="toggleSize las la-eye my-float"></i>';
ele.innerHTML = '<i class="toggleSize las la-eye"></i>';
} else {
ele.value = 1;
ele.classList.add("pressed");
ele.classList.add("red");
ele.innerHTML = '<i class="toggleSize las la-eye-slash my-float"></i>';
ele.innerHTML = '<i class="toggleSize las la-eye-slash"></i>';
}
}
@ -12658,7 +12690,7 @@ async function publishScreen() {
getById("recordLocalbutton").className = "float";
}
if (session.screensharebutton) {
getById("screensharebutton").className = "float2";
getById("screensharebutton").className = "float";
}
getById("controlButtons").classList.remove("hidden");
getById("helpbutton").style.display = "inherit";
@ -12689,7 +12721,7 @@ async function publishScreen() {
if (session.screensharebutton === true) {
getById("controlButtons").classList.remove("hidden");
getById("screensharebutton").className = "float2";
getById("screensharebutton").className = "float";
}
if (session.hangupbutton === true){
@ -15383,14 +15415,14 @@ async function createRoomCallback(passAdd, passAdd2) {
}
if (session.showDirector == false) {
getById("miniPerformer").innerHTML = '<button id="press2talk" onmousedown="event.preventDefault(); event.stopPropagation();" style="width:auto;margin-left:5px;height:45px;border-radius: 38px;" class="float" onclick="press2talk(true);" title="You can also enable the director`s Video Output afterwards by clicking the Setting`s button"><i class="las la-headset"></i><span data-translate="push-to-talk-enable"> enable director`s microphone or video<br />(only guests can see this feed)</span></button>';
getById("miniPerformer").innerHTML = '<button id="press2talk" onmousedown="event.preventDefault(); event.stopPropagation();" class="float green" onclick="press2talk(true);" title="You can also enable the director`s Video Output afterwards by clicking the Setting`s button"><i class="las la-headset"></i><span data-translate="push-to-talk-enable"> enable director`s microphone or video<br />(only guests can see this feed)</span></button>';
miniTranslate(getById("miniPerformer"));
getById("grabDirectorSoloLink").dataset.raw = "https://" + location.host + location.pathname + "?solo&sd&r=" + session.roomid + "&v="+session.streamID + passAdd2 + wss + token;
getById("grabDirectorSoloLink").href = "https://" + location.host + location.pathname + "?solo&sd&r=" + session.roomid + "&v="+session.streamID + passAdd2 + wss + token;
getById("grabDirectorSoloLink").innerText = "https://" + location.host + location.pathname + "?solo&sd&r=" + session.roomid + "&v="+session.streamID + passAdd2 + wss + token;
getById("grabDirectorSoloLinkParent").classList.remove("hidden");
} else {
getById("miniPerformer").innerHTML = '<button id="press2talk" onmousedown="event.preventDefault(); event.stopPropagation();" style="width:auto;margin-left:5px;height:45px;border-radius: 38px;" class="float" onclick="press2talk(true);" title="You can also enable the director`s Video Output afterwards by clicking the Setting`s button"><i class="las la-headset"></i><span data-translate="push-to-talk-enable-2"> enable director`s microphone or video</span></button>';
getById("miniPerformer").innerHTML = '<button id="press2talk" onmousedown="event.preventDefault(); event.stopPropagation();" class="float green" onclick="press2talk(true);" title="You can also enable the director`s Video Output afterwards by clicking the Setting`s button"><i class="las la-headset"></i><span data-translate="push-to-talk-enable-2"> enable director`s microphone or video</span></button>';
}
getById("miniPerformer").className = "";
@ -17904,8 +17936,7 @@ function gotDevices2(deviceInfos) {
notifyOfScreenShare();
//session.refreshScale();
}
getById("screensharebutton").classList.add("float");
getById("screensharebutton").classList.remove("float2");
getById("screensharebutton").classList.remove("green");
}
};
@ -19107,10 +19138,8 @@ async function toggleScreenShare(reload = false) { ////////////////////////////
session.screenShareState = true;
notifyOfScreenShare();
getById("screensharebutton").classList.add("float2");
getById("screensharebutton").classList.remove("float");
getById("screensharebutton").classList.add("green");
enumerateDevices().then(gotDevices2).then(function() {});
pokeIframeAPI("screen-share-state", true);
@ -19128,8 +19157,7 @@ async function toggleScreenShare(reload = false) { ////////////////////////////
//session.refreshScale();
getById("screensharebutton").classList.add("float2");
getById("screensharebutton").classList.remove("float");
getById("screensharebutton").classList.add("green");
enumerateDevices().then(gotDevices2).then(function() {});
//if (session.videoElement.readyState!==4){
@ -19196,6 +19224,7 @@ async function toggleScreenShare(reload = false) { ////////////////////////////
}
});
}
if (session.streamSrcClone){
session.streamSrcClone.getVideoTracks().forEach(function(track) {
if (beforeScreenShare && (track.id == beforeScreenShare.id)){
@ -19217,9 +19246,8 @@ async function toggleScreenShare(reload = false) { ////////////////////////////
}
});
}
getById("screensharebutton").classList.add("float"); // disable the button after we know the tracks are disabled
getById("screensharebutton").classList.remove("float2");
getById("screensharebutton").classList.remove("green");
if (beforeScreenShare){
if (addedAlready==false){
@ -19815,8 +19843,8 @@ async function grabScreen(quality = 0, audio = true, videoOnEnd = false) {
notifyOfScreenShare();
getById("screensharebutton").classList.add("float");
getById("screensharebutton").classList.remove("float2");
getById("screensharebutton").classList.remove("green");
if (videoOnEnd == true) {
if (beforeScreenShare) {
@ -22751,7 +22779,7 @@ function addDownloadLink(fileList, UUID, pc){
}
if (session.chat == false) {
getById("chattoggle").className = "las la-comments my-float toggleSize puslate";
getById("chattoggle").className = "las la-comments toggleSize pulsate";
getById("chatbutton").className = "float";
if (getById("chatNotification").value) {
@ -24465,7 +24493,7 @@ function updateDirectorsAudio(dataN, UUID) {
label.id = "label_" + i + "_"+n + "_"+UUID;
label.htmlFor = "constraints_" + i + "_"+n + "_"+UUID;
label.innerText = capitalizeFirstLetter(i).replace(/([a-z])([A-Z])/g, '$1 $2') + ":";
label.style = "display:inline-block; padding:0;;";
label.style = "display:inline-block; padding:0;";
label.dataset.keyname = i;
label.dataset.track = n;
var input = document.createElement("select");
@ -27574,8 +27602,8 @@ function createIframePopup() {
session.screenShareElement.parentNode.removeChild(session.screenShareElement);
session.screenShareElement = false;
updateMixer();
getById("screenshare2button").classList.add("float");
getById("screenshare2button").classList.remove("float2");
// getById("screenshare2button").classList.add("float");
// getById("screenshare2button").classList.remove("float2");
return;
}
@ -27609,8 +27637,8 @@ function createIframePopup() {
updateMixer();
getById("screenshare2button").classList.add("float2");
getById("screenshare2button").classList.remove("float");
// getById("screenshare2button").classList.add("float2");
// getById("screenshare2button").classList.remove("float");
return; // ignore the rest.
}
@ -29452,7 +29480,7 @@ function getChatMessage(msg, label = false, director = false, overlay = false) {
updateMessages();
if (session.chat == false) {
getById("chattoggle").className = "las la-comments my-float toggleSize puslate";
getById("chattoggle").className = "las la-comments toggleSize pulsate";
getById("chatbutton").className = "float";
if (getById("chatNotification").value) {
@ -30192,7 +30220,7 @@ function recordLocalVideoToggle() {
if (ele.dataset.state == "0") {
ele.dataset.state = "1";
ele.style.backgroundColor = "red";
ele.innerHTML = '<i class="toggleSize my-float las la-square" ></i>';
ele.innerHTML = '<i class="toggleSize las la-square" ></i>';
if ("recording" in session.videoElement) {
} else {
@ -30213,7 +30241,7 @@ function recordLocalVideoToggle() {
}
ele.dataset.state = "0";
ele.style.backgroundColor = "";
ele.innerHTML = '<i class="toggleSize my-float las la-dot-circle" ></i>';
ele.innerHTML = '<i class="toggleSize las la-dot-circle" ></i>';
if (session.director){
var elements = document.querySelectorAll('[data-action-type="recorder-local"][data-sid="' + session.streamID + '"]');
@ -30358,7 +30386,7 @@ function recordLocalVideo(action = null, videoKbps = 6000, remote=false) { // ev
if (remote){
getById("recordLocalbutton").dataset.state = "1";
getById("recordLocalbutton").style.backgroundColor = "red";
getById("recordLocalbutton").innerHTML = '<i class="toggleSize my-float las la-square" ></i>';
getById("recordLocalbutton").innerHTML = '<i class="toggleSize las la-square" ></i>';
}
return;
} else {
@ -30388,7 +30416,7 @@ function recordLocalVideo(action = null, videoKbps = 6000, remote=false) { // ev
if (remote){
getById("recordLocalbutton").dataset.state = "1";
getById("recordLocalbutton").style.backgroundColor = "red";
getById("recordLocalbutton").innerHTML = '<i class="toggleSize my-float las la-square" ></i>';
getById("recordLocalbutton").innerHTML = '<i class="toggleSize las la-square" ></i>';
}
} else if (action == "stop") {
return;
@ -30396,7 +30424,7 @@ function recordLocalVideo(action = null, videoKbps = 6000, remote=false) { // ev
if (!remote){
getById("recordLocalbutton").dataset.state = "1";
getById("recordLocalbutton").style.backgroundColor = "red";
getById("recordLocalbutton").innerHTML = '<i class="toggleSize my-float las la-square" ></i>';
getById("recordLocalbutton").innerHTML = '<i class="toggleSize las la-square" ></i>';
}
video.recording = true;
}
@ -30438,17 +30466,17 @@ function recordLocalVideo(action = null, videoKbps = 6000, remote=false) { // ev
if (getById("recordLocalbutton").dataset.state == 2) {
getById("recordLocalbutton").dataset.state = "0";
getById("recordLocalbutton").style.backgroundColor = "";
getById("recordLocalbutton").innerHTML = '<i class="toggleSize my-float las la-exclamation" ></i>';
getById("recordLocalbutton").innerHTML = '<i class="toggleSize las la-exclamation" ></i>';
restart = false;
warnUser("Media Recording Stopped due to an error.");
} else {
getById("recordLocalbutton").innerHTML = '<i class="toggleSize my-float las la-spinner" ></i>';
getById("recordLocalbutton").innerHTML = '<i class="toggleSize las la-spinner" ></i>';
getById("recordLocalbutton").dataset.state = "2";
}
} else {
getById("recordLocalbutton").dataset.state = "0";
getById("recordLocalbutton").style.backgroundColor = "";
getById("recordLocalbutton").innerHTML = '<i class="toggleSize my-float las la-dot-circle" ></i>';
getById("recordLocalbutton").innerHTML = '<i class="toggleSize las la-dot-circle" ></i>';
if (notify){
if (!session.cleanOutput){
warnUser("A recording has stopped unexpectedly.");
@ -31015,7 +31043,7 @@ function changeGroupDirectorAPI(group, state=null, update=true){
ele.classList.add('float');
ele.style.display = "inline-block";
ele.role = "button";
ele.innerHTML = '<i class="my-float las la-users" aria-hidden="true"></i><br />'+group;
ele.innerHTML = '<i class="las la-users" aria-hidden="true"></i><br />'+group;
eleGroup.appendChild(ele);
ele.onclick = function(){
changeGroupDirectorAPI(this.dataset.group);
@ -34864,16 +34892,13 @@ async function createSecondStream() { ////////////////////////////
session.screenShareElement.srcObject = session.screenStream;
getById("screensharebutton").classList.remove("float");
getById("screensharebutton").classList.add("float2");
getById("screensharebutton").classList.add("green");
getById("screensharebutton").title = miscTranslations["stop-screen-sharing"];
getById("screenshare2button").classList.remove("float");
getById("screenshare2button").classList.add("float2");
getById("screenshare2button").classList.add("green");
getById("screenshare2button").title = miscTranslations["stop-screen-sharing"];
getById("screenshare3button").classList.remove("float");
getById("screenshare3button").classList.add("float2");
getById("screenshare3button").classList.add("green");
getById("screenshare3button").title = miscTranslations["stop-screen-sharing"];
@ -34973,16 +34998,13 @@ function stopSecondScreenshare(){
session.screenStream = false;
session.screenShareState = false;
getById("screenshare2button").classList.remove("float2");
getById("screenshare2button").classList.add("float");
getById("screensharebutton").classList.remove("green");
getById("screensharebutton").title = miscTranslations["share-a-screen"];
getById("screenshare2button").classList.remove("green");
getById("screenshare2button").title = miscTranslations["share-a-screen"];
getById("screensharebutton").classList.remove("float2");
getById("screensharebutton").classList.add("float");
getById("screensharebutton").title = miscTranslations["share-a-screen"];
getById("screenshare3button").classList.remove("float2");
getById("screenshare3button").classList.add("float");
getById("screenshare3button").classList.remove("green");
getById("screenshare3button").title = miscTranslations["share-a-screen"];
pokeIframeAPI("screen-share-state", false);

209
main.css
View File

@ -1,5 +1,6 @@
:root {
/* Discord Greys - Dark to Lighter */
--discord-grey-0: #121212;
--discord-grey-1: #1e1f22;
--discord-grey-2: #232428;
--discord-grey-3: #2b2d31;
@ -62,8 +63,12 @@
color: #FFF;
}
button:hover,[role="button"]:not(.column):hover{
filter: brightness(90%);
button:hover,[role="button"]
:not(.column)
:not(.controlsGrid)
:not(#controlButtons)
:hover{
filter: brightness(120%);
}
table {
@ -243,17 +248,45 @@ button.hint {
visibility: hidden;
}
/* #screenshare3button.green{
animation: pulse 5s infinite;
} */
/* Clicked buttons overwrite */
.red {
background-color: #840000 !important;
}
.red:hover {
background-color: #b30c0c !important;
}
.red2 {
background-color: #840000 !important;
.green {
background-color: #64c04d !important;
}
.green:hover {
background-color: #76c762 !important;
}
.blue {
background-color: #000084 !important;
background-color: #161699 !important;
}
.blue:hover {
background-color: #2727bb !important;
}
.brown {
background-color: #8d6418 !important;
}
.brown:hover {
background-color: #a06d10 !important;
}
/* ///////////////////// */
.orange {
background-color: #673100 !important;
}
@ -262,14 +295,14 @@ button.hint {
background-color: #5c7785 !important;
}
button.red {
/* button.red {
-webkit-app-region: no-drag;
padding: 10px;
margin: 10px 0px;
cursor: pointer;
border-radius: 2px;
color: white;
}
} */
button {
-webkit-app-region: no-drag;
@ -810,7 +843,7 @@ hr {
font-size: 12px;
margin: 10px 0 0 0;
}
.puslate {
.pulsate {
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(14, 19, 26, 1);
transform: scale(1);
@ -1154,33 +1187,56 @@ button.glyphicon-button.active.focus {
}
#controlButtons {
position: fixed;
z-index: 995;
bottom: 0px;
width: 100%;
justify-content: center;
align-items: center;
height: 60px;
border: 0;
pointer-events: none;
display: flex;
display: flex;
position: fixed;
z-index: 995;
bottom: 0px;
border: 0;
pointer-events: none;
width: 100%;
justify-content: center;
align-items: center;
transform-origin: bottom; /* Keeps it at bottom even if scaled */
}
#controlButtons:empty {
display: none;
}
#subControlButtons {
display: flex;
border-radius: 38px;
background-color: #030303dd;
padding: 5px 7px;
position: absolute;
pointer-events: auto;
display: flex;
background-color: var(--discord-grey-0);
box-shadow: 0px 0px 10px rgba(0,0,0,1);
margin: 5px;
pointer-events: auto;
border: #cccccc22 1px solid;
border-radius: 10px;
align-items: center;
justify-content: center;
flex-wrap: wrap;
min-width: 0%;
}
#subControlButtons:empty{
display:none;
}
#subControlButtons div {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--discord-grey-1);
opacity: unset;
border-radius: 8px;
transition: border-radius 200ms ease-in-out;
box-shadow: 1px 1px 3px rgba(0,0,0,0.75);
}
#subControlButtons div:hover {
background-color: var(--discord-grey-3);
border-radius: 4px;
}
#container.vidcon {
height:100%;
}
@ -1205,8 +1261,8 @@ button.glyphicon-button.active.focus {
}
@media only screen and (max-width: 640px){
#subControlButtons {
transform: scale(0.9) translateY(10%);
#controlButtons {
transform: scale(0.9);
}
.labelSmall {
@ -1234,16 +1290,16 @@ button.glyphicon-button.active.focus {
}
}
@media only screen and (max-width: 400px){
#subControlButtons {
transform: scale(0.8) translateY(20%);
}
}
@media only screen and (max-width: 300px){
#subControlButtons {
padding: 0px;
#controlButtons {
transform: scale(0.8);
}
}
@media only screen and (max-width: 300px){
#controlButtons {
transform: scale(0.7);
}
}
.orange{
background-color: #8d5e1a
@ -1288,34 +1344,19 @@ button.btnArmTransferRoom.selected{
}
@media only screen and (max-height: 540px){
#subControlButtons {
transform: scale(0.88);
}
#gridlayout>#container.vidcon {
height:88%
}
#controlButtons {
height:54px;
}
#copythisurl {
font-size:80%;
}
}
@media only screen and (max-height: 500px){
#subControlButtons {
transform: scale(0.87);
}
#gridlayout>#container.vidcon {
height:87%
}
#controlButtons {
height:54px;
}
}
@media only screen and (max-height: 400px){
#subControlButtons {
transform: scale(0.85);
}
#logoname{
display:none;
}
@ -1329,7 +1370,7 @@ button.btnArmTransferRoom.selected{
height:85%
}
#controlButtons {
height:50px;
transform: scale(0.9);
}
#header{
min-height:0px;
@ -1339,12 +1380,6 @@ button.btnArmTransferRoom.selected{
#gridlayout>#container.vidcon {
height:81%
}
#subControlButtons {
transform: scale(0.81);
}
#controlButtons {
height:46.2px;
}
#head2 {
display:none !important;
}
@ -1354,45 +1389,27 @@ button.btnArmTransferRoom.selected{
#gridlayout>#container.vidcon {
height:78%
}
#subControlButtons {
transform: scale(0.77);
}
#controlButtons {
height:46.2px;
transform: scale(0.8);
}
}
@media only screen and (max-height: 190px){
#gridlayout>#container.vidcon {
height:75%
}
#subControlButtons {
transform: scale(0.73);
}
#controlButtons {
height:42px
}
}
@media only screen and (max-height: 160px){
#gridlayout>#container.vidcon {
height:70%
}
#subControlButtons {
transform: scale(0.65);
}
#controlButtons {
height:38px
transform: scale(0.7);
}
}
@media only screen and (max-height: 120px){
#gridlayout>#container.vidcon {
height:70%
}
#subControlButtons {
transform: scale(0.52);
}
#controlButtons {
height:30px
}
}
#header:empty{
@ -1634,12 +1651,6 @@ select{
background-color:#ddeeff;
}
.green {
background-color:#474!important;
}
#effectSelector{
display: inline-block;
vertical-align: middle;
@ -1931,16 +1942,7 @@ input[type=range]:focus::-ms-fill-upper {
.tooltip:hover .tooltiptext {
visibility: visible;
}
#screensharebutton.float2{
background-color: #335c3a;
}
#screenshare2button.float2{
background-color: #335c3a;
}
#screenshare3button.float2{
background-color: #2bf96e88;
animation: pulse 5s infinite;
}
#previewWebcam.miconly {
display:none;
}
@ -2288,20 +2290,24 @@ span[data-action-type="stats-graphs-details-container"]>span{
.float {
opacity: 0.8;
min-width: 45px;
height: 45px;
background-color: #6666;
min-height: 45px;
height: 100%;
box-shadow: 1px 1px 3px rgba(0,0,0,0.75);
color: #FFF;
border-radius: 38px;
border-radius: 8px;
text-align: center;
margin: 5px;
pointer-events: auto;
outline:none;
padding: 5px 5px;
}
.float2 {
opacity: 0.8;
min-width: 45px;
height: 45px;
min-height: 45px;
height: 100%;
background-color: #8888;
box-shadow: 1px 1px 3px rgba(0,0,0,0.75);
color: #FFF;
border-radius: 38px;
text-align: center;
@ -2309,6 +2315,7 @@ span[data-action-type="stats-graphs-details-container"]>span{
margin: 5px;
pointer-events: auto;
outline:none;
padding: 5px 5px;
}
.rotate225 {
@ -2367,19 +2374,10 @@ iframe {
.popup .menu { margin: 2px; }
.my-float {
margin-top: 7px;
opacity: 0.9;
}
.toggleSize {
font-size: 32px;
color: white;
}
.controlsGrid-1x1 {
margin-left: auto;
margin-right: 0;
text-align: right;
}
img {
max-width: 100%;
@ -3571,6 +3569,8 @@ div#roomnotes2 {
gap: 2px;
}
.controlsGrid
.controlsGrid button i {
font-size: 15px;
}
@ -3616,7 +3616,6 @@ div#roomnotes2 {
max-width: 100%;
}
.darktheme .controlsGrid .director-message-box textarea {
background-color: var(--discord-grey-4);
color: var(--discord-text);

View File

@ -408,7 +408,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
session.audioMeterGuest = false;
} else {
log("MAKE DRAGGABLE");
delayedStartupFuncs.push([makeDraggableElement, document.getElementById("subControlButtons")]);
// delayedStartupFuncs.push([makeDraggableElement, document.getElementById("subControlButtons")]);
if (SafariVersion && !ChromeVersion){ // if desktop Safari, so macOS, give a note saying it sucks
getById("SafariWarning").classList.remove("hidden");
}
@ -888,7 +888,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
session.speakerMuted_default = session.speakerMuted;
if (session.speakerMuted){
getById("mutespeakertoggle").className = "las la-volume-mute my-float toggleSize";
getById("mutespeakertoggle").className = "las la-volume-mute toggleSize";
//getById("mutespeakerbutton").className="hidden float2 red";
getById("mutespeakerbutton").classList.add("red");
getById("mutespeakerbutton").classList.add("float2");
@ -4560,7 +4560,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
ele.classList.add('float');
ele.style.display = "inline-block";
ele.role = "button";
ele.innerHTML = '<i class="my-float las la-users" aria-hidden="true"></i><br />'+group;
ele.innerHTML = '<i class="las la-users" aria-hidden="true"></i><br />'+group;
eleGroup.appendChild(ele);
ele.onclick = function(){
changeGroupDirectorAPI(this.dataset.group);