mirror of
https://github.com/KevinMidboe/zoff.git
synced 2025-10-29 18:00:23 +00:00
Improved mobile and desktop
- Showing correct button on mobile - Showing and hiding player-element on play/pause on mobile - Improved playback on desktop, not stopping videoes if they're skipped while one is loading/buffering - Small player visual-fixes on mobile
This commit is contained in:
@@ -2976,7 +2976,10 @@ nav ul li:hover, nav ul li.active {
|
|||||||
height: calc(30vh);
|
height: calc(30vh);
|
||||||
bottom: -33px !important;
|
bottom: -33px !important;
|
||||||
top: initial;
|
top: initial;
|
||||||
display: none !important;
|
width: 100vw;
|
||||||
|
height: 200px;
|
||||||
|
pointer-events: all;
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#wrapper{
|
#wrapper{
|
||||||
@@ -3080,6 +3083,7 @@ nav ul li:hover, nav ul li.active {
|
|||||||
#player{
|
#player{
|
||||||
height: calc(100%);
|
height: calc(100%);
|
||||||
display:none;
|
display:none;
|
||||||
|
width: 100vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hide-on-small-only{
|
.hide-on-small-only{
|
||||||
|
|||||||
@@ -9,6 +9,7 @@ var socket_connected = false;
|
|||||||
var dynamicListeners = {};
|
var dynamicListeners = {};
|
||||||
var player_ready = false;
|
var player_ready = false;
|
||||||
var previousSoundcloud;
|
var previousSoundcloud;
|
||||||
|
var buffering = false;
|
||||||
var empty_clear = false;
|
var empty_clear = false;
|
||||||
var fix_too_far = false;
|
var fix_too_far = false;
|
||||||
var beginning = false;
|
var beginning = false;
|
||||||
@@ -79,10 +80,8 @@ function receiveMessage(event) {
|
|||||||
|
|
||||||
window.addEventListener("message", receiveMessage, false);
|
window.addEventListener("message", receiveMessage, false);
|
||||||
window.addEventListener("DOMContentLoaded", function() {
|
window.addEventListener("DOMContentLoaded", function() {
|
||||||
console.log("Loaded DOMContent");
|
|
||||||
})
|
})
|
||||||
window.addEventListener("load", function() {
|
window.addEventListener("load", function() {
|
||||||
console.log("Window loaded");
|
|
||||||
if(hash.length >= 3 && hash[2] == "autoplay"){
|
if(hash.length >= 3 && hash[2] == "autoplay"){
|
||||||
autoplay = true;
|
autoplay = true;
|
||||||
Helper.css("#player", "visibility", "hidden");
|
Helper.css("#player", "visibility", "hidden");
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ var dynamicListeners = {};
|
|||||||
var socket_connected = false;
|
var socket_connected = false;
|
||||||
var hasadmin = 0;
|
var hasadmin = 0;
|
||||||
var soundcloud_loading = false;
|
var soundcloud_loading = false;
|
||||||
|
var buffering = false;
|
||||||
var list_html = document.querySelectorAll("#list-song-html").length > 0 ? document.querySelector("#list-song-html").innerHTML : undefined;
|
var list_html = document.querySelectorAll("#list-song-html").length > 0 ? document.querySelector("#list-song-html").innerHTML : undefined;
|
||||||
var unseen = false;
|
var unseen = false;
|
||||||
var searching = false;
|
var searching = false;
|
||||||
@@ -21,7 +22,7 @@ var _kWay = "38384040373937396665";
|
|||||||
var _kT = "";
|
var _kT = "";
|
||||||
var _kDone = false;
|
var _kDone = false;
|
||||||
var music = 0;
|
var music = 0;
|
||||||
var was_stopped = false;
|
var was_stopped = Helper.mobilecheck() ? true : false;
|
||||||
var timed_remove_check;
|
var timed_remove_check;
|
||||||
var slider_type = Helper.mobilecheck() ? "vertical" : "horizontal";
|
var slider_type = Helper.mobilecheck() ? "vertical" : "horizontal";
|
||||||
var programscroll = false;
|
var programscroll = false;
|
||||||
|
|||||||
@@ -77,8 +77,8 @@ var Player = {
|
|||||||
if(obj.np != undefined && !offline) {
|
if(obj.np != undefined && !offline) {
|
||||||
seekTo = (time - conf.startTime) + Player.np.start;
|
seekTo = (time - conf.startTime) + Player.np.start;
|
||||||
Player.getTitle(song_title, viewers);
|
Player.getTitle(song_title, viewers);
|
||||||
if(((embed && autoplay) || !embed) && !was_stopped && !client) {
|
if(((embed && autoplay) || !embed) && (!was_stopped || buffering) && !client) {
|
||||||
//console.log(embed, autoplay);
|
buffering = false;
|
||||||
Helper.log(["loadVideoById \nwas_stopped="+was_stopped+"\noffline="+offline])
|
Helper.log(["loadVideoById \nwas_stopped="+was_stopped+"\noffline="+offline])
|
||||||
Player.loadVideoById(Player.np.id, duration, Player.np.start, Player.np.end);
|
Player.loadVideoById(Player.np.id, duration, Player.np.start, Player.np.end);
|
||||||
} else if(!client) {
|
} else if(!client) {
|
||||||
@@ -115,7 +115,6 @@ var Player = {
|
|||||||
Helper.log(["getVideoUrl(): " + Player.player.getVideoUrl().split('v=')[1]]);
|
Helper.log(["getVideoUrl(): " + Player.player.getVideoUrl().split('v=')[1]]);
|
||||||
} catch(e){}
|
} catch(e){}
|
||||||
Helper.log(["video_id variable: " + video_id]);
|
Helper.log(["video_id variable: " + video_id]);
|
||||||
|
|
||||||
switch(newState.data) {
|
switch(newState.data) {
|
||||||
case YT.PlayerState.UNSTARTED:
|
case YT.PlayerState.UNSTARTED:
|
||||||
break;
|
break;
|
||||||
@@ -148,6 +147,10 @@ var Player = {
|
|||||||
|
|
||||||
//}
|
//}
|
||||||
}
|
}
|
||||||
|
if(Helper.mobilecheck()) {
|
||||||
|
Helper.css("#player", "display", "block");
|
||||||
|
Helper.css("#player", "pointer-events", "all");
|
||||||
|
}
|
||||||
Helper.css("#playpause", "visibility", "visible");
|
Helper.css("#playpause", "visibility", "visible");
|
||||||
Helper.css("#playpause", "pointer-events", "all");
|
Helper.css("#playpause", "pointer-events", "all");
|
||||||
playing = true;
|
playing = true;
|
||||||
@@ -164,6 +167,7 @@ var Player = {
|
|||||||
if(document.getElementById("pause").className.split(" ").length == 2)
|
if(document.getElementById("pause").className.split(" ").length == 2)
|
||||||
Helper.toggleClass("#pause", "hide");
|
Helper.toggleClass("#pause", "hide");
|
||||||
}
|
}
|
||||||
|
buffering = false;
|
||||||
if((paused || was_stopped) && !offline) {
|
if((paused || was_stopped) && !offline) {
|
||||||
/*var u = Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()), true);
|
/*var u = Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()), true);
|
||||||
if(u == undefined) u = "";*/
|
if(u == undefined) u = "";*/
|
||||||
@@ -193,8 +197,14 @@ var Player = {
|
|||||||
mobile_beginning = true;
|
mobile_beginning = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
if(Helper.mobilecheck()) {
|
||||||
|
Helper.css("#player", "display", "none");
|
||||||
|
Helper.css("#player", "pointer-events", "none");
|
||||||
|
}
|
||||||
break;
|
break;
|
||||||
case YT.PlayerState.BUFFERING:
|
case YT.PlayerState.BUFFERING:
|
||||||
|
//was_stopped = false;
|
||||||
|
buffering = true;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -325,6 +335,7 @@ var Player = {
|
|||||||
} 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(document.getElementById("player_overlay"), "background-size", "auto");
|
||||||
Helper.css(document.getElementById("player_overlay"), "background-position", "20%");
|
Helper.css(document.getElementById("player_overlay"), "background-position", "20%");
|
||||||
Helper.css(document.getElementById("player_overlay"), "background-color", "#2d2d2d");
|
Helper.css(document.getElementById("player_overlay"), "background-color", "#2d2d2d");
|
||||||
@@ -371,6 +382,7 @@ var Player = {
|
|||||||
Helper.css(document.getElementById("player_overlay"), "background", "none");
|
Helper.css(document.getElementById("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(document.getElementById("player_overlay"), "hide");
|
||||||
|
Helper.css(document.getElementById("player_overlay"), "display", "none !important");
|
||||||
if(embed) {
|
if(embed) {
|
||||||
Helper.css("#player", "visibility", "visible");
|
Helper.css("#player", "visibility", "visible");
|
||||||
}
|
}
|
||||||
@@ -382,7 +394,6 @@ var Player = {
|
|||||||
}
|
}
|
||||||
} catch(e) {
|
} catch(e) {
|
||||||
}
|
}
|
||||||
was_stopped = false;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if(offline) {
|
if(offline) {
|
||||||
@@ -405,6 +416,9 @@ var Player = {
|
|||||||
durationBegun = true;
|
durationBegun = true;
|
||||||
Player.durationSetter();
|
Player.durationSetter();
|
||||||
}
|
}
|
||||||
|
was_stopped = true;
|
||||||
|
Helper.addClass("#pause", "hide");
|
||||||
|
Helper.removeClass("#play", "hide");
|
||||||
if(videoSource == "soundcloud") {
|
if(videoSource == "soundcloud") {
|
||||||
try {
|
try {
|
||||||
Player.player.stopVideo();
|
Player.player.stopVideo();
|
||||||
@@ -612,6 +626,7 @@ 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");
|
||||||
if(videoSource == "youtube") {
|
if(videoSource == "youtube") {
|
||||||
Player.soundcloud_player.pause();
|
Player.soundcloud_player.pause();
|
||||||
} else if(soundcloud_loading){
|
} else if(soundcloud_loading){
|
||||||
|
|||||||
Reference in New Issue
Block a user