Added YouTube suggested songs

php/panel.php

@@ -154,6 +154,35 @@
         </li>
     </ul>
 </li>
+
+<li class="no-padding suggestion-panel hide-on-small-only hide">
+    <ul class="collapsible collapsible-accordion">
+        <li>
+            <a class="collapsible-header bold waves-effect suggested">Suggested Songs
+                <i class="mdi-av-playlist-add"></i>
+            </a>
+            <div class="collapsible-body">
+                <ul>
+                    <li class="white-bg suggestion-container">
+                        <p class="suggest-title-info">YouTube Suggests:</p>
+                        <div class="suggest_bar" id="suggest-song-html">
+                            <div class="suggest-songs">
+                                <div class="inner-suggest">
+                                <img class="suggest_thumb" src="/static/images/loading.png" alt="Thumb"/>
+                                <div class="collection-suggestion-info">
+                                <span class="suggest_title truncate"></span>
+                                <span class="duration-song truncate">10m 20s</span>
+                                </div>
+                                <span class="suggest_buttons"><button class="accept waves-effect waves-light btn light-green">Add</button><button class="decline waves-effect waves-light btn red">Delete</button></span>
+                                </div>
+                            </div>
+                        </div>
+                    </li>   
+                </ul>
+            </div>
+        </li>
+    </ul>
+</li>
 <!--
 <li class="no-padding">
     <h5 id="desc-title">List description</h5>

static/css/style.css

@@ -135,7 +135,7 @@ nav .brand-logo{
   background-color:rgba(45,45,45,1);
 }
 
-.import-a{
+.import-a, .suggested{
   width:100%;
 }
 
@@ -481,6 +481,51 @@ hide mdi-action-visibility mdi-action-visibility-off
 
 /*------------------- Channel page ---------------------------------------------------------------------------- */
 
+.suggest_thumb {
+  width:25%;
+  float:left;
+}
+
+.suggest_bar {
+  /*margin-left:5px !important;*/
+  color:rgb(68,68,68);
+}
+
+.suggest_buttons button{
+  padding-left:10px !important;
+  padding-right:10px !important;
+  margin-right: 20px; 
+  width:90px;
+}
+
+.inner-suggest{
+  padding-left:20px;
+}
+
+.suggest-songs:nth-child(odd) {background: rgba(204,204,204,0.40)}
+.suggest-songs:nth-child(even) {background: #FFF}
+
+.suggest-songs {
+  padding-top:20px;
+  border-bottom:1px solid black;
+}
+
+.suggest_title, .duration-song{
+  padding-left:10px;
+  line-height:24px;
+}
+
+.duration-song{
+  font-size:12px;
+}
+
+.suggest-title-info{
+  color: rgb(68,68,68);
+  padding: 10px 0 10px 10px !important;
+  line-height: 34px;
+  margin: 0 0 -10px 0 !important;
+}
+
 #description, #desc-title{
   color:#444;
 }

static/js/admin.js

@@ -75,6 +75,7 @@ var Admin = {
     		$("#admin-lock").removeClass("mdi-action-lock");
             $("#password").val("");
             $("#password").attr("placeholder", "Change channel password")
+            $(".suggestion-panel").removeClass("hide");
 
             if(!Helper.contains($("#admin-lock").attr("class").split(" "), "mdi-action-lock-open"))
     		  $("#admin-lock").addClass("mdi-action-lock-open clickable");
@@ -130,13 +131,17 @@ var Admin = {
     		$("#admin-lock").addClass("mdi-action-lock");
         }
 
+        if(!Helper.contains($(".suggestion-panel").attr("class").split(" "), "hide")){
+            $(".suggestion-panel").addClass("hide");
+        }
+
     	if($(".card-action").length != 0 && 
             !Helper.contains($(".card-action").attr("class").split(" "), "hide")){
     		$(".card-action").addClass("hide");
         }
 
         $("#admin-lock").removeClass("mdi-action-lock-open clickable");
-        $("#password").attr("placeholder", "Enter channel password")
+        $("#password").attr("placeholder", "Enter channel password");
     },
 
     //function used in html onlick
@@ -151,6 +156,7 @@ var Admin = {
         names     = ["vote","addsongs","longsongs","frontpage", "allvideos", 
                     "removeplay", "skip", "shuffle"];
 
+
         if(conf_array['adminpass'] == "" || !w_p) 
             hasadmin = false;
         else hasadmin = true;
@@ -198,4 +204,9 @@ var Admin = {
     	socket.emit('shuffle', adminpass !== undefined ? adminpass : "");
     },
 
+    get_admin:function()
+    {
+        return w_p;
+    }
+
  }

static/js/listeners.js

@@ -3,6 +3,7 @@ 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;
@@ -38,7 +39,7 @@ var video_id;
 var list;
 var seekTo;
 var song_title;
-
+var previous_video_id;
 var connection_options = {
 	'sync disconnect on unload':true,
 	'secure': true
@@ -286,17 +287,19 @@ $("#closeSettings").on("click", function()
 
 $("#results").on( "click", "#temp-results", function(e){
 	if($(e.target).html() != $("<i class='mdi-av-playlist-add'></i>").html()){
-		var id = $(this).attr("data-video-id");
+		var id 		= $(this).attr("data-video-id");
-		var title = $(this).attr("data-video-title");
+		var title 	= $(this).attr("data-video-title");
-		var length = $(this).attr("data-video-length")
+		var length 	= $(this).attr("data-video-length");
+
 		Search.submitAndClose(id, title, length);
 	}
 });
 
 $("#results").on( "click", "#add-many", function(e){
-	var id = $(this).attr("data-video-id");
+	var id 		= $(this).attr("data-video-id");
-	var title = $(this).attr("data-video-title");
+	var title 	= $(this).attr("data-video-title");
-	var length = $(this).attr("data-video-length")
+	var length 	= $(this).attr("data-video-length");
+
 	Search.submit(id, title, length);
 });
 
@@ -308,4 +311,20 @@ $("#wrapper").on( "click", ".vote-container", function(e){
 $("#wrapper").on( "click", "#del", function(e){
 	var id = $(this).attr("data-video-id");
 	List.vote(id, "del");
+});
+
+$(".suggestion-container").on( "click", ".accept", function(e){
+	var id 		= $(this).attr("data-video-id");
+	var title 	= $(this).attr("data-video-title");
+	var length 	= $(this).attr("data-video-length");
+
+
+	Search.submit(id, title, length);
+	$(".suggest-" + id).remove();
+});
+
+$(".suggestion-container").on( "click", ".decline", function(e){
+	var id = $(this).attr("data-video-id");
+
+	$(".suggest-" + id).remove();
 });

static/js/youtube.js

@@ -17,6 +17,11 @@ var Youtube = {
     		}
     		else{
     			//console.log("gotten new song");
+                if(previous_video_id == undefined) 
+                    previous_video_id = obj[0][0]["id"];
+                else if(previous_video_id != video_id)
+                    previous_video_id = video_id;
+
                 video_id   = obj[0][0]["id"];
                 conf       = obj[1][0];
                 time       = obj[2];
@@ -25,6 +30,7 @@ var Youtube = {
 
     			$("#player_overlay").addClass("hide");
 
+                Suggestions.fetchYoutubeSuggests(video_id);
           		Youtube.getTitle(song_title, viewers);
     			Youtube.setBGimage(video_id);
     			//if(player_ready && !window.mobilecheck())