eta357/LibreTunes-Nix-Test
1
0
Fork 0
Code Pull Requests Actions Activity

Implement dragging to reorder queue

Browse Source
This commit is contained in:
Connor Wittman 2024-02-28 00:54:35 -05:00
parent 2a0dacff3e
commit d2986797bb
1 changed files with 56 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/queue.rs
View File

@ -4,6 +4,7 @@ use leptos::leptos_dom::*;
use leptos::*;
use leptos_icons::*;
use leptos_icons::CgIcon::*;
use leptos::ev::DragEvent;
const RM_BTN_SIZE: &str = "2.5rem";
@ -43,6 +44,53 @@ pub fn Queue(status: RwSignal<PlayStatus>) -> impl IntoView {
e.prevent_default();
};
let index_being_dragged = create_rw_signal(-1);
let index_being_hovered = create_rw_signal(-1);
let on_drag_start = move |_e: DragEvent, index: usize| {
// set the index of the item being dragged
index_being_dragged.set(index as i32);
};
let on_drop = move |e: DragEvent| {
e.prevent_default();
// if the index of the item being dragged is not the same as the index of the item being hovered over
if index_being_dragged.get() != index_being_hovered.get() && index_being_dragged.get() > 0 && index_being_hovered.get() > 0 {
// get the index of the item being dragged
let dragged_index = index_being_dragged.get_untracked() as usize;
// get the index of the item being hovered over
let hovered_index = index_being_hovered.get_untracked() as usize;
// update the queue
status.update(|status| {
// remove the dragged item from the list
let dragged_item = status.queue.remove(dragged_index);
// insert the dragged item at the index of the item being hovered over
status.queue.insert(hovered_index, dragged_item.unwrap());
});
// reset the index of the item being dragged
index_being_dragged.set(-1);
// reset the index of the item being hovered over
index_being_hovered.set(-1);
log!("drag end. Moved item from index {} to index {}", dragged_index, hovered_index);
}
else {
// reset the index of the item being dragged
index_being_dragged.set(-1);
// reset the index of the item being hovered over
index_being_hovered.set(-1);
}
};
let on_drag_enter = move |_e: DragEvent, index: usize| {
// set the index of the item being hovered over
index_being_hovered.set(index as i32);
};
let on_drag_over = move |e: DragEvent| {
e.prevent_default();
};
view!{
<Show
when=move || status.with(|status| status.queue_open)
@ -53,10 +101,16 @@ pub fn Queue(status: RwSignal<PlayStatus>) -> impl IntoView {
</div>
<ul>
{
status.with(|status| status.queue.iter()
move || status.with(|status| status.queue.iter()
.enumerate()
.map(|(index, song)| view! {
<div class="queue-item">
<div class="queue-item"
draggable="true"
on:dragstart=move |e: DragEvent| on_drag_start(e, index)
on:drop=on_drop
on:dragenter=move |e: DragEvent| on_drag_enter(e, index)
on:dragover=on_drag_over
>
<Song song_image_path=song.image_path.clone() song_title=song.name.clone() song_artist=song.artist.clone() />
<Show
when=move || index != 0