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,29 +23,54 @@ StyledButton {
         }
     }
 
-    content: StyledText {
+    content: ColumnLayout {
-        id: text
+        id: content
-        text: `${Mpris.active?.isPlaying ? "" : ""} ${Mpris.active?.trackTitle} - ${Mpris.active?.trackArtist}`
 
-        font.pixelSize: Dimensions.mpris.fontSize
+        spacing: 0
 
-        states: State {
+        implicitWidth: text.width
-            name: "hovered"
+        implicitHeight: text.height
-            when: root.containsMouse
+        StyledText {
-            PropertyChanges {
+            id: text
-                text {
+            text: `${Mpris.active?.isPlaying ? "" : ""} ${Mpris.active?.trackTitle} - ${Mpris.active?.trackArtist}`
-                    color: Theme.palette.base300
+
+            font.pixelSize: Dimensions.mpris.fontSize
+
+            states: State {
+                name: "hovered"
+                when: root.containsMouse
+                PropertyChanges {
+                    text {
+                        color: Theme.palette.primarycontent
+                    }
+                }
+            }
+            transitions: Transition {
+                from: ""
+                to: "hovered"
+                reversible: true
+                ColorAnimation {
+                    properties: "color"
+                    duration: 100
+                    easing.type: Easing.InOutCubic
                 }
             }
         }
-        transitions: Transition {
+        StyledSlider {
-            from: ""
+            from: 0
-            to: "hovered"
+            to: Mpris.active?.length ?? 0
-            reversible: true
+            value: Mpris.active?.position
-            ColorAnimation {
+            implicitHeight: 6
-                properties: "color"
+            Layout.fillWidth: true
-                duration: 200
+            onMoved: {
-                easing.type: Easing.InOutCubic
+                Mpris.active.position = value;
+            }
+
+            Timer {
+                running: Mpris.active?.isPlaying
+                interval: 1000
+                repeat: true
+                onTriggered: Mpris.active?.positionChanged()
             }
         }
     }