Layout Change: Queue View Widget

psst-core/src/player/mod.rs

@@ -119,7 +119,9 @@ impl Player {
             PlayerCommand::Seek { position } => self.seek(position),
             PlayerCommand::Configure { config } => self.configure(config),
             PlayerCommand::SetQueueBehavior { behavior } => self.queue.set_behaviour(behavior),
+            PlayerCommand::SkipToPlaceInQueue { item } => self.queue.skip_to_place_in_queue(item),
             PlayerCommand::AddToQueue { item } => self.queue.add(item),
+            PlayerCommand::RemoveFromQueue { item } => self.queue.remove(item),
             PlayerCommand::SetVolume { volume } => self.set_volume(volume),
         }
     }
@@ -423,9 +425,15 @@ pub enum PlayerCommand {
     SetQueueBehavior {
         behavior: QueueBehavior,
     },
+    SkipToPlaceInQueue {
+        item: usize,
+    },
     AddToQueue {
         item: PlaybackItem,
     },
+    RemoveFromQueue {
+        item: usize,
+    },
     /// Change playback volume to a value in 0.0..=1.0 range.
     SetVolume {
         volume: f64,

psst-core/src/player/queue.rs

@@ -49,11 +49,19 @@ impl Queue {
         self.position = position;
         self.compute_positions();
     }
+
+    pub fn skip_to_place_in_queue(&mut self, index: usize) {
+        self.user_items_position = self.user_items_position + (index - self.user_items_position);
+    }
 
     pub fn add(&mut self, item: PlaybackItem) {
         self.user_items.push(item);
     }
 
+    pub fn remove(&mut self, index: usize) {
+        self.user_items.remove(index);
+    }
+
     fn handle_added_queue(&mut self) {
         if self.user_items.len() > self.user_items_position {
             self.items.insert(

psst-gui/src/cmd.rs

@@ -54,6 +54,11 @@ pub const ADD_TO_QUEUE: Selector<(QueueEntry, PlaybackItem)> = Selector::new("ap
 pub const PLAY_QUEUE_BEHAVIOR: Selector<QueueBehavior> = Selector::new("app.play-queue-behavior");
 pub const PLAY_SEEK: Selector<f64> = Selector::new("app.play-seek");
 
+// Queue control
+// Todo Skip by
+pub const REMOVE_FROM_QUEUE: Selector<QueueEntry> = Selector::new("app.remove-from-queue");
+pub const SKIP_TO_PLACE_IN_QUEUE: Selector<QueueEntry> = Selector::new("app.skip-to-place-in-queue");
+
 // Sorting control
 pub const SORT_BY_DATE_ADDED: Selector = Selector::new("app.sort-by-date-added");
 pub const SORT_BY_TITLE: Selector = Selector::new("app.sort-by-title");

psst-gui/src/controller/playback.rs

@@ -10,7 +10,7 @@ use druid::{
     Code, ExtEventSink, InternalLifeCycle, KbKey, WindowHandle,
 };
 use psst_core::{
-    audio::{normalize::NormalizationLevel, output::DefaultAudioOutput},
+    audio::{normalize::{self, NormalizationLevel}, output::DefaultAudioOutput},
     cache::Cache,
     cdn::Cdn,
     player::{item::PlaybackItem, PlaybackConfig, Player, PlayerCommand, PlayerEvent},
@@ -265,6 +265,10 @@ impl PlaybackController {
     fn next(&mut self) {
         self.send(PlayerEvent::Command(PlayerCommand::Next));
     }
+    // Implemet properly, this will only skip by one, we need to use the inc val
+    fn skip_by(&mut self, inc: i32) {
+        self.send(PlayerEvent::Command(PlayerCommand::Next));
+    }
 
     fn stop(&mut self) {
         self.send(PlayerEvent::Command(PlayerCommand::Stop));
@@ -299,6 +303,16 @@ impl PlaybackController {
             item: *item,
         }));
     }
+    fn skip_to_place_in_queue(&mut self, item: &usize) {
+        self.send(PlayerEvent::Command(PlayerCommand::SkipToPlaceInQueue {
+            item: *item,
+        }));
+    }
+    fn remove_from_queue(&mut self, item: &usize) {
+        self.send(PlayerEvent::Command(PlayerCommand::RemoveFromQueue {
+            item: *item,
+        }));
+    }
 
     fn set_queue_behavior(&mut self, behavior: QueueBehavior) {
         self.send(PlayerEvent::Command(PlayerCommand::SetQueueBehavior {
@@ -436,6 +450,36 @@ where
                 }
                 ctx.set_handled();
             }
+            Event::Command(cmd) if cmd.is(cmd::SKIP_TO_PLACE_IN_QUEUE) => {
+                let item = cmd.get_unchecked(cmd::SKIP_TO_PLACE_IN_QUEUE);
+
+                // We need a way so it starts playing even if theres no playlist being played from!
+                // We also need a block to stop it from erroring if they click one back.
+                for i in 0..data.added_queue.len() {
+                    if data.added_queue[i].item.id() == item.item.id() {
+                        self.skip_to_place_in_queue(&i);
+                        break;
+                    }
+                }
+
+                self.next();
+                ctx.set_handled();
+            }
+            Event::Command(cmd) if cmd.is(cmd::REMOVE_FROM_QUEUE) => {
+                let item = cmd.get_unchecked(cmd::REMOVE_FROM_QUEUE);
+
+                // This is the best i could figure out, But this currently just removes the first item that matches the id
+                // I think its the same issue as with the removal of a song from a playlist
+                // TODO: Change this to retain
+                for i in 0..data.added_queue.len() {
+                    if data.added_queue[i].item.id() == item.item.id() {
+                        data.added_queue.remove(i);
+                        self.remove_from_queue(&i);
+                        break;
+                    }
+                }
+                ctx.set_handled();
+            }
             // Keyboard shortcuts.
             Event::KeyDown(key) if key.code == Code::Space => {
                 self.pause_or_resume();

psst-gui/src/data/playback.rs

@@ -54,6 +54,13 @@ impl Playable {
         }
     }
 
+    pub fn artist(&self) -> Arc<String> {
+        match self {
+            Playable::Track(track) => Arc::new(track.artist_names()),
+            Playable::Episode(episode) => Arc::new(episode.show.name.to_string()),
+        }
+    }
+
     pub fn duration(&self) -> Duration {
         match self {
             Playable::Track(track) => track.duration,

psst-gui/src/ui/mod.rs

@@ -1,9 +1,7 @@
 use std::time::Duration;
 
 use druid::{
-    im::Vector,
-    widget::{CrossAxisAlignment, Either, Flex, Label, List, Scroll, Slider, Split, ViewSwitcher},
-    Color, Env, Insets, Key, LensExt, Menu, MenuItem, Selector, Widget, WidgetExt, WindowDesc,
+    im::Vector, widget::{CrossAxisAlignment, Either, Flex, Label, List, Scroll, Slider, ViewSwitcher}, Color, Env, Insets, Key, LensExt, Menu, MenuItem, Selector, Widget, WidgetExt, WindowDesc
 };
 use druid_shell::Cursor;
 
@@ -37,6 +35,7 @@ pub mod theme;
 pub mod track;
 pub mod user;
 pub mod utils;
+pub mod queued;
 
 pub fn main_window(config: &Config) -> WindowDesc<AppState> {
     let win = WindowDesc::new(root_widget())
@@ -129,13 +128,13 @@ fn root_widget() -> impl Widget<AppState> {
         .with_default_spacer()
         .with_child(user::user_widget())
         .center()
-        .fix_height(100.0)
+        .fix_height(88.0)
         .background(Border::Top.with_color(theme::GREY_500));
 
     let sidebar = Flex::column()
         .with_flex_child(playlists, 1.0)
         .with_child(controls)
-        .background(theme::BACKGROUND_DARK);
+        .background(Border::Right.with_color(theme::GREY_500));
 
     let topbar = Flex::row()
         .must_fill_main_axis(true)
@@ -150,18 +149,18 @@ fn root_widget() -> impl Widget<AppState> {
         .with_flex_child(Overlay::bottom(route_widget(), alert_widget()), 1.0)
         .with_child(playback::panel_widget())
         .background(theme::BACKGROUND_LIGHT);
-
-    let split = Split::columns(sidebar, main)
-        .split_point(0.2)
-        .bar_size(1.0)
-        .min_size(150.0, 300.0)
-        .min_bar_area(1.0)
-        .solid_bar(true);
+
+    let split = Flex::row()
+        .with_flex_child(sidebar, 0.3)
+        .with_flex_child(main, 1.0)
+        .with_child(queued::queue_widget())
+        .background(theme::BACKGROUND_DARK);
 
     ThemeScope::new(split)
         .controller(SessionController)
         .controller(NavController)
         .controller(SortController)
+
     // .debug_invalidation()
     // .debug_widget_id()
     // .debug_paint_layout()
@@ -280,6 +279,7 @@ fn sidebar_menu_widget() -> impl Widget<AppState> {
 fn sidebar_link_widget(title: &str, link_nav: Nav) -> impl Widget<AppState> {
     Label::new(title)
         .padding((theme::grid(2.0), theme::grid(1.0)))
+        // Not perfect, we need to find a way to stop it from clipping the side
         .expand_width()
         .link()
         .env_scope({

psst-gui/src/ui/queued.rs

@@ -0,0 +1,93 @@
+use crate::{
+    cmd,
+    data::{AppState, QueueEntry},
+    ui::Vector,
+    widget::{icons, Border, Empty, MyWidgetExt},
+};
+
+use druid::{
+    widget::{CrossAxisAlignment, Either, Flex, Label, LineBreaking, List, Scroll}, Env, Widget, WidgetExt
+};
+use druid_shell::Cursor;
+
+use super::theme;
+
+pub fn queue_widget() -> impl Widget<AppState> {
+    Either::new(
+        |data: &AppState, _env: &Env| data.config.window_size.width >= 700.0,
+            Flex::column()
+                .with_child(queue_header_widget())
+                .with_flex_child(
+                    Scroll::new(queue_list_widget())
+                        .vertical()
+                        // (how will we handle it after the song has been played? will it remain or disappear?)
+                        .lens(AppState::added_queue),
+                    1.0,
+                )
+                .fix_width(185.0)
+                .background(Border::Left.with_color(theme::GREY_500)),
+            Empty
+    )
+}
+
+fn queue_header_widget() -> impl Widget<AppState> {
+    Flex::row()
+        .with_flex_child(
+            Label::new("Queue")
+                .with_font(theme::UI_FONT_MEDIUM)
+                .with_text_size(theme::TEXT_SIZE_LARGE)
+                .center(),
+            1.0,
+        )
+        .fix_height(32.0)
+        .padding(theme::grid(1.0))
+        .expand_width()
+        .background(Border::Bottom.with_color(theme::GREY_500))
+}
+
+fn queue_list_widget() -> impl Widget<Vector<QueueEntry>> {
+    List::new(|| {
+        Flex::row()
+            .with_flex_child(
+                Flex::column()
+                    .cross_axis_alignment(CrossAxisAlignment::Start)
+                    .with_child(
+                        Label::new(|item: &QueueEntry, _env: &Env| item.item.name().to_string())
+                            .with_font(theme::UI_FONT_MEDIUM)
+                            .with_line_break_mode(LineBreaking::Clip)
+                            .expand_width(),
+                    )
+                    .with_spacer(2.0)
+                    .with_child(
+                        Label::new(|item: &QueueEntry, _env: &Env| item.item.artist().to_string())
+                            .with_text_size(theme::TEXT_SIZE_SMALL)
+                            .with_text_color(theme::PLACEHOLDER_COLOR)
+                            .with_line_break_mode(LineBreaking::Clip)
+                            .expand_width(),
+                    )
+                .on_click(|ctx, data: &mut QueueEntry, _| {
+                    ctx.submit_command(
+                        cmd::SKIP_TO_PLACE_IN_QUEUE.with(data.clone())
+                    );
+                }), 
+                1.0,
+            )
+            .with_default_spacer()
+            .with_child(
+                icons::CLOSE_CIRCLE
+                    .scale((16.0, 16.0))
+                    .link()
+                    .rounded(100.0)
+                    .on_click(|ctx, data: &mut QueueEntry, _| {
+                        ctx.submit_command(
+                            cmd::REMOVE_FROM_QUEUE.with(data.clone())
+                        );
+                    })
+                    .with_cursor(Cursor::Pointer),
+            )
+            .padding(theme::grid(1.0))
+            .link()
+            .rounded(theme::BUTTON_BORDER_RADIUS)
+    })
+    .padding(theme::grid(1.0))
+}

psst-gui/src/widget/icons.rs

@@ -155,6 +155,12 @@ pub static HEART_OUTLINE: SvgIcon = SvgIcon {
     svg_size: Size::new(24.0, 24.0),
     op: PaintOp::Fill,
 };
+// Font Awesome - Close-circle
+pub static CLOSE_CIRCLE: SvgIcon = SvgIcon {
+    svg_path: "M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z",
+    svg_size: Size::new(24.0, 24.0),
+    op: PaintOp::Fill,
+};
 
 #[derive(Copy, Clone)]
 pub enum PaintOp {

psst-gui/src/widget/utils.rs

@@ -170,6 +170,10 @@ impl<T: Data, S: Shape, W: Widget<T>> Widget<T> for Clip<S, W> {
 pub enum Border {
     Top,
     Bottom,
+    // Todo implement this so then we can have borders on the sides.
+    // This is needed as the split widget had the border.
+    Left,
+    Right,
 }
 
 impl Border {
@@ -181,11 +185,31 @@ impl Border {
 
         Painter::new(move |ctx, _, env| {
             let h = 1.0;
-            let y = match self {
+            let w1 = match self {
+                Self::Top => 0.0,
+                Self::Bottom => 0.0,
+                Self::Left => h / 2.0,
+                Self::Right => ctx.size().width - h / 2.0,
+            };
+            let w2 = match self {
+                Self::Top => ctx.size().width,
+                Self::Bottom => ctx.size().width,
+                Self::Left => h / 2.0,
+                Self::Right => ctx.size().width - h / 2.0,
+            };
+            let y1 = match self {
+                Self::Top => h / 2.0,
+                Self::Bottom => ctx.size().height - h / 2.0,
+                Self::Left => ctx.size().height - h / 2.0,
+                Self::Right => ctx.size().height - h / 2.0,
+            };
+            let y2 = match self {
                 Self::Top => h / 2.0,
                 Self::Bottom => ctx.size().height - h / 2.0,
+                Self::Left => h / 2.0,
+                Self::Right => h / 2.0,
             };
-            let line = Line::new((0.0, y), (ctx.size().width, y));
+            let line = Line::new((w1, y1), (w2, y2));
             ctx.stroke(line, &color.resolve(env), h);
         })
     }