basic mpris controller

components/MprisController.qml

@@ -0,0 +1,99 @@
+pragma ComponentBehavior: Bound
+
+import qs.components
+import qs.config
+import qs.constants
+import qs.widgets
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Services.Mpris
+import Quickshell.Widgets
+
+WrapperRectangle {
+    id: root
+    required property MprisPlayer player
+
+    color: Theme.palette.base200
+    radius: 8
+    margin: 16
+
+    ColumnLayout {
+
+        spacing: 12
+
+        implicitWidth: 800
+
+        StyledText {
+            Layout.alignment: Qt.AlignHCenter
+            text: {
+                if (root.player.identity) {
+                    const words = root.player.identity.split("-");
+                    const capitalized = words.map(val => String(val).charAt(0).toUpperCase() + String(val).slice(1));
+                    console.log(capitalized);
+                    return capitalized.join(" ");
+                }
+                return root.player.desktopEntry ?? root.player.dbusName ?? "unknown";
+            }
+            font.pixelSize: 20
+        }
+
+        StyledText {
+            id: text
+            Layout.alignment: Qt.AlignHCenter
+            text: `${root.player.trackTitle} - ${root.player.trackArtist}`
+            font.pixelSize: Dimensions.mpris.fontSize
+        }
+
+        RowLayout {
+            Layout.alignment: Qt.AlignHCenter
+            StyledButton {
+                id: backButton
+                content: LucideIcon {
+                    color: backButton.containsMouse ? Theme.palette.primarycontent : Theme.palette.basecontent
+                    text: Icons.skipBack
+                }
+                onClicked: {
+                    root.player.previous();
+                }
+            }
+            StyledButton {
+                id: playPauseButton
+                content: LucideIcon {
+                    color: playPauseButton.containsMouse ? Theme.palette.primarycontent : Theme.palette.basecontent
+                    text: root.player.isPlaying ? Icons.square : Icons.play
+                }
+                onClicked: {
+                    root.player.isPlaying = !root.player.isPlaying;
+                }
+            }
+            StyledButton {
+                id: forwardButton
+                content: LucideIcon {
+                    color: forwardButton.containsMouse ? Theme.palette.primarycontent : Theme.palette.basecontent
+                    text: Icons.skipForward
+                }
+                onClicked: {
+                    root.player.next();
+                }
+            }
+        }
+
+        StyledSlider {
+            from: 0
+            to: root.player.length ?? 0
+            value: root.player.position
+            implicitHeight: 6
+            Layout.fillWidth: true
+            onMoved: {
+                root.player.position = value;
+            }
+
+            Timer {
+                running: root.player.isPlaying
+                interval: 1000
+                repeat: true
+                onTriggered: root.player.positionChanged()
+            }
+        }
+    }
+}

components/StyledSlider.qml

@@ -5,11 +5,13 @@ import QtQuick.Controls
 Slider {
     id: control
 
+    height: 24
+
     background: Rectangle {
         x: control.leftPadding
         y: control.topPadding + control.availableHeight / 2 - height / 2
         implicitWidth: 200
-        implicitHeight: 24
+        implicitHeight: control.height
         width: control.availableWidth
         height: implicitHeight
         radius: 8

constants/Icons.qml

@@ -19,6 +19,8 @@ Singleton {
     property string memoryStick: "\u{E44a}"
     property string play: "\u{E140}"
     property string search: "\u{E155}"
+    property string skipBack: "\u{E163}"
+    property string skipForward: "\u{E164}"
     property string stop: "\u{E132}"
     property string square: "\u{E16B}"
     property string wifiOff: "\u{E1af}"

modules/bar/components/Mpris.qml

@@ -1,13 +1,17 @@
 pragma ComponentBehavior: Bound
 
+import qs.components
 import qs.config
 import qs.services
 import qs.widgets
 import QtQuick
+import QtQuick.Layouts
 
 StyledButton {
     id: root
 
+    padding: 6
+
     onClicked: {
         if (!Mpris.active.canTogglePlaying) {
             return;
@@ -19,7 +23,14 @@ StyledButton {
         }
     }
 
-    content: StyledText {
+    content: ColumnLayout {
+        id: content
+
+        spacing: 0
+
+        implicitWidth: text.width
+        implicitHeight: text.height
+        StyledText {
             id: text
             text: `${Mpris.active?.isPlaying ? "" : ""} ${Mpris.active?.trackTitle} - ${Mpris.active?.trackArtist}`
 
@@ -30,7 +41,7 @@ StyledButton {
                 when: root.containsMouse
                 PropertyChanges {
                     text {
-                    color: Theme.palette.base300
+                        color: Theme.palette.primarycontent
                     }
                 }
             }
@@ -40,9 +51,27 @@ StyledButton {
                 reversible: true
                 ColorAnimation {
                     properties: "color"
-                duration: 200
+                    duration: 100
                     easing.type: Easing.InOutCubic
                 }
             }
         }
+        StyledSlider {
+            from: 0
+            to: Mpris.active?.length ?? 0
+            value: Mpris.active?.position
+            implicitHeight: 6
+            Layout.fillWidth: true
+            onMoved: {
+                Mpris.active.position = value;
+            }
+
+            Timer {
+                running: Mpris.active?.isPlaying
+                interval: 1000
+                repeat: true
+                onTriggered: Mpris.active?.positionChanged()
+            }
+        }
+    }
 }

modules/storybook/Storybook.qml

@@ -82,6 +82,16 @@ StyledWindow {
                 }
             }
 
+            ColumnLayout {
+                StyledText {
+                    text: "Mpris Controller"
+                    font.pixelSize: 18
+                }
+                MprisController {
+                    player: Mpris.active ?? null
+                }
+            }
+
             ColumnLayout {
                 StyledText {
                     text: "Drawer"