usersuggested videos on password protected lists

index.php

@@ -230,12 +230,12 @@
                         </div>
                     </div>
                 </div>
-                <div id="suggestions">
+                <div id="suggestions" class="tabs_height">
                         <p class="suggest-title-info">YouTube Suggests:</p>
                         <div class="suggest_bar" id="suggest-song-html"> 
                         </div>  
-                        <p class="suggest-title-info hide">Users Suggests:</p>
+                        <p class="suggest-title-info">Users Suggests:</p>
-                        <div class="suggest_bar hide" id="user-suggest-html">
+                        <div class="suggest_bar" id="user-suggest-html">
                         </div>
                 </div>
             </div>

static/css/style.css

@@ -773,7 +773,7 @@ nav ul li:hover, nav ul li.active {
   background-color: rgba(0,0,0,0.5);
 }
 
-.list-image{
+.list-image, .list-suggested-image{
     width: 34%;
     height: 66px;
     float: left;
@@ -798,10 +798,33 @@ nav ul li:hover, nav ul li.active {
     opacity:0;
     transition: all .1s ease;
 }
-.vote-container:hover .list-image:after {
+
+.list-suggested-image:after {
+  font-family: "Material-Design-Icons";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  content: "\e625";/*"\e800";*/
+  color:white;
+  font-size:65px;
+  position:absolute;
+  width:100%; height:100%;
+  top:0; left:0;
+  background:rgba(0,0,0,0.8);
+  opacity:0;
+  transition: all .1s ease;
+}
+
+.vote-container:hover .list-image:after, .add-suggested:hover .list-suggested-image:after {
     opacity:1;
 }
 
+
+
 .vote-span{
     opacity: 0.7;
     padding: 0 0 0 10px;
@@ -871,7 +894,7 @@ nav ul li:hover, nav ul li.active {
   padding-left: 10px;
 }
 
-#del, #del_suggested{
+#del, #del_suggested, #del_user_suggested{
     height: 100%;
     line-height: normal;
     padding: 2px 12px;
@@ -887,6 +910,11 @@ nav ul li:hover, nav ul li.active {
     opacity:0.8;
 }
 
+.tabs_height{
+  height:91% !important;
+  overflow:auto;
+}
+
 
 /** settings **/
 

static/js/admin.js

@@ -53,6 +53,9 @@ var Admin = {
                 case "changedpass":
                     msg="Your password has been changed!";
                     break;
+                case "suggested":
+                    msg="Your song was suggested!";
+                    break;
     		}
     		Materialize.toast(msg, 4000);
     	});
@@ -77,6 +80,7 @@ var Admin = {
             $("#password").val("");
             $("#password").attr("placeholder", "Change channel password")
             $(".playlist-tabs").removeClass("hide");
+            $("#wrapper").toggleClass("tabs_height");
 
             if(!Helper.contains($("#admin-lock").attr("class").split(" "), "mdi-action-lock-open"))
     		  $("#admin-lock").addClass("mdi-action-lock-open clickable");
@@ -134,6 +138,7 @@ var Admin = {
 
         if(!Helper.contains($(".playlist-tabs").attr("class").split(" "), "hide")){
             $(".playlist-tabs").addClass("hide");
+            $("#wrapper").toggleClass("tabs_height");
         }
 
     	if($(".card-action").length != 0 && 
@@ -162,6 +167,7 @@ var Admin = {
         if(conf_array['adminpass'] == "" || !w_p){
             hasadmin = false;
             $(".playlist-tabs").removeClass("hide");
+            $("#wrapper").toggleClass("tabs_height")
         }
         else hasadmin = true;
         

static/js/list.js

@@ -64,6 +64,7 @@ var List = {
     added_song: function(added){
         full_playlist.push(added);
         List.sortList();
+        $("#suggested-"+added.id).remove();
         List.insertAtIndex(added, true);
     },
 
@@ -86,6 +87,7 @@ var List = {
             full_playlist.splice(List.getIndexOfSong(deleted), 1);
             $("#wrapper").children()[$("#wrapper").children().length-1].remove();
         }
+        $("#suggested-"+deleted).remove();
     },
 
     voted_song: function(voted, time){
@@ -199,7 +201,7 @@ var List = {
         }
     },
 
-    generateSong: function(song_info, transition, lazy, list)
+    generateSong: function(song_info, transition, lazy, list, user)
     {
     	var video_id    = song_info.id;
     	var video_title = song_info.title;
@@ -224,18 +226,25 @@ var List = {
             song.find("#list-song").attr("id", video_id);
 
             attr     = ".vote-container";
-            del_attr = "#del";
+            del_attr = "del";
         }else if(!list){
+
             song.find(".vote-text").text(song_info.duration);
 
             attr     = ".add-suggested";
-            del_attr = "#del_suggested";
+            if(user)
+                del_attr = "del_user_suggested";
+            else
+                del_attr = "del_suggested";
 
             song.find(".vote-container").attr("class", "clickable add-suggested");
-            song.find("#del").attr("id", "del_suggested");
+            song.find(".add-suggested").attr("title", "Add song!");
+            song.find("#del").attr("id", del_attr);
             song.find(attr).attr("data-video-title", video_title);
             song.find(attr).attr("data-video-length", song_info.length);
             song.find("#list-song").attr("id", "suggested-" + video_id);
+            song.find(".list-image").attr("class", song.find(".list-image").attr("class").replace("list-image", "list-suggested-image"));
+
         }
 
     	song.find(".list-title").text(video_title);
@@ -243,7 +252,8 @@ var List = {
     	//song.find(".vote-container").attr("onclick", "vote('"+video_id+"','pos')");
         song.find(attr).attr("data-video-id", video_id);
     	song.find(".list-image").attr(image_attr,video_thumb);
-        song.find(del_attr).attr("data-video-id", video_id);
+        song.find(".list-suggested-image").attr(image_attr,video_thumb);
+        song.find("#"+del_attr).attr("data-video-id", video_id);
     	//song.find("#del").attr("onclick", "vote('"+video_id+"', 'del')");
 
     	return song.html();

static/js/listeners.js

@@ -3,7 +3,6 @@ var w_p 				  = true;
 var hasadmin			  = 0;
 var showToggle 			  = true;
 var list_html 			  = $("#list-song-html").html();
-var suggest_html		  = $("#suggest-song-html").html();
 var blink_interval_exists = false;
 var unseen 			   	  = false;
 var timer 			   	  = 0;
@@ -52,6 +51,13 @@ socket.on("get_list", function(){
     socket.emit('list', chan.toLowerCase());
 });
 
+socket.on("suggested", function(params){
+	var single = true;
+	if(params.id == undefined)
+		single = false;
+	Suggestions.catchUserSuggests(params, single);
+});
+
 $(document).ready(function()
 {
 	//window.vote 		  = List.vote;
@@ -328,3 +334,9 @@ $("#suggestions").on( "click", "#del_suggested", function(e){
 
 	$("#suggested-" + id).remove();
 });
+
+$("#suggestions").on( "click", "#del_user_suggested", function(e){
+	var id = $(this).attr("data-video-id");
+	$("#suggested-" + id).remove();
+	List.vote(id, "del");
+});

static/js/suggestions.js

@@ -1,7 +1,26 @@
 var Suggestions = {
 
-	catchUserSuggests: function(suggested){
+	catchUserSuggests: function(params, single){
+		if(single){
+			Suggestions.createSuggested(params);
+		}else{
+			for(x in params){
+				Suggestions.createSuggested(params[x]);
+			}
+		}
+	},
 
+	createSuggested: function(params){
+		var secs 	= params.duration;
+		var video_id 	= params.id;
+		var video_title = params.title;
+		var minutes 	= Math.floor(secs / 60);
+		var seconds 	= secs - minutes * 60;
+
+		duration 		= minutes+"m " + seconds + "s";
+
+		var song 		= List.generateSong({id: video_id, title: video_title, length: secs, duration: duration}, false, false, false, true);
+		$("#user-suggest-html").append(song);
 	},
 
 	fetchYoutubeSuggests: function(id){
@@ -33,20 +52,10 @@ var Suggestions = {
                     	var secs 		 = Search.durationToSeconds(duration);
                     	var video_id 	 = song.id;
                     	var video_title  = song.snippet.title;
-                    	var suggest_song = $("<div><div class='suggest-songs suggest-"+video_id+"'>" + $(suggest_html).html() + "</div></div>");
 
                     	duration = duration.replace("PT","").replace("H","h ").replace("M","m ").replace("S","s")
 
-                    	window.suggest_song = suggest_song;
+                    	$("#suggest-song-html").append(List.generateSong({id: video_id, title: video_title, length: secs, duration: duration}, false, false, false));
-                    	suggest_song.find(".suggest_thumb").attr("src", "//img.youtube.com/vi/"+video_id+"/mqdefault.jpg")
-                    	suggest_song.find(".suggest_title").text(video_title);
-                    	suggest_song.find(".duration-song").text(duration);
-                    	suggest_song.find(".accept").attr("data-video-id", video_id);
-                    	suggest_song.find(".accept").attr("data-video-title", video_title);
-                    	suggest_song.find(".accept").attr("data-video-length", secs);
-						suggest_song.find(".decline").attr("data-video-id", video_id);
-
-                    	$("#suggest-song-html").append(List.generateSong({id: song.id, title: song.snippet.title, length: secs, duration: duration}, false, false, false));
                     });
           		}
           	});