media player and gtk3/4 color updates

Modules/DankDash/MediaPlayerTab.qml

@@ -19,12 +19,53 @@ Item {
 
     property var defaultSink: AudioService.sink
 
-    property color extractedDominantColor: Theme.surface
-    property color extractedAccentColor: Theme.primary
-    property bool colorsExtracted: false
+    // Palette that stays stable across track switches until new colors are ready
+    property color dom: Qt.rgba(Theme.surface.r, Theme.surface.g, Theme.surface.b, 1.0)
+    property color acc: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.25)
+    property color _nextDom: dom
+    property color _nextAcc: acc
+
+    // Track-switch hold (prevents banner flicker only during switches)
+    property bool isSwitching: false
+    property bool paletteReady: false
+    property string _lastArtUrl: ""
+    property url _cqSource: ""
+
+    // Derived "no players" state: always correct, no timers.
+    readonly property int _playerCount: allPlayers ? allPlayers.length : 0
+    readonly property bool _noneAvailable: _playerCount === 0
+    readonly property bool _trulyIdle: activePlayer
+          && activePlayer.playbackState === MprisPlaybackState.Stopped
+          && !activePlayer.trackTitle && !activePlayer.trackArtist
+    readonly property bool showNoPlayerNow: (!_switchHold) && (_noneAvailable || _trulyIdle)
+
+    // Short hold only during track switches (not when players disappear)
+    property bool _switchHold: false
+    Timer {
+      id: _switchHoldTimer
+      interval: 650
+      repeat: false
+      onTriggered: _switchHold = false
+    }
+
+    onActivePlayerChanged: {
+        isSwitching = true
+        _switchHold = true
+        paletteReady = false
+        _switchHoldTimer.restart()
+        if (activePlayer && activePlayer.trackArtUrl)
+            _preloadImage.source = activePlayer.trackArtUrl
+    }
+
+    function maybeFinishSwitch() {
+        if (activePlayer && activePlayer.trackTitle !== "" && paletteReady) {
+            isSwitching = false
+            _switchHold = false
+        }
+    }
 
     readonly property real ratio: {
-        if (!activePlayer || activePlayer.length <= 0) {
+        if (!activePlayer || !activePlayer.length || activePlayer.length <= 0) {
             return 0
         }
         const calculatedRatio = (activePlayer.position || 0) / activePlayer.length
@@ -34,6 +75,34 @@ Item {
     implicitWidth: 700
     implicitHeight: 410
 
+    Connections {
+        target: activePlayer
+        function onTrackTitleChanged() {
+            _switchHoldTimer.restart()
+            maybeFinishSwitch()
+        }
+        function onTrackArtUrlChanged() {
+            if (activePlayer?.trackArtUrl) {
+                _lastArtUrl = activePlayer.trackArtUrl
+                _preloadImage.source = activePlayer.trackArtUrl
+            }
+        }
+    }
+
+    Connections {
+        target: MprisController
+        function onAvailablePlayersChanged() {
+            const count = (MprisController.availablePlayers?.length || 0)
+            if (count === 0) {
+                isSwitching = false
+                _switchHold = false
+            } else {
+                _switchHold = true
+                _switchHoldTimer.restart()
+            }
+        }
+    }
+
     function getAudioDeviceIcon(device) {
         if (!device || !device.name) return "speaker"
         
@@ -75,17 +144,56 @@ Item {
         }
     }
 
+    Image {
+        id: _preloadImage
+        source: ""
+        asynchronous: true
+        cache: true
+        visible: false
+        onStatusChanged: {
+            if (status === Image.Ready) {
+                _cqSource = source
+                colorQuantizer.source = _cqSource
+            }
+            else if (status === Image.Error) {
+                _cqSource = ""
+            }
+        }
+    }
+
     ColorQuantizer {
         id: colorQuantizer
-        source: activePlayer?.trackArtUrl || ""
+        source: _cqSource !== "" ? _cqSource : undefined
         depth: 6
-
         onColorsChanged: {
-            if (colors.length > 0) {
-                extractedDominantColor = colors[0]
-                extractedAccentColor = colors.length > 2 ? colors[2] : colors[0]
-                colorsExtracted = true
+            if (!colors || colors.length === 0) return
+            const d = colors[Math.min(1, colors.length-1)]
+            const a = colors[Math.min(3, colors.length-1)]
+            _pendingDom = d
+            _pendingAcc = a
+            paletteApplyDelay.restart()
+        }
+    }
+
+    property color _pendingDom: dom
+    property color _pendingAcc: acc
+    Timer {
+        id: paletteApplyDelay
+        interval: 90
+        repeat: false
+        onTriggered: {
+            const dist = (c1, c2) => {
+                const dr = c1.r - c2.r, dg = c1.g - c2.g, db = c1.b - c2.b
+                return Math.sqrt(dr*dr + dg*dg + db*db)
             }
+            const domChanged = dist(_pendingDom, dom) > 0.02
+            const accChanged = dist(_pendingAcc, acc) > 0.02
+            if (domChanged || accChanged) {
+                dom = _pendingDom
+                acc = _pendingAcc
+            }
+            paletteReady = true
+            maybeFinishSwitch()
         }
     }
     
@@ -97,31 +205,31 @@ Item {
     Rectangle {
         anchors.fill: parent
         radius: Theme.cornerRadius
-        opacity: colorsExtracted ? 1.0 : 0.3
+        opacity: 1.0
         gradient: Gradient {
             GradientStop {
                 position: 0.0
-                color: colorsExtracted ?
-                    Qt.rgba(extractedDominantColor.r, extractedDominantColor.g, extractedDominantColor.b, 0.4) :
-                    Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2)
+                color: Qt.rgba(dom.r, dom.g, dom.b, paletteReady ? 0.38 : 0.06)
             }
             GradientStop {
                 position: 0.3
-                color: colorsExtracted ?
-                    Qt.rgba(extractedAccentColor.r, extractedAccentColor.g, extractedAccentColor.b, 0.3) :
-                    Qt.rgba(Theme.secondary.r, Theme.secondary.g, Theme.secondary.b, 0.15)
+                color: Qt.rgba(acc.r, acc.g, acc.b, paletteReady ? 0.28 : 0.05)
             }
             GradientStop {
                 position: 1.0
-                color: Qt.rgba(Theme.surface.r, Theme.surface.g, Theme.surface.b, 0.85)
+                color: Qt.rgba(Theme.surface.r, Theme.surface.g, Theme.surface.b, paletteReady ? 0.92 : 0.985)
             }
         }
+        Behavior on opacity { NumberAnimation { duration: 160 } }
     }
 
+    Behavior on dom { ColorAnimation { duration: 220; easing.type: Easing.InOutQuad } }
+    Behavior on acc { ColorAnimation { duration: 220; easing.type: Easing.InOutQuad } }
+
     Column {
         anchors.centerIn: parent
         spacing: Theme.spacingM
-        visible: !activePlayer || activePlayer.trackTitle === ""
+        visible: showNoPlayerNow
 
         DankIcon {
             name: "music_note"
@@ -141,7 +249,7 @@ Item {
     Item {
         anchors.fill: parent
         clip: false
-        visible: activePlayer && activePlayer.trackTitle !== ""
+        visible: !_noneAvailable && (!showNoPlayerNow)
 
         MouseArea {
             anchors.fill: parent

matugen/templates/gtk-colors.css

@@ -3,18 +3,18 @@
 * Generated with Matugen
 */
 
-@define-color accent_color {{colors.primary_fixed_dim.default.hex}};
-@define-color accent_fg_color {{colors.on_primary_fixed.default.hex}};
+@define-color accent_color {{colors.primary.default.hex}};
+@define-color accent_fg_color {{colors.on_primary.default.hex}};
 @define-color accent_bg_color {{colors.primary_fixed_dim.default.hex}};
-@define-color window_bg_color {{colors.surface_dim.default.hex}};
+@define-color window_bg_color {{colors.surface_container.default.hex}};
 @define-color window_fg_color {{colors.on_surface.default.hex}};
-@define-color headerbar_bg_color {{colors.surface_dim.default.hex}};
+@define-color headerbar_bg_color {{colors.surface_container.default.hex}};
 @define-color headerbar_fg_color {{colors.on_surface.default.hex}};
-@define-color popover_bg_color {{colors.surface_dim.default.hex}};
+@define-color popover_bg_color {{colors.surface_container.default.hex}};
 @define-color popover_fg_color {{colors.on_surface.default.hex}};
-@define-color view_bg_color {{colors.surface.default.hex}};
+@define-color view_bg_color {{colors.surface_container.default.hex}};
 @define-color view_fg_color {{colors.on_surface.default.hex}};
-@define-color card_bg_color {{colors.surface.default.hex}};
+@define-color card_bg_color {{colors.surface_container.default.hex}};
 @define-color card_fg_color {{colors.on_surface.default.hex}};
 @define-color sidebar_bg_color @window_bg_color;
 @define-color sidebar_fg_color @window_fg_color;
@@ -22,13 +22,13 @@
 @define-color sidebar_backdrop_color @window_bg_color;
 
 /* Titlebar and headerbar specific colors for window decorations */
-@define-color theme_bg_color {{colors.surface.default.hex}};
+@define-color theme_bg_color {{colors.surface_container.default.hex}};
 @define-color theme_fg_color {{colors.on_surface.default.hex}};
-@define-color theme_base_color {{colors.surface.default.hex}};
+@define-color theme_base_color {{colors.surface_container.default.hex}};
 @define-color theme_text_color {{colors.on_surface.default.hex}};
 @define-color theme_selected_bg_color {{colors.primary.default.hex}};
 @define-color theme_selected_fg_color {{colors.on_primary.default.hex}};
-@define-color theme_button_background_normal {{colors.surface.default.hex}};
+@define-color theme_button_background_normal {{colors.surface_container_high.default.hex}};
 @define-color theme_button_foreground_normal {{colors.on_surface.default.hex}};
 @define-color theme_button_background_hover alpha({{colors.on_surface.default.hex}}, 0.08);
 @define-color theme_button_foreground_hover {{colors.on_surface.default.hex}};
@@ -44,8 +44,8 @@
 @define-color headerbar_shade_color {{colors.surface_variant.default.hex}};
 
 /* Window control and decoration colors */
-@define-color wm_bg_a {{colors.surface_dim.default.hex}};
-@define-color wm_bg_b {{colors.surface_container.default.hex}};
+@define-color wm_bg_a {{colors.surface_container.default.hex}};
+@define-color wm_bg_b {{colors.surface_container_high.default.hex}};
 @define-color wm_border_a {{colors.outline.default.hex}};
 @define-color wm_border_b {{colors.outline_variant.default.hex}};
 @define-color wm_shadow {{colors.shadow.default.hex}};
@@ -58,7 +58,7 @@
 @define-color menu_selected_fg_color {{colors.on_primary.default.hex}};
 
 /* Button and control colors */
-@define-color button_bg_color {{colors.surface.default.hex}};
+@define-color button_bg_color {{colors.surface_container_high.default.hex}};
 @define-color button_fg_color {{colors.on_surface.default.hex}};
 @define-color button_border_color {{colors.outline_variant.default.hex}};
 @define-color button_active_bg_color {{colors.primary.default.hex}};

matugen/templates/gtk3-colors.css

@@ -97,7 +97,7 @@ popover.background .menuitem.button.flat:selected, .csd treeview.view:selected,
  * Base States *
  ***************/
 .background {
-  background-color: {{colors.surface.default.hex}};
+  background-color: {{colors.surface_container.default.hex}};
   color: {{colors.on_surface.default.hex}};
 }
 
@@ -139,7 +139,7 @@ popover.background .menuitem.button.flat:selected, .csd treeview.view:selected,
 }
 
 .view {
-  background-color: {{colors.surface.default.hex}};
+  background-color: {{colors.surface_container.default.hex}};
   color: {{colors.on_surface.default.hex}};
 }
 
@@ -160,7 +160,7 @@ window.background.csd > stack.view {
 }
 
 textview text {
-  background-color: {{colors.surface.default.hex}};
+  background-color: {{colors.surface_container.default.hex}};
 }
 
 textview border {
@@ -412,7 +412,7 @@ entry progress {
 }
 
 treeview entry.flat, treeview entry {
-  background-color: {{colors.surface.default.hex}};
+  background-color: {{colors.surface_container.default.hex}};
 }
 
 treeview entry.flat, treeview entry.flat:focus, treeview entry, treeview entry:focus {
@@ -1051,7 +1051,7 @@ button.combo:only-child:disabled {
 toolbar {
   -GtkWidget-window-dragging: true;
   padding: 2px 3px;
-  background-color: {{colors.surface.default.hex}};
+  background-color: {{colors.surface_container.default.hex}};
 }
 
 .osd toolbar {
@@ -1117,7 +1117,7 @@ toolbar:not(.inline-toolbar):not(.osd) switch {
 }
 
 .toolbar {
-  background-color: {{colors.surface_container_lowest.default.hex}};
+  background-color: {{colors.surface_container.default.hex}};
 }
 
 frame .toolbar {
@@ -1129,7 +1129,7 @@ frame .toolbar {
   border-style: solid;
   border-width: 0 1px 1px;
   border-color: alpha({{colors.on_surface.default.hex}}, 0.12);
-  background-color: {{colors.surface_container_lowest.default.hex}};
+  background-color: {{colors.surface_container.default.hex}};
 }
 
 .frame .inline-toolbar {
@@ -1143,7 +1143,7 @@ searchbar > revealer > box,
   border-style: solid;
   border-width: 0 0 1px;
   border-color: alpha({{colors.on_surface.default.hex}}, 0.12);
-  background-color: {{colors.surface.default.hex}};
+  background-color: {{colors.surface_container.default.hex}};
   background-clip: border-box;
 }
 
@@ -1219,7 +1219,7 @@ searchbar > revealer > box {
 
 .titlebar {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
-  background-color: {{colors.surface_container_low.default.hex}};
+  background-color: {{colors.surface_container.default.hex}};
   color: {{colors.on_surface.default.hex}};
   border-radius: 12px 12px 0 0;
   box-shadow: inset 0 -1px alpha({{colors.on_surface.default.hex}}, 0.12);
@@ -1238,7 +1238,7 @@ searchbar > revealer > box {
 }
 
 .csd .titlebar:backdrop {
-  background-color: {{colors.surface_container_lowest.default.hex}};
+  background-color: {{colors.surface_container.default.hex}};
 }
 
 .titlebar .title {
@@ -1275,7 +1275,7 @@ searchbar > revealer > box {
 }
 
 .titlebar + separator:backdrop, .titlebar + separator.sidebar:backdrop {
-  background-color: {{colors.surface.default.hex}};
+  background-color: {{colors.surface_container.default.hex}};
 }
 
 .titlebar.selection-mode + separator, .titlebar.selection-mode + separator.sidebar, .selection-mode .titlebar + separator, .selection-mode .titlebar + separator.sidebar {
@@ -1378,13 +1378,13 @@ searchbar > revealer > box {
   padding: 6px 12px;
   border-radius: 12px 12px 0 0;
   border: none;
-  background-color: {{colors.surface_container_lowest.default.hex}};
+  background-color: {{colors.surface_container.default.hex}};
   background-image: none;
   box-shadow: inset 0 1px alpha({{colors.on_surface.default.hex}}, 0.1);
 }
 
 .titlebar.default-decoration:backdrop {
-  background-color: {{colors.surface.default.hex}};
+  background-color: {{colors.surface_container.default.hex}};
 }
 
 .tiled .titlebar.default-decoration, .maximized .titlebar.default-decoration, .fullscreen .titlebar.default-decoration {
@@ -1419,7 +1419,7 @@ headerbar {
 }
 
 box.vertical headerbar {
-  background-color: {{colors.surface_container_low.default.hex}};
+  background-color: {{colors.surface_container.default.hex}};
 }
 
 headerbar entry,
@@ -1668,7 +1668,7 @@ treeview.view header button:not(:focus):not(:hover):not(:active) {
 }
 
 treeview.view header button, treeview.view header button:disabled {
-  background-color: {{colors.surface.default.hex}};
+  background-color: {{colors.surface_container.default.hex}};
 }
 
 treeview.view header button:last-child {
@@ -1683,7 +1683,7 @@ treeview.view header.button.dnd {
   border-color: alpha({{colors.on_surface.default.hex}}, 0.12);
   border-radius: 0;
   box-shadow: none;
-  background-color: {{colors.surface.default.hex}};
+  background-color: {{colors.surface_container.default.hex}};
   background-clip: border-box;
   color: {{colors.primary.default.hex}};
 }
@@ -1699,7 +1699,7 @@ menubar,
 .menubar {
   -GtkWidget-window-dragging: true;
   padding: 0;
-  background-color: {{colors.surface_container_lowest.default.hex}};
+  background-color: {{colors.surface_container.default.hex}};
   color: {{colors.on_surface.default.hex}};
   box-shadow: inset 0 -1px alpha({{colors.on_surface.default.hex}}, 0.12);
 }
@@ -1707,7 +1707,7 @@ menubar,
 menubar:backdrop,
 .menubar:backdrop {
   color: alpha({{colors.on_surface.default.hex}}, 0.7);
-  background-color: {{colors.surface.default.hex}};
+  background-color: {{colors.surface_container.default.hex}};
 }
 
 .csd menubar, .csd .menubar {