Move VolumeSlider into dedicated file and also use it on mobile

src/qml/Desktop/DesktopPlayerControls.qml

@@ -284,63 +284,8 @@ FocusScope {
                     contentWidth: volumeButtonVertical.implicitWidth
 
                     contentItem: ColumnLayout {
-                        Controls.Slider {
+                        VolumeSlider {
-                            id: volumeSliderVertical
+                            id: volumeSlider
-                            height: Kirigami.Units.gridUnit * 7
-                            Layout.alignment: Qt.AlignHCenter
-                            Layout.preferredHeight: height
-                            Layout.maximumHeight: height
-                            Layout.topMargin: Kirigami.Units.smallSpacing
-                            orientation: Qt.Vertical
-                            padding: 0
-                            enabled: !AudioManager.muted && AudioManager.PlaybackState != AudioManager.StoppedState && AudioManager.canPlay
-                            from: 0
-                            to: 100
-                            value: AudioManager.volume
-                            onMoved: AudioManager.volume = value
-
-                            onPressedChanged: {
-                                tooltip.delay = pressed ? 0 : Kirigami.Units.toolTipDelay
-                            }
-
-                            readonly property int wheelEffect: 5
-
-                            Controls.ToolTip {
-                                id: tooltip
-                                x: volumeSliderVertical.x - volumeSliderVertical.width / 2 - width
-                                y: volumeSliderVertical.visualPosition * volumeSliderVertical.height - height / 2
-                                visible: volumeSliderVertical.pressed || sliderMouseArea.containsMouse
-                                // delay is actually handled in volumeSliderVertical.onPressedChanged, because property bindings aren't immediate
-                                delay: volumeSliderVertical.pressed ? 0 : Kirigami.Units.toolTipDelay
-                                closePolicy: Controls.Popup.NoAutoClose
-                                timeout: -1
-                                text: i18nc("Volume as a percentage", "%1%", Math.round(volumeSliderVertical.value))
-                            }
-
-                            MouseArea {
-                                id: sliderMouseArea
-                                anchors.fill: parent
-                                acceptedButtons: Qt.NoButton
-                                hoverEnabled: true
-                                onWheel: (wheel) => {
-                                    // Can't use Slider's built-in increase() and decrease() functions here
-                                    // since they go in increments of 0.1 when the slider's stepSize is not
-                                    // defined, which is much too slow. And we don't define a stepSize for
-                                    // the slider because if we do, it gets gets tickmarks which look ugly.
-                                    if (wheel.angleDelta.y > 0) {
-                                        // Increase volume
-                                        volumeSliderVertical.value = Math.min(volumeSliderVertical.to,
-                                            volumeSliderVertical.value + volumeSliderVertical.wheelEffect);
-                                        AudioManager.volume = volumeSliderVertical.value
-
-                                    } else {
-                                        // Decrease volume
-                                        volumeSliderVertical.value = Math.max(volumeSliderVertical.from,
-                                            volumeSliderVertical.value - volumeSliderVertical.wheelEffect);
-                                        AudioManager.volume = volumeSliderVertical.value
-                                    }
-                                }
-                            }
                         }
 
                         Controls.ToolButton {

src/qml/Mobile/MobilePlayerControls.qml

@@ -376,22 +376,9 @@ Kirigami.Page {
 
                                 }
 
-                                Controls.Slider {
+                                VolumeSlider {
                                     id: volumeSlider
-                                    height: Kirigami.Units.gridUnit * 7
-                                    Layout.alignment: Qt.AlignHCenter
-                                    Layout.preferredHeight: height
-                                    Layout.maximumHeight: height
-                                    Layout.bottomMargin: Kirigami.Units.smallSpacing
-                                    orientation: Qt.Vertical
-                                    padding: 0
-                                    enabled: !AudioManager.muted && AudioManager.PlaybackState != AudioManager.StoppedState && AudioManager.canPlay
-                                    from: 0
-                                    to: 100
-                                    value: AudioManager.volume
-                                    onMoved: AudioManager.volume = value
                                 }
-
                             }
                         }
                     }

src/qml/VolumeSlider.qml

@@ -0,0 +1,72 @@
+/**
+ * SPDX-FileCopyrightText: 2023 Bart De Vries <bart@mogwai.be>
+ *
+ * SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
+ */
+
+import QtQuick
+import QtQuick.Controls as Controls
+import QtQuick.Layouts
+import QtQml.Models
+
+import org.kde.kirigami as Kirigami
+import org.kde.kmediasession
+
+import org.kde.kasts
+
+Controls.Slider {
+    id: volumeSlider
+    height: Kirigami.Units.gridUnit * 7
+    Layout.alignment: Qt.AlignHCenter
+    Layout.preferredHeight: height
+    Layout.maximumHeight: height
+    Layout.topMargin: Kirigami.Units.smallSpacing
+    orientation: Qt.Vertical
+    padding: 0
+    enabled: !AudioManager.muted && AudioManager.PlaybackState != AudioManager.StoppedState && AudioManager.canPlay
+    from: 0
+    to: 100
+    value: AudioManager.volume
+    onMoved: AudioManager.volume = value
+
+    onPressedChanged: {
+        tooltip.delay = pressed ? 0 : Kirigami.Units.toolTipDelay
+    }
+
+    readonly property int wheelEffect: 5
+
+    Controls.ToolTip {
+        id: tooltip
+        x: volumeSlider.x - volumeSlider.width / 2 - width
+        y: volumeSlider.visualPosition * volumeSlider.height - height / 2
+        visible: volumeSlider.pressed || sliderMouseArea.containsMouse
+        // delay is actually handled in volumeSlider.onPressedChanged, because property bindings aren't immediate
+        delay: volumeSlider.pressed ? 0 : Kirigami.Units.toolTipDelay
+        closePolicy: Controls.Popup.NoAutoClose
+        timeout: -1
+        text: i18nc("Volume as a percentage", "%1%", Math.round(volumeSlider.value))
+    }
+
+    MouseArea {
+        id: sliderMouseArea
+        anchors.fill: parent
+        acceptedButtons: Qt.NoButton
+        hoverEnabled: true
+        onWheel: (wheel) => {
+            // Can't use Slider's built-in increase() and decrease() functions here
+            // since they go in increments of 0.1 when the slider's stepSize is not
+            // defined, which is much too slow. And we don't define a stepSize for
+            // the slider because if we do, it gets gets tickmarks which look ugly.
+            if (wheel.angleDelta.y > 0) {
+                // Increase volume
+                volumeSlider.value = Math.min(volumeSlider.to, volumeSlider.value + volumeSlider.wheelEffect);
+
+            } else {
+                // Decrease volume
+                volumeSlider.value = Math.max(volumeSlider.from, volumeSlider.value - volumeSlider.wheelEffect);
+            }
+            AudioManager.volume = volumeSlider.value
+        }
+    }
+}
+

src/resources.qrc

@@ -12,6 +12,7 @@
         <file alias="FeedListDelegate.qml">qml/FeedListDelegate.qml</file>
         <file alias="MinimizedPlayerControls.qml">qml/Mobile/MinimizedPlayerControls.qml</file>
         <file alias="MobilePlayerControls.qml">qml/Mobile/MobilePlayerControls.qml</file>
+        <file alias="VolumeSlider.qml">qml/VolumeSlider.qml</file>
         <file alias="FooterBar.qml">qml/Mobile/FooterBar.qml</file>
         <file alias="BottomToolbar.qml">qml/Mobile/BottomToolbar.qml</file>
         <file alias="QueuePage.qml">qml/QueuePage.qml</file>