Fix ui flicker in dev player

iBicha · Jun 28, 2024 · ee8f7a0 · ee8f7a0
1 parent 5c215ca
commit ee8f7a0
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 3 deletions.
diff --git a/playlet-lib/src/components/VideoPlayerDev/VideoPlayerButton.bs b/playlet-lib/src/components/VideoPlayerDev/VideoPlayerButton.bs
@@ -3,6 +3,7 @@ import "pkg:/source/utils/Types.bs"
 function Init()
     m.background = m.top.findNode("background")
     m.icon = m.top.findNode("icon")
+    m.icon2 = m.top.findNode("icon2")
 
     OnDisabledChange()
 
@@ -19,9 +20,11 @@ function OnButtonFocused()
     if buttonFocused
         m.background.blendColor = m.top.focusedBackgroundColor
         m.icon.blendColor = m.top.focusedIconColor
+        m.icon2.blendColor = m.top.focusedIconColor
     else
         m.background.blendColor = m.top.backgroundColor
         m.icon.blendColor = m.top.iconColor
+        m.icon2.blendColor = m.top.iconColor
     end if
 end function
 
@@ -31,6 +34,7 @@ function OnDisabledChange()
     if disabled
         m.background.blendColor = m.top.disabledBackgroundColor
         m.icon.blendColor = m.top.disabledIconColor
+        m.icon2.blendColor = m.top.disabledIconColor
     else
         OnButtonFocused()
     end if
@@ -52,3 +56,10 @@ function OnkeyEvent(key as string, press as boolean) as boolean
 
     return false
 end function
+
+function OnToggleStateChange()
+    toggleState = m.top.toggleState
+
+    m.icon.visible = toggleState
+    m.icon2.visible = not toggleState
+end function
diff --git a/playlet-lib/src/components/VideoPlayerDev/VideoPlayerButton.xml b/playlet-lib/src/components/VideoPlayerDev/VideoPlayerButton.xml
@@ -5,6 +5,9 @@
         <field id="disabledBackgroundColor" type="color" value="#292929" />
 
         <field id="iconUri" type="uri" alias="icon.uri" />
+        <field id="iconUri2" type="uri" alias="icon2.uri" />
+        <field id="toggleState" type="boolean" value="true" onChange="OnToggleStateChange" />
+
         <field id="iconColor" type="color" value="#DDDDDD" />
         <field id="focusedIconColor" type="color" value="#262626" />
         <field id="disabledIconColor" type="color" value="#606060" />
@@ -24,6 +27,12 @@
                 width="42"
                 height="42">
             </Poster>
+            <Poster
+                id="icon2"
+                width="42"
+                height="42"
+                visible="false">
+            </Poster>
         </Poster>
     </children>
 </component>
diff --git a/playlet-lib/src/components/VideoPlayerDev/VideoPlayerDev.bs b/playlet-lib/src/components/VideoPlayerDev/VideoPlayerDev.bs
@@ -170,9 +170,9 @@ end function
 function OnPlayerStateChange()
     state = m.top.state
     if state = "playing"
-        m.playButton.iconUri = "pkg:/images/icons/player/pause.png"
+        m.playButton.toggleState = false ' Pause icon
     else if state = "paused"
-        m.playButton.iconUri = "pkg:/images/icons/player/play.png"
+        m.playButton.toggleState = true ' Play icon
     end if
 end function
 

diff --git a/playlet-lib/src/components/VideoPlayerDev/VideoPlayerDev.xml b/playlet-lib/src/components/VideoPlayerDev/VideoPlayerDev.xml
@@ -54,7 +54,8 @@
                     disabled="true" />
                 <VideoPlayerButton
                     id="PlayButton"
-                    iconUri="pkg:/images/icons/player/play.png" />
+                    iconUri="pkg:/images/icons/player/play.png"
+                    iconUri2="pkg:/images/icons/player/pause.png" />
                 <VideoPlayerButton
                     id="NextButton"
                     iconUri="pkg:/images/icons/player/next.png"