From 1e43b0a2c4737986a8fd807c61ee7f8bbad67d21 Mon Sep 17 00:00:00 2001
From: mars <mars@tebibyte.media>
Date: Sun, 6 Nov 2022 18:27:43 -0700
Subject: [PATCH 1/7] WIP SAO UI music player

---
 scripts/sao-ui/Cargo.toml          |   1 +
 scripts/sao-ui/src/lib.rs          |   4 +-
 scripts/sao-ui/src/music_player.rs | 212 +++++++++++++++++++++++++++++
 scripts/sao-ui/src/widgets/text.rs |  20 +++
 4 files changed, 236 insertions(+), 1 deletion(-)
 create mode 100644 scripts/sao-ui/src/music_player.rs

diff --git a/scripts/sao-ui/Cargo.toml b/scripts/sao-ui/Cargo.toml
index 6c6862e..2a09cd0 100644
--- a/scripts/sao-ui/Cargo.toml
+++ b/scripts/sao-ui/Cargo.toml
@@ -10,6 +10,7 @@ crate-type = ["cdylib"]
 [dependencies]
 glam = "^0.21"
 keyframe = "1"
+canary-music-player = { path = "../../apps/music-player" }
 canary-script = { path = "../../crates/script" }
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
diff --git a/scripts/sao-ui/src/lib.rs b/scripts/sao-ui/src/lib.rs
index b24baef..b1c2430 100644
--- a/scripts/sao-ui/src/lib.rs
+++ b/scripts/sao-ui/src/lib.rs
@@ -4,6 +4,7 @@ static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
 pub mod anim;
 pub mod draw;
 pub mod main_menu;
+pub mod music_player;
 pub mod panel;
 pub mod widgets;
 
@@ -11,8 +12,9 @@ use canary_script::*;
 use api::*;
 use widgets::Widget;
 use main_menu::MainMenuPanel;
+use music_player::MusicPlayerPanel;
 
-export_abi!(MainMenuPanel);
+export_abi!(MusicPlayerPanel);
 
 pub const ICON_FONT: &str = "Iosevka Nerd Font";
 pub const DISPLAY_FONT: &str = "Homenaje";
