Fix volume and duration slider mouse wheel events

Moved the MouseArea to inside the slider. Previously the Slider was
overriding the MouseArea and wheel events were not working correctly.

BUG: 450984
FIXED-IN: 22.04

src/qml/DurationSlider.qml

@@ -60,49 +60,35 @@ RowLayout {
         }
     }
 
-    MouseArea {
-        id: seekWheelHandler
+    Slider {
+        property bool seekStarted: false
+
+        id: musicProgress
         Layout.alignment: Qt.AlignVCenter
         Layout.fillHeight: true
         Layout.fillWidth: true
         Layout.rightMargin: !LayoutMirroring.enabled ? Kirigami.Units.largeSpacing : 0
         Layout.leftMargin: LayoutMirroring.enabled ? Kirigami.Units.largeSpacing : 0
 
-        acceptedButtons: Qt.NoButton
-        onWheel: {
-            if (wheel.angleDelta.y > 0) {
-                durationSlider.seek(position + 10000)
-            } else {
-                durationSlider.seek(position - 10000)
-            }
-        }
-
-        Slider {
-            property bool seekStarted: false
-            property int seekValue
-
-            id: musicProgress
 
-            anchors.fill: parent
+        from: 0
+        to: durationSlider.duration
 
-            from: 0
-            to: durationSlider.duration
+        enabled: durationSlider.seekable && durationSlider.playEnabled
+        live: true
 
-            enabled: durationSlider.seekable && durationSlider.playEnabled
-            live: true
+        onMoved: {
+            durationSlider.seek(value)
+        }
 
-            onValueChanged: {
-                if (seekStarted) {
-                    seekValue = value
-                }
-            }
-            onPressedChanged: {
-                if (pressed) {
-                    seekStarted = true;
-                    seekValue = value
+        MouseArea {
+            anchors.fill: parent
+            acceptedButtons: Qt.NoButton
+            onWheel: {
+                if (wheel.angleDelta.y > 0) {
+                    durationSlider.seek(musicProgress.value + 10000)
                 } else {
-                    durationSlider.seek(seekValue)
-                    seekStarted = false;
+                    durationSlider.seek(musicProgress.value - 10000)
                 }
             }
         }

src/qml/MediaPlayerControl.qml

@@ -17,7 +17,7 @@ import "shared"
 BasePlayerControl {
     id: musicWidget
 
-    property alias volume: volumeSlider.sliderValue
+    property alias volume: volumeSlider.value
     property bool isMaximized
 
     signal maximize()

src/qml/VolumeSlider.qml

@@ -11,36 +11,31 @@ import QtQuick.Controls 2.3
 import org.kde.kirigami 2.5 as Kirigami
 import org.kde.elisa 1.0
 
-MouseArea {
-    id: root
-
-    property alias sliderValue: volumeSlider.value
-    property alias slider: volumeSlider
+Slider {
+    id: volumeSlider
     property bool muted
 
-    acceptedButtons: Qt.NoButton
-    onWheel: {
-        // 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 + 5);
+    from: 0
+    to: 100
 
-        } else {
-            // Decrease volume
-            volumeSlider.value = Math.max(volumeSlider.from, volumeSlider.value - 5);
-        }
-    }
+    enabled: !muted
 
-    Slider {
-        id: volumeSlider
+    MouseArea {
         anchors.fill: parent
-
-        from: 0
-        to: 100
-
-        enabled: !root.muted
+        acceptedButtons: Qt.NoButton
+        onWheel: {
+            // 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 + 5);
+
+            } else {
+                // Decrease volume
+                volumeSlider.value = Math.max(volumeSlider.from, volumeSlider.value - 5);
+            }
+        }
     }
 }

src/qml/mobile/MobileVolumeButton.qml

@@ -15,8 +15,8 @@ import ".."
 FlatButtonWithToolTip {
     id: volumeButton
 
-    property alias sliderValue: slider.sliderValue
-    property alias slider: slider.slider
+    property alias sliderValue: slider.value
+    property alias slider: slider
     property bool muted
 
     Layout.maximumHeight: parent.height