Better viewing of playlist on playing on a small screen

- Playlist-height adapts in case video is playing, allowing users to still easily scroll through videos while it is playing

server/public/assets/css/style.css

@@ -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;
     }
 

server/public/assets/js/functions.js

@@ -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;

server/public/assets/js/listeners.js

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

server/public/assets/js/player.js

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