Draw percent complete bar instead of using image api

Fixes #691

components/data/HomeData.brs

@@ -30,10 +30,6 @@ sub setData()
     else if datum.type = "Episode"
         imgParams = { "AddPlayedIndicator": datum.UserData.Played }
 
-        if datum.UserData.PlayedPercentage <> invalid
-            imgParams.Append({ "PercentPlayed": datum.UserData.PlayedPercentage })
-        end if
-
         imgParams.Append({ "maxHeight": 261 })
         imgParams.Append({ "maxWidth": 464 })
 
@@ -68,10 +64,6 @@ sub setData()
     else if datum.type = "Movie"
         imgParams = { AddPlayedIndicator: datum.UserData.Played }
 
-        if datum.UserData.PlayedPercentage <> invalid
-            imgParams.Append({ "PercentPlayed": datum.UserData.PlayedPercentage })
-        end if
-
         imgParams.Append({ "maxHeight": 261 })
         imgParams.Append({ "maxWidth": 175 })
 
@@ -89,10 +81,6 @@ sub setData()
     else if datum.type = "Video"
         imgParams = { AddPlayedIndicator: datum.UserData.Played }
 
-        if datum.UserData.PlayedPercentage <> invalid
-            imgParams.Append({ "PercentPlayed": datum.UserData.PlayedPercentage })
-        end if
-
         imgParams.Append({ "maxHeight": 261 })
         imgParams.Append({ "maxWidth": 175 })
 

components/data/HomeData.xml

@@ -11,10 +11,11 @@
     <field id="json" type="assocarray" onChange="setData" />
     <field id="collectionType" type="string" />
     <field id="imageWidth" type="integer" value="464" />
+    <field id="PlayedPercentage" type="float" value="0" />
     <field id="usePoster" type="bool" value="false" />
   </interface>
   <script type="text/brightscript" uri="pkg:/source/api/baserequest.brs" />
   <script type="text/brightscript" uri="pkg:/source/utils/config.brs" />
   <script type="text/brightscript" uri="pkg:/source/api/Image.brs" />
-    <script type="text/brightscript" uri="HomeData.brs" />
+  <script type="text/brightscript" uri="HomeData.brs" />
 </component>

components/home/HomeItem.brs

@@ -2,10 +2,15 @@ sub init()
 
     m.itemText = m.top.findNode("itemText")
     m.itemPoster = m.top.findNode("itemPoster")
+    m.itemProgress = m.top.findNode("progress")
+    m.itemProgressBackground = m.top.findNode("progressBackground")
     m.itemIcon = m.top.findNode("itemIcon")
     m.itemTextExtra = m.top.findNode("itemTextExtra")
     m.itemPoster.observeField("loadStatus", "onPosterLoadStatusChanged")
 
+    m.showProgressBarAnimation = m.top.findNode("showProgressBar")
+    m.showProgressBarField = m.top.findNode("showProgressBarField")
+
     ' Randomize the background colors
     m.backdrop = m.top.findNode("backdrop")
     posterBackgrounds = m.global.constants.poster_bg_pallet
@@ -74,6 +79,10 @@ sub itemContentChanged()
     if itemData.type = "Episode"
         m.itemText.text = itemData.json.SeriesName
 
+        if itemData.PlayedPercentage > 0
+            drawProgressBar(itemData)
+        end if
+
         if itemData.usePoster = true
             m.itemPoster.uri = itemData.widePosterURL
         else
@@ -99,6 +108,10 @@ sub itemContentChanged()
     if itemData.type = "Movie"
         m.itemText.text = itemData.name
 
+        if itemData.PlayedPercentage > 0
+            drawProgressBar(itemData)
+        end if
+
         ' Use best image, but fallback to secondary if it's empty
         if (itemData.imageWidth = 180 and itemData.posterURL <> "") or itemData.thumbnailURL = ""
             m.itemPoster.uri = itemData.posterURL
@@ -126,6 +139,10 @@ sub itemContentChanged()
     if itemData.type = "Video"
         m.itemText.text = itemData.name
 
+        if itemData.PlayedPercentage > 0
+            drawProgressBar(itemData)
+        end if
+
         if itemData.imageWidth = 180
             m.itemPoster.uri = itemData.posterURL
         else
@@ -203,6 +220,15 @@ sub itemContentChanged()
 
 end sub
 
+'
+' Draws and animates item progress bar
+sub drawProgressBar(itemData)
+    m.itemProgressBackground.width = itemData.imageWidth
+    m.itemProgressBackground.visible = true
+    m.showProgressBarField.keyValue = [0, m.itemPoster.width * (itemData.PlayedPercentage / 100)]
+    m.showProgressBarAnimation.control = "Start"
+end sub
+
 '
 ' Enable title scrolling based on item Focus
 sub focusChanged()

components/home/HomeItem.xml

@@ -4,8 +4,17 @@
     <Rectangle id="backdrop" width="464" height="261" translation="[8,5]" />
     <Poster id="itemIcon" width="100" height="100" translation="[190,85]" loadDisplayMode="scaleToFit" />
     <Poster id="itemPoster" width="464" height="261" translation="[8,5]" loadDisplayMode="scaleToZoom" />
+
+    <Rectangle id="progressBackground" visible="false" color="0x00000098" width="464" height="8" translation="[8,260]">
+      <Rectangle id="progress" color="#00a4dcFF" width="0" height="8" />
+    </Rectangle>
+
     <ScrollingLabel id="itemText" horizAlign="center" vertAlign="center" font="font:SmallBoldSystemFont" height="64" maxWidth="456" translation="[8,267]" repeatCount="0" />
     <Label id="itemTextExtra" horizAlign="left" vertAlign="center" font="font:SmallBoldSystemFont" height="32" width="456" translation="[8,300]" visible="false" color="#777777FF" />
+
+    <Animation id="showProgressBar" delay="1" duration="1" 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" />

components/home/HomeRows.brs

@@ -201,6 +201,10 @@ sub updateContinueItems()
         row.title = tr("Continue Watching")
         itemSize = [464, 331]
         for each item in itemData
+            if item.json?.UserData?.PlayedPercentage <> invalid
+                item.PlayedPercentage = item.json.UserData.PlayedPercentage
+            end if
+
             item.usePoster = row.usePoster
             item.imageWidth = row.imageWidth
             row.appendChild(item)