fix mpris errors and create player selector

components/MprisController.qml

@@ -8,13 +8,15 @@ import QtQuick
 import QtQuick.Layouts
 import Quickshell.Services.Mpris
 
-ColumnLayout {
+Loader {
     id: root
 
     required property MprisPlayer player
 
-    spacing: 12
+    active: player != null
 
+    sourceComponent: ColumnLayout {
+        spacing: 12
         implicitWidth: 800
 
         StyledText {
@@ -78,3 +80,4 @@ ColumnLayout {
             }
         }
     }
+}

components/MprisPlayerSelector.qml

@@ -0,0 +1,46 @@
+import qs.components
+import qs.constants
+import qs.services
+import qs.widgets
+import QtQuick
+import QtQuick.Layouts
+
+RowLayout {
+    spacing: 8
+
+    Layout.alignment: Qt.AlignHCenter
+
+    StyledIconButton {
+        id: previousPlayerButton
+
+        visible: Mpris.players.length > 1
+        text: Icons.chevronLeft
+
+        onClicked: {
+            Mpris.previousPlayer();
+        }
+    }
+
+    StyledText {
+        text: {
+            function parseName(name) {
+                const words = name.split("-");
+                const capitalized = words.map(val => val.trim().charAt(0).toUpperCase() + val.trim().slice(1));
+                return capitalized.join(" ");
+            }
+            return parseName(Mpris.active?.desktopEntry ?? Mpris.active?.dbusName ?? "unknown");
+        }
+        font.pixelSize: 20
+    }
+
+    StyledIconButton {
+        id: nextPlayerButton
+
+        visible: Mpris.players.length > 1
+        text: Icons.chevronRight
+
+        onClicked: {
+            Mpris.nextPlayer();
+        }
+    }
+}

modules/drawers/dashboard/Dashboard.qml

@@ -1,9 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import qs.components
-import qs.constants
 import qs.services
-import qs.widgets
 import QtQuick
 import QtQuick.Layouts
 
@@ -16,44 +14,9 @@ StyledDrawer {
         margin: 32
         ColumnLayout {
             spacing: 8
-            RowLayout {
-                spacing: 8
 
+            MprisPlayerSelector {
                 Layout.alignment: Qt.AlignHCenter
-
-                StyledIconButton {
-                    id: previousPlayerButton
-
-                    visible: Mpris.players.length > 1
-                    text: Icons.chevronLeft
-
-                    onClicked: {
-                        Mpris.previousPlayer();
-                    }
-                }
-
-                StyledText {
-                    text: {
-                        if (Mpris.active?.identity) {
-                            const words = Mpris.active?.identity.split("-");
-                            const capitalized = words.map(val => String(val).charAt(0).toUpperCase() + String(val).slice(1));
-                            return capitalized.join(" ");
-                        }
-                        return Mpris.active?.desktopEntry ?? Mpris.active?.dbusName ?? "unknown";
-                    }
-                    font.pixelSize: 20
-                }
-
-                StyledButton {
-                    id: nextPlayerButton
-                    visible: Mpris.players.length > 1
-
-                    text: Icons.chevronRight
-
-                    onClicked: {
-                        Mpris.nextPlayer();
-                    }
-                }
             }
 
             MprisController {

services/Mpris.qml

@@ -8,7 +8,7 @@ Singleton {
     id: root
 
     property list<MprisPlayer> players: Mpris.players.values
-    property MprisPlayer active: players[properties.currentIndex]
+    property MprisPlayer active: players[properties.currentIndex] ?? null
 
     PersistentProperties {
         id: properties