Making the new media playback OSD more beautiful (#1638)

* feat: decouple track art downloads into new TrackArtService

* feat: beautify media playback osd with track art

* fix: bug when switching from art to no art

quickshell/Modules/DankDash/MediaPlayerTab.qml

@@ -62,8 +62,6 @@ Item {
     readonly property real currentVolume: usePlayerVolume ? activePlayer.volume : (AudioService.sink?.audio?.volume ?? 0)
 
     property bool isSwitching: false
-    property string _lastArtUrl: ""
-    property string _bgArtSource: ""
 
     // Derived "no players" state: always correct, no timers.
     readonly property int _playerCount: allPlayers ? allPlayers.length : 0
@@ -88,28 +86,7 @@ Item {
         isSwitching = true;
         _switchHold = true;
         _switchHoldTimer.restart();
-        if (activePlayer.trackArtUrl)
-            loadArtwork(activePlayer.trackArtUrl);
-    }
-
-    property string activeTrackArtFile: ""
-
-    function loadArtwork(url) {
-        if (!url)
-            return;
-        if (url.startsWith("http://") || url.startsWith("https://")) {
-            const filename = "/tmp/.dankshell/trackart_" + Date.now() + ".jpg";
-            activeTrackArtFile = filename;
-
-            cleanupProcess.command = ["sh", "-c", "mkdir -p /tmp/.dankshell && find /tmp/.dankshell -name 'trackart_*' ! -name '" + filename.split('/').pop() + "' -delete"];
-            cleanupProcess.running = true;
-
-            imageDownloader.command = ["curl", "-L", "-s", "--user-agent", "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36", "-o", filename, url];
-            imageDownloader.targetFile = filename;
-            imageDownloader.running = true;
-            return;
-        }
-        _bgArtSource = url;
+        TrackArtService.loadArtwork(activePlayer.trackArtUrl);
     }
 
     function maybeFinishSwitch() {
@@ -138,10 +115,7 @@ Item {
             maybeFinishSwitch();
         }
         function onTrackArtUrlChanged() {
-            if (activePlayer?.trackArtUrl) {
-                _lastArtUrl = activePlayer.trackArtUrl;
-                loadArtwork(activePlayer.trackArtUrl);
-            }
+            TrackArtService.loadArtwork(activePlayer.trackArtUrl);
         }
     }
 
@@ -213,22 +187,6 @@ Item {
         }
     }
 
-    Process {
-        id: imageDownloader
-        running: false
-        property string targetFile: ""
-
-        onExited: exitCode => {
-            if (exitCode === 0 && targetFile)
-                _bgArtSource = "file://" + targetFile;
-        }
-    }
-
-    Process {
-        id: cleanupProcess
-        running: false
-    }
-
     property bool isSeeking: false
 
     Timer {
@@ -241,14 +199,14 @@ Item {
     Item {
         id: bgContainer
         anchors.fill: parent
-        visible: _bgArtSource !== ""
+        visible: TrackArtService._bgArtSource !== ""
 
         Image {
             id: bgImage
             anchors.centerIn: parent
             width: Math.max(parent.width, parent.height) * 1.1
             height: width
-            source: _bgArtSource
+            source: TrackArtService._bgArtSource
             fillMode: Image.PreserveAspectCrop
             asynchronous: true
             cache: true