80 lines
2.0 KiB
Rust
80 lines
2.0 KiB
Rust
use crate::playstatus::PlayStatus;
|
|
use leptos::ev::MouseEvent;
|
|
use leptos::leptos_dom::*;
|
|
use leptos::*;
|
|
use leptos_icons::*;
|
|
use leptos_icons::BsIcon::*;
|
|
|
|
const RM_BTN_SIZE: &str = "2rem";
|
|
|
|
fn remove_song_fn(index: usize, status: RwSignal<PlayStatus>) {
|
|
if index == 0 {
|
|
log!("Error: Trying to remove currently playing song (index 0) from queue");
|
|
} else {
|
|
log!("Remove Song from Queue: Song is not currently playing, 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 {
|
|
view!{
|
|
<div class="queue-song">
|
|
<img src={song_image_path} alt={song_title.clone()} />
|
|
<div class="queue-song-info">
|
|
<h3>{song_title}</h3>
|
|
<p>{song_artist}</p>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
#[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)
|
|
fallback=|| view!{""}>
|
|
<div class="queue">
|
|
<div class="queue-header">
|
|
<h2>Queue</h2>
|
|
</div>
|
|
<ul>
|
|
{
|
|
status.with(|status| status.queue.iter()
|
|
.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() />
|
|
<Show
|
|
when=move || index != 0
|
|
fallback=|| view!{
|
|
<p>Playing</p>
|
|
}>
|
|
<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>
|
|
</Show>
|
|
</div>
|
|
})
|
|
.collect::<Vec<_>>())
|
|
}
|
|
</ul>
|
|
</div>
|
|
</Show>
|
|
|
|
}
|
|
}
|