[vlc-commits] [Git][videolan/vlc][master] 4 commits: qml: implement Slider widget

Jean-Baptiste Kempf (@jbk) gitlab at videolan.org
Sun Mar 5 20:04:30 UTC 2023



Jean-Baptiste Kempf pushed to branch master at VideoLAN / VLC


Commits:
07c80498 by Prince Gupta at 2023-03-05T19:16:19+00:00
qml: implement Slider widget

- - - - -
55dea64a by Prince Gupta at 2023-03-05T19:16:19+00:00
qml: fix missing import in ExpandSpacerWidget

- - - - -
6aab1075 by Prince Gupta at 2023-03-05T19:16:19+00:00
qml: use Slider widget in PlaybackSpeed control

- - - - -
3cb6645b by Prince Gupta at 2023-03-05T19:16:19+00:00
qml: use Slider widget in VolumeWidget

- - - - -


6 changed files:

- modules/gui/qt/Makefile.am
- modules/gui/qt/player/qml/PlaybackSpeed.qml
- modules/gui/qt/player/qml/controlbarcontrols/ExpandingSpacerWidget.qml
- modules/gui/qt/player/qml/controlbarcontrols/VolumeWidget.qml
- modules/gui/qt/vlc.qrc
- + modules/gui/qt/widgets/qml/Slider.qml


Changes:

=====================================
modules/gui/qt/Makefile.am
=====================================
@@ -1026,6 +1026,7 @@ libqt_plugin_la_QML = \
 	gui/qt/widgets/qml/ScanProgressBar.qml \
 	gui/qt/widgets/qml/ScrollingText.qml \
 	gui/qt/widgets/qml/SearchBox.qml \
+	gui/qt/widgets/qml/Slider.qml \
 	gui/qt/widgets/qml/SortControl.qml \
 	gui/qt/widgets/qml/SpinBoxExt.qml \
 	gui/qt/widgets/qml/StackViewExt.qml \


=====================================
modules/gui/qt/player/qml/PlaybackSpeed.qml
=====================================
@@ -19,7 +19,6 @@
 import QtQuick 2.11
 import QtQuick.Controls 2.4
 import QtQuick.Layouts 1.11
-import QtQuick.Templates 2.4 as T
 
 import org.videolan.vlc 0.1
 
@@ -234,13 +233,11 @@ ColumnLayout {
         }
     }
 
