From c86372b0fc776f529c298bd45d13ecae5588d5b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?= Date: Tue, 7 Nov 2017 14:54:44 +0100 Subject: [PATCH] Fixed issue with volumeslider being messed up on windowresize --- server/public/assets/js/listeners.js | 327 +++++++++++----------- server/public/assets/js/playercontrols.js | 8 +- 2 files changed, 169 insertions(+), 166 deletions(-) diff --git a/server/public/assets/js/listeners.js b/server/public/assets/js/listeners.js index 8633e2aa..53b31a35 100755 --- a/server/public/assets/js/listeners.js +++ b/server/public/assets/js/listeners.js @@ -11,6 +11,7 @@ var time_regex = /P((([0-9]*\.?[0-9]*)Y)?(([0-9]*\.?[0-9]*)M)?(([0-9]* var conf = []; var private_channel = false; var music = 0; +var slider_type = "horizontal"; var gotten_np = false; var frontpage = 1; var empty_clear = false; @@ -335,183 +336,173 @@ function init(){ tooltip: "Search" }); - /*$("#prev").tooltip({ - delay: 5, - position: "bottom", - tooltip: "Previous", + + $("#shuffle").tooltip({ + delay: 5, + position: "bottom", + tooltip: "Shuffle", + }); + + $("#settings").tooltip({ + delay: 5, + position: "bottom", + tooltip: "Settings", + }); + } + + window.onYouTubeIframeAPIReady = Player.onYouTubeIframeAPIReady; + if(Player.player === "" || Player.player === undefined || Helper.mobilecheck()) Player.loadPlayer(); + //} + + if(Helper.mobilecheck()) { + Mobile_remote.initiate_volume(); + } else { + $('input#chan_description').characterCounter(); + window_width_volume_slider(); + } + + setup_admin_listener(); + setup_list_listener(); + setup_chat_listener(); + + socket.emit("get_history", {channel: chan.toLowerCase(), all: false}); + socket.emit("get_history", {channel: chan.toLowerCase(), all: true}); + + if(!Helper.mobilecheck() && $("#alreadychannel").length === 0) setup_host_initialization(); + + if(!Helper.msieversion() && !Helper.mobilecheck()) Notification.requestPermission(); + + $(".search_input").focus(); + + Helper.sample(); + if(!Helper.mobilecheck()) { + $('.castButton').tooltip({ + delay: 5, + position: "top", + tooltip: "Cast Zoff to TV" + }); + + $("#color_embed").spectrum({ + color: "#808080", + change: function(c) { + color = c.toHexString().substring(1); // #ff0000 + $("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height, color)); + }, + appendTo: "#embed", + containerClassName: 'polyfill-color z-depth-4', + show: function(color) { + }, + }); + + $(".sp-choose").addClass("hide"); + $(".sp-cancel").addClass("btn-flat waves-effect waves-red"); + $(".sp-cancel").removeClass("sp-cancel"); + $(".sp-button-container").append("CHOOSE"); + } + + $(".sp-choose-link").on("click", function(e) { + e.preventDefault(); + $(".sp-choose").trigger("click"); }); - $("#skip").tooltip({ - delay: 5, - position: "bottom", - tooltip: "Skip", -});*/ + $("#results" ).hover( function() { $("div.result").removeClass("hoverResults"); i = 0; }, function(){ }); + $("#search").focus(); + $("#embed-button").css("display", "inline-block"); + $("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height, color)); + $("#search").attr("placeholder", "Find song on YouTube..."); -$("#shuffle").tooltip({ - delay: 5, - position: "bottom", - tooltip: "Shuffle", -}); + if(!$("footer").hasClass("padding-bottom-novideo")) { + $("footer").addClass("padding-bottom-novideo"); + } -$("#settings").tooltip({ - delay: 5, - position: "bottom", - tooltip: "Settings", -}); -} + if(!/chrom(e|ium)/.test(navigator.userAgent.toLowerCase()) && !Helper.mobilecheck()){ + $(".castButton").css("display", "none"); + } -window.onYouTubeIframeAPIReady = Player.onYouTubeIframeAPIReady; -if(Player.player === "" || Player.player === undefined || Helper.mobilecheck()) Player.loadPlayer(); -//} + Helper.log("chromecastAvailable" + chromecastAvailable); + Helper.log("chromecastAvailable" + chromecastReady); -if(Helper.mobilecheck()) { - Mobile_remote.initiate_volume(); -} else { - $('input#chan_description').characterCounter(); -} - -setup_admin_listener(); -setup_list_listener(); -setup_chat_listener(); - -socket.emit("get_history", {channel: chan.toLowerCase(), all: false}); -socket.emit("get_history", {channel: chan.toLowerCase(), all: true}); - -if(!Helper.mobilecheck() && $("#alreadychannel").length === 0) setup_host_initialization(); - -if(!Helper.msieversion() && !Helper.mobilecheck()) Notification.requestPermission(); - -$(".search_input").focus(); - -Helper.sample(); -if(!Helper.mobilecheck()) { - $('.castButton').tooltip({ - delay: 5, - position: "top", - tooltip: "Cast Zoff to TV" - }); - - $("#color_embed").spectrum({ - color: "#808080", - change: function(c) { - color = c.toHexString().substring(1); // #ff0000 - $("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height, color)); - }, - appendTo: "#embed", - containerClassName: 'polyfill-color z-depth-4', - show: function(color) { - }, - }); - - $(".sp-choose").addClass("hide"); - $(".sp-cancel").addClass("btn-flat waves-effect waves-red"); - $(".sp-cancel").removeClass("sp-cancel"); - $(".sp-button-container").append("CHOOSE"); -} - -$(".sp-choose-link").on("click", function(e) { - e.preventDefault(); - $(".sp-choose").trigger("click"); -}); - -$("#results" ).hover( function() { $("div.result").removeClass("hoverResults"); i = 0; }, function(){ }); -$("#search").focus(); -$("#embed-button").css("display", "inline-block"); -$("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height, color)); -$("#search").attr("placeholder", "Find song on YouTube..."); - -if(!$("footer").hasClass("padding-bottom-novideo")) { - $("footer").addClass("padding-bottom-novideo"); -} - -if(!/chrom(e|ium)/.test(navigator.userAgent.toLowerCase()) && !Helper.mobilecheck()){ - $(".castButton").css("display", "none"); -} - -Helper.log("chromecastAvailable" + chromecastAvailable); -Helper.log("chromecastAvailable" + chromecastReady); - -if(chromecastAvailable){ - hide_native(1); -} else if(chromecastReady) { - initializeCastApi(); -} else { - window['__onGCastApiAvailable'] = function(loaded, errorInfo) { - if (loaded) { - setTimeout(function(){ + if(chromecastAvailable){ + hide_native(1); + } else if(chromecastReady) { + initializeCastApi(); + } else { + window['__onGCastApiAvailable'] = function(loaded, errorInfo) { + if (loaded) { + setTimeout(function(){ + chromecastReady = true; + initializeCastApi(); + }, 1000); + } else { chromecastReady = true; - initializeCastApi(); - }, 1000); - } else { - chromecastReady = true; + } } } -} -$.contextMenu({ - selector: '.playlist-element', - reposition: true, - autoHide: true, - items: { - copy: { - name: "Copy link", - callback: function(key, opt){ - var this_id = $(this[0]).attr("data-video-id"); - var this_url = "https://www.youtube.com/watch?v=" + this_id; - $(".copy_video_id").css("display", "block"); - $(".copy_video_id").text(this_url); - var copyTextarea = document.querySelector('.copy_video_id'); - copyTextarea.select(); - var successful = document.execCommand('copy'); - if(successful) { - Materialize.toast("Copied!", 2000, "green lighten"); - } else { - Materialize.toast("Error copying..", 2000, "red lighten"); + $.contextMenu({ + selector: '.playlist-element', + reposition: true, + autoHide: true, + items: { + copy: { + name: "Copy link", + callback: function(key, opt){ + var this_id = $(this[0]).attr("data-video-id"); + var this_url = "https://www.youtube.com/watch?v=" + this_id; + $(".copy_video_id").css("display", "block"); + $(".copy_video_id").text(this_url); + var copyTextarea = document.querySelector('.copy_video_id'); + copyTextarea.select(); + var successful = document.execCommand('copy'); + if(successful) { + Materialize.toast("Copied!", 2000, "green lighten"); + } else { + Materialize.toast("Error copying..", 2000, "red lighten"); + } + $(".copy_video_id").css("display", "none"); } - $(".copy_video_id").css("display", "none"); - } - }, - similar: { - name: "Find Similar", - callback: function(key, opt) { - var this_id = $(this[0]).attr("data-video-id"); - Search.search(this_id, false, true); - if(Helper.contains($(".search-container").attr("class").split(" "), "hide")) { - Search.showSearch(); + }, + similar: { + name: "Find Similar", + callback: function(key, opt) { + var this_id = $(this[0]).attr("data-video-id"); + Search.search(this_id, false, true); + if(Helper.contains($(".search-container").attr("class").split(" "), "hide")) { + Search.showSearch(); + } } - } - }, - "sep1": "---------", - delete: { - name: "Delete", - callback: function(key, opt) { - var this_id = $(this[0]).attr("data-video-id"); - var this_type = $(this[0]).attr("data-video-type"); + }, + "sep1": "---------", + delete: { + name: "Delete", + callback: function(key, opt) { + var this_id = $(this[0]).attr("data-video-id"); + var this_type = $(this[0]).attr("data-video-type"); - if(this_type == "suggested") { - number_suggested = number_suggested - 1; - if(number_suggested < 0) number_suggested = 0; + if(this_type == "suggested") { + number_suggested = number_suggested - 1; + if(number_suggested < 0) number_suggested = 0; - var to_display = number_suggested > 9 ? "9+" : number_suggested; - if(!$(".suggested-link span.badge.new.white").hasClass("hide") && to_display == 0){ - $(".suggested-link span.badge.new.white").addClass("hide"); + var to_display = number_suggested > 9 ? "9+" : number_suggested; + if(!$(".suggested-link span.badge.new.white").hasClass("hide") && to_display == 0){ + $(".suggested-link span.badge.new.white").addClass("hide"); + } + + $(".suggested-link span.badge.new.white").text(to_display); } - $(".suggested-link span.badge.new.white").text(to_display); + List.vote(this_id, "del"); + }, + disabled: function(key, opt) { + return w_p; } - - List.vote(this_id, "del"); - }, - disabled: function(key, opt) { - return w_p; } } - } -}); + }); -if(!Helper.mobilecheck() && navigator.userAgent.match(/iPad/i) == null){ - setTimeout(function(){set_title_width();}, 100); -} + if(!Helper.mobilecheck() && navigator.userAgent.match(/iPad/i) == null){ + setTimeout(function(){set_title_width();}, 100); + } } initializeCastApi = function() { @@ -1041,10 +1032,10 @@ $(document).on("click", ".accept-delete", function(e) { e.preventDefault(); /*var delete_id = $(this).attr("data-video-id"); if(delete_id) { - List.vote(delete_id, 'del'); - }*/ - socket.emit("delete_all", {channel: chan.toLowerCase(), adminpass: adminpass == "" ? "" : Crypt.crypt_pass(adminpass), pass: embed ? '' : Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()))}); - $("#delete_song_alert").modal("close"); + List.vote(delete_id, 'del'); +}*/ +socket.emit("delete_all", {channel: chan.toLowerCase(), adminpass: adminpass == "" ? "" : Crypt.crypt_pass(adminpass), pass: embed ? '' : Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()))}); +$("#delete_song_alert").modal("close"); }); $(document).keyup(function(event) { @@ -1689,8 +1680,20 @@ $(window).resize(function(){ set_title_width(); if($("#controls").length > 0 && !Helper.mobilecheck()) $("#seekToDuration").css("top", $("#controls").position().top - 55); else if($("#controls").length > 0) $("#seekToDuration").css("top", $("#controls").position().top - 20); + + window_width_volume_slider(); } -}) +}); + +function window_width_volume_slider() { + if(window.innerWidth <= 600 && slider_type == "horizontal") { + Playercontrols.initSlider(true); + slider_type = "vertical"; + } else if(window.innerWidth > 600 && slider_type == "vertical") { + Playercontrols.initSlider(); + slider_type = "horizontal"; + } +} $(document).on( "click", ".result-object", function(e){ var $html = $(e.target); diff --git a/server/public/assets/js/playercontrols.js b/server/public/assets/js/playercontrols.js index a0d62a87..1f3a9911 100755 --- a/server/public/assets/js/playercontrols.js +++ b/server/public/assets/js/playercontrols.js @@ -17,9 +17,10 @@ var Playercontrols = { $("#fullscreen").on("click", Playercontrols.fullscreen); }, - initSlider: function() { + initSlider: function(vertical) { try { vol = (Crypt.get_volume()); + $("#volume").slider( "destroy" ); } catch(e){} var slider_values = { min: 0, @@ -28,12 +29,11 @@ var Playercontrols = { range: "min", animate: true, slide: function(event, ui) { - Playercontrols.setVolume(ui.value); try{Crypt.set_volume(ui.value);}catch(e){} } }; - if(Helper.mobilecheck()) { + if(Helper.mobilecheck() || vertical) { slider_values.orientation = "vertical"; $(".volume-container").toggleClass("hide"); } @@ -109,7 +109,7 @@ var Playercontrols = { }, mute_video: function() { - if(Helper.mobilecheck()) { + if(Helper.mobilecheck() || slider_type == "vertical") { $(".volume-container").toggleClass("hide"); } else { if(!Player.player.isMuted()) {