diff --git a/scripts/sao-ui/src/music_player.rs b/scripts/sao-ui/src/music_player.rs
new file mode 100644
index 0000000..ef70e2c
--- /dev/null
+++ b/scripts/sao-ui/src/music_player.rs
@@ -0,0 +1,212 @@
+use api::*;
+use canary_script::*;
+
+use canary_music_player::{AlbumInfo, TrackInfo};
+
+use crate::widgets::prelude::*;
+use dialog::{DialogBodyStyle, DialogFooterStyle};
+use shell::Offset;
+use text::{HorizontalAlignment, Label, LabelText};
+
+pub struct MusicPlayerPanel {
+    panel: Panel,
+    widget: Option<MusicPlayerWidget>,
+    disconnected: Offset<Label>,
+}
+
+impl BindPanel for MusicPlayerPanel {
+    fn bind(panel: Panel, _msg: Message) -> Box<dyn PanelImpl> {
+        let dc_text = LabelText {
+            font: Font::new(crate::DISPLAY_FONT),
+            text: "Disconnected".to_string(),
+        };
+
+        let disconnected = Label::new_centered(dc_text, 10.0, Color::WHITE);
+        let disconnected = Offset::new(disconnected, Vec2::ZERO);
+
+        Box::new(Self {
+            panel,
+            widget: None,
+            disconnected,
+        })
+    }
+}
+
+impl PanelImpl for MusicPlayerPanel {
+    fn update(&mut self, dt: f32) {
+        if let Some(widget) = self.widget.as_mut() {
+            Widget::update(widget, dt);
+        }
+    }
+
+    fn draw(&mut self) {
+        let ctx = DrawContext::new(self.panel);
+
+        if let Some(widget) = self.widget.as_mut() {
+            Widget::draw(widget, &ctx);
+        } else {
+            self.disconnected.draw(&ctx);
+        }
+    }
+
+    fn on_resize(&mut self, new_size: Vec2) {
+        self.disconnected.set_offset(new_size / 2.0);
+
+        if let Some(widget) = self.widget.as_mut() {
+            widget.resize(new_size);
+        }
+    }
+
+    fn on_cursor_event(&mut self, kind: CursorEventKind, at: Vec2) {
+        if let Some(widget) = self.widget.as_mut() {
+            Widget::on_cursor_event(widget, kind, at);
+        }
+    }
+
+    fn on_message(&mut self, msg: Message) {
+        use canary_music_player::{serde_json::from_slice, InMsg};
+        let msg = msg.to_vec();
+        let msg: InMsg = match from_slice(&msg) {
+            Ok(msg) => msg,
+            Err(_) => return,
+        };
+
+        use InMsg::*;
+        match (self.widget.as_mut(), msg) {
+            (Some(_), Disconnected) => self.widget = None,
+            (None, Connected) => self.widget = Some(MusicPlayerWidget::new()),
+            (Some(widget), AlbumChanged(info)) => widget.update_album(info),
+            (Some(widget), TrackChanged(info)) => widget.update_track(info),
+            _ => {}
+        }
+    }
+}
+
+pub struct MusicPlayerStyle {
+    pub body: DialogBodyStyle,
+    pub footer: DialogFooterStyle,
+    pub rounding: f32,
+    pub art_margin: f32,
+}
+
+impl Default for MusicPlayerStyle {
+    fn default() -> Self {
+        Self {
+            body: Default::default(),
+            footer: Default::default(),
+            rounding: 5.0,
+            art_margin: 5.0,
+        }
+    }
+}
+
+pub struct MusicPlayerWidget {
+    artist: Offset<Label>,
+    album: Offset<Label>,
+    track: Offset<Label>,
+    style: MusicPlayerStyle,
+    art_rect: Rect,
+    body_rect: Rect,
+    footer_rect: Rect,
+}
+
+impl Container for MusicPlayerWidget {
+    fn with_children(&mut self, mut f: impl FnMut(&mut dyn Widget)) {
+        f(&mut self.artist);
+        f(&mut self.album);
+        f(&mut self.track);
+    }
+
+    fn draw(&mut self, ctx: &DrawContext) {
+        ctx.draw_partially_rounded_rect(
+            CornerFlags::TOP,
+            self.body_rect,
+            self.style.rounding,
+            self.style.body.color,
+        );
+
+        ctx.draw_rounded_rect(self.art_rect, self.style.rounding, Color::MAGENTA);
+
+        ctx.draw_partially_rounded_rect(
+            CornerFlags::BOTTOM,
+            self.footer_rect,
+            self.style.rounding,
+            self.style.footer.color,
+        );
+    }
+}
+
+impl MusicPlayerWidget {
+    pub fn new() -> Self {
+        let font = Font::new(crate::DISPLAY_FONT);
+
+        let make_label = |content: &str| {
+            let text = LabelText {
+                font,
+                text: content.to_string(),
+            };
+
+            let label = Label::new_centered(text, 10.0, Color::BLACK);
+            Offset::new(label, Vec2::ZERO)
+        };
+
+        Self {
+            artist: make_label("Artist"),
+            album: make_label("Album"),
+            track: make_label("Track"),
+            style: Default::default(),
+            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),
+        }
+    }
+
+    pub fn resize(&mut self, new_size: Vec2) {
+        let style = &self.style;
+        let width = new_size.x;
+        let body_height = new_size.y - style.footer.height;
+        let body_height = body_height.max(0.0);
+        let body_size = Vec2::new(width, body_height);
+        let footer_size = Vec2::new(width, style.footer.height);
+
+        let art_size = body_height - style.art_margin * 2.0;
+        self.art_rect = Rect::from_xy_size(Vec2::splat(style.art_margin), Vec2::splat(art_size));
+
+        let label_x = (width + self.art_rect.br.x) / 2.0;
+        let artist_baseline = body_height * 0.25;
+        let album_baseline = body_height * 0.55;
+        let track_baseline = body_height * 0.85;
+
+        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);
+    }
+
+    pub fn update_album(&mut self, info: AlbumInfo) {
+        self.album.set_text(
+            info.title
+                .as_ref()
+                .map(|s| s.as_str())
+                .unwrap_or("<album here>"),
+        );
+    }
+
+    pub fn update_track(&mut self, info: TrackInfo) {
+        self.artist.set_text(
+            info.artists
+                .first()
+                .map(|s| s.as_str())
+                .unwrap_or("<artist here>"),
+        );
+
+        self.track.set_text(
+            info.title
+                .as_ref()
+                .map(|s| s.as_str())
+                .unwrap_or("<album here>"),
+        );
+    }
+}
diff --git a/scripts/sao-ui/src/widgets/text.rs b/scripts/sao-ui/src/widgets/text.rs
index 19cf6cf..c0e8e22 100644
--- a/scripts/sao-ui/src/widgets/text.rs
+++ b/scripts/sao-ui/src/widgets/text.rs
@@ -53,6 +53,26 @@ impl Label {
             offset: Vec2::ZERO,
         }
     }