-    T.Slider {
+    Widgets.Slider {
         id: slider
 
         Layout.fillWidth: true
 
-        implicitHeight: VLCStyle.heightBar_small
-
         // NOTE: These values come from the VLC 3.x implementation.
         from: -34
         to: 34
@@ -249,6 +246,12 @@ ColumnLayout {
 
         wheelEnabled: true
 
+        valueText: function (value) {
+            return sliderToSpeed(value).toFixed(2)
+        }
+
+        tooltipFollowsMouse: true
+
         Navigation.parentItem: root
         Navigation.upItem: buttonReset
         Navigation.downItem: comboBox
@@ -258,79 +261,6 @@ ColumnLayout {
 
         onValueChanged: root._applyPlayer(value)
 
-        background: Rectangle {
-            width: slider.availableWidth
-            height: implicitHeight
-
-            implicitWidth: VLCStyle.dp(256, VLCStyle.scale)
-            implicitHeight: VLCStyle.dp(4, VLCStyle.scale)
-
-            x: slider.leftPadding
-            y: slider.topPadding + slider.availableHeight / 2 - height / 2
-
-            radius: VLCStyle.dp(2, VLCStyle.scale)
-
-            color: theme.bg.secondary
-
-            Rectangle {
-                width: slider.visualPosition * parent.width
-                height: parent.height
-
-                radius: parent.radius
-
-                color: root._color
-            }
-        }
-
-        handle: Rectangle {
-            width: VLCStyle.icon_small
-            height: width
-            radius: width * .5
-
-            x: slider.leftPadding + slider.visualPosition * (slider.availableWidth - width)
-            y: slider.topPadding + slider.availableHeight / 2 - height / 2
-
-            color: root._color
-
-        }
-
-        MouseArea {
-            id: toolTipTracker
-
-            anchors.fill: parent
-
-            acceptedButtons: Qt.NoButton
-
-            hoverEnabled: true
-
-            onPressed: {
-                mouse.accepted = false
-            }
-
-            preventStealing: true
-
-            propagateComposedEvents: true
-        }
-
-        Widgets.PointingTooltip {
-           z: 1 // without this tooltips get placed below root's parent popup
-
-           property real _mouseX: toolTipTracker.mouseX
-
-           pos: Qt.point(_mouseX, slider.handle.width / 2)
-
-           visible: !slider.pressed && toolTipTracker.containsMouse
-
-           text: {
-               if (!visible) return ""
-
-               var v = slider.valueAt(slider.positionAt(_mouseX))
-               return sliderToSpeed(v).toFixed(2)
-           }
-
-           colors: root.colors
-        }
-
         MouseArea {
             anchors.fill: parent
 
@@ -342,13 +272,6 @@ ColumnLayout {
                 root._shiftPressed = (mouse.modifiers === Qt.ShiftModifier)
             }
         }
-
-        function positionAt(x) {
-            // find postion under x, taken from qt sources QQuickSlider.cpp
-            var contentX = x - slider.leftPadding - slider.handle.width / 2
-            var extend = slider.availableWidth - slider.handle.width
-            return x / extend
-        }
     }
 
     Item {


=====================================
modules/gui/qt/player/qml/controlbarcontrols/ExpandingSpacerWidget.qml
=====================================
@@ -18,6 +18,8 @@
 import QtQuick 2.11
 import QtQuick.Templates 2.4 as T
 
+import org.videolan.vlc 0.1
+
 import "qrc:///widgets/" as Widgets
 import "qrc:///style/"
 
@@ -35,7 +37,7 @@ Item {
 
     readonly property ColorContext colorContext: ColorContext {
         id: theme
-        colorSet: ColorContext.Button
+        colorSet: ColorContext.ButtonStandard
     }
 
     T.Label {


=====================================
modules/gui/qt/player/qml/controlbarcontrols/VolumeWidget.qml
=====================================
@@ -30,7 +30,10 @@ T.Pane {
 
     property bool paintOnly: false
 
-    readonly property color sliderColor: (volControl.position > _fullvolpos) ? theme.fg.negative : theme.fg.primary
+    readonly property color sliderColor: {
+        var theme = volControl.colorContext
+        return (volControl.position > _fullvolpos) ? theme.fg.negative : theme.fg.primary
+    }
 
     readonly property var _player: paintOnly ? ({ muted: false, volume: .5 }) : Player
     readonly property int _maxvol: MainCtx.maxVolume
@@ -46,15 +49,6 @@ T.Pane {
     Keys.priority: Keys.AfterItem
     Keys.onPressed: Navigation.defaultKeyAction(event)
 
-    readonly property ColorContext colorContext: ColorContext {
-        id: theme
-        colorSet: ColorContext.Slider
-
-        enabled: volControl.enabled || root.paintOnly
-        focused: volControl.visualFocus
-        hovered: volControl.hovered
-    }
-
     RowLayout {
         id: volumeWidget
 
@@ -84,15 +78,14 @@ T.Pane {
             Navigation.rightItem: volControl
         }
 
-        T.Slider {
+        Widgets.Slider {
             id: volControl
 
+            // FIXME: use VLCStyle
             implicitWidth: VLCStyle.dp(100, VLCStyle.scale)
-            implicitHeight: Math.max(background ? background.implicitHeight : 0,
-                                    (handle ? handle.implicitHeight : 0) + topPadding + bottomPadding)
 
             Layout.fillHeight: true
-            Layout.margins: VLCStyle.dp(5, VLCStyle.scale)
+            Layout.margins: VLCStyle.margin_xsmall
 
             property bool _inhibitPlayerVolumeUpdate: false
 
@@ -104,10 +97,18 @@ T.Pane {
 
             property bool _keyPressed: false
 
+            color: root.sliderColor
+
             from: 0
             to: root._maxvolpos
             opacity: _player.muted ? 0.5 : 1
 
+            enabled: !root.paintOnly // disables event handling depending on this
+
+            valueText: function (value) {
+                return Math.round(value * 100) + "%"
+            }
+
             Accessible.name: I18n.qtr("Volume")
 
             Keys.onPressed: {
@@ -191,91 +192,54 @@ T.Pane {
                 }
             }
 
-            Loader {
-                id: volumeTooltip
-                active: !paintOnly
-
-                sourceComponent: Widgets.PointingTooltip {
-                    visible: sliderMouseArea.pressed || volControl.pressed || volControl.hovered || volControl.visualFocus
+            Rectangle{
+                id: tickmark
 
-                    text: Math.round(Player.volume * 100) + "%"
-
-                    pos: Qt.point(handle.x + handle.width / 2, handle.y)
-
-                    //tooltip is a Popup, palette should be passed explicitly
-                    colorContext.palette: theme.palette
-                }
-            }
+                parent: volControl.background
 
-            background: Rectangle {
-                id: sliderBg
-                x: volControl.leftPadding
-                y: volControl.topPadding + volControl.availableHeight / 2 - height / 2
-                implicitWidth: parent.width
-                implicitHeight: VLCStyle.dp(4, VLCStyle.scale)
-                height: implicitHeight
-                width: volControl.availableWidth
-                radius: VLCStyle.dp(4, VLCStyle.scale)
-                color: theme.bg.primary
-
-                Rectangle {
-                    id: filled
-                    width: volControl.visualPosition * sliderBg.width
-                    height: parent.height
-                    radius: VLCStyle.dp(4, VLCStyle.scale)
-                    color: root.sliderColor
-                }
-                Rectangle{
-                    id: tickmark
-                    x : parent.width * root._fullvolpos
-                    width: VLCStyle.dp(1, VLCStyle.scale)
-                    height: parent.height
-                    radius: VLCStyle.dp(2, VLCStyle.scale)
+                x : parent.width * root._fullvolpos
+                width: VLCStyle.dp(1, VLCStyle.scale)
+                height: parent.height
+                radius: VLCStyle.dp(2, VLCStyle.scale)
 
-                    // NOTE: This shouldn't be visible when the volume stops before a 100.
-                    visible: (root._maxvol > 100)
+                // NOTE: This shouldn't be visible when the volume stops before a 100.
+                visible: (root._maxvol > 100)
 
-                    color: root.sliderColor
+                // FIXME: tick mark is not visible when it's over slider
+                color: root.sliderColor
 
-                    // NOTE: This is a helper to select the default volume when clicking on the
-                    //       tickmark. We apply a higher clamp value to achieve that behavior on
-                    //       the Slider.
-                    MouseArea {
-                        anchors.fill: parent
+                // NOTE: This is a helper to select the default volume when clicking on the
+                //       tickmark. We apply a higher clamp value to achieve that behavior on
+                //       the Slider.
+                MouseArea {
+                    anchors.fill: parent
 
-                        anchors.margins: -(VLCStyle.dp(4, VLCStyle.scale))
+                    anchors.margins: -(VLCStyle.dp(4, VLCStyle.scale))
 
-                        onPressed: {
-                            mouse.accepted = false
+                    onPressed: {
+                        mouse.accepted = false
 
-                            if (mouse.modifiers === Qt.ShiftModifier)
-                                return
+                        if (mouse.modifiers === Qt.ShiftModifier)
+                            return
 
-                            volControl._clamp = 0.1
-                        }
+                        volControl._clamp = 0.1
                     }
                 }
             }
 
-            handle: Rectangle {
-                id: handle
-                x: volControl.leftPadding + volControl.visualPosition * (volControl.availableWidth - width)
-                y: volControl.topPadding + volControl.availableHeight / 2 - height / 2
-
-                implicitWidth: VLCStyle.dp(8, VLCStyle.scale)
-                implicitHeight: implicitWidth
-                radius: width * 0.5
-                visible: (paintOnly || volControl.hovered || volControl.activeFocus)
-                color: root.sliderColor
-            }
-
             MouseArea {
                 id: sliderMouseArea
+
                 anchors.fill: parent
 
                 acceptedButtons: (Qt.LeftButton | Qt.RightButton)
 
                 onPressed: {
+                    if (root.paintOnly) {
+                        mouse.accepted = true
+                        return
+                    }
+
                     volControl._shiftPressed = (mouse.modifiers === Qt.ShiftModifier)
 
                     if (mouse.button === Qt.LeftButton) {


=====================================
modules/gui/qt/vlc.qrc
=====================================
@@ -222,6 +222,7 @@
         <file alias="CSDThemeButtonSet.qml">widgets/qml/CSDThemeButtonSet.qml</file>
         <file alias="CSDThemeButton.qml">widgets/qml/CSDThemeButton.qml</file>
         <file alias="TextFieldExt.qml">widgets/qml/TextFieldExt.qml</file>
+        <file alias="Slider.qml">widgets/qml/Slider.qml</file>
     </qresource>
     <qresource prefix="/network">
         <file alias="AddressbarButton.qml">network/qml/AddressbarButton.qml</file>


=====================================
modules/gui/qt/widgets/qml/Slider.qml
=====================================
@@ -0,0 +1,162 @@
+/*****************************************************************************
+ * Copyright (C) 2023 VLC authors and VideoLAN
+ *
+ * Authors: Prince Gupta <guptaprince8832 at gmail.com>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * ( at your option ) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston MA 02110-1301, USA.
+ *****************************************************************************/
+
+import QtQuick 2.11
+import QtQuick.Templates 2.4 as T
+
+import org.videolan.vlc 0.1
+
+import "qrc:///style/"
+
+T.Slider {
+    id: control
+
+    // helper to set colors based on given particular theme
+    readonly property ColorContext colorContext: ColorContext {
+        id: theme
+
+        colorSet: ColorContext.Slider
+
+        enabled: control.enabled
+        focused: control.visualFocus
+        hovered: control.hovered
+    }
+
+    // colors based on different parts and states
+    property color color: theme.fg.primary
+    property color bgColor: theme.bg.primary
+
+    property real handleWidth: VLCStyle.icon_xsmall
+
+    property real radius: VLCStyle.dp(3, VLCStyle.scale)
+
+    // when set the tooltip will follow the mouse when control is hoverred
+    // else tooltip will always be shown at current value.
+    property bool tooltipFollowsMouse: false
+
+    // valueText -> function(value)
+    // arg value is between from and to
+    // returns the text for the given value, used for tooltip etc.
+    property var valueText: function (value) {
+        return value
+    }
+
+    // on control.pressed, tooltipTracker mouse states are invalid
+    readonly property real _tooltipX: (tooltipFollowsMouse && !control.pressed)
+                                      ? tooltipTracker.mouseX
+                                      : (handle.x + handle.width / 2) // handle center
+
+    // find position under given x, can be used with Slider::valueAt()
+    // x is coordinate in this control's coordinate space
+    function positionAt(x) {
+        // taken from qt sources QQuickSlider.cpp
+        // TODO: support vertical slider
+        var hw = control.handle.width
+        var offset = control.leftPadding + hw / 2
+        var extend = control.availableWidth - hw
+        return (x - offset) / extend
+    }
+
+    implicitWidth: Math.max(background ? background.implicitWidth : 0,
+                           (handle ? handle.implicitWidth : 0) + leftPadding + rightPadding)
+    implicitHeight: Math.max(background ? background.implicitHeight : 0,
+                            (handle ? handle.implicitHeight : 0) + topPadding + bottomPadding)
+
+    handle: Rectangle {
+        x: control.leftPadding + (control.horizontal
+                                  ? control.visualPosition * (control.availableWidth - width)
+                                  : (control.availableWidth - width) / 2)
+
+        y: control.topPadding + (control.horizontal
+                                 ? (control.availableHeight - height) / 2
+                                 : control.visualPosition * (control.availableHeight - height))
+
+        implicitWidth: control.handleWidth
+        implicitHeight: implicitWidth
+
+        width: control.handleWidth
+        height: width
+        radius: width / 2
+
+        color: control.color
+        visible: (control.visualFocus || control.pressed) && control.enabled
+    }
+
+    background: Rectangle {
+        x: control.leftPadding + (control.horizontal ? 0 : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : 0)
+
+        implicitWidth: control.horizontal ? VLCStyle.heightBar_xlarge : VLCStyle.heightBar_xxsmall
+        implicitHeight: control.horizontal ? VLCStyle.heightBar_xxsmall : VLCStyle.heightBar_xlarge
+
+        width: control.horizontal ? control.availableWidth : implicitWidth
+        height: control.horizontal ? implicitHeight : control.availableHeight
+
+        radius: control.radius
+
+        color: control.bgColor
+        scale: control.horizontal && control.mirrored ? -1 : 1
+
+        Rectangle {
+            y: control.horizontal ? 0 : control.visualPosition * parent.height
+            width: control.horizontal ? control.position * parent.width : parent.height
+            height: control.horizontal ? parent.height : control.position * parent.height
+
+            radius: control.radius
+            color: control.color
+        }
+    }
+
+    MouseArea {
+        id: tooltipTracker
+
+        anchors.fill: parent
+
+        acceptedButtons: Qt.NoButton
+
+        hoverEnabled: true
+
+        onPressed: {
+            mouse.accepted = false
+        }
+
+        preventStealing: true
+
+        propagateComposedEvents: true
+    }
+
+    PointingTooltip {
+       z: 1 // without this tooltips get placed below root's parent popup (if any)
+
+       pos: Qt.point(control._tooltipX, control.handle.height / 2)
+
+       visible: control.pressed || tooltipTracker.containsMouse
+
+       text: {
+           if (!visible) return ""
+
+           var v = control.valueAt(control.positionAt(pos.x))
+           return control.valueText(v)
+       }
+
+       //tooltip is a Popup, palette should be passed explicitly
+       colorContext.palette: theme.palette
+    }
+}



View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/d4d9ccb5849867797d4edc222f943d156231b748...3cb6645b947a33b157528e653e25267ed0045b09

-- 
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/d4d9ccb5849867797d4edc222f943d156231b748...3cb6645b947a33b157528e653e25267ed0045b09
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