[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