diff --git a/src/playbar.rs b/src/playbar.rs index 60b3b95..f0a85aa 100644 --- a/src/playbar.rs +++ b/src/playbar.rs @@ -6,6 +6,7 @@ use leptos::html::{Audio, Div}; use leptos::leptos_dom::*; use leptos::*; use leptos_icons::BsIcon::*; +use leptos_icons::RiIcon::*; use leptos_icons::*; /// Width and height of the forward/backward skip buttons @@ -13,6 +14,9 @@ const SKIP_BTN_SIZE: &str = "3.5em"; /// Width and height of the play/pause button const PLAY_BTN_SIZE: &str = "5em"; +// Width and height of the queue button +const QUEUE_BTN_SIZE: &str = "3.5em"; + /// Threshold in seconds for skipping to the previous song instead of skipping to the start of the current song const MIN_SKIP_BACK_TIME: f64 = 5.0; @@ -101,6 +105,14 @@ fn set_playing(status: impl SignalUpdate, play: bool) { }); } +fn toggle_queue(status: impl SignalUpdate) { + status.update(|status| { + status.queue_open = !status.queue_open; + }); + + +} + /// Set the source of the audio player /// /// Logs an error if the audio element is not available @@ -309,6 +321,30 @@ fn ProgressBar(percentage: MaybeSignal, status: RwSignal) -> im } } +#[component] +fn QueueToggle(status: RwSignal) -> impl IntoView { + + let update_queue = move |_| { + toggle_queue(status); + log!("queue button pressed, queue status: {:?}", status.with(|status| status.queue_open)); + }; + + // We use this to prevent the buttons from being focused when clicked + // If buttons were focused on clicks, then pressing space bar to play/pause would "click" the button + // and trigger unwanted behavior + let prevent_focus = move |e: MouseEvent| { + e.prevent_default(); + }; + + view! { +
+ +
+ } +} + /// The main play bar component, containing the progress bar, media info, play controls, and play duration #[component] pub fn PlayBar(status: RwSignal) -> impl IntoView { @@ -457,6 +493,7 @@ pub fn PlayBar(status: RwSignal) -> impl IntoView { + } }