director UI update

using a smaller version instead

README.md

@@ -1,5 +1,5 @@
 
-<img src="images/obsNinja_logo_full.png" alt="Logo by brimace" data-canonical-src="https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png" height="150" />
+<img src="media/obsNinja_logo_full.png" alt="Logo by brimace" data-canonical-src="https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png" height="150" />
 
 ## What is OBS NINJA
 OBS.Ninja uses peer-to-peer technology to bring remote cameras into OBS. In most cases, all video data is transferred directly from peer to peer, without needing to go through any video server. This results in high-quality video with super low latency. In a small number of cases, video data may go through an encrypted TURN server, which is used to facilitate peer connections when otherwise not possible.
@@ -14,32 +14,30 @@ Also check out the FAQ for more info: https://github.com/steveseguin/obsninja/wi
 ## How to use:
 I demo the basic usage of OBS.Ninja on YouTube: https://www.youtube.com/watch?v=6R_sQKxFAhg
 
-Here is a podcast series showing how to use different basic OBS.Ninja features: https://www.youtube.com/watch?v=XfSqufuoV74&list=PLWodc2tCfAH1l_LDvEyxEqFf42hOBKqQM
+Here is a podcast series showing how to use different basic OBS.Ninja features, including macOS support: https://www.youtube.com/watch?v=XfSqufuoV74&list=PLWodc2tCfAH1l_LDvEyxEqFf42hOBKqQM
 
 And Here is another video series touching on some more advanced settings: https://www.youtube.com/watch?v=mQ1Jdhf5aYg&list=PL8VJWj2-XLFpFu3G35Hdm1nKZ2xn9_0_8
 
 Check the subreddit for added use cases, advanced features, and support. Advanced features includes high-quality audio modes, custom video resolutions, and more.
 
-[Update as of January 2021]
-
-MacOS need to upgrade to OBS v26.1.2 or newer to have access native support for OBS.Ninja on macOS. Users with older OBS versions or using StreamLabs may still wish to use the Electron Capture app: https://github.com/steveseguin/electroncapture
+MacOS users will face some challenges in using OBS 25/26, but there are workarounds. Please see the subreddit or the Wiki.
 
 ## What's in this repo?
-This repo contains client-side software for OBS.Ninja, including the HTML landing page for its Electron Capture app offering. A sample config file and instructions for setting up a TURN server (video relay server) is also provided. You may also find the Wiki for the project in this repo, which contains added information on how to use the software. The code provided is designed to allow for innovation, customization, white-labelling, and exploration.
+This repo contains software for OBS.Ninja, including the HTML landing page for its Electron Capture app offering. A sample config file and instructions for setting up a TURN server (video relay server), is also provided. You may also find the Wiki for the project in this repo, which contains added information on how to use the software.
 
 ## How to Deploy this Repo:
