From 9f5159afb722bfb81b391cad84080efee880545b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?= <kasper@kasperrt.no>
Date: Wed, 7 Feb 2018 16:12:15 +0100
Subject: [PATCH] Added video-only option for embedded channel

---
 server/public/assets/css/embed.css              |  2 +-
 server/public/assets/html/embed.html            |  2 +-
 server/public/assets/js/embed.js                |  1 +
 server/public/assets/js/functions.js            |  4 ++--
 server/public/assets/js/listeners.js            | 15 +++++++++++----
 server/public/partials/channel/modal.handlebars |  2 ++
 6 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/server/public/assets/css/embed.css b/server/public/assets/css/embed.css
index 6dcd0ee0..4295d652 100755
--- a/server/public/assets/css/embed.css
+++ b/server/public/assets/css/embed.css
@@ -189,7 +189,7 @@
 #zoffbutton{
   cursor:pointer;
   position: absolute;
-    top: -47px;
+    bottom: 35px;
     left: 10px;
     background-image: url('/assets/images/z.svg');
     width: 50px;
diff --git a/server/public/assets/html/embed.html b/server/public/assets/html/embed.html
index e6054a7a..bf613dcf 100755
--- a/server/public/assets/html/embed.html
+++ b/server/public/assets/html/embed.html
@@ -27,8 +27,8 @@
 		<div id="container" style="display:inline-flex;">
 			<div id="player-container">
 				<div id="player"></div>
+                <div id="zoffbutton" title="Visit the channel!"></div>
 				<div id="controls" class="noselect">
-					<div id="zoffbutton" title="Visit the channel!"></div>
 					<div id="playpause">
 						<i id="play" class="material-icons hide">play_arrow</i>
 						<i id="pause" class="material-icons">pause</i>
diff --git a/server/public/assets/js/embed.js b/server/public/assets/js/embed.js
index 808fe359..878f5859 100755
--- a/server/public/assets/js/embed.js
+++ b/server/public/assets/js/embed.js
@@ -74,6 +74,7 @@ $(document).ready(function() {
         $("#playlist").addClass("hide");
         $("#controls").addClass("hide");
         $("#player").addClass("video_only");
+        $("#zoffbutton").css("bottom", "0px");
     }
 
     $("#locked_channel").modal({
diff --git a/server/public/assets/js/functions.js b/server/public/assets/js/functions.js
index d2c4dce9..2dc44ea6 100644
--- a/server/public/assets/js/functions.js
+++ b/server/public/assets/js/functions.js
@@ -215,8 +215,8 @@ function disable_debug(){
     localStorage.debug = false;
 }
 
-function embed_code(autoplay, width, height, color){
-    return '<iframe src="https://zoff.me/_embed#' + chan.toLowerCase() + '&' + color + autoplay + '" width="' + width + 'px" height="' + height + 'px"></iframe>';
+function embed_code(autoplay, width, height, color, embed_code){
+    return '<iframe src="https://zoff.me/_embed#' + chan.toLowerCase() + '&' + color + autoplay + embed_videoonly + '" width="' + width + 'px" height="' + height + 'px"></iframe>';
 }
 
 function change_offline(enabled, already_offline){
diff --git a/server/public/assets/js/listeners.js b/server/public/assets/js/listeners.js
index de2d0938..5125c61e 100755
--- a/server/public/assets/js/listeners.js
+++ b/server/public/assets/js/listeners.js
@@ -53,6 +53,7 @@ var not_import_html       		= "";
 var not_export_html       		= "";
 var embed_height          		= 300;
 var embed_width           		= 600;
+var embed_videoonly = "";
 var embed_autoplay        		= "&autoplay";
 var connect_error         		= false;
 var access_token_data_youtube 	= {};
@@ -617,19 +618,19 @@ $(document).on('change', '#view_channels_select', function(e) {
 $(document).on('keyup mouseup', '#width_embed', function(){
     var that = $(this);
     embed_width = that.val();
-    $("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height, color));
+    $("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height, color, embed_videoonly));
 });
 
 $(document).on('keyup mouseup', '#height_embed', function(){
     var that = $(this);
     embed_height = that.val();
-    $("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height, color));
+    $("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height, color, embed_videoonly));
 });
 
 $(document).on('input', '#color_embed', function(){
     var that = $(this);
     color = that.val().substring(1);
-    $("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height, color));
+    $("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height, color, embed_videoonly));
 });
 
 $(document).on('click', ".chan-link", function(e){
@@ -778,7 +779,13 @@ $(window).focus(function(){
 $(document).on("change", "#autoplay", function() {
     if(this.checked) embed_autoplay = "&autoplay";
     else embed_autoplay = "";
-    $("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height, color));
+    $("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height, color, embed_videoonly));
+});
+
+$(document).on("change", "#videoonly", function() {
+    if(this.checked) embed_videoonly = "&videoonly";
+    else embed_videoonly = "";
+    $("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height, color, embed_videoonly));
 });
 
 $(document).on("click", "#playbutton_remote", function(e) {
diff --git a/server/public/partials/channel/modal.handlebars b/server/public/partials/channel/modal.handlebars
index 90531733..af715e96 100644
--- a/server/public/partials/channel/modal.handlebars
+++ b/server/public/partials/channel/modal.handlebars
@@ -58,6 +58,8 @@
             <input type="number" value="300" id="height_embed" class="settings_embed" min="1" />
             <label for="color_embed" class="padding_left_6 embed-label">Color</label>
             <input type="text" id="color_embed" class="settings_embed" value="#808080" />
+            <input type="checkbox" id="videoonly" />
+            <label for="videoonly" class="padding_right_26">Video-only</label>
         </p>
         <textarea id="embed-area"></textarea>
     </div>