Merge pull request #375 from zoff-music/fix/listeners-out

Trying some performance-enhancing stuff

server/public/assets/js/listeners.js

@@ -203,6 +203,7 @@ window.zoff = {
 }*/
 
 window.addEventListener("DOMContentLoaded", function() {
+    addDynamicListeners();
     if(!localStorage.getItem("VERSION") || parseInt(localStorage.getItem("VERSION")) != VERSION) {
         localStorage.setItem("VERSION", VERSION);
     }
@@ -428,6 +429,7 @@ initializeCastApi = function() {
     }
 };
 
+function addDynamicListeners() {
     addListener("click", "#player_overlay", function(event) {
         if(chromecastAvailable) {
             Player.playPauseVideo();
@@ -654,189 +656,6 @@ addListener("click", "#closePlayer", function(event){
         Helper.removeElement("#closePlayer");
     });
 
-document.addEventListener("keydown", function(event) {
-    if(window.location.pathname != "/"){
-        if(event.keyCode == 91 || event.keyCode == 17){
-            find_start = true;
-        } else if(find_start && event.keyCode == 70){
-            find_start = false;
-            find_started = !find_started;
-            event.preventDefault();
-            if(find_started){
-                Helper.toggleClass("#find_div", "hide");
-                document.getElementById("find_input").focus();
-                find_word = "";
-            } else {
-                Helper.toggleClass("#find_div", "hide");
-                document.getElementById("find_input").value = "";
-                document.getElementById("find_input").blur();
-                Helper.removeClass(".highlight", "highlight");
-                found_array = [];
-                found_array_index = 0;
-                find_word = "";
-            }
-        } else if(event.keyCode == 32 && document.querySelector(".search-container").classList.contains("hide") && window.location.pathname != "/" &&
-        document.querySelector("#text-chat-input") != document.activeElement &&
-        document.querySelector("#password") != document.activeElement &&
-        document.querySelector("#user-pass-input") != document.activeElement &&
-        document.querySelector("#chan_thumbnail") != document.activeElement &&
-        document.querySelector("#chan_description") != document.activeElement &&
-        document.querySelector("#contact-form-from") != document.activeElement &&
-        document.querySelector("#contact-form-message") != document.activeElement &&
-        document.querySelector("#remote_channel") != document.activeElement &&
-        document.querySelector("#import") != document.activeElement &&
-        document.querySelector("#find_input") != document.activeElement &&
-        document.querySelector("#import_spotify") != document.activeElement) {
-            if(chromecastAvailable) {
-                event.preventDefault();
-                Player.playPauseVideo();
-                return false;
-            } else {
-                if(videoSource == "soundcloud") {
-                    event.preventDefault();
-                    Playercontrols.play_pause();
-                    return false;
-                }
-                if(Player.player.getPlayerState() == 1) {
-                    event.preventDefault();
-                    Player.player.pauseVideo();
-                    return false;
-                } else if(Player.player.getPlayerState() == 2 || Player.player.getPlayerState() == 5) {
-                    event.preventDefault();
-                    Player.player.playVideo();
-                    return false;
-                }
-            }
-        } else {
-            find_start = false;
-        }
-    }
-}, false);
-
-document.addEventListener("keyup", function(event) {
-    _kT += event.keyCode;
-    if(_kWay.substring(0, _kT.length) == _kT) {
-        if(_kWay == _kT && !_kDone) {
-            _kDone = true;
-            document.getElementById("main-container").style.transition = "transform .5s, filter .5s";
-            setTimeout(function() {
-                document.getElementById("main-container").style.transform = "rotate(180deg)";
-                document.getElementById("main-container").style.filter = "invert(100%)";
-            }, 10);
-            _kT = "";
-            for(var i = 0; i < 20; i++) {
-                var c = "green";
-                if(i%2 == 0) c = "red"
-                M.toast({ html: "Congratulations!", displayLength: 4000, classes: c});
-            }
-        } else if(_kWay == _kT && _kDone){
-            _kDone = false;
-            document.getElementById("main-container").style.filter = "invert(0%)";
-            document.getElementById("main-container").style.transform = "rotate(0deg)";
-            _kT = "";
-        }
-    } else {
-        _kT = "";
-    }
-    if(event.keyCode == 27 && window.location.path != "/"){
-        //$("#results").html("");
-        Helper.addClass("#search-wrapper", "hide");
-        Helper.removeClass(".song-title", "hide");
-        if(document.querySelector("#search-btn i").innerText == "close")
-        {
-            /*$("#results").slideUp({
-                complete: function() {
-                    $("#results").empty();
-                }
-            });*/
-            document.querySelector("#results").innerHTML = "";
-            document.querySelector("#results_soundcloud").innerHTML = "";
-            document.getElementsByTagName("body")[0].setAttribute("style", "overflow-y:auto")
-            document.querySelector("#search-btn i").innerText = "search";
-            document.querySelector(".search_input").value  = "";
-        }
-        if(find_started) {
-            Helper.toggleClass("#find_div", "hide");
-            document.getElementById("find_input").value = "";
-            document.getElementById("find_input").blur();
-            Helper.removeClass(".highlight", "highlight");
-            found_array = [];
-            found_array_index = 0;
-            find_word = "";
-            find_start = false;
-            find_started = false;
-        }
-        if(document.querySelectorAll(".search-container").length != 0 && !document.querySelector(".search-container").classList.contains("hide")){
-            Helper.toggleClass("#results", "hide");
-        }
-    } else if(event.keyCode == 13 && window.location.path != "/" && document.querySelectorAll("#search").length > 0 && document.querySelector("#search").value == "fireplace" && !document.querySelector(".search-container").classList.contains("hide") && window.location.pathname != "/") {
-        clearTimeout(timeout_search);
-        Helper.setHtml("#results", "");
-        document.querySelector("#search").value = "";
-        Helper.addClass("#search-wrapper", "hide");
-        Helper.removeClass("#song-title", "hide");
-        document.querySelector("#search-btn i").innerText = "search";
-        Helper.css(".search_results", "display", "none");
-        if(fireplace_initiated) {
-            fireplace_initiated = false;
-            Player.fireplace.destroy();
-            Helper.css("#fireplace_player", "display", "none");
-        } else {
-            fireplace_initiated = true;
-            Helper.css("#fireplace_player", "display", "block");
-            Player.createFireplacePlayer();
-        }
-    } else if((event.keyCode == 91 || event.keyCode == 17) && !find_started){
-        find_start = false;
-    }
-    if(event.target.classList.contains("search_input")) {
-        searchTimeout(event);
-    }
-}, false);
-
-document.addEventListener("click", function(event) {
-    handleEvent(event, event.target, false, "click");
-}, true);
-
-document.addEventListener("mouseleave", function(event) {
-    if(event.target.className == "card sticky-action") {
-        var that = event.target;
-        if(that.querySelector(".card-reveal") == null) return;
-        that.querySelector(".card-reveal").setAttribute("style", "display: block;transform: translateY(0%);");
-        clearTimeout(image_timeout);
-        image_timeout = setTimeout(function(){
-            that.querySelector(".card-reveal").setAttribute("style", "display: none;");
-        }, 100);
-    }
-}, true);
-
-document.addEventListener("mouseenter", function(event) {
-    if(event.target.className == "card sticky-action") {
-        var that = event.target;
-        if(that.querySelector(".card-reveal") == null) return;
-        that.querySelector(".card-reveal").setAttribute("style", "display: block;");
-        clearTimeout(image_timeout);
-        image_timeout = setTimeout(function(){
-            that.querySelector(".card-reveal").setAttribute("style", "display: block;transform: translateY(-100%);");
-        }, 50);
-    }
-}, true);
-
-document.addEventListener("contextmenu", function(event) {
-    handleEvent(event, event.target, false, "contextmenu");
-}, true);
-
-document.addEventListener("input", function(event) {
-    handleEvent(event, event.target, false, "input");
-}, true);
-
-document.addEventListener("change", function(event) {
-    handleEvent(event, event.target, false, "change");
-}, true);
-
-document.addEventListener("submit", function(event) {
-    handleEvent(event, event.target, false, "submit");
-}, true);
 
     addListener("change", "#width_embed", function(event) {
         var that = this.target;
@@ -1369,15 +1188,6 @@ addListener("click", "#closeSettings", function(event)
     });
 
 
-window.addEventListener("focus", function(event) {
-    document.getElementById("favicon").setAttribute("href", "/assets/images/favicon.png");
-    unseen = false;
-});
-
-window.addEventListener("resize", function(){
-    resizeFunction();
-});
-
     addListener("click", ".result-object", function(e){
         var html  = this.target;
         var substr = this.target.outerHTML.substring(0,4);
@@ -1703,3 +1513,197 @@ addListener("submit", "#find_form", function(event){
             Helper.log(["none found"]);
         }
     });
+
+    document.addEventListener("keydown", function(event) {
+        if(window.location.pathname != "/"){
+            if(event.keyCode == 91 || event.keyCode == 17){
+                find_start = true;
+            } else if(find_start && event.keyCode == 70){
+                find_start = false;
+                find_started = !find_started;
+                event.preventDefault();
+                if(find_started){
+                    Helper.toggleClass("#find_div", "hide");
+                    document.getElementById("find_input").focus();
+                    find_word = "";
+                } else {
+                    Helper.toggleClass("#find_div", "hide");
+                    document.getElementById("find_input").value = "";
+                    document.getElementById("find_input").blur();
+                    Helper.removeClass(".highlight", "highlight");
+                    found_array = [];
+                    found_array_index = 0;
+                    find_word = "";
+                }
+            } else if(event.keyCode == 32 && document.querySelector(".search-container").classList.contains("hide") && window.location.pathname != "/" &&
+            document.querySelector("#text-chat-input") != document.activeElement &&
+            document.querySelector("#password") != document.activeElement &&
+            document.querySelector("#user-pass-input") != document.activeElement &&
+            document.querySelector("#chan_thumbnail") != document.activeElement &&
+            document.querySelector("#chan_description") != document.activeElement &&
+            document.querySelector("#contact-form-from") != document.activeElement &&
+            document.querySelector("#contact-form-message") != document.activeElement &&
+            document.querySelector("#remote_channel") != document.activeElement &&
+            document.querySelector("#import") != document.activeElement &&
+            document.querySelector("#find_input") != document.activeElement &&
+            document.querySelector("#import_spotify") != document.activeElement) {
+                if(chromecastAvailable) {
+                    event.preventDefault();
+                    Player.playPauseVideo();
+                    return false;
+                } else {
+                    if(videoSource == "soundcloud") {
+                        event.preventDefault();
+                        Playercontrols.play_pause();
+                        return false;
+                    }
+                    if(Player.player.getPlayerState() == 1) {
+                        event.preventDefault();
+                        Player.player.pauseVideo();
+                        return false;
+                    } else if(Player.player.getPlayerState() == 2 || Player.player.getPlayerState() == 5) {
+                        event.preventDefault();
+                        Player.player.playVideo();
+                        return false;
+                    }
+                }
+            } else {
+                find_start = false;
+            }
+        }
+    }, false);
+
+    document.addEventListener("keyup", function(event) {
+        _kT += event.keyCode;
+        if(_kWay.substring(0, _kT.length) == _kT) {
+            if(_kWay == _kT && !_kDone) {
+                _kDone = true;
+                document.getElementById("main-container").style.transition = "transform .5s, filter .5s";
+                setTimeout(function() {
+                    document.getElementById("main-container").style.transform = "rotate(180deg)";
+                    document.getElementById("main-container").style.filter = "invert(100%)";
+                }, 10);
+                _kT = "";
+                for(var i = 0; i < 20; i++) {
+                    var c = "green";
+                    if(i%2 == 0) c = "red"
+                    M.toast({ html: "Congratulations!", displayLength: 4000, classes: c});
+                }
+            } else if(_kWay == _kT && _kDone){
+                _kDone = false;
+                document.getElementById("main-container").style.filter = "invert(0%)";
+                document.getElementById("main-container").style.transform = "rotate(0deg)";
+                _kT = "";
+            }
+        } else {
+            _kT = "";
+        }
+        if(event.keyCode == 27 && window.location.path != "/"){
+            //$("#results").html("");
+            Helper.addClass("#search-wrapper", "hide");
+            Helper.removeClass(".song-title", "hide");
+            if(document.querySelector("#search-btn i").innerText == "close")
+            {
+                /*$("#results").slideUp({
+                    complete: function() {
+                        $("#results").empty();
+                    }
+                });*/
+                document.querySelector("#results").innerHTML = "";
+                document.querySelector("#results_soundcloud").innerHTML = "";
+                document.getElementsByTagName("body")[0].setAttribute("style", "overflow-y:auto")
+                document.querySelector("#search-btn i").innerText = "search";
+                document.querySelector(".search_input").value  = "";
+            }
+            if(find_started) {
+                Helper.toggleClass("#find_div", "hide");
+                document.getElementById("find_input").value = "";
+                document.getElementById("find_input").blur();
+                Helper.removeClass(".highlight", "highlight");
+                found_array = [];
+                found_array_index = 0;
+                find_word = "";
+                find_start = false;
+                find_started = false;
+            }
+            if(document.querySelectorAll(".search-container").length != 0 && !document.querySelector(".search-container").classList.contains("hide")){
+                Helper.toggleClass("#results", "hide");
+            }
+        } else if(event.keyCode == 13 && window.location.path != "/" && document.querySelectorAll("#search").length > 0 && document.querySelector("#search").value == "fireplace" && !document.querySelector(".search-container").classList.contains("hide") && window.location.pathname != "/") {
+            clearTimeout(timeout_search);
+            Helper.setHtml("#results", "");
+            document.querySelector("#search").value = "";
+            Helper.addClass("#search-wrapper", "hide");
+            Helper.removeClass("#song-title", "hide");
+            document.querySelector("#search-btn i").innerText = "search";
+            Helper.css(".search_results", "display", "none");
+            if(fireplace_initiated) {
+                fireplace_initiated = false;
+                Player.fireplace.destroy();
+                Helper.css("#fireplace_player", "display", "none");
+            } else {
+                fireplace_initiated = true;
+                Helper.css("#fireplace_player", "display", "block");
+                Player.createFireplacePlayer();
+            }
+        } else if((event.keyCode == 91 || event.keyCode == 17) && !find_started){
+            find_start = false;
+        }
+        if(event.target.classList.contains("search_input")) {
+            searchTimeout(event);
+        }
+    }, false);
+
+    document.addEventListener("click", function(event) {
+        handleEvent(event, event.target, false, "click");
+    }, true);
+
+    document.addEventListener("mouseleave", function(event) {
+        if(event.target.className == "card sticky-action") {
+            var that = event.target;
+            if(that.querySelector(".card-reveal") == null) return;
+            that.querySelector(".card-reveal").setAttribute("style", "display: block;transform: translateY(0%);");
+            clearTimeout(image_timeout);
+            image_timeout = setTimeout(function(){
+                that.querySelector(".card-reveal").setAttribute("style", "display: none;");
+            }, 100);
+        }
+    }, true);
+
+    document.addEventListener("mouseenter", function(event) {
+        if(event.target.className == "card sticky-action") {
+            var that = event.target;
+            if(that.querySelector(".card-reveal") == null) return;
+            that.querySelector(".card-reveal").setAttribute("style", "display: block;");
+            clearTimeout(image_timeout);
+            image_timeout = setTimeout(function(){
+                that.querySelector(".card-reveal").setAttribute("style", "display: block;transform: translateY(-100%);");
+            }, 50);
+        }
+    }, true);
+
+    document.addEventListener("contextmenu", function(event) {
+        handleEvent(event, event.target, false, "contextmenu");
+    }, true);
+
+    document.addEventListener("input", function(event) {
+        handleEvent(event, event.target, false, "input");
+    }, true);
+
+    document.addEventListener("change", function(event) {
+        handleEvent(event, event.target, false, "change");
+    }, true);
+
+    document.addEventListener("submit", function(event) {
+        handleEvent(event, event.target, false, "submit");
+    }, true);
+
+    window.addEventListener("focus", function(event) {
+        document.getElementById("favicon").setAttribute("href", "/assets/images/favicon.png");
+        unseen = false;
+    });
+
+    window.addEventListener("resize", function(){
+        resizeFunction();
+    });
+}

server/public/assets/js/player.js

@@ -870,6 +870,7 @@ var Player = {
     },
 
     onYouTubeIframeAPIReady: function() {
+        try {
             Player.player = new YT.Player('player', {
                 videoId: video_id,
                 playerVars: { rel:"0", autoplay: 1, wmode:"transparent", controls: "0" , fs: "0", iv_load_policy: "3", theme:"light", color:"white", showinfo: 0},
@@ -879,6 +880,9 @@ var Player = {
                     'onError': Player.errorHandler
                 }
             });
+        } catch(e) {
+            console.log("YouTube not quite loaded yet");
+        }
     },
 
     createFireplacePlayer: function() {