-To use, just download and host the files on a HTTPS-enabled webserver. You may want to hide the .html extensions within your HTTP server as well, else the generated links may not work. See [here](https://github.com/steveseguin/obsninja/blob/master/install.md) for added details and alternative install options.
+To use, just download and host the files on a HTTPS-enabled webserver. You may want to hide the .html extensions within your HTTP server as well, else the generated links will not work. See [here](https://github.com/steveseguin/obsninja/blob/master/install.md) for added details and alternative install options.
 
-Directions on how to deploy a TURN server are listed in the turnserver.md file. You may wish to do so, although not all use cases will need one. Only about ~10% of remote guests need them; those often connected via 4G LTE or those behind corporate firewall. While OBS.Ninja does host some TURN servers freely for OBS.Ninja users, they are quite expensive to operate and are not really for private deployment use. If you are deploying your own version of OBS.Ninja, I'd ask you use your own TURN servers instead, but I likely won't enforce this unless there is heavy abuse.
+Directions on how to deploy a TURN server are listed in the turnserver.md file. You may wish to do so, although not all use cases will not need one. Only about 10% of remote guests, those often connected via 4G LTE, will require a TURN server. While OBS.Ninja does host some TURN servers, they are quite expensive to operate and not really for private deployment use. If you are deploying your own version of OBS.Ninja, I'd ask you use your own TURN servers instead. 
 
 ## Server side / API software?
-Since OBS.Ninja uses peer-to-peer technology, video connections are made directly between viewer and publisher in ~90% of cases. The remaining connections will likely have to happen over a TURN video relay server, hosted in the cloud. These servers ensure peer connection compatibility. Very few users will see any benefit of using a TURN server over a direct peer connection, but there are still cases it may be helpful or required to deploy your own. Details on how to deploy a TURN server are provided in the repo.
+Since OBS.Ninja uses peer-2-peer technology, video connections are made directly between viewer and publisher in 90% of cases. Hosting a TURN server yourself may help improve performance, but less than 1% of users will see any benefit of this. Details on how to deploy a TURN server are provided. For those capable of hosting their own TURN server, that would be appreciated if possible, as TURN servers are the only real cost incurred by OBS.Ninja at present. (other than time, of course)
 
-Other than TURN servers, OBS.Ninja also uses public STUN servers and a custom hosted handshake server. These are used to facilitate the initial setup of peer connections and are generally not required after a peer connection is established. These servers are free to access and use, even for private deployments. This repo does not include details on setting up a STUN servers and does not yet make available the handshake server code.
+Other than TURN servers, OBS.Ninja also uses public STUN servers and a hosted handshake server. These are used to facilitate the initial setup of peer connections and are generally not required after a peer connection is established. These servers are free to access and use, even for private deployments. 
 
-Development builds of OBS.Ninja may include debugging software, but in-production releases have this removed. Double check to ensure debugging dependencies are disabled though before deployment, just to be safe. Please see the index.html header for any such dependencies. 
+Development builds of OBS.Ninja may include debugging software, but in-production releases have this removed. Double check to ensure "console.re" debugging is disabled before deployment, just to be safe.
 
-A design goal of OBS.Ninja is to be serverless and we are like 99% of the way there. This design objective ensures OBS.Ninja can be offered for free, along with providing increased levels of security and privacy. 
+A design goal of OBS.Ninja is to be serverless and we are 99% of the way there. This design objective ensures OBS.Ninja can be offered for free, along with providing increased levels of security and privacy. 
 
 ## Issues? problems? Not working?
 
@@ -65,9 +63,9 @@ https://steves.app/
 A browser-based studio solution and simplified alternative to OBS, with built-in OBS.Ninja functionality. It is a server-based approach to group interactions and live production. Steve Seguin is affiliated with StageTEn, yet StageTEN is not affiliated with OBS.Ninja.
 
 ## Privacy
-I try to avoid data collection whenever possible and video streams are generally designed to be private, but use at your own risk. It is best to not share links created with OBS.Ninja with those you do not trust. I've provided instructions on how to deploy a TURN server if IP-address privacy is an issue for you, as they can be used to mask your IP address, along with some VPN services. See: turnserver.md 
+I try to avoid data collection whenever possible and video streams are generally designed to be private, but use at your own risk. It is best to not share links created with OBS.Ninja with those you do not trust. I've provided instructions on how to deploy a TURN server if IP-address privacy is an issue for you. See: turnserver.md 
 
-https://obs.ninja may unavoidably use cookies that are exempt from EU laws of requiring notice of their use; they are exempt as they are required and necessary for the technical function of the web service. Our webserver is cached by Cloudflare and it provides denial of server protection for the users of OBS.Ninja.
+https://obs.ninja may unavoidably use cookies that are exempt from EU laws of requiring notice of their use; they are exempt as they are required and necessary for the technical functioning of the web service. Our webserver is cached by Cloudflare and it provides denial of server protection for the users of OBS.Ninja.
 
 Additional security features are being added weekly on request. Please ask about these options if added security and privacy are requirements for you.
 

animations.js

@@ -1,121 +0,0 @@
-$("body").append('<style id="lightbox-animations" type="text/css"></style>');
-$(".column").on('click', function() {
-	if ( $(this).hasClass( "skip-animation" )){
-		return;
-	}
-	var bounding_box = $(this).get(0).getBoundingClientRect();
-	$(this).css({ top: bounding_box.top + 'px', left: bounding_box.left -20+ 'px' });
-	$(this).addClass('in-animation').removeClass('pointer');
-	$("#empty-container").remove();
-	$('<div id="empty-container" class="column"></div>').insertAfter(this);
-
-	var styles = '';
-	styles = '@keyframes outlightbox {';
-	styles += '0% {';
-	styles += 'height: 100%;';
-	styles += 'width: 100%;';
-	styles += 'top: 0px;';
-	styles += 'left: 0px;';
-	styles += '}';
-	styles += '50% {';
-	styles += 'height: 220px;';
-	styles += 'top: ' + bounding_box.y + 'px;';
-	styles += '}';
-	styles += '100% {';
-	styles += 'height: 220px;';
-	styles += 'width: '+bounding_box.width+'px;';
-	styles += 'top: ' + bounding_box.y + 'px;';
-	styles += 'left: ' + bounding_box.x + 'px;';
-	styles += '}';
-	styles += '}';
-
-	$("#lightbox-animations").empty();
-	$("#lightbox-animations").get(0).sheet.insertRule(styles, 0);
-	$("body").css('overflow', 'hidden');
-});
-
-$(".close").on('click', function(e) {
-	$(this).hide();
-	$(".container-inner").hide();
-	$("body").css('overflow', 'auto');
-	var bounding_box = $(this).parent().get(0).getBoundingClientRect();
-	$(this).parent().css({ top: bounding_box.top + 'px', left: bounding_box.left + 'px' });
-	$(this).parent().addClass('out-animation');
-	cleanupMediaTracks(); 
-	e.stopPropagation();
-});
-
-$(".column").on('animationend', function(e){
-	if (e.originalEvent.animationName == 'inlightbox') {
-		$(this).children(".close").show();
-		$(this).children(".container-inner").show();
-	}
-	else if (e.originalEvent.animationName == 'outlightbox') {
-		$(this).removeClass('in-animation').removeClass('out-animation').removeClass('columnfade').addClass('pointer');
-		$("#empty-container").remove();
-		$("#lightbox-animations").get(0).sheet.deleteRule(0);
-	}
-});
-
-
-$('#audioSource').on('mousedown touchend focusin focusout', function(e) {
-     var state = $('#multiselect-trigger').data('state') || 0;
-     if( state == 0 ) {
-        $('#multiselect-trigger').data('state', '1').addClass('open').removeClass('closed');
-        $('#multiselect-trigger').find('.chevron').removeClass('bottom'); 
-        $('#multiselect-trigger').parent().find('.multiselect-contents').show();
-		$('#multiselect-trigger').parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show();;
-		$('#multiselect-trigger').parent().find('.multiselect-contents').find('input[type="checkbox"]').show();;
-    } 
-});
-
-$('#audioSource3').on('mousedown touchend focusin focusout', function(e) {
-     var state = $('#multiselect-trigger3').attr('data-state') || 0;
-     if( state == 0 ) {
-        $('#multiselect-trigger3').attr('data-state', '1').addClass('open').removeClass('closed');
-        $('#multiselect-trigger3').find('.chevron').removeClass('bottom'); 
-        $('#multiselect-trigger3').parent().find('.multiselect-contents').show();
-		$('#multiselect-trigger3').parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show();;
-		$('#multiselect-trigger3').parent().find('.multiselect-contents').find('input[type="checkbox"]').show();;
-    } 
-});
- 
-$('#multiselect-trigger').on('mousedown touchend focusin focusout', function(e) {
-    var state = $(this).data('state') || 0;
-    if( state == 0 ) {
-        // open the dropdown
-        $(this).data('state', '1').addClass('open').removeClass('closed');
-        $(this).find('.chevron').removeClass('bottom');
-        $(this).parent().find('.multiselect-contents').show();
-		$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show();;
-		$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').show();;
-    } else {
-        // close the dropdown
-        $(this).data('state', '0').addClass('closed').removeClass('open');
-        $(this).find('.chevron').addClass('bottom');
-		$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').not(":checked").parent().hide();;
-		$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').hide();;
-    } 
-    e.preventDefault();
-});
-// multiselect dropdowns
-$('#multiselect-trigger3').on('mousedown touchend focusin focusout', function(e) {
-    var state = $(this).attr('data-state') || 0;
-	
-    if( state == 0 ) {
-        // open the dropdown
-		errorlog("STATE: "+state);
-        $(this).attr('data-state', '1').addClass('open').removeClass('closed');
-        $(this).find('.chevron').removeClass('bottom');
-        $(this).parent().find('.multiselect-contents').show();
-		$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show();;
-		$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').show();;
-    } else {
-        // close the dropdown
-        $(this).attr('data-state', '0').addClass('closed').removeClass('open');
-        $(this).find('.chevron').addClass('bottom');
-		$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').not(":checked").parent().hide();;
-		$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').hide();;
-    } 
-    e.preventDefault();
-});

convert.html

@@ -1,20 +1,76 @@
-<body>
+<head>
+<link rel="stylesheet" href="./main.css?ver=39" />
+<style>
+
+body {
+
+}
+
+input {padding:10px;}
+
+h3 { margin-top:10px; padding:5px;}
+
+hr {
+	margin: 20px 0;
+}
+video{
+	max-width:640px;
+	max-height:360px;
+	padding:20px;
+}
+audio{
+	max-width:640px;
+	max-height:360px;
+	padding:20px;
+}
+
+</style>
+</head>
+<body style='color:white'>
+
 <video id="player" controls style="display:none"></video>
+<audio id="player2" controls style="display:none"></audio>
 <div id="info">
-	<h3>This tool can be used to convert WebM videos of dynamic resolution to MP4 files of a fixed 1280x720 resolution.</h3>  Just select a video file and wait. It takes about 60-seconds to transcode 1-second of video.  Very sloowww...<br />
-	<p>You can use FFMpeg locally to achieve much faster results.</p>
-	<p>This tool performs the following action in your browser: <i>fmpeg -i input.webm -vf scale=1280:720 output.mp4</i><p>
+<h1>Web-based Media Conversion Tools</h1>
+<hr>
+	<h3>Transcodes WebM files to MP4 files with a fixed 1280x720 resolution. (very slow!)</h3><br />
+	<small><p>This tool performs the following action in your browser: <i> fmpeg -i input.webm -vf scale=1280:720 output.mp4</i></p></small>
 	<input type="file" id="uploader" title="Convert WebM to MP4">
-	<hr>
-	<h3>Bonus: This option converts MKV files to MP4 files without transcoding.</h3> </p><i>fmpeg -i INPUTFILE -vcodec copy -acodec copy output.mp4</i>
-	<br /><br /><input type="file" id="uploader2" accept=".mkv" title="Convert MKV to MP4">
-	<p>You can use FFMpeg locally to achieve much faster results with either option.</p>
-	<h3>This option converts WebM files to MP4 files without transcoding, and attempting to force high resolutions.
-	<br /><br /><input type="file" id="uploader3"  accept=".webm" title="Convert WebM to MP4">
 	
-  </div>
+	<hr>
+	<h3>Remuxes MKV files to MP4 files without transcoding.</h3> </p><br /><small><i> fmpeg -i INPUTFILE -vcodec copy -acodec copy output.mp4</i></small>
+	<br /><input type="file" id="uploader2" accept=".mkv" title="Convert MKV to MP4">
+	
+	<hr>
+	
+	<h3>Remuxes WebM files to MP4 files without transcoding (attempts to force high resolutions, also)</h3>
+	<input type="file" id="uploader3"  accept=".webm" title="Convert WebM to MP4">
+	
+	<hr>
+	<h3>Remuxes WebM to Audio-only files (opus or wav)</h3>
+	<input type="file" id="uploader4"  accept=".webm" title="Convert WebM to OPUS">
+	
+	<hr>
+	
+</div>
   <script src="https://unpkg.com/@ffmpeg/ffmpeg@0.9.6/dist/ffmpeg.min.js"></script>
   <script>
+  
+	function download(data, filename) {
+        const blob = new Blob([data.buffer]);
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.style.display = 'none';
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        setTimeout(() => {
+            document.body.removeChild(a);
+            window.URL.revokeObjectURL(url);
+        }, 100);
+    }
+  
     const { createFFmpeg, fetchFile } = FFmpeg;
     const ffmpeg = createFFmpeg({ log: true });
     const transcode = async ({ target: { files } }) => {
@@ -44,13 +100,14 @@
       const data = ffmpeg.FS('readFile', 'output.mp4');
       const video = document.getElementById('player');
       video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
+	  
 	  video.style.display="block";
 	  document.getElementById('info').innerText = "Operation Done. Play video or download it.";
     }
 	
 	const force1080 = async ({ target: { files } }) => {
       const { name } = files[0];
-	  const sourceBuffer = await fetch("cap.webm").then(r => r.arrayBuffer());
+	  const sourceBuffer = await fetch("./media/cap.webm").then(r => r.arrayBuffer());
 	  document.getElementById('uploader').style.display="none";
 	  document.getElementById('uploader2').style.display="none";
 	  document.getElementById('uploader3').style.display="none";
@@ -67,8 +124,34 @@
 	  document.getElementById('info').innerText = "Operation Done. Play video or download it.";
     }
 	
+	const convertToAudioOnly = async ({ target: { files } }) => {
+    const { name } = files[0];
+	  document.getElementById('info').innerText = "Transcoding file... this will take a while";
+      await ffmpeg.load();
+	  ffmpeg.FS('writeFile', name, await fetchFile(files[0]));
+	  const video = document.getElementById('player');
+		  
+	  await ffmpeg.run('-i', name, '-vn',  '-acodec', 'copy', 'output.opus');
+	  const data = ffmpeg.FS('readFile', 'output.opus');
+	  
+	  console.log(data.buffer.byteLength);
+		if (data.buffer.byteLength){
+			video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'audio/opus' }));
+			download(data, name.split(".")[0]+".opus");
+		} else {
+			await ffmpeg.run('-i', name, '-vn',  '-acodec', 'copy', 'output.wav');
+			const data2 = ffmpeg.FS('readFile', 'output.wav');
+			video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'audio/pcm' }));
+			download(data2, name.split(".")[0]+".wav");
+		}
+	  
+	  video.style.display="block";
+	  document.getElementById('info').innerText = "Operation Done. Play audio or download it.";
+    }
+	
     document.getElementById('uploader').addEventListener('change', transcode);
 	document.getElementById('uploader2').addEventListener('change', transmux);
 	document.getElementById('uploader3').addEventListener('change', force1080);
