Add song progress bar to NowPlaying scene

components/music/NowPlaying.brs

@@ -2,6 +2,7 @@ sub init()
     m.top.optionsAvailable = false
 
     setupAudioNode()
+    setupAnimationTasks()
     setupButtons()
     setupInfoNodes()
     setupDataTasks()
@@ -10,6 +11,12 @@ sub init()
     m.buttonsNeedToBeLoaded = true
 end sub
 
+sub setupAnimationTasks()
+    m.displayButtonsAnimation = m.top.FindNode("displayButtonsAnimation")
+    m.playPositionAnimation = m.top.FindNode("playPositionAnimation")
+    m.playPositionAnimationWidth = m.top.FindNode("playPositionAnimationWidth")
+end sub
+
 ' Creates tasks to gather data needed to renger NowPlaying Scene and play song
 sub setupDataTasks()
     ' Load meta data
@@ -29,6 +36,7 @@ end sub
 sub setupAudioNode()
     m.top.audio = createObject("RoSGNode", "Audio")
     m.top.audio.observeField("state", "audioStateChanged")
+    m.top.audio.observeField("position", "audioPositionChanged")
 end sub
 
 ' Setup playback buttons, default to Play button selected
@@ -53,6 +61,26 @@ end sub
 sub setupInfoNodes()
     m.albumCover = m.top.findNode("albumCover")
     m.backDrop = m.top.findNode("backdrop")
+    m.playPosition = m.top.findNode("playPosition")
+    m.seekBar = m.top.findNode("seekBar")
+end sub
+
+sub audioPositionChanged()
+    if not isValid(m.top.audio.position)
+        m.playPosition.width = 0
+    end if
+
+    songPercentComplete = m.top.audio.position / m.top.audio.duration
+    playPositionBarWidth = m.seekBar.width * songPercentComplete
+
+    ' Ensure position bar is never wider than the seek bar
+    if playPositionBarWidth > m.seekBar.width
+        playPositionBarWidth = m.seekBar.width
+    end if
+
+    ' Use animation to make the display smooth
+    m.playPositionAnimationWidth.keyValue = [m.playPosition.width, playPositionBarWidth]
+    m.playPositionAnimation.control = "start"
 end sub
 
 sub audioStateChanged()
@@ -146,8 +174,7 @@ sub onMetaDataLoaded()
         ' If we have more and 1 song to play, fade in the next and previous controls
         if m.buttonsNeedToBeLoaded
             if m.top.pageContent.count() > 1
-                m.floatanimation = m.top.FindNode("displayButtonsAnimation")
-                m.floatanimation.control = "start"
+                m.displayButtonsAnimation.control = "start"
             end if
             m.buttonsNeedToBeLoaded = false
         end if

components/music/NowPlaying.xml

@@ -9,11 +9,17 @@
           <Label id="song" width="900" height="25"  horizAlign="center" />
           <Label id="numberofsongs" width="500" height="25" horizAlign="center" font="font:SmallestSystemFont" color="#999999" />
       </LayoutGroup>
+      <Rectangle id="seekBar" color="0xFFFFFF44" width="500" height="10">
+        <Rectangle id="playPosition" color="#00a4dcFF" height="10"></Rectangle>
+      </Rectangle>
       <LayoutGroup id="buttons" layoutDirection="horiz" horizAlignment="center" itemSpacings="[45]">
         <Poster id="previous" width="64" height="64" uri="pkg:/images/icons/previous-default.png" opacity="0" />
         <Poster id="play" width="64" height="64" uri="pkg:/images/icons/play-default.png" />
         <Poster id="next" width="64" height="64" uri="pkg:/images/icons/next-default.png" opacity="0" />
       </LayoutGroup>
+      <Animation id="playPositionAnimation" duration="1" repeat="false" easeFunction="linear">
+        <FloatFieldInterpolator id="playPositionAnimationWidth" key="[0.0, 1.0]" fieldToInterp="playPosition.width" />
+      </Animation>
       <Animation id="displayButtonsAnimation" duration="1" repeat="false" easeFunction="linear">
         <FloatFieldInterpolator key="[0.0, 1.0]" keyValue="[0.0, 1.0]" fieldToInterp="previous.opacity" />
         <FloatFieldInterpolator key="[0.0, 1.0]" keyValue="[0.0, 1.0]" fieldToInterp="next.opacity" />