mirror of
https://github.com/SrIzan10/vdo.ninja.git
synced 2026-05-01 11:05:24 +00:00
director UI update
This commit is contained in:
Joel Calado
177
index.html
177
index.html
@@ -909,105 +909,104 @@
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div></div>
|
||||
<div id='guestFeeds' style="display:none"><div id='deleteme'>
|
||||
<div class='vidcon' style='margin: 15px 20px 0 0; min-height: 300px;text-align: center;'><h2>Guest 1</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
|
||||
<div class='vidcon' style='margin: 15px 20px 0 0; min-height: 300px;text-align: center;'><h2>Guest 2</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
|
||||
<div class='vidcon' style='margin: 15px 20px 0 0; min-height: 300px;text-align: center;'><h2>Guest 3</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
|
||||
<div class='vidcon' style='margin: 15px 20px 0 0; min-height: 300px;text-align: center;'><h2>Guest 4</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
|
||||
<h4 style='color:#CCC;margin:20px 20px 0 20px;' data-translate='more-than-four-can-join' >These four guest slots are just for demonstration. More than four guests can actually join a room.</h4>
|
||||
</div></div>
|
||||
<div id='guestFeeds' class='placeholders' style="display:none">
|
||||
<div class='vidcon'><h2>Guest 1</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
|
||||
<div class='vidcon'><h2>Guest 2</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
|
||||
<div class='vidcon'><h2>Guest 3</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
|
||||
<div class='vidcon'><h2>Guest 4</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="overlayMsgs" onclick="function(e){e.target.innerHTML = '';}" style="display:none"></div>
|
||||
<div id="bigPlayButton" onclick="function(e){e.target.innerHTML = '';}" style="display:none"></div>
|
||||
<div id="controls_blank" style="display: none;">
|
||||
<div class="controlsGrid">
|
||||
|
||||
<button data-action-type="forward" data-value="0" 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" title="Send a Direct Message to this user." onclick="directorSendMessage(this);">
|
||||
<span data-translate="send-direct-chat"><i class="las la-envelope"></i> Message</span>
|
||||
</button>
|
||||
|
||||
<button data-action-type="addToScene" style="grid-column: 1;" data-value="0" title="Add this Video to any remote '&scene=1'" onclick="directEnable(this, event);">
|
||||
<i class="las la-plus-square"></i>
|
||||
<span data-translate="add-to-scene">Add to Scene</span>
|
||||
</button>
|
||||
<button data-action-type="mute-scene" style="grid-column: 2;" 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>
|
||||
|
||||
<font class="tooltip" style="height: 0; border: 0;">
|
||||
<input data-action-type="volume" type="range" min="0" max="200" value="100" title="Remotely change the volume of this guest" oninput="remoteVolumeUI(this)" onclick="remoteVolume(this);" style="grid-column: 1; margin:5px; width: 93%; position: relative;top: 0.6em; background-color:#fff0;"/><span class="tooltiptext" style='float: right; overflow: auto; left: 40px; width: 2.5em; top: -13px; margin: 0; position:relative;font-family:"Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus,Code2000, Code2001, Code2002, Musica, serif, LastResort;' >100</span></font>
|
||||
|
||||
<button data-action-type="mute-guest" style="grid-column: 2;" title="Mute this guest everywhere" onclick="remoteMute(this, event);">
|
||||
<i class="las la-microphone-slash"></i>
|
||||
<span data-translate="mute-guest" >mute guest</span>
|
||||
</button>
|
||||
|
||||
<span>
|
||||
<button style="width: 35.2px" data-action-type="change-quality1" title="Disable Video Preview" onclick="toggleQualityDirector(0, this.dataset.UUID, this);">
|
||||
<span data-translate="change-to-low-quality"> <i class="las la-video-slash"></i></span>
|
||||
</button>
|
||||
<button class="pressed" style="width:35.2px;" data-action-type="change-quality2" title="Low-Quality Preview" onclick="toggleQualityDirector(50, this.dataset.UUID, this);">
|
||||
<span data-translate="change-to-medium-quality"> <i class="las la-video"></i></span>
|
||||
</button>
|
||||
<button style="width: 35.2px" data-action-type="change-quality3" title="High-Quality Preview" onclick="toggleQualityDirector(1200, this.dataset.UUID, this);">
|
||||
<span data-translate="change-to-high-quality"> <i class="las la-binoculars"></i></span>
|
||||
</button>
|
||||
<div class="control_panel">
|
||||
<h2 onclick="expandPanel(this)"><i class="las la-caret-right"></i>Guest</h2>
|
||||
<span class="info">
|
||||
<i class="las la-info-circle"></i>
|
||||
</span>
|
||||
|
||||
<button data-action-type="hangup" data-value="0" title="Force the user to Disconnect. They can always reconnect." onclick="directHangup(this, event);">
|
||||
<i class="las la-sign-out-alt"></i>
|
||||
<span data-translate="disconnect-guest" >Hangup</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" data-value="0" 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="" data-action-type="solo-chat" title="Toggle Solo Voice Chat" onclick="session.toggleSoloChat(this.dataset.UUID);">
|
||||
<span data-translate="voice-chat"><i class="las la-microphone"></i> Solo Talk</span>
|
||||
</button>
|
||||
|
||||
<span>
|
||||
<button style="width:34px;" 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>
|
||||
<div class="controlsGrid">
|
||||
<button data-action-type="forward" data-value="0" 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 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
|
||||
<button data-action-type="direct-chat" title="Send a Direct Message to this user." onclick="directorSendMessage(this);">
|
||||
<span data-translate="send-direct-chat"><i class="las la-envelope"></i> Message</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" data-value="0" 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 data-action-type="hangup" data-value="0" title="Force the user to Disconnect. They can always reconnect." onclick="directHangup(this, event);">
|
||||
<i class="las la-sign-out-alt"></i>
|
||||
<span data-translate="disconnect-guest" >Hangup</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control_panel">
|
||||
<h2 onclick="expandPanel(this)"><i class="las la-caret-right"></i>Every other setting</h2>
|
||||
<span class="info">
|
||||
<i class="las la-info-circle"></i>
|
||||
</span>
|
||||
<div class="controlsGrid">
|
||||
<button data-action-type="addToScene" style="grid-column: 1;" data-value="0" title="Add this Video to any remote '&scene=1'" onclick="directEnable(this, event);">
|
||||
<i class="las la-plus-square"></i>
|
||||
<span data-translate="add-to-scene">Add to Scene</span>
|
||||
</button>
|
||||
<button data-action-type="mute-scene" style="grid-column: 2;" 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>
|
||||
|
||||
<font class="tooltip" style="height: 0; border: 0;">
|
||||
<input data-action-type="volume" type="range" min="0" max="200" value="100" title="Remotely change the volume of this guest" oninput="remoteVolumeUI(this)" onclick="remoteVolume(this);" style="grid-column: 1; margin:5px; width: 93%; position: relative;top: 0.6em; background-color:#fff0;"/><span class="tooltiptext" style='float: right; overflow: auto; left: 40px; width: 2.5em; top: -13px; margin: 0; position:relative;font-family:"Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus,Code2000, Code2001, Code2002, Musica, serif, LastResort;' >100</span></font>
|
||||
|
||||
<button data-action-type="mute-guest" style="grid-column: 2;" title="Mute this guest everywhere" onclick="remoteMute(this, event);">
|
||||
<i class="las la-microphone-slash"></i>
|
||||
<span data-translate="mute-guest" >mute guest</span>
|
||||
</button>
|
||||
|
||||
<button class="" data-action-type="solo-chat" title="Toggle Solo Voice Chat" onclick="session.toggleSoloChat(this.dataset.UUID);">
|
||||
<span data-translate="voice-chat"><i class="las la-microphone"></i> Solo Talk</span>
|
||||
</button>
|
||||
|
||||
<span>
|
||||
<button style="width:34px;" 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">
|
||||
<div style="text-align: center;font-size: 150%;" data-action-type="order-value" 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="changeOrder(1,this.dataset.UUID);">
|
||||
<span data-translate="order-up"><i class="las la-plus"></i></span>
|
||||
</button>
|
||||
</span>
|
||||
<button style="width:34px;margin-left:0;" data-action-type="order-up" title="Shift this Video Up in Order" onclick="changeOrder(1,this.dataset.UUID);">
|
||||
<span data-translate="order-up"><i class="las la-plus"></i></span>
|
||||
|
||||
<button data-action-type="toggle-remote-speaker" style="grid-column: 1;" 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>
|
||||
</span>
|
||||
<button data-action-type="toggle-remote-display" style="grid-column: 2;" 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="" data-action-type="advanced-audio-settings" data-active="false" style="grid-column: 1;" title="Remote Audio Settings" onclick="requestAudioSettings(this);">
|
||||
<span data-translate="advanced-audio-settings"><i class="las la-sliders-h"></i> Audio Settings</span>
|
||||
</button>
|
||||
<button class="" data-action-type="advanced-camera-settings" data-active="false" style="grid-column: 2;" title="Advanced Video Settings" onclick="requestVideoSettings(this);">
|
||||
<span data-translate="advanced-camera-settings"><i class="las la-sliders-h"></i> Video Settings</span>
|
||||
</button>
|
||||
|
||||
<div id='advanced_audio_director_' class='advanced'></div>
|
||||
<div id='advanced_video_director_' class='advanced'></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button data-action-type="toggle-remote-speaker" style="grid-column: 1;" 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 data-action-type="toggle-remote-display" style="grid-column: 2;" 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="" data-action-type="advanced-audio-settings" data-active="false" style="grid-column: 1;" title="Remote Audio Settings" onclick="requestAudioSettings(this);">
|
||||
<span data-translate="advanced-audio-settings"><i class="las la-sliders-h"></i> Audio Settings</span>
|
||||
</button>
|
||||
<button class="" data-action-type="advanced-camera-settings" data-active="false" style="grid-column: 2;" title="Advanced Video Settings" onclick="requestVideoSettings(this);">
|
||||
<span data-translate="advanced-camera-settings"><i class="las la-sliders-h"></i> Video Settings</span>
|
||||
</button>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="popupSelector" style="display:none;">
|
||||
|
||||
170
main.css
170
main.css
@@ -6,7 +6,14 @@
|
||||
--red-accent: #553737;
|
||||
--green-accent: #3f4f50;
|
||||
--olive-accent: #535D32;
|
||||
--regular-margin: 10px;
|
||||
--regular-margin: 10px;
|
||||
--director-tile-grid-width: 70fr;
|
||||
--director-tile-backdrop-color: #626262;
|
||||
--director-tile-content-background-color: #494949;
|
||||
--director-tile-content-label-color: #ffffff;
|
||||
--director-button-background-color: #242524;
|
||||
--director-button-label-color: #ffffff;
|
||||
--director-button-active-background-color: #868686;
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -114,7 +121,7 @@ a:active {
|
||||
color: #D9E4EB;
|
||||
}
|
||||
|
||||
input {
|
||||
input:not(input[type="range"]) {
|
||||
border-radius: 4px;
|
||||
padding: 2px;
|
||||
-webkit-app-region: no-drag;
|
||||
@@ -326,19 +333,6 @@ hr {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.vidcon {
|
||||
max-width: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.vidcon:nth-of-type(3n) {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.vidcon:nth-of-type(3n) {
|
||||
grid-row: span;
|
||||
}
|
||||
|
||||
.tile {
|
||||
object-fit: contain;
|
||||
background-color: black;
|
||||
@@ -388,19 +382,18 @@ hr {
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
|
||||
.directorsgrid .vidcon video {
|
||||
max-width: 100%;
|
||||
padding: 0 5px;
|
||||
width: 100%;
|
||||
height: 148px;
|
||||
.directorsgrid .vidcon {
|
||||
background: var(--director-tile-backdrop-color);
|
||||
color: #FCFCFC;
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.directorsgrid .vidcon {
|
||||
display: inline-block !important;
|
||||
width: 269.7px !important;
|
||||
background: #7E7E7E;
|
||||
color: #FCFCFC;
|
||||
vertical-align: top;
|
||||
|
||||
.directorsgrid .vidcon video {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.directorsgrid .vidcon>.las {
|
||||
@@ -409,6 +402,63 @@ hr {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.control_panel {
|
||||
background: #494949;
|
||||
margin: 7px;
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.control_panel h2 {
|
||||
font-size: 0.8em;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.control_panel h2 i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.control_panel .info {
|
||||
margin-right: 10px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: -5px;
|
||||
}
|
||||
|
||||
.control_panel_sub {
|
||||
grid-column: span 2;
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
.control_panel_quality_toggles {
|
||||
justify-content: flex-end;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.control_panel_quality_toggles button {
|
||||
background-color: var(--director-button-background-color);
|
||||
color: var(--director-button-label-color);
|
||||
text-transform: uppercase !important;
|
||||
border-radius: 6px;
|
||||
font-weight: bold;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
.control_panel_quality_toggles button.pressed {
|
||||
box-shadow: none;
|
||||
background: var(--director-button-active-background-color);
|
||||
}
|
||||
|
||||
.active .controlsGrid {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
|
||||
.puslate {
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 0 rgba(14, 19, 26, 1);
|
||||
@@ -711,33 +761,30 @@ input[type=range]:focus {
|
||||
}
|
||||
input[type=range]::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 8.4px;
|
||||
height: 3px;
|
||||
cursor: pointer;
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
background: #3071a9;
|
||||
background: #C3C3C3;
|
||||
border-radius: 1.3px;
|
||||
border: 0.2px solid #010101;
|
||||
}
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
border: 1px solid #000000;
|
||||
height: 30px;
|
||||
width: 16px;
|
||||
border-radius: 3px;
|
||||
background: #ffffff;
|
||||
box-shadow: 1px 1px 1px #5e5e5e;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
border-radius: 7px;
|
||||
background: #C3C3C3;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
margin-top: -11px;
|
||||
margin-top: -6px;
|
||||
}
|
||||
input[type=range]:focus::-webkit-slider-runnable-track {
|
||||
background: #367ebd;
|
||||
background: #a7a7a7;
|
||||
}
|
||||
input[type=range]::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 8.4px;
|
||||
cursor: pointer;
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
background: #3071a9;
|
||||
background: #C3C3C3;
|
||||
border-radius: 1.3px;
|
||||
border: 0.2px solid #010101;
|
||||
}
|
||||
@@ -747,7 +794,7 @@ input[type=range]::-moz-range-thumb {
|
||||
height: 36px;
|
||||
width: 16px;
|
||||
border-radius: 3px;
|
||||
background: #ffffff;
|
||||
background: #C3C3C3;
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type=range]::-ms-track {
|
||||
@@ -2011,12 +2058,28 @@ div#roomnotes2 {
|
||||
}
|
||||
.controlsGrid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
display: grid;
|
||||
display: grid;
|
||||
grid-gap:10px;
|
||||
max-height: 0;
|
||||
transition: all 0.3s linear;
|
||||
overflow: hidden;
|
||||
}
|
||||
.controlsGrid button {
|
||||
margin: 5px;
|
||||
text-align: right;
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
background-color: var(--director-button-background-color);
|
||||
color: var(--director-button-label-color);
|
||||
border-radius: 6px;
|
||||
padding: 8px;
|
||||
font-size:15px;
|
||||
}
|
||||
.controlsGrid button.pressed {
|
||||
background-color: #868686;
|
||||
outline:none;
|
||||
box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
}
|
||||
|
||||
.controlsGrid span button {
|
||||
margin-right: 0;
|
||||
padding-left: 3px;
|
||||
@@ -2026,6 +2089,10 @@ div#roomnotes2 {
|
||||
margin: 5px var(--regular-margin);
|
||||
}
|
||||
|
||||
.controlsGrid button i.las.la-circle {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right;
|
||||
right: 0;
|
||||
@@ -2035,12 +2102,17 @@ div#roomnotes2 {
|
||||
left: 0;
|
||||
}
|
||||
i.las.la-circle {
|
||||
color: red;
|
||||
color: #DC1115;
|
||||
background: #DC1115;
|
||||
border-radius: 50%;
|
||||
}
|
||||
i.las.la-copy {
|
||||
cursor: pointer;
|
||||
}
|
||||
.streamID {
|
||||
text-align: right;
|
||||
margin: 5px;
|
||||
font-size: 0.7em;
|
||||
font-size: 1em;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -2065,10 +2137,10 @@ i.las.la-circle {
|
||||
margin-top: 20px;
|
||||
}
|
||||
div#guestFeeds {
|
||||
background: var(--container-color);
|
||||
padding: 5px 0 15px 20px;
|
||||
display: inline-block;
|
||||
margin: 0px var(--regular-margin);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
margin: 0px var(--regular-margin);
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
div#guestFeeds:empty {
|
||||
|
||||
88
main.js
88
main.js
@@ -4972,8 +4972,12 @@ function requestVideoSettings(ele) {
|
||||
}
|
||||
|
||||
function createControlBox(UUID, soloLink, streamID) {
|
||||
if (document.getElementById("deleteme")) {
|
||||
getById("deleteme").parentNode.removeChild(getById("deleteme"));
|
||||
|
||||
var placeholders = document.querySelector('#guestFeeds.placeholders');
|
||||
|
||||
if (placeholders) {
|
||||
getById("guestFeeds").innerHTML = '';
|
||||
placeholders.classList.remove('placeholders');
|
||||
}
|
||||
var controls = getById("controls_blank").cloneNode(true);
|
||||
|
||||
@@ -4982,14 +4986,33 @@ function createControlBox(UUID, soloLink, streamID) {
|
||||
container.className = "vidcon";
|
||||
container.style.margin = "15px 20px 0 0 ";
|
||||
|
||||
var container_contentTile = document.createElement("div");
|
||||
container_contentTile.className = "control_panel";
|
||||
|
||||
controls.style.display = "block";
|
||||
controls.id = "controls_" + UUID;
|
||||
getById("guestFeeds").appendChild(container);
|
||||
container.appendChild(container_contentTile);
|
||||
|
||||
var buttons = "<div class='streamID' style='user-select: none;'>ID: <span style='user-select: text;'>" + streamID + "</span>\
|
||||
<i class='las la-copy' data-sid='" + streamID + "' onmousedown='copyFunction(this.dataset.sid)' onclick='popupMessage(event);copyFunction(this.dataset.sid)' title='Copy this Stream ID to the clipboard' style='cursor:pointer'></i>\
|
||||
<span id='label_" + UUID + "' title='Click here to edit the label for this stream. Changes will propagate to all viewers of this stream'></span>\
|
||||
</div>";
|
||||
var buttons = `
|
||||
<h2 class='streamID' style='user-select: none;' onclick='expandPanel(this)'>
|
||||
<i class="las la-caret-right"></i>
|
||||
<span style='user-select: text;'>${streamID}</span>
|
||||
<i class='las la-copy' data-sid='${streamID}' onmousedown='copyFunction(this.dataset.sid)' onclick='popupMessage(event);copyFunction(this.dataset.sid)' title='Copy this Stream ID to the clipboard'></i>
|
||||
<span id='label_${UUID}' title='Click here to edit the label for this stream. Changes will propagate to all viewers of this stream'></span>
|
||||
</h2>
|
||||
<span class="control_panel_quality_toggles">
|
||||
<button data-action-type="change-quality1" title="Disable Video Preview" onclick="toggleQualityDirector(0, '${UUID}', this);">
|
||||
<span data-translate="change-to-low-quality">×</span>
|
||||
</button>
|
||||
<button class="pressed" data-action-type="change-quality2" title="Low-Quality Preview" onclick="toggleQualityDirector(50, '${UUID}', this);">
|
||||
<span data-translate="change-to-medium-quality">L</span>
|
||||
</button>
|
||||
<button data-action-type="change-quality3" title="High-Quality Preview" onclick="toggleQualityDirector(1200, '${UUID}', this);">
|
||||
<span data-translate="change-to-high-quality">H</span>
|
||||
</button>
|
||||
</span>
|
||||
`;
|
||||
|
||||
if (!session.rpcs[UUID].voiceMeter) {
|
||||
session.rpcs[UUID].voiceMeter = getById("voiceMeterTemplate").cloneNode(true);
|
||||
@@ -5000,13 +5023,13 @@ function createControlBox(UUID, soloLink, streamID) {
|
||||
}
|
||||
|
||||
session.rpcs[UUID].voiceMeter.style.top = "1vh";
|
||||
session.rpcs[UUID].voiceMeter.style.right = "1vh";
|
||||
session.rpcs[UUID].voiceMeter.style.right = "0.5vw";
|
||||
|
||||
|
||||
session.rpcs[UUID].remoteMuteElement = getById("muteStateTemplate").cloneNode(true);
|
||||
session.rpcs[UUID].remoteMuteElement.id = "";
|
||||
session.rpcs[UUID].remoteMuteElement.style.top = "1vh";
|
||||
session.rpcs[UUID].remoteMuteElement.style.right = "1vh";
|
||||
session.rpcs[UUID].remoteMuteElement.style.right = "0.5vw";
|
||||
|
||||
|
||||
var videoContainer = document.createElement("div");
|
||||
@@ -5014,12 +5037,13 @@ function createControlBox(UUID, soloLink, streamID) {
|
||||
videoContainer.style.margin = "0";
|
||||
videoContainer.style.position = "relative";
|
||||
|
||||
controls.innerHTML += "<div style='margin:10px;' id='advanced_audio_director_" + UUID + "' class='advanced'></div>";
|
||||
controls.innerHTML += "<div style='margin:10px;' id='advanced_video_director_" + UUID + "' class='advanced'></div>";
|
||||
|
||||
controls.querySelector('#advanced_audio_director_').id = controls.querySelector('#advanced_audio_director_').id + UUID;
|
||||
controls.querySelector('#advanced_video_director_').id = controls.querySelector('#advanced_video_director_').id + UUID;
|
||||
|
||||
var handsID = "hands_" + UUID;
|
||||
|
||||
controls.innerHTML += "<div>\
|
||||
controls.innerHTML += "<div class='control_panel'><h2>Solo links</h2>\
|
||||
<div style='padding:5px;word-wrap: break-word; overflow:hidden; white-space: nowrap; overflow: hidden; font-size:0.7em; text-overflow: ellipsis;' title='A direct solo view of the video/audio stream with nothing else. Its audio can be remotely controlled from here'> \
|
||||
<a class='soloLink' data-drag='1' draggable='true' onmousedown='copyFunction(this)' onclick='popupMessage(event);copyFunction(this)' \
|
||||
value='" + soloLink + "' href='" + soloLink + "'/>" + soloLink + "</a>\
|
||||
@@ -5035,8 +5059,9 @@ function createControlBox(UUID, soloLink, streamID) {
|
||||
ele.dataset.UUID = UUID;
|
||||
});
|
||||
|
||||
container.innerHTML = buttons;
|
||||
container.appendChild(videoContainer);
|
||||
|
||||
container_contentTile.innerHTML = buttons;
|
||||
container_contentTile.appendChild(videoContainer);
|
||||
videoContainer.appendChild(session.rpcs[UUID].voiceMeter);
|
||||
videoContainer.appendChild(session.rpcs[UUID].remoteMuteElement);
|
||||
container.appendChild(controls);
|
||||
@@ -5503,8 +5528,12 @@ function gotDevices(deviceInfos) { // https://github.com/webrtc/samples/blob/gh-
|
||||
}
|
||||
|
||||
|
||||
if (location.protocol !== 'https:') {
|
||||
if (!(session.cleanOutput)) {
|
||||
if (
|
||||
location.protocol !== "https:" &&
|
||||
location.hostname != "localhost" &&
|
||||
location.hostname != "127.0.0.1"
|
||||
) {
|
||||
if (!session.cleanOutput) {
|
||||
alert("SSL (https) is not enabled. This site will not work without it!");
|
||||
}
|
||||
}
|
||||
@@ -8350,7 +8379,9 @@ function updateDirectorsAudio(dataN, UUID) {
|
||||
errorlog(e);
|
||||
}
|
||||
}
|
||||
getById("advanced_audio_director_" + UUID).className = 'control_panel_sub';
|
||||
getById("advanced_audio_director_" + UUID).appendChild(audioEle);
|
||||
getById("advanced_audio_director_" + UUID).parentElement.style.maxHeight = getById("advanced_audio_director_" + UUID).parentElement.scrollHeight + "px";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8513,7 +8544,9 @@ function updateDirectorsVideo(data, UUID) {
|
||||
|
||||
getById("advanced_video_director_" + UUID).innerHTML = "";
|
||||
getById("advanced_video_director_" + UUID).appendChild(videoEle);
|
||||
getById("advanced_video_director_" + UUID).className = "";
|
||||
getById("advanced_video_director_" + UUID).className = "control_panel_sub";
|
||||
getById("advanced_video_director_" + UUID).parentElement.style.maxHeight = getById("advanced_video_director_" + UUID).parentElement.scrollHeight + "px";
|
||||
|
||||
}
|
||||
|
||||
///////
|
||||
@@ -11522,3 +11555,26 @@ addEventToAll("#multiselect-trigger3", 'mousedown touchend focusin focusout', fu
|
||||
});
|
||||
|
||||
|
||||
function expandPanel(element) {
|
||||
|
||||
element.parentElement.classList.toggle("active");
|
||||
|
||||
if (element.parentElement.classList.contains('active')) {
|
||||
element.querySelector('i').className = 'las la-caret-down';
|
||||
} else {
|
||||
element.querySelector('i').className = 'las la-caret-right';
|
||||
}
|
||||
|
||||
|
||||
var content = element.parentElement.querySelector(".controlsGrid");
|
||||
|
||||
if (content.style.maxHeight) {
|
||||
content.style.maxHeight = null;
|
||||
} else {
|
||||
content.style.maxHeight = content.scrollHeight + "px";
|
||||
}
|
||||
setTimeout(function () {
|
||||
element.scrollIntoView({ block: "center", behavior: "smooth" });
|
||||
}, 200)
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user