modules/bar/Bar.qml

@@ -5,6 +5,7 @@ import Quickshell
 import "components"
 import "components/bluetooth"
 import "components/hyprland"
+import "components/mpris"
 import "components/tray"
 
 Scope {

modules/bar/components/Mpris.qml

@@ -1,48 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import qs.config
-import qs.services
-import qs.widgets
-import QtQuick
-
-StyledButton {
-    id: root
-
-    onClicked: {
-        if (!Mpris.active.canTogglePlaying) {
-            return;
-        }
-        if (Mpris.active.isPlaying) {
-            Mpris.active.pause();
-        } else {
-            Mpris.active.play();
-        }
-    }
-
-    content: StyledText {
-        id: text
-        text: `${Mpris.active?.isPlaying ? "" : ""} ${Mpris.active?.trackTitle} - ${Mpris.active?.trackArtist}`
-
-        font.pixelSize: Dimensions.mpris.fontSize
-
-        states: State {
-            name: "hovered"
-            when: root.containsMouse
-            PropertyChanges {
-                text {
-                    color: Theme.palette.base300
-                }
-            }
-        }
-        transitions: Transition {
-            from: ""
-            to: "hovered"
-            reversible: true
-            ColorAnimation {
-                properties: "color"
-                duration: 200
-                easing.type: Easing.InOutCubic
-            }
-        }
-    }
-}

modules/bar/components/hyprland/Workspaces.qml

@@ -1,7 +1,7 @@
-import qs.config
 import QtQuick
 import QtQuick.Layouts
 import Quickshell.Hyprland
+import "../../../../config/"
 
 RowLayout {
     id: root

modules/bar/components/mpris/Mpris.qml

@@ -0,0 +1,29 @@
+import Quickshell.Services.Mpris
+import QtQuick
+
+Item {
+    id: root
+
+    property int currentIndex: 0
+    property var players: Mpris.players
+
+    Repeater {
+        id: players
+        model: Mpris.players.values.filter(item => item != null)
+
+        Player {
+
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+
+            visible: index === root.currentIndex && modelData.canControl
+
+            onNextPlayer: {
+                currentIndex = (currentIndex + 1) % players.count;
+            }
+            onPreviousPlayer: {
+                currentIndex = (currentIndex - 1 + players.count) % players.count;
+            }
+        }
+    }
+}

modules/bar/components/mpris/Player.qml

@@ -0,0 +1,64 @@
+import qs.config
+import qs.widgets
+import Quickshell.Services.Mpris
+import QtQuick
+
+Loader {
+    id: root
+    required property MprisPlayer modelData
+    required property int index
+
+    signal nextPlayer
+    signal previousPlayer
+
+    sourceComponent: player
+    property Component player: StyledButton {
+        id: button
+
+        onClicked: {
+            if (!root.modelData.canTogglePlaying) {
+                return;
+            }
+            if (root.modelData.isPlaying) {
+                root.modelData.pause();
+            } else {
+                root.modelData.play();
+            }
+        }
+
+        onWheel: event => {
+            if (event.angleDelta.y > 0) {
+                root.nextPlayer();
+            } else if (event.angleDelta.y < 0) {
+                root.previousPlayer();
+            }
+        }
+
+        content: StyledText {
+            id: text
+            text: `${root.modelData.isPlaying ? "" : ""} ${root.modelData.trackTitle} - ${root.modelData.trackArtist}`
+
+            font.pixelSize: Dimensions.mpris.fontSize
+
+            states: State {
+                name: "hovered"
+                when: button.containsMouse
+                PropertyChanges {
+                    text {
+                        color: Theme.palette.base300
+                    }
+                }
+            }
+            transitions: Transition {
+                from: ""
+                to: "hovered"
+                reversible: true
+                ColorAnimation {
+                    properties: "color"
+                    duration: 200
+                    easing.type: Easing.InOutCubic
+                }
+            }
+        }
+    }
+}

services/Mpris.qml

@@ -1,12 +0,0 @@
-pragma Singleton
-
-import QtQuick
-import Quickshell
-import Quickshell.Services.Mpris
-
-Singleton {
-    id: root
-
-    property list<MprisPlayer> players: Mpris.players.values
-    property MprisPlayer active: players.filter(player => player.isPlaying)[0] ?? players[0]
-}