Add previous, play/pause, and next buttons

scripts/sao-ui/src/music_player.rs

@@ -1,9 +1,10 @@
 use api::*;
 use canary_script::*;
 
-use canary_music_player::{AlbumInfo, TrackInfo};
+use canary_music_player::{AlbumInfo, PlaybackStatus, TrackInfo};
 
 use crate::widgets::prelude::*;
+use button::{RoundButton, RoundButtonStyle};
 use dialog::{DialogBodyStyle, DialogFooterStyle};
 use shell::Offset;
 use text::{HorizontalAlignment, Label, LabelText};
@@ -77,6 +78,7 @@ impl PanelImpl for MusicPlayerPanel {
             (None, Connected) => self.widget = Some(MusicPlayerWidget::new()),
             (Some(widget), AlbumChanged(info)) => widget.update_album(info),
             (Some(widget), TrackChanged(info)) => widget.update_track(info),
+            (Some(widget), PlaybackStatusChanged(status)) => widget.update_playback_status(status),
             _ => {}
         }
     }
@@ -87,6 +89,7 @@ pub struct MusicPlayerStyle {
     pub footer: DialogFooterStyle,
     pub rounding: f32,
     pub art_margin: f32,
+    pub button_spacing: f32,
 }
 
 impl Default for MusicPlayerStyle {
@@ -96,6 +99,7 @@ impl Default for MusicPlayerStyle {
             footer: Default::default(),
             rounding: 5.0,
             art_margin: 5.0,
+            button_spacing: 20.0,
         }
     }
 }
@@ -104,6 +108,9 @@ pub struct MusicPlayerWidget {
     artist: Offset<Label>,
     album: Offset<Label>,
     track: Offset<Label>,
+    previous: Offset<RoundButton>,
+    play: Offset<RoundButton>,
+    next: Offset<RoundButton>,
     style: MusicPlayerStyle,
     art_rect: Rect,
     body_rect: Rect,
@@ -115,6 +122,9 @@ impl Container for MusicPlayerWidget {
         f(&mut self.artist);
         f(&mut self.album);
         f(&mut self.track);
+        f(&mut self.previous);
+        f(&mut self.play);
+        f(&mut self.next);
     }
 
     fn draw(&mut self, ctx: &DrawContext) {
@@ -150,11 +160,55 @@ impl MusicPlayerWidget {
             Offset::new(label, Vec2::ZERO)
         };
 
+        let icon_font = Font::new(crate::ICON_FONT);
+
+        let prev_text = LabelText {
+            font: icon_font,
+            text: "玲".to_string(),
+        };
+
+        let play_text = LabelText {
+            font: icon_font,
+            text: "契".to_string(),
+        };
+
+        let next_text = LabelText {
+            font: icon_font,
+            text: "怜".to_string(),
+        };
+
+        let style = MusicPlayerStyle::default();
+
+        let primary_button = RoundButtonStyle {
+            radius: style.footer.height * 0.3,
+            spacing: style.footer.height * 0.1,
+            thickness: style.footer.height * 0.025,
+            body_color: Color(0xf1b841ff),
+            ring_color: Color(0xf1b841ff),
+            icon_color: Color::BLACK,
+        };
+
+        let secondary_button = RoundButtonStyle {
+            radius: style.footer.height * 0.25,
+            spacing: style.footer.height * 0.05,
+            thickness: style.footer.height * 0.025,
+            body_color: Color::WHITE,
+            ring_color: Color::BLACK,
+            icon_color: Color::BLACK,
+        };
+
+        let prev = RoundButton::new(secondary_button.clone(), Some(prev_text));
+        let play = RoundButton::new(primary_button, Some(play_text));
+        let next = RoundButton::new(secondary_button, Some(next_text));
+
         Self {
             artist: make_label("Artist"),
             album: make_label("Album"),
             track: make_label("Track"),
-            style: Default::default(),
+            previous: Offset::new(prev, Vec2::ZERO),
+            play: Offset::new(play, Vec2::ZERO),
+            next: Offset::new(next, Vec2::ZERO),
+            style,
             art_rect: Rect::from_xy_size(Vec2::ZERO, Vec2::ZERO),
             body_rect: Rect::from_xy_size(Vec2::ZERO, Vec2::ZERO),
             footer_rect: Rect::from_xy_size(Vec2::ZERO, Vec2::ZERO),
@@ -177,12 +231,21 @@ impl MusicPlayerWidget {
         let album_baseline = body_height * 0.55;
         let track_baseline = body_height * 0.85;
 
+        let button_y = body_height + style.footer.height / 2.0;
+        let previous_x = style.button_spacing * 0.5;
+        let play_x = style.button_spacing * 1.5;
+        let next_x = style.button_spacing * 2.5;
+
         self.artist.set_offset(Vec2::new(label_x, artist_baseline));
         self.album.set_offset(Vec2::new(label_x, album_baseline));
         self.track.set_offset(Vec2::new(label_x, track_baseline));
 
         self.body_rect = Rect::from_xy_size(Vec2::ZERO, body_size);
         self.footer_rect = Rect::from_xy_size(self.body_rect.bl(), footer_size);
+
+        self.previous.set_offset(Vec2::new(previous_x, button_y));
+        self.play.set_offset(Vec2::new(play_x, button_y));
+        self.next.set_offset(Vec2::new(next_x, button_y));
     }
 
     pub fn update_album(&mut self, info: AlbumInfo) {
@@ -209,4 +272,14 @@ impl MusicPlayerWidget {
                 .unwrap_or("<album here>"),
         );
     }
+
+    pub fn update_playback_status(&mut self, status: PlaybackStatus) {
+        let icon = match status {
+            PlaybackStatus::Playing => "契",
+            PlaybackStatus::Paused => "",
+            PlaybackStatus::Stopped => "栗",
+        };
+
+        self.play.set_text(icon);
+    }
 }