mirror of
https://github.com/eliasstepanik/vdo.ninja.git
synced 2026-01-11 21:58:35 +00:00
Merge pull request #1013 from Andrew-Gallimore/develop
Fixed & Updated Guest Control-Button UI
This commit is contained in:
Steve Seguin
GitHub
commit
03471cc5e2
630
index.html
630
index.html
@ -1337,114 +1337,123 @@
|
||||
<div id="overlayMsgs" onclick="this.innerHTML = '';" style="display:none"></div>
|
||||
<div id="stickyMsgs" class="hidden"></div>
|
||||
<div id="bigPlayButton" onclick="this.innerHTML = '';" style="display:none"></div>
|
||||
|
||||
<!-- Guest & Director Control-Buttons Box -->
|
||||
<div id="controls_blank" class="hidden controlCenterBox">
|
||||
<div class="controlsGrid">
|
||||
|
||||
<button data-action-type="forward" class="mainonly advanced" title="Move the user to another room, controlled by another director" onclick="directMigrate(this, event);">
|
||||
<i class="las la-paper-plane"></i>
|
||||
<span data-translate="forward-to-room">Transfer</span>
|
||||
</button>
|
||||
|
||||
<button data-action-type="direct-chat" class="mainonly" title="Send a Direct Message to this user." onclick="directorSendMessage(this);">
|
||||
<i class="las la-envelope"></i>
|
||||
<span data-translate="send-direct-chat">Message</span>
|
||||
</button>
|
||||
<span class="director-message-box hidden" data-action-type="messaging-box">
|
||||
|
||||
<textarea data-action-type="messaging-box-text" placeholder="Enter your message here"></textarea>
|
||||
<button data-action-type="messaging-box-close" class="">
|
||||
<i class="las la-times"></i>
|
||||
<span data-translate="close">close</span>
|
||||
<!-- General Controls -->
|
||||
<div class="row two">
|
||||
<button data-action-type="forward" class="mainonly advanced" title="Move the user to another room, controlled by another director" onclick="directMigrate(this, event);">
|
||||
<i class="las la-paper-plane"></i>
|
||||
<span data-translate="forward-to-room">Transfer</span>
|
||||
</button>
|
||||
<span data-action-type="messaging-box-toggle" title="Toggle between the message appearing as a large overlay and as normal chat" >
|
||||
<i class="las la-bell" style="font-size:170%; color:#FFF; cursor:pointer;"></i>
|
||||
<button data-action-type="direct-chat" class="mainonly" title="Send a Direct Message to this user." onclick="directorSendMessage(this);">
|
||||
<i class="las la-envelope"></i>
|
||||
<span data-translate="send-direct-chat">Message</span>
|
||||
</button>
|
||||
|
||||
<!-- Messaging integrated menu -->
|
||||
<span class="director-message-box hidden" data-action-type="messaging-box">
|
||||
<textarea data-action-type="messaging-box-text" placeholder="Enter your message here"></textarea>
|
||||
|
||||
<span data-action-type="messaging-box-toggle" title="Toggle between the message appearing as a large overlay and as normal chat">
|
||||
<i class="las la-bell" style="font-size:170%; color:#FFF; cursor:pointer;"></i>
|
||||
</span>
|
||||
<button class="message-close" data-action-type="messaging-box-close">
|
||||
<i class="las la-times"></i>
|
||||
<span data-translate="close">close</span>
|
||||
</button>
|
||||
<button class="message-send" data-action-type="messaging-box-send">
|
||||
<i class="las la-reply"></i>
|
||||
<span data-translate="send-message">send message</span>
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<button data-action-type="hangup" class="mainonly" title="Force the user to Disconnect. They can always reconnect." onclick="directHangup(this, event);">
|
||||
<i class="las la-sign-out-alt" style="color:#900"></i>
|
||||
<span data-translate="disconnect-guest">Hangup</span>
|
||||
|
||||
</button>
|
||||
<button data-action-type="solo-chat" class="mainonly advanced" title="Toggle solo voice chat or hold CTRL/CMD when selecting to make it two-way private." onclick="session.toggleSoloChat(this.dataset.UUID, event);">
|
||||
<i class="las la-microphone" style="color:#090"></i>
|
||||
<span data-translate="voice-chat">Solo Talk</span>
|
||||
</button>
|
||||
|
||||
<button data-action-type="solo-video" class="btn-HL-yellow advanced" title="Solo this video everywhere" onclick="requestInfocus(this);">
|
||||
<i class="las la-user"></i>
|
||||
<span data-translate="solo-video">Highlight guest</span>
|
||||
</button>
|
||||
<button data-action-type="addToScene" class="btn-HL-peach advanced" title="Add this Video to any remote '&scene=1'" onclick="directEnable(this, event);">
|
||||
<i class="las la-plus-square" style="color:#060"></i>
|
||||
<span data-translate="add-to-scene">add to scene 1</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Volume & Mute Controls -->
|
||||
<div class="row fourth">
|
||||
<span class="tooltip" style="border: 0;">
|
||||
<input data-action-type="volume" type="range" min="0" max="200" value="100" title="Remotely change the volume of this guest; updates on release. Dbl-click to reset." oninput="remoteVolumeUI(this)" onchange="remoteVolume(this);" ondblclick="this.value=100;remoteVolume(this);remoteVolumeUI(this);" />
|
||||
<span class="tooltiptext" style='overflow: auto;left: 35%;width: 3em;top: -15px;margin: 0;position: absolute;font-family:"Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus,Code2000, Code2001, Code2002, Musica, serif, LastResort;' >100</span>
|
||||
</span>
|
||||
<button data-action-type="messaging-box-send">
|
||||
<i class="las la-reply"></i>
|
||||
<span data-translate="send-message">send message</span>
|
||||
<button data-action-type="mute-guest" class="center" value="0" title="Mute this guest everywhere" onclick="remoteMute(this, event);">
|
||||
<i class="las la-microphone-slash" style="color:#900"></i>
|
||||
</button>
|
||||
|
||||
</span>
|
||||
<button data-action-type="hangup" class="mainonly" title="Force the user to Disconnect. They can always reconnect." onclick="directHangup(this, event);">
|
||||
<i class="las la-sign-out-alt" style="color:#900"></i>
|
||||
<span data-translate="disconnect-guest" >Hangup</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button data-action-type="solo-chat" class="mainonly advanced" title="Toggle solo voice chat or hold CTRL/CMD when selecting to make it two-way private." onclick="session.toggleSoloChat(this.dataset.UUID, event);">
|
||||
<i class="las la-microphone" style="color:#090"></i>
|
||||
<span data-translate="voice-chat">Solo Talk</span>
|
||||
</button>
|
||||
|
||||
<button data-action-type="addToScene" class="advanced" data-scene="1" title="Add this Video to any remote '&scene=1'" onclick="directEnable(this, event);">
|
||||
<i class="las la-plus-square" style="color:#060"></i>
|
||||
<span data-translate="add-to-scene">add to scene 1</span>
|
||||
</button>
|
||||
|
||||
<button data-action-type="solo-video" class="advanced" style="text-shadow: 0px 0px yellow;" title="Solo this video everywhere. Using CTRL (cmd) will limit area to 75%." onclick="requestInfocus(this, event);">
|
||||
<i class="las la-user"></i>
|
||||
<span data-translate="solo-video">Highlight guest</span>
|
||||
</button>
|
||||
|
||||
<span class="tooltip" style="border: 0;">
|
||||
<input data-action-type="volume" type="range" min="0" max="200" value="100" title="Remotely change the volume of this guest; updates on release. Dbl-click to reset." oninput="remoteVolumeUI(this)" onchange="remoteVolume(this);" ondblclick="this.value=100;remoteVolume(this);remoteVolumeUI(this);" />
|
||||
<span class="tooltiptext" style='overflow: auto;left: 35%;width: 3em;top: -15px;margin: 0;position: absolute;font-family:"Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus,Code2000, Code2001, Code2002, Musica, serif, LastResort;' >100</span>
|
||||
</span>
|
||||
|
||||
<button data-action-type="mute-guest" value="0" title="Mute this guest everywhere" onclick="remoteMute(this, event);">
|
||||
<i class="las la-microphone-slash" style="color:#900"></i>
|
||||
<span data-translate="mute-guest" >mute guest</span>
|
||||
</button>
|
||||
|
||||
<!---- /////// BREAK //////// -->
|
||||
|
||||
<!---- /////// DROPDOWN BREAK //////// -->
|
||||
<span class="hideDropMenu" onclick="toggleByDataset('1');getById('chevarrow3').classList.toggle('bottom');getById('chevarrow3').classList.toggle('right');">
|
||||
<i id="chevarrow3" style="padding:0px 7px 0 3px;" class="chevron right" aria-hidden="true"></i>
|
||||
<span data-translate="More-scene-options">More scene options</span>
|
||||
</span>
|
||||
<span class="hideDropMenu" style="grid-column: 2;"></span>
|
||||
|
||||
<button data-action-type="addToScene" class="hidden advanced" data-cluster="1" data-scene="2" title="Add this Video to any remote '&scene=2'" onclick="directEnable(this, event);">
|
||||
<i class="las la-plus-square" style="color:#060"></i>
|
||||
<span data-translate="add-to-scene2">add to scene 2</span>
|
||||
</button>
|
||||
|
||||
<button data-action-type="mute-scene" class="hidden" data-cluster="1" title="Remotely Mute this Audio in all remote '&scene' views" onclick="directMute(this, event);">
|
||||
<i class="las la-microphone-slash" style="color:#900"></i>
|
||||
<span data-translate="mute-scene" >mute in scene</span>
|
||||
</button>
|
||||
|
||||
<span class="hidden advanced" data-cluster="1" data-action-type="sceneCluster1">
|
||||
<button data-action-type="addToScene" data-scene="3" title="Add to Scene 3" onclick="directEnable(this, event);">
|
||||
<span >S3</span>
|
||||
</button>
|
||||
<button data-action-type="addToScene" data-scene="4" title="Add to Scene 4" onclick="directEnable(this, event);">
|
||||
<span >S4</span>
|
||||
</button>
|
||||
<button data-action-type="addToScene" data-scene="5" title="Add to Scene 5" onclick="directEnable(this, event);">
|
||||
<span >S5</span>
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<span class="hidden advanced" data-cluster="1" data-action-type="sceneCluster2">
|
||||
<button data-action-type="addToScene" data-scene="6" title="Add to Scene 6" onclick="directEnable(this, event);">
|
||||
<span >S6</span>
|
||||
</button>
|
||||
<button data-action-type="addToScene" data-scene="7" title="Add to Scene 7" onclick="directEnable(this, event);">
|
||||
<span >S7</span>
|
||||
</button>
|
||||
<button data-action-type="addToScene" data-scene="8" title="Add to Scene 8" onclick="directEnable(this, event);">
|
||||
<span >S8</span>
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<button class="hidden advanced" data-cluster="1" data-action-type="force-keyframe" style=" background-image: linear-gradient(90deg, #C9F0FF 0%, #FFDFB9 39%, #FFDFDF 70%, #D9FFEC 100%);" title="Force the remote sender to issue a keyframe to all scenes, fixing Pixel Smearing issues." onclick="requestKeyframeScene(this);">
|
||||
<span data-translate="force-keyframe">Rainbow Puke Fix</span>
|
||||
</button>
|
||||
|
||||
<button class="hidden" data-cluster="1" data-action-type="stats-remote" title="Request the statistics of this video in any active scene" onclick="toggleSceneStats(this);">
|
||||
<i class="las la-info-circle"></i>
|
||||
<span data-translate="stats-remote"> Scene Stats</span>
|
||||
</button>
|
||||
<div class="group hidden" data-cluster="1">
|
||||
<!-- General Controls -->
|
||||
<div class="row two">
|
||||
<button data-action-type="stats-remote" title="Request the statistics of this video in any active scene" onclick="toggleSceneStats(this);">
|
||||
<i class="las la-info-circle"></i>
|
||||
<span data-translate="stats-remote">Scene Stats</span>
|
||||
</button>
|
||||
<button data-action-type="mute-scene" title="Remotely Mute this Audio in all remote '&scene' views" onclick="directMute(this, event);">
|
||||
<i class="las la-microphone-slash" style="color:#900"></i>
|
||||
<span data-translate="mute-scene">mute in scenes</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Row of Scenes -->
|
||||
<div class="row four advanced">
|
||||
<button class="btn-HL-peach center" data-action-type="addToScene" data-scene="2" title="Add to Scene 2" onclick="directEnable(this, event);">
|
||||
<span>S2</span>
|
||||
</button>
|
||||
<button class="btn-HL-peach center" data-action-type="addToScene" data-scene="3" title="Add to Scene 3" onclick="directEnable(this, event);">
|
||||
<span>S3</span>
|
||||
</button>
|
||||
<button class="btn-HL-peach center" data-action-type="addToScene" data-scene="4" title="Add to Scene 4" onclick="directEnable(this, event);">
|
||||
<span>S4</span>
|
||||
</button>
|
||||
<button class="btn-HL-peach center" data-action-type="addToScene" data-scene="5" title="Add to Scene 5" onclick="directEnable(this, event);">
|
||||
<span>S5</span>
|
||||
</button>
|
||||
|
||||
<button class="btn-HL-peach center" data-action-type="addToScene" data-scene="6" title="Add to Scene 6" onclick="directEnable(this, event);">
|
||||
<span>S6</span>
|
||||
</button>
|
||||
<button class="btn-HL-peach center" data-action-type="addToScene" data-scene="7" title="Add to Scene 7" onclick="directEnable(this, event);">
|
||||
<span>S7</span>
|
||||
</button>
|
||||
<button class="btn-HL-peach center" data-action-type="addToScene" data-scene="8" title="Add to Scene 8" onclick="directEnable(this, event);">
|
||||
<span>S8</span>
|
||||
</button>
|
||||
<button class="btn-HL-peach center" data-action-type="addToScene" data-scene="9" title="Add to Scene 9" onclick="directEnable(this, event);">
|
||||
<span>S9</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<span class="spacer"></span>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Graph Section for Scenes -->
|
||||
<span class="graphSection hidden" data-action-type="stats-graphs-bitrate" >
|
||||
<span class="hidden" data-message="true" data-no-scenes="true">No scenes active</span>
|
||||
</span>
|
||||
@ -1458,234 +1467,239 @@
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<!---- /////// BREAK //////// -->
|
||||
|
||||
<!---- /////// DROPDOWN BREAK //////// -->
|
||||
<span class="hideDropMenu" onclick="toggleByDataset('2');getById('chevarrow4').classList.toggle('bottom');getById('chevarrow4').classList.toggle('right');">
|
||||
<i id="chevarrow4" class="chevron right" aria-hidden="true" style="padding:0px 7px 0 3px;" ></i>
|
||||
<span data-translate="additional-controls">Additional controls</span>
|
||||
</span>
|
||||
<span class="hideDropMenu" style="grid-column: 2;" ></span>
|
||||
|
||||
<button class="hidden" data-cluster="2" data-action-type="hide-guest" title="Hide this guest everywhere" onclick="remoteMuteVideo(this, event);">
|
||||
<i class="las la-video-slash"></i>
|
||||
<span data-translate="hide-guest" >hide guest</span>
|
||||
</button>
|
||||
<div class="group hidden" data-cluster="2">
|
||||
<!-- General Controls -->
|
||||
<div class="row two">
|
||||
<button data-action-type="hide-guest" title="Hide this guest everywhere" onclick="remoteMuteVideo(this, event);">
|
||||
<i class="las la-video-slash"></i>
|
||||
<span data-translate="hide-guest">hide guest</span>
|
||||
</button>
|
||||
<button class="mainonly" data-action-type="toggle-remote-speaker" title="Toggle the remote guest's speaker output" onclick="remoteSpeakerMute(this, event);">
|
||||
<i class="las la-volume-off"></i> <span data-translate="toggle-remote-speaker">Deafen Guest</span>
|
||||
</button>
|
||||
|
||||
<button class="mainonly" data-action-type="toggle-remote-display" title="Toggle the remote guest's display output" onclick="remoteDisplayMute(this, event);">
|
||||
<i class="las la-eye-slash"></i> <span data-translate="toggle-remote-display">Blind Guest</span>
|
||||
</button>
|
||||
<button class="mainonly" data-action-type="change-url" title="Remotely reload the guest's page with a new URL" onclick="directPageReload(this, event);">
|
||||
<i class="las la-sync"></i>
|
||||
<span data-translate="change-url">Change URL</span>
|
||||
</button>
|
||||
|
||||
<button data-action-type="recorder-local" title="Start Recording this remote stream to this local drive. *experimental*'" onclick="recordVideo(this, event)">
|
||||
<i class="las la-circle"></i>
|
||||
<span data-translate="record-local"> Record Local</span>
|
||||
</button>
|
||||
<button data-action-type="recorder-remote" title="The Remote Guest will record their local stream to their local drive. *experimental*" onclick="requestVideoRecord(this)">
|
||||
<i class="las la-circle"></i>
|
||||
<span data-translate="record-remote"> Record Remote</span>
|
||||
</button>
|
||||
|
||||
<button class="mainonly" data-action-type="change-params" style="display:none" title="Change user parameters" onclick="promptUser('transferSettingsTemplate', this.dataset.UUID);">
|
||||
<i class="las la-cog"></i>
|
||||
<span data-translate="change-params">URL Params</span>
|
||||
</button>
|
||||
|
||||
<button class="mainonly" data-action-type="open-file-share" title="Allow the guest to select a file to upload to the director. Once shared, it will show in the chat as a download link." onclick="requestFileUpload(this)">
|
||||
<i class="las la-file-upload"></i>
|
||||
<span data-translate="request-upload"> Request File</span>
|
||||
</button>
|
||||
|
||||
<button class="mainonly" data-action-type="create-timer" title="Set a countdown timer that this guest sees. CTRL (cmd) + click to pause." onclick="directTimer(this, event);">
|
||||
<i class="las la-clock"></i>
|
||||
<span data-translate="create-timer">Create Timer</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Row of Channels -->
|
||||
<div class="row six advanced">
|
||||
<button class="btn-HL-blue center" data-action-type="add-channel" title="Set to Audio Channel 1" onclick="changeChannelOffset(this.dataset.UUID, 0);">
|
||||
<span>C1</span>
|
||||
</button>
|
||||
<button class="btn-HL-blue center" data-action-type="add-channel" title="Set to Audio Channel 2" onclick="changeChannelOffset(this.dataset.UUID, 1);">
|
||||
<span>C2</span>
|
||||
</button>
|
||||
<button class="btn-HL-blue center" data-action-type="add-channel" title="Set to Audio Channel 3" onclick="changeChannelOffset(this.dataset.UUID, 2);">
|
||||
<span>C3</span>
|
||||
</button>
|
||||
<button class="btn-HL-blue center" data-action-type="add-channel" title="Set to Audio Channel 4" onclick="changeChannelOffset(this.dataset.UUID,3);">
|
||||
<span>C4</span>
|
||||
</button>
|
||||
<button class="btn-HL-blue center" data-action-type="add-channel" title="Set to Audio Channel 5" onclick="changeChannelOffset(this.dataset.UUID, 4);">
|
||||
<span>C5</span>
|
||||
</button>
|
||||
<button class="btn-HL-blue center" data-action-type="add-channel" title="Set to Audio Channel 6" onclick="changeChannelOffset(this.dataset.UUID, 5);">
|
||||
<span>C6</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Row of Groups -->
|
||||
<div class="row six advanced">
|
||||
<button class="btn-HL-green center" data-action-type="toggle-group" data-group="1" title="Add/remove from group 1" onclick="changeGroup(this);">
|
||||
<span>G1</span>
|
||||
</button>
|
||||
<button class="btn-HL-green center" data-action-type="toggle-group" data-group="2" title="Add/remove from group 2" onclick="changeGroup(this);">
|
||||
<span>G2</span>
|
||||
</button>
|
||||
<button class="btn-HL-green center" data-action-type="toggle-group" data-group="3" title="Add/remove from group 3" onclick="changeGroup(this);">
|
||||
<span>G3</span>
|
||||
</button>
|
||||
<button class="btn-HL-green center" data-action-type="toggle-group" data-group="4" title="Add/remove from group 4" onclick="changeGroup(this);">
|
||||
<span>G4</span>
|
||||
</button>
|
||||
<button class="btn-HL-green center" data-action-type="toggle-group" data-group="5" title="Add/remove from group 5" onclick="changeGroup(this);">
|
||||
<span>G5</span>
|
||||
</button>
|
||||
<button class="btn-HL-green center" data-action-type="toggle-group" data-group="6" title="Add/remove from group 6" onclick="changeGroup(this);">
|
||||
<span>G6</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<span class="spacer"></span>
|
||||
|
||||
<!-- General Controls -->
|
||||
<div class="row two">
|
||||
<!-- Mix Order Control -->
|
||||
<span class="row three advanced" data-action-type="ordering">
|
||||
<button class="center" data-action-type="order-down" title="Shift this Video Down in Order" onclick="changeOrder(-1,this.dataset.UUID);">
|
||||
<span data-translate="order-down"><i class="las la-minus"></i></span>
|
||||
</button>
|
||||
<span class="orderspan">
|
||||
<p style="text-align: center;font-size: 150%;" data-action-type="order-value" title="Current Index Order of this Video">0</p>
|
||||
<p class="order-label">Mix Order</p>
|
||||
</span>
|
||||
<button class="center" data-action-type="order-up" title="Shift this Video Up in Order" onclick="changeOrder(1,this.dataset.UUID);">
|
||||
<i class="las la-plus"></i>
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<!-- Video Feed Quality -->
|
||||
<div class="row three">
|
||||
<button class="center" data-action-type="change-quality1" title="Disable Video Preview" onclick="toggleQualityDirector(0, this.dataset.UUID, this);">
|
||||
<i class="las la-video-slash"></i>
|
||||
</button>
|
||||
<button class="pressed center" data-action-type="change-quality2" title="Low-Quality Preview" onclick="toggleQualityDirector(50, this.dataset.UUID, this);">
|
||||
<i class="las la-video"></i>
|
||||
</button>
|
||||
<button class="center" data-action-type="change-quality3" title="High-Quality Preview" onclick="toggleQualityDirector(1200, this.dataset.UUID, this);">
|
||||
<i class="las la-binoculars"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="spacer big"></span>
|
||||
|
||||
<!-- Further Audio/Video Settings -->
|
||||
<div class="row two" data-cluster="3">
|
||||
<button data-action-type="advanced-audio-settings" data-active="false" title="Remote Audio Settings" onclick="requestAudioSettings(this);">
|
||||
<i class="las la-sliders-h"></i>
|
||||
<span data-translate="advanced-audio-settings">Audio Settings</span>
|
||||
</button>
|
||||
<button class="mainonly" data-action-type="advanced-camera-settings" data-active="false" title="Advanced Video Settings" onclick="requestVideoSettings(this);">
|
||||
<i class="las la-sliders-h"></i>
|
||||
<span data-translate="advanced-camera-settings">Video Settings</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<button class="hidden mainonly" data-cluster="2" data-action-type="toggle-remote-speaker" title="Toggle the remote guest's speaker output" onclick="remoteSpeakerMute(this, event);">
|
||||
<i class="las la-volume-off"></i> <span data-translate="toggle-remote-speaker">Deafen Guest</span>
|
||||
</button>
|
||||
|
||||
<button class="hidden mainonly" data-cluster="2" data-action-type="toggle-remote-display" title="Toggle the remote guest's display output" onclick="remoteDisplayMute(this, event);">
|
||||
<i class="las la-eye-slash"></i> <span data-translate="toggle-remote-display">Blind Guest</span>
|
||||
</button>
|
||||
|
||||
|
||||
<span class="hidden" data-cluster="2" data-action-type="change-quality">
|
||||
<button data-action-type="change-quality1" title="Disable Video Preview" onclick="toggleQualityDirector(0, this.dataset.UUID, this);">
|
||||
<i class="las la-video-slash"></i>
|
||||
<span class="spacer"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- &ShowDirector Control-Buttons Box -->
|
||||
<div id="controls_directors_blank" class="hidden controlCenterBox">
|
||||
<div class="controlsGrid">
|
||||
<!-- General Controls -->
|
||||
<div class="row two">
|
||||
<button data-action-type="recorder-local" title="Start Recording this remote stream to this local drive. *experimental*'" onclick="recordLocalVideoToggle();">
|
||||
<i class="las la-circle"></i>
|
||||
<span data-translate="record-director-local"> Record</span>
|
||||
</button>
|
||||
<button data-action-type="mute-scene" title="Remotely Mute this Audio in all remote '&scene' views" onclick="directMute(this, event);">
|
||||
<i class="las la-microphone-slash"></i>
|
||||
<span data-translate="mute-scene">mute in scene</span>
|
||||
</button>
|
||||
<button class="pressed" data-action-type="change-quality2" title="Low-Quality Preview" onclick="toggleQualityDirector(50, this.dataset.UUID, this);">
|
||||
<i class="las la-video"></i>
|
||||
<button data-action-type="solo-video" class="btn-HL-yellow" title="Solo this video everywhere" onclick="requestInfocus(this);">
|
||||
<i class="las la-user"></i>
|
||||
<span data-translate="solo-video-director">Highlight</span>
|
||||
</button>
|
||||
<button data-action-type="change-quality3" title="High-Quality Preview" onclick="toggleQualityDirector(1200, this.dataset.UUID, this);">
|
||||
<i class="las la-binoculars"></i>
|
||||
<button data-action-type="addToScene" data-scene="1" class="btn-HL-peach" title="Add this Video to any remote '&scene=1'" onclick="directEnable(this, event, true);">
|
||||
<i class="las la-plus-square"></i>
|
||||
<span data-translate="add-to-scene">add to scene 1</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
<span class="hidden advanced" data-cluster="2" data-action-type="ordering">
|
||||
<button style="width:34px;" data-action-type="order-down" title="Shift this Video Down in Order" onclick="changeOrder(-1,this.dataset.UUID);">
|
||||
<!-- Row of Scenes -->
|
||||
<div class="row six advanced">
|
||||
<button class="btn-HL-peach center" data-action-type="addToScene" data-scene="2" title="Add to Scene 2" onclick="directEnable(this, event);">
|
||||
<span>S2</span>
|
||||
</button>
|
||||
<button class="btn-HL-peach center" data-action-type="addToScene" data-scene="3" title="Add to Scene 3" onclick="directEnable(this, event);">
|
||||
<span>S3</span>
|
||||
</button>
|
||||
<button class="btn-HL-peach center" data-action-type="addToScene" data-scene="4" title="Add to Scene 4" onclick="directEnable(this, event);">
|
||||
<span>S4</span>
|
||||
</button>
|
||||
<button class="btn-HL-peach center" data-action-type="addToScene" data-scene="5" title="Add to Scene 5" onclick="directEnable(this, event);">
|
||||
<span>S5</span>
|
||||
</button>
|
||||
|
||||
<button class="btn-HL-peach center" data-action-type="addToScene" data-scene="6" title="Add to Scene 6" onclick="directEnable(this, event);">
|
||||
<span>S6</span>
|
||||
</button>
|
||||
<button class="btn-HL-peach center" data-action-type="addToScene" data-scene="7" title="Add to Scene 7" onclick="directEnable(this, event);">
|
||||
<span>S7</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Row of Groups -->
|
||||
<div class="row six advanced">
|
||||
<button class="btn-HL-green center" data-action-type="toggle-group" data-group="1" title="Add/remove from group 1" onclick="changeGroupDirector(this);">
|
||||
<span>G1</span>
|
||||
</button>
|
||||
<button class="btn-HL-green center" data-action-type="toggle-group" data-group="2" title="Add/remove from group 2" onclick="changeGroupDirector(this);">
|
||||
<span>G2</span>
|
||||
</button>
|
||||
<button class="btn-HL-green center" data-action-type="toggle-group" data-group="3" title="Add/remove from group 3" onclick="changeGroupDirector(this);">
|
||||
<span>G3</span>
|
||||
</button>
|
||||
<button class="btn-HL-green center" data-action-type="toggle-group" data-group="4" title="Add/remove from group 4" onclick="changeGroupDirector(this);">
|
||||
<span>G4</span>
|
||||
</button>
|
||||
<button class="btn-HL-green center" data-action-type="toggle-group" data-group="5" title="Add/remove from group 5" onclick="changeGroupDirector(this);">
|
||||
<span>G5</span>
|
||||
</button>
|
||||
<button class="btn-HL-green center" data-action-type="toggle-group" data-group="6" title="Add/remove from group 6" onclick="changeGroupDirector(this);">
|
||||
<span>G6</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<span class="spacer"></span>
|
||||
|
||||
<!-- Mix Order Control -->
|
||||
<span class="row three advanced" data-action-type="ordering">
|
||||
<button class="center" data-action-type="order-down" title="Shift this Video Down in Order" onclick="changeOrderDirector(-1);">
|
||||
<span data-translate="order-down"><i class="las la-minus"></i></span>
|
||||
</button>
|
||||
<span class="orderspan">
|
||||
<div style="text-align: center;font-size: 150%;" data-action-type="order-value" title="Current Index Order of this Video" >0</div>
|
||||
Mix Order
|
||||
<p style="text-align: center;font-size: 150%;" data-action-type="order-value-director" title="Current Index Order of this Video">0</p>
|
||||
<p class="order-label">Mix Order</p>
|
||||
</span>
|
||||
<button style="width:34px;margin-left:0;height: 29px;" data-action-type="order-up" title="Shift this Video Up in Order" onclick="changeOrder(1,this.dataset.UUID);">
|
||||
<button class="center" data-action-type="order-up" title="Shift this Video Up in Order" onclick="changeOrderDirector(1);">
|
||||
<i class="las la-plus"></i>
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<button class="hidden mainonly advanced" data-cluster="2" data-action-type="change-url" title="Remotely reload the guest's page with a new URL" onclick="directPageReload(this, event);">
|
||||
<i class="las la-sync"></i>
|
||||
<span data-translate="change-url">Change URL</span>
|
||||
</button>
|
||||
|
||||
<button class="hidden mainonly advanced" data-cluster="2" data-action-type="change-params" style="display:none" title="Change user parameters" onclick="promptUser('transferSettingsTemplate', this.dataset.UUID);">
|
||||
<i class="las la-cog"></i>
|
||||
<span data-translate="change-params">URL Params</span>
|
||||
</button>
|
||||
|
||||
<button class="hidden" data-cluster="2" data-action-type="recorder-local" title="Start Recording this remote stream to this local drive. *experimental*'" onclick="recordVideo(this, event)">
|
||||
<i class="las la-circle"></i>
|
||||
<span data-translate="record-local"> Record Local</span>
|
||||
</button>
|
||||
<button class="hidden" data-cluster="2" data-action-type="recorder-remote" title="The Remote Guest will record their local stream to their local drive. *experimental*" onclick="requestVideoRecord(this)">
|
||||
<i class="las la-circle"></i>
|
||||
<span data-translate="record-remote"> Record Remote</span>
|
||||
</button>
|
||||
|
||||
<button class="hidden mainonly advanced" data-cluster="2" data-action-type="open-file-share" title="Allow the guest to select a file to upload to the director. Once shared, it will show in the chat as a download link." onclick="requestFileUpload(this)">
|
||||
<i class="las la-file-upload"></i>
|
||||
<span data-translate="request-upload"> Request File</span>
|
||||
</button>
|
||||
|
||||
<button class="hidden mainonly" data-cluster="2" data-action-type="create-timer" title="Set a countdown timer that this guest sees. CTRL (cmd) + click to pause." onclick="directTimer(this, event);">
|
||||
<i class="las la-clock"></i>
|
||||
<span data-translate="create-timer">Create Timer</span>
|
||||
</button>
|
||||
|
||||
|
||||
<span class="hidden advanced audiocluster1" data-cluster="2">
|
||||
|
||||
<button data-action-type="add-channel" title="Set to Audio Channel 1" onclick="changeChannelOffset(this.dataset.UUID, 0);">
|
||||
<span >C1</span>
|
||||
</button>
|
||||
<button data-action-type="add-channel" title="Set to Audio Channel 2" onclick="changeChannelOffset(this.dataset.UUID, 1);">
|
||||
<span >C2</span>
|
||||
</button>
|
||||
<button data-action-type="add-channel" title="Set to Audio Channel 3" onclick="changeChannelOffset(this.dataset.UUID, 2);">
|
||||
<span >C3</span>
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<span class="hidden advanced audiocluster2" data-cluster="2">
|
||||
|
||||
<button data-action-type="add-channel" title="Set to Audio Channel 4" onclick="changeChannelOffset(this.dataset.UUID,3);">
|
||||
<span >C4</span>
|
||||
</button>
|
||||
<button data-action-type="add-channel" title="Set to Audio Channel 5" onclick="changeChannelOffset(this.dataset.UUID, 4);">
|
||||
<span >C5</span>
|
||||
</button>
|
||||
<button data-action-type="add-channel" title="Set to Audio Channel 6" onclick="changeChannelOffset(this.dataset.UUID, 5);">
|
||||
<span >C6</span>
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<span class="hidden advanced groupcluster1" data-cluster="2">
|
||||
<button data-action-type="toggle-group" data-group="1" title="Add/remove from group 1" onclick="changeGroup(this);">
|
||||
<span >G1</span>
|
||||
</button>
|
||||
<button data-action-type="toggle-group" data-group="2" title="Add/remove from group 2" onclick="changeGroup(this);">
|
||||
<span >G2</span>
|
||||
</button>
|
||||
<button data-action-type="toggle-group" data-group="3" title="Add/remove from group 3" onclick="changeGroup(this);">
|
||||
<span >G3</span>
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<span class="hidden advanced groupcluster2" data-cluster="2">
|
||||
<button data-action-type="toggle-group" data-group="4" title="Add/remove from group 4" onclick="changeGroup(this);">
|
||||
<span >G4</span>
|
||||
</button>
|
||||
<button data-action-type="toggle-group" data-group="5" title="Add/remove from group 5" onclick="changeGroup(this);">
|
||||
<span >G5</span>
|
||||
</button>
|
||||
<button data-action-type="toggle-group" data-group="6" title="Add/remove from group 6" onclick="changeGroup(this);">
|
||||
<span >G6</span>
|
||||
</button>
|
||||
</span>
|
||||
<div data-cluster="3">
|
||||
<button class="hidden" data-cluster="2" data-action-type="advanced-audio-settings" data-active="false" title="Remote Audio Settings" onclick="requestAudioSettings(this);">
|
||||
<i class="las la-sliders-h"></i>
|
||||
<span data-translate="advanced-audio-settings">Audio Settings</span>
|
||||
</button>
|
||||
<button class="hidden mainonly" data-cluster="2" data-action-type="advanced-camera-settings" data-active="false" title="Advanced Video Settings" onclick="requestVideoSettings(this);">
|
||||
<i class="las la-sliders-h"></i>
|
||||
<span data-translate="advanced-camera-settings">Video Settings</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="controls_directors_blank" class="hidden controlCenterBox">
|
||||
<div class="controlsGrid">
|
||||
|
||||
<button data-action-type="addToScene" data-scene="1" title="Add this Video to any remote '&scene=1'" onclick="directEnable(this, event, true);">
|
||||
<i class="las la-plus-square"></i>
|
||||
<span data-translate="add-to-scene">add to scene 1</span>
|
||||
</button>
|
||||
<button data-action-type="mute-scene" title="Remotely Mute this Audio in all remote '&scene' views" onclick="directMute(this, event);">
|
||||
<i class="las la-microphone-slash"></i>
|
||||
<span data-translate="mute-scene" >mute in scene</span>
|
||||
</button>
|
||||
|
||||
<span class="advanced">
|
||||
<button data-scene="2" data-action-type="addToScene" title="Add to Scene 2" onclick="directEnable(this, event, true);">
|
||||
<span >S2</span>
|
||||
</button>
|
||||
<button data-scene="3" data-action-type="addToScene" title="Add to Scene 3" onclick="directEnable(this, event, true);">
|
||||
<span >S3</span>
|
||||
</button>
|
||||
<button data-scene="4" data-action-type="addToScene" title="Add to Scene 4" onclick="directEnable(this, event, true);">
|
||||
<span >S4</span>
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<span class="advanced">
|
||||
<button data-scene="5" data-action-type="addToScene" title="Add to Scene 5" onclick="directEnable(this, event, true);">
|
||||
<span >S5</span>
|
||||
</button>
|
||||
<button data-scene="6" data-action-type="addToScene" title="Add to Scene 6" onclick="directEnable(this, event, true);">
|
||||
<span >S6</span>
|
||||
</button>
|
||||
<button data-scene="7" data-action-type="addToScene" title="Add to Scene 7" onclick="directEnable(this, event, true);">
|
||||
<span >S7</span>
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<span class="advanced">
|
||||
|
||||
<button data-action-type="toggle-group" data-group="1" title="Add/remove from group 1" onclick="changeGroupDirector(this);">
|
||||
<span >G1</span>
|
||||
</button>
|
||||
<button data-action-type="toggle-group" data-group="2" title="Add/remove from group 2" onclick="changeGroupDirector(this);">
|
||||
<span >G2</span>
|
||||
</button>
|
||||
<button data-action-type="toggle-group" data-group="3" title="Add/remove from group 3" onclick="changeGroupDirector(this);">
|
||||
<span >G3</span>
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<span class="advanced">
|
||||
|
||||
<button data-action-type="toggle-group" data-group="4" title="Add/remove from group 4" onclick="changeGroupDirector(this);">
|
||||
<span >G4</span>
|
||||
</button>
|
||||
<button data-action-type="toggle-group" data-group="5" title="Add/remove from group 5" onclick="changeGroupDirector(this);">
|
||||
<span >G5</span>
|
||||
</button>
|
||||
<button data-action-type="toggle-group" data-group="6" title="Add/remove from group 6" onclick="changeGroupDirector(this);">
|
||||
<span >G6</span>
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<button data-action-type="force-keyframe" class="advanced" title="Force the remote sender to issue a keyframe to all scenes, fixing Pixel Smearing issues." onclick="session.sendKeyFrameScenes();">
|
||||
<span data-translate="force-keyframe">Rainbow Puke Fix</span>
|
||||
</button>
|
||||
|
||||
<button data-action-type="solo-video" title="Solo this video everywhere. Using CTRL (cmd) will limit area to 75%." onclick="requestInfocus(this, event);">
|
||||
<i class="las la-user"></i>
|
||||
<span data-translate="solo-video-director">Highlight</span>
|
||||
</button>
|
||||
|
||||
<button data-action-type="recorder-local" title="Start Recording this remote stream to this local drive. *experimental*'" onclick="recordLocalVideoToggle();">
|
||||
<i class="las la-circle"></i>
|
||||
<span data-translate="record-director-local"> Record</span>
|
||||
</button>
|
||||
|
||||
<span class="advanced">
|
||||
<button style="width:34px;" data-action-type="order-down" title="Shift this Video Down in Order" onclick="changeOrderDirector(-1);">
|
||||
<i class="las la-minus"></i>
|
||||
</button>
|
||||
<span class="orderspan">
|
||||
<div style="text-align: center;font-size: 150%;" data-action-type="order-value-director" title="Current Index Order of this Video" >0</div>
|
||||
Mix Order
|
||||
</span>
|
||||
<button style="width:34px;margin-left:0;" data-action-type="order-up" title="Shift this Video Up in Order" onclick="changeOrderDirector(1);">
|
||||
<span data-translate="order-up"><i class="las la-plus"></i></span>
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<span class="spacer"></span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
8
lib.js
8
lib.js
@ -11909,8 +11909,8 @@ function remoteLowerhands(UUID) {
|
||||
session.sendRequest(msg, UUID);
|
||||
|
||||
try{
|
||||
getById("hands_"+UUID).style.display="none";
|
||||
session.rpcs[UUID].remoteRaisedHandElement.style.display = "none";
|
||||
getById("hands_"+UUID).classList.add("hidden");
|
||||
session.rpcs[UUID].remoteRaisedHandElement.classList.add("hidden");
|
||||
} catch(e){}
|
||||
return true;
|
||||
}
|
||||
@ -11923,11 +11923,11 @@ function remoteMute(ele, event=false, skipSend=false) {
|
||||
if (val == 1){
|
||||
ele.value = 0;
|
||||
ele.classList.remove("pressed");
|
||||
ele.innerHTML = '<i class="las la-microphone-slash" style="color:#900"></i> <span data-translate="mute-guest" >mute guest</span>';
|
||||
ele.innerHTML = '<i class="las la-microphone-slash" style="color:#900"></i>';
|
||||
} else {
|
||||
ele.value = 1;
|
||||
ele.classList.add("pressed");
|
||||
ele.innerHTML = '<i class="las la-microphone-slash" style="color:#900"></i> <span data-translate="unmute-guest" >un-mute guest</span>';
|
||||
ele.innerHTML = '<i class="las la-microphone-slash" style="color:#900"></i>';
|
||||
}
|
||||
miniTranslate(ele);
|
||||
}
|
||||
|
||||
255
main.css
255
main.css
@ -22,7 +22,6 @@
|
||||
--myvideo-height:auto;
|
||||
--myvideo-background: #FFF1;
|
||||
--video-background-image: url("data:image/svg+xml,%3Csvg viewBox='-42 0 512 512.002' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m210.351562 246.632812c33.882813 0 63.222657-12.152343 87.195313-36.128906 23.972656-23.972656 36.125-53.304687 36.125-87.191406 0-33.875-12.152344-63.210938-36.128906-87.191406-23.976563-23.96875-53.3125-36.121094-87.191407-36.121094-33.886718 0-63.21875 12.152344-87.191406 36.125s-36.128906 53.308594-36.128906 87.1875c0 33.886719 12.15625 63.222656 36.132812 87.195312 23.976563 23.96875 53.3125 36.125 87.1875 36.125zm0 0'/%3E%3Cpath d='m426.128906 393.703125c-.691406-9.976563-2.089844-20.859375-4.148437-32.351563-2.078125-11.578124-4.753907-22.523437-7.957031-32.527343-3.308594-10.339844-7.808594-20.550781-13.371094-30.335938-5.773438-10.15625-12.554688-19-20.164063-26.277343-7.957031-7.613282-17.699219-13.734376-28.964843-18.199219-11.226563-4.441407-23.667969-6.691407-36.976563-6.691407-5.226563 0-10.28125 2.144532-20.042969 8.5-6.007812 3.917969-13.035156 8.449219-20.878906 13.460938-6.707031 4.273438-15.792969 8.277344-27.015625 11.902344-10.949219 3.542968-22.066406 5.339844-33.039063 5.339844-10.972656 0-22.085937-1.796876-33.046874-5.339844-11.210938-3.621094-20.296876-7.625-26.996094-11.898438-7.769532-4.964844-14.800782-9.496094-20.898438-13.46875-9.75-6.355468-14.808594-8.5-20.035156-8.5-13.3125 0-25.75 2.253906-36.972656 6.699219-11.257813 4.457031-21.003906 10.578125-28.96875 18.199219-7.605469 7.28125-14.390625 16.121094-20.15625 26.273437-5.558594 9.785157-10.058594 19.992188-13.371094 30.339844-3.199219 10.003906-5.875 20.945313-7.953125 32.523437-2.058594 11.476563-3.457031 22.363282-4.148437 32.363282-.679688 9.796875-1.023438 19.964844-1.023438 30.234375 0 26.726562 8.496094 48.363281 25.25 64.320312 16.546875 15.746094 38.441406 23.734375 65.066406 23.734375h246.53125c26.625 0 48.511719-7.984375 65.0625-23.734375 16.757813-15.945312 25.253906-37.585937 25.253906-64.324219-.003906-10.316406-.351562-20.492187-1.035156-30.242187zm0 0'/%3E%3C/svg%3E");
|
||||
--advanced-mode: inline-block;
|
||||
--background-main-image: unset;
|
||||
--show-codirectors: inline-block;
|
||||
--full-screen-button: inherit;
|
||||
@ -57,15 +56,6 @@ table {
|
||||
margin:10px;
|
||||
}
|
||||
|
||||
.hideDropMenu{
|
||||
user-select: none;
|
||||
grid-column: 1;
|
||||
width:100%;
|
||||
margin:5px 0;
|
||||
font-size:80%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#audioSource3{
|
||||
background-color: #FFF;
|
||||
}
|
||||
@ -607,15 +597,6 @@ body.darktheme .credits>a:visited {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.pressed {
|
||||
background: #1e0000;
|
||||
-webkit-box-shadow: inset 0px 0px 1px #b90000;
|
||||
-moz-box-shadow: inset 0px 0px 1px #b90000;
|
||||
box-shadow: inset 0px 0px 1px #b90000;
|
||||
outline: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.altpress {
|
||||
background: #673100 !important;
|
||||
-webkit-box-shadow: inset 0px 0px 1px #b90000;
|
||||
@ -625,11 +606,16 @@ body.darktheme .credits>a:visited {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.row {
|
||||
#mainmenu .row {
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
#mainmenu .row:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
@ -638,23 +624,6 @@ hr {
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
.orderspan{
|
||||
font-size: 50%;
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
width: 49px;
|
||||
height: 22px;
|
||||
top: 5px;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.row:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.vidcon {
|
||||
max-width: 100%;
|
||||
@ -2098,14 +2067,20 @@ label {
|
||||
animation: greyout 3s;
|
||||
opacity: 0.3!important;
|
||||
}
|
||||
.graphSection{
|
||||
max-width:50%;
|
||||
}
|
||||
.graphSection>span {
|
||||
font-size: 10px;
|
||||
display: block;
|
||||
margin: 5.5px;
|
||||
margin-top: 3px;
|
||||
min-height: 9px;
|
||||
display: block;
|
||||
margin: 5px;
|
||||
margin-top: 0px;
|
||||
margin-right: 0px;
|
||||
height: 50px;
|
||||
}
|
||||
.graphSection>span:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
span[data-action-type="stats-graphs-details-container"]>span{
|
||||
padding: 1px;
|
||||
display:block;
|
||||
@ -2184,9 +2159,12 @@ span[data-action-type="stats-graphs-details-container"]>span{
|
||||
}
|
||||
.canvasStats{
|
||||
background-color: black;
|
||||
width: calc(100% - 10px);
|
||||
width: calc(100%);
|
||||
height: 50px;
|
||||
margin: 5px;
|
||||
margin: 0 5px 5px 0;
|
||||
}
|
||||
.canvasStats:last-child{
|
||||
margin: 0 5px 0 0;
|
||||
}
|
||||
.manualInput{
|
||||
width: 55px;
|
||||
@ -2211,8 +2189,10 @@ span[data-action-type="stats-graphs-details-container"]>span{
|
||||
|
||||
.lowerRaisedHand{
|
||||
margin: auto;
|
||||
margin-bottom:10px;
|
||||
background-color:yellow;
|
||||
margin-left: 5px;
|
||||
margin-bottom: 10px;
|
||||
background-color: yellow;
|
||||
width: calc(100% - 10px);
|
||||
}
|
||||
.float {
|
||||
opacity: 0.8;
|
||||
@ -2309,24 +2289,6 @@ iframe {
|
||||
margin-right: 0;
|
||||
text-align: right;
|
||||
}
|
||||
.director-message-box{
|
||||
display: flex;
|
||||
flex: 1 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.director-message-box textarea {
|
||||
margin: 5px;
|
||||
flex: 1 100%;
|
||||
padding: 5px;
|
||||
}
|
||||
.director-message-box > button {
|
||||
margin: 5px;
|
||||
text-align: right;
|
||||
}
|
||||
.director-message-box > span {
|
||||
top: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
@ -2929,10 +2891,10 @@ button.toggleSettings{
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display:none!important;
|
||||
display: none !important;
|
||||
visibility: hidden;
|
||||
width:0px;
|
||||
height:0px;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
opacity: 0;
|
||||
}
|
||||
.grabLinks a:visited {
|
||||
@ -3464,40 +3426,148 @@ div#roomnotes2 {
|
||||
.directorsgrid button {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ---- DIRECTORS PAGE - Guest Controls Box ---- */
|
||||
.controlsGrid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.controlsGrid button {
|
||||
margin: 5px;
|
||||
text-align: right;
|
||||
flex: 0 1 calc(50% - 10px);
|
||||
}
|
||||
.controlsGrid > div {
|
||||
.controlsGrid .group {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.controlsGrid input {
|
||||
margin: 5px;
|
||||
.controlsGrid .row {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.controlsGrid .row > .row {
|
||||
margin: 0;
|
||||
}
|
||||
.controlsGrid .row.two > * {
|
||||
flex: 1 33%;
|
||||
}
|
||||
.controlsGrid .row.three > * {
|
||||
flex: 1 25%;
|
||||
}
|
||||
.controlsGrid .row.four > * {
|
||||
flex: 1 20%;
|
||||
}
|
||||
.controlsGrid .row.six > * {
|
||||
flex: 1 13%;
|
||||
}
|
||||
|
||||
button[data-action-type="messaging-box-close"] {
|
||||
flex: 0 1 25%;
|
||||
.controlsGrid button {
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
}
|
||||
button[data-action-type="messaging-box-send"] {
|
||||
flex: 1 0 50%
|
||||
.controlsGrid button.center {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
justify-content: center;
|
||||
padding: 0 5px;
|
||||
padding-top: 7px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.controlsGrid > span.tooltip {
|
||||
.controlsGrid .spacer {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
}
|
||||
.controlsGrid .spacer.big {
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
/* Specitic CSS for different elements inside the guest control-buttons */
|
||||
.controlsGrid .director-message-box {
|
||||
flex: 1 100% !important;
|
||||
padding: 10px;
|
||||
|
||||
background: rgba(0, 0, 0, .15);
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
}
|
||||
.controlsGrid .director-message-box textarea {
|
||||
flex: 1 100%;
|
||||
padding: 5px;
|
||||
}
|
||||
.controlsGrid .director-message-box .message-close {
|
||||
flex: 1;
|
||||
}
|
||||
.controlsGrid .director-message-box .message-send {
|
||||
flex: 1 33%;
|
||||
}
|
||||
|
||||
.controlsGrid .tooltip {
|
||||
flex: 1 calc(50% - 10px);
|
||||
display: flex;
|
||||
flex: 1 calc(50% - 10px);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.advanced {
|
||||
display: var(--advanced-mode);
|
||||
.controlsGrid .tooltip input[type=range] {
|
||||
margin: 0;
|
||||
}
|
||||
.controlsGrid .tooltip .tooltiptext {
|
||||
top: -25px;
|
||||
}
|
||||
|
||||
.controlsGrid .hideDropMenu{
|
||||
user-select: none;
|
||||
grid-column: 1;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 80%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.controlsGrid .orderspan {
|
||||
font-size: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
text-align: center;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
}
|
||||
.controlsGrid .orderspan .order-label {
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
/* Hightlights for buttons in the guest control-buttons */
|
||||
.controlsGrid .btn-HL-yellow {
|
||||
background: rgb(255, 235, 154);
|
||||
}
|
||||
.controlsGrid .btn-HL-peach {
|
||||
background: rgb(243, 197, 242);
|
||||
}
|
||||
.controlsGrid .btn-HL-green {
|
||||
background: rgb(130, 223, 128);
|
||||
}
|
||||
.controlsGrid .btn-HL-blue {
|
||||
background: rgb(170, 204, 248);
|
||||
}
|
||||
|
||||
/* Hides buttons that are supposed to be hidden when &novice is added to URL */
|
||||
.controlsGrid .advanced.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#widget {
|
||||
position: absolute;
|
||||
@ -3516,11 +3586,9 @@ button[data-action-type="messaging-box-send"] {
|
||||
top: 8px;
|
||||
right: 10px;
|
||||
}
|
||||
.advanced {
|
||||
display: var(--advanced-mode);
|
||||
}
|
||||
.controlCenterBox{
|
||||
margin-top:2px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.contolboxLabel {
|
||||
@ -4809,4 +4877,17 @@ body.darktheme .startupWarning>.las {
|
||||
}
|
||||
body.darktheme .invite_setting_group_links a {
|
||||
color:#d2e5ff!important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* ---- BASIC CSS CLASSES ---- */
|
||||
.pressed {
|
||||
background: #1e0000 !important;
|
||||
-webkit-box-shadow: inset 0px 0px 1px #b90000;
|
||||
-moz-box-shadow: inset 0px 0px 1px #b90000;
|
||||
box-shadow: inset 0px 0px 1px #b90000;
|
||||
outline: none;
|
||||
color: white;
|
||||
}
|
||||
15
main.js
15
main.js
@ -242,7 +242,10 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
}
|
||||
|
||||
if (urlParams.has('novice') ) {
|
||||
document.documentElement.style.setProperty('--advanced-mode', "none"); // hide advanced items
|
||||
// Hiding advanced items
|
||||
document.querySelectorAll(".advanced").forEach(element => {
|
||||
element.classList.add("hide");
|
||||
})
|
||||
}
|
||||
|
||||
if (urlParams.has('avatarimg') || urlParams.has('bgimage') || urlParams.has('bgimg')) { // URL or data:base64 image. Becomes local to this viewer only. This is like &avatar, but slightly different. Just CSS in this case
|
||||
@ -5032,9 +5035,15 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
|
||||
if ("advancedMode" in e.data){
|
||||
if (e.data.advancedMode){
|
||||
document.documentElement.style.setProperty('--advanced-mode', "inline-block"); // show advanced items
|
||||
// Un-hiding advanced items
|
||||
document.querySelectorAll(".advanced").forEach(element => {
|
||||
element.classList.remove("hide");
|
||||
})
|
||||
} else {
|
||||
document.documentElement.style.setProperty('--advanced-mode', "none"); // hide advanced items
|
||||
// Hiding advanced items
|
||||
document.querySelectorAll(".advanced").forEach(element => {
|
||||
element.classList.add("hide");
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user