Added Queue Navigation and removal

src-tauri/src/lib.rs

@@ -6,7 +6,7 @@ use dmp_core::{config::{Config, ConfigLibrary}, music_controller::controller::{C
 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};
+use crate::wrappers::{get_library, play, pause, prev, set_volume, get_song, next, get_queue, import_playlist, get_playlist, get_playlists, remove_from_queue};
 
 pub mod wrappers;
 pub mod commands;
@@ -80,7 +80,8 @@ pub fn run() {
         play_now,
         import_playlist,
         get_playlist,
-        get_playlists
+        get_playlists,
+        remove_from_queue
     ]).manage(ConfigRx(rx))
     .manage(LibRx(lib_rx))
     .manage(HandleTx(handle_tx))

src-tauri/src/wrappers.rs

@@ -2,7 +2,7 @@ use std::{collections::BTreeMap, path::PathBuf};
 
 use chrono::{DateTime, Utc, serde::ts_milliseconds_option};
 use crossbeam::channel::Sender;
-use dmp_core::{music_controller::controller::{ControllerHandle, LibraryCommand, LibraryResponse, PlayerResponse, QueueCommand, QueueResponse}, music_storage::library::{Song, Tag, URI}};
+use dmp_core::{music_controller::controller::{ControllerHandle, LibraryCommand, LibraryResponse, PlayerLocation, PlayerResponse, QueueCommand, QueueResponse}, music_storage::library::{Song, Tag, URI}};
 use itertools::Itertools;
 use kushi::QueueItemType;
 use serde::Serialize;
@@ -78,7 +78,7 @@ pub async fn now_playing(ctrl_handle: State<'_, ControllerHandle>) -> Result<(),
 }
 
 #[tauri::command]
-pub async fn get_queue(ctrl_handle: State<'_, ControllerHandle>) -> Result<Vec<_Song>, String> {
+pub async fn get_queue(ctrl_handle: State<'_, ControllerHandle>) -> Result<Vec<(_Song, PlayerLocation)>, String> {
     Ok(
         ctrl_handle
             .queue_get_all()
@@ -86,14 +86,14 @@ pub async fn get_queue(ctrl_handle: State<'_, ControllerHandle>) -> Result<Vec<_
             .into_iter()
             .map(|item| {
                 let QueueItemType::Single(song) = item.item else { unreachable!("There should be no albums in the queue right now") };
-                _Song::from(&song.song)
+                (_Song::from(&song.song), song.location)
             }
         ).collect_vec()
     )
 }
 
 #[tauri::command]
-pub async fn remove_from_queue(app: AppHandle<Wry>, ctrl_handle: ControllerHandle, index: usize) -> Result<(), String> {
+pub async fn remove_from_queue(app: AppHandle<Wry>, ctrl_handle: State<'_, ControllerHandle>, index: usize) -> Result<(), String> {
     match ctrl_handle.queue_remove(index).await {
         Ok(_) => {
             app.emit("queue_updated", ()).unwrap();

src/App.tsx

@@ -47,7 +47,14 @@ function App() {
         invoke('get_queue').then((_songs) => {
           let songs = _songs as any[]
             setQueue(
-              songs.filter((_, i) => i != 0).map((song) => <QueueSong song={ song } key={ song.uuid + '_' + Math.floor((Math.random() * 100_000) + 1) + '_' + Date.now() } />)
+              songs.filter((_, i) => i != 0).map((song, i) =>
+                <QueueSong
+                  song={ song[0] }
+                  location={ song[1] as "Library" | {"Playlist" : string}}
+                  index={i+1}
+                  key={ song.uuid + '_' + Math.floor((Math.random() * 100_000) + 1) + '_' + Date.now() }
+                />
+              )
             )
         })
     })
@@ -329,22 +336,30 @@ function Queue({ songs }: QueueProps) {
 }
 
 interface QueueSongProps {
-  song: any
+  song: any,
+  location: "Library" | {"Playlist": string},
+  index: number,
 }
 
-function QueueSong({ song }: QueueSongProps) {
+function QueueSong({ song, location, index }: QueueSongProps) {
   console.log(song.tags);
 
+  let removeFromQueue = () => {
+    invoke('remove_from_queue', { index: index }).then(() => {})
+  }
+
+  let playNow = () => {
+    invoke('play_now', { uuid: song.uuid, location: location }).then(() => {})
+  }
+
   return (
-    // <button className="queueSongButton">
+    <div className="queueSong"  onAuxClick={ removeFromQueue } onClickCapture={ playNow }>
-      <div className="queueSong">
       <img className="queueSongCoverArt" src={ convertFileSrc('abc') + '?' + song.uuid } key={ 'coverArt_' + song.uuid }/>
       <div className="queueSongTags">
         <p className="queueSongTitle">{ song.tags.TrackTitle }</p>
         <p className="queueSongArtist">{ song.tags.TrackArtist }</p>
       </div>
     </div>
-    // </button>
   )
 }