vlc | branch: master | Rohan Rajpal <[email protected]> | Mon Jun 17 21:12:29 2019 +0530| [b0626c6244dd0e30d1dbeb3f64f6c25d92aebc28] | committer: Jean-Baptiste Kempf
qml: Add volume widget Add the volume widget for the player controlbar Signed-off-by: Jean-Baptiste Kempf <[email protected]> > http://git.videolan.org/gitweb.cgi/vlc.git/?a=commit;h=b0626c6244dd0e30d1dbeb3f64f6c25d92aebc28 --- modules/gui/qt/Makefile.am | 1 + modules/gui/qt/qml/player/ControlButtons.qml | 5 + modules/gui/qt/qml/player/VolumeWidget.qml | 155 +++++++++++++++++++++++++++ modules/gui/qt/qml/style/VLCColors.qml | 5 + modules/gui/qt/vlc.qrc | 1 + 5 files changed, 167 insertions(+) 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..afc06a080f --- /dev/null +++ b/modules/gui/qt/qml/player/VolumeWidget.qml @@ -0,0 +1,155 @@ +/***************************************************************************** + * Copyright (C) 2019 VLC authors and VideoLAN + * + * 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.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> _______________________________________________ vlc-commits mailing list [email protected] https://mailman.videolan.org/listinfo/vlc-commits
