Merge pull request #434 from zoff-music/feature/better-embed-player

better embed player on small screens

server/public/assets/css/embed.css

@@ -69,11 +69,12 @@
 }
 
 #player_overlay {
-  position: absolute;
+  position: relative;
   height: calc(100% - 32px);
   top: 0px;
   left: 0px;
   width: 60vw;
+  margin-bottom: 5px;
 }
 
 .soundcloud_info_container {
@@ -615,6 +616,16 @@ body {
   padding: 0 5px;
 }
 
+#song-title {
+  position: absolute;
+  z-index: 9;
+  color: white;
+  background: rgba(0,0,0,.5);
+  font-size: 1.5rem;
+  padding: 10px;
+  width: 60vw;
+}
+
 /*
 .last_page, .last_page_hide, .first_page, .first_page_hide{
 display: none !important;
@@ -630,3 +641,44 @@ display: none !important;
     bottom: 90px;
   }
 }
+
+@media only screen and (max-width: 736px) and (max-width:600px), only screen and (max-device-width: 736px)  and (orientation: landscape){
+    #player-container{
+        /*display: none;*/
+        position: absolute;
+        width: 100vw;
+        height: 200px;
+        bottom: 0px;
+    }
+    #controls {
+      width: 100vw;
+      margin-top: 0px;
+    }
+
+    #player {
+        width: 100vw;
+        height: 170px;
+        display: block;
+    }
+
+    #player_overlay {
+      position: relative;
+      width: 100vw;
+      margin-bottom: 0px;
+    }
+
+    #playlist {
+        width: 100vw;
+        height: calc(100vh - 208px);
+    }
+
+    #toast-container {
+      min-width: 96%;
+      bottom: auto;
+    }
+
+    #song-title {
+      width: 100vw;
+      bottom: 149px;
+    }
+}

server/public/assets/js/embed.js

@@ -13,6 +13,10 @@ try {
 }
 var SC_widget;
 var scUsingWidget = false;
+var zoff_api_token = "DwpnKVkaMH2HdcpJT2YPy783SY33byF5/32rbs0+xdU=";
+if(window.location.hostname == "localhost" || window.location.hostname == "client.localhost") {
+    var zoff_api_token = "AhmC4Yg2BhaWPZBXeoWK96DAiAVfbou8TUG2IXtD3ZQ=";
+}
 var SC_player;
 var durationTimeout;
 var sc_need_initialization = true;
@@ -101,6 +105,11 @@ window.addEventListener("DOMContentLoaded", function() {
 
 });
 
