From 86c3053b2670dd5c7be5e5639264020f653b0188 Mon Sep 17 00:00:00 2001 From: ecco257 <72117210+ecco257@users.noreply.github.com> Date: Fri, 2 Feb 2024 17:16:07 -0500 Subject: [PATCH 01/20] Add queue component --- src/queue.rs | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 src/queue.rs diff --git a/src/queue.rs b/src/queue.rs new file mode 100644 index 0000000..b194df4 --- /dev/null +++ b/src/queue.rs @@ -0,0 +1,35 @@ +use crate::playstatus::PlayStatus; +use leptos::leptos_dom::*; +use leptos::*; + +#[component] +pub fn Queue(status: RwSignal) -> impl IntoView { + + view!{ + +
+
+

Queue

+
+
    + { + status.with(|status| status.queue.iter() + .map(|song| view! { +
    + {song.name.clone()}/ +
    +

    {song.name.clone()}

    +

    {song.artist.clone()}

    +
    +
    + }) + .collect::>()) + } +
+
+ + + } +} From 7ed5561262ebc73e02f2637307391f1d4b390431 Mon Sep 17 00:00:00 2001 From: ecco257 <72117210+ecco257@users.noreply.github.com> Date: Fri, 2 Feb 2024 17:16:27 -0500 Subject: [PATCH 02/20] Add queue toggle button component --- src/playbar.rs | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) 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 { + } } From c924b5613fdcb2ed0c733f34d46e3e16b69333a4 Mon Sep 17 00:00:00 2001 From: ecco257 <72117210+ecco257@users.noreply.github.com> Date: Fri, 2 Feb 2024 17:17:16 -0500 Subject: [PATCH 03/20] Modify playstatus to keep track of queue status and derive Clone for songdata --- src/playstatus.rs | 3 +++ src/songdata.rs | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/playstatus.rs b/src/playstatus.rs index 363d3cf..5952ee9 100644 --- a/src/playstatus.rs +++ b/src/playstatus.rs @@ -9,6 +9,8 @@ use crate::songdata::SongData; pub struct PlayStatus { /// Whether or not the audio player is currently playing pub playing: bool, + /// Whether or not the queue is open + pub queue_open: bool, /// A reference to the HTML audio element pub audio_player: Option>, /// A queue of songs that have been played, ordered from oldest to newest @@ -53,6 +55,7 @@ impl Default for PlayStatus { fn default() -> Self { Self { playing: false, + queue_open: false, audio_player: None, history: VecDeque::new(), queue: VecDeque::new(), diff --git a/src/songdata.rs b/src/songdata.rs index c24c682..7e0dd0c 100644 --- a/src/songdata.rs +++ b/src/songdata.rs @@ -1,5 +1,5 @@ /// Holds information about a song -#[derive(Debug)] +#[derive(Debug, Clone)] pub struct SongData { /// Song name pub name: String, From 1a1b6550a172bbeb90bd68031f93491203f0719f Mon Sep 17 00:00:00 2001 From: ecco257 <72117210+ecco257@users.noreply.github.com> Date: Fri, 2 Feb 2024 17:18:35 -0500 Subject: [PATCH 04/20] Add queue module to lib.rs --- src/lib.rs | 1 + 1 file changed, 1 insertion(+) diff --git a/src/lib.rs b/src/lib.rs index 4be1145..c00b6dc 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -3,6 +3,7 @@ pub mod songdata; pub mod playstatus; pub mod playbar; pub mod database; +pub mod queue; use cfg_if::cfg_if; cfg_if! { From 33c1b52ba207ca0d9dc9ebc1edf4982fc6114662 Mon Sep 17 00:00:00 2001 From: ecco257 <72117210+ecco257@users.noreply.github.com> Date: Fri, 2 Feb 2024 17:19:15 -0500 Subject: [PATCH 05/20] Add styling for queue and queue toggle button --- style/main.scss | 1 + style/playbar.scss | 24 +++++++++++++++++++++++ style/queue.scss | 48 ++++++++++++++++++++++++++++++++++++++++++++++ style/theme.scss | 1 + 4 files changed, 74 insertions(+) create mode 100644 style/queue.scss diff --git a/style/main.scss b/style/main.scss index e49fe50..e496880 100644 --- a/style/main.scss +++ b/style/main.scss @@ -1,5 +1,6 @@ @import 'playbar.scss'; @import 'theme.scss'; +@import 'queue.scss'; body { font-family: sans-serif; diff --git a/style/playbar.scss b/style/playbar.scss index 058b6c4..6d91b94 100644 --- a/style/playbar.scss +++ b/style/playbar.scss @@ -88,4 +88,28 @@ right: 10px; top: 13px; } + + .queue-toggle { + position: absolute; + bottom: 13px; + top: 13px; + right: 90px; + + button { + .controlbtn { + color: $text-controls-color; + } + + .controlbtn:hover { + color: $controls-hover-color; + } + + .controlbtn:active { + color: $controls-click-color; + } + + background-color: transparent; + border: transparent; + } + } } diff --git a/style/queue.scss b/style/queue.scss new file mode 100644 index 0000000..21df7cf --- /dev/null +++ b/style/queue.scss @@ -0,0 +1,48 @@ +@import 'theme.scss'; + +.queue { + position: fixed; + top: 0; + right: 0; + width: 300px; + height: 55.3rem; + background-color: $queue-background-color; /* Queue background color */ + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + + .queue-header { + background-color: #333; /* Header background color */ + color: #fff; /* Header text color */ + padding: 10px; + text-align: center; + } + + ul { + list-style: none; + padding: 0; + margin: 0; + + .queue-song { + display: flex; + align-items: center; + padding: 10px; + border-bottom: 1px solid #ccc; /* Separator line color */ + + img { + max-width: 50px; /* Adjust maximum width for images */ + margin-right: 10px; /* Add spacing between image and text */ + } + + .queue-song-info { + h3 { + margin: 0; /* Remove default margin for heading */ + } + + p { + margin: 0; /* Remove default margin for paragraph */ + color: #888; /* Adjust text color for artist */ + } + } + } + } +} + \ No newline at end of file diff --git a/style/theme.scss b/style/theme.scss index 9ac5872..63ff157 100644 --- a/style/theme.scss +++ b/style/theme.scss @@ -6,3 +6,4 @@ $controls-click-color: #909090; $play-bar-background-color: #212121; $play-grad-start: #0a0533; $play-grad-end: $accent-color; +$queue-background-color: $play-bar-background-color; From fd49ee3a0ff1b7e31fcab85e0b1e6a472128f162 Mon Sep 17 00:00:00 2001 From: ecco257 <72117210+ecco257@users.noreply.github.com> Date: Fri, 2 Feb 2024 17:19:39 -0500 Subject: [PATCH 06/20] Update dependencies (icon for queue toggle button) --- Cargo.lock | 10 ++++++++++ Cargo.toml | 3 ++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/Cargo.lock b/Cargo.lock index 5f2a07e..75074ee 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -1141,6 +1141,7 @@ checksum = "f41f2deec9249d16ef6b1a8442fbe16013f67053797052aa0b7d2f5ebd0f0098" dependencies = [ "icondata_bs", "icondata_core", + "icondata_ri", ] [[package]] @@ -1158,6 +1159,15 @@ version = "0.0.2" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "1640a4c1d5ddd08ab1d9854ffa7a2fa3dc52339492676b6d3031e77ca579f434" +[[package]] +name = "icondata_ri" +version = "0.0.8" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "1b1d3adc5b64b22d10ab23a7b1a005f4cb52f3d08909f578fbaa09af9f9c0b7b" +dependencies = [ + "icondata_core", +] + [[package]] name = "ident_case" version = "1.0.1" diff --git a/Cargo.toml b/Cargo.toml index ea9ed07..a779ffb 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -22,7 +22,8 @@ leptos_icons = { version = "0.1.0", default_features = false, features = [ "BsPlayFill", "BsPauseFill", "BsSkipStartFill", - "BsSkipEndFill" + "BsSkipEndFill", + "RiPlayListMediaFill", ] } dotenv = { version = "0.15.0", optional = true } diesel = { version = "2.1.4", features = ["postgres", "r2d2"], optional = true } From 604e2c9c7fa91951b7f1de58a6e30d9778b21554 Mon Sep 17 00:00:00 2001 From: dannyzou18 Date: Tue, 6 Feb 2024 16:30:24 -0500 Subject: [PATCH 07/20] created simple song component for queue --- src/queue.rs | 21 ++++++++++++++------- style/queue.scss | 5 +++-- 2 files changed, 17 insertions(+), 9 deletions(-) diff --git a/src/queue.rs b/src/queue.rs index b194df4..2e69b55 100644 --- a/src/queue.rs +++ b/src/queue.rs @@ -2,6 +2,19 @@ use crate::playstatus::PlayStatus; use leptos::leptos_dom::*; use leptos::*; +#[component] +fn Song(song_image_path: String, song_title: String, song_artist: String) -> impl IntoView { + view!{ +
+ {song_title.clone()} +
+

{song_title}

+

{song_artist}

+
+
+ } +} + #[component] pub fn Queue(status: RwSignal) -> impl IntoView { @@ -17,13 +30,7 @@ pub fn Queue(status: RwSignal) -> impl IntoView { { status.with(|status| status.queue.iter() .map(|song| view! { -
- {song.name.clone()}/ -
-

