progress bar prototype

playlet-lib/src/components/VideoPlayerDev/TrickPlayBar.bs

@@ -0,0 +1,16 @@
+const PROGRESS_WIDTH = 1144
+const PROGRESS_HEIGHT = 6
+const SEEK_HANDLE_WIDTH = 16
+const SEEK_HANDLE_HEIGHT = 16
+
+function Init()
+    m.progressBar = m.top.findNode("ProgressBar")
+    m.seekHandle = m.top.findNode("SeekHandle")
+    OnProgressChange()
+end function
+
+function OnProgressChange()
+    position = PROGRESS_WIDTH * m.top.progress
+    m.progressBar.width = position
+    m.seekHandle.translation = [position - SEEK_HANDLE_WIDTH / 2, (PROGRESS_HEIGHT - SEEK_HANDLE_HEIGHT) / 2]
+end function

playlet-lib/src/components/VideoPlayerDev/TrickPlayBar.xml

@@ -0,0 +1,27 @@
+<component name="TrickPlayBar" extends="Group">
+    <interface>
+        <field id="progress" type="float" value="0" onChange="OnProgressChange" />
+        <field id="backgroundBarUri" type="uri" alias="BackgroundBar.uri" />
+    </interface>
+    <children>
+        <Poster
+            id="BackgroundBar"
+            uri="pkg:/images/white-pixel.png"
+            blendColor="#262626"
+            width="1144"
+            height="6" />
+
+        <Poster
+            id="ProgressBar"
+            uri="pkg:/images/white-pixel.png"
+            blendColor="#FF1C30"
+            width="1144"
+            height="6" />
+
+        <Poster
+            id="SeekHandle"
+            uri="pkg:/images/white-circle-xs.png"
+            height="16"
+            width="16" />
+    </children>
+</component>

playlet-lib/src/components/VideoPlayerDev/VideoPlayerDev.bs

@@ -23,6 +23,8 @@ function Init()
     m.playButton = m.top.findNode("PlayButton")
     m.nextButton = m.top.findNode("NextButton")
     m.minimizeButton = m.top.findNode("MinimizeButton")
+    m.trickPlayBar = m.top.findNode("TrickPlayBar")
+    m.progressTimer = m.top.findNode("ProgressTimer")
 
     SetupLoadingSpinner()
 end function
@@ -43,6 +45,8 @@ function OnNodeReady()
     DisposableObserveField(m.top, "state", FuncName(OnPlayerStateChange))
     DisposableObserveField(m.top, "bufferingStatus", FuncName(OnBufferingStatusChange))
 
+    DisposableObserveField(m.progressTimer, "fire", FuncName(OnProgress))
+
     SetNavigation(m.previousButton, "right", m.playButton)
     SetNavigation(m.playButton, "right", m.nextButton)
     SetNavigation(m.nextButton, "right", m.minimizeButton)
@@ -186,12 +190,24 @@ function OnMinimizeButtonSelected()
     VideoQueueUtils.ToggleVideoPictureInPicture(m.videoQueue)
 end function
 
-function OnPlayerStateChange()
+function OnPlayerStateChange() as void
     state = m.top.state
+
+    if state = "stopping" or state = "stopped"
+        m.top.videoUiVisible = false
+        return
+    end if
+
     if state = "playing"
         m.playButton.toggleState = false ' Pause icon
+        m.playButton.disabled = false
+
+        m.progressTimer.control = "start"
     else if state = "paused"
         m.playButton.toggleState = true ' Play icon
+        m.playButton.disabled = false
+    else
+        m.playButton.disabled = true
     end if
 
     if state = "buffering"
@@ -213,6 +229,16 @@ function OnBufferingStatusChange() as void
     m.loadingPercentLabel.text = `${bufferingStatus.percentage}%`
 end function
 
+function OnProgress() as void
+    duration = m.top.duration
+    if duration = 0
+        m.trickPlayBar.progress = 0
+        return
+    end if
+
+    m.trickPlayBar.progress = m.top.position / duration
+end function
+
 function OnDispose()
     m.fullScreenHintTimer.control = "stop"
     m.loadingSpinner.control = "stop"

playlet-lib/src/components/VideoPlayerDev/VideoPlayerDev.xml

@@ -62,7 +62,8 @@
                     <VideoPlayerButton
                         id="PlayButton"
                         iconUri="pkg:/images/icons/player/play.png"
-                        iconUri2="pkg:/images/icons/player/pause.png" />
+                        iconUri2="pkg:/images/icons/player/pause.png"
+                        disabled="true" />
                     <VideoPlayerButton
                         id="NextButton"
                         iconUri="pkg:/images/icons/player/next.png"
@@ -92,15 +93,21 @@
                         font="font:SmallestSystemFont" />
                 </BusySpinner>
             </Group>
+            <Group>
+                <Timer id="ProgressTimer" repeat="true" duration="1" />
+                <TrickPlayBar
+                    id="TrickPlayBar"
+                    translation="[68,660]" />
+            </Group>
         </Group>
 
         <Animation id="minimizeAnimation" duration="0.3" optional="true">
             <FloatFieldInterpolator id="widthInterpolator" key="[0.0, 0.5, 1.0]" fieldToInterp="VideoPlayer.width" />
             <FloatFieldInterpolator id="heightInterpolator" key="[0.0, 0.5, 1.0]" fieldToInterp="VideoPlayer.height" />
             <Vector2DFieldInterpolator id="translationInterpolator" key="[0.0, 0.5, 1.0]" fieldToInterp="VideoPlayer.translation" />
         </Animation>
-        <Rectangle id="fullScreenHint" height="26" color="0x000000" opacity="0.8" visible="false">
-            <Label id="fullScreenHintLabel" text="Press Options (*) for full screen" height="26" color="0xFFFFFF" horizAlign="center" vertAlign="center" font="font:SmallestSystemFont" />
+        <Rectangle id="fullScreenHint" height="26" color="#000000" opacity="0.8" visible="false">
+            <Label id="fullScreenHintLabel" text="Press Options (*) for full screen" height="26" color="#FFFFFF" horizAlign="center" vertAlign="center" font="font:SmallestSystemFont" />
             <Timer id="fullScreenHintTimer" duration="5" />
         </Rectangle>
     </children>

playlet-lib/src/images/white-circle.svg.meta.json5

@@ -0,0 +1,17 @@
+{
+  inputHash: '082106375220883816c8b3b54dbcd6d1',
+  outputs: [
+    {
+      outputFilePath: 'images/white-circle.png',
+      outputHash: '9400f095b6f953a48f570c64674cb545',
+      width: 256,
+      height: 256,
+    },
+    {
+      outputFilePath: 'images/white-circle-xs.png',
+      outputHash: 'be5ca187a83273c7aae09b2c55e93934',
+      width: 20,
+      height: 20,
+    },
+  ],
+}