+var Channel = {
+    set_title_width: function(){},
+    window_width_volume_slider: function(){}
+}
+
 function getSearch(elem) {
     var result = {};
     var search = window.location.search.split("&");
@@ -148,6 +157,7 @@ window.addEventListener("load", function() {
     document.querySelector(".channel-title").innerText = "/" + chan.toLowerCase();
 
     socket.on("get_list", function() {
+        socket_connected = true;
         setTimeout(function(){socket.emit('list', {version: VERSION, channel: chan.toLowerCase(), pass: ''});},1000);
     });
 
@@ -191,6 +201,10 @@ window.addEventListener("load", function() {
     }
 });
 
+window.addEventListener("resize", function(){
+    resizeFunction();
+});
+
 function resizePlaylistPlaying(){};
 
 function startWaitTimerPlay() {
@@ -362,7 +376,6 @@ function change_offline(enabled, already_offline){
         Helper.removeClass(".margin-playbar", "margin-playbar");
         Helper.addClass(".prev playbar", "margin-playbar");
         Helper.removeClass(".prev playbar", "hide");
-        Helper.removeClass(".skip playbar", "hide");
         Helper.removeClass("#offline-mode", "waves-cyan");
         Helper.addClass("#offline-mode", "cyan");
         Helper.removeClass(".delete-context-menu", "context-menu-disabled");
@@ -402,7 +415,7 @@ function change_offline(enabled, already_offline){
         Helper.addClass("#playpause", "margin-playbar");
         Helper.removeClass("#viewers", "hide");
         Helper.addClass(".prev playbar", "hide");
-        Helper.addClass(".skip playbar", "hide");
+        //Helper.addClass(".skip playbar", "hide");
         Helper.addClass("#offline-mode", "waves-cyan");
         Helper.removeClass("#offline-mode", "cyan");
         if(!Helper.mobilecheck()) {
@@ -454,6 +467,7 @@ addListener("click", ".channel-info-container", function(e) {
 addListener("click", ".vote-container", function(e) {
     var that = e;
     var id = that.getAttribute("data-video-id");
+
     List.vote(id, "pos");
 });
 
@@ -479,7 +493,7 @@ addListener("click", ".prev", function(event){
 
 addListener("click", ".skip", function(event){
     this.preventDefault();
-    if(!offline) return;
+    //if(!offline) return;
     List.skip(true);
 });
 

server/public/assets/js/list.js

@@ -569,6 +569,7 @@ var List = {
             "client " + client,
             "socket_connected " + socket_connected
         ]);
+
         if((client || Helper.mobilecheck()) && !socket_connected) {
             if(vote != "del") {
                 vote_ajax(id);

server/public/assets/js/player.js

@@ -143,6 +143,7 @@ var Player = {
                 }
                 break;
             case YT.PlayerState.PLAYING:
+                if(embed) Helper.css("#song-title", "display", "none");
                 if(videoSource == "soundcloud") {
                     Player.player.stopVideo();
                     //was_stopped = false;
@@ -217,7 +218,7 @@ var Player = {
                         if(window.location.pathname != "/") Playercontrols.play_pause_show();
                         mobile_beginning = true;
                         if(!embed && !client && window.location.pathname != "/") {
-                            if(Helper.mobilecheck()) {
+                            if(Helper.mobilecheck() && !embed) {
                                 Helper.css("#player", "display", "none");
                                 Helper.toggleClass(".video-container", "click-through");
                                 Helper.toggleClass(".page-footer", "padding-bottom-extra");
@@ -775,6 +776,7 @@ var Player = {
         Helper.addClass("#player_loader_container", "hide");
         Helper.css("#player_overlay", "display", "block");
         Helper.addClass("#player", "hide");
+        if(embed) Helper.css("#song-title", "display", "block");
         if(videoSource == "youtube") {
             Player.soundcloud_player.pause();
         } else if(soundcloud_loading){

server/public/assets/js/playercontrols.js

@@ -28,7 +28,7 @@ var Playercontrols = {
                 document.getElementById("volume").innerHTML = "";
             }
         }catch(e){}
-        if(Helper.mobilecheck() || slider_type == "vertical") {
+        if((Helper.mobilecheck() || slider_type == "vertical") && !embed) {
             //slider_values.orientation = "vertical";
             if(!document.querySelector(".volume-container").classList.contains("hide")) {
                 Helper.toggleClass(".volume-container", "hide");
@@ -212,7 +212,7 @@ var Playercontrols = {
                 if(Player.player.getPlayerState() == YT.PlayerState.PLAYING)
                 {
                     Player.pauseVideo();
-                    if(Helper.mobilecheck() && !window.MSStream){
+                    if(Helper.mobilecheck() && !window.MSStream && !embed){
                         //if(Helper.mobilecheck() && !/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
                         //document.getElementById("player").style.display = "none";
                         Helper.css("#player", "display", "none");

server/public/layouts/client/embed.handlebars

@@ -35,7 +35,7 @@
                 <i id="play" class="material-icons hide">play_arrow</i>
                 <i id="pause" class="material-icons">pause</i>
             </div>
-            <div class="playbar-btn skip playbar hide">
+            <div class="playbar-btn skip playbar">
                 <i class="material-icons">skip_next</i>
             </div>
             <div id="duration">00:00 / 00:00</div>