mirror of
https://github.com/eliasstepanik/vdo.ninja.git
synced 2026-01-11 13:48:38 +00:00
#controlButtons bar updated.
This commit is contained in:
lindenkron
parent
a5f5788a3f
commit
6e5052f7e6
@ -1523,10 +1523,6 @@ iframe {
|
||||
|
||||
.popup .menu { margin: 2px; }
|
||||
|
||||
.my-float {
|
||||
margin-top: 7px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.toggleSize {
|
||||
font-size: 32px;
|
||||
color: white;
|
||||
|
||||
46
index.html
46
index.html
@ -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>
|
||||
|
||||
52
lib.js
52
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 = '<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" 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" 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 = "";
|
||||
}
|
||||
@ -12033,12 +12033,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>';
|
||||
}
|
||||
}
|
||||
|
||||
@ -15369,14 +15369,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" 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" 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 = "";
|
||||
|
||||
@ -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 = '<i class="toggleSize my-float las la-square" ></i>';
|
||||
ele.innerHTML = '<i class="toggleSize las la-square" ></i>';
|
||||
if ("recording" in session.videoElement) {
|
||||
|
||||
} else {
|
||||
@ -30194,7 +30194,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 + '"]');
|
||||
@ -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 = '<i class="toggleSize my-float las la-square" ></i>';
|
||||
getById("recordLocalbutton").innerHTML = '<i class="toggleSize las la-square" ></i>';
|
||||
}
|
||||
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 = '<i class="toggleSize my-float las la-square" ></i>';
|
||||
getById("recordLocalbutton").innerHTML = '<i class="toggleSize las la-square" ></i>';
|
||||
}
|
||||
} 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 = '<i class="toggleSize my-float las la-square" ></i>';
|
||||
getById("recordLocalbutton").innerHTML = '<i class="toggleSize las la-square" ></i>';
|
||||
}
|
||||
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 = '<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.");
|
||||
@ -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 = '<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);
|
||||
|
||||
83
main.css
83
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);
|
||||
|
||||
4
main.js
4
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 = '<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);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user