feat: improve media slider + actually impl

components/controls/StyledSlider.qml

@@ -22,7 +22,7 @@ Slider {
     signal interaction(v: real)
 
     implicitWidth: 200
-    implicitHeight: 8
+    implicitHeight: 12
 
     contentItem: Item {
         anchors.fill: parent
@@ -64,8 +64,8 @@ Slider {
             anchors.verticalCenter: parent.verticalCenter
             anchors.leftMargin: Tokens.spacing.extraSmall
 
-            implicitWidth: parent.height * 0.75
-            implicitHeight: parent.height * (mouse.pressed ? 5 : 4)
+            implicitWidth: 4
+            implicitHeight: parent.height * (mouse.pressed ? 4 : 3)
 
             radius: Tokens.rounding.full
             color: root.fgColour
@@ -84,7 +84,7 @@ Slider {
             anchors.verticalCenter: parent.verticalCenter
             implicitHeight: lineWidth * amplitudeMultiplier * 2 + lineWidth
 
-            lineWidth: parent.height - 1
+            lineWidth: parent.height * (root.wavy ? 0.7 : 1)
             amplitudeMultiplier: root.wavy ? 0.5 : 0
             startX: x
             fullLength: parent.width - handle.implicitWidth - handle.anchors.leftMargin

modules/dashboard/media/Details.qml

@@ -89,6 +89,14 @@ ColumnLayout {
             Layout.fillWidth: true
             value: Players.active ? Players.active.position / (Players.active.length || 1) : 0
             enabled: Players.active?.canSeek ?? false
+            animateWave: Players.active?.isPlaying ?? false
+            waveFrequency: 5
+            waveDuration: 2000
+            onInteraction: value => {
+                const active = Players.active;
+                if (active?.canSeek && active?.positionSupported)
+                    active.position = value * active.length;
+            }
         }
 
         StyledText {