Added thumbnail and channel display with video searching, fixed bug where player would sometimes not load for the third time.

app/client/app.css

@@ -814,16 +814,52 @@ footer .fa {
     text-align: center;
 }
 
-#song-results p {
+#song-results > div {
     margin: 0;
     padding: 5px;
+    text-align: left;
+    border-bottom: 1px solid white;
+    transition: background-color 300ms linear;
+    transition: color 300ms linear;
+}
+
+#song-results > div:last-child {
+    border-bottom: 0;
 }
 
-#song-results p:hover {
-    background-color: cadetblue;
+#song-results > div:hover {
+    color: #0e90d2;
+    background-color: rgba(255, 255, 255, 0.5);
+
     cursor: pointer;
 }
 
+.song-result-thumbnail {
+    width: 224px;
+    height: 126px;
+    margin-top: 50px;
+    margin-left: auto;
+    margin-right: auto;
+    word-break: break-all;
+    display: block;
+}
+
+.song-result-title {
+    margin-left: 20px;
+    margin-top: 10px;
+    display: block;
+    box-sizing: border-box;
+    font-size: 1.4em;
+}
+
+.song-result-channel {
+    margin-left: 20px;
+    margin-top: 5px;
+    display: block;
+    box-sizing: border-box;
+    font-size: 0.9em;
+}
+
 #player {
     z-index: 10;
 }

app/client/client.js

@@ -784,10 +784,21 @@ Template.room.events({
                 contentType: "json",
                 success: function(data){
                     for(var i in data.items){
-                        $("#song-results").append("<p>" + data.items[i].snippet.title + "</p>");
+                        var item = data.items[i];
+                        $("#song-results").append(
+                            "<div>" +
+                                "<img src='" + item.snippet.thumbnails.medium.url + "' class='song-result-thumbnail'/>" +
+                                "<div>" +
+                                    "<span class='song-result-title'>" + item.snippet.title + "</span>" +
+                                    "<span class='song-result-channel'>" + item.snippet.channelTitle + "</span>" +
+                                "</div>" +
+                            "</div>"
+                        );
+                        console.log(data.items[i]);
+                        //$("#song-results").append("<p>" + data.items[i].snippet.title + "</p>");
                         ytArr.push({title: data.items[i].snippet.title, id: data.items[i].id.videoId});
                     }
-                    $("#song-results p").click(function(){
+                    $("#song-results div").click(function(){
                         $("#search-info").hide();
                         $("#add-info").show();
                         var title = $(this).text();
@@ -1957,8 +1968,8 @@ Template.room.onCreated(function () {
                 }
                 $("#player").show();
                 function loadVideo() {
-                    if (YT !== undefined && YT.loaded === 0 && YT.loading === 1) {
-                        Session.set("loadVideoTimeout", Meteor.setTimeout(function() {
+                    if (!Session.get("YTLoaded")) {
+                        Session.set("loadVideoTimeout", Meteor.setTimeout(function () {
                             loadVideo();
                         }, 500));
                     } else {
@@ -1969,8 +1980,8 @@ Template.room.onCreated(function () {
                                 videoId: currentSong.id,
                                 playerVars: {controls: 0, iv_load_policy: 3, rel: 0, showinfo: 0},
                                 events: {
-                                    'onReady': function(event) {
-                                        if(currentSong.skipDuration === undefined){
+                                    'onReady': function (event) {
+                                        if (currentSong.skipDuration === undefined) {
                                             currentSong.skipDuration = 0;
                                         }
                                         event.target.seekTo(Number(currentSong.skipDuration) + getTimeElapsed() / 1000);
@@ -1978,8 +1989,8 @@ Template.room.onCreated(function () {
                                         event.target.setVolume(volume);
                                         resizeSeekerbar();
                                     },
-                                    'onStateChange': function(event){
-                                        if (YT !== undefined) {
+                                    'onStateChange': function (event) {
+                                        if (Session.get("YTLoaded")) {
                                             if (event.data == YT.PlayerState.PAUSED && Session.get("state") === "playing") {
                                                 event.target.seekTo(Number(currentSong.skipDuration) + getTimeElapsed() / 1000);
                                                 event.target.playVideo();
@@ -1994,7 +2005,7 @@ Template.room.onCreated(function () {
                             });
                         } else {
                             yt_player.loadVideoById(currentSong.id);
-                            if(currentSong.skipDuration === undefined){
+                            if (currentSong.skipDuration === undefined) {
                                 currentSong.skipDuration = 0;
                             }
                             yt_player.seekTo(Number(currentSong.skipDuration) + getTimeElapsed() / 1000);
@@ -2002,7 +2013,7 @@ Template.room.onCreated(function () {
                         Session.set("pauseVideo", false);
                         getSongInfo(currentSong);
                     }
-                };
+                }
                 loadVideo();
             }
         }

app/client/head.html

@@ -69,5 +69,11 @@
         (function(d, t) {
             var g = d.createElement(t);g.id = 'doorbellScript';g.type = 'text/javascript';g.async = true;g.src = 'https://embed.doorbell.io/button/2408?t='+(new Date().getTime());(d.getElementsByTagName('head')[0]||d.getElementsByTagName('body')[0]).appendChild(g);
         }(document, 'script'));
+
+        Session.set("YTLoaded", false);
+
+        function onYouTubeIframeAPIReady() {
+            Session.set("YTLoaded", true);
+        }
     </script>
 </head>

app/client/templates/room.html

@@ -193,9 +193,6 @@
                             </div>
                             <!--small id="search-alert">Searching for a song fills out the above fields automatically, but you will still have to verify them.</small-->
                         </div>
-                        <div class="modal-footer">
-                            <button id="close-modal-a" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-                        </div>
                     </div>
 
                 </div>