feat: create an mpris management widget

src/widgets/MprisBig/MprisWidget.qml

@@ -0,0 +1,75 @@
+import QtQuick.Layouts
+import QtQuick
+import Quickshell
+import QtQuick.Controls
+import Quickshell.Widgets
+import "root:provider"
+import "root:base"
+import QtQuick.Effects
+
+ColumnLayout {
+    Layout.alignment: Qt.AlignHCenter
+    Layout.fillWidth: true
+    visible: Player.current ?? false
+
+    Label {
+        text: `${Player.current?.trackTitle ?? ""}`
+        Layout.alignment: Qt.AlignHCenter
+        color: "white"
+        font.pixelSize: 18
+    }
+
+    Label {
+        text: `${Player.current?.trackAlbum ?? ""} by ${Player.current?.trackArtists}`
+        Layout.alignment: Qt.AlignHCenter
+        color: "white"
+        font.pixelSize: 14
+    }
+
+    RowLayout {
+        Layout.fillWidth: true
+        PlayerSwitcherButton {
+            onClicked: Player.prev()
+            Layout.alignment: Qt.AlignLeft
+            Layout.fillHeight: true
+            Layout.preferredWidth: 50
+        }
+        Item {
+            Layout.fillWidth: true
+        }
+
+        BRoundedImage {
+            source: Player.current?.trackArtUrl ?? ""
+            radius: 20
+            border.width: 2
+            color: "black"
+        }
+
+        Item {
+            Layout.fillWidth: true
+        }
+        PlayerSwitcherButton {
+            onClicked: Player.next()
+            Layout.alignment: Qt.AlignRight
+            Layout.fillHeight: true
+            Layout.preferredWidth: 50
+        }
+    }
+
+    RowLayout {
+        Layout.alignment: Qt.AlignHCenter
+
+        BIconButton {
+            source: Quickshell.iconPath("media-seek-backward")
+            onClicked: Player.current.previous()
+        }
+        BIconButton {
+            source: Quickshell.iconPath(Player.isPlaying ? "media-playback-start" : "media-playback-pause")
+            onClicked: Player.current.togglePlaying()
+        }
+        BIconButton {
+            source: Quickshell.iconPath("media-seek-forward")
+            onClicked: Player.current.next()
+        }
+    }
+}

src/widgets/MprisBig/PlayerSwitcherButton.qml

@@ -0,0 +1,12 @@
+import QtQuick
+import QtQuick.Controls
+
+Button {
+    hoverEnabled: true
+    background: Rectangle {
+        color: "transparent"
+        border.color: parent.hovered ? "red" : "blue"
+        border.width: 2
+        radius: 20
+    }
+}

src/windows/audioman/AudioManager.qml

@@ -5,7 +5,9 @@ import QtQuick.Layouts
 import QtQuick.Controls
 import Quickshell.Services.Mpris
 import "root:base"
+import "root:provider"
 import QtQuick.Effects
+import "root:widgets/MprisBig"
 
 PopupWindow {
     id: audioman
@@ -14,21 +16,14 @@ PopupWindow {
         window: lbar
     }
 
-    //gravity: Edges.Bottom | Edges.Right
-
     color: "transparent"
     width: screen?.width ?? display.width
     height: screen?.height ?? display.height
     visible: false
 
-    property var player: Mpris.players.values.find(p => p.playbackState == MprisPlaybackState.Playing) ?? Mpris.players.values[0]
-
     MouseArea {
         anchors.fill: parent
-        onClicked: () => {
-            console.log("clicked");
-            audioman.visible = false;
-        }
+        onClicked: audioman.visible = false
 
         BRectangle {
             id: display
@@ -41,9 +36,8 @@ PopupWindow {
 
             Image {
                 id: background
-                //anchors.margins: parent.border.width
                 anchors.fill: parent
-                source: audioman.player?.trackArtUrl
+                source: Player.current?.trackArtUrl ?? ""
                 Layout.alignment: Qt.AlignHCenter
                 visible: true
             }
@@ -70,21 +64,7 @@ PopupWindow {
                     anchors.fill: parent
                     anchors.margins: 10
 
-                    ColumnLayout {
-                        Layout.alignment: Qt.AlignHCenter
-                        Label {
-                            text: audioman.player.trackTitle
-                            Layout.alignment: Qt.AlignHCenter
-                            color: "white"
-                        }
-
-                        Image {
-                            source: audioman.player.trackArtUrl
-                            sourceSize.width: 300
-                            sourceSize.height: 300
-                            Layout.alignment: Qt.AlignHCenter
-                        }
-                    }
+                    MprisWidget {}
 
                     OutputSelector {}
 

src/windows/audioman/OutputElem.qml

@@ -4,7 +4,7 @@ import Quickshell.Services.Pipewire
 Item {
     id: root
     required property PwNode node
-    property string name: root.node.properties["media.name"] ?? root.node.description
+    property string name: root.node?.properties["media.name"] ?? root.node?.description ?? ""
 
     PwObjectTracker {
         objects: [root.node]