From 60c20e2c82ce8e30ed50d207e38ded305cfd37d0 Mon Sep 17 00:00:00 2001
From: Steve Seguin <steve@seguin.email>
Date: Fri, 18 Feb 2022 04:52:58 -0500
Subject: [PATCH] Add files via upload

---
 examples/chatoverlay.html | 162 ++++++++++++++++++++++++++++++++++++++
 examples/index.html       |   7 +-
 examples/twitch.html      |   9 ++-
 examples/youtube.html     | 129 ++++++++++++++++++++++++++++++
 4 files changed, 304 insertions(+), 3 deletions(-)
 create mode 100644 examples/chatoverlay.html
 create mode 100644 examples/youtube.html
diff --git a/examples/chatoverlay.html b/examples/chatoverlay.html
new file mode 100644
index 0000000..0e9ab05
--- /dev/null
+++ b/examples/chatoverlay.html
@@ -0,0 +1,162 @@
+<html>
+	<head>
+		<meta charset="utf8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>OBSN Chat Overlay</title>
+		<style>
+		
+			@font-face {
+			  font-family: 'Cousine';
+			  src: url('fonts/Cousine-Bold.ttf') format('truetype');
+			}
+		
+			body {
+				margin:0;
+				padding:0 10px;
+				height:100%;
+				border: 0;
+				display: flex;
+				flex-direction: column-reverse;
+				position:absolute;
+				bottom:0;
+				overflow:hidden;
+				max-width:100%;
+			}
+
+			div {
+				margin:0;
+				background-color: black; 
+				padding: 8px 8px 0px 8px;
+				color: white;
+				font-family: Cousine, monospace;
+				font-size: 3.2em;
+				line-height: 1.1em;
+				letter-spacing: 0.0em;
+				text-transform: uppercase;
+				text-shadow: 0.05em 0.05em 0px rgba(0,0,0,1);
+				max-width:100%;
+				word-wrap: break-word;
+				overflow-wrap: break-word;
+				word-break: break-all;
+				hyphens: auto;
+				display:inline-block;
+			}
+			
+			
+			
+			a {
+				color:white;
+				font-size:1.2em;
+				text-transform: none;
+				word-wrap: break-word;
+				overflow-wrap: break-word;
+				word-wrap: break-word;
+				word-break: break-all;
+				hyphens: auto;
+			}
+			</style>
+		<script>
+		
+		
+			(function (w) {
+				w.URLSearchParams =
+					w.URLSearchParams ||
+					function (searchString) {
+						var self = this;
+						self.searchString = searchString;
+						self.get = function (name) {
+							var results = new RegExp("[\?&]" + name + "=([^&#]*)").exec(
+								self.searchString
+							);
+							if (results == null) {
+								return null;
+							} else {
+								return decodeURI(results[1]) || 0;
+							}
+						};
+					};
+			})(window);
+			var urlParams = new URLSearchParams(window.location.search);
+			
+
+			function loadIframe() {
+				
+				var iframe = document.createElement("iframe");
+
+				var view= "";
+				var room="";
+				var password="";
+				if (urlParams.has("view")) {
+					view = "&view="+(urlParams.get("view") || "");
+				} else if (urlParams.has("room")) {
+					room = "&room="+urlParams.get("room");
+				} else {
+					var help = document.createElement("h2");
+					help.innerHTML = "This app supports <i>&room, &view, </i>and<i> &password</i> URL parameters.";
+					document.body.appendChild(help);
+					return;
+				}
+				if (urlParams.has("password")) {
+					password = "&password="+urlParams.get("password");
+				}
+				
+				iframe.allow = "autoplay";
+				var srcString = "../?datamode&label=chatOverlay&scene"+room+view+password;
+				
+				iframe.src = srcString;
+				iframe.style.width="0";
+				iframe.style.height="0";
+				iframe.style.border="0";
+				
+				document.body.appendChild(iframe);
+
+				////////////  LISTEN FOR EVENTS
+	
+				var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
+				var eventer = window[eventMethod];
+				var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";
+
+
+				/// If you have a routing system setup, you could have just one global listener for all iframes instead.
+				
+				eventer(messageEvent, function (e) {
+					if (e.source != iframe.contentWindow){return} // reject messages send from other iframes
+
+					console.log(e);
+					if ("gotChat" in e.data){
+						logData(e.data.gotChat.label,e.data.gotChat.msg);
+					}
+				});
+			}
+
+			function printValues(obj) {
+				var out = "";
+				for (var key in obj) {
+					if (typeof obj[key] === "object") {
+						out += "<br />";
+						out += printValues(obj[key]);
+					} else {
+						if (key.startsWith("_")) {
+						} else {
+							out += "<b>" + key + "</b>: " + obj[key] + "<br />";
+						}
+					}
+				}
+				return out;
+			}
+
+			function logData(type, data) {
+				var span = document.createElement('span');
+				var entry = document.createElement('div');
+				if (type){
+					type = "<i>"+type.replace(/_/g, ' ')+"</i>";
+				}
+				entry.innerHTML = type + data;
+				span.appendChild(entry);
+				document.body.prepend(span);
+			}
+		</script>
+	</head>
+	<body onload="loadIframe();">
+	</body>
+</html>
diff --git a/examples/index.html b/examples/index.html
index 5519728..c8b1feb 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -77,6 +77,11 @@
 					<div class="description">How to have a twitch live chat side-by-side with VDO.NInja on the same
 						screen</div>
 				</div>
