feat: Mouse wheel click to play/pause and scroll to adjust volume

Also go previous/next with back/forward mouse buttons Allow to scroll the volume bar to adjust volume Closes: #115
ccatterina · Jul 28, 2024 · b2718d9 · b2718d9
1 parent e61fe90
commit b2718d9
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 12 deletions.
diff --git a/src/contents/ui/MouseAreaWithWheelHandler.qml b/src/contents/ui/MouseAreaWithWheelHandler.qml
@@ -0,0 +1,18 @@
+import QtQuick 2.15
+
+MouseArea {
+    property int wheelDelta: 0
+    signal wheelUp()
+    signal wheelDown()
+    onWheel: (wheel) => {
+        wheelDelta += (wheel.inverted ? -1 : 1) * (wheel.angleDelta.y ? wheel.angleDelta.y : -wheel.angleDelta.x)
+        while (wheelDelta >= 120) {
+            wheelDelta -= 120;
+            wheelUp()
+        }
+        while (wheelDelta <= -120) {
+            wheelDelta += 120;
+            wheelDown()
+        }
+    }
+}
diff --git a/src/contents/ui/Player.qml b/src/contents/ui/Player.qml
@@ -72,6 +72,10 @@ QtObject {
         mpris2Model.currentPlayer.volume = volume
     }
 
+    function changeVolume(delta, showOSD) {
+        mpris2Model.currentPlayer.changeVolume(delta, showOSD);
+    }
+
     function setShuffle(shuffle) {
         mpris2Model.currentPlayer.shuffle = shuffle
     }

diff --git a/src/contents/ui/VolumeBar.qml b/src/contents/ui/VolumeBar.qml
@@ -8,7 +8,9 @@ Item {
     property real volume: 0.5;
     property real size: 3;
     property real iconSize: Kirigami.Units.iconSizes.small;
-    signal changeVolume(newVolume: real);
+    signal setVolume(newVolume: real)
+    signal volumeUp()
+    signal volumeDown()
 
     Layout.fillWidth: true
     Layout.preferredHeight: row.implicitHeight
@@ -19,20 +21,26 @@ Item {
 
         CommandIcon {
             size: iconSize;
-            onClicked: container.changeVolume(container.volume - 0.1 > 1 ? 1 : container.volume - 0.1)
+            onClicked: container.volumeDown()
             source: 'audio-volume-low';
         }
         Rectangle {
-            MouseArea {
+            MouseAreaWithWheelHandler {
                 anchors.centerIn: parent
                 height: parent.height + 8
                 width: parent.width
                 cursorShape: Qt.PointingHandCursor
                 onClicked: ({x}) => {
-                    container.changeVolume(x/parent.width)
+                    container.setVolume(x/parent.width)
                 }
                 onPositionChanged: (mouse) => {
-                    if (pressed) container.changeVolume(mouse.x/parent.width)
+                    if (pressed) container.setVolume(mouse.x/parent.width)
+                }
+                onWheelUp: {
+                    container.volumeUp();
+                }
+                onWheelDown: {
+                    container.volumeDown();
                 }
             }
 
@@ -50,7 +58,7 @@ Item {
         }
         CommandIcon {
             size: iconSize;
-            onClicked: container.changeVolume(container.volume + 0.1 > 1 ? 1 : container.volume + 0.1);
+            onClicked: container.volumeUp()
             source: 'audio-volume-high';
         }
     }

diff --git a/src/contents/ui/main.qml b/src/contents/ui/main.qml
@@ -17,12 +17,15 @@ PlasmoidItem {
     readonly property font boldTextFont: Qt.font(Object.assign({}, textFont, {weight: Font.Bold}))
     readonly property bool textScrollingEnabled: plasmoid.configuration.textScrollingEnabled
     readonly property bool textScrollingResetOnPause: plasmoid.configuration.textScrollingResetOnPause
+    readonly property int volumeStep: 5
 
     toolTipTextFormat: Text.PlainText
     toolTipMainText: player.playbackStatus > Mpris.PlaybackStatus.Stopped ? player.title : i18n("No media playing")
     toolTipSubText: {
         let text = player.artists ? i18nc("%1 is the media artist/author and %2 is the player name", "by %1 (%2)", player.artists, player.identity)
             : i18nc("%1 is the player name", "%1", player.identity)
+        text += "\n" + (player.playbackStatus === Mpris.PlaybackStatus.Playing ? i18n("Middle-click to pause") : i18n("Middle-click to play"))
+        text += "\n" + i18n("Scroll to adjust volume")
         text += "\n" + (player.canRaise ? i18n("Ctrl+Click to bring player to the front") : i18n("This player can't be raised"))
         return text
     }
@@ -51,16 +54,40 @@ PlasmoidItem {
             }
         }
 
-        MouseArea {
+        MouseAreaWithWheelHandler {
             anchors.fill: parent
+            acceptedButtons: Qt.LeftButton | Qt.MiddleButton | Qt.BackButton | Qt.ForwardButton
             propagateComposedEvents: true
+            property int wheelDelta: 0
             onClicked: (mouse) => {
-                if (mouse.modifiers & Qt.ControlModifier) {
-                    if (player.canRaise) player.raise()
-                } else {
-                    mouse.accepted = false
+                switch (mouse.button) {
+                case Qt.MiddleButton:
+                    player.playPause()
+                    break
+                case Qt.BackButton:
+                    if (player.canGoPrevious) {
+                        player.previous();
+                    }
+                    break
+                case Qt.ForwardButton:
+                    if (player.canGoNext) {
+                        player.next();
+                    }
+                    break
+                default:
+                    if (mouse.modifiers & Qt.ControlModifier) {
+                        if (player.canRaise) player.raise()
+                    } else {
+                        mouse.accepted = false
+                    }
                 }
             }
+            onWheelUp: {
+                player.changeVolume(volumeStep / 100, true);
+            }
+            onWheelDown: {
+                player.changeVolume(-volumeStep / 100, true);
+            }
             z: 999
         }
 
@@ -234,9 +261,15 @@ PlasmoidItem {
                 Layout.rightMargin: 40
                 Layout.topMargin: 10
                 volume: player.volume
-                onChangeVolume: (vol) => {
+                onSetVolume: (vol) => {
                     player.setVolume(vol)
                 }
+                onVolumeUp: {
+                    player.changeVolume(volumeStep / 100, false)
+                }
+                onVolumeDown: {
+                    player.changeVolume(-volumeStep / 100, false)
+                }
             }
 
             Item {