[vlc-devel] [PATCH 7/8] qml: Add volume widget

Rohan Rajpal rohan17089 at iiitd.ac.in
Mon Jun 17 16:55:01 CEST 2019


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>
-- 
2.17.1



More information about the vlc-devel mailing list