Add files via upload

v28.4 updates

- minor css fixes

Author: steveseguin

convert.html

@@ -5,6 +5,7 @@
 			max-width: min(80%,875px);
 			width: fit-content;
 			margin: 0 auto;
+			overflow: auto;
 		}
 
 		h1 {

index.html

@@ -43,7 +43,7 @@
 
 		<meta name="msapplication-TileColor" content="#da532c" />
 		<meta name="theme-color" content="#0f131d" />
-		<link rel="stylesheet" href="./main.css?ver=4019" />
+		<link rel="stylesheet" href="./main.css?ver=4021" />
 		<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/adapter.js"></script>
 
 		<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon" />
@@ -84,9 +84,9 @@
 		<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
 			<link itemprop="url" href="./media/vdoNinja_logo_full.png" />
 		</span>
-		<script type="text/javascript" crossorigin="anonymous"  src="./thirdparty/CodecsHandler.js?ver=28"></script>
+		<script type="text/javascript" crossorigin="anonymous"  src="./thirdparty/CodecsHandler.js?ver=29"></script>
 		<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/aes.js"></script>
-		<script type="text/javascript" crossorigin="anonymous" src="./webrtc.js?ver=865"></script>
+		<script type="text/javascript" crossorigin="anonymous" src="./webrtc.js?ver=877"></script>
 		<input id="zoomSlider" type="range" style="display: none;" />
 		<span id="electronDragZone" style="display:none;pointer-events: none; z-index:-10; position:absolute;top:0;left:0;width:100%;height:2%;min-height:20px;"></span>
 		<div id="header">
@@ -187,8 +187,12 @@
                         <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 (ALT + A)" onclick="toggleSpeakerMute()"  tabindex="2" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;" >
+                    <div id="mutespeakerbutton" onmousedown="handleSpeakerButtonMouseDown(event)" alt="Toggle the speaker output." aria-label="Mute Speaker output" title="Mute the Speaker (ALT + A)" onclick="toggleSpeakerMute()"  tabindex="2" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;" >
                         <i id="mutespeakertoggle" class="toggleSize las la-volume-up" style="position: relative; top: 0.5px;"></i>
+                        <div id="speakerVolumePanel" class="speaker-volume-panel hidden" role="group" aria-label="Playback volume">
+                            <input id="speakerVolumeSlider" type="range" min="1" max="100" value="100" orient="vertical" aria-label="Playback volume">
+                            <div id="speakerVolumeValue" class="speaker-volume-value">100%</div>
+                        </div>
                     </div>
                     <div id="mutebutton" onmousedown="toggleMute(false, event);event.preventDefault(); event.stopPropagation();" data-translate="mute-the-mic" title="Mute the Mic (CTRL/⌘ + M)" alt="Mute the Mic" aria-label="Mute Microphone" ontouchstart="toggleMute(false, event);event.preventDefault(); event.stopPropagation();" tabindex="2" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;">
                         <i id="mutetoggle" class="toggleSize las la-microphone" style="position: relative; top: 0.5px;"></i>
@@ -273,6 +277,11 @@
 			<div id="closedList_connectUsers" class="hidden"  onclick="getById('connectUsers').classList.remove('hidden');getById('closedList_connectUsers').classList.add('hidden');">
 				<i class="las la-theater-masks"></i>
 			</div>
+			<div class="footer hidden" id="legal" aria-hidden="true">
+				<a href="https://docs.vdo.ninja/help/privacy-and-security-details/vdo.ninja-terms-of-service" aria-hidden="true" target="_blank" alt="Terms of Service" title="Opens in new window">Terms of Service</a> | 
+				<a href="https://docs.vdo.ninja/help/privacy-and-security-details/vdo.ninja-privacy-policy" aria-hidden="true" target="_blank" alt="Privacy Policy" title="Opens in new window">Privacy Policy</a> | 
+				<a href="https://docs.vdo.ninja/help/privacy-and-security-details/abuse-and-child-safety" aria-hidden="true" target="_blank" alt="Report Abuse" title="Opens in new window">Report Abuse</a>
+			</div>
 			<span
 					id="reportbutton"
 					title="Submit any error logs" 
@@ -447,6 +456,7 @@ <h2>
 								<span data-translate="join-the-room-basic">Join the room as a Participant, rather than a director</span>
 							</button>
 						</span>
+						
 					</div>
 					<div class="outer close">
 						<div class="inner">
@@ -772,8 +782,8 @@ <h3><i class="las la-info-circle"></i> Things to Note</h3>
 							<li>Screen audio selection will be handled by your browser's sharing dialog</li>
 							<li>Additional microphone sources can be added and will be mixed with your screen audio</li>
 							<li>Quality settings affect maximum capture resolution - lower settings may be smoother</li>
-							<li id="audioScreenCaptureDocs" data-translate="application-audio-capture">For application-specific audio capture, <a href='https://docs.vdo.ninja/audio' target="_blank">see here</a></li>
-							<li id="audioScreenCaptureDocs2" data-translate="1080p-screen-capture-guide">For achieving 1080p60 game-capture, <a href='https://docs.vdo.ninja/guides/how-to-screen-share-in-1080p' target="_blank">see here</a></li>
+							<li id="audioScreenCaptureDocs" data-translate="application-audio-capture">For application-specific audio capture, <a href="https://docs.vdo.ninja/audio" target="_blank">see here</a></li>
+							<li id="audioScreenCaptureDocs2" data-translate="1080p-screen-capture-guide">For achieving 1080p60 game-capture, <a href="https://docs.vdo.ninja/guides/how-to-screen-share-in-1080p" target="_blank">see here</a></li>
 						</ul>
 					</div>
 					<br />
@@ -1126,34 +1136,32 @@ <h2>What is VDO.Ninja</h2>
 								<a href="https://docs.vdo.ninja/common-errors-and-known-issues/known-issues" title="For a list of common or known issues, click here" target="_blank"><span style="color: red;">Known issues:</span></a>
 							</i>
 							<br />
-							<li>
-								Users report that robotic sounding audio in OBS can be addressed by updating to OBS v31.1 or newer
-							</li>
 							<li>
 								If the video fails to load in OBS Studio, where the browser source remains blank, try disabling hardware-acceleration or 
-								<a href='https://docs.vdo.ninja/common-errors-and-known-issues/obs.ninja-doesnt-show-up-in-obs-or-is-choppy' title="Click to link out to the VDO.Ninja help guide for common OBS Studio problems" target="_blank">refer to this help guide</a> for more.
+								<a href="https://docs.vdo.ninja/common-errors-and-known-issues/obs.ninja-doesnt-show-up-in-obs-or-is-choppy" title="Click to link out to the VDO.Ninja help guide for common OBS Studio problems" target="_blank">refer to this help guide</a> for more.
 							</li>
 							<br />
 							<h4>
 								<span style="color:#daad09;">Welcome to VDO Ninja! We've rebranded!  Nothing else is changing and we're staying 100% free.</span>
 							</h4>
 							<br />
-							<span title="Made in Canada">🎒</span> Site last updated on August 26th. You can also still access the previous version, which <a href="https://vdo.ninja/v27.4/">is hosted here</a>. Development <a target="_blank" title="Open a page with recent VDO.Ninja development and feature updates" href="https://updates.vdo.ninja/">updates are here.</a>
+							<span title="Made in Canada">🎒</span> Site last updated on September 23rd. You can also still access the previous version, which <a href="https://vdo.ninja/v27.4/">is hosted here</a>. Development <a target="_blank" title="Open a page with recent VDO.Ninja development and feature updates" href="https://updates.vdo.ninja/">updates are here.</a>
 							<br />
 							<br />
 							<h3>
-							   🛠 For support, join the <a href="https://discord.gg/T4xpQVv" target="_blank">Discord <i class="lab la-discord"></i></a> or see the <a href="https://www.reddit.com/r/VDONinja/" target="_blank">sub-reddit <i class="lab la-reddit-alien"></i></a>. The <a href="https://docs.vdo.ninja/" target="_blank">documentation is here</a> and my personal email is <i>steve@seguin.email</i>
+							   🛠 For support, join the <a href="https://discord.vdo.ninja" target="_blank">Discord <i class="lab la-discord"></i></a> or see the <a href="https://www.reddit.com/r/VDONinja/" target="_blank">sub-reddit <i class="lab la-reddit-alien"></i></a>. The <a href="https://docs.vdo.ninja/" target="_blank">documentation is here</a> and my personal email is <i>steve@seguin.email</i>
 							</h3> 
-							<a href='https://docs.vdo.ninja/steves-helper-apps/native-mobile-app-versions' target='_blank'>
+							<a href="https://docs.vdo.ninja/steves-helper-apps/native-mobile-app-versions" target="_blank">
 						</span>
 					</div>
 				</center>
 			</div>
 			<form method="post" onsubmit="setFormSubmitting()" style="display: none;" aria-hidden="true">
 				<input type="submit" />
 			</form>
-			<div id="credits" class="credits" aria-hidden="true">
-				<a href='https://github.com/steveseguin/vdoninja' aria-hidden="true" title="Made in Canada">VDO.Ninja, by Steve Seguin</a> 
+			<div id="credits" class="footer" aria-hidden="true">
+				<a href="https://docs.vdo.ninja/help/privacy-and-security-details/vdo.ninja-terms-of-service" aria-hidden="true" target="_blank" alt="Terms of Service" title="Opens in new window">Terms of Service</a> | 
+				<a href="https://docs.vdo.ninja/help/privacy-and-security-details/vdo.ninja-privacy-policy" aria-hidden="true" target="_blank" alt="Privacy Policy" title="Opens in new window">Privacy Policy</a>
 			</div>
 		</div>
 		<div id="directorlayout" class="hidden directorsgrid">
@@ -2555,10 +2563,18 @@ <h3 data-translate="change-room-settings">Change room settings</h3><br />
 						<label for="coDirectorEnable" data-translate="allow-for-remote-co-directors">Allow for remote co-directors</label> 
 					</span>
 					<span style="margin:0;display:none;" id='codirectorSettings'>
-						<div>
-							<input id="codirectorSettings_transfer" style="width: 15px; height: 15px; margin:10px;" name="codirectorSettings_transfer"  data-action-type="codirector_transfer" type="checkbox" onchange="toggleCoDirector_transfer(this);" />
-							<label for="codirectorSettings_transfer" data-translate="allow-co-directors-to-transfer-guests">Allow co-directors to transfer guests</label> 
-						</div>
+                            <div>
+                                <input id="codirectorSettings_transfer" style="width: 15px; height: 15px; margin:10px;" name="codirectorSettings_transfer"  data-action-type="codirector_transfer" type="checkbox" onchange="toggleCoDirector_transfer(this);" />
+                                <label for="codirectorSettings_transfer" data-translate="allow-co-directors-to-transfer-guests">Allow co-directors to transfer guests</label> 
+                            </div>
+                            <div id="codirectorSettings_approve_container" style="display:none;">
+                                <input id="codirectorSettings_approve" style="width: 15px; height: 15px; margin:10px;" name="codirectorSettings_approve"  data-action-type="codirector_approve" type="checkbox" onchange="toggleCoDirector_approve(this);" />
+                                <label for="codirectorSettings_approve">Allow co-directors to approve held guests</label>
+                                <br />
+                                <input id="codirectorSettings_approvepopup" style="width: 15px; height: 15px; margin:10px;" name="codirectorSettings_approvepopup"  data-action-type="approve_popup" type="checkbox" onchange="toggleApprovalPopup(this);" />
+                                <label for="codirectorSettings_approvepopup" title="Show an approval popup to directors/co-directors when a guest is held">Show approval popup for held guests</label>
+                            </div>
+                            
 						<div style="display:none;">
 							<input id="codirectorSettings_changeurl" style="width: 15px; height: 15px; margin:10px; " name="codirectorSettings_changeurl"  data-action-type="codirector_changeurl" type="checkbox" onchange="toggleCoDirector_changeurl(this);" />
 							<label for="codirectorSettings_changeurl" data-translate="allow-co-directors-to-change-a-guests-url">Allow co-directors to change a guest's URL</label> 
@@ -2879,10 +2895,14 @@ <h3>Assign to slot:</h3><br />
 			</label>
 		</div>
 		<div id="gridlayout"></div>
-		<audio id="testtone" style="display:none;" preload="none">
-			<source src="./media/tone.mp3" type="audio/mpeg"> 
-			<source src="./media/tone.ogg" type="audio/ogg"> 
-		</audio>
+            <audio id="testtone" style="display:none;" preload="none">
+                <source src="./media/tone.mp3" type="audio/mpeg"> 
+                <source src="./media/tone.ogg" type="audio/ogg"> 
+            </audio>
+            <audio id="knocktone" style="display:none;" preload="none">
+                <source src="./media/knock.mp3" type="audio/mpeg">
+                <source src="./media/knock.ogg" type="audio/ogg">
+            </audio>
 		<div class="gone" >
 			<!-- This image is used when dragging elements -->
 			<img src="./media/favicon-32x32.png" id="dragImage" loading="lazy" />
@@ -2969,7 +2989,7 @@ <h3>Assign to slot:</h3><br />
 			// if (!window.location.search){document.body.innerHTML = "";} // uncomment this line, if you wish to try it.
 
 			var session = WebRTC.Media; // session is a required global variable if configuring manually. Run before loading main.js but after webrtc.js.
-			session.version = "28.0"; // updated: default 1080p now + tweaked outbound bandwidth logic
+			session.version = "28.4"; // updated: default 1080p now + tweaked outbound bandwidth logic
 			session.streamID = session.generateStreamID(); // randomly generates a streamID for this session. You can set your own programmatically if needed
 
 			session.defaultPassword = "someEncryptionKey123"; // Change this password if self-deploying for added security/privacy
@@ -3117,8 +3137,8 @@ <h3>Assign to slot:</h3><br />
 			}
 		</script>
 
-		<script type="text/javascript" crossorigin="anonymous" id="lib-js" src="./lib.js?ver=1351"></script>
-		<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=995"></script>
+		<script type="text/javascript" crossorigin="anonymous" id="lib-js" src="./lib.js?ver=1366"></script>
+		<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=1003"></script>
 
 	</body>
 </html>