Merge pull request #25621 from cbjeukendrup/playback_toolbar_tempo_slider

cbjeukendrup · web-flow · commit 7875e61d12fa · 2025-02-28T23:43:12.000+01:00
Add playback speed popup to docked Playback Toolbar
diff --git a/src/framework/uicomponents/qml/Muse/UiComponents/IncrementalPropertyControl.qml b/src/framework/uicomponents/qml/Muse/UiComponents/IncrementalPropertyControl.qml
@@ -230,7 +230,7 @@ Item {
             scrolled = 0
         }
 
-        onTextChanged: function(newTextValue) {
+        onTextEdited: function(newTextValue) {
             if (prv.isCustom) {
                 root.valueEdited(newTextValue)
                 return
diff --git a/src/framework/uicomponents/qml/Muse/UiComponents/TimeInputField.qml b/src/framework/uicomponents/qml/Muse/UiComponents/TimeInputField.qml
@@ -32,6 +32,10 @@ Row {
 
     property font font: ui.theme.largeBodyFont
 
+    property NavigationPanel navigationPanel: null
+    property int navigationOrderStart: 0
+    readonly property int navigationOrderEnd: millisecondsField.navigation.order
+
     signal timeEdited(var newTime)
 
     spacing: 0
@@ -46,6 +50,11 @@ Row {
 
         font: root.font
 
+        navigation.panel: root.navigationPanel
+        navigation.order: root.navigationOrderStart
+        navigation.name: "hours"
+        accessible.name: qsTrc("global", "Hours")
+
         onValueEdited: function(newValue) {
             var newTime = root.time
             newTime.setHours(newValue)
@@ -68,6 +77,11 @@ Row {
         displayedNumberLength: 2
         font: root.font
 
+        navigation.panel: root.navigationPanel
+        navigation.order: root.navigationOrderStart + 1
+        navigation.name: "minutes"
+        accessible.name: qsTrc("global", "Minutes")
+
         onValueEdited: function(newValue) {
             var newTime = root.time
             newTime.setMinutes(newValue)
@@ -90,6 +104,11 @@ Row {
         displayedNumberLength: 2
         font: root.font
 
+        navigation.panel: root.navigationPanel
+        navigation.order: root.navigationOrderStart + 2
+        navigation.name: "seconds"
+        accessible.name: qsTrc("global", "Seconds")
+
         onValueEdited: function(newValue) {
             var newTime = root.time
             newTime.setSeconds(newValue)
@@ -114,6 +133,11 @@ Row {
 
         font: root.font
 
+        navigation.panel: root.navigationPanel
+        navigation.order: root.navigationOrderStart + 3
+        navigation.name: "milliseconds"
+        accessible.name: qsTrc("global", "Milliseconds")
+
         onValueEdited: function(newValue) {
             var newTime = root.time
             newTime.setMilliseconds(newValue * precision)
diff --git a/src/playback/playback.qrc b/src/playback/playback.qrc
@@ -3,7 +3,8 @@
         <file>qml/MuseScore/Playback/qmldir</file>
         <file>qml/MuseScore/Playback/PlaybackToolBar.qml</file>
         <file>qml/MuseScore/Playback/internal/MeasureAndBeatFields.qml</file>
-        <file>qml/MuseScore/Playback/internal/TempoSlider.qml</file>
+        <file>qml/MuseScore/Playback/internal/PlaybackSpeedSlider.qml</file>
+        <file>qml/MuseScore/Playback/internal/PlaybackSpeedPopup.qml</file>
         <file>qml/MuseScore/Playback/MixerPanel.qml</file>
         <file>qml/MuseScore/Playback/internal/MixerPanelToolbar.qml</file>
         <file>qml/MuseScore/Playback/internal/MixerPanelSection.qml</file>
diff --git a/src/playback/qml/MuseScore/Playback/PlaybackToolBar.qml b/src/playback/qml/MuseScore/Playback/PlaybackToolBar.qml
@@ -34,7 +34,7 @@ Item {
 
     property bool floating: false
 
-    width: content.width
+    width: content.width + (floating ? 12 : 0)
     height: content.height
 
     property NavigationPanel navigationPanel: NavigationPanel {
@@ -48,12 +48,12 @@ Item {
     property alias navigationPanelOrder: navPanel.order
 
     PlaybackToolBarModel {
-        id: playbackModel
+        id: thePlaybackModel
         isToolbarFloating: root.floating
     }
 
     Component.onCompleted: {
-        playbackModel.load()
+        thePlaybackModel.load()
     }
 
     Column {
@@ -63,35 +63,35 @@ Item {
 
         width: childrenRect.width
 
-        enabled: playbackModel.isPlayAllowed
+        enabled: thePlaybackModel.isPlayAllowed
 
         PlaybackToolBarActions {
             id: playbackActions
 
-            playbackModel: playbackModel
+            playbackModel: thePlaybackModel
             floating: root.floating
 
             navPanel: root.navigationPanel
         }
 
         StyledSlider {
-            width: playbackActions.width - 12
+            width: playbackActions.width
             visible: root.floating
-            value: playbackModel.playPosition
+            value: thePlaybackModel.playPosition
 
             onMoved: {
-                playbackModel.playPosition = value
+                thePlaybackModel.playPosition = value
             }
         }
 
-        TempoSlider {
-            width: playbackActions.width - 12
+        PlaybackSpeedSlider {
+            width: playbackActions.width
             visible: root.floating
-            value: playbackModel.tempoMultiplier
 
-            onMoved: function(newValue) {
-                playbackModel.tempoMultiplier = newValue
-            }
+            playbackModel: thePlaybackModel
+
+            navigationPanel: navPanel
+            navigationOrderStart: playbackActions.navigationOrderEnd + 1
         }
     }
 }
diff --git a/src/playback/qml/MuseScore/Playback/internal/MeasureAndBeatFields.qml b/src/playback/qml/MuseScore/Playback/internal/MeasureAndBeatFields.qml
@@ -36,6 +36,10 @@ Item {
 
     property font font: ui.theme.largeBodyFont
 
+    property NavigationPanel navigationPanel: null
+    property int navigationOrderStart: 0
+    readonly property int navigationOrderEnd: beatNumberField.navigation.order
+
     signal measureNumberEdited(var newValue)
     signal beatNumberEdited(var newValue)
 
@@ -66,6 +70,11 @@ Item {
 
                 font: root.font
 
+                navigation.panel: root.navigationPanel
+                navigation.order: root.navigationOrderStart
+                navigation.name: "measure"
+                accessible.name: qsTrc("playback", "Measure", "Measure number")
+
                 onValueEdited: function(newValue) {
                     root.measureNumberEdited(newValue)
                 }
@@ -94,6 +103,11 @@ Item {
 
                 font: root.font
 
+                navigation.panel: root.navigationPanel
+                navigation.order: root.navigationOrderStart + 1
+                navigation.name: "beat"
+                accessible.name: qsTrc("playback", "Beat", "Beat number")
+
                 onValueEdited: function(newValue) {
                     root.beatNumberEdited(newValue)
                 }
diff --git a/src/playback/qml/MuseScore/Playback/internal/PlaybackSpeedPopup.qml b/src/playback/qml/MuseScore/Playback/internal/PlaybackSpeedPopup.qml
@@ -0,0 +1,94 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0-only
+ * MuseScore-CLA-applies
+ *
+ * MuseScore
+ * Music Composition & Notation
+ *
+ * Copyright (C) 2023 MuseScore BVBA and others
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * 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, see <https://www.gnu.org/licenses/>.
+ */
+
+import QtQuick
+import QtQuick.Layouts
+
+import Muse.Ui
+import Muse.UiComponents
+
+import MuseScore.Playback
+
+StyledPopupView {
+    id: root
+
+    property PlaybackToolBarModel playbackModel: null
+
+    contentWidth: contentColumn.implicitWidth
+    contentHeight: contentColumn.implicitHeight
+
+    NavigationPanel {
+        id: navPanel
+        name: "PlaybackSpeedPopup"
+        section: root.navigationSection
+        accessible.name: qsTrc("playback", "Playback speed popup")
+    }
+
+    ColumnLayout {
+        id: contentColumn
+        spacing: 8
+
+        StyledTextLabel {
+            Layout.fillWidth: true
+            text: qsTrc("playback", "Speed")
+            horizontalAlignment: Text.AlignLeft
+        }
+
+        RowLayout {
+            spacing: 12
+
+            IncrementalPropertyControl {
+                Layout.preferredWidth: 76
+                currentValue: (root.playbackModel.tempoMultiplier * 100).toFixed(decimals)
+
+                maxValue: 300
+                minValue: 10
+                step: 5
+                measureUnitsSymbol: "%"
+                decimals: 0
+
+                navigation.panel: navPanel
+                navigation.accessible.name: qsTrc("playback", "Speed")
+
+                onValueEdited: function(newValue) {
+                    root.playbackModel.tempoMultiplier = newValue / 100
+                }
+            }
+
+            StyledSlider {
+                Layout.preferredWidth: 200
+                Layout.preferredHeight: 30
+
+                value: root.playbackModel.tempoMultiplier
+                from: 0.1
+                to: 3.0
+                stepSize: 0.05
+
+                fillBackground: false
+
+                onMoved: {
+                    root.playbackModel.tempoMultiplier = value
+                }
+            }
+        }
+    }
+}
diff --git a/src/playback/qml/MuseScore/Playback/internal/PlaybackSpeedSlider.qml b/src/playback/qml/MuseScore/Playback/internal/PlaybackSpeedSlider.qml
@@ -19,73 +19,66 @@
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
+import QtQuick
+import QtQuick.Layouts
 
-import Muse.UiComponents 1.0
-import Muse.Ui 1.0
+import Muse.UiComponents
+import Muse.Ui
+
+import MuseScore.Playback
 
 RowLayout {
     id: root
 
-    property real value: 0
-    property real from: 0.1
-    property real to: 3
-    property real stepSize: 0.05
+    property PlaybackToolBarModel playbackModel: null
 
-    signal moved(real newValue)
+    property NavigationPanel navigationPanel: null
+    property int navigationOrderStart: 0
 
-    height: 30
-    spacing: 0
+    spacing: 12
 
     StyledTextLabel {
+        Layout.fillWidth: true
         Layout.fillHeight: true
-        Layout.alignment: Qt.AlignVCenter
 
-        text: qsTrc("playback", "Tempo")
+        text: qsTrc("playback", "Speed")
         font: ui.theme.largeBodyFont
+        horizontalAlignment: Text.AlignLeft
     }
 
-    Item {
-        Layout.fillWidth: true
-        Layout.fillHeight: true
-    }
+    IncrementalPropertyControl {
+        Layout.preferredWidth: 76
+        currentValue: (root.playbackModel.tempoMultiplier * 100).toFixed(decimals)
 
-    NumberInputField {
-        value: Math.round(root.value * 100)
-        minValue: root.from * 100
-        maxValue: root.to * 100
+        maxValue: 300
+        minValue: 10
+        step: 5
+        measureUnitsSymbol: "%"
+        decimals: 0
 
-        live: false
-
-        addLeadingZeros: false
-        font: ui.theme.largeBodyFont
+        navigation.panel: root.navigationPanel
+        navigation.order: root.navigationOrderStart
+        navigation.accessible.name: qsTrc("playback", "Speed")
 
         onValueEdited: function(newValue) {
-            root.moved(newValue / 100)
+            root.playbackModel.tempoMultiplier = newValue / 100
         }
     }
 
-    StyledTextLabel {
-        text: "%"
-        font: ui.theme.largeBodyFont
-    }
-
     StyledSlider {
         id: slider
 
         Layout.preferredWidth: root.width / 2
-        Layout.leftMargin: 12
 
-        value: root.value
-        from: root.from
-        to: root.to
-        stepSize: root.stepSize
+        value: root.playbackModel.tempoMultiplier
+        from: 0.1
+        to: 3.0
+        stepSize: 0.05
 
         fillBackground: false
 
         onMoved: {
-            root.moved(slider.value)
+            root.playbackModel.tempoMultiplier = value
         }
     }
 }
diff --git a/src/playback/qml/MuseScore/Playback/internal/PlaybackToolBarActions.qml b/src/playback/qml/MuseScore/Playback/internal/PlaybackToolBarActions.qml

Original file line number	Diff line number	Diff line change
`@@ -230,7 +230,7 @@ Item {`
`230`	`230`	`scrolled = 0`
`231`	`231`	`}`
`232`	`232`
`233`		`- onTextChanged: function(newTextValue) {`
	`233`	`+ onTextEdited: function(newTextValue) {`
`234`	`234`	`if (prv.isCustom) {`
`235`	`235`	`root.valueEdited(newTextValue)`
`236`	`236`	`return`