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;
/* 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{

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";
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");

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

@@ -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() {

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);
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();

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

@@ -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")){

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

@@ -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()) {

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

@@ -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) {

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

@@ -5,41 +5,41 @@
{{/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">
<i class="material-icons">cast</i>
</div>
<div id="chromecast_text"></div>
<div id="player_overlay" class="hide valign-wrapper">
<div id="playing_on">
<div id="chromecast_icon">
<i class="material-icons">cast</i>
</div>
<div class="soundcloud_info_container hide">
<a href="#!" id="soundcloud_listen_link" target="_blank">
<img src="https://developers.soundcloud.com/assets/powered_by_large_white-9c2af6a93ad2b1c541f423d9e9045980.png" />
</a>
<a href="#!" class="btn green waves-effect waves-light" target="_blank">Artist</a>
</div>
<div id="player_overlay_text" class="valign center-align">
Waiting for Video
</div>
<div id="player_loader_container" class="hide valign-wrapper">
<div id="player_loader" class="preloader-wrapper large active valign">
{{> spinner}}
</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 id="chromecast_text"></div>
</div>
<div class="soundcloud_info_container hide">
<a href="#!" id="soundcloud_listen_link" target="_blank">
<img src="https://developers.soundcloud.com/assets/powered_by_large_white-9c2af6a93ad2b1c541f423d9e9045980.png" />
</a>
<a href="#!" class="btn green waves-effect waves-light" target="_blank">Artist</a>
</div>
<div id="player_overlay_text" class="valign center-align">
Waiting for Video
</div>
<div id="player_loader_container" class="hide valign-wrapper">
<div id="player_loader" class="preloader-wrapper large active valign">
{{> spinner}}
</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 class="playbar-btn prev playbar hide">
<i class="material-icons">skip_previous</i>