{song.name.clone()}

-

{song.artist.clone()}

-
-
+ }) .collect::>()) } diff --git a/style/queue.scss b/style/queue.scss index 21df7cf..486a18d 100644 --- a/style/queue.scss +++ b/style/queue.scss @@ -5,8 +5,9 @@ top: 0; right: 0; width: 300px; - height: 55.3rem; - background-color: $queue-background-color; /* Queue background color */ + height: 45rem; + overflow: hidden; + background-color: white;/*$queue-background-color; Queue background color */ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); .queue-header { From b8d2fca0eece7b8efd99c02bd59eaca9d96c977f Mon Sep 17 00:00:00 2001 From: ecco257 <72117210+ecco257@users.noreply.github.com> Date: Tue, 6 Feb 2024 17:37:57 -0500 Subject: [PATCH 08/20] Make functions needed for queue public and add trash icon dependency --- Cargo.toml | 1 + src/playbar.rs | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/Cargo.toml b/Cargo.toml index a779ffb..0f90848 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -24,6 +24,7 @@ leptos_icons = { version = "0.1.0", default_features = false, features = [ "BsSkipStartFill", "BsSkipEndFill", "RiPlayListMediaFill", + "BsTrashFill", ] } dotenv = { version = "0.15.0", optional = true } diesel = { version = "2.1.4", features = ["postgres", "r2d2"], optional = true } diff --git a/src/playbar.rs b/src/playbar.rs index f0a85aa..7f72b04 100644 --- a/src/playbar.rs +++ b/src/playbar.rs @@ -36,7 +36,7 @@ const ARROW_KEY_SKIP_TIME: f64 = 5.0; /// * `None` if the audio element is not available /// * `Some((current_time, duration))` if the audio element is available /// -fn get_song_time_duration(status: impl SignalWithUntracked) -> Option<(f64, f64)> { +pub fn get_song_time_duration(status: impl SignalWithUntracked) -> Option<(f64, f64)> { status.with_untracked(|status| { if let Some(audio) = status.get_audio() { Some((audio.current_time(), audio.duration())) @@ -57,7 +57,7 @@ fn get_song_time_duration(status: impl SignalWithUntracked) /// * `status` - The `PlayStatus` to get the audio element from, as a signal /// * `time` - The time to skip to, in seconds /// -fn skip_to(status: impl SignalUpdate, time: f64) { +pub fn skip_to(status: impl SignalUpdate, time: f64) { if time.is_infinite() || time.is_nan() { error!("Unable to skip to non-finite time: {}", time); return @@ -81,7 +81,7 @@ fn skip_to(status: impl SignalUpdate, time: f64) { /// * `status` - The `PlayStatus` to get the audio element from, as a signal /// * `play` - `true` to play the song, `false` to pause it /// -fn set_playing(status: impl SignalUpdate, play: bool) { +pub fn set_playing(status: impl SignalUpdate, play: bool) { status.update(|status| { if let Some(audio) = status.get_audio() { if play { From 04898fe7f0ae869b8b2cf0d80b7ec422d3b36cc5 Mon Sep 17 00:00:00 2001 From: ecco257 <72117210+ecco257@users.noreply.github.com> Date: Tue, 6 Feb 2024 17:38:16 -0500 Subject: [PATCH 09/20] Add remove button for queue items --- src/queue.rs | 51 +++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 49 insertions(+), 2 deletions(-) diff --git a/src/queue.rs b/src/queue.rs index 2e69b55..1cf5f8d 100644 --- a/src/queue.rs +++ b/src/queue.rs @@ -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) { + + 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) { + // 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) -> 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!{ ) -> impl IntoView {
    { status.with(|status| status.queue.iter() - .map(|song| view! { - + .enumerate() + .map(|(index, song)| view! { +
    + + +
    }) .collect::>()) } From db2dc3c85af29490d8f135fa9bf0b6381176af6b Mon Sep 17 00:00:00 2001 From: ecco257 <72117210+ecco257@users.noreply.github.com> Date: Tue, 6 Feb 2024 17:38:33 -0500 Subject: [PATCH 10/20] Fix styling for queue with remove button --- style/queue.scss | 51 ++++++++++++++++++++++++++++++------------------ 1 file changed, 32 insertions(+), 19 deletions(-) diff --git a/style/queue.scss b/style/queue.scss index 486a18d..3dca7fc 100644 --- a/style/queue.scss +++ b/style/queue.scss @@ -22,27 +22,40 @@ padding: 0; margin: 0; - .queue-song { - display: flex; - align-items: center; - padding: 10px; - border-bottom: 1px solid #ccc; /* Separator line color */ - - img { - max-width: 50px; /* Adjust maximum width for images */ - margin-right: 10px; /* Add spacing between image and text */ - } - - .queue-song-info { - h3 { - margin: 0; /* Remove default margin for heading */ + .queue-item { + display: flex; + align-items: center; + padding: 10px; + + .queue-song { + display: flex; + align-items: center; + padding: 10px; + border-bottom: 1px solid #ccc; /* Separator line color */ + + img { + max-width: 50px; /* Adjust maximum width for images */ + margin-right: 10px; /* Add spacing between image and text */ + } + + .queue-song-info { + h3 { + margin: 0; /* Remove default margin for heading */ + } + + p { + margin: 0; /* Remove default margin for paragraph */ + color: #888; /* Adjust text color for artist */ + } + } } - - p { - margin: 0; /* Remove default margin for paragraph */ - color: #888; /* Adjust text color for artist */ + + button { + background: none; + border: none; + cursor: pointer; + margin-left: auto; } - } } } } From fbc57fd90e69bfd44036013aa1634e7b9defea40 Mon Sep 17 00:00:00 2001 From: ecco257 <72117210+ecco257@users.noreply.github.com> Date: Fri, 16 Feb 2024 17:34:45 -0500 Subject: [PATCH 11/20] Modify queue to only allow delete of upcoming songs --- src/queue.rs | 32 +++++++++++--------------------- 1 file changed, 11 insertions(+), 21 deletions(-) diff --git a/src/queue.rs b/src/queue.rs index 1cf5f8d..2027169 100644 --- a/src/queue.rs +++ b/src/queue.rs @@ -1,7 +1,4 @@ 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::*; @@ -10,24 +7,11 @@ use leptos_icons::BsIcon::*; const RM_BTN_SIZE: &str = "2rem"; -fn skip_to_next(status: RwSignal) { - - 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) { - // 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); + log!("Error: Trying to remove currently playing song (index 0) from queue"); } 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"); + 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); }); @@ -74,9 +58,15 @@ pub fn Queue(status: RwSignal) -> impl IntoView { .map(|(index, song)| view! {
    - + Playing

    + }> + +
    }) .collect::>()) From 24ed2afae6cb71e8734388de9e6cb40550155228 Mon Sep 17 00:00:00 2001 From: ecco257 <72117210+ecco257@users.noreply.github.com> Date: Fri, 16 Feb 2024 17:37:22 -0500 Subject: [PATCH 12/20] Fix formatting of playing vs. delete status of queue items --- style/queue.scss | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/style/queue.scss b/style/queue.scss index 3dca7fc..9e793d9 100644 --- a/style/queue.scss +++ b/style/queue.scss @@ -40,21 +40,30 @@ .queue-song-info { h3 { - margin: 0; /* Remove default margin for heading */ + margin: 0; /* Remove default margin for heading */ + color: #333; /* Adjust text color for song */ } p { - margin: 0; /* Remove default margin for paragraph */ - color: #888; /* Adjust text color for artist */ + margin: 0; /* Remove default margin for paragraph */ + color: #888; /* Adjust text color for artist */ } } } button { background: none; - border: none; - cursor: pointer; - margin-left: auto; + border: none; + cursor: pointer; + margin-left: auto; + } + + p { + color: #333; + font-weight: bold; + margin-left: auto; + background: none; + border: none; } } } From a0d465abc43e520cdaeb0ed0b6e864739df85f6a Mon Sep 17 00:00:00 2001 From: ecco257 <72117210+ecco257@users.noreply.github.com> Date: Fri, 16 Feb 2024 17:37:57 -0500 Subject: [PATCH 13/20] Allow scrolling of queue and fix height to just touch playbar --- style/queue.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/style/queue.scss b/style/queue.scss index 9e793d9..9eea3b3 100644 --- a/style/queue.scss +++ b/style/queue.scss @@ -4,11 +4,11 @@ position: fixed; top: 0; right: 0; - width: 300px; - height: 45rem; - overflow: hidden; + width: 400px; + height: calc(100% - 78.9px); /* Adjust height to fit the queue */ background-color: white;/*$queue-background-color; Queue background color */ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + overflow-y: auto; /* Add scroll bar when queue is too long */ .queue-header { background-color: #333; /* Header background color */ From e0552269fb0eeda8077a2b90e5ac8be89f40693d Mon Sep 17 00:00:00 2001 From: Ethan Girouard Date: Sun, 4 Feb 2024 16:09:03 -0500 Subject: [PATCH 14/20] Don't update status on every time_update --- src/playbar.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/playbar.rs b/src/playbar.rs index 7f72b04..f1bdb4d 100644 --- a/src/playbar.rs +++ b/src/playbar.rs @@ -432,7 +432,7 @@ pub fn PlayBar(status: RwSignal) -> impl IntoView { }; let on_time_update = move |_| { - status.update(|status| { + status.with_untracked(|status| { if let Some(audio) = status.get_audio() { set_elapsed_secs(audio.current_time() as i64); set_total_secs(audio.duration() as i64); From e6a68f4f4080825732215da4fbe471e1741919ac Mon Sep 17 00:00:00 2001 From: ecco257 <72117210+ecco257@users.noreply.github.com> Date: Fri, 23 Feb 2024 19:21:45 -0500 Subject: [PATCH 15/20] Add trash outline icon for updated queue coloring --- Cargo.lock | 10 ++++++++++ Cargo.toml | 2 +- src/queue.rs | 6 +++--- 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index 75074ee..59737e0 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -1140,6 +1140,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "f41f2deec9249d16ef6b1a8442fbe16013f67053797052aa0b7d2f5ebd0f0098" dependencies = [ "icondata_bs", + "icondata_cg", "icondata_core", "icondata_ri", ] @@ -1153,6 +1154,15 @@ dependencies = [ "icondata_core", ] +[[package]] +name = "icondata_cg" +version = "0.0.8" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "b90cda35aa524761219a8dbd006513734e08a4cf92ee05820b01749e76435462" +dependencies = [ + "icondata_core", +] + [[package]] name = "icondata_core" version = "0.0.2" diff --git a/Cargo.toml b/Cargo.toml index 0f90848..5115825 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -24,7 +24,7 @@ leptos_icons = { version = "0.1.0", default_features = false, features = [ "BsSkipStartFill", "BsSkipEndFill", "RiPlayListMediaFill", - "BsTrashFill", + "CgTrash", ] } dotenv = { version = "0.15.0", optional = true } diesel = { version = "2.1.4", features = ["postgres", "r2d2"], optional = true } diff --git a/src/queue.rs b/src/queue.rs index 2027169..f24a652 100644 --- a/src/queue.rs +++ b/src/queue.rs @@ -3,9 +3,9 @@ use leptos::ev::MouseEvent; use leptos::leptos_dom::*; use leptos::*; use leptos_icons::*; -use leptos_icons::BsIcon::*; +use leptos_icons::CgIcon::*; -const RM_BTN_SIZE: &str = "2rem"; +const RM_BTN_SIZE: &str = "2.5rem"; fn remove_song_fn(index: usize, status: RwSignal) { if index == 0 { @@ -64,7 +64,7 @@ pub fn Queue(status: RwSignal) -> impl IntoView {

    Playing

    }> From 2a0dacff3e2bdb55a119e6c3b1ed9fb40d6a09ce Mon Sep 17 00:00:00 2001 From: ecco257 <72117210+ecco257@users.noreply.github.com> Date: Fri, 23 Feb 2024 19:22:19 -0500 Subject: [PATCH 16/20] Update styling and layout/coloring of the queue items --- style/queue.scss | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/style/queue.scss b/style/queue.scss index 9eea3b3..aa5e637 100644 --- a/style/queue.scss +++ b/style/queue.scss @@ -6,7 +6,7 @@ right: 0; width: 400px; height: calc(100% - 78.9px); /* Adjust height to fit the queue */ - background-color: white;/*$queue-background-color; Queue background color */ + background-color: #424242; /* Queue background color */ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); overflow-y: auto; /* Add scroll bar when queue is too long */ @@ -25,7 +25,10 @@ .queue-item { display: flex; align-items: center; - padding: 10px; + padding-left: 10px; + padding-right: 10px; + padding-top: 5px; + padding-bottom: 5px; .queue-song { display: flex; @@ -36,17 +39,18 @@ img { max-width: 50px; /* Adjust maximum width for images */ margin-right: 10px; /* Add spacing between image and text */ + border-radius: 5px; /* Add border radius to image */ } .queue-song-info { h3 { margin: 0; /* Remove default margin for heading */ - color: #333; /* Adjust text color for song */ + color: #fff; /* Adjust text color for song */ } p { margin: 0; /* Remove default margin for paragraph */ - color: #888; /* Adjust text color for artist */ + color: #aaa; /* Adjust text color for artist */ } } } @@ -54,12 +58,13 @@ button { background: none; border: none; + color: #fff; cursor: pointer; margin-left: auto; } p { - color: #333; + color: #fff; font-weight: bold; margin-left: auto; background: none; From d2986797bb71b5da580edcf02525d84b69bc6720 Mon Sep 17 00:00:00 2001 From: ecco257 Date: Wed, 28 Feb 2024 00:54:35 -0500 Subject: [PATCH 17/20] Implement dragging to reorder queue --- src/queue.rs | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 56 insertions(+), 2 deletions(-) diff --git a/src/queue.rs b/src/queue.rs index f24a652..4300197 100644 --- a/src/queue.rs +++ b/src/queue.rs @@ -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) -> 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!{ ) -> impl IntoView {
      { - status.with(|status| status.queue.iter() + move || status.with(|status| status.queue.iter() .enumerate() .map(|(index, song)| view! { -
      +
      Date: Wed, 28 Feb 2024 01:01:46 -0500 Subject: [PATCH 18/20] Add queue and playbar to homepage --- src/app.rs | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/app.rs b/src/app.rs index ae1aa39..2a1d320 100644 --- a/src/app.rs +++ b/src/app.rs @@ -1,3 +1,6 @@ +use crate::playbar::PlayBar; +use crate::playstatus::PlayStatus; +use crate::queue::Queue; use leptos::*; use leptos_meta::*; use leptos_router::*; @@ -30,7 +33,13 @@ pub fn App() -> impl IntoView { /// Renders the home page of your application. #[component] fn HomePage() -> impl IntoView { - view! {} + let mut play_status = PlayStatus::default(); + let play_status = create_rw_signal(play_status); + + view! { + + + } } /// 404 - Not Found From bf47efbff74d7a18e7d31677c658dc83207e8c8e Mon Sep 17 00:00:00 2001 From: ecco257 <72117210+ecco257@users.noreply.github.com> Date: Fri, 1 Mar 2024 00:51:41 -0500 Subject: [PATCH 19/20] Stop reactively tracking status in toggle queue --- src/playbar.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/playbar.rs b/src/playbar.rs index f1bdb4d..fcab9a7 100644 --- a/src/playbar.rs +++ b/src/playbar.rs @@ -326,7 +326,7 @@ 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)); + log!("queue button pressed, queue status: {:?}", status.with_untracked(|status| status.queue_open)); }; // We use this to prevent the buttons from being focused when clicked From 147e3c16c8f1ab484fcbb9617bfd829c8aad15de Mon Sep 17 00:00:00 2001 From: ecco257 <72117210+ecco257@users.noreply.github.com> Date: Fri, 1 Mar 2024 00:59:37 -0500 Subject: [PATCH 20/20] Separate Song component to own file instead of with queue --- src/lib.rs | 1 + src/queue.rs | 14 +------------- src/song.rs | 14 ++++++++++++++ 3 files changed, 16 insertions(+), 13 deletions(-) create mode 100644 src/song.rs diff --git a/src/lib.rs b/src/lib.rs index c00b6dc..2670b01 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -4,6 +4,7 @@ pub mod playstatus; pub mod playbar; pub mod database; pub mod queue; +pub mod song; use cfg_if::cfg_if; cfg_if! { diff --git a/src/queue.rs b/src/queue.rs index 4300197..fc786b9 100644 --- a/src/queue.rs +++ b/src/queue.rs @@ -1,4 +1,5 @@ use crate::playstatus::PlayStatus; +use crate::song::Song; use leptos::ev::MouseEvent; use leptos::leptos_dom::*; use leptos::*; @@ -19,19 +20,6 @@ fn remove_song_fn(index: usize, status: RwSignal) { } } -#[component] -fn Song(song_image_path: String, song_title: String, song_artist: String) -> impl IntoView { - view!{ -
      - {song_title.clone()} -
      -

      {song_title}

      -

      {song_artist}

      -
      -
      - } -} - #[component] pub fn Queue(status: RwSignal) -> impl IntoView { diff --git a/src/song.rs b/src/song.rs new file mode 100644 index 0000000..615cfc6 --- /dev/null +++ b/src/song.rs @@ -0,0 +1,14 @@ +use leptos::*; + +#[component] +pub fn Song(song_image_path: String, song_title: String, song_artist: String) -> impl IntoView { + view!{ +
      + {song_title.clone()} +
      +

      {song_title}

      +

      {song_artist}

      +
      +
      + } +} \ No newline at end of file