Removing more dependencies

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'));
 });

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{

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

server/public/assets/js/channel.js

@@ -416,65 +416,22 @@ var Channel = {
     },
 
     add_context_menu: function() {
-        $.contextMenu({
+        $(document).on("contextmenu", ".vote-container", function(e) {
-            selector: '.playlist-element',
+            e.preventDefault();
-            reposition: true,
+            var that = this;
-            autoHide: true,
+            contextListener(that, e);
-            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");
 
-                        if(this_type == "suggested") {
+        $(document).on("contextmenu", ".add-suggested", function(e) {
-                            number_suggested = number_suggested - 1;
+            e.preventDefault();
-                            if(number_suggested < 0) number_suggested = 0;
+            var that = this;
+            contextListener(that, e);
+        });
 
-                            var to_display = number_suggested > 9 ? "9+" : number_suggested;
+        $(document).on("click", ".list-remove", function(e) {
-                            if(!$(".suggested-link span.badge.new.white").hasClass("hide") && to_display == 0){
+            e.preventDefault();
-                                $(".suggested-link span.badge.new.white").addClass("hide");
+            var that = this;
-                            }
+            contextListener(that, e);
-
-                            $(".suggested-link span.badge.new.white").text(to_display);
-                        }
-
-                        List.vote(this_id, "del");
-                    },
-                    disabled: function(key, opt) {
-                        return w_p;
-                    }
-                }
-            }
         });
     },
 
@@ -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();

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 = "";*/

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;

server/public/layouts/client/channel.handlebars

@@ -15,3 +15,17 @@
         </div>-->
     </main>
 </div>
+<ul class="context-menu-list context-menu-root hide">
+    <li class="context-menu-item copy-context-menu">
+        <span>Copy link</span>
+    </li>
+    <li class="context-menu-item find-context-menu">
+        <span>Find Similar</span>
+    </li>
+    <li class="context-menu-item context-menu-separator context-menu-not-selectable">
+    </li>
+    <li class="context-menu-item delete-context-menu context-menu-disabled">
+        <span>Delete</span>
+    </li>
+</ul>
+<div id="context-menu-overlay" class="hide"></div>

server/public/layouts/client/main.handlebars

@@ -26,7 +26,6 @@
         <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
         {{#if embed}}
         {{else}}
-            <link type="text/css" rel="stylesheet" href="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.css" />
             <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css">
             <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
             <link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32x32.png">
@@ -43,8 +42,6 @@
         {{#if embed}}
         {{else}}
             <script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
-            <script type="text/javascript" src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js"></script>
-            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
             <script async type="text/javascript">
                 if(window.location.hostname != "localhost") {
                     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){