[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