+	document.getElementById('uploader4').addEventListener('change', convertToAudioOnly);
   </script>
 </body>

dock.html

@@ -117,22 +117,25 @@ function generateInvite(){
 	if (getById("invite_vp9").checked){
 		viewstr+="&codec=vp9";
 	}
+	if (getById("invite_h264").checked){
+		viewstr+="&codec=h264";
+	}
 	if (getById("invite_stereo").checked){
 		viewstr+="&stereo";
 		sendstr+="&stereo";
 	}
-	if (getById("invite_secure").checked){
-		sendstr+="&secure";
-	}
+	//if (getById("invite_secure").checked){
+	//	sendstr+="&secure";
+	//}
 	if (getById("invite_hidescreen").checked){
 		sendstr+="&webcam";
 	}
 
-	if (getById("invite_remotecontrol").checked){  //
-		var remote_gen_id = generateStreamID();
-		sendstr+="&remote="+remote_gen_id; // security
-		viewstr+="&remote="+remote_gen_id;
-	}
+	//if (getById("invite_remotecontrol").checked){  //
+	//	var remote_gen_id = generateStreamID();
+	//	sendstr+="&remote="+remote_gen_id; // security
+	//	viewstr+="&remote="+remote_gen_id;
+	//}
 
 	if (getById("invite_joinroom").value.trim().length){
 		sendstr+="&room="+getById("invite_joinroom").value.replace(/[\W]+/g,"_");
@@ -231,7 +234,9 @@ document.addEventListener("dragstart", event => {
 	
 	<input type="checkbox" id="invite_bitrate" /><label for="invite_bitrate"> <span data-translate="unlock-video-bitrate">Unlock Video Bitrate (20mbps)</span></label>
 	<br />
-	<input type="checkbox" id="invite_vp9" /><label for="invite_vp9"> <span data-translate="force-vp9-video-codec">VP9 Video Codec</span></label>
+	<input type="checkbox" id="invite_vp9" onclick="getById('invite_h264').checked=false;" /><label for="invite_vp9"> <span data-translate="force-vp9-video-codec">VP9 Video Codec</span></label>
+	<br />
+	<input type="checkbox" id="invite_h264" onclick="getById('invite_vp9').checked=false;" /><label for="invite_h264"> <span data-translate="force-h264-video-codec">H264 Video Codec</span></label>
 	<br />
 	<input type="checkbox" id="invite_stereo" /><label for="invite_stereo"> <span data-translate="enable-stereo-and-pro">Stereo and Pro HD Audio</span></label>
 	<br />
@@ -245,17 +250,11 @@ document.addEventListener("dragstart", event => {
 	</select>
 	<br />
 	<br />
-	<input type="checkbox" id="invite_secure" />
-	<label for="invite_secure"> <span data-translate="high-security-mode">High Security Mode</span></label>
-	<br />
 	<input type="checkbox" id="invite_hidescreen" />
 	<label for="invite_hidescreen"> <span data-translate="hide-screen-share">Hide Screenshare Option</span></label>
 	<br />
-	<input type="checkbox" id="invite_remotecontrol" />
-	<label for="invite_remotecontrol"> <span data-translate="allow-remote-control">Remote Control Camera Zoom</span></label>
 	<br />
-	<br />
-	<label for="videoname">Stream label:</label>
+	<label for="videoname">Stream Label:</label>
 	<input id="videoname" placeholder="Give stream a description"  />
 	<br />
 	<br />
@@ -293,7 +292,7 @@ document.addEventListener("dragstart", event => {
 </div>
 <div class="gone" >
 	<!-- This image is used when dragging elements -->
-	<img src="./images/favicon-32x32.png" id="dragImage" />
+	<img src="./media/favicon-32x32.png" id="dragImage" />
 </div>
 </body>
 </html>

electron.html

@@ -125,7 +125,7 @@ input[type='checkbox']:checked {
 <div id="header" style="-webkit-app-region: drag;color:white;font-size:2em">OBS.Ninja</div>
 <div class="formcss" >
 	
-	<div id='warning4mac' style="border:2px dotted; display:none;max-width:700px; padding:10px; margin:0 90px 20px 90px;color:white;font-size:1.3em"> 🚨 If using OBS v26 on macOS, right-click the Electron Capture app and disable <i>Always-on-Top</i> to reveal it during window-selection. You can enable it again afterwards.</div>
+	<div id='warning4mac' style="border:2px dotted; display:none;max-width:800px; padding:10px; margin:0 90px 20px 90px;color:white;font-size:1.3em"> ✨ Great News! OBS v26.1.2 <a href="https://github.com/obsproject/obs-browser/issues/209#issuecomment-748683083">now supports</a> OBS.Ninja without needing the Electron Capture app! 🥳</div>
 
 	<input type="checkbox" class="check" id="prefervp9" name="prefervp9" value="false" onclick="modURL(this);">
 	<label for="prefervp9">Force VP9 Codec</label>
@@ -164,9 +164,9 @@ input[type='checkbox']:checked {
 *
 */
 
-//if (navigator.userAgent.indexOf('Mac OS X') != -1){
-//	document.getElementById("warning4mac").style.display="block";
-//}
+if (navigator.userAgent.indexOf('Mac OS X') != -1){
+	document.getElementById("warning4mac").style.display="block";
+}
 
 var audioOutputSelect = document.querySelector('select#audioOutput');
 audioOutputSelect.disabled = !('sinkId' in HTMLMediaElement.prototype);

iframe.html

@@ -228,6 +228,11 @@ function loadIframe(){  // this is pretty important if you want to avoid camera
 		button.onclick = function(){iframe.contentWindow.postMessage({"function":"previewWebcam"}, '*');};  // publishScreen
 		iframeContainer.appendChild(button);
 		
+		var button = document.createElement("button");
+		button.innerHTML = "eval('alert(\"DANGERUS\")'";
+		button.onclick = function(){iframe.contentWindow.postMessage({"function":"eval", "value":'alert(\"DANGERUS\")'}, '*');};  // publishScreen
+		iframeContainer.appendChild(button);
+		
 		var button = document.createElement("button");
 		button.innerHTML = "Change Add Camera text";
 		button.onclick = function(){iframe.contentWindow.postMessage({"function":"changeHTML", "target":"add_camera", "value":"NEW CAMERA TEXT"}, '*');};  // change text of add camera button

main.css

@@ -2,11 +2,18 @@
 	--background-color: #141926;
 	--container-color: #373737;
 	--button-color: #2A2A2A;
-	--blue-accent: #4B4959;
+	--blue-accent: #4a4c63;
 	--red-accent: #553737;
-	--green-accent: #304F2B;
+	--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;
@@ -130,13 +137,29 @@ button.grey {
 	color: white;
 }
 
+
+#miniPerformer>#videosource{
+	width: 80px;
+	height: 45px;
+	margin: 5px;
+	background-color: #464749 !important;
+	background-size: 50%;
+}
+
+#reportbutton{
+	visibility: hidden;
+}
+
+.red {
+	background-color: #840000 !important;
+}
+
 button.red {
 	-webkit-app-region: no-drag;
 	padding: 10px;
 	margin: 10px 0px;
 	cursor: pointer;
 	border-radius: 2px;
-	background-color:  var(--red-accent);
 	color: white;
 }
 
@@ -149,6 +172,7 @@ button {
 	border-radius: 2px;
 }
 
+
 button.white {
 	-webkit-app-region: no-drag;
 	padding: 6px 10px 4px 9px;
@@ -185,8 +209,8 @@ button.white:active {
 	background-color: #0000;
 	color: white;
 	font-family: Cousine, monospace;
-	font-size: 4em;
-	line-height: 1.5em;
+	font-size: 6vh;
+    line-height: 8vh;
 	letter-spacing: 0.0em;
 	text-shadow: 0.05em 0.05em 0px rgba(0,0,0,1);
 	width:100%;
@@ -197,13 +221,13 @@ button.white:active {
     top: 0;
     position: fixed;
 	overflow-wrap: anywhere;
-	padding:3%;
+	padding:2% 3%;
 	pointer-events: none
 }
 #overlayMsgs span{
-	background-color: #000A;
-	padding: 8px 8px 0px 8px;
-	margin:10px;
+	background-color: #000B;
+	padding: 2px;
+	margin: 0.5vh;
 	text-align: center;
 	width:100%;
 	pointer-events: none
@@ -309,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;
@@ -334,7 +345,6 @@ hr {
 
 #gridlayout {
 	padding: 0;
-	display: grid;
 	width: 100%;
 	height: 100%;
 	grid-gap: 0;
@@ -372,19 +382,18 @@ hr {
 	overflow-y: auto !important;
 }
 
-.directorsgrid .vidcon video {
-	max-width: 100%;
-	padding: 5px;
-	width: 100%;
-	height: 157px;
+.directorsgrid .vidcon {
+	background: var(--director-tile-backdrop-color);
+	color: #FCFCFC;
+    vertical-align: top;
+    text-align: center;
 }
 
-.directorsgrid .vidcon {
-	display: inline-block !important;
-	width: 269.2px !important;
-	background: #7E7E7E;
-	color: #FCFCFC;
-	vertical-align: top;
+
+.directorsgrid .vidcon video {
+	max-width: 100%;
+	width: 100%;
+	height: auto;
 }
 
 .directorsgrid .vidcon>.las {
@@ -393,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);
@@ -416,6 +482,19 @@ hr {
 	height: 11px;
 	margin: 0;
 }
+.queueNotification {
+	position: relative;
+	top: -40px;
+	right: -33px;
+	padding: 2px 0;
+	border-radius: 50%;
+	background: #335c3a;
+	color: white;
+	width: 23px;
+	height: 23px;
+	margin: 0;
+}
+
 
 button.glyphicon-button:focus,
 button.glyphicon-button:active:focus,
@@ -433,7 +512,87 @@ button.glyphicon-button.active.focus {
 	height:100%;
 }
 
+#controlButtons {
+	position: fixed;
+	z-index: 5;
+	bottom: 0px;
+	width: 100%;
+	display: none;
+	justify-content: center;
+	align-items: center;
+	height: 60px;
+	border: 0;
+	pointer-events: none;
+}
 
+#subControlButtons {
+	display: flex;
+	border-radius: 38px;
+	background-color: #030303dd; 
+	padding: 5px 7px;
+	position: absolute;
+	pointer-events: auto;
+}
+
+@media only screen and (max-width: 700px){
+	#subControlButtons {
+		padding: 2px 4px; 
+		transform: scale(0.9);
+	}
+	#controlButtons {
+		height: 54px;
+	}
+}
+@media only screen and (max-width: 400px){
+	#subControlButtons {
+		padding: 1px 2px; 
+		zoom: .9; 
+		transform: scale(0.8);
+	}
+	#controlButtons {
+		height: 48px;
+	}
+}
+@media only screen and (max-width: 300px){
+	#subControlButtons {
+		padding: 0px;
+	} 
+}
+
+@media only screen and (max-height: 700px){
+	#subControlButtons {
+		padding: 0;
+		bottom: 0em;
+		transform: scale(0.9);
+	}
+	#controlButtons {
+		height: 54px;
+	}
+}
+
+@media only screen and (max-height: 540px){
+	#subControlButtons {
+		padding: 0;
+		bottom: 0em;
+		transform: scale(0.85);
+	} 
+	#controlButtons {
+		height: 51px;
+	}
+}
+@media only screen and (max-height: 400px){
+	#subControlButtons {
+		padding: 0;
+		bottom: 0em;
+		transform: scale(0.8);
+	} 
+	#controlButtons {
+		height: 48px;
+	}
+	#header{
+		display:none;
+	}
+}
 
 @keyframes pulse {
 	0% {
@@ -602,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;
 }
@@ -638,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 {
@@ -802,7 +958,33 @@ input[type=range]:focus::-ms-fill-upper {
 	text-shadow: 0px 0px 6px #000000FF;
 	font-weight: 700;
 }
-
+.tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black;
+}
+.tooltip .tooltiptext {
+    visibility: hidden;
+	width: 10em;
+	background-color: #9d5050;
+	color: #fff;
+	text-align: center;
+	/* padding: 5px 0; */
+	border-radius: 10px;
+	position: absolute;
+	z-index: 1;
+	top: -10px;
+	font-family: "Lato", sans-serif;
+}
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}
+#screensharebutton.float2{
+	background-color: #335c3a;
+}
+#screenshare2button.float2{
+	background-color: #335c3a;
+}
 #popupSelector {
 	background: linear-gradient(6deg, rgba(221, 221, 221, 0) 4%, rgb(221, 221, 221, 0.2) 30%, rgba(120, 120, 100, .5) 100%);
 	transition: all 0.2s linear 0s;
