From 7d74727ca3ffd421dab1ecc0ed176568a92d3253 Mon Sep 17 00:00:00 2001
From: 1hitsong <3330318+1hitsong@users.noreply.github.com>
Date: Mon, 30 May 2022 15:28:31 -0400
Subject: [PATCH] Add audio buffering bar to NowPlaying scene

---
 components/music/NowPlaying.brs | 32 ++++++++++++++++++++++++++++----
 components/music/NowPlaying.xml |  6 +++++-
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/components/music/NowPlaying.brs b/components/music/NowPlaying.brs
index 7270ffa7..519b1ca4 100644
--- a/components/music/NowPlaying.brs
+++ b/components/music/NowPlaying.brs
@@ -15,6 +15,9 @@ sub setupAnimationTasks()
     m.displayButtonsAnimation = m.top.FindNode("displayButtonsAnimation")
     m.playPositionAnimation = m.top.FindNode("playPositionAnimation")
     m.playPositionAnimationWidth = m.top.FindNode("playPositionAnimationWidth")
+
+    m.bufferPositionAnimation = m.top.FindNode("bufferPositionAnimation")
+    m.bufferPositionAnimationWidth = m.top.FindNode("bufferPositionAnimationWidth")
 end sub
 
 ' Creates tasks to gather data needed to renger NowPlaying Scene and play song
@@ -37,6 +40,7 @@ sub setupAudioNode()
     m.top.audio = createObject("RoSGNode", "Audio")
     m.top.audio.observeField("state", "audioStateChanged")
     m.top.audio.observeField("position", "audioPositionChanged")
+    m.top.audio.observeField("bufferingStatus", "bufferPositionChanged")
 end sub
 
 ' Setup playback buttons, default to Play button selected
@@ -62,17 +66,37 @@ sub setupInfoNodes()
     m.albumCover = m.top.findNode("albumCover")
     m.backDrop = m.top.findNode("backdrop")
     m.playPosition = m.top.findNode("playPosition")
+    m.bufferPosition = m.top.findNode("bufferPosition")
     m.seekBar = m.top.findNode("seekBar")
 end sub
 
+sub bufferPositionChanged()
+    if not isValid(m.top.audio.bufferingStatus)
+        bufferPositionBarWidth = m.seekBar.width
+    else
+        bufferPositionBarWidth = m.seekBar.width * m.top.audio.bufferingStatus.percentage
+    end if
+
+
+
+    ' Ensure position bar is never wider than the seek bar
+    if bufferPositionBarWidth > m.seekBar.width
+        bufferPositionBarWidth = m.seekBar.width
+    end if
+
+    ' Use animation to make the display smooth
+    m.bufferPositionAnimationWidth.keyValue = [m.bufferPosition.width, bufferPositionBarWidth]
+    m.bufferPositionAnimation.control = "start"
+end sub
+
 sub audioPositionChanged()
     if not isValid(m.top.audio.position)
-        m.playPosition.width = 0
+        playPositionBarWidth = 0
+    else
+        songPercentComplete = m.top.audio.position / m.top.audio.duration
+        playPositionBarWidth = m.seekBar.width * songPercentComplete
     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
diff --git a/components/music/NowPlaying.xml b/components/music/NowPlaying.xml
index c93ba11d..68dc103d 100644
--- a/components/music/NowPlaying.xml
+++ b/components/music/NowPlaying.xml
@@ -9,7 +9,8 @@
           <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="seekBar" color="0x00000099" width="500" height="10">
+        <Rectangle id="bufferPosition" color="0xFFFFFF44" height="10"></Rectangle>
         <Rectangle id="playPosition" color="#00a4dcFF" height="10"></Rectangle>
       </Rectangle>
       <LayoutGroup id="buttons" layoutDirection="horiz" horizAlignment="center" itemSpacings="[45]">
@@ -17,6 +18,9 @@
         <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="bufferPositionAnimation" duration="1" repeat="false" easeFunction="linear">
+        <FloatFieldInterpolator id="bufferPositionAnimationWidth" key="[0.0, 1.0]" fieldToInterp="bufferPosition.width" />
+      </Animation>
       <Animation id="playPositionAnimation" duration="1" repeat="false" easeFunction="linear">
         <FloatFieldInterpolator id="playPositionAnimationWidth" key="[0.0, 1.0]" fieldToInterp="playPosition.width" />
       </Animation>