2
0
Эх сурвалжийг харах

song progress bar working

unknown 9 жил өмнө
parent
commit
51c3b29e94
3 өөрчлөгдсөн 16 нэмэгдсэн , 2 устгасан
  1. 8 0
      app/app.css
  2. 1 0
      app/app.html
  3. 7 2
      app/app.js

+ 8 - 0
app/app.css

@@ -339,10 +339,18 @@ footer a:hover{
   font-size: 2.5em;
   color: white;
   font-weight: 600;
+  margin-left: 35px;
 }
 .room-artist{
   font-size: 2em;
   color: white;
+  margin-left: 35px;
+}
+#seeker-bar{
+  background-color: black;
+  width: 0;
+  height: 5px;
+  margin-left: 35px;
 }
 @media (max-width: 992px) {
     .station {

+ 1 - 0
app/app.html

@@ -139,6 +139,7 @@
     <h1 class="room-name">{{{type}}}</h1>
     <h2 class="room-title">{{{title}}}</h2>
     <h2 class="room-artist">{{{artist}}}</h2>
+    <div id="seeker-bar"></div>
     <ul class="bg-bubbles">
       <li></li>
       <li></li>

+ 7 - 2
app/app.js

@@ -103,6 +103,9 @@ if (Meteor.isClient) {
         },
         artist: function(){
           return Session.get("artist");
+        },
+        duration: function(){
+
         }
     });
 
@@ -124,14 +127,14 @@ if (Meteor.isClient) {
                 SC.stream("/tracks/" + currentSong.song.id + "/", function(sound){
                     _sound = sound;
                     sound._player._volume = 0.3;
-                    //sound.play();
+                    sound.play();
                     Session.set("title", currentSong.song.title || "Title");
                     Session.set("artist", currentSong.song.artist || "Artist");
                     Session.set("albumArt", currentSong.song.albumArt);
                     Session.set("duration", currentSong.song.duration);
+                    Session.set("increment", 1400 / currentSong.song.duration);
                     setTimeout(function() { // HACK, otherwise seek doesn't work.
                         sound._player.seek(getTimeElapsed());
-                        console.log(sound._player.seek(getTimeElapsed()));
                     }, 500);
                 });
             }
@@ -151,6 +154,8 @@ if (Meteor.isClient) {
                 size = data.history.length;
                 startSong();
             }
+            $("#seeker-bar").width($("#seeker-bar").width() + Session.get("increment"));
+            console.log($("#seeker-bar").width());
         }, 1000);
     });
 }