diff --git a/server/public/assets/css/style.css b/server/public/assets/css/style.css index c7f3e5f2..0ae54a5b 100755 --- a/server/public/assets/css/style.css +++ b/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{ diff --git a/server/public/assets/js/channel.js b/server/public/assets/js/channel.js index c977e889..6d2e9045 100644 --- a/server/public/assets/js/channel.js +++ b/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"); diff --git a/server/public/assets/js/embed.js b/server/public/assets/js/embed.js index a5d4685c..b473a776 100755 --- a/server/public/assets/js/embed.js +++ b/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() { diff --git a/server/public/assets/js/frontpage.js b/server/public/assets/js/frontpage.js index 1607035d..006b6c9f 100755 --- a/server/public/assets/js/frontpage.js +++ b/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", "
"); 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(); diff --git a/server/public/assets/js/functions.js b/server/public/assets/js/functions.js index 058211e3..d627f160 100644 --- a/server/public/assets/js/functions.js +++ b/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")){ diff --git a/server/public/assets/js/listeners.js b/server/public/assets/js/listeners.js index 2a2e7703..b10fb128 100755 --- a/server/public/assets/js/listeners.js +++ b/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()) { diff --git a/server/public/assets/js/player.js b/server/public/assets/js/player.js index e17db5ef..0e9a751a 100755 --- a/server/public/assets/js/player.js +++ b/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.css(document.getElementById("player_overlay"), "background-color", "#2d2d2d"); + Helper.removeClass("#player_overlay", "hide"); + 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(document.getElementById("player_overlay"), "background-position", "20%"); - Helper.css(document.getElementById("player_overlay"), "background-color", "#2d2d2d"); + Helper.css("#player_overlay", "background-size", "auto"); + Helper.css("#player_overlay", "background-position", "20%"); + 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.css(document.getElementById("player_overlay"), "background", "none"); + Helper.addClass("#player_overlay", "hide"); + Helper.removeClass("#player", "hide"); + Helper.css("#player_overlay", "background", "none"); Helper.addClass("#player_overlay_text", "hide"); - Helper.addClass(document.getElementById("player_overlay"), "hide"); - Helper.css(document.getElementById("player_overlay"), "display", "none !important"); + Helper.addClass("#player_overlay", "hide"); + 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.css(document.getElementById("player_overlay"), "background", "none"); + Helper.addClass("#player_overlay", "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.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) { - document.getElementById("bar").style.width = per+"%"; + 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) { - setTimeout(Player.durationSetter, 1000); - } + //if(!Player.stopInterval) { + clearTimeout(durationTimeout); + durationTimeout = setTimeout(Player.durationSetter, 1000); + //} }, loadPlayer: function(notify) { diff --git a/server/public/partials/channel/players.handlebars b/server/public/partials/channel/players.handlebars index 50208d42..20c42585 100644 --- a/server/public/partials/channel/players.handlebars +++ b/server/public/partials/channel/players.handlebars @@ -5,41 +5,41 @@ {{/unless}}
-
-
-
-
- cast -
-
+
+
+
+ cast
-
- - - - Artist -
-
- Waiting for Video -
-
-
- {{> spinner}} -
-
-
-
- play_arrow - pause -
-
- volume_off - volume_mute - volume_down - volume_up -
+
+
+
+ + + + Artist +
+
+ Waiting for Video +
+
+
+ {{> spinner}}
+
+
+ play_arrow + pause +
+
+ volume_off + volume_mute + volume_down + volume_up +
+
+
+