From 832c58495687bb304626f4fd5430092e6f283bf2 Mon Sep 17 00:00:00 2001
From: Steve Seguin <steve@seguin.email>
Date: Mon, 22 Jun 2020 17:29:28 -0400
Subject: [PATCH] doc for OBS.ninja; lets you create invites from inside OBS

---
 dock.html | 249 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 249 insertions(+)
 create mode 100644 dock.html
diff --git a/dock.html b/dock.html
new file mode 100644
index 0000000..2bff141
--- /dev/null
+++ b/dock.html
@@ -0,0 +1,249 @@
+<html>
+<head>
+<style>
+body {
+  transform: scale(0.7);
+  transform-origin: 0 0;
+  margin:2px;
+  padding:0;
+  border:0;
+  color: #FFF;
+  background-color:  #1F1E1F;
+  font-family: Arial, Helvetica, sans-serif;
+  width:300px;
+  overflow:hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width:1px;
+}
+
+
+#container-links {
+	z-index:10;
+	width:100%;
+	height:100%;
+	display:none;
+	
+}
+
+#container-setup { 
+	width:100%;
+	height:100%;
+	display:block;
+}
+.red {
+	background-color:#FCC;
+}
+.green {
+	background-color:#CFC;
+}
+.task {
+	cursor:grab;
+	width:100%;
+	padding:5px;
+	border:2px solid black;
+	margin:0;
+}
+button{
+	padding:5px;
+	transform: scale(1.4);
+	transform-origin: 0 0;
+}
+
+</style>
+</head>
+<body>
+<script>
+function getById(id) {
+   var el = document.getElementById(id);
+   if (!el) {
+	    console.warn(id + " is not defined; skipping.");
+		el = document.createElement("span"); // create a fake element
+   }
+   return el;
+}
+function copyFunction(copyText) {
+  copyText.select();
+  copyText.setSelectionRange(0, 99999);
+  document.execCommand("copy");
+
+}
+function generateStreamID(){
+		var text = "";
+		var possible = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789";
+		for (var i = 0; i < 7; i++){
+			text += possible.charAt(Math.floor(Math.random() * possible.length));
+		}
+		console.log(text);
+		return text;
+	};
+
+function generateInvite(){
+	var title = encodeURI(getById("videoname").value);
+	if (title.length){
+		title = "&label="+title;
+	}
+	var sid = generateStreamID(); 
+	var viewstr = "";
+	var sendstr = "";
+
+	if (getById("invite_bitrate").checked){
+		viewstr+="&bitrate=20000";
+	}
+	if (getById("invite_vp9").checked){
+		viewstr+="&codec=vp9";
+	}
+	if (getById("invite_stereo").checked){
+		viewstr+="&stereo";
+		sendstr+="&stereo";
+	}
+	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_joinroom").value.trim().length){
+		sendstr+="&room="+getById("invite_joinroom").value.trim();
+		viewstr+="&scene=1&room="+getById("invite_joinroom").value.trim();
+	}
+
+	if (getById("invite_password").value.trim().length){
+		sendstr+="&password";
+		viewstr+="&password="+getById("invite_password").value.trim();
+	}
+
+
+	if (getById("invite_group_chat_type").value){ //  0 is default
+		if (getById("invite_group_chat_type").value==1){ // no video
+			sendstr+="&novideo";
+		} else if (getById("invite_group_chat_type").value==2){  // no view or audio
+			sendstr+="&view";
+		}
+	}
+
+	if (getById("invite_quality").value){
+		if (getById("invite_quality").value==0){
+			sendstr+="&quality=0";
+		} else if (getById("invite_quality").value==1){
+			sendstr+="&quality=1";
+		} else if (getById("invite_quality").value==2){
+			sendstr+="&quality=2";
+		}
+	}
+
+	sendstr = 'https://' + location.host + location.pathname + '?push=' + sid + sendstr;
+	viewstr = 'https://' + location.host+ location.pathname + '?view=' + sid + viewstr + title;
+	getById("container-setup").style.display="none";
+	getById("container-links").style.display="block";
+	
+	getById("guest-link").value = sendstr;
+	getById("obs-link").value = viewstr;
+}
+
+function goBack(){
+	getById("container-setup").style.display="block";
+	getById("container-links").style.display="none";
+}
+
+document.addEventListener("dragstart", event => {
+	var url = event.target.href || event.target.value;
+	if (!url || !url.startsWith('https://')) return;
+	if (event.target.dataset.drag!="1"){
+		return;
+	}
+	var streamId = url.split('view=');
+	var label = url.split('label=');
+
+	url += '&layer-name=OBS.Ninja';
+	if (streamId.length>1) url += ': ' + streamId[1].split('&')[0];
+	if (label.length>1) url += ' - ' + decodeURI(label[1].split('&')[0]);
+	
+
+	url += '&layer-width=1920'; // this isn't always 100% correct, as the resolution can fluxuate, but it is probably good enough
+	url += '&layer-height=1080';
+	
+	console.warn(url);
+	event.dataTransfer.setData("text/uri-list", encodeURI(url));
+});
+
+</script>
+
+<div id="container-setup" >
+	<button style="padding:5px;" onclick="generateInvite()" >
+		<span data-translate="generate-invite-link">GENERATE THE INVITE LINK</span>
+	</button>
+	<br /><br />
+	
+	
+	<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>
+	<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 />
+	<br />
+	<label for="invite_quality" data-translate="video-resolution">Video Resolution: </label>
+	<select id="invite_quality" name="invite_quality">
+		<option value="-1" selected>User Selectable</option>
+		<option value="0">Maximum Resolution</option>
+		<option value="1">Balanced</option>
+		<option value="2">Smooth and Cool</option>
+	</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>
+	<input id="videoname" placeholder="Give stream a description"  />
+	<br />
+	<br />
+	<span data-translate="add-a-password-to-stream"> Add password:</span>
+	<input id="invite_password" placeholder="Add an optional password" />
+	<br /><br />
+	<span data-translate="add-the-guest-to-a-room"> Add to a room:</span>
+	<input id="invite_joinroom" placeholder="Enter Room name here" oninput="document.getElementById('invitegroupchat').style.display='block';" />
+	<br />
+	<br />
+	<span id="invitegroupchat" style="display:none;">
+	<label for="invite_group_chat_type" data-translate="invite-group-chat-type">This room guest can:</label><br />
+	<select id="invite_group_chat_type" name="invite_group_chat_type">
+		<option value="0" selected data-translate="can-see-and-hear">Can see and hear the group chat</option>
+		<option value="1" data-translate="can-hear-only">Can only hear the group chat</option>
+		<option value="2" data-translate="cant-see-or-hear">Cannot hear or see the group chat</option>
+	</select>
+	</span>
+</div>
+<div id="container-links" >
+	<button  onclick="goBack()" >
+		<span >Go Back</span>
+	</button>
+	<div id="container-links-inner" >
+		<br /><br />
+		<h3>Guest Invite Link:</h3>
+			<input id="guest-link" class="task green" onclick="copyFunction(this)" onmousedown="copyFunction(this)"/>
+			<br /><br />
+		<h3>OBS Browser Source Link:</h3>
+			<input id="obs-link" class="task red" data-drag="1" onmousedown="copyFunction(this)" onclick="copyFunction(this)" />
+			<br />
+			<br />
+			<i>(links are draggable)</i>
+	</div>
+</div>
+</body>
+</html>
\ No newline at end of file
