diff --git a/.config/quickshell/modules/common/widgets/StyledProgressBar.qml b/.config/quickshell/modules/common/widgets/StyledProgressBar.qml index 5235357e3..26dea2db8 100644 --- a/.config/quickshell/modules/common/widgets/StyledProgressBar.qml +++ b/.config/quickshell/modules/common/widgets/StyledProgressBar.qml @@ -18,6 +18,14 @@ ProgressBar { property real valueBarGap: 4 property color highlightColor: Appearance?.colors.colPrimary ?? "#685496" property color trackColor: Appearance?.m3colors.m3secondaryContainer ?? "#F1D3F9" + property bool sperm: false // If true, the progress bar will have a wavy fill effect + property real waveAmplitude: sperm ? 3 : 0 + property real frequency: 8 + property real spermFps: 60 + + Behavior on waveAmplitude { + animation: Appearance?.animation.elementMoveEnter.numberAnimation.createObject(this) + } Behavior on value { animation: Appearance?.animation.elementMoveEnter.numberAnimation.createObject(this) @@ -35,11 +43,49 @@ ProgressBar { implicitWidth: parent.width implicitHeight: parent.height - Rectangle { // Left progress fill - width: root.visualPosition * parent.width - height: parent.height - radius: Appearance?.rounding.full ?? 9999 - color: root.highlightColor + Canvas { + id: wavyFill + anchors { + left: parent.left + right: parent.right + verticalCenter: parent.verticalCenter + } + height: parent.height * 6 + onPaint: { + var ctx = getContext("2d"); + ctx.clearRect(0, 0, width, height); + + var progress = root.visualPosition; + var fillWidth = progress * width; + var amplitude = root.waveAmplitude + var frequency = root.frequency; + var phase = Date.now() / 400.0; + var centerY = height / 2; + + ctx.beginPath(); + for (var x = 0; x <= fillWidth; x += 1) { + var waveY = centerY + amplitude * Math.sin(frequency * 2 * Math.PI * x / width + phase); + if (x === 0) + ctx.moveTo(x, waveY); + else + ctx.lineTo(x, waveY); + } + ctx.strokeStyle = root.highlightColor; + ctx.lineWidth = parent.height; + ctx.lineCap = "round"; + ctx.stroke(); + } + Connections { + target: root + function onValueChanged() { wavyFill.requestPaint(); } + function onHighlightColorChanged() { wavyFill.requestPaint(); } + } + Timer { + interval: 1000 / root.spermFps + running: root.sperm + repeat: root.sperm + onTriggered: wavyFill.requestPaint() + } } Rectangle { // Right remaining part fill anchors.right: parent.right diff --git a/.config/quickshell/modules/mediaControls/PlayerControl.qml b/.config/quickshell/modules/mediaControls/PlayerControl.qml index 2100cc90c..cd3e782c5 100644 --- a/.config/quickshell/modules/mediaControls/PlayerControl.qml +++ b/.config/quickshell/modules/mediaControls/PlayerControl.qml @@ -259,6 +259,7 @@ Item { // Player instance highlightColor: blendedColors.colPrimary trackColor: blendedColors.colSecondaryContainer value: playerController.player?.position / playerController.player?.length + sperm: playerController.player?.isPlaying } } TrackChangeButton {