feat: playing song overlay

Shell/Overlays/MprisOverlay.qml

@@ -0,0 +1,145 @@
+import QtQuick
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Services.Mpris
+
+PanelWindow {
+    id: overlay
+    anchors {
+        top: true
+        left: true
+        right: true
+        bottom: true
+    }
+
+    WlrLayershell.layer: WlrLayer.Overlay
+    WlrLayershell.focusable: false
+    WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
+    WlrLayershell.namespace: "deltarune-quickshell-overlay-nonanimated"
+    exclusionMode: ExclusionMode.Ignore
+
+    mask: Region {}
+
+    color: '#00ffffff'
+
+    visible: true
+
+    Repeater {
+        model: Mpris.players
+
+        Item {
+            id: songItem
+
+            property bool linger: false
+
+            Timer {
+                id: hideTimer
+                interval: 2000
+                repeat: false
+                onTriggered: songItem.linger = false
+            }
+
+            property bool hasSong: (index === 0 && modelData.dbusName.startsWith("org.mpris.MediaPlayer2.chromium.instance") && modelData.trackTitle !== "" && modelData.trackArtist !== "")
+
+            property bool active: hasSong && linger
+
+            onHasSongChanged: {
+                if (hasSong) {
+                    linger = true;
+                    hideTimer.restart();
+                }
+            }
+
+            visible: opacity > 0
+            y: 64
+            x: 64
+            opacity: 0
+
+            states: [
+                State {
+                    name: "shown"
+                    when: songItem.active
+                    PropertyChanges {
+                        target: songItem
+                        x: 64
+                        opacity: 1
+                    }
+                },
+                State {
+                    name: "hidden"
+                    when: !songItem.active
+                    PropertyChanges {
+                        target: songItem
+                        x: 64 + 32
+                        opacity: 0
+                    }
+                }
+            ]
+
+            transitions: [
+                Transition {
+                    from: "hidden"
+                    to: "shown"
+                    ParallelAnimation {
+                        NumberAnimation {
+                            properties: "x"
+                            from: 64 + 32
+                            to: 64
+                            duration: 500
+                            easing.type: Easing.OutCubic
+                        }
+                        NumberAnimation {
+                            properties: "opacity"
+                            duration: 500
+                        }
+                    }
+                },
+                Transition {
+                    from: "shown"
+                    to: "hidden"
+                    ParallelAnimation {
+                        NumberAnimation {
+                            properties: "x"
+                            duration: 350
+                            from: 64
+                            to: 64 + 32
+                            easing.type: Easing.InCubic
+                        }
+                        NumberAnimation {
+                            properties: "opacity"
+                            duration: 350
+                        }
+                    }
+                }
+            ]
+
+            Text {
+                x: 1
+                y: 1
+                text: "♪ " + modelData.trackArtist + " - " + modelData.trackTitle
+                font.family: "8bitoperator JVE"
+                font.pixelSize: 32
+                font.letterSpacing: 1
+                renderType: Text.NativeRendering
+                font.hintingPreference: Font.PreferNoHinting
+                smooth: false
+                antialiasing: false
+                color: "#04047c"
+            }
+
+            Text {
+                x: 0
+                y: 0
+                text: "♪ " + modelData.trackArtist + " - " + modelData.trackTitle
+                font.family: "8bitoperator JVE"
+                font.pixelSize: 32
+                font.letterSpacing: 1
+                renderType: Text.NativeRendering
+                font.hintingPreference: Font.PreferNoHinting
+                smooth: false
+                antialiasing: false
+                color: "#ae00ff"
+            }
+        }
+    }
+}

shell.qml

@@ -3,6 +3,7 @@ import Quickshell.Io
 import Quickshell.Hyprland
 import QtQuick
 import "Shell"
+import "Shell/Overlays"
 
 ShellRoot {
     id: baseShell
@@ -14,6 +15,7 @@ ShellRoot {
     Topbar {}
     Healthbar {}
     DialogBox {}
+    MprisOverlay {}
 
     InputShortcuts {}