[vlc-devel] [PATCH 3/6] qml: add buffer indicator

[Abel Tesfaye]

From: Abel Tesfaye <Abeltesfaye45 at gmail.com>

fixes #22197
---
 modules/gui/qt/qml/player/SliderBar.qml | 74 +++++++++++++++++++++++++
 modules/gui/qt/qml/style/VLCColors.qml  |  2 +
 2 files changed, 76 insertions(+)

diff --git a/modules/gui/qt/qml/player/SliderBar.qml b/modules/gui/qt/qml/player/SliderBar.qml
index d790e18683..b9a4f3248f 100644
--- a/modules/gui/qt/qml/player/SliderBar.qml
+++ b/modules/gui/qt/qml/player/SliderBar.qml
@@ -40,6 +40,7 @@ Slider {
     property int barHeight: 5
 
     background: Rectangle {
+        id: sliderRect
         width: control.availableWidth
         implicitHeight: control.implicitHeight
         height: implicitHeight
@@ -52,6 +53,79 @@ Slider {
             radius: control.barHeight
         }
 
+        Rectangle {
+            id: bufferRect    
+            property int bufferAnimWidth: 100 * VLCStyle.scale
+            property int bufferAnimPosition: 0
+            property int bufferFrames: 1000
+            property alias animateLoading: loadingAnim.running
+
+            height: control.barHeight
+            opacity: 0.4
+            color: VLCStyle.colors.buffer
+            radius: control.barHeight
+
+            states: [
+                State {
+                    name: "buffering not started"
+                    when: player.buffering === 0
+                    PropertyChanges {
+                        target: bufferRect
+                        width: bufferAnimWidth
+                        visible: true
+                        x: (bufferAnimPosition / bufferFrames)* (parent.width - bufferAnimWidth)
+                        animateLoading: true
+                    }
+                },
+                State {
+                    name: "time to start playing known"
+                    when: player.buffering < 1
+                    PropertyChanges {
+                        target: bufferRect
+                        width: player.buffering * parent.width
+                        visible: true
+                        x: 0
+                        animateLoading: false
+                    }
+                },
+                State {
+                    name: "playing from buffer"
+                    when: player.buffering === 1
+                    PropertyChanges {
+                        target: bufferRect
+                        width: player.buffering * parent.width
+                        visible: false
+                        x: 0
+                        animateLoading: false
+                    }
+                }
+            ]
+
+            SequentialAnimation on bufferAnimPosition {
+                id: loadingAnim
+                running: bufferRect.animateLoading
+                loops: Animation.Infinite
+                PropertyAnimation {
+                    from: 0.0
+                    to: bufferRect.bufferFrames
+                    duration: 2000
+                    easing.type: "OutBounce"
+                }
+                PauseAnimation {
+                    duration: 500
+                }
+                PropertyAnimation {
+                    from: bufferRect.bufferFrames
+                    to: 0.0
+                    duration: 2000
+                    easing.type: "OutBounce"
+                }
+                PauseAnimation {
+                    duration: 500
+                }
+            }
+        }
+
         Text {
             text: player.time.toString()
             color: VLCStyle.colors.text
diff --git a/modules/gui/qt/qml/style/VLCColors.qml b/modules/gui/qt/qml/style/VLCColors.qml
index 228eac0285..9fde3274b8 100644
--- a/modules/gui/qt/qml/style/VLCColors.qml
+++ b/modules/gui/qt/qml/style/VLCColors.qml
@@ -75,6 +75,8 @@ Item {
 
     property color alert: "red";
 
+    property color buffer: "#696969";
+
     property var colorSchemes: ["system", "day", "night"]
 
     state: "system"
-- 
2.21.0