From 5f2e772250a4f57987463a2a97cf8854672f021d Mon Sep 17 00:00:00 2001
From: 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com>
Date: Mon, 4 May 2026 19:44:24 +1000
Subject: [PATCH] fix: proper non-wavy slider

Also not wavy by default
---
 components/controls/StyledSlider.qml | 102 +++++++++++++++++----------
 modules/dashboard/media/Details.qml  |   1 +
 2 files changed, 64 insertions(+), 39 deletions(-)

diff --git a/components/controls/StyledSlider.qml b/components/controls/StyledSlider.qml
index 7c7411fd..db0cd0fd 100644
--- a/components/controls/StyledSlider.qml
+++ b/components/controls/StyledSlider.qml
@@ -1,3 +1,5 @@
+pragma ComponentBehavior: Bound
+
 import QtQuick
 import QtQuick.Templates
 import Caelestia
@@ -9,18 +11,21 @@ import qs.services
 Slider {
     id: root
 
-    property bool wavy: true
+    property bool wavy
     property bool animateWave
-    property alias waveFrequency: wave.frequency
-    property alias waveDuration: waveAnim.duration
+    property real waveFrequency: 6
+    property int waveDuration: 1000
 
     property color fgColour: enabled ? Colours.palette.m3primary : Qt.alpha(Colours.palette.m3onSurface, 0.38)
     property color bgColour: enabled ? Colours.palette.m3secondaryContainer : Qt.alpha(Colours.palette.m3onSurface, 0.1)
 
     property real pos: visualPosition
+    property real filledWidth
 
     signal interaction(v: real)
 
+    Component.onCompleted: filledWidth = Qt.binding(() => (width - handle.implicitWidth - handle.anchors.leftMargin) * pos)
+
     implicitWidth: 200
     implicitHeight: 12
 
@@ -35,10 +40,10 @@ Slider {
             anchors.verticalCenter: parent.verticalCenter
             anchors.leftMargin: Tokens.spacing.extraSmall
 
-            implicitHeight: Math.min(width, parent.height)
-            opacity: implicitHeight / parent.height
+            implicitHeight: parent.height * (parent.height <= 12 ? opacity : Math.min(opacity * 2, 1))
+            opacity: Math.min(width, 12) / 12
 
-            radius: Tokens.rounding.full
+            radius: Tokens.rounding.medium
             topLeftRadius: Tokens.rounding.extraSmall / 2
             bottomLeftRadius: Tokens.rounding.extraSmall / 2
             color: root.bgColour
@@ -47,7 +52,7 @@ Slider {
         StyledRect {
             anchors.right: parent.right
             anchors.verticalCenter: parent.verticalCenter
-            anchors.rightMargin: (parent.height - implicitHeight) / 2 * remaining.opacity
+            anchors.rightMargin: 4 * remaining.opacity
 
             implicitWidth: implicitHeight
             implicitHeight: 4 * remaining.opacity
@@ -60,12 +65,16 @@ Slider {
         StyledRect {
             id: handle
 
-            anchors.left: wave.right
+            anchors.left: filled.right
             anchors.verticalCenter: parent.verticalCenter
             anchors.leftMargin: Tokens.spacing.extraSmall
 
             implicitWidth: 4
-            implicitHeight: parent.height * (mouse.pressed ? 4 : 3)
+            implicitHeight: {
+                const mult = parent.height <= 12 ? 3 : 1.2;
+                const pressMult = parent.height <= 12 ? 4 : 1.5;
+                return parent.height * (mouse.pressed ? pressMult : mult);
+            }
 
             radius: Tokens.rounding.full
             color: root.fgColour
@@ -77,47 +86,56 @@ Slider {
             }
         }
 
-        WavyLine {
-            id: wave
+        Loader {
+            id: filled
 
             anchors.left: parent.left
             anchors.verticalCenter: parent.verticalCenter
-            implicitHeight: lineWidth * amplitudeMultiplier * 2 + lineWidth
+            asynchronous: true
 
-            lineWidth: parent.height * (root.wavy ? 0.7 : 1)
-            amplitudeMultiplier: root.wavy ? 0.5 : 0
-            startX: x
-            fullLength: parent.width - handle.implicitWidth - handle.anchors.leftMargin
-            color: root.fgColour
+            sourceComponent: root.wavy ? waveComp : lineComp
+        }
 
-            Component.onCompleted: implicitWidth = Qt.binding(() => fullLength * root.pos)
+        Component {
+            id: lineComp
 
-            Anim on waveProgress {
-                id: waveAnim
+            StyledRect {
+                implicitWidth: root.filledWidth
+                implicitHeight: root.height
 
-                running: true
-                paused: !root.animateWave
-                from: 0
-                to: 1
-                duration: 1000
-                easing.type: Easing.Linear
-                loops: Animation.Infinite
+                radius: Tokens.rounding.medium
+                topRightRadius: Tokens.rounding.extraSmall / 2
+                bottomRightRadius: Tokens.rounding.extraSmall / 2
+                color: root.fgColour
             }
+        }
 
-            Behavior on amplitudeMultiplier {
-                Anim {
-                    type: Anim.DefaultEffects
+        Component {
+            id: waveComp
+
+            WavyLine {
+                lineWidth: root.height * 0.7
+                frequency: root.waveFrequency
+                startX: x
+                fullLength: root.width - handle.implicitWidth - handle.anchors.leftMargin
+                color: root.fgColour
+
+                implicitWidth: root.filledWidth
+                implicitHeight: lineWidth * amplitudeMultiplier * 2 + lineWidth
+
+                Anim on waveProgress {
+                    running: true
+                    paused: !root.animateWave
+                    from: 0
+                    to: 1
+                    duration: root.waveDuration
+                    easing.type: Easing.Linear
+                    loops: Animation.Infinite
                 }
-            }
 
-            Behavior on color {
-                CAnim {}
-            }
-
-            Behavior on implicitWidth {
-                id: widthBehavior
-
-                Anim {}
+                Behavior on color {
+                    CAnim {}
+                }
             }
         }
     }
@@ -157,4 +175,10 @@ Slider {
             dragMovement = 0;
         }
     }
+
+    Behavior on filledWidth {
+        id: widthBehavior
+
+        Anim {}
+    }
 }
diff --git a/modules/dashboard/media/Details.qml b/modules/dashboard/media/Details.qml
index 32d3c560..9943e2c6 100644
--- a/modules/dashboard/media/Details.qml
+++ b/modules/dashboard/media/Details.qml
@@ -83,6 +83,7 @@ ColumnLayout {
             Layout.fillWidth: true
             value: Players.active ? Players.active.position / (Players.active.length || 1) : 0
             enabled: Players.active?.canSeek ?? false
+            wavy: true
             animateWave: Players.active?.isPlaying ?? false
             waveFrequency: 5
             waveDuration: 2000