+
+    pub fn new_centered(text: LabelText, scale: f32, color: Color) -> Self {
+        Self::new(
+            text,
+            HorizontalAlignment::Center,
+            scale,
+            color,
+            0.0,
+            0.0,
+            0.0,
+        )
+    }
+
+    pub fn set_text(&mut self, text: &str) {
+        if self.text.text != text {
+            self.text.text = text.to_string();
+            self.layout = None;
+            self.dirty = true;
+        }
+    }
 }
 
 impl Widget for Label {

From 4a091bd206ed882251849a1b0c9c4519cc0fdd99 Mon Sep 17 00:00:00 2001
From: mars <mars@tebibyte.media>
Date: Sun, 6 Nov 2022 19:00:56 -0700
Subject: [PATCH 2/7] Label text update methods

---
 scripts/sao-ui/src/widgets/button.rs | 6 ++++++
 scripts/sao-ui/src/widgets/text.rs   | 8 ++++++++
 2 files changed, 14 insertions(+)

diff --git a/scripts/sao-ui/src/widgets/button.rs b/scripts/sao-ui/src/widgets/button.rs
index 6ecf242..d2b8859 100644
--- a/scripts/sao-ui/src/widgets/button.rs
+++ b/scripts/sao-ui/src/widgets/button.rs
@@ -48,6 +48,12 @@ impl RoundButton {
             icon,
         }
     }
+
+    pub fn set_text(&mut self, text: &str) {
+        if let Some(icon) = self.icon.as_mut() {
+            icon.set_text(text);
+        }
+    }
 }
 
 impl Button for RoundButton {
diff --git a/scripts/sao-ui/src/widgets/text.rs b/scripts/sao-ui/src/widgets/text.rs
index c0e8e22..6b9cf54 100644
--- a/scripts/sao-ui/src/widgets/text.rs
+++ b/scripts/sao-ui/src/widgets/text.rs
@@ -128,6 +128,14 @@ impl Icon {
             offset: Vec2::ZERO,
         }
     }
+
+    pub fn set_text(&mut self, text: &str) {
+        if self.text.text != text {
+            self.text.text = text.to_string();
+            self.layout = None;
+            self.dirty = true;
+        }
+    }
 }
 
 impl Widget for Icon {

From 8c9f82183513fdd2a6d4025fb741b710cd813891 Mon Sep 17 00:00:00 2001
From: mars <mars@tebibyte.media>
Date: Sun, 6 Nov 2022 19:01:13 -0700
Subject: [PATCH 3/7] Add previous, play/pause, and next buttons

---
 scripts/sao-ui/src/music_player.rs | 77 +++++++++++++++++++++++++++++-
 1 file changed, 75 insertions(+), 2 deletions(-)

diff --git a/scripts/sao-ui/src/music_player.rs b/scripts/sao-ui/src/music_player.rs
index ef70e2c..4d0b4a7 100644
--- a/scripts/sao-ui/src/music_player.rs
+++ b/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);
+    }
 }

From fe9ea34a23f24828a7951792d5202df5583c19d2 Mon Sep 17 00:00:00 2001
From: mars <mars@tebibyte.media>
Date: Mon, 7 Nov 2022 12:16:35 -0700
Subject: [PATCH 4/7] Add location and duration labels

---
 scripts/sao-ui/src/music_player.rs | 49 ++++++++++++++++++++++++------
 1 file changed, 40 insertions(+), 9 deletions(-)

diff --git a/scripts/sao-ui/src/music_player.rs b/scripts/sao-ui/src/music_player.rs
index 4d0b4a7..bdd6014 100644
--- a/scripts/sao-ui/src/music_player.rs
+++ b/scripts/sao-ui/src/music_player.rs
@@ -99,7 +99,7 @@ impl Default for MusicPlayerStyle {
             footer: Default::default(),
             rounding: 5.0,
             art_margin: 5.0,
-            button_spacing: 20.0,
+            button_spacing: 15.0,
         }
     }
 }