+				<div>
+					<h2><a href='youtube.html'>youtube</a></h2>
+					<div class="description">How to have a youtube live chat side-by-side with VDO.NInja on the same
+						screen</div>
+				</div>
 				<div>
 					<h2><a href='dual.html'>dual</a></h2>
 					<div class="description">how to have two VDO.Ninja windows (or any windows really) open on the same
@@ -112,7 +117,7 @@
 						layout of elements. (experimental)</div>
 				</div>
 				<div>
-					<h2><a href='chat.html'>chat</a></h2>
+					<h2><a href='chatoverlay.html'>chat</a></h2>
 					<div class="description">Example of a chat-only interface for VDO.Ninja; maybe
 						dockable into OBS even.</div>
 				</div>
diff --git a/examples/twitch.html b/examples/twitch.html
index 17ea7fe..03e627b 100644
--- a/examples/twitch.html
+++ b/examples/twitch.html
@@ -64,7 +64,7 @@ input{
 <div id="container2"></div>
 <div id="container1" ></div>
 <div id="clean">
-	<input placeholder="Enter a VDON stream ID" id="viewlink" type="text" />
+	<input placeholder="Enter a VDON stream ID or VDON URL" id="viewlink" type="text" />
 	<input placeholder="Enter the Twitch channel name" id="twitch" type="text" />
 	<button onclick="loadIframes()" style="display:block;padding:10px;margin:10px;">START</button>
 </div>
@@ -85,8 +85,13 @@ function loadIframes(url=false){
 	document.getElementById("container2").style.display="inline-block";
 	
 	var path = window.location.host+window.location.pathname.split("/").slice(0,-1).join("/");
+	path = path.replace("/examples","");
 	
-	var room1 = "https://"+path+"/?push="+roomname+"&webcam&autostart&vd=front&ad=1&transparent&noheader";
+	if (roomname.startsWith("https://")){
+		var room1 = roomname;
+	} else {
+		var room1 = "https://"+path+"/?push="+roomname+"&webcam&autostart&vd=front&ad=1&transparent&noheader";
+	}
 	var room2 = "https://www.twitch.tv/embed/"+twitch+"/chat?parent="+location.hostname;
 	var iframe = document.createElement("iframe");
 	iframe.allow = "autoplay;camera;microphone;fullscreen;picture-in-picture;";
diff --git a/examples/youtube.html b/examples/youtube.html
new file mode 100644
index 0000000..f9f4a1f
--- /dev/null
+++ b/examples/youtube.html
@@ -0,0 +1,129 @@
+<html>
+<head><title>YouTube Chat + VDON</title>
+<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=1.0, user-scalable=yes" />
+<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
+<style>
+body{
+	padding:0;
+	margin:0;
+	background-color:#003;
+	width:100%;
+	height:100%;
+	color:white;
+	font-family: arial;
+}
+
+iframe {
+	width:100%;
+	height:100%;
+	border:0;
+	margin:0;
+	padding:0;
+	position:absolute;
+	display:block;
+}
+
+
+input{
+	padding:10px;
+	width:80%;
+	font-size:1.2em;
+	z-index: 1000;
+	color:black;
+}
+
+
+@media screen and (orientation:portrait) {
+	#container2{
+		width:100%;height:100%;display:none;
+	}
+	#container1{
+		width: 50vw;height: 50vh; display:none; float:left; position: fixed; top: 0; right: 0%;
+	}
+	iframe{
+		width:100%;
+	}
+}
+
+@media screen and (orientation:landscape) {
+	#container2{
+		width:60vw;height:100%;display:none;
+		z-index:5;
+	}
+	#container1{
+		width: 50vw;height: 80vh; display:none; float:left; position: fixed; top: 0; right: -10vw;
+	}
+	iframe{
+		max-width:60vw;
+	}
+}
+
+</style>
+</head>
+<body>
+
+
+
+<div id="container2"></div>
+<div id="container1" ></div>
+<div id="clean">
+	<input placeholder="Enter a VDON stream ID" id="vdonlink" onchange="updateLink(event);" type="text" />
+	<input placeholder="Enter the Youtube Video ID" id="youtube" type="text" />
+	<button onclick="loadIframes()" style="display:block;padding:10px;margin:10px;">START</button>
+	<div id="viewLink">
+		
+	</div>
+</div>
+<script>
+
+window.addEventListener("orientationchange", function() {
+  // Announce the new orientation number
+ // alert(window.orientation);
+}, false);
+
+function updateLink(event){
+	var streamid = document.getElementById("vdonlink").value;
+	
+	
+	var path = window.location.host+window.location.pathname.split("/").slice(0,-1).join("/");
+	path = path.replace("/examples","");
+	
+	var viewLink = "https://"+path+"/?view="+streamid;
+	document.getElementById("viewLink").innerHTML = "View link is: "+viewLink;
+}
+
+function loadIframes(url=false){ 
+
+	var streamid = document.getElementById("vdonlink").value;
+	var youtube = document.getElementById("youtube").value;
+	
+	document.getElementById("clean").parentNode.removeChild(document.getElementById("clean"));
+	document.getElementById("container1").style.display="inline-block";
+	document.getElementById("container2").style.display="inline-block";
+	
+	var path = window.location.host+window.location.pathname.split("/").slice(0,-1).join("/");
+	path = path.replace("/examples","");
+	
+	var room1 = "https://"+path+"/?push="+streamid+"&webcam&autostart&vd=front&ad=1&transparent&noheader";
+	var room2 = "https://www.youtube.com/live_chat?is_popout=1&v="+youtube+"&embed_domain="+location.hostname;
+	var iframe = document.createElement("iframe");
+	iframe.allow = "autoplay;camera;microphone;fullscreen;picture-in-picture;";
+	iframe.src = room1;
+	var iframeContainer = document.createElement("div");
+	iframeContainer.appendChild(iframe);
+	document.getElementById("container1").appendChild(iframeContainer);
+	
+	setTimeout(function(){
+		var iframe = document.createElement("iframe");
+		iframe.allow = "autoplay;camera;microphone;fullscreen;picture-in-picture;";
+		iframe.src = room2;
+		var iframeContainer = document.createElement("div");
+		iframeContainer.appendChild(iframe);
+		document.getElementById("container2").appendChild(iframeContainer);
+	},3000);
+	
+}
+
+</script>
+</body>
+</html>
\ No newline at end of file
