From 67b98d12ad249109fba579a16d098e2d243a53b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?= <kasper@kasperrt.no>
Date: Wed, 24 Oct 2018 13:10:56 +0200
Subject: [PATCH] Added option to preview embedded element

---
 server/public/assets/css/embed.css              |  2 +-
 server/public/assets/css/style.css              |  4 ++++
 server/public/assets/js/channel.js              |  6 +++++-
 server/public/assets/js/functions.js            |  4 ++--
 server/public/assets/js/listeners.js            | 17 +++++++++++++++--
 server/public/partials/channel/modal.handlebars |  4 +++-
 6 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/server/public/assets/css/embed.css b/server/public/assets/css/embed.css
index 5213a3df..4b532a24 100755
--- a/server/public/assets/css/embed.css
+++ b/server/public/assets/css/embed.css
@@ -642,7 +642,7 @@ display: none !important;
   }
 }
 
-@media only screen and (max-width: 736px) and (max-width:600px), only screen and (max-device-width: 736px)  and (orientation: landscape){
+@media only screen and (max-width: 736px) and (max-width:500px), only screen and (max-device-width: 736px)  and (orientation: landscape){
     #player-container{
         /*display: none;*/
         position: absolute;
diff --git a/server/public/assets/css/style.css b/server/public/assets/css/style.css
index fa5c7c91..db273b88 100755
--- a/server/public/assets/css/style.css
+++ b/server/public/assets/css/style.css
@@ -221,6 +221,10 @@ background: transparent !important;
     box-shadow: none;
 }
 
+#embed {
+    max-height: max-content !important;
+}
+
 .chan.tap-target-origin {
     display: none;
 }
diff --git a/server/public/assets/js/channel.js b/server/public/assets/js/channel.js
index 3b5b927e..72938431 100644
--- a/server/public/assets/js/channel.js
+++ b/server/public/assets/js/channel.js
@@ -130,7 +130,11 @@ var Channel = {
         });
 
         if(!client) {
-            M.Modal.init(document.getElementById("embed"));
+            M.Modal.init(document.getElementById("embed"), {
+                onCloseStart: function() {
+                    document.querySelector(".embed-preview").innerHTML = "";
+                }
+            });
         } else {
             Helper.removeElement("#embed");
             Helper.removeElement(".embed-button-footer");
diff --git a/server/public/assets/js/functions.js b/server/public/assets/js/functions.js
index 08c1feda..62bfb23d 100644
--- a/server/public/assets/js/functions.js
+++ b/server/public/assets/js/functions.js
@@ -40,13 +40,13 @@ function resizeFunction() {
     if(chan && !Helper.mobilecheck()){
         if(document.querySelector("#wrapper") == null) return;
         if(!client && !embed) document.querySelector("#hide-playlist").style.left = (document.querySelector("#video-container").offsetWidth - document.querySelector("#hide-playlist").offsetWidth) + "px";
-        if(window.innerWidth > 600 && document.querySelector("#wrapper").style.height != "") {
+        if(((window.innerWidth > 600 && !embed) || (window.innerWidth > 500 && !embed)) && document.querySelector("#wrapper").style.height != "") {
             document.querySelector("#wrapper").style.height = "";
             document.querySelector("#chat-bar").style.height = "";
             document.querySelector("#channelchat").style.height = "";
             document.querySelector("#all_chat").style.height = "";
             document.querySelector("#chat-container").style.height = "";
-        } else if(window.innerWidth < 601) {
+        } else if(((window.innerWidth < 601 && !embed) || (window.innerWidth < 501 && !embed))) {
             if(!client && !embed) {
                 var scPlaying = false;
                 var ytPlaying = false;
diff --git a/server/public/assets/js/listeners.js b/server/public/assets/js/listeners.js
index ca9bce5e..53a6f882 100755
--- a/server/public/assets/js/listeners.js
+++ b/server/public/assets/js/listeners.js
@@ -88,7 +88,7 @@ var access_token_data = {};
 var spotify_authenticated = false;
 var not_import_html = "";
 var not_export_html = "";
-var embed_height = 300;
+var embed_height = 400;
 var embed_width = 600;
 var embed_videoonly = "&videoonly=false";
 var embed_localmode = "&localmode=false";
@@ -430,6 +430,15 @@ initializeCastApi = function() {
 };
 
 function addDynamicListeners() {
+    addListener("click", ".preview-embed", function(event) {
+        this.preventDefault();
+        if(document.querySelector(".embed-preview").innerHTML == "") {
+            document.querySelector(".embed-preview").innerHTML = embed_code(embed_autoplay, embed_width, embed_height, color, embed_videoonly, embed_localmode);
+        } else {
+            document.querySelector(".embed-preview").innerHTML = "";
+        }
+    });
+
     addListener("click", "#player_overlay", function(event) {
         if(chromecastAvailable) {
             Player.playPauseVideo();
@@ -1236,7 +1245,11 @@ function addDynamicListeners() {
 
     addListener("click", "#embed-button", function() {
         this.preventDefault();
-        M.Modal.init(document.getElementById("embed"));
+        M.Modal.init(document.getElementById("embed"), {
+            onCloseStart: function() {
+                document.querySelector(".embed-preview").innerHTML = "";
+            }
+        });
         ga('send', 'event', "button-click", "embed-channel", "channel-name", chan.toLowerCase());
         M.Modal.getInstance(document.getElementById("embed")).open();
     });
diff --git a/server/public/partials/channel/modal.handlebars b/server/public/partials/channel/modal.handlebars
index 3f81bee9..da115d46 100644
--- a/server/public/partials/channel/modal.handlebars
+++ b/server/public/partials/channel/modal.handlebars
@@ -11,7 +11,7 @@
                 <label for="width_embed" class="embed-label">Width</label>
                 <input type="number" value="600" id="width_embed" class="settings_embed" min="1" />
                 <label for="height_embed" class="padding_left_6 embed-label">Height</label>
-                <input type="number" value="300" id="height_embed" class="settings_embed" min="1" />
+                <input type="number" value="400" id="height_embed" class="settings_embed" min="1" />
                 <label for="color_embed" class="padding_left_6 embed-label">Color</label>
                 <input type="color" id="color_embed" class="settings_embed" value="#2d2d2d" />
                 <label>
@@ -24,8 +24,10 @@
                 </label>
             </p>
             <textarea id="embed-area"></textarea>
+            <div class="embed-preview"></div>
         </div>
         <div class="modal-footer">
+            <a href="#!" class="waves-effect waves-green btn-flat preview-embed">Preview</a>
             <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
         </div>
     </div>