[vlc-commits] [Git][videolan/vlc][master] qml: fix video progress bar look and feel
Steve Lhomme (@robUx4)
gitlab at videolan.org
Fri Nov 25 10:56:28 UTC 2022
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
More information about the vlc-commits
mailing list