things

Panes/NotificationCenter.qml

@@ -1,4 +1,5 @@
 import QtQuick
+import QtQuick.Shapes
 import Quickshell
 import Quickshell.Widgets
 import Quickshell.Services.Mpris
@@ -42,17 +43,33 @@ Item {
             }
             ListView {
                 anchors.fill: parent
+                anchors.leftMargin: 4
+                anchors.rightMargin: anchors.leftMargin
                 clip: true
                 spacing: 4
+                interactive: background.index === 3
+
+                add: Transition {NumberAnimation {
+                    property: "opacity"
+                    from: 0
+                    to: 1
+                    duration: 150
+                }}
+                remove: Transition {NumberAnimation {
+                    property: "opacity"
+                    from: 1
+                    to: 0
+                    duration: 150
+                }}
+                displaced: Transition {NumberAnimation {
+                    property: "y"
+                    duration: 300
+                }}
+
                 header: Item {height: 4; width: 1}
                 model: Array.from(notifServer.trackedNotifications.values)
                 delegate: Widgets.Notification {
                     color: "#222"
-                    anchors {
-                        left: parent.left
-                        right: parent.right
-                        margins: 4
-                    }
                 }
             }
         }
@@ -64,6 +81,8 @@ Item {
             Column {
                 anchors.centerIn: parent
                 spacing: 2
+                opacity: !Mpris.players.values.length
+                Behavior on opacity {NumberAnimation {duration: 150}}
                 Image {
                     anchors.horizontalCenter: parent.horizontalCenter
                     source: Quickshell.shellPath("assets/player-symbolic.svg")
@@ -81,23 +100,61 @@ Item {
             Column {
                 anchors.centerIn: parent
                 opacity: Mpris.players.values.length
-                ClippingRectangle {
-                    color: "transparent"
+                Behavior on opacity {NumberAnimation {duration: 150}}
+                Shape {
+                    anchors.horizontalCenter: parent.horizontalCenter
                     width: 180
                     height: 180
-                    radius: height/2
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    Image {
-                        anchors.fill: parent
-                        source: player.modelData?.trackArtUrl ?? source
+                    preferredRendererType: Shape.CurveRenderer
+                    ShapePath {
+                        capStyle: ShapePath.RoundCap
+                        strokeColor: "#444"
+                        fillColor: "transparent"
+                        strokeWidth: 4
+                        PathAngleArc {
+                            moveToStart: true
+                            radiusX: 90 - 6
+                            radiusY: 90 - 6
+                            centerX: 90
+                            centerY: 90
+                            startAngle: 90 + 20
+                            sweepAngle: 360 - 40
+                        }
                     }
-                    NumberAnimation on rotation {
-                        id: spin
-                        paused: !player.modelData?.isPlaying || !root.up || background.index !== 3
-                        duration: 30000
-                        loops: Animation.Infinite
-                        from: 0
-                        to: 360
+                    ShapePath {
+                        capStyle: ShapePath.RoundCap
+                        strokeColor: "white"
+                        fillColor: "transparent"
+                        strokeWidth: 4
+                        PathAngleArc {
+                            moveToStart: true
+                            radiusX: 90 - 6
+                            radiusY: 90 - 6
+                            centerX: 90
+                            centerY: 90
+                            startAngle: 90 + 20
+                            sweepAngle: (player.modelData?.position/player.modelData.length) * (360 - 40)
+                        }
+                    }
+                    ClippingRectangle {
+                        color: "transparent"
+                        radius: height/2
+                        anchors.fill: parent
+                        anchors.margins: 12
+                        Image {
+                            anchors.fill: parent
+                            source: player.modelData?.trackArtUrl ?? source
+                        }
+                        NumberAnimation on rotation {
+                            id: spin
+                            paused: !player.modelData?.isPlaying || !root.up || background.index !== 3
+                            duration: 60000
+                            loops: Animation.Infinite
+                            from: 0
+                            to: 360
+                        }
+                        layer.enabled: true
+                        layer.smooth: true
                     }
                 }
                 Item {width: 1; height: 10}
@@ -147,6 +204,10 @@ Item {
                         clicked: player.modelData?.next
                     }
                 }
+                FrameAnimation {
+                    running: background.index === 3
+                    onTriggered: player.modelData.positionChanged()
+                }
             }
         }
     }