Add progress bar to pause menu

jellyfin · Nov 11, 2023 · 3ccf916 · 3ccf916
1 parent fade06a
commit 3ccf916
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 1 deletion.
diff --git a/components/video/PauseMenu.bs b/components/video/PauseMenu.bs
@@ -7,9 +7,14 @@ sub init()
     m.inactivityTimer = m.top.findNode("inactivityTimer")
     m.itemTitle = m.top.findNode("itemTitle")
     m.videoPlayPause = m.top.findNode("videoPlayPause")
+    m.videoPositionTime = m.top.findNode("videoPositionTime")
+    m.videoRemainingTime = m.top.findNode("videoRemainingTime")
+    m.progressBar = m.top.findNode("progressBar")
+    m.progressBarBackground = m.top.findNode("progressBarBackground")
 
     m.top.observeField("visible", "onVisibleChanged")
     m.top.observeField("hasFocus", "onFocusChanged")
+    m.top.observeField("progressPercentage", "onProgressPercentageChanged")
     m.top.observeField("playbackState", "onPlaybackStateChanged")
     m.top.observeField("itemTitleText", "onItemTitleTextChanged")
 
@@ -23,6 +28,14 @@ sub init()
     m.deviceInfo = CreateObject("roDeviceInfo")
 end sub
 
+' onProgressPercentageChanged: Handler for changes to m.top.progressPercentage param
+'
+sub onProgressPercentageChanged()
+    m.videoPositionTime.text = secondsToHuman(m.top.positionTime)
+    m.videoRemainingTime.text = secondsToHuman(m.top.remainingPositionTime)
+    m.progressBar.width = m.progressBarBackground.width * m.top.progressPercentage
+end sub
+
 ' onPlaybackStateChanged: Handler for changes to m.top.playbackState param
 '
 sub onPlaybackStateChanged()

diff --git a/components/video/PauseMenu.xml b/components/video/PauseMenu.xml
@@ -10,17 +10,27 @@
       <IconButton id="showSubtitleMenu" background="#070707" focusBackground="#00a4dc" padding="0" icon="pkg:/images/icons/subtitle.png" height="65" width="100" />
     </ButtonGroup>
 
-    <ButtonGroup id="videoControls" itemSpacings="[20]" layoutDirection="horiz" horizAlignment="center" translation="[960,950]">
+    <ButtonGroup id="videoControls" itemSpacings="[20]" layoutDirection="horiz" horizAlignment="center" translation="[960,875]">
       <IconButton id="chapterBack" background="#070707" focusBackground="#00a4dc" padding="16" icon="pkg:/images/icons/previousChapter.png" height="65" width="100" />
       <IconButton id="videoPlayPause" background="#070707" focusBackground="#00a4dc" padding="35" icon="pkg:/images/icons/play.png" height="65" width="100" />
       <IconButton id="chapterNext" background="#070707" focusBackground="#00a4dc" padding="16" icon="pkg:/images/icons/nextChapter.png" height="65" width="100" />
     </ButtonGroup>
 
+    <Rectangle id="progressBarBackground" color="0x00000098" width="1536" height="8" translation="[192,970]">
+      <Rectangle id="progressBar" color="#e5e4e2FF" width="0" height="8" />
+    </Rectangle>
+
+    <Label id="videoPositionTime" font="font:SmallestSystemFont" color="0xffffffFF" translation="[192,985]" />
+    <Label id="videoRemainingTime" font="font:SmallestSystemFont" color="0xffffffFF" horizAlign="right" width="200" translation="[1528,985]" />
+
     <Timer id="inactivityTimer" duration="1" repeat="true" />
   </children>
   <interface>
     <field id="itemTitleText" type="string" />
     <field id="inactiveTimeout" type="integer" />
+    <field id="progressPercentage" type="float" />
+    <field id="positionTime" type="float" />
+    <field id="remainingPositionTime" type="float" />
     <field id="playbackState" type="string" alwaysNotify="true" />
     <field id="action" type="string" alwaysNotify="true" />
     <field id="showChapterList" type="boolean" alwaysNotify="true" />

diff --git a/components/video/VideoPlayerView.bs b/components/video/VideoPlayerView.bs
@@ -437,6 +437,12 @@ end sub
 
 ' When Video Player state changes
 sub onPositionChanged()
+
+    ' Pass video position data into pause menu
+    m.pauseMenu.progressPercentage = m.top.position / m.top.duration
+    m.pauseMenu.positionTime = m.top.position
+    m.pauseMenu.remainingPositionTime = m.top.duration - m.top.position
+
     if isValid(m.captionTask)
         m.captionTask.currentPos = Int(m.top.position * 1000)
     end if