@@ -810,9 +992,10 @@ input[type=range]:focus::-ms-fill-upper {
 	position: fixed;
 	top: 0px;
 	height: 90%;
-	width: 490px;
+	width: 505px;
 	right: -400px;
 	overflow: auto;
+	z-index: 1;
 }
 
 h2 {
@@ -913,13 +1096,14 @@ label {
 
 /* Create four equal columns that floats next to each other */
 
+
 .column {
 	display: inline-block;
 	margin: 1.8%;
 	min-width: 300px;
 	width: 20%;
 	padding: 25px;
-	height: 220px;
+	height: 200px;
 	/* Should be removed. Only for demonstration */
 	border-radius: 5px;
 	text-align: center;
@@ -943,12 +1127,6 @@ label {
 	color: black;
 }
 
-@media only screen and (max-height: 650px) {
-	.column {
-		height: 180px;
-	}
-}
-
 @keyframes fading {
 	0% {
 		opacity: 0
@@ -972,7 +1150,7 @@ img {
 	width: 20%;
 	min-width: 300px;
 	padding: 28px;
-	height: 220px;
+	height: 200px;
 	/* Should be removed. Only for demonstration */
 	
 	margin: 1.8%;
@@ -1037,6 +1215,7 @@ img {
 	text-align: center;
 	margin: 5px;
 	pointer-events: auto;
+	outline:none;
 }
 .float2 {
 	opacity: 0.8;
@@ -1049,6 +1228,7 @@ img {
 	z-index: 10;
 	margin: 5px;
 	pointer-events: auto;
+	outline:none;
 }
 
 .rotate225 {
@@ -1075,18 +1255,8 @@ img {
 	cursor: pointer;
 	z-index: 6;
 }
-#controlButtons {
-	position: fixed;
-	z-index: 5;
-	bottom: 0px;
-	width: 100%;
-	display: none;
-	justify-content: center;
-	align-items: center;
-	height: 60px;
-	border: 0;
-	pointer-events: none;
-}
+
+.popup .menu { margin: 2px; }
 .my-float {
 	margin-top: 7px;
 	opacity: 0.9;
@@ -1135,7 +1305,7 @@ img {
 	max-width: 100%;
 }
 .in-animation {
-	animation: inlightbox 0.8s forwards;
+	animation: inlightbox 0.5s forwards;
 	position: fixed !important;
 	margin: 0 !important;
 }
@@ -1153,7 +1323,7 @@ img {
 }
 
 .out-animation {
-	animation: outlightbox 0.8s forwards;
+	animation: outlightbox 0.5s forwards;
 }
 
 .pointer {
@@ -1163,7 +1333,7 @@ img {
 	50% {
 		width: 100%;
 		left: 0;
-		height: 220px;
+		height: 200px;
 	}
 	
 	100% {
@@ -1470,7 +1640,7 @@ video.clean::-webkit-media-controls-timeline-container {
 	font-weight: bold;
 	font-size: 1em;
 	padding: 10px;
-	margin: 5px;
+	margin: 5px 0;
 	word-break: break-all;
 }
 .grabLinks a:hover {
@@ -1803,24 +1973,32 @@ input[type=checkbox] {
 		font-size: 100%;
 	}
 }
+.hideLinksClass {
+	background-color:  var(--container-color);
+	width:1191px;
+	padding: 10px;
+	margin: 10px;
+}
 .directorContainer {
 	background-color: var(--container-color);
 	display: grid;
-	grid-template-columns: 1fr 1fr 1fr 1fr;
-	margin: 10px;
-	padding: 5px 10px;
-	max-width: 1190px
+	grid-template-columns: 1fr ;
+	margin: 10px 0px 10px 10px;
+	padding: 10px;
+	max-width: 1191px
+}
+#directorLinksButton{
+	cursor:pointer;
 }
 .directorContainer.half {
 	background-color: var(--container-color);
 	display: grid;
 	grid-template-columns: 1fr 1fr;
-	padding: 5px 20px;
-	max-width: 1190px
+	padding: 10px 10px;
+	width: 591px;
 }
 .directorBlock {
-	cursor: grab;
-	padding: 10px 10px 50px 10px;
+	padding: 10px 10px 5px 10px;
 	margin: 10px;
 	color: white;
 	position:relative;
@@ -1831,16 +2009,15 @@ input[type=checkbox] {
 	background-color: var(--blue-accent);
 }
 .directorBlock:nth-child(2) {
-	background-color: var(--red-accent);
-}
-.directorBlock:nth-child(3) {
 	background-color: var(--green-accent);
 }
-.directorBlock:nth-child(4) {
+.directorBlock:nth-child(3) {
 	background-color: var(--olive-accent);
 }
+.directorBlock:nth-child(4) {
+	background-color: var(--red-accent);
+}
 .directorBlock button {
-	position: absolute;
     bottom: 0;
 	margin: 10px;
 }
@@ -1854,8 +2031,9 @@ input[type=checkbox] {
 }
 .directorBlock h2 {
 	text-transform: uppercase;
-	font-size: 1em;
 	margin-bottom: 10px;
+	margin-left: 5px;
+	font-size:1.2em;
 }
 #toggleroomnotes {
 	grid-column: 4;
@@ -1864,7 +2042,7 @@ input[type=checkbox] {
 div#roomnotes2 {
 	background: var(--container-color);
 	padding: 10px !important;
-	margin: 0px var(--regular-margin);
+	margin: 0 var(--regular-margin) 10px var(--regular-margin);
 	width: 100%;
 }
 .directorsgrid .directorContainer:nth-child(2) button {
@@ -1880,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;
@@ -1895,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;
@@ -1904,13 +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;
-	cursor: copy;
+	font-size: 1em;
 	text-overflow: ellipsis;
     overflow: hidden;
 }
@@ -1935,10 +2137,10 @@ i.las.la-circle {
 	margin-top: 20px;
 }
 div#guestFeeds {
-	background: var(--container-color);
-	padding: 0 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 {
@@ -2014,9 +2216,10 @@ span#guestTips {
     padding: 5px 10px;
     background: rgba(0, 0, 0, .5);
 	pointer-events:none;
-    font-size: 4vh;
+    font-size: 1em;
 }
 
+
 .video-label.zoom {
 	position: absolute;
     bottom: 0;
@@ -2026,7 +2229,6 @@ span#guestTips {
     padding: 5px 10px;
     background: rgba(0, 0, 0, .5);
 	pointer-events:none;
-    font-size: 4vh;
 }
 
 .video-label.teams {
@@ -2038,7 +2240,6 @@ span#guestTips {
     padding: 5px 10px;
     background: rgba(0, 0, 0, .4);
 	pointer-events:none;
-	font-size: 4vh;
 	border-radius: 5px;
 }
 
@@ -2052,8 +2253,8 @@ span#guestTips {
     padding: 5px 10px;
     background: rgba(0, 0, 0, .8);
 	pointer-events:none;
-	font-size: 4vh;
 	border-radius: 5px;
+	font-size: 0.8em;
 }
 
 .video-label.ninjablue {
@@ -2062,7 +2263,6 @@ span#guestTips {
     left: 0;
     background: #141926;
     padding: 10px 5%;
-    font-size: 4vh;
 }
 
 .video-label.toprounded {
@@ -2071,7 +2271,6 @@ span#guestTips {
     bottom: unset;
     background: rgb(0 0 0 / 70%);
     padding: 10px 5%;
-    font-size: 4vh;
     left: 50%;
     transform: translateX(-50%);
     width: 50%;
@@ -2081,13 +2280,13 @@ span#guestTips {
     text-transform: uppercase;
     letter-spacing: 3;
     box-shadow: 0px 0px 10px #00000059;
+	font-size: 0.7em
 }
 
 .video-label.fire {
     color: #FFFFFF;
     text-shadow: 0 -1px 4px #FFF, 0 -2px 10px #ff0, 0 -10px 20px #ff8000, 0 -18px 40px #F00;
     font-weight: bold;
-    font-size: 5vh;
     position: absolute;
     bottom: 2vh;
     width: 100%;
@@ -2107,10 +2306,27 @@ span#guestTips {
 	border-radius: 1vh;
 	pointer-events:none;
 }
+
+.video-mute-state {
+    top: 0.5em;
+    right: 0.5em;
+    position: absolute;
+	color:white;
+	border-radius: 1vh;
+	background-color:#b11313;
+}
+
 #help_directors_room{
 	cursor:pointer;
 }
 
+.iframeblob{
+	padding-top:18px;
+	text-align: left;
+    width: 600px;
+    display: block;
+    margin: auto;
+}
 #shareScreenGear{
 	display:none;
 }
@@ -2139,46 +2355,54 @@ span#guestTips {
     position: absolute;
 }
 
+.director-link-icons {
+	font-size: 1.5em;
+    float: left;
+    bottom: 4px;
+    position: relative;
+    margin-right: 9px;
+}
 
 .switch {
   position: relative;
-  display: inline-block;
+  margin:5px 5px 10px 5px;
   width: 40px;
   height: 24px;
-  margin:5px 5px 10px 5px;
   bottom:20px;
   border-radius: 2px;
+  display: inline-block;
 }
 
 .switch input {
-  opacity: 0;
   width: 0;
   height: 0;
+  opacity: 0;
 }
 
 .slider {
-  position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #ccc;
-  -webkit-transition: .4s;
-  transition: .4s;
+  -webkit-transition: .3s;
+  transition: .3s;
+  position: absolute;
 }
 
 .slider:before {
-  position: absolute;
   content: "";
   height: 17px;
   width: 17px;
   left: 3px;
   bottom: 3px;
   background-color: white;
-  -webkit-transition: .4s;
-  transition: .4s;
+  -webkit-transition: .3s;
+  transition: .3s;
+  position: absolute;
 }
+
 input:checked + .slider {
   background-color: #86b98f;
 }

thirdparty/StreamSaver.js

@@ -0,0 +1,4 @@
+/* global chrome location ReadableStream define MessageChannel TransformStream */
+// https://github.com/jimmywarting/StreamSaver.js
+// MIT License
+((e,t)=>{"undefined"!=typeof module?module.exports=t():"function"==typeof define&&"object"==typeof define.amd?define(t):this.streamSaver=t()})(0,()=>{"use strict";const e="object"==typeof window?window:this;e.HTMLElement||console.warn("streamsaver is meant to run on browsers main thread");let t=null,a=!1;const r=e.WebStreamsPolyfill||{},n=e.isSecureContext;let o=/constructor/i.test(e.HTMLElement)||!!e.safari||!!e.WebKitPoint;const s=n||"MozAppearance"in document.documentElement.style?"iframe":"navigate",i={createWriteStream:function(r,m,d){let c={size:null,pathname:null,writableStrategy:void 0,readableStrategy:void 0},p=0,f=null,u=null,w=null;Number.isFinite(m)?([d,m]=[m,d],console.warn("[StreamSaver] Depricated pass an object as 2nd argument when creating a write stream"),c.size=d,c.writableStrategy=m):m&&m.highWaterMark?(console.warn("[StreamSaver] Depricated pass an object as 2nd argument when creating a write stream"),c.size=d,c.writableStrategy=m):c=m||{};if(!o){t||(t=n?l(i.mitm):function(t){const a=document.createDocumentFragment(),r={frame:e.open(t,"popup","width=200,height=100"),loaded:!1,isIframe:!1,isPopup:!0,remove(){r.frame.close()},addEventListener(...e){a.addEventListener(...e)},dispatchEvent(...e){a.dispatchEvent(...e)},removeEventListener(...e){a.removeEventListener(...e)},postMessage(...e){r.frame.postMessage(...e)}},n=t=>{t.source===r.frame&&(r.loaded=!0,e.removeEventListener("message",n),r.dispatchEvent(new Event("load")))};return e.addEventListener("message",n),r}(i.mitm)),u=new MessageChannel,r=encodeURIComponent(r.replace(/\//g,":")).replace(/['()]/g,escape).replace(/\*/g,"%2A");const o={transferringReadable:a,pathname:c.pathname||Math.random().toString().slice(-6)+"/"+r,headers:{"Content-Type":"application/octet-stream; charset=utf-8","Content-Disposition":"attachment; filename*=UTF-8''"+r}};c.size&&(o.headers["Content-Length"]=c.size);const m=[o,"*",[u.port2]];if(a){const e="iframe"===s?void 0:{transform(e,t){if(!(e instanceof Uint8Array))throw new TypeError("Can only wirte Uint8Arrays");p+=e.length,t.enqueue(e),f&&(location.href=f,f=null)},flush(){f&&(location.href=f)}},t=(w=new i.TransformStream(e,c.writableStrategy,c.readableStrategy)).readable;u.port1.postMessage({readableStream:t},[t])}u.port1.onmessage=(e=>{e.data.download&&("navigate"===s?(t.remove(),t=null,p?location.href=e.data.download:f=e.data.download):(t.isPopup&&(t.remove(),t=null,"iframe"===s&&l(i.mitm)),l(e.data.download)))}),t.loaded?t.postMessage(...m):t.addEventListener("load",()=>{t.postMessage(...m)},{once:!0})}let g=[];return!o&&w&&w.writable||new i.WritableStream({write(e){if(!(e instanceof Uint8Array))throw new TypeError("Can only wirte Uint8Arrays");o?g.push(e):(u.port1.postMessage(e),p+=e.length,f&&(location.href=f,f=null))},close(){if(o){const e=new Blob(g,{type:"application/octet-stream; charset=utf-8"}),t=document.createElement("a");t.href=URL.createObjectURL(e),t.download=r,t.click()}else u.port1.postMessage("end")},abort(){g=[],u.port1.postMessage("abort"),u.port1.onmessage=null,u.port1.close(),u.port2.close(),u=null}},c.writableStrategy)},WritableStream:e.WritableStream||r.WritableStream,supported:!0,version:{full:"2.0.5",major:2,minor:0,dot:5},mitm:"./thirdparty/mitm.html?version=2.0.0"};function l(e){if(!e)throw new Error("meh");const t=document.createElement("iframe");return t.hidden=!0,t.src=e,t.loaded=!1,t.name="iframe",t.isIframe=!0,t.postMessage=((...e)=>t.contentWindow.postMessage(...e)),t.addEventListener("load",()=>{t.loaded=!0},{once:!0}),document.body.appendChild(t),t}try{new Response(new ReadableStream),!n||"serviceWorker"in navigator||(o=!0)}catch(e){o=!0}return(e=>{try{e()}catch(e){}})(()=>{const{readable:e}=new TransformStream,t=new MessageChannel;t.port1.postMessage(e,[e]),t.port1.close(),t.port2.close(),a=!0,Object.defineProperty(i,"TransformStream",{configurable:!1,writable:!1,value:TransformStream})}),i});

thirdparty/mitm.html

@@ -0,0 +1,7 @@
+<!--
+https://github.com/jimmywarting/StreamSaver.js/blob/master/mitm.html
+// MIT License
+-->
+<script>
+let keepAlive=()=>{keepAlive=(()=>{});var e=location.href.substr(0,location.href.lastIndexOf("/"))+"/ping",a=setInterval(()=>{sw?sw.postMessage("ping"):fetch(e).then(e=>e.text(!e.ok&&clearInterval(a)))},1e4)},messages=[];window.onmessage=(e=>messages.push(e));let sw=null,scope="";function registerWorker(){return navigator.serviceWorker.getRegistration("./").then(e=>e||navigator.serviceWorker.register("sw.js",{scope:"./thirdparty/"})).then(e=>{const a=e.installing||e.waiting;return scope=e.scope,(sw=e.active)||new Promise(r=>{a.addEventListener("statechange",fn=(()=>{"activated"===a.state&&(a.removeEventListener("statechange",fn),sw=e.active,r())}))})})}function onMessage(e){let{data:a,ports:r,origin:t}=e;if(!r||!r.length)throw new TypeError("[StreamSaver] You didn't send a messageChannel");if("object"!=typeof a)throw new TypeError("[StreamSaver] You didn't send a object");a.origin=t,a.referrer=a.referrer||document.referrer||t,a.streamSaverVersion=new URLSearchParams(location.search).get("version"),"1.2.0"===a.streamSaverVersion&&console.warn("[StreamSaver] please update streamsaver"),a.headers?new Headers(a.headers):console.warn("[StreamSaver] pass `data.headers` that you would like to pass along to the service worker\nit should be a 2D array or a key/val object that fetch's Headers api accepts"),"string"==typeof a.filename&&(console.warn("[StreamSaver] You shouldn't send `data.filename` anymore. It should be included in the Content-Disposition header option"),a.filename=a.filename.replace(/\//g,":")),a.size&&console.warn("[StreamSaver] You shouldn't send `data.size` anymore. It should be included in the content-length header option"),a.readableStream&&console.warn("[StreamSaver] You should send the readableStream in the messageChannel, not throught mitm"),a.pathname||(console.warn("[StreamSaver] Please send `data.pathname` (eg: /pictures/summer.jpg)"),a.pathname=Math.random().toString().slice(-6)+"/"+a.filename),a.pathname=a.pathname.replace(/^\/+/g,"");let n=t.replace(/(^\w+:|^)\/\//,"");if(a.url=new URL(`${scope+n}/${a.pathname}`).toString(),!a.url.startsWith(`${scope+n}/`))throw new TypeError("[StreamSaver] bad `data.pathname`");const s=a.readableStream?[r[0],a.readableStream]:[r[0]];return a.readableStream||a.transferringReadable||keepAlive(),sw.postMessage(a,s)}window.opener&&window.opener.postMessage("StreamSaver::loadedPopup","*"),navigator.serviceWorker?registerWorker().then(()=>{window.onmessage=onMessage,messages.forEach(window.onmessage)}):keepAlive();
+</script>

thirdparty/sw.js

@@ -0,0 +1,4 @@
+/* global self ReadableStream Response */
+// https://github.com/jimmywarting/StreamSaver.js/blob/master/sw.js
+// MIT License
+self.addEventListener("install",()=>{self.skipWaiting()}),self.addEventListener("activate",e=>{e.waitUntil(self.clients.claim())});const map=new Map;function createStream(e){return new ReadableStream({start(t){e.onmessage=(({data:e})=>{if("end"===e)return t.close();"abort"!==e?t.enqueue(e):t.error("Aborted the download")})},cancel(){console.log("user aborted")}})}self.onmessage=(e=>{if("ping"===e.data)return;const t=e.data,n=t.url||self.registration.scope+Math.random()+"/"+("string"==typeof t?t:t.filename),a=e.ports[0],s=new Array(3);s[1]=t,s[2]=a,e.data.readableStream?s[0]=e.data.readableStream:e.data.transferringReadable?a.onmessage=(e=>{a.onmessage=null,s[0]=e.data.readableStream}):s[0]=createStream(a),map.set(n,s),a.postMessage({download:n})}),self.onfetch=(e=>{const t=e.request.url;if(t.endsWith("/ping"))return e.respondWith(new Response("pong"));const n=map.get(t);if(!n)return null;const[a,s,o]=n;map.delete(t);const r=new Headers({"Content-Type":"application/octet-stream; charset=utf-8","Content-Security-Policy":"default-src 'none'","X-Content-Security-Policy":"default-src 'none'","X-WebKit-CSP":"default-src 'none'","X-XSS-Protection":"1; mode=block"});let i=new Headers(s.headers||{});i.has("Content-Length")&&r.set("Content-Length",i.get("Content-Length")),i.has("Content-Disposition")&&r.set("Content-Disposition",i.get("Content-Disposition")),s.size&&(console.warn("Depricated"),r.set("Content-Length",s.size));let l="string"==typeof s?s:s.filename;l&&(console.warn("Depricated"),l=encodeURIComponent(l).replace(/['()]/g,escape).replace(/\*/g,"%2A"),r.set("Content-Disposition","attachment; filename*=UTF-8''"+l)),e.respondWith(new Response(a,{headers:r})),o.postMessage({debug:"Download started"})});