Options menu on playlist elements

server/public/assets/css/style.css

@@ -1601,6 +1601,7 @@ nav ul li:hover, nav ul li.active {
 
 .vote-container{
   height: 100%;
+  width: 90%;
 }
 
 .vote-container:hover .list-image:after, .add-suggested:hover .list-suggested-image:after {
@@ -1715,6 +1716,20 @@ nav ul li:hover, nav ul li.active {
   padding-left: 10px;
 }
 
+.playlist-element .list-remove {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-top: -32px;
+  margin-left: 0px;
+  width: 10%;
+}
+
+.playlist-element .list-remove a {
+  color: white !important;
+  margin-right: 0px !important;
+}
+
 .list-song .card-action{
   border-top:none !important;
   background: transparent;
@@ -1782,6 +1797,10 @@ nav ul li:hover, nav ul li.active {
   background: #484848;
 }
 
+.context-menu-item.context-menu-disabled {
+  background-color: #353535 !important;
+}
+
 .close-settings{
     float: right;
     width: 73px;

server/public/assets/js/admin.js

@@ -219,10 +219,10 @@ var Admin = {
             $(".playlist-tabs").removeClass("hide");
         }
 
-        if($(".card-action").length !== 0 &&
+        /*if($(".card-action").length !== 0 &&
         !Helper.contains($(".card-action").attr("class").split(" "), "hide") && !offline){
             $(".card-action").addClass("hide");
-        }
+        }*/
 
         if($("ul.playlist-tabs-loggedIn .playlist-tab-links.active").attr("href") == "#suggestions")
         {

server/public/assets/js/list.js

@@ -860,6 +860,9 @@ var List = {
 			song.find(".card-duration").text(Helper.pad(_temp_duration[0]) + ":" + Helper.pad(_temp_duration[1]));
 		}else if(!list){
 			//song.find(".card-duration").remove();
+			song.find(".list-song").removeClass("playlist-element");
+			song.find(".more_button").addClass("hide");
+			song.find(".suggested_remove").removeClass("hide");
 			song.find(".vote-text").text("");
 			song.find(".card-duration").text(Helper.pad(_song_info.duration[0]) + ":" + Helper.pad(_song_info.duration[1]));
 			var added_by = "user";

server/public/assets/js/listeners.js

@@ -330,7 +330,7 @@ function init(){
 	}
 
 	$.contextMenu({
-			selector: '.list-song',
+			selector: '.playlist-element',
 			reposition: true,
 			autoHide: true,
 			items: {
@@ -350,6 +350,27 @@ function init(){
 										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("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("id");
+								List.vote(this_id, "del");
+						},
+						disabled: function(key, opt) {
+                return w_p;
             }
 					}
 			}
@@ -646,10 +667,10 @@ function change_offline(enabled, already_offline){
 	if(enabled){
 		if(list_html){
 			list_html = $("<div>" + list_html + "</div>");
-			list_html.find(".list-remove").removeClass("hide");
+			//list_html.find(".list-remove").removeClass("hide");
 			list_html = list_html.html();
 		}
-		$(".list-remove").removeClass("hide");
+		//$(".list-remove").removeClass("hide");
 		$("#viewers").addClass("hide");
 		$("#offline-mode").removeClass("waves-cyan");
 		$("#offline-mode").addClass("cyan");
@@ -704,15 +725,15 @@ function change_offline(enabled, already_offline){
 	} else {
 		if(list_html){
 			list_html = $("<div>" + list_html + "</div>");
-			if(hasadmin && w_p){
+			/*if(hasadmin && w_p){
-				list_html.find(".list-remove").addClass("hide");
+				//list_html.find(".list-remove").addClass("hide");
-			}
+			}*/
 			list_html = list_html.html();
 		}
 		$("#viewers").removeClass("hide");
-		if(hasadmin && w_p){
+		/*if(hasadmin && w_p){
-			$(".list-remove").addClass("hide");
+			//$(".list-remove").addClass("hide");
-		}
+		}*/
 		$("#offline-mode").addClass("waves-cyan");
 		$("#offline-mode").removeClass("cyan");
 		$("#offline-mode").tooltip({
@@ -870,7 +891,15 @@ $(document).on("mouseenter", ".card.sticky-action", function(e){
 $(document).on("click", "#chat_submit", function(e){
 	e.preventDefault();
 	$("#chatForm").submit();
-})
+});
+
+$(document).on("click", ".list-remove", function(e) {
+	e.preventDefault();
+	var parent_test = $(this).parent();
+	if(parent_test.attr("id").indexOf("suggest") == -1) {
+		$('#' + $(this).parent().attr("id")).contextMenu();
+	}
+});
 
 $(document).on("mouseleave", ".card.sticky-action", function(e){
 	var that = this;
@@ -1649,7 +1678,7 @@ function onepage_load(){
 		if(private_channel) add = Crypt.getCookie("_uI") + "_";
 		socket.emit("list", {channel: add + chan.toLowerCase(), pass: embed ? '' : Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()))});
 	}else if(url_split[3] === ""){
-		$.contextMenu( 'destroy', ".list-song" );
+		$.contextMenu( 'destroy', ".playlist-element" );
 		user_change_password = false;
 		clearTimeout(width_timeout);
 		if(fireplace_initiated){

server/public/assets/js/search.js

@@ -20,7 +20,7 @@ var Search = {
 
 	},
 
-	search: function(search_input, retried){
+	search: function(search_input, retried, related){
 		if(result_html === undefined || empty_results_html === undefined) {
 			result_html = $("#temp-results-container");
 			empty_results_html = $("#empty-results-container").html();
@@ -34,6 +34,10 @@ var Search = {
 			if(music)yt_url+="&videoCategoryId=10";
 
 			var vid_url = "https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id&key="+api_key+"&id=";
+			if(related) {
+				var yt_url 	= "https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=25&relatedToVideoId="+keyword+"&type=video&key="+api_key;
+				var vid_url	= "https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id&key="+api_key+"&id=";
+			}
 
 			if(!Helper.contains($(".search_loader_spinner").attr("class").split(" "), "active"))
 			$(".search_loader_spinner").addClass("active");

server/public/layouts/channel.handlebars

@@ -225,7 +225,7 @@
               </div>
                 <div id="wrapper" class="tabs_height">
                     <div id="list-song-html">
-                        <div id="list-song" class="card left-align list-song  waves-effect waves-light">
+                        <div id="list-song" class="card left-align list-song  waves-effect waves-light playlist-element">
                             <div class="clickable vote-container" title="Vote!">
                                 <a class="clickable center-align votebg">
                                     <span class="lazy card-image cardbg list-image" style="background-image:url('/assets/images/loading.png');">
@@ -242,9 +242,12 @@
                                     </span>
                                 </span>
                             </div>
-                            <div class="card-action center-align list-remove hide">
+                            <div class="card-action center-align list-remove">
-                                <a title="Remove song" class="waves-effect btn-flat clickable hide-on-small-only delete_button">Delete</a>
+                                  <a href="#" class="waves-effect btn-flat clickable more_button">
-                                <a title="Remove song" class="waves-effect btn-flat clickable hide-on-med-and-up delete_button"><i class="material-icons">close</i></a>
+                                        <i class="material-icons">more_vert</i>
+                                  </a>
+                                <a title="Remove song" class="waves-effect btn-flat clickable hide-on-small-only delete_button hide suggested_remove">Delete</a>
+                                <a title="Remove song" class="waves-effect btn-flat clickable hide-on-med-and-up delete_button hide suggested_remove"><i class="material-icons">close</i></a>
                           </div>
                         </div>
                     </div>