From 58ccdada3b1f6da25d20bbd4eb768f251b73dbb2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?= Date: Thu, 26 Apr 2018 12:24:54 +0200 Subject: [PATCH] Fixed list-populate error - Fixed issue where updating a list would cause it to be empty visually on update for users --- gulpfile.js | 4 ++-- server/public/assets/js/helpers.js | 26 ++++++++++++++++++++++---- server/public/assets/js/list.js | 26 ++++++++++++++------------ server/public/assets/js/listeners.js | 6 +++--- server/public/assets/js/player.js | 2 +- 5 files changed, 42 insertions(+), 22 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 2ae8c87b..f2c7b3b6 100755 --- a/gulpfile.js +++ b/gulpfile.js @@ -5,11 +5,11 @@ var gulp = require('gulp'), gulp.task('js', function () { gulp.src(['server/VERSION.js', 'server/config/api_key.js', 'server/public/assets/js/*.js', '!server/public/assets/js/embed*', '!server/public/assets/js/token*', '!server/public/assets/js/remotecontroller.js', '!server/public/assets/js/callback.js']) - .pipe(uglify({ + /*.pipe(uglify({ mangle: true, compress: true, enclose: true - })) + }))*/ .pipe(concat('main.min.js')) .pipe(gulp.dest('server/public/assets/dist')); }); diff --git a/server/public/assets/js/helpers.js b/server/public/assets/js/helpers.js index 18a521ef..6ea7ecec 100755 --- a/server/public/assets/js/helpers.js +++ b/server/public/assets/js/helpers.js @@ -18,6 +18,14 @@ var Helper = { return arr[Math.floor(Math.random() * arr.length)]; }, + computedStyle: function(element, type) { + try { + return parseInt(window.getComputedStyle(document.querySelector(element), null).getPropertyValue(type).replace("px", "")) + } catch(e) { + return 0; + } + }, + toggleClass: function(element, className) { try { if(typeof(element) == "object") { @@ -60,7 +68,9 @@ var Helper = { } } } - }catch(e) {} + }catch(e) { + //console.log(e); + } }, css: function(element, attribute, value) { @@ -89,6 +99,7 @@ var Helper = { } } } catch(e) { + //console.log(e); } }, @@ -102,7 +113,9 @@ var Helper = { return elements[i].innerHTML; } } - } catch(e){} + } catch(e){ + //console.log(e); + } }, removeClass: function(element, className) { @@ -118,6 +131,7 @@ var Helper = { } } } catch(e) { + //console.log(e); } }, @@ -149,7 +163,9 @@ var Helper = { elements[i].remove(); } } - } catch(e) {} + } catch(e) { + //console.log(e); + } }, setHtml: function(element, html) { @@ -170,7 +186,9 @@ var Helper = { elements[i].innerHTML = html; } } - } catch(e) {} + } catch(e) { + //console.log(e); + } }, attr: function(element, attr, value) { diff --git a/server/public/assets/js/list.js b/server/public/assets/js/list.js index 16220e14..5c1f8829 100755 --- a/server/public/assets/js/list.js +++ b/server/public/assets/js/list.js @@ -2,8 +2,8 @@ var List = { empty: false, page: 0, - can_fit: document.querySelectorAll("#wrapper").length > 0 ? Math.round(parseInt(window.getComputedStyle(document.querySelector("#wrapper"), null).getPropertyValue("height").replace("px", "")) / 71) : 0, - element_height: document.querySelectorAll("#wrapper").length > 0 ? (parseInt(window.getComputedStyle(document.querySelector("#wrapper"), null).getPropertyValue("height").replace("px", "")) / Math.round(parseInt(window.getComputedStyle(document.querySelector("#wrapper"), null).getPropertyValue("height").replace("px", "")) / 71)) - 25 : 0, + can_fit: document.querySelectorAll("#wrapper").length > 0 ? Math.round(Helper.computedStyle("#wrapper", "height") / 71) : 0, + element_height: document.querySelectorAll("#wrapper").length > 0 ? (Helper.computedStyle("#wrapper", "height") / Math.round(Helper.computedStyle("#wrapper", "height") / 71)) - 25 : 0, uris: [], not_found: [], num_songs: 0, @@ -153,24 +153,25 @@ var List = { populate_list: function(msg, no_reset) { // This math is fucked and I don't know how it works. Should be fixed sometime if(!Helper.mobilecheck() && !embed && !client){ - List.can_fit = Math.round((document.querySelector("#wrapper").offsetHeight) / 71); - List.element_height = ((document.querySelector("#wrapper").offsetHeight) / List.can_fit)-5.3; + List.can_fit = Math.round(Helper.computedStyle("#wrapper", "height") / 71); + List.element_height = (Helper.computedStyle("#wrapper", "height") / List.can_fit)-5.3; } else if(embed) { - List.can_fit = Math.round((document.querySelector("#wrapper").offsetHeight) / 91) + 1; - List.element_height = ((document.querySelector("#wrapper").offsetHeight) / List.can_fit)-4; + List.can_fit = Math.round(Helper.computedStyle("#wrapper", "height") / 91) + 1; + List.element_height = (Helper.computedStyle("#wrapper", "height") / List.can_fit)-4; } else if(!client){ - List.can_fit = Math.round((window.innerHeight - parseInt(window.getComputedStyle(document.querySelector(".tabs"), null).getPropertyValue("height").replace("px", "")) - parseInt(window.getComputedStyle(document.querySelector("header"), null).getPropertyValue("height").replace("px", "")) - 64 - 40) / 71)+1; - List.element_height = ((window.innerHeight - parseInt(window.getComputedStyle(document.querySelector(".tabs"), null).getPropertyValue("height").replace("px", "")) - parseInt(window.getComputedStyle(document.querySelector("header"), null).getPropertyValue("height").replace("px", "")) - 64 - 40) / List.can_fit)-5; + List.can_fit = Math.round((Helper.computedStyle(".tabs", "height") - Helper.computedStyle("header", "height") - 64 - 40) / 71)+1; + List.element_height = ((window.innerHeight - Helper.computedStyle(".tabs", "height") - Helper.computedStyle("header", "height") - 64 - 40) / List.can_fit)-5; } else { - List.can_fit = Math.round((window.innerHeight - parseInt(window.getComputedStyle(document.querySelector("header"), null).getPropertyValue("height").replace("px", ""))) / 80)+1; - List.element_height = ((window.innerHeight - parseInt(window.getComputedStyle(document.querySelector("header"), null).getPropertyValue("height").replace("px", ""))) / List.can_fit) - 8; + List.can_fit = Math.round(window.innerHeight - Helper.computedStyle("header", "height") / 80)+1; + List.element_height = (window.innerHeight - Helper.computedStyle("header", "height") / List.can_fit) - 8; } if(List.element_height < 55.2 && !client){ List.can_fit = List.can_fit - 1; List.element_height = 55.2; - List.can_fit = Math.round((window.innerHeight - parseInt(window.getComputedStyle(document.querySelector(".tabs"), null).getPropertyValue("height").replace("px", "")) - parseInt(window.getComputedStyle(document.querySelector("header"), null).getPropertyValue("height").replace("px", "")) - 64 - 40) / 71); - List.element_height = ((window.innerHeight - parseInt(window.getComputedStyle(document.querySelector(".tabs"), null).getPropertyValue("height").replace("px", "")) - parseInt(window.getComputedStyle(document.querySelector("header"), null).getPropertyValue("height").replace("px", "")) - 64 - 40) / List.can_fit)-5; + List.can_fit = Math.round((window.innerHeight - Helper.computedStyle(".tabs", "height") - Helper.computedStyle("header", "height") - 64 - 40) / 71); + List.element_height = ((window.innerHeight - Helper.computedStyle(".tabs", "height") - Helper.computedStyle("header", "height") - 64 - 40) / List.can_fit)-5; } + console.log(List.can_fit, List.element_height, List.page); if(list_html === undefined) list_html = Helper.html("#list-song-html"); full_playlist = msg; if(offline && !no_reset){ @@ -314,6 +315,7 @@ var List = { } } else { if(way==-10) { + console.log(wrapperChildren, List.page, List.can_fit); Helper.css(wrapperChildren.slice(List.page, List.page + List.can_fit), "display", "none"); List.page = 0; Helper.css(wrapperChildren.slice(List.page, List.page + List.can_fit), "display", "inline-flex"); diff --git a/server/public/assets/js/listeners.js b/server/public/assets/js/listeners.js index 16878efc..5e7bb633 100755 --- a/server/public/assets/js/listeners.js +++ b/server/public/assets/js/listeners.js @@ -1218,7 +1218,7 @@ window.addEventListener("focus", function(event) { window.addEventListener("resize", function(){ if(chan && !Helper.mobilecheck()){ - var temp_fit = Math.round((window.getComputedStyle(document.querySelector("#wrapper"), null).getPropertyValue("height")) / 71)+1; + 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); } @@ -1228,10 +1228,10 @@ window.addEventListener("resize", function(){ Helper.css(document.querySelector("#wrapper").children[List.page + temp_fit], "display", "none"); } List.can_fit = temp_fit; - List.element_height = ((window.getComputedStyle(document.querySelector("#wrapper"), null).getPropertyValue("height")) / List.can_fit)-5.3; + 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(); - var controlsPosition = document.querySelector("#controls").offsetHeight - window.getComputedStyle(document.querySelector("#controls"), null).getPropertyValue("height"); + 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) { diff --git a/server/public/assets/js/player.js b/server/public/assets/js/player.js index 6d71761b..d2af7837 100755 --- a/server/public/assets/js/player.js +++ b/server/public/assets/js/player.js @@ -649,7 +649,7 @@ var Player = { document.getElementsByClassName("video-container")[0].style.width = val + "px"; if(!Helper.mobilecheck()) { if(window.innerWidth > 769) { - var test_against_width = window.innerWidth - window.getComputedStyle(document.querySelector(".control-list"), null).getPropertyValue("width") - document.querySelector(".zbrand").offsetWidth - document.querySelector(".brand-logo-navigate").offsetWidth - 66; + var test_against_width = window.innerWidth - Helper.computedStyle(".control-list", "width") - document.querySelector(".zbrand").offsetWidth - document.querySelector(".brand-logo-navigate").offsetWidth - 66; title_width = test_against_width; document.querySelector(".title-container").style.width = title_width + "px"; } else {