Prettier small player on frontpage when playing soundcloud

server/public/assets/css/style.css

@@ -572,6 +572,7 @@ li.disabled span {
     display: block !important;
     /* right: 10px; */
     z-index: 10;
+    left: 0;
     /*transition: 1s;*/
 }
 
@@ -1763,10 +1764,15 @@ ul #chat-log{
 #player_overlay{
     background-color:black;
     position: absolute;
-    top: calc(-100vh + 64px + 26px);
+    /*top: calc(-100vh + 64px + 26px);*/
+    top: 0px;
+    z-index: 99;
     width:100%;
     color:white;
     height: calc(100vh - 64px - 32px);
+    transition: transform .5s ease-out,width .5s ease-out,height .5s ease-out,opacity 1s;
+    -moz-transition: transform .5s ease-out,width .5s ease-out,height .5s ease-out,opacity 1s;
+    -o-transition: transform .5s ease-out,width .5s ease-out,height .5s ease-out,opacity 1s;
 }
 
 #player_overlay_text{

server/public/assets/js/channel.js

@@ -67,7 +67,9 @@ var Channel = {
         if(window.location.hostname == "zoff.me" || window.location.hostname == "fb.zoff.me") add = "https://zoff.me";
         else add = window.location.hostname;
 
-        if(Player !== undefined && !client) Player.stopInterval= false;
+        if(Player !== undefined && !client) {
+            Player.stopInterval = false;
+        }
 
         if(!client) {
             //Helper.tabs('.playlist-tabs');
@@ -490,6 +492,7 @@ var Channel = {
     onepage_load: function(){
         if(changing_to_frontpage) return;
         if(user_auth_started) {
+            clearTimeout(durationTimeout);
             Player.stopInterval = true;
             user_auth_avoid = true;
             if(!Helper.mobilecheck()) {
@@ -538,7 +541,7 @@ var Channel = {
             Helper.css("#channel-load", "display", "block");
             window.scrollTo(0, 0);
 
-            Player.stopInterval = true;
+            //Player.stopInterval = true;
             Admin.beginning 	 = true;
             began 				 = false;
             durationBegun  		 = false;
@@ -624,6 +627,7 @@ var Channel = {
                     if(!Helper.mobilecheck() && !user_auth_avoid){
                         Helper.removeElement("#playbar");
                         Helper.removeElement("#main_components");
+                        Helper.addClass("#player_overlay", "player_bottom");
                         Helper.addClass("#player", "player_bottom");
                         Helper.addClass("#main-row", "frontpage_modified_heights");
                         Helper.css("#player", "opacity", "1");

server/public/assets/js/embed.js

@@ -14,6 +14,7 @@ try {
 var SC_widget;
 var scUsingWidget = false;
 var SC_player;
+var durationTimeout;
 var sc_need_initialization = true;
 var sc_initialized = false;
 var startTime = 0;
@@ -130,7 +131,6 @@ window.addEventListener("load", function() {
     });
 
     document.querySelector(".channel-info-container").href = "https://zoff.me/" + chan.toLowerCase();
-    console.log("https://zoff.me/" + chan.toLowerCase());
     document.querySelector(".channel-title").innerText = "/" + chan.toLowerCase();
 
     socket.on("get_list", function() {

server/public/assets/js/frontpage.js

@@ -395,6 +395,7 @@ var Frontpage = {
                     if(!client) document.getElementById("video-container").insertAdjacentHTML("beforeend", response.querySelectorAll("#main_components")[0].outerHTML);
                     document.getElementById("main-row").insertAdjacentHTML("beforeend", "<div id='playbar'></div>");
                     Helper.removeClass("#player", "player_bottom");
+                    Helper.removeClass("#player_overlay", "player_bottom");
                     Helper.removeClass("#main-row", "frontpage_modified_heights");
                     Helper.removeElement("#main_section_frontpage");
                     Helper.removeElement("#closePlayer");
@@ -403,6 +404,8 @@ var Frontpage = {
                 document.getElementById("search").setAttribute("placeholder", "Find song on YouTube...");
                 Helper.addClass(".page-footer", "padding-bottom-novideo");
                 from_frontpage = true;
+                //Player.stopInterval =true;
+                //clearTimeout(durationTimeout);
                 if(document.querySelectorAll("#alreadychannel").length == 1){
                     if(old_chan != new_channel) local_new_channel = true;
                     Channel.init();

server/public/assets/js/functions.js

@@ -179,6 +179,7 @@ function hide_native(way) {
                 Player.soundcloud_player.pause();
             }
         } catch(e){}
+        //clearTimeout(durationTimeout);
         Player.stopInterval = true;
         if(Helper.mobilecheck()){
             if(document.querySelector("#pause").classList.contains("hide")){

server/public/assets/js/listeners.js

@@ -97,6 +97,7 @@ var youtube_authenticated = false;
 var chromecastAvailable = false;
 var color = "2d2d2d";
 var find_start = false;
+var durationTimeout;
 var find_started = false;
 var offline = false;
 var cast_ready_connect = false;
@@ -783,6 +784,7 @@ function addDynamicListeners() {
     addListener("click", "#abort-channel-login", function(event) {
         this.preventDefault();
         if(user_auth_started) {
+            clearTimeout(durationTimeout);
             Player.stopInterval = true;
             user_auth_avoid = true;
             if(!Helper.mobilecheck()) {

server/public/assets/js/player.js

@@ -59,6 +59,7 @@ var Player = {
 
             if(!window.MSStream && !chromecastAvailable) {
                 Helper.removeClass("#player_overlay", "hide");
+                Helper.addClass("#player", "hide");
             }
             try{
                 if(!chromecastAvailable) {
@@ -175,7 +176,10 @@ var Player = {
                     mobile_beginning = false;
 
                 }
-                if(!embed && window.location.pathname != "/" && !chromecastAvailable) Helper.addClass("#player_overlay", "hide");
+                if(!embed && window.location.pathname != "/" && !chromecastAvailable) {
+                    Helper.addClass("#player_overlay", "hide");
+                    Helper.removeClass("#player", "hide");
+                }
                 if(window.location.pathname != "/"){
                     if(document.getElementById("play").className.split(" ").length == 1)
                         Helper.toggleClass("#play", "hide");
@@ -312,8 +316,9 @@ var Player = {
         }
         Player.stopVideo();
         if(_autoplay) was_stopped = false;
-        Helper.removeClass(document.getElementById("player_overlay"), "hide");
+        Helper.removeClass("#player_overlay", "hide");
-        Helper.css(document.getElementById("player_overlay"), "background-color", "#2d2d2d");
+        Helper.addClass("#player", "hide");
+        Helper.css("#player_overlay", "background-color", "#2d2d2d");
         if(start == undefined) start = 0;
         if(seekTo == undefined) seekTo = 0;
         soundcloud_loading = false;
@@ -376,14 +381,14 @@ var Player = {
 
         if(_autoplay) was_stopped = false;
         try {
-            Helper.css(document.getElementById("player_overlay"), "background",  "url('" + Player.np.thumbnail + "')");
+            Helper.css("#player_overlay", "background",  "url('" + Player.np.thumbnail + "')");
         } catch(e) {
             console.error("Woops this seems to be the first song in the channel. This will be fixed.. soon.. we think..");
         }
 
-        Helper.css(document.getElementById("player_overlay"), "background-size", "auto");
+        Helper.css("#player_overlay", "background-size", "auto");
-        Helper.css(document.getElementById("player_overlay"), "background-position", "20%");
+        Helper.css("#player_overlay", "background-position", "20%");
-        Helper.css(document.getElementById("player_overlay"), "background-color", "#2d2d2d");
+        Helper.css("#player_overlay", "background-color", "#2d2d2d");
         Helper.addClass("#player_overlay_text", "hide");
     },
 
@@ -474,11 +479,12 @@ var Player = {
                 } catch(e) {
                 }
                 Helper.addClass(".soundcloud_info_container", "hide");
-                Helper.addClass(document.getElementById("player_overlay"), "hide");
+                Helper.addClass("#player_overlay", "hide");
-                Helper.css(document.getElementById("player_overlay"), "background",  "none");
+                Helper.removeClass("#player", "hide");
+                Helper.css("#player_overlay", "background",  "none");
                 Helper.addClass("#player_overlay_text", "hide");
-                Helper.addClass(document.getElementById("player_overlay"), "hide");
+                Helper.addClass("#player_overlay", "hide");
-                Helper.css(document.getElementById("player_overlay"), "display", "none !important");
+                Helper.css("#player_overlay", "display", "none !important");
                 if(embed) {
                     Helper.css("#player", "visibility", "visible");
                 }
@@ -529,10 +535,11 @@ var Player = {
                 Player.soundcloud_player.pause();
             } catch(e) {
             }
-            Helper.addClass(document.getElementById("player_overlay"), "hide");
+            Helper.addClass("#player_overlay", "hide");
-            Helper.css(document.getElementById("player_overlay"), "background",  "none");
+            Helper.css("#player_overlay", "background",  "none");
             Helper.addClass("#player_overlay_text", "hide");
-            Helper.addClass(document.getElementById("player_overlay"), "hide");
+            Helper.addClass("#player_overlay", "hide");
+            Helper.removeClass("#player", "hide");
             try {
                 Player.player.cueVideoById({'videoId': id, 'startSeconds': s, 'endSeconds': e});
             } catch(e) {
@@ -760,7 +767,8 @@ var Player = {
 
     soundcloudPlay: function() {
         Helper.addClass("#player_loader_container", "hide");
-        Helper.css(document.getElementById("player_overlay"), "display", "block");
+        Helper.removeClass("#player_overlay", "hide");
+        Helper.addClass("#player", "hide");
         if(videoSource == "youtube") {
             Player.soundcloud_player.pause();
         } else if(soundcloud_loading){
@@ -1053,7 +1061,9 @@ var Player = {
                 }
 
                 if(!dragging) {
+                    try {
                         document.getElementById("bar").style.width = per+"%";
+                    }catch(e){}
                 }
                 if(videoSource == "soundcloud") {
                     if(scUsingWidget) {
@@ -1099,9 +1109,10 @@ var Player = {
                 }
             }
         }catch(e){}
-        if(!Player.stopInterval) {
+        //if(!Player.stopInterval) {
-            setTimeout(Player.durationSetter, 1000);
+            clearTimeout(durationTimeout);
-        }
+            durationTimeout = setTimeout(Player.durationSetter, 1000);
+        //}
     },
 
     loadPlayer: function(notify) {

server/public/partials/channel/players.handlebars

@@ -5,7 +5,6 @@
     {{/unless}}
     <div id="player" class="ytplayer"></div>
     <div id="sc_player" class="scplayer"></div>
-    <div id="main_components">
     <div id="player_overlay" class="hide valign-wrapper">
         <div id="playing_on">
             <div id="chromecast_icon">
@@ -40,6 +39,7 @@
             </div>
         </div>
     </div>
+    <div id="main_components">
         <div id="controls" class="noselect">
             <div class="playbar-btn prev playbar hide">
                 <i class="material-icons">skip_previous</i>