update mpris with slider

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()
+            }
+        }
+    }
 }