[vlc-devel] [PATCH 7/8] qml: Add volume widget
pierre at videolabs.io
pierre at videolabs.io
Mon Jun 17 17:11:29 CEST 2019
Hi,
License header is missing in VolumeWidget.qml
On 2019-06-17 16:55, Rohan Rajpal wrote:
> Add the volume widget for the player controlbar
> ---
> modules/gui/qt/Makefile.am | 1 +
> modules/gui/qt/qml/player/ControlButtons.qml | 5 +
> modules/gui/qt/qml/player/VolumeWidget.qml | 138 +++++++++++++++++++
> modules/gui/qt/qml/style/VLCColors.qml | 5 +
> modules/gui/qt/vlc.qrc | 1 +
> 5 files changed, 150 insertions(+)
> create mode 100644 modules/gui/qt/qml/player/VolumeWidget.qml
>
> diff --git a/modules/gui/qt/Makefile.am b/modules/gui/qt/Makefile.am
> index d48f469132..1503a93000 100644
> --- a/modules/gui/qt/Makefile.am
> +++ b/modules/gui/qt/Makefile.am
> @@ -536,6 +536,7 @@ libqt_plugin_la_QML = \
> gui/qt/qml/player/TrackSelector.qml \
> gui/qt/qml/player/ControlBar.qml \
> gui/qt/qml/player/ControlButtons.qml \
> + gui/qt/qml/player/VolumeWidget.qml \
> gui/qt/qml/player/ModalControlBar.qml \
> gui/qt/qml/player/SliderBar.qml \
> gui/qt/qml/dialogs/Dialogs.qml \
> diff --git a/modules/gui/qt/qml/player/ControlButtons.qml
> b/modules/gui/qt/qml/player/ControlButtons.qml
> index 8b8c05439e..a293d8d386 100644
> --- a/modules/gui/qt/qml/player/ControlButtons.qml
> +++ b/modules/gui/qt/qml/player/ControlButtons.qml
> @@ -55,6 +55,7 @@ Item{
> case PlayerControlBarModel.SKIP_FW_BUTTON: return
> stepFwdBtnDelegate
> case PlayerControlBarModel.SKIP_BACK_BUTTON: return
> stepBackBtnDelegate
> case PlayerControlBarModel.QUIT_BUTTON: return quitBtnDelegate
> + case PlayerControlBarModel.VOLUME: return volumeBtnDelegate
> }
> console.log("button delegate id " + inpID + " doesn't
> exists")
> return spacerDelegate
> @@ -389,4 +390,8 @@ Item{
> }
> }
>
> + Component{
> + id: volumeBtnDelegate
> + VolumeWidget{}
> + }
> }
> diff --git a/modules/gui/qt/qml/player/VolumeWidget.qml
> b/modules/gui/qt/qml/player/VolumeWidget.qml
> new file mode 100644
> index 0000000000..a49131ee68
> --- /dev/null
> +++ b/modules/gui/qt/qml/player/VolumeWidget.qml
> @@ -0,0 +1,138 @@
> +import QtQuick 2.11
> +import QtQuick.Layouts 1.3
> +import QtQuick.Controls 2.4
> +import QtGraphicalEffects 1.0
> +
> +import "qrc:///utils/" as Utils
> +import "qrc:///style/"
> +
> +FocusScope{
> + id: widgetfscope
> + x: volumeWidget.x
> + y: volumeWidget.y
> + width: volumeWidget.width
> + height: volumeWidget.height
> +
> + property bool acceptFocus: true
> +
> + RowLayout{
> + id: volumeWidget
> + Utils.IconToolButton{
> + id: volumeBtn
> + size: VLCStyle.icon_normal
> + text:
> + if( player.muted )
> + VLCIcons.volume_muted
> + else if ( player.volume < .33 )
> + VLCIcons.volume_low
> + else if( player.volume <= .66 )
> + VLCIcons.volume_medium
> + else
> + VLCIcons.volume_high
> + onClicked: player.muted = !player.muted
> + KeyNavigation.right: volControl
> + }
> +
> + Slider
> + {
> + id: volControl
> + width: 100 * scale
> + height: parent.height
> +
> + anchors.margins: 5 * scale
> + from: 0
> + to: maxvolpos
> + stepSize: 0.05
> + value: player.volume
> + opacity: player.muted ? 0.5 : 1
> + focus: true
> +
> + Keys.onSpacePressed: player.muted = !player.muted
> + Keys.onUpPressed: volControl.increase()
> + Keys.onDownPressed: volControl.decrease()
> + Keys.onRightPressed:
> widgetfscope.KeyNavigation.right.forceActiveFocus()
> + Keys.onLeftPressed:
> widgetfscope.KeyNavigation.left.forceActiveFocus()
> +
> + property color sliderColor: (volControl.position >
> fullvolpos) ? VLCStyle.colors.volmax : VLCStyle.colors.buttonText
> + property int maxvol: 125
> + property double fullvolpos: 100 / maxvol
> + property double maxvolpos: maxvol / 100
> +
> + onValueChanged: {
> + if (player.muted) player.muted = false
> + player.volume = volControl.value
> + }
> +
> + background: Rectangle {
> + x: volControl.leftPadding
> + y: volControl.topPadding + volControl.availableHeight
> / 2 - height / 2
> + implicitWidth: parent.width
> + implicitHeight: 4 * scale
> + radius: 4 * scale
> + color: VLCStyle.colors.volsliderbg
> +
> + MouseArea {
> + id: sliderMouseArea
> + property bool isEntered: false
> +
> + width: parent.width
> + height: parent.height + 60
> + anchors.verticalCenter: parent.verticalCenter
> + hoverEnabled: true
> +
> + onPressed: function (event) {
> + volControl.forceActiveFocus()
> + volControl.value = volControl.maxvolpos *
> event.x / (volControl.width)
> + }
> + onPositionChanged: function (event) {
> + if(pressed)
> + volControl.value = volControl.maxvolpos *
> event.x / (volControl.width)
> + }
> + onWheel: {
> + if(wheel.angleDelta.y > 0)
> + volControl.increase()
> + else
> + volControl.decrease()
> + }
> + }
> + Rectangle {
> + id: filled
> + width: volControl.visualPosition * parent.width
> + height: parent.height
> + radius: 4 * scale
> + color: VLCStyle.colors.buttonText
> + layer.enabled: (volControl.hovered ||
> volControl.activeFocus)
> + layer.effect: LinearGradient {
> + start: Qt.point(0, 0)
> + end: Qt.point(volControl.width, 0)
> + gradient: Gradient {
> + GradientStop { position: 0.30; color:
> VLCStyle.colors.volbelowmid }
> + GradientStop { position: 0.80; color:
> VLCStyle.colors.volabovemid }
> + GradientStop { position: 0.85; color:
> VLCStyle.colors.volhigh }
> + GradientStop { position: 1.00; color:
> VLCStyle.colors.volmax }
> + }
> + }
> + }
> + Rectangle{
> + id: tickmark
> + x : parent.width * volControl.fullvolpos
> + width: 1 * scale
> + height: parent.height
> + radius: 2 * scale
> + color: VLCStyle.colors.buttonText
> + }
> + }
> +
> + handle: Rectangle {
> + x: volControl.leftPadding + volControl.visualPosition
> * (volControl.availableWidth - width)
> + y: volControl.topPadding + volControl.availableHeight
> / 2 - height / 2
> +
> + implicitWidth: 8 * scale
> + implicitHeight: implicitWidth
> + radius: width * 0.5
> + visible: (volControl.hovered ||
> volControl.activeFocus)
> + color: volControl.sliderColor
> + }
> + }
> + }
> +}
> diff --git a/modules/gui/qt/qml/style/VLCColors.qml
> b/modules/gui/qt/qml/style/VLCColors.qml
> index a1be281883..8d3cb5d080 100644
> --- a/modules/gui/qt/qml/style/VLCColors.qml
> +++ b/modules/gui/qt/qml/style/VLCColors.qml
> @@ -69,6 +69,11 @@ Item {
>
> property color banner: activePalette.window;
> property color bannerHover: activePalette.highlight;
> + property color volsliderbg: "#bdbebf"
> + property color volbelowmid: "#99d299"
> + property color volabovemid: "#14d214"
> + property color volhigh: "#ffc70f"
> + property color volmax: "#f5271d"
>
> //vlc orange
> property color accent: "#FFFF950D";
> diff --git a/modules/gui/qt/vlc.qrc b/modules/gui/qt/vlc.qrc
> index 40a8be1c9c..2b1466f970 100644
> --- a/modules/gui/qt/vlc.qrc
> +++ b/modules/gui/qt/vlc.qrc
> @@ -250,6 +250,7 @@
> <file
> alias="TrackSelector.qml">qml/player/TrackSelector.qml</file>
> <file
> alias="ModalControlBar.qml">qml/player/ModalControlBar.qml</file>
> <file
> alias="ControlButtons.qml">qml/player/ControlButtons.qml</file>
> + <file
> alias="VolumeWidget.qml">qml/player/VolumeWidget.qml</file>
> </qresource>
> <qresource prefix="/about">
> <file alias="About.qml">qml/about/About.qml</file>
More information about the vlc-devel
mailing list