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

Better viewing of playlist on playing on a small screen

Browse Source 
- Playlist-height adapts in case video is playing, allowing users to still easily scroll through videos while it is playing
This commit is contained in:
Kasper Rynning-Tønnesen
2018-06-23 12:54:11 +02:00
parent 6f58e9514c
commit a9eaa282a5
4 changed files with 56 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2177,7 +2177,7 @@ nav ul li:hover, nav ul li.active {
}
.tabs_height{
height:calc(100vh - 48px - 64px - 32px) !important;
height:calc(100vh - 48px - 64px - 32px);
overflow:auto;
}
@@ -3103,7 +3103,7 @@ nav ul li:hover, nav ul li.active {
}
.tabs_height{
height:calc(100vh - 48px - 64px - 134px) !important;
height:calc(100vh - 48px - 64px - 134px);
overflow:initial;
}

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

@@ -780,6 +780,48 @@ function change_offline(enabled, already_offline){
}
}
function resizePlaylistPlaying(playing) {
if(window.innerWidth < 601) {
var subtract = 0;
if(playing) {
Helper.css("#chat-bar" "height", window.innerHeight - 246 - subtract + "px");
subtract = 200;
} else {
document.querySelector("#chat-bar").style.height = "";
}
Helper.css("#chat-bar" "height", window.innerHeight - 246 - subtract + "px");
Helper.css("#wrapper", "height", window.innerHeight - 246 - subtract + "px");
var temp_fit = Math.round(Helper.computedStyle("#wrapper", "height") / 71)+1;
if(temp_fit > List.can_fit || temp_fit < List.can_fit){
List.dynamicContentPage(-10);
}
if(List.can_fit < temp_fit){
for(var i = 0; i < List.page + temp_fit; i++) {
Helper.css(document.querySelector("#wrapper").children[i], "display", "inline-flex");
}
} else if(List.can_fit > temp_fit){
Helper.css(document.querySelector("#wrapper").children[List.page + temp_fit], "display", "none");
var elements = document.querySelector("#wrapper").children;
for(var i = List.page + temp_fit; i < elements.length; i++) {
Helper.css(document.querySelector("#wrapper").children[i], "display", "none");
}
}
List.can_fit = temp_fit;
List.element_height = (Helper.computedStyle("#wrapper", "height") / List.can_fit)-5.3;
Helper.css(".list-song", "height", List.element_height + "px");
Channel.set_title_width();
if(!client) {
var controlsPosition = document.querySelector("#controls").offsetHeight - Helper.computedStyle("#controls", "height");
if(document.querySelectorAll("#controls").length > 0 && !Helper.mobilecheck()) {
Helper.css(document.querySelector("#seekToDuration"), "top", controlsPosition - 55);
} else if(document.querySelectorAll("#controls").length > 0) {
Helper.css(document.querySelector("#seekToDuration"), "top", controlsPosition - 20);
}
Channel.window_width_volume_slider();
}
}
}
function pagination_results(e) {
this.preventDefault();
var that = e;

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

@@ -1278,6 +1278,12 @@ window.addEventListener("focus", function(event) {
window.addEventListener("resize", function(){
if(chan && !Helper.mobilecheck()){
if(window.innerWidth > 600 && document.querySelector("#wrapper").style.height != "") {
document.querySelector("#wrapper").style.height = "";
} else if(window.innerWidth < 601) {
resizePlaylistPlaying(Player.player.getPlayerState() == YT.PlayerState.PLAYING);
return;
}
var temp_fit = Math.round(Helper.computedStyle("#wrapper", "height") / 71)+1;
if(temp_fit > List.can_fit || temp_fit < List.can_fit){
List.dynamicContentPage(-10);

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

@@ -139,6 +139,9 @@ var Player = {
if(embed) {
Helper.css("#player", "visibility", "visible");
}
if(!embed && !client && window.location.pathname != "/") {
resizePlaylistPlaying(newState.data == YT.PlayerState.PLAYING);
}
if(embed && !autoplay) autoplay = true;
if(!window.MSStream) {
Helper.css("#player", "opacity", "1");
@@ -199,6 +202,9 @@ var Player = {
if(gotten_np) gotten_np = false;
if(window.location.pathname != "/") Playercontrols.play_pause_show();
mobile_beginning = true;
if(!embed && !client && window.location.pathname != "/") {
resizePlaylistPlaying(newState.data == YT.PlayerState.PLAYING);
}
}
}
/*if(Helper.mobilecheck()) {