YouTube player seeks and stops, seeker-bar fixed.

app/app.css

@@ -380,6 +380,7 @@ footer a:hover{
   background-color: black;
   width: 0;
   height: 5px;
+  clear: both;
   margin-left: 35px;
   background-color: rgb(16, 140, 146);
 }
@@ -452,3 +453,7 @@ footer a:hover{
 .footerButtons:hover {
   background-color: #f5f7f9;
 }
+#albumart{
+  width: 170px;
+  margin-left: 35px;
+}

app/app.js

@@ -159,8 +159,14 @@ if (Meteor.isClient) {
     });
 
     Template.room.onCreated(function () {
+        var tag = document.createElement("script");
+        tag.src = "https://www.youtube.com/iframe_api";
+        var firstScriptTag = document.getElementsByTagName('script')[0];
+        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+        
         var currentSong = undefined;
         var _sound = undefined;
+        var yt_player = undefined;
         var size = 0;
 
         function getTimeElapsed() {
@@ -170,11 +176,44 @@ if (Meteor.isClient) {
             return 0;
         }
 
+        function getSongInfo(query){
+          query = query.toLowerCase().split(" ").join("%20");
+          $.ajax({
+            type: "GET",
+            url: 'https://api.spotify.com/v1/search?q=' + query + '&type=track',
+            applicationType: "application/json",
+            contentType: "json",
+            success: function(data){
+              console.log(data);
+              for(var i in data){
+                // for(var j in data[i].items){
+                  // data[i].items[j] - each indivudual object in response
+                  // console.log(data[i].items[j].name)
+                  // for(var k in data[i].items[j].artists){
+                  //   if(data[i].items[j].artists[k].name);
+                  // }
+                  Session.set("title", data[i].items[0].name);
+                  for(var j in data[i].items[0].artists){
+                     Session.set("artist", data[i].items[0].artists[j].name);
+                  }
+                  $("#albumart").remove();
+                  $(".room-title").before("<img id='albumart' src='" + data[i].items[0].album.images[1].url + "' />")
+                  //Session.set("artist", currentSong.song.artist);
+                  //Session.set("duration", currentSong.song.duration)
+                //}
+              }
+            }
+          })
+        }
+
         function startSong() {
             if (currentSong !== undefined) {
-                if (_sound !== undefined)_sound.stop();
+                if (_sound !== undefined) _sound.stop();
+                if (yt_player !== undefined && yt_player.stopVideo !== undefined) yt_player.stopVideo();
+                
                 if (currentSong.song.type === "soundcloud") {
                   $("#player").attr("src", "")
+                  getSongInfo(currentSong.song.title);
                   SC.stream("/tracks/" + currentSong.song.id + "/", function(sound){
                     _sound = sound;
                     sound._player._volume = 0.3;
@@ -182,21 +221,39 @@ if (Meteor.isClient) {
                     sound.play();
                     Session.set("title", currentSong.song.title || "Title");
                     Session.set("artist", currentSong.song.artist || "Artist");
-                    Session.set("duration", currentSong.song.duration)
-                    $("#seeker-bar").css("transition", Session.get("duration") + "s")
-                    $("#seeker-bar").width(1400);
+                    Session.set("duration", currentSong.song.duration);
+                    $("#seeker-bar").css("transition", "none");
+                    $("#seeker-bar").width(((getTimeElapsed() / 1000) / Session.get("duration") * 100) + "%");
+                    $("#seeker-bar")[0].offsetHeight;
+                    $("#seeker-bar").css("transition", (Session.get("duration") - (getTimeElapsed() / 1000)) + "s");
+                    $("#seeker-bar").width("calc(100% - 75px)");
                     setTimeout(function() { // HACK, otherwise seek doesn't work.
                         sound._player.seek(getTimeElapsed());
                     }, 500);
                   });
                 } else {
-                    console.log("YT!");
-                    $("#player").attr("src", "http://www.youtube.com/embed/" + currentSong.song.id + "?autoplay=1&controls=0&autohide=1");
+                    yt_player = new YT.Player("player", {
+                        height: 540,
+                        width: 960,
+                        videoId: currentSong.song.id,
+                        events: {
+                            'onReady': function(event) {
+                                event.target.seekTo(getTimeElapsed() / 1000);
+                                event.target.playVideo();
+                                $("#seeker-bar").css("transition", "none");
+                                $("#seeker-bar").width(((getTimeElapsed() / 1000) / Session.get("duration") * 100) + "%");
+                                $("#seeker-bar")[0].offsetHeight;
+                                $("#seeker-bar").css("transition", (Session.get("duration") - (getTimeElapsed() / 1000)) + "s");
+                                $("#seeker-bar").width("calc(100% - 75px)");
+                            },
+                            'onStateChange': function(){}
+                        }
+                    })
+
                     Session.set("title", currentSong.song.title || "Title");
                     Session.set("artist", currentSong.song.artist || "Artist");
+                    getSongInfo(currentSong.song.title);
                     Session.set("duration", currentSong.song.duration);
-                    $("#seeker-bar").css("transition", Session.get("duration") + "s");
-                    $("#seeker-bar").width(1400);
                 }
             }
         }
@@ -213,6 +270,7 @@ if (Meteor.isClient) {
             if (data.history.length > size) {
                 currentSong = data.history[data.history.length-1];
                 size = data.history.length;
+                $("#seeker-bar").remove();
                 startSong();
             }
         }, 1000);
@@ -232,8 +290,7 @@ if (Meteor.isServer) {
 
     var startedAt = Date.now();
     var songs = [
-      {id: "eMrh3wYb1mM", title: "Where Are U Now", artist: "Pentatonix", duration: 244, type: "youtube"},
-      {id: 170202151, title: "Runnaway (U & I)", artist: "Galantis", duration: 193, type: "soundcloud"}
+      {id: "YqeW9_5kURI", title: "Lean On", artist: "Major Lazer", duration: 193, type: "youtube"}
     ];
     var currentSong = 0;
     addToHistory(songs[currentSong], startedAt);

app/templates/room.html

@@ -8,8 +8,8 @@
         <button type="button" id="search-song" class="button">Search</button>
         <div id="song-results"></div>
         <!--src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1&controls=0&autohide=1">-->
-        <iframe width="960" height="540" id="player">
-        </iframe>
+        <div width="960" height="540" id="player">
+        </div>
         <ul class="bg-bubbles">
             <li></li>
             <li></li>