Added Cover art display on doubleclick

src-tauri/Cargo.toml

@@ -34,6 +34,8 @@ chrono = { version =  "0.4.38", features = ["serde"] }
 itertools = "0.13.0"
 rfd = "0.15.1"
 colog = "1.3.0"
+tempfile = "3.14.0"
+opener = "0.7.2"
 
 [features]
 default = [ "custom-protocol" ]

src-tauri/src/commands.rs

@@ -1,6 +1,9 @@
+use std::{fs::OpenOptions, io::{Read, Write}};
+
 use dmp_core::music_controller::{controller::{ControllerHandle, LibraryResponse, PlayerCommand, PlayerLocation, PlayerResponse, QueueResponse}, queue::QueueSong};
 use kushi::QueueItem;
 use tauri::{AppHandle, Emitter, State, Wry};
+use tempfile::TempDir;
 use uuid::Uuid;
 
 use crate::wrappers::_Song;
@@ -30,3 +33,25 @@ pub async fn play_now(app: AppHandle<Wry>, ctrl_handle: State<'_, ControllerHand
     app.emit("playing", ()).unwrap();
     Ok(())
 }
+
+#[tauri::command]
+pub async fn display_album_art(ctrl_handle: State<'_, ControllerHandle>, temp_dir: State<'_, TempDir>, uuid: Uuid) -> Result<(), String> {
+    match ctrl_handle.lib_get_song(uuid.clone()).await.0.album_art(0) {
+        Ok(art) => {
+            let mut art = art.unwrap();
+            let path = temp_dir.path().join(format!("CoverArt_{uuid}.{}", file_format::FileFormat::from_bytes(&art).extension()));
+            // TODO: This can be optimised later
+            let mut file = OpenOptions::new()
+                .create(true)
+                .truncate(true)
+                .write(true)
+                .read(true)
+                .open(path.clone())
+                .unwrap();
+            file.write_all(&mut art).unwrap();
+            opener::open(path).unwrap();
+        }
+        Err(e) => return Err(e.to_string())
+    };
+    Ok(())
+}

src-tauri/src/lib.rs

@@ -1,12 +1,13 @@
 use std::{fs, path::PathBuf, str::FromStr, thread::spawn};
 
-use commands::{add_song_to_queue, play_now};
 use crossbeam::channel::{unbounded, Receiver, Sender};
 use dmp_core::{config::{Config, ConfigLibrary}, music_controller::controller::{Controller, ControllerHandle, LibraryResponse}, music_storage::library::MusicLibrary};
 use tauri::{http::Response, Emitter, Manager, State, WebviewWindowBuilder, Wry};
 use uuid::Uuid;
 
 use crate::wrappers::{get_library, play, pause, prev, set_volume, get_song, next, get_queue, import_playlist, get_playlist, get_playlists, remove_from_queue};
+use commands::{add_song_to_queue, play_now, display_album_art};
+
 
 pub mod wrappers;
 pub mod commands;
@@ -81,10 +82,12 @@ pub fn run() {
         import_playlist,
         get_playlist,
         get_playlists,
-        remove_from_queue
+        remove_from_queue,
+        display_album_art,
     ]).manage(ConfigRx(rx))
     .manage(LibRx(lib_rx))
     .manage(HandleTx(handle_tx))
+    .manage(tempfile::TempDir::new().unwrap())
     .register_asynchronous_uri_scheme_protocol("asset", move |ctx, req, res| {
         let query = req
             .clone()

src/App.tsx

@@ -27,13 +27,16 @@ function App() {
 
   useEffect(() => {
     const unlisten = appWindow.listen<any>("now_playing_change", ({ payload, }) => {
+        const displayArtwork = () => {
+          invoke('display_album_art', { uuid: payload.uuid }).then(() => {})
+        }
         // console.log(event);
         setNowPlaying(
           <NowPlaying
             title={ payload.tags.TrackTitle }
             album={ payload.tags.AlbumTitle }
-            artist={ payload.tags["DISPLAY ARTIST"] }
-            artwork={ <img src={convertFileSrc("abc") + "?" + payload.uuid } id="nowPlayingArtwork" alt="Now Playing Artwork" key={payload.uuid} /> }
+            artist={ payload.tags.TrackArtist }
+            artwork={ <img src={convertFileSrc("abc") + "?" + payload.uuid } id="nowPlayingArtwork" alt="Now Playing Artwork" key={payload.uuid} onDoubleClick={ displayArtwork } /> }
           />
         )
 
@@ -259,9 +262,9 @@ function Song(props: SongProps) {
     <div onClick={() => {
       invoke("play_now", { uuid: props.uuid, location: props.playerLocation }).then(() => {})
     }} className="song">
+      <p className="artist">{ props.tags.AlbumArtist }</p>
       <p className="title">{ props.tags.TrackTitle }</p>
       <p className="album">{ props.tags.AlbumTitle }</p>
-      <p className="artist">{ props.tags.AlbumArtist }</p>
       <p className="duration">
         { Math.round(+props.duration / 60) }:
         { (+props.duration % 60).toString().padStart(2, "0") }