Merge pull request #30 from camalot/topic/fix-playback

- added example for custom css - added a default video frame - added a container to support the video frame - note: you may have to reset the browser sources cache in OBS/SLOBS
camalot · Aug 27, 2019 · a1cc057 · a1cc057
2 parents 42f6c32 + 28f58fb
commit a1cc057
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 23 deletions.
diff --git a/ReadMe.md b/ReadMe.md
@@ -147,6 +147,33 @@ The application will open, and if there is an update it will tell you. You click
 [![](https://i.imgur.com/nouqPh0l.png)](https://i.imgur.com/nouqPh0.png)
 
 
+## CUSTOM CSS
+
+You can customize the look with custom css to add a border, or other styles to the video. Just edit the `custom.css` file, or you can use the `custom css` in SLOBS/OBS. 
+
+Here is an example that uses a background uploaded to imgur.
+```css
+#video-container .video-box {
+  /* This is the container that holds the video-border-box and the video elements */
+}
+
+#video-container .video-box .video-border-box {
+	/* This container sits directly on top of the video and is sized the same as the video */
+
+	/* set the background image url */
+	background-image: url('https://i.imgur.com/lIl9knQ.png');
+}
+
+#video-container .video-box video {
+	/* This is the video container */
+}
+```
+
+Here is a sample
+
+![](https://i.imgur.com/rVB5GTr.png)
+
+
 ## TECHNICAL INFORMATION
 
 Files are served to the overlay via a lightweight http server called [tinyweb](https://www.ritlabs.com/en/products/tinyweb/install.php). It binds to port `9191` by default, and can be configured in the options. It also binds to the local internal address so the files are only accessible to the overlay.
diff --git a/script/Client.js b/script/Client.js
@@ -36,7 +36,7 @@ jQuery(document).ready(function () {
 	if (!usePositionHorizontal) {
 		$("#video-container")
 			.removeClass(positionHorizontalClass);
-		$("#video-container video")
+		$("#video-container .video-box")
 			.css("left", settings.AbsolutePositionLeft !== 0 ? `${settings.AbsolutePositionLeft}px` : 'initial')
 			.css("right", settings.AbsolutePositionRight !== 0 ? `${settings.AbsolutePositionRight}px` : 'initial');
 
@@ -50,7 +50,7 @@ jQuery(document).ready(function () {
 	if (!usePositionVertical) {
 		$("#video-container")
 			.removeClass(positionVerticalClass);
-		$("#video-container video")
+		$("#video-container .video-box")
 			.css("top", settings.AbsolutePositionTop !== 0 ? `${settings.AbsolutePositionTop}px` : 'initial')
 			.css("bottom", settings.AbsolutePositionBottom !== 0 ? `${settings.AbsolutePositionBottom}px` : 'initial');
 		$(".progress-container")
@@ -61,20 +61,29 @@ jQuery(document).ready(function () {
 
 	}
 
-	// max-width
-	// min-width
 	let vwidth = settings.VideoWidth || 320;
 	if(vwidth <= 0) {
 		vwidth = 320;
 	}
 
+	let vheight = Math.round((vwidth/16)*9);
+
+	$("#video-container .video-box")
+		.css("max-width", `${vwidth}px`)
+		.css("min-width", `${vwidth}px`)
+		.css("min-height", `${vheight}px`)
+		.css("max-height", `${vheight}px`);
 	$("#video-container video")
 		.on("error", function (e) { console.error(`Error: ${e}`); })
 		.on("canplay", function () { return videoLoaded(); })
 		.on("ended", function () { return videoEnded(); })
 		.css("max-width", `${vwidth}px`)
-		.css("min-width", `${vwidth}px`);
+		.css("min-width", `${vwidth}px`)
+		.css("min-height", `${vheight}px`)
+		.css("max-height", `${vheight}px`);
 
+	$("#video-container .video-box .video-border-box")
+		.css("background-size", `${vwidth}px ${vheight}px`);
 
 	connectWebsocket();
 
@@ -101,25 +110,25 @@ function validateSettings() {
 function videoLoaded() {
 	console.log("video loaded");
 	isClipPlaying = true;
-	$('#video-container video')
+	$('#video-container .video-box')
 		.addClass(settings.InTransition + ' animated')
 		.removeClass("hidden")
 		.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
 			console.log("after entrance animation");
-			$(this).removeClass();
+			$(this).removeClass().addClass("video-box");
 		});
 	$("#video-container").removeClass("hidden");
 }
 
 function videoEnded() {
 	console.log("video ended");
 	isClipPlaying = false;
-	$("#video-container video")
-		.removeClass()
+	$("#video-container .video-box")
+		.removeClass().addClass("video-box")
 		.addClass(settings.OutTransition + ' animated')
 		.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
 			console.log("after exit animation");
-			$(this).removeClass().addClass("hidden");
+			$(this).removeClass().addClass("video-box");
 
 			$("#video-container").addClass("hidden");
 		});

diff --git a/script/Overlay.html b/script/Overlay.html
@@ -5,12 +5,8 @@
 	<meta charset="UTF-8">
 	<title>Alert Overlay</title>
 	<link rel="stylesheet" type="text/css" href="style.css" />
+	<link rel="stylesheet" type="text/css" href="custom.css" />
 	<link rel="stylesheet" type="text/css" href="https://daneden.github.io/animate.css/animate.min.css" />
-	<script src="API_Key.js"></script>
-	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
-	<script src="settings.js"></script>
-	<script src="client.js"></script>
-	<script type="text/javascript" script-name="bangers" src="http://use.edgefonts.net/bangers.js"></script>
 
 </head>
 
@@ -48,9 +44,18 @@
 	</div>
 
 	<div class="video-container hidden" id="video-container">
-		<video></video>
+		<div class="video-box">
+			<div class="video-border-box"></div>
+			<video></video>
+		</div>
 	</div>
 
+<script src="API_Key.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+<script src="settings.js"></script>
+<script src="client.js"></script>
+<script type="text/javascript" script-name="bangers" src="http://use.edgefonts.net/bangers.js"></script>
+
 </body>
 
 </html>
diff --git a/script/custom.css b/script/custom.css
@@ -0,0 +1,14 @@
+#video-container .video-box {
+  /* This is the container that holds the video-border-box and the video elements */
+}
+
+#video-container .video-box .video-border-box {
+	/* This container sits directly on top of the video and is sized the same as the video */
+
+	/* set the background image url */
+	/*background-image: url('https://i.imgur.com/lIl9knQ.png');*/
+}
+
+#video-container .video-box video {
+	/* This is the video container */
+}
diff --git a/script/style.css b/script/style.css
@@ -58,7 +58,7 @@ body.bad-config {
 }
 
 .progress-container,
-#video-container video {
+#video-container .video-box {
 	padding: 0;
 	margin: 0;
 	position: absolute;
@@ -70,42 +70,55 @@ body.bad-config {
 }
 
 .progress-container.center,
-#video-container.center video {
+#video-container.center .video-box {
 	left: 40%;
 	right: initial;
 }
 
 .progress-container.left,
-#video-container.left video {
+#video-container.left .video-box {
 	left: 0;
 	right: initial;
 }
 
 .progress-container.right,
-#video-container.right video {
+#video-container.right .video-box {
 	right: 0;
 	left: initial;
 }
 
 .progress-container.middle,
-#video-container.middle video {
+#video-container.middle .video-box {
 	top: 40%;
 	bottom: initial;
 }
 
 .progress-container.top,
-#video-container.top video {
+#video-container.top .video-box {
 	top: 0;
 	bottom: initial;
 }
 
 
 .progress-container.bottom,
-#video-container.bottom video {
+#video-container.bottom .video-box {
 	bottom: 0;
 	top: initial;
 }
 
+#video-container .video-box .video-border-box {
+	z-index: 9999;
+	position: absolute;
+	bottom: 0;
+	top: 0;
+	left: 0;
+	right: 0;
+	background-repeat: no-repeat;
+	border: none;
+	background-color: transparent;
+	background-image: url('https://i.imgur.com/lIl9knQ.png');
+}
+
 .progress-container .progress-bar {
 	height: 200px;
 	width: 50px;