@@ -111,6 +111,8 @@ pub struct MusicPlayerWidget {
     previous: Offset<RoundButton>,
     play: Offset<RoundButton>,
     next: Offset<RoundButton>,
+    position: Offset<Label>,
+    duration: Offset<Label>,
     style: MusicPlayerStyle,
     art_rect: Rect,
     body_rect: Rect,
@@ -125,6 +127,8 @@ impl Container for MusicPlayerWidget {
         f(&mut self.previous);
         f(&mut self.play);
         f(&mut self.next);
+        f(&mut self.position);
+        f(&mut self.duration);
     }
 
     fn draw(&mut self, ctx: &DrawContext) {
@@ -148,11 +152,13 @@ impl Container for MusicPlayerWidget {
 
 impl MusicPlayerWidget {
     pub fn new() -> Self {
-        let font = Font::new(crate::DISPLAY_FONT);
+        let style = MusicPlayerStyle::default();
+        let display_font = Font::new(crate::DISPLAY_FONT);
+        let content_font = Font::new(crate::CONTENT_FONT);
 
-        let make_label = |content: &str| {
+        let make_body_label = |content: &str| {
             let text = LabelText {
-                font,
+                font: display_font,
                 text: content.to_string(),
             };
 
@@ -160,6 +166,27 @@ impl MusicPlayerWidget {
             Offset::new(label, Vec2::ZERO)
         };
 
+        let make_footer_label = |content: &str| {
+            let text = LabelText {
+                font: content_font,
+                text: content.to_string(),
+            };
+
+            let size = style.footer.height;
+            let scale = size * 0.4;
+            let baseline = size * 0.125;
+            let label = Label::new(
+                text,
+                HorizontalAlignment::Center,
+                scale,
+                Color::BLACK,
+                0.0,
+                0.0,
+                baseline,
+            );
+            Offset::new(label, Vec2::ZERO)
+        };
+
         let icon_font = Font::new(crate::ICON_FONT);
 
         let prev_text = LabelText {
@@ -177,8 +204,6 @@ impl MusicPlayerWidget {
             text: "怜".to_string(),
         };
 
-        let style = MusicPlayerStyle::default();
-
         let primary_button = RoundButtonStyle {
             radius: style.footer.height * 0.3,
             spacing: style.footer.height * 0.1,
@@ -202,12 +227,14 @@ impl MusicPlayerWidget {
         let next = RoundButton::new(secondary_button, Some(next_text));
 
         Self {
-            artist: make_label("Artist"),
-            album: make_label("Album"),
-            track: make_label("Track"),
+            artist: make_body_label("Artist"),
+            album: make_body_label("Album"),
+            track: make_body_label("Track"),
             previous: Offset::new(prev, Vec2::ZERO),
             play: Offset::new(play, Vec2::ZERO),
             next: Offset::new(next, Vec2::ZERO),
+            position: make_footer_label("--:--"),
+            duration: make_footer_label("--:--"),
             style,
             art_rect: Rect::from_xy_size(Vec2::ZERO, Vec2::ZERO),
             body_rect: Rect::from_xy_size(Vec2::ZERO, Vec2::ZERO),
@@ -235,10 +262,14 @@ impl MusicPlayerWidget {
         let previous_x = style.button_spacing * 0.5;
         let play_x = style.button_spacing * 1.5;
         let next_x = style.button_spacing * 2.5;
+        let position_x = style.button_spacing * 3.5;
+        let duration_x = width - style.button_spacing * 0.75;
 
         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.position.set_offset(Vec2::new(position_x, button_y));
+        self.duration.set_offset(Vec2::new(duration_x, button_y));
 
         self.body_rect = Rect::from_xy_size(Vec2::ZERO, body_size);
         self.footer_rect = Rect::from_xy_size(self.body_rect.bl(), footer_size);

From 4b05f55725cc99b50feab38bc3d9b89f64e0a41e Mon Sep 17 00:00:00 2001
From: mars <mars@tebibyte.media>
Date: Mon, 7 Nov 2022 12:17:22 -0700
Subject: [PATCH 5/7] Shrink dialog footer height

---
 scripts/sao-ui/src/widgets/dialog.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/sao-ui/src/widgets/dialog.rs b/scripts/sao-ui/src/widgets/dialog.rs
index c8c7415..f8dea23 100644
--- a/scripts/sao-ui/src/widgets/dialog.rs
+++ b/scripts/sao-ui/src/widgets/dialog.rs
@@ -104,7 +104,7 @@ impl Default for DialogFooterStyle {
             icon_font: Font::new(crate::ICON_FONT),
             button_radius: 7.5,
             color: Color::WHITE,
-            height: 20.0,
+            height: 15.0,
         }
     }
 }

From 71a4eb2cf0861174b2fff6c5e026d05b674c9ce6 Mon Sep 17 00:00:00 2001
From: mars <mars@tebibyte.media>
Date: Tue, 15 Nov 2022 21:37:03 -0700
Subject: [PATCH 6/7] Use progress info in position/duration labels

---
 scripts/sao-ui/src/music_player.rs | 48 +++++++++++++++++++++++++++++-
 1 file changed, 47 insertions(+), 1 deletion(-)

diff --git a/scripts/sao-ui/src/music_player.rs b/scripts/sao-ui/src/music_player.rs
index bdd6014..dce3be5 100644
--- a/scripts/sao-ui/src/music_player.rs
+++ b/scripts/sao-ui/src/music_player.rs
@@ -1,7 +1,7 @@
 use api::*;
 use canary_script::*;
 
-use canary_music_player::{AlbumInfo, PlaybackStatus, TrackInfo};
+use canary_music_player::{AlbumInfo, PlaybackStatus, ProgressChanged, TrackInfo};
 
 use crate::widgets::prelude::*;
 use button::{RoundButton, RoundButtonStyle};
@@ -79,6 +79,7 @@ impl PanelImpl for MusicPlayerPanel {
             (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),
+            (Some(widget), ProgressChanged(progress)) => widget.update_progress(progress),
             _ => {}
         }
     }
@@ -117,6 +118,9 @@ pub struct MusicPlayerWidget {
     art_rect: Rect,
     body_rect: Rect,
     footer_rect: Rect,
+    position_secs: f32,
+    position_dirty: bool,
+    status: PlaybackStatus,
 }
 
 impl Container for MusicPlayerWidget {
@@ -131,6 +135,19 @@ impl Container for MusicPlayerWidget {
         f(&mut self.duration);
     }
 
+    fn update(&mut self, dt: f32) {
+        if let PlaybackStatus::Playing = self.status {
+            self.position_secs += dt;
+            self.position_dirty = true;
+        }
+
+        if self.position_dirty {
+            self.position_dirty = false;
+            self.position
+                .set_text(&Self::format_time(self.position_secs));
+        }
+    }
+
     fn draw(&mut self, ctx: &DrawContext) {
         ctx.draw_partially_rounded_rect(
             CornerFlags::TOP,
@@ -239,6 +256,22 @@ impl MusicPlayerWidget {
             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),
+            position_secs: 0.0,
+            position_dirty: false,
+            status: PlaybackStatus::Paused,
+        }
+    }
+
+    pub fn format_time(secs: f32) -> String {
+        let duration = secs.floor() as usize;
+        let seconds = duration % 60;
+        let minutes = (duration / 60) % 60;
+        let hours = (duration / 60) / 60;
+
+        if hours > 0 {
+            format!("{:02}:{:02}:{:02}", hours, minutes, seconds)
+        } else {
+            format!("{:02}:{:02}", minutes, seconds)
         }
     }
 
@@ -304,7 +337,20 @@ impl MusicPlayerWidget {
         );
     }
 
+    pub fn update_progress(&mut self, progress: ProgressChanged) {
+        self.position_secs = progress.position;
+        self.position_dirty = true;
+
+        if let Some(length) = progress.length {
+            self.duration.set_text(&Self::format_time(length));
+        } else {
+            self.duration.set_text("--:--");
+        }
+    }
+
     pub fn update_playback_status(&mut self, status: PlaybackStatus) {
+        self.status = status;
+
         let icon = match status {
             PlaybackStatus::Playing => "契",
             PlaybackStatus::Paused => "",

From 3ddda5f0c152f7914ed22ab383ff1ded23fb2f49 Mon Sep 17 00:00:00 2001
From: mars <mars@tebibyte.media>
Date: Wed, 16 Nov 2022 19:37:28 -0700
Subject: [PATCH 7/7] SAO UI uses MusicPlayerPanel when the protocol is
 selected

---
 scripts/sao-ui/src/lib.rs | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/scripts/sao-ui/src/lib.rs b/scripts/sao-ui/src/lib.rs
index 3deadeb..b558d3f 100644
--- a/scripts/sao-ui/src/lib.rs
+++ b/scripts/sao-ui/src/lib.rs
@@ -12,12 +12,19 @@ pub mod widgets;
 use api::*;
 use canary_script::*;
 use main_menu::MainMenuPanel;
+use music_player::MusicPlayerPanel;
 use widgets::Widget;
 
 export_abi!(bind_panel_impl);
 
-fn bind_panel_impl(panel: Panel, _protocol: Message, msg: Message) -> Box<dyn PanelImpl> {
-    MainMenuPanel::bind(panel, msg)
+fn bind_panel_impl(panel: Panel, protocol: Message, msg: Message) -> Box<dyn PanelImpl> {
+    let protocol = protocol.to_vec();
+    let protocol = String::from_utf8(protocol).unwrap();
+
+    match protocol.as_str() {
+        "tebibyte-media.desktop.music-player-controller" => MusicPlayerPanel::bind(panel, msg),
+        _ => MainMenuPanel::bind(panel, msg),
+    }
 }
 
 pub const ICON_FONT: &str = "Iosevka Nerd Font";