From 6e5052f7e6cdb51ef1cb48d2b59a6e79582737b5 Mon Sep 17 00:00:00 2001 From: lindenkron Date: Sat, 8 Apr 2023 19:24:14 +0200 Subject: [PATCH 1/8] #controlButtons bar updated. --- examples/main.css | 4 --- index.html | 46 +++++++++++++------------- lib.js | 52 ++++++++++++++--------------- main.css | 83 ++++++++++++++++++++++++++++++----------------- main.js | 4 +-- 5 files changed, 104 insertions(+), 85 deletions(-) diff --git a/examples/main.css b/examples/main.css index 025eefd..04019f9 100644 --- a/examples/main.css +++ b/examples/main.css @@ -1523,10 +1523,6 @@ iframe { .popup .menu { margin: 2px; } -.my-float { - margin-top: 7px; - opacity: 0.9; -} .toggleSize { font-size: 32px; color: white; diff --git a/index.html b/index.html index a587364..2ce816c 100644 --- a/index.html +++ b/index.html @@ -137,85 +137,85 @@
- +
diff --git a/lib.js b/lib.js index 132b925..6c3e1d5 100644 --- a/lib.js +++ b/lib.js @@ -10305,7 +10305,7 @@ 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"; + getById("mutetoggle").className = "las la-microphone-slash toggleSize"; if (!(session.cleanOutput)){ getById("mutebutton").classList.remove("float"); getById("mutebutton").classList.add("float2"); @@ -10331,7 +10331,7 @@ 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"); @@ -10396,7 +10396,7 @@ 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"; } @@ -10416,7 +10416,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"; } @@ -10512,13 +10512,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("chattoggle").className = "las la-comment-dots toggleSize"; getById("chatbutton").className = "float2"; 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"; @@ -10661,7 +10661,7 @@ 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"); @@ -10676,7 +10676,7 @@ 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"); @@ -10691,7 +10691,7 @@ 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"); @@ -10866,10 +10866,10 @@ function hangup2() { getById("screensharebutton").classList.remove("float2"); if (session.showDirector == false) { - getById("miniPerformer").innerHTML = ''; + getById("miniPerformer").innerHTML = ''; miniTranslate(getById("miniPerformer")); } else { - getById("miniPerformer").innerHTML = ''; + getById("miniPerformer").innerHTML = ''; } getById("miniPerformer").className = ""; } @@ -12033,12 +12033,12 @@ function blindAllGuests(ele, event=false){ ele.value = 0; ele.classList.remove("pressed"); ele.classList.remove("red"); - ele.innerHTML = ''; + ele.innerHTML = ''; } else { ele.value = 1; ele.classList.add("pressed"); ele.classList.add("red"); - ele.innerHTML = ''; + ele.innerHTML = ''; } } @@ -15369,14 +15369,14 @@ async function createRoomCallback(passAdd, passAdd2) { } if (session.showDirector == false) { - getById("miniPerformer").innerHTML = ''; + getById("miniPerformer").innerHTML = ''; 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 = ''; + getById("miniPerformer").innerHTML = ''; } getById("miniPerformer").className = ""; @@ -22732,7 +22732,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 puslate"; getById("chatbutton").className = "float"; if (getById("chatNotification").value) { @@ -29433,7 +29433,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 puslate"; getById("chatbutton").className = "float"; if (getById("chatNotification").value) { @@ -30173,7 +30173,7 @@ function recordLocalVideoToggle() { if (ele.dataset.state == "0") { ele.dataset.state = "1"; ele.style.backgroundColor = "red"; - ele.innerHTML = ''; + ele.innerHTML = ''; if ("recording" in session.videoElement) { } else { @@ -30194,7 +30194,7 @@ function recordLocalVideoToggle() { } ele.dataset.state = "0"; ele.style.backgroundColor = ""; - ele.innerHTML = ''; + ele.innerHTML = ''; if (session.director){ var elements = document.querySelectorAll('[data-action-type="recorder-local"][data-sid="' + session.streamID + '"]'); @@ -30339,7 +30339,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 = ''; + getById("recordLocalbutton").innerHTML = ''; } return; } else { @@ -30369,7 +30369,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 = ''; + getById("recordLocalbutton").innerHTML = ''; } } else if (action == "stop") { return; @@ -30377,7 +30377,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 = ''; + getById("recordLocalbutton").innerHTML = ''; } video.recording = true; } @@ -30419,17 +30419,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 = ''; + getById("recordLocalbutton").innerHTML = ''; restart = false; warnUser("Media Recording Stopped due to an error."); } else { - getById("recordLocalbutton").innerHTML = ''; + getById("recordLocalbutton").innerHTML = ''; getById("recordLocalbutton").dataset.state = "2"; } } else { getById("recordLocalbutton").dataset.state = "0"; getById("recordLocalbutton").style.backgroundColor = ""; - getById("recordLocalbutton").innerHTML = ''; + getById("recordLocalbutton").innerHTML = ''; if (notify){ if (!session.cleanOutput){ warnUser("A recording has stopped unexpectedly."); @@ -30996,7 +30996,7 @@ function changeGroupDirectorAPI(group, state=null, update=true){ ele.classList.add('float'); ele.style.display = "inline-block"; ele.role = "button"; - ele.innerHTML = '
'+group; + ele.innerHTML = '
'+group; eleGroup.appendChild(ele); ele.onclick = function(){ changeGroupDirectorAPI(this.dataset.group); diff --git a/main.css b/main.css index 3c6304b..56833f3 100644 --- a/main.css +++ b/main.css @@ -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 { @@ -246,6 +251,9 @@ button.hint { .red { background-color: #840000 !important; } +.red:hover { + background-color: #b30c0c !important; +} .red2 { background-color: #840000 !important; @@ -1154,33 +1162,54 @@ 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; + width: 100%; + justify-content: center; + align-items: center; + height: 60px; + border: 0; + pointer-events: none; } #controlButtons:empty { display: none; } #subControlButtons { - display: flex; - border-radius: 38px; - background-color: #030303dd; - padding: 5px 7px; - position: absolute; - pointer-events: auto; + display: flex; + border-radius: 38px; + background-color: var(--discord-grey-0); + box-shadow: 0px 0px 10px rgba(0,0,0,1); + top: -10px; + position: absolute; + pointer-events: auto; + border: #cccccc22 1px solid; + border-radius: 10px; } + #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%; } @@ -2289,9 +2318,10 @@ span[data-action-type="stats-graphs-details-container"]>span{ opacity: 0.8; min-width: 45px; height: 45px; - background-color: #6666; + background-color: #66b16a66; + 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; @@ -2302,6 +2332,7 @@ span[data-action-type="stats-graphs-details-container"]>span{ min-width: 45px; height: 45px; background-color: #8888; + box-shadow: 1px 1px 3px rgba(0,0,0,0.75); color: #FFF; border-radius: 38px; text-align: center; @@ -2367,19 +2398,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 +3593,8 @@ div#roomnotes2 { gap: 2px; } +.controlsGrid + .controlsGrid button i { font-size: 15px; } @@ -3616,7 +3640,6 @@ div#roomnotes2 { max-width: 100%; } - .darktheme .controlsGrid .director-message-box textarea { background-color: var(--discord-grey-4); color: var(--discord-text); diff --git a/main.js b/main.js index f70ef30..31a2840 100644 --- a/main.js +++ b/main.js @@ -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"); @@ -4557,7 +4557,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 = '
'+group; + ele.innerHTML = '
'+group; eleGroup.appendChild(ele); ele.onclick = function(){ changeGroupDirectorAPI(this.dataset.group); From ffc478bed5fded4f5322e150bcce63d8dcb5a11d Mon Sep 17 00:00:00 2001 From: lindenkron Date: Sat, 8 Apr 2023 23:52:19 +0200 Subject: [PATCH 2/8] Control Bar Mobile Sizing --- main.css | 85 +++++++++++++++++--------------------------------------- 1 file changed, 26 insertions(+), 59 deletions(-) diff --git a/main.css b/main.css index 56833f3..ddb13ba 100644 --- a/main.css +++ b/main.css @@ -1166,12 +1166,12 @@ button.glyphicon-button.active.focus { position: fixed; z-index: 995; bottom: 0px; + border: 0; + pointer-events: none; width: 100%; justify-content: center; align-items: center; - height: 60px; - border: 0; - pointer-events: none; + transform-origin: bottom; /* Keeps it at bottom even if scaled */ } #controlButtons:empty { display: none; @@ -1179,14 +1179,16 @@ button.glyphicon-button.active.focus { #subControlButtons { display: flex; - border-radius: 38px; background-color: var(--discord-grey-0); box-shadow: 0px 0px 10px rgba(0,0,0,1); - top: -10px; - position: absolute; + 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{ @@ -1234,8 +1236,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 { @@ -1263,16 +1265,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 @@ -1317,34 +1319,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; } @@ -1358,7 +1345,7 @@ button.btnArmTransferRoom.selected{ height:85% } #controlButtons { - height:50px; + transform: scale(0.9); } #header{ min-height:0px; @@ -1368,12 +1355,6 @@ button.btnArmTransferRoom.selected{ #gridlayout>#container.vidcon { height:81% } - #subControlButtons { - transform: scale(0.81); - } - #controlButtons { - height:46.2px; - } #head2 { display:none !important; } @@ -1383,45 +1364,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{ @@ -2317,7 +2280,8 @@ span[data-action-type="stats-graphs-details-container"]>span{ .float { opacity: 0.8; min-width: 45px; - height: 45px; + min-height: 45px; + height: 100%; background-color: #66b16a66; box-shadow: 1px 1px 3px rgba(0,0,0,0.75); color: #FFF; @@ -2326,11 +2290,13 @@ span[data-action-type="stats-graphs-details-container"]>span{ 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; @@ -2340,6 +2306,7 @@ span[data-action-type="stats-graphs-details-container"]>span{ margin: 5px; pointer-events: auto; outline:none; + padding: 5px 5px; } .rotate225 { From d249314f67aab719977ce6c06d966e6d63d3c818 Mon Sep 17 00:00:00 2001 From: lindenkron Date: Sun, 9 Apr 2023 02:16:43 +0200 Subject: [PATCH 3/8] Replaces draggable function --- lib.js | 205 +++++++++++++++++++++++++++++++++----------------------- main.js | 2 +- 2 files changed, 122 insertions(+), 85 deletions(-) diff --git a/lib.js b/lib.js index 6c3e1d5..2dd41d1 100644 --- a/lib.js +++ b/lib.js @@ -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); } diff --git a/main.js b/main.js index 31a2840..318f7c2 100644 --- a/main.js +++ b/main.js @@ -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"); } From b500b68ce396547e9e200b3544f61a568043d034 Mon Sep 17 00:00:00 2001 From: steveseguin Date: Sun, 9 Apr 2023 08:40:25 -0400 Subject: [PATCH 4/8] fix for screenshare state not ending right --- lib.js | 36 ++++++++++++++++++++---------------- 1 file changed, 20 insertions(+), 16 deletions(-) diff --git a/lib.js b/lib.js index 2dd41d1..4fecd60 100644 --- a/lib.js +++ b/lib.js @@ -19207,23 +19207,27 @@ async function toggleScreenShare(reload = false) { //////////////////////////// } var addedAlready = false; - session.streamSrc.getVideoTracks().forEach(function(track) { - if (beforeScreenShare && (track.id == beforeScreenShare.id)){ - addedAlready=true; - } else { - session.streamSrc.removeTrack(track); - track.stop(); - } - }); + if (session.streamSrc){ + session.streamSrc.getVideoTracks().forEach(function(track) { + if (beforeScreenShare && (track.id == beforeScreenShare.id)){ + addedAlready=true; + } else { + session.streamSrc.removeTrack(track); + track.stop(); + } + }); + } - session.streamSrcClone.getVideoTracks().forEach(function(track) { - if (beforeScreenShare && (track.id == beforeScreenShare.id)){ - // - } else { - session.streamSrcClone.removeTrack(track); - track.stop(); - } - }); + if (session.streamSrcClone){ + session.streamSrcClone.getVideoTracks().forEach(function(track) { + if (beforeScreenShare && (track.id == beforeScreenShare.id)){ + // + } else { + session.streamSrcClone.removeTrack(track); + track.stop(); + } + }); + } if (session.videoElement && session.videoElement.srcObject){ session.videoElement.srcObject.getVideoTracks().forEach(function(track) { From a645d7ec8d70662d5755659c159c8cac671ec758 Mon Sep 17 00:00:00 2001 From: lindenkron Date: Sun, 9 Apr 2023 16:03:37 +0200 Subject: [PATCH 5/8] Initial test --- lib.js | 150 ++++++++++++++++++++++++++++--------------------------- main.css | 55 +++++++++++--------- 2 files changed, 109 insertions(+), 96 deletions(-) diff --git a/lib.js b/lib.js index 4fecd60..a8b996a 100644 --- a/lib.js +++ b/lib.js @@ -2426,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; @@ -2439,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(); @@ -5687,8 +5687,8 @@ eventer(messageEvent, function(e) { // this listens for child IFRAMES. session.screenShareElement = false; updateMixer(); - getById("screenshare2button").classList.add("float"); - getById("screenshare2button").classList.remove("float2"); + // getById("screenshare2button").classList.add("float"); + // getById("screenshare2button").classList.remove("float2"); } } } else if (e.data.action == "video-loaded") { @@ -10344,10 +10344,10 @@ function toggleMute(apply = false, event=false) { // TODO: I need to have this b session.muted = true; getById("mutetoggle").className = "las la-microphone-slash toggleSize"; if (!(session.cleanOutput)){ - getById("mutebutton").classList.remove("float"); - getById("mutebutton").classList.add("float2"); + // getById("mutebutton").classList.remove("float"); + // getById("mutebutton").classList.add("float2"); getById("mutebutton").classList.add("red"); - getById("mutebutton").classList.add("puslate"); + getById("mutebutton").classList.add("pulsate"); getById("header").classList.add('red'); if (session.localMuteElement){ @@ -10371,10 +10371,10 @@ function toggleMute(apply = false, event=false) { // TODO: I need to have this b getById("mutetoggle").className = "las la-microphone toggleSize"; if (!(session.cleanOutput)){ - getById("mutebutton").classList.add("float"); - getById("mutebutton").classList.remove("float2"); + // getById("mutebutton").classList.add("float"); + // getById("mutebutton").classList.remove("float2"); getById("mutebutton").classList.remove("red"); - getById("mutebutton").classList.remove("puslate"); + getById("mutebutton").classList.remove("pulsate"); getById("header").classList.remove('red'); @@ -10435,7 +10435,7 @@ function toggleSpeakerMute(apply = false) { // TODO: I need to have this be MUTE session.speakerMuted = true; 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"); @@ -10550,7 +10550,7 @@ function toggleChat(event = null) { // TODO: I need to have this be MUTE, toggle }); session.chat = true; getById("chattoggle").className = "las la-comment-dots toggleSize"; - getById("chatbutton").className = "float2"; + getById("chatbutton").className = "float"; getById("chatModule").style.display = "block"; getById("chatInput").focus(); // give it keyboard focus } else { @@ -10700,8 +10700,8 @@ function toggleVideoMute(apply = false) { // TODO: I need to have this be MUTE, session.videoMuted = true; 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"); } @@ -10716,7 +10716,7 @@ function toggleVideoMute(apply = false) { // TODO: I need to have this be MUTE, 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) { @@ -10731,7 +10731,7 @@ function toggleVideoMute(apply = false) { // TODO: I need to have this be MUTE, 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) => { @@ -10824,8 +10824,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 @@ -10842,8 +10843,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); @@ -10899,14 +10902,14 @@ 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.add("float"); + // getById("screensharebutton").classList.remove("float2"); if (session.showDirector == false) { - getById("miniPerformer").innerHTML = ''; + getById("miniPerformer").innerHTML = ''; miniTranslate(getById("miniPerformer")); } else { - getById("miniPerformer").innerHTML = ''; + getById("miniPerformer").innerHTML = ''; } getById("miniPerformer").className = ""; } @@ -11691,7 +11694,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); @@ -11699,7 +11702,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; @@ -11708,7 +11711,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"); @@ -11725,7 +11728,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"); } } @@ -11823,7 +11826,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"; @@ -11835,7 +11838,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; @@ -11857,7 +11860,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"); @@ -11895,7 +11898,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){ @@ -11916,17 +11919,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 = ' -' + (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 = ' ' + (minutes) + "m : " + zpadTime(seconds) + "s"; } } else { elements[0].classList.remove("pressed"); - elements[0].classList.remove("red2"); + elements[0].classList.remove("red"); elements[0].innerHTML = ' Create Timer'; } } @@ -12681,7 +12684,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"; @@ -12712,7 +12715,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){ @@ -15406,14 +15409,14 @@ async function createRoomCallback(passAdd, passAdd2) { } if (session.showDirector == false) { - getById("miniPerformer").innerHTML = ''; + getById("miniPerformer").innerHTML = ''; 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 = ''; + getById("miniPerformer").innerHTML = ''; } getById("miniPerformer").className = ""; @@ -17927,8 +17930,8 @@ function gotDevices2(deviceInfos) { notifyOfScreenShare(); //session.refreshScale(); } - getById("screensharebutton").classList.add("float"); - getById("screensharebutton").classList.remove("float2"); + // getById("screensharebutton").classList.add("float"); + // getById("screensharebutton").classList.remove("float2"); } }; @@ -19132,8 +19135,8 @@ async function toggleScreenShare(reload = false) { //////////////////////////// notifyOfScreenShare(); - getById("screensharebutton").classList.add("float2"); - getById("screensharebutton").classList.remove("float"); + // getById("screensharebutton").classList.add("float2"); + // getById("screensharebutton").classList.remove("float"); enumerateDevices().then(gotDevices2).then(function() {}); pokeIframeAPI("screen-share-state", true); @@ -19151,8 +19154,8 @@ async function toggleScreenShare(reload = false) { //////////////////////////// //session.refreshScale(); - getById("screensharebutton").classList.add("float2"); - getById("screensharebutton").classList.remove("float"); + // getById("screensharebutton").classList.add("float2"); + // getById("screensharebutton").classList.remove("float"); enumerateDevices().then(gotDevices2).then(function() {}); //if (session.videoElement.readyState!==4){ @@ -19240,8 +19243,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.add("float"); // disable the button after we know the tracks are disabled + // getById("screensharebutton").classList.remove("float2"); if (beforeScreenShare){ if (addedAlready==false){ @@ -19837,8 +19840,8 @@ async function grabScreen(quality = 0, audio = true, videoOnEnd = false) { notifyOfScreenShare(); - getById("screensharebutton").classList.add("float"); - getById("screensharebutton").classList.remove("float2"); + // getById("screensharebutton").classList.add("float"); + // getById("screensharebutton").classList.remove("float2"); if (videoOnEnd == true) { if (beforeScreenShare) { @@ -22773,7 +22776,7 @@ function addDownloadLink(fileList, UUID, pc){ } if (session.chat == false) { - getById("chattoggle").className = "las la-comments toggleSize puslate"; + getById("chattoggle").className = "las la-comments toggleSize pulsate"; getById("chatbutton").className = "float"; if (getById("chatNotification").value) { @@ -27596,8 +27599,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; } @@ -27631,8 +27634,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. } @@ -29474,7 +29477,7 @@ function getChatMessage(msg, label = false, director = false, overlay = false) { updateMessages(); if (session.chat == false) { - getById("chattoggle").className = "las la-comments toggleSize puslate"; + getById("chattoggle").className = "las la-comments toggleSize pulsate"; getById("chatbutton").className = "float"; if (getById("chatNotification").value) { @@ -34886,16 +34889,17 @@ async function createSecondStream() { //////////////////////////// session.screenShareElement.srcObject = session.screenStream; - getById("screensharebutton").classList.remove("float"); - getById("screensharebutton").classList.add("float2"); + // getById("screensharebutton").classList.remove("float"); + 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.remove("float"); + 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.remove("float"); + getById("screenshare3button").classList.add("green"); + getById("screenshare3button").classList.add("pulsate"); getById("screenshare3button").title = miscTranslations["stop-screen-sharing"]; @@ -34995,16 +34999,16 @@ function stopSecondScreenshare(){ session.screenStream = false; session.screenShareState = false; - getById("screenshare2button").classList.remove("float2"); - getById("screenshare2button").classList.add("float"); + // getById("screenshare2button").classList.remove("float2"); + getById("screenshare2button").classList.add("green"); getById("screenshare2button").title = miscTranslations["share-a-screen"]; - getById("screensharebutton").classList.remove("float2"); - getById("screensharebutton").classList.add("float"); + // getById("screensharebutton").classList.remove("float2"); + getById("screensharebutton").classList.add("green"); getById("screensharebutton").title = miscTranslations["share-a-screen"]; - getById("screenshare3button").classList.remove("float2"); - getById("screenshare3button").classList.add("float"); + // getById("screenshare3button").classList.remove("float2"); + getById("screenshare3button").classList.add("green"); getById("screenshare3button").title = miscTranslations["share-a-screen"]; pokeIframeAPI("screen-share-state", false); diff --git a/main.css b/main.css index ddb13ba..072b1ba 100644 --- a/main.css +++ b/main.css @@ -248,6 +248,12 @@ button.hint { visibility: hidden; } + +/* #screenshare3button.green{ + animation: pulse 5s infinite; +} */ + +/* Clicked buttons overwrite */ .red { background-color: #840000 !important; } @@ -255,13 +261,32 @@ button.hint { 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; } @@ -270,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; @@ -818,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); @@ -1626,12 +1651,6 @@ select{ background-color:#ddeeff; } -.green { - background-color:#474!important; -} - - - #effectSelector{ display: inline-block; vertical-align: middle; @@ -1923,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; } @@ -2282,7 +2292,6 @@ span[data-action-type="stats-graphs-details-container"]>span{ min-width: 45px; min-height: 45px; height: 100%; - background-color: #66b16a66; box-shadow: 1px 1px 3px rgba(0,0,0,0.75); color: #FFF; border-radius: 8px; From d489c5ffbc56b0efcddf58756de25570175c163a Mon Sep 17 00:00:00 2001 From: lindenkron Date: Sun, 9 Apr 2023 17:05:06 +0200 Subject: [PATCH 6/8] Fixed turning off screenshare color. --- lib.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lib.js b/lib.js index a8b996a..1c3b1a8 100644 --- a/lib.js +++ b/lib.js @@ -35000,15 +35000,15 @@ function stopSecondScreenshare(){ session.screenShareState = false; // getById("screenshare2button").classList.remove("float2"); - getById("screenshare2button").classList.add("green"); + getById("screenshare2button").classList.remove("green"); getById("screenshare2button").title = miscTranslations["share-a-screen"]; // getById("screensharebutton").classList.remove("float2"); - getById("screensharebutton").classList.add("green"); + getById("screensharebutton").classList.remove("green"); getById("screensharebutton").title = miscTranslations["share-a-screen"]; // getById("screenshare3button").classList.remove("float2"); - getById("screenshare3button").classList.add("green"); + getById("screenshare3button").classList.remove("green"); getById("screenshare3button").title = miscTranslations["share-a-screen"]; pokeIframeAPI("screen-share-state", false); From 657142a6a84b9eb702850e2b9ff0be089a022d08 Mon Sep 17 00:00:00 2001 From: lindenkron Date: Sun, 9 Apr 2023 19:07:18 +0200 Subject: [PATCH 7/8] Fixes to button off state. --- lib.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/lib.js b/lib.js index 1c3b1a8..f36e939 100644 --- a/lib.js +++ b/lib.js @@ -19134,7 +19134,6 @@ async function toggleScreenShare(reload = false) { //////////////////////////// notifyOfScreenShare(); - // getById("screensharebutton").classList.add("float2"); // getById("screensharebutton").classList.remove("float"); enumerateDevices().then(gotDevices2).then(function() {}); @@ -19154,6 +19153,8 @@ async function toggleScreenShare(reload = false) { //////////////////////////// //session.refreshScale(); + getById("screensharebutton").classList.add("green"); + getById("screensharebutton").classList.add("pulsate"); // getById("screensharebutton").classList.add("float2"); // getById("screensharebutton").classList.remove("float"); enumerateDevices().then(gotDevices2).then(function() {}); @@ -19242,7 +19243,9 @@ async function toggleScreenShare(reload = false) { //////////////////////////// } }); } - + + getById("screensharebutton").classList.remove("green"); + getById("screensharebutton").classList.remove("pulsate"); // getById("screensharebutton").classList.add("float"); // disable the button after we know the tracks are disabled // getById("screensharebutton").classList.remove("float2"); @@ -24490,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"); @@ -34999,13 +35002,13 @@ function stopSecondScreenshare(){ session.screenStream = false; session.screenShareState = false; - // getById("screenshare2button").classList.remove("float2"); - getById("screenshare2button").classList.remove("green"); - getById("screenshare2button").title = miscTranslations["share-a-screen"]; - // getById("screensharebutton").classList.remove("float2"); getById("screensharebutton").classList.remove("green"); getById("screensharebutton").title = miscTranslations["share-a-screen"]; + + // getById("screenshare2button").classList.remove("float2"); + getById("screenshare2button").classList.remove("green"); + getById("screenshare2button").title = miscTranslations["share-a-screen"]; // getById("screenshare3button").classList.remove("float2"); getById("screenshare3button").classList.remove("green"); From 983667ecdc7c45de0681642096546506a9b2305f Mon Sep 17 00:00:00 2001 From: lindenkron Date: Sun, 9 Apr 2023 19:28:14 +0200 Subject: [PATCH 8/8] Final screenshare, no pulsate --- lib.js | 43 ++++++++++--------------------------------- 1 file changed, 10 insertions(+), 33 deletions(-) diff --git a/lib.js b/lib.js index f36e939..41f7696 100644 --- a/lib.js +++ b/lib.js @@ -5687,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") { @@ -10343,11 +10341,8 @@ 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 toggleSize"; - if (!(session.cleanOutput)){ - // getById("mutebutton").classList.remove("float"); - // getById("mutebutton").classList.add("float2"); - getById("mutebutton").classList.add("red"); - getById("mutebutton").classList.add("pulsate"); + if (!(session.cleanOutput)){ + getById("mutebutton").classList.add("red", "pulsate"); getById("header").classList.add('red'); if (session.localMuteElement){ @@ -10373,9 +10368,7 @@ function toggleMute(apply = false, event=false) { // TODO: I need to have this b // getById("mutebutton").classList.add("float"); // getById("mutebutton").classList.remove("float2"); - getById("mutebutton").classList.remove("red"); - getById("mutebutton").classList.remove("pulsate"); - + getById("mutebutton").classList.remove("red", "pulsate"); getById("header").classList.remove('red'); if (session.localMuteElement){ @@ -10902,8 +10895,7 @@ 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 = ''; @@ -17930,8 +17922,7 @@ function gotDevices2(deviceInfos) { notifyOfScreenShare(); //session.refreshScale(); } - // getById("screensharebutton").classList.add("float"); - // getById("screensharebutton").classList.remove("float2"); + getById("screensharebutton").classList.remove("green"); } }; @@ -19133,9 +19124,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); @@ -19153,10 +19143,7 @@ async function toggleScreenShare(reload = false) { //////////////////////////// //session.refreshScale(); - getById("screensharebutton").classList.add("green"); - getById("screensharebutton").classList.add("pulsate"); - // 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){ @@ -19245,9 +19232,6 @@ async function toggleScreenShare(reload = false) { //////////////////////////// } getById("screensharebutton").classList.remove("green"); - getById("screensharebutton").classList.remove("pulsate"); - // getById("screensharebutton").classList.add("float"); // disable the button after we know the tracks are disabled - // getById("screensharebutton").classList.remove("float2"); if (beforeScreenShare){ if (addedAlready==false){ @@ -19843,8 +19827,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) { @@ -34892,17 +34876,13 @@ async function createSecondStream() { //////////////////////////// session.screenShareElement.srcObject = session.screenStream; - // getById("screensharebutton").classList.remove("float"); getById("screensharebutton").classList.add("green"); getById("screensharebutton").title = miscTranslations["stop-screen-sharing"]; - // getById("screenshare2button").classList.remove("float"); getById("screenshare2button").classList.add("green"); getById("screenshare2button").title = miscTranslations["stop-screen-sharing"]; - // getById("screenshare3button").classList.remove("float"); getById("screenshare3button").classList.add("green"); - getById("screenshare3button").classList.add("pulsate"); getById("screenshare3button").title = miscTranslations["stop-screen-sharing"]; @@ -35002,15 +34982,12 @@ function stopSecondScreenshare(){ session.screenStream = false; session.screenShareState = false; - // getById("screensharebutton").classList.remove("float2"); getById("screensharebutton").classList.remove("green"); getById("screensharebutton").title = miscTranslations["share-a-screen"]; - // getById("screenshare2button").classList.remove("float2"); getById("screenshare2button").classList.remove("green"); getById("screenshare2button").title = miscTranslations["share-a-screen"]; - // getById("screenshare3button").classList.remove("float2"); getById("screenshare3button").classList.remove("green"); getById("screenshare3button").title = miscTranslations["share-a-screen"]; pokeIframeAPI("screen-share-state", false);