diff --git a/gulpfile.js b/gulpfile.js index af847749..84b93b8e 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/css/style.css b/server/public/assets/css/style.css index 40ef5d55..ad301995 100755 --- a/server/public/assets/css/style.css +++ b/server/public/assets/css/style.css @@ -2066,15 +2066,42 @@ nav ul li:hover, nav ul li.active { margin-right: 0 !important; } +#context-menu-overlay { + width: 100vw; + height: 100vh; + position: fixed; + top: 0px; + left: 0px; + z-index: 99999999; +} + .context-menu-list { - z-index: 99999999 !important; + position: absolute; +} + +.context-menu-list { + z-index: 999999999 !important; background: #2d2d2d; border: 1px solid #2d2d2d; + width: 200px; + border-radius: 3px; +} + +.context-menu-separator { + background: white !important; + height: 1px; + padding: 0px !important; } .context-menu-item { color:white; + padding: 5px 15px; background: #2d2d2d; + cursor: pointer; +} + +.context-menu-item:hover { + background: rgba(0,0,0,.5); } .context-menu-item.context-menu-hover { @@ -2083,6 +2110,7 @@ nav ul li:hover, nav ul li.active { .context-menu-item.context-menu-disabled { background-color: #353535 !important; + cursor: auto; } .close-settings{ diff --git a/server/public/assets/js/admin.js b/server/public/assets/js/admin.js index 018ca282..b6a0e17a 100755 --- a/server/public/assets/js/admin.js +++ b/server/public/assets/js/admin.js @@ -10,6 +10,7 @@ var Admin = { if(adminpass == undefined || adminpass == "") { //adminpass = Crypt.get_pass(chan.toLowerCase()); } + $(".delete-context-menu").removeClass("context-menu-disabled"); names = ["vote","addsongs","longsongs","frontpage", "allvideos", "removeplay", "skip", "shuffle", "userpass"]; //Crypt.set_pass(chan.toLowerCase(), Crypt.tmp_pass); @@ -144,6 +145,9 @@ var Admin = { } $("#admin-lock").removeClass("clickable"); $("#password").attr("placeholder", "Enter admin password"); + if(!$(".delete-context-menu").hasClass("context-menu-disabled")) { + $(".delete-context-menu").addClass("context-menu-disabled"); + } }, save: function(userpass) { diff --git a/server/public/assets/js/channel.js b/server/public/assets/js/channel.js index 3a30cbbf..5fccf9dc 100644 --- a/server/public/assets/js/channel.js +++ b/server/public/assets/js/channel.js @@ -416,65 +416,22 @@ var Channel = { }, add_context_menu: function() { - $.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"); - } - }, - 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"); + $(document).on("contextmenu", ".vote-container", function(e) { + e.preventDefault(); + var that = this; + contextListener(that, e); + }); - if(this_type == "suggested") { - number_suggested = number_suggested - 1; - if(number_suggested < 0) number_suggested = 0; + $(document).on("contextmenu", ".add-suggested", function(e) { + e.preventDefault(); + var that = this; + contextListener(that, e); + }); - 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); - } - - List.vote(this_id, "del"); - }, - disabled: function(key, opt) { - return w_p; - } - } - } + $(document).on("click", ".list-remove", function(e) { + e.preventDefault(); + var that = this; + contextListener(that, e); }); }, @@ -543,7 +500,7 @@ var Channel = { var channel_before_move = chan.toLowerCase(); clearTimeout(timed_remove_check); changing_to_frontpage = true; - $.contextMenu( 'destroy', ".playlist-element" ); + //$.contextMenu( 'destroy', ".playlist-element" ); user_change_password = false; clearTimeout(width_timeout); if(fireplace_initiated){ @@ -659,7 +616,7 @@ var Channel = { $(".page-footer").removeClass("padding-bottom-novideo"); $("#favicon").attr("href", "/assets/images/favicon-32x32.png"); - $(".context-menu-list").remove(); + //$(".context-menu-list").remove(); Helper.log(["Socket", socket]); if($("#alreadyfp").length == 1){ Frontpage.init(); diff --git a/server/public/assets/js/functions.js b/server/public/assets/js/functions.js index 100c0f79..e1f70fca 100644 --- a/server/public/assets/js/functions.js +++ b/server/public/assets/js/functions.js @@ -181,7 +181,6 @@ function get_list_ajax() { } }, error: function(response) { - console.log(response); if(response.responseJSON.status == 403) { start_auth(); } else if(response.responseJSON.status == 429) { @@ -195,6 +194,44 @@ function get_list_ajax() { }); } +function contextListener(that, e) { + var parent = $(that).parent(); + var suggested = false; + if(parent.attr("id").indexOf("suggested-") > -1) suggested = true; + $(".context-menu-root").attr("data-suggested", suggested); + $(".context-menu-root").attr("data-id", parent.attr("id").replace("suggested-", "")); + $("#context-menu-overlay").removeClass("hide"); + var left = e.pageX - $(".context-menu-root").width() / 2; + var top = e.pageY; + if(left + $(".context-menu-root").width() > $(window).width()) { + left = $(window).width() - $(".context-menu-root").width() - 15; + } else if (left < 0) { + left = 11; + } + if(top + $(".context-menu-root").width() > $(window).height()) { + top = $(window).height() - $(".context-menu-root").height() - 15; + } else if(top < 0) { + top = 15; + } + $(".context-menu-root").css({left: left,top:top}); + $(".context-menu-root").removeClass("hide"); + if(!Helper.mobilecheck()) { + mouseContext(left, top); + } +} + +function mouseContext(left, top) { + $(document).off("mousemove"); + $(document).mousemove(function( event ) { + if(event.pageX < left - 60 || event.pageX > left + $(".context-menu-root").width() + 60 || + event.pageY < top - 60 || event.pageY > top + $(".context-menu-root").height() + 60) { + $(".context-menu-root").addClass("hide"); + $("#context-menu-overlay").addClass("hide"); + $(document).off("mousemove"); + } + }); +} + function get_np_ajax() { /*var c = Crypt.get_userpass(chan.toLowerCase()); if(c == undefined) c = "";*/ diff --git a/server/public/assets/js/listeners.js b/server/public/assets/js/listeners.js index 200bb43b..dce6cd02 100755 --- a/server/public/assets/js/listeners.js +++ b/server/public/assets/js/listeners.js @@ -447,11 +447,6 @@ $(document).on("click", "#chat_submit", function(e){ $("#chatForm").submit(); }); -$(document).on("click", ".list-remove", function(e) { - e.preventDefault(); - $('#' + $(this).parent().attr("id")).contextMenu(); -}); - $(document).on("mouseleave", ".card.sticky-action", function(e){ var that = this; $(that).find(".card-reveal").attr("style", "display: block;transform: translateY(0%);"); @@ -524,6 +519,76 @@ $(document).on("click", ".extra-button-delete", function(e){ } }); +$(document).on("click", "#context-menu-overlay", function(e) { + $(".context-menu-root").addClass("hide"); + $("#context-menu-overlay").addClass("hide"); + $(".context-menu-root").attr("data-id", ""); +}); + +$(document).on("click", ".copy-context-menu", function(e) { + e.preventDefault(); + var that = this; + var parent = $(that).parent(); + var id = parent.attr("data-id"); + if(id != "") { + $(".copy_video_id").css("display", "block"); + $(".copy_video_id").text("https://www.youtube.com/watch?v=" + id); + 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"); + } + $(".context-menu-root").addClass("hide"); + $("#context-menu-overlay").addClass("hide"); + $(".context-menu-root").attr("data-id", ""); +}); + +$(document).on("click", ".find-context-menu", function(e) { + e.preventDefault(); + var that = this; + var parent = $(that).parent(); + var id = parent.attr("data-id"); + Search.search(id, false, true); + if(Helper.contains($(".search-container").attr("class").split(" "), "hide")) { + Search.showSearch(); + } + $(".context-menu-root").addClass("hide"); + $("#context-menu-overlay").addClass("hide"); + $(".context-menu-root").attr("data-id", ""); +}); + +$(document).on("click", ".delete-context-menu", function(e) { + var that = this; + if($(that).hasClass("context-menu-disabled")) { + return; + } + var parent = $(that).parent(); + var id = parent.attr("data-id"); + var suggested = parent.attr("data-suggested"); + + if(suggested == "true") { + 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"); + } + + $(".suggested-link span.badge.new.white").text(to_display); + } + + List.vote(id, "del"); + $(".context-menu-root").addClass("hide"); + $("#context-menu-overlay").addClass("hide"); + $(".context-menu-root").attr("data-id", ""); +}) + $(document).on("click", "#closePlayer", function(e){ e.preventDefault(); socket.emit("change_channel"); @@ -589,6 +654,10 @@ $(document).on("click", ".change_user_pass_btn", function(e) { $("#user-pass-input").focus(); }); +$(document).on("contextmenu", "#context-menu-overlay", function(e) { + e.preventDefault(); +}); + $(document).on("click", ".submit-user-password", function(e) { e.preventDefault(); if(user_auth_started) { @@ -1199,7 +1268,7 @@ $(document).on( "click", ".add-suggested", function(e){ var title = $(this).attr("data-video-title"); var length = $(this).attr("data-video-length"); var added_by = $(this).attr("data-added-by"); - Search.submit(id, title, length, false, 0, 1, 0, length); + Search.submit(id, title, parseInt(length), false, 0, 1, 0, parseInt(length)); if(added_by == "user") { number_suggested = number_suggested - 1; if(number_suggested < 0) number_suggested = 0; diff --git a/server/public/layouts/client/channel.handlebars b/server/public/layouts/client/channel.handlebars index 70f2bded..32d64138 100755 --- a/server/public/layouts/client/channel.handlebars +++ b/server/public/layouts/client/channel.handlebars @@ -15,3 +15,17 @@ --> +
+ diff --git a/server/public/layouts/client/main.handlebars b/server/public/layouts/client/main.handlebars index 7cb9996d..889b0371 100644 --- a/server/public/layouts/client/main.handlebars +++ b/server/public/layouts/client/main.handlebars @@ -26,7 +26,6 @@ {{#if embed}} {{else}} - @@ -43,8 +42,6 @@ {{#if embed}} {{else}} - -