Draw progress bar on audiobook icons

1hitsong · Sep 8, 2024 · bec7d8c · bec7d8c
1 parent bdf0d51
commit bec7d8c
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 0 deletions.
diff --git a/components/ItemGrid/AudioBookGridItem.bs b/components/ItemGrid/AudioBookGridItem.bs
@@ -1,3 +1,5 @@
+import "pkg:/source/enums/AnimationControl.bs"
+import "pkg:/source/enums/ColorPalette.bs"
 import "pkg:/source/utils/config.bs"
 import "pkg:/source/utils/misc.bs"
 
@@ -8,6 +10,11 @@ sub init()
     m.subText = m.top.findNode("subText")
     m.subText.font.size = 23
     m.backdrop = m.top.findNode("backdrop")
+    m.itemProgress = m.top.findNode("progress")
+    m.itemProgress.color = ColorPalette.TRIADBLUE
+    m.itemProgressBackground = m.top.findNode("progressBackground")
+    m.showProgressBarAnimation = m.top.findNode("showProgressBar")
+    m.showProgressBarField = m.top.findNode("showProgressBarField")
 
     m.itemPoster.observeField("loadStatus", "onPosterLoadStatusChanged")
 
@@ -22,6 +29,13 @@ sub init()
     m.gridTitles = m.global.session.user.settings["itemgrid.gridTitles"]
 end sub
 
+sub drawProgressBar(itemData)
+    m.itemProgressBackground.width = m.itemPoster.width
+    m.itemProgressBackground.visible = true
+    m.showProgressBarField.keyValue = [0, m.itemPoster.width * (itemData.json.userdata.PlayedPercentage / 100)]
+    m.showProgressBarAnimation.control = AnimationControl.START
+end sub
+
 sub itemContentChanged()
     m.backdrop.blendColor = "#101010"
 
@@ -37,6 +51,12 @@ sub itemContentChanged()
         m.backdrop.uri = "pkg:/images/icons/musicFolder.png"
     end if
 
+    if isChainValid(itemData, "json.userdata.PlayedPercentage")
+        if itemData.json.userdata.PlayedPercentage > 0
+            drawProgressBar(itemData)
+        end if
+    end if
+
     m.itemPoster.uri = itemData.PosterUrl
     m.posterText.text = itemData.title
     m.subText.text = itemData.json.AlbumArtist

diff --git a/components/ItemGrid/AudioBookGridItem.xml b/components/ItemGrid/AudioBookGridItem.xml
@@ -23,6 +23,14 @@
         horizAlign="left"
         vertAlign="center" />
     </LayoutGroup>
+
+    <Rectangle id="progressBackground" visible="false" color="0x00000098" width="290" height="8" translation="[0,295]">
+      <Rectangle id="progress" width="0" height="8" />
+    </Rectangle>
+
+    <Animation id="showProgressBar" duration="0.5" repeat="false" easeFunction="linear">
+      <FloatFieldInterpolator id="showProgressBarField" key="[0.0, 1.0]" fieldToInterp="progress.width" />
+    </Animation>
   </children>
   <interface>
     <field id="itemContent" type="node" onChange="itemContentChanged" />