Add remove button for queue items

This commit is contained in:
Connor Wittman 2024-02-06 17:38:16 -05:00 committed by Ethan Girouard
parent b8d2fca0ee
commit 04898fe7f0
Signed by: eta357
GPG Key ID: 7BCDC36DFD11C146

View File

@ -1,6 +1,38 @@
use crate::playstatus::PlayStatus;
use crate::playbar::skip_to;
use crate::playbar::get_song_time_duration;
use crate::playbar::set_playing;
use leptos::ev::MouseEvent;
use leptos::leptos_dom::*;
use leptos::*;
use leptos_icons::*;
use leptos_icons::BsIcon::*;
const RM_BTN_SIZE: &str = "2rem";
fn skip_to_next(status: RwSignal<PlayStatus>) {
if let Some(duration) = get_song_time_duration(status) {
skip_to(status, duration.1);
set_playing(status, true);
} else {
error!("Unable to skip forward: Unable to get current duration");
}
}
fn remove_song_fn(index: usize, status: RwSignal<PlayStatus>) {
// handle the case when index is 0 (i.e. the first song in the queue is removed)
// if the song is currently playing, skip to the next song
if index == 0 {
log!("Remove Song from Queue: Song is currently playing, skipping to next song and adding to history");
skip_to_next(status);
} else {
log!("Remove Song from Queue: Song is not currently playing, no need to skip to next song, instead deleting song from queue and not adding to history");
status.update(|status| {
status.queue.remove(index);
});
}
}
#[component]
fn Song(song_image_path: String, song_title: String, song_artist: String) -> impl IntoView {
@ -18,6 +50,15 @@ fn Song(song_image_path: String, song_title: String, song_artist: String) -> imp
#[component]
pub fn Queue(status: RwSignal<PlayStatus>) -> impl IntoView {
let remove_song = move |index: usize| {
remove_song_fn(index, status);
log!("Removed song {}", index + 1);
};
let prevent_focus = move |e: MouseEvent| {
e.prevent_default();
};
view!{
<Show
when=move || status.with(|status| status.queue_open)
@ -29,8 +70,14 @@ pub fn Queue(status: RwSignal<PlayStatus>) -> impl IntoView {
<ul>
{
status.with(|status| status.queue.iter()
.map(|song| view! {
<Song song_image_path=song.image_path.clone() song_title=song.name.clone() song_artist=song.artist.clone() />
.enumerate()
.map(|(index, song)| view! {
<div class="queue-item">
<Song song_image_path=song.image_path.clone() song_title=song.name.clone() song_artist=song.artist.clone() />
<button on:click=move |_| remove_song(index) on:mousedown=prevent_focus>
<Icon class="remove-song" width=RM_BTN_SIZE height=RM_BTN_SIZE icon=Icon::from(BsTrashFill) />
</button>
</div>
})
.collect::<Vec<_>>())
}