KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2025-10-29 18:00:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Prettier small player on frontpage when playing soundcloud

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2018-09-29 15:56:17 +02:00
parent ab8e53d1e0
commit 81dd783609
8 changed files with 82 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
server/public/assets/css/style.css
View File

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

8
server/public/assets/js/channel.js
View File

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

2
server/public/assets/js/embed.js
View File

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

3
server/public/assets/js/frontpage.js
View File

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

1
server/public/assets/js/functions.js
View File

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

2
server/public/assets/js/listeners.js
View File

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

49
server/public/assets/js/player.js
View File

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

64
server/public/partials/channel/players.handlebars
View File

@@ -5,41 +5,41 @@
{{/unless}} {{/unless}}
<div id="player" class="ytplayer"></div> <div id="player" class="ytplayer"></div>
<div id="sc_player" class="scplayer"></div> <div id="sc_player" class="scplayer"></div>
<div id="main_components"> <div id="player_overlay" class="hide valign-wrapper">
<div id="player_overlay" class="hide valign-wrapper"> <div id="playing_on">
<div id="playing_on"> <div id="chromecast_icon">
<div id="chromecast_icon"> <i class="material-icons">cast</i>
<i class="material-icons">cast</i>
</div>
<div id="chromecast_text"></div>
</div> </div>
<div class="soundcloud_info_container hide"> <div id="chromecast_text"></div>
<a href="#!" id="soundcloud_listen_link" target="_blank"> </div>
<img src="https://developers.soundcloud.com/assets/powered_by_large_white-9c2af6a93ad2b1c541f423d9e9045980.png" /> <div class="soundcloud_info_container hide">
</a> <a href="#!" id="soundcloud_listen_link" target="_blank">
<a href="#!" class="btn green waves-effect waves-light" target="_blank">Artist</a> <img src="https://developers.soundcloud.com/assets/powered_by_large_white-9c2af6a93ad2b1c541f423d9e9045980.png" />
</div> </a>
<div id="player_overlay_text" class="valign center-align"> <a href="#!" class="btn green waves-effect waves-light" target="_blank">Artist</a>
Waiting for Video </div>
</div> <div id="player_overlay_text" class="valign center-align">
<div id="player_loader_container" class="hide valign-wrapper"> Waiting for Video
<div id="player_loader" class="preloader-wrapper large active valign"> </div>
{{> spinner}} <div id="player_loader_container" class="hide valign-wrapper">
</div> <div id="player_loader" class="preloader-wrapper large active valign">
</div> {{> spinner}}
<div id="player_overlay_controls" class="hide valign-wrapper">
<div id="playpause-overlay" class="valign center-align">
<i id="play-overlay" class="material-icons hide">play_arrow</i>
<i id="pause-overlay" class="material-icons">pause</i>
</div>
<div id="volume-button-overlay">
<i id="v-mute-overlay" class="material-icons">volume_off</i>
<i id="v-low-overlay" class="material-icons">volume_mute</i>
<i id="v-medium-overlay" class="material-icons">volume_down</i>
<i id="v-full-overlay" class="material-icons">volume_up</i>
</div>
</div> </div>
</div> </div>
<div id="player_overlay_controls" class="hide valign-wrapper">
<div id="playpause-overlay" class="valign center-align">
<i id="play-overlay" class="material-icons hide">play_arrow</i>
<i id="pause-overlay" class="material-icons">pause</i>
</div>
<div id="volume-button-overlay">
<i id="v-mute-overlay" class="material-icons">volume_off</i>
<i id="v-low-overlay" class="material-icons">volume_mute</i>
<i id="v-medium-overlay" class="material-icons">volume_down</i>
<i id="v-full-overlay" class="material-icons">volume_up</i>
</div>
</div>
</div>
<div id="main_components">
<div id="controls" class="noselect"> <div id="controls" class="noselect">
<div class="playbar-btn prev playbar hide"> <div class="playbar-btn prev playbar hide">
<i class="material-icons">skip_previous</i> <i class="material-icons">skip_previous</i>