[vlc-devel] [PATCH 13/18] qml: add playback speed control widget
Prince Gupta
guptaprince8832 at gmail.com
Thu Apr 1 14:29:48 UTC 2021
fixes #22268
---
modules/gui/qt/Makefile.am | 1 +
.../gui/qt/player/playercontrolbarmodel.hpp | 1 +
modules/gui/qt/player/qml/ControlButtons.qml | 70 ++++++-
modules/gui/qt/player/qml/PlaybackSpeed.qml | 173 ++++++++++++++++++
modules/gui/qt/vlc.qrc | 1 +
5 files changed, 245 insertions(+), 1 deletion(-)
create mode 100644 modules/gui/qt/player/qml/PlaybackSpeed.qml
diff --git a/modules/gui/qt/Makefile.am b/modules/gui/qt/Makefile.am
index 8146de9019..25730329bf 100644
--- a/modules/gui/qt/Makefile.am
+++ b/modules/gui/qt/Makefile.am
@@ -701,6 +701,7 @@ libqt_plugin_la_QML = \
gui/qt/player/qml/ControlBar.qml \
gui/qt/player/qml/ControlButtons.qml \
gui/qt/player/qml/LanguageMenu.qml \
+ gui/qt/player/qml/PlaybackSpeed.qml \
gui/qt/player/qml/MiniPlayer.qml \
gui/qt/player/qml/PIPPlayer.qml \
gui/qt/player/qml/Player.qml \
diff --git a/modules/gui/qt/player/playercontrolbarmodel.hpp b/modules/gui/qt/player/playercontrolbarmodel.hpp
index d439bbbdb0..7d0c30190f 100644
--- a/modules/gui/qt/player/playercontrolbarmodel.hpp
+++ b/modules/gui/qt/player/playercontrolbarmodel.hpp
@@ -71,6 +71,7 @@ public:
BUTTON_MAX,
PLAYER_SWITCH_BUTTON,
ARTWORK_INFO,
+ PLAYBACK_SPEED_BUTTON,
SPLITTER = 0x20,
VOLUME,
diff --git a/modules/gui/qt/player/qml/ControlButtons.qml b/modules/gui/qt/player/qml/ControlButtons.qml
index 27b4d561d8..8f8a273a19 100644
--- a/modules/gui/qt/player/qml/ControlButtons.qml
+++ b/modules/gui/qt/player/qml/ControlButtons.qml
@@ -26,6 +26,7 @@ import org.videolan.vlc 0.1
import "qrc:///widgets/" as Widgets
import "qrc:///style/"
import "qrc:///util/KeyHelper.js" as KeyHelper
+import "qrc:///util/Helpers.js" as Helpers
Item{
id: controlButtons
@@ -66,7 +67,8 @@ Item{
{ id: PlayerControlBarModel.WIDGET_SPACER, label: VLCIcons.space, text: i18n.qtr("Spacer")},
{ id: PlayerControlBarModel.WIDGET_SPACER_EXTEND, label: VLCIcons.space, text: i18n.qtr("Expanding Spacer")},
{ id: PlayerControlBarModel.PLAYER_SWITCH_BUTTON, label: VLCIcons.fullscreen, text: i18n.qtr("Switch Player")},
- { id: PlayerControlBarModel.ARTWORK_INFO, label: VLCIcons.info, text: i18n.qtr("Artwork Info")}
+ { id: PlayerControlBarModel.ARTWORK_INFO, label: VLCIcons.info, text: i18n.qtr("Artwork Info")},
+ { id: PlayerControlBarModel.PLAYBACK_SPEED_BUTTON, label: "1x", text: i18n.qtr("Playback Speed")}
]
function returnbuttondelegate(inpID){
@@ -103,6 +105,7 @@ Item{
case PlayerControlBarModel.TELETEXT_BUTTONS: return teletextdelegate
case PlayerControlBarModel.PLAYER_SWITCH_BUTTON: return playerSwitchBtnDelegate
case PlayerControlBarModel.ARTWORK_INFO: return artworkInfoDelegate
+ case PlayerControlBarModel.PLAYBACK_SPEED_BUTTON: return playbackSpeedButtonDelegate
}
console.log("button delegate id " + inpID + " doesn't exists")
return spacerDelegate
@@ -939,4 +942,69 @@ Item{
}
}
}
+
+ Component {
+ id: playbackSpeedButtonDelegate
+
+ Widgets.IconControlButton {
+ id: playbackSpeedButton
+
+ size: VLCStyle.icon_medium
+ text: i18n.qtr("Playback Speed")
+ color: playbackSpeedPopup.visible ? colors.accent : colors.playerControlBarFg
+
+ onClicked: playbackSpeedPopup.open()
+
+ PlaybackSpeed {
+ id: playbackSpeedPopup
+
+ z: 1
+ colors: playbackSpeedButton.colors
+ focus: true
+ parent: playbackSpeedButton.paintOnly
+ ? playbackSpeedButton // button is not part of main display (ToolbarEditorDialog)
+ : (history.current.view === "player") ? rootPlayer : g_mainDisplay
+
+ onOpened: {
+ // update popup coordinates
+ //
+ // mapFromItem is affected by various properties of source and target objects
+ // which can't be represented in a binding expression so a initial setting in
+ // object defination (x: clamp(...)) doesn't work, so we set x and y on initial open
+ x = Qt.binding(function () {
+ // coords are mapped through playbackSpeedButton.parent so that binding is generated based on playbackSpeedButton.x
+ var mappedParentCoordinates = parent.mapFromItem(playbackSpeedButton.parent, playbackSpeedButton.x, 0)
+ return Helpers.clamp(mappedParentCoordinates.x - ((width - playbackSpeedButton.width) / 2),
+ VLCStyle.margin_xxsmall + VLCStyle.applicationHorizontalMargin,
+ parent.width - VLCStyle.applicationHorizontalMargin - VLCStyle.margin_xxsmall - width)
+ })
+
+ y = Qt.binding(function () {
+ // coords are mapped through playbackSpeedButton.parent so that binding is generated based on playbackSpeedButton.y
+ var mappedParentCoordinates = parent.mapFromItem(playbackSpeedButton.parent, 0, playbackSpeedButton.y)
+ return mappedParentCoordinates.y - playbackSpeedPopup.height - VLCStyle.margin_xxsmall
+ })
+
+ // player related --
+ controlButtons.requestLockUnlockAutoHide(true, controlButtons)
+ if (!!rootPlayer)
+ rootPlayer.menu = playbackSpeedPopup
+ }
+
+ onClosed: {
+ controlButtons.requestLockUnlockAutoHide(false, controlButtons)
+ playbackSpeedButton.forceActiveFocus()
+ if (!!rootPlayer)
+ rootPlayer.menu = undefined
+ }
+ }
+
+ Label {
+ anchors.centerIn: parent
+ font.pixelSize: VLCStyle.fontSize_normal
+ text: !playbackSpeedButton.paintOnly ? i18n.qtr("%1x").arg(+player.rate.toFixed(2)) : i18n.qtr("1x")
+ color: playbackSpeedButton.background.foregroundColor // IconToolButton.background is a FocusBackground
+ }
+ }
+ }
}
diff --git a/modules/gui/qt/player/qml/PlaybackSpeed.qml b/modules/gui/qt/player/qml/PlaybackSpeed.qml
new file mode 100644
index 0000000000..2e1cb8d42e
--- /dev/null
+++ b/modules/gui/qt/player/qml/PlaybackSpeed.qml
@@ -0,0 +1,173 @@
+/*****************************************************************************
+ * Copyright (C) 2021 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.Controls 2.4
+import QtQuick.Layouts 1.3
+
+import org.videolan.vlc 0.1
+
+import "qrc:///style/"
+import "qrc:///widgets/" as Widgets
+
+Popup {
+ id: root
+
+ property VLCColors colors: VLCStyle.nightColors
+
+ height: implicitHeight
+ width: implicitWidth
+ padding: VLCStyle.margin_small
+
+ // Popup.CloseOnPressOutside doesn't work with non-model Popup on Qt < 5.15
+ closePolicy: Popup.CloseOnPressOutside | Popup.CloseOnEscape
+ modal: true
+ Overlay.modal: Rectangle {
+ color: "transparent"
+ }
+
+ background: Rectangle {
+ color: colors.bg
+ opacity: .85
+ }
+
+ contentItem: ColumnLayout {
+ spacing: VLCStyle.margin_xsmall
+
+ Widgets.ListLabel {
+ text: i18n.qtr("Playback Speed")
+ color: root.colors.text
+ font.pixelSize: VLCStyle.fontSize_large
+
+ Layout.fillWidth: true
+ Layout.bottomMargin: VLCStyle.margin_xsmall
+ }
+
+ Slider {
+ id: speedSlider
+
+ property bool _inhibitUpdate: false
+
+ from: 0.25
+ to: 4
+ clip: true
+ implicitHeight: VLCStyle.heightBar_small
+ KeyNavigation.down: slowerButton
+
+ background: Rectangle {
+ x: speedSlider.leftPadding
+ y: speedSlider.topPadding + speedSlider.availableHeight / 2 - height / 2
+ implicitWidth: 200
+ implicitHeight: 4
+ width: speedSlider.availableWidth
+ height: implicitHeight
+ radius: 2
+ color: root.colors.bgAlt
+
+ Rectangle {
+ width: speedSlider.visualPosition * parent.width
+ height: parent.height
+ radius: 2
+ color: (speedSlider.activeFocus || speedSlider.pressed)
+ ? root.colors.accent
+ : root.colors.text
+ }
+ }
+
+ handle: Rectangle {
+ x: speedSlider.leftPadding + speedSlider.visualPosition * (speedSlider.availableWidth - width)
+ y: speedSlider.topPadding + speedSlider.availableHeight / 2 - height / 2
+ width: speedSlider.implicitHeight
+ height: speedSlider.implicitHeight
+ radius: speedSlider.implicitHeight
+ color: (speedSlider.activeFocus || speedSlider.pressed) ? root.colors.accent : root.colors.text
+ }
+
+ onValueChanged: {
+ if (_inhibitUpdate)
+ return
+ player.rate = value
+ }
+
+ function _updateFromPlayer() {
+ _inhibitUpdate = true
+ value = player.rate
+ _inhibitUpdate = false
+ }
+
+ Connections {
+ target: player
+ onRateChanged: speedSlider._updateFromPlayer()
+ }
+
+ Layout.fillWidth: true
+
+ Component.onCompleted: speedSlider._updateFromPlayer()
+ }
+
+ RowLayout {
+ spacing: 0
+ KeyNavigation.up: speedSlider
+
+ Widgets.IconControlButton {
+ id: slowerButton
+
+ iconText: VLCIcons.slower
+ colors: root.colors
+ KeyNavigation.right: resetButton
+
+ onClicked: speedSlider.decrease()
+ }
+
+ Item {
+ Layout.fillWidth: true
+ }
+
+ Widgets.IconControlButton {
+ id: resetButton
+
+ colors: root.colors
+ KeyNavigation.left: slowerButton
+ KeyNavigation.right: fasterButton
+
+ onClicked: speedSlider.value = 1.0
+
+ Label {
+ anchors.centerIn: parent
+ font.pixelSize: VLCStyle.fontSize_normal
+ text: i18n.qtr("1x")
+ color: resetButton.background.foregroundColor // IconToolButton.background is a FocusBackground
+ }
+ }
+
+ Item {
+ Layout.fillWidth: true
+ }
+
+ Widgets.IconControlButton {
+ id: fasterButton
+
+ iconText: VLCIcons.faster
+ colors: root.colors
+ KeyNavigation.left: resetButton
+
+ onClicked: speedSlider.increase()
+ }
+ }
+ }
+}
diff --git a/modules/gui/qt/vlc.qrc b/modules/gui/qt/vlc.qrc
index 5c19b8d393..04c4133ad2 100644
--- a/modules/gui/qt/vlc.qrc
+++ b/modules/gui/qt/vlc.qrc
@@ -332,6 +332,7 @@
<file alias="PlayerMenuItem.qml">player/qml/PlayerMenuItem.qml</file>
<file alias="LanguageMenu.qml">player/qml/LanguageMenu.qml</file>
<file alias="ButtonsLayout.qml">player/qml/ButtonsLayout.qml</file>
+ <file alias="PlaybackSpeed.qml">player/qml/PlaybackSpeed.qml</file>
</qresource>
<qresource prefix="/about">
<file alias="About.qml">dialogs/help/qml/About.qml</file>
--
2.27.0
More information about the vlc-devel
mailing list