osd: reverse media playback icons and handle screen changes

quickshell/Common/OSDManager.qml

@@ -9,6 +9,20 @@ Singleton {
 
     property var currentOSDsByScreen: ({})
 
+    Connections {
+        target: Quickshell
+        function onScreensChanged() {
+            const activeNames = {};
+            for (let i = 0; i < Quickshell.screens.length; i++)
+                activeNames[Quickshell.screens[i].name] = true;
+            for (const screenName in osdManager.currentOSDsByScreen) {
+                if (activeNames[screenName])
+                    continue;
+                osdManager.currentOSDsByScreen[screenName] = null;
+            }
+        }
+    }
+
     function showOSD(osd) {
         if (!osd || !osd.screen)
             return;

quickshell/Modules/OSD/MediaPlaybackOSD.qml

@@ -16,18 +16,28 @@ DankOSD {
     autoHideInterval: 3000
     enableMouseInteraction: true
 
-    function getPlaybackIcon() {
-        if (!player)
-            return "music_note";
+    property string _displayIcon: "music_note"
+
+    function updatePlaybackIcon() {
+        if (!player) {
+            _displayIcon = "music_note";
+            iconDebounce.stop();
+            return;
+        }
+        let icon = "music_note";
         switch (player.playbackState) {
         case MprisPlaybackState.Playing:
-            return "play_arrow";
+            icon = "pause";
+            break;
         case MprisPlaybackState.Paused:
         case MprisPlaybackState.Stopped:
-            return "pause";
-        default:
-            return "music_note";
+            icon = "play_arrow";
+            break;
         }
+        if (icon === _displayIcon)
+            return;
+        iconDebounce.pendingIcon = icon;
+        iconDebounce.restart();
     }
 
     function togglePlaying() {
@@ -38,6 +48,13 @@ DankOSD {
 
     property bool _pendingShow: false
 
+    Timer {
+        id: iconDebounce
+        interval: 150
+        property string pendingIcon: "music_note"
+        onTriggered: root._displayIcon = pendingIcon
+    }
+
     Image {
         id: artPreloader
         source: TrackArtService._bgArtSource
@@ -86,6 +103,7 @@ DankOSD {
             if (!SettingsData.osdMediaPlaybackEnabled)
                 return;
 
+            root.updatePlaybackIcon();
             TrackArtService.loadArtwork(player.trackArtUrl);
 
             if (!player.trackArtUrl || player.trackArtUrl === "") {
@@ -202,7 +220,7 @@ DankOSD {
 
                 DankIcon {
                     anchors.centerIn: parent
-                    name: getPlaybackIcon()
+                    name: root._displayIcon
                     size: Theme.iconSize
                     color: playPauseButton.containsMouse ? Theme.primary : Theme.surfaceText
                 }
@@ -272,7 +290,7 @@ DankOSD {
 
                 DankIcon {
                     anchors.centerIn: parent
-                    name: getPlaybackIcon()
+                    name: root._displayIcon
                     size: Theme.iconSize
                     color: playPauseButtonVert.containsMouse ? Theme.primary : Theme.surfaceText
                 }

quickshell/Widgets/DankOSD.qml

@@ -66,6 +66,29 @@ PanelWindow {
 
     screen: modelData
     visible: false
+
+    Connections {
+        target: Quickshell
+        function onScreensChanged() {
+            if (!root.visible && !root.shouldBeVisible)
+                return;
+            const currentScreenName = root.screen?.name;
+            if (!currentScreenName) {
+                root.hide();
+                return;
+            }
+            for (let i = 0; i < Quickshell.screens.length; i++) {
+                if (Quickshell.screens[i].name === currentScreenName)
+                    return;
+            }
+            root.shouldBeVisible = false;
+            root.visible = false;
+            hideTimer.stop();
+            closeTimer.stop();
+            osdHidden();
+        }
+    }
+
     WlrLayershell.layer: WlrLayershell.Overlay
     WlrLayershell.exclusiveZone: -1
     WlrLayershell.keyboardFocus: WlrKeyboardFocus.None