[vlc-commits] [Git][videolan/vlc][master] qml: fix video progress bar look and feel

[Steve Lhomme (@robUx4)]

Steve Lhomme pushed to branch master at VideoLAN / VLC


Commits:
28bcf1da by Pierre Lamot at 2022-11-25T10:20:04+00:00
qml: fix video progress bar look and feel

the progress bar fills the width of the thumbnail and respects the thumbnail
radius

- - - - -


2 changed files:

- modules/gui/qt/medialibrary/qml/VideoGridItem.qml
- modules/gui/qt/widgets/qml/VideoProgressBar.qml


Changes:

=====================================
modules/gui/qt/medialibrary/qml/VideoGridItem.qml
=====================================
@@ -72,12 +72,12 @@ Widgets.GridItem {
                 bottom: parent.bottom
                 left: parent.left
                 right: parent.right
-                rightMargin: root.pictureRadius
             }
 
-            visible: (value > 0)
+            visible: (model.progress > 0)
 
-            value: (model.progress > 0) ? model.progress : 0
+            radius: root.pictureRadius
+            value: Helpers.clamp(model.progress, 0, 1)
         }
     }
 


=====================================
modules/gui/qt/widgets/qml/VideoProgressBar.qml
=====================================
@@ -16,25 +16,52 @@
  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston MA 02110-1301, USA.
  *****************************************************************************/
 import QtQuick 2.11
-import QtQuick.Templates 2.4 as T
 import "qrc:///style/"
 
-T.ProgressBar {
+//we want the progress bar to match the radius of the of the video thumbnail
+//so we generarte two rectangles with the right radius and we clip the part we
+//want to hide
+Item {
     id: progressBar
-    implicitHeight: VLCStyle.dp(2, VLCStyle.scale)
 
-    background: Rectangle {
+    implicitHeight: VLCStyle.dp(4, VLCStyle.scale)
+
+    clip :true
+
+    property real value: 0
+    property int radius: implicitHeight
+
+    Rectangle {
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+
+        height: Math.max(progressBar.radius * 2, //to have at least the proper radius applied
+                         parent.height + radius) //the top radius section should be always clipped
+
         color: "white"
-    }
-    contentItem: Item {
+        radius: progressBar.radius
+
+        //use clipping again to delimit the viewed part as we want the accent section to follow the given as well
+        Item {
+            clip: true
 
-        Rectangle {
-            width: progressBar.visualPosition * parent.width
             anchors.top: parent.top
             anchors.bottom: parent.bottom
             anchors.left: parent.left
-            color: VLCStyle.colors.accent
+            width: progressBar.value * parent.width
+
+            Rectangle {
+                width: progressBar.width
+
+                anchors.top: parent.top
+                anchors.bottom: parent.bottom
+                anchors.left: parent.left
+
+                color: VLCStyle.colors.accent
+                radius: progressBar.radius
+            }
         }
     }
-    Accessible.ignored: true
 }



View it on GitLab: https://code.videolan.org/videolan/vlc/-/commit/28bcf1daab7266ea753be29a07fa0bf9dfabba30

-- 
View it on GitLab: https://code.videolan.org/videolan/vlc/-/commit/28bcf1daab7266ea753be29a07fa0bf9dfabba30
You're receiving this email because of your account on code.videolan.org.


VideoLAN code repository instance