Layout Change: Queue View Widget

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 SKIP_BY: Selector = Selector::new("app.skip-by");
+pub const REMOVE_FROM_QUEUE: Selector<usize> = Selector::new("app.remove-from-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));
@@ -436,6 +440,17 @@ where
                 }
                 ctx.set_handled();
             }
+            Event::Command(cmd) if cmd.is(cmd::SKIP_BY) => {
+                let no = cmd.get_unchecked(cmd::SKIP_BY);
+
+                ctx.set_handled();
+            }
+            Event::Command(cmd) if cmd.is(cmd::REMOVE_FROM_QUEUE) => {
+                let item = cmd.get_unchecked(cmd::REMOVE_FROM_QUEUE);
+                // We must also remove from the other queue
+                data.added_queue.remove(item.clone());
+                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,14 @@ 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))
+        .fix_width(185.0);
 
     let topbar = Flex::row()
         .must_fill_main_axis(true)
@@ -150,18 +150,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_child(sidebar)
+        .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,7 +280,8 @@ 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)))
-        .expand_width()
+        // Not perfect, but its the only way I have found to not clip over the border
+        .fix_width(183.0)
         .link()
         .env_scope({
             let link_nav = link_nav.clone();

psst-gui/src/ui/queued.rs

@@ -0,0 +1,98 @@
+use crate::{
+    cmd,
+    data::{AppState, QueueEntry},
+    ui::Vector,
+    widget::{icons, Border, Empty, MyWidgetExt},
+};
+
+use druid::{
+    widget::{CrossAxisAlignment, Flex, Label, List, Scroll, ViewSwitcher},
+    Env, Widget, WidgetExt,
+};
+use druid_shell::Cursor;
+
+use super::theme;
+pub fn queue_widget() -> impl Widget<AppState> {
+    ViewSwitcher::new(
+        |data: &AppState, _env: &Env| data.config.window_size.width >= 700.0,
+        move |&show_widget, _data, _env| {
+            if show_widget {
+                Flex::column()
+                    .with_child(queue_header_widget())
+                    .with_flex_child(
+                        Scroll::new(queue_list_widget())
+                            .vertical()
+                            // The appstate added_queue automatically updates when its changed
+                            // To do the handling of the queue we could just make methods directly handling this
+                            // (how will we handle it after the song has been played? will it remain or disappear?)
+                            .lens(AppState::added_queue)
+                            .expand(),
+                        1.0,
+                    )
+                    .fix_width(185.0)
+                    .background(Border::Left.with_color(theme::GREY_500))
+                    .boxed()
+            } else {
+                Empty.boxed()
+            }
+        },
+    )
+}
+
+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_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),
+                    ),
+                /*.on_left_click(|ctx, _, row, _| {
+                    // We need to make a function which takes the song index when clicked on then we need to skip by that amount.
+                    ctx.submit_notification(TODO)
+                })*/
+                //.context_menu(queue_menu_widget(|item: &Vec<QueueEntry>, _env: &Env| item.len()),
+                1.0,
+            )
+            .with_flex_spacer(3.0)
+            .with_child(
+                icons::CLOSE_CIRCLE
+                    .scale((16.0, 16.0))
+                    .link()
+                    .rounded(100.0)
+                    .on_click(move |ctx, _, _| {
+                        ctx.submit_command(
+                            cmd::REMOVE_FROM_QUEUE.with(0 /* Add song index here */),
+                        );
+                    })
+                    .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);
         })
     }