Use slider widget for position in music player

scripts/sao-ui/src/music_player.rs

@@ -7,6 +7,7 @@ use crate::widgets::prelude::*;
 use button::{RoundButton, RoundButtonStyle};
 use dialog::{DialogBodyStyle, DialogFooterStyle};
 use shell::Offset;
+use slider::Slider;
 use text::{HorizontalAlignment, Label, LabelText};
 
 pub struct MusicPlayerPanel {
@@ -91,6 +92,7 @@ pub struct MusicPlayerStyle {
     pub rounding: f32,
     pub art_margin: f32,
     pub button_spacing: f32,
+    pub slider_height: f32,
 }
 
 impl Default for MusicPlayerStyle {
@@ -101,6 +103,7 @@ impl Default for MusicPlayerStyle {
             rounding: 5.0,
             art_margin: 5.0,
             button_spacing: 15.0,
+            slider_height: 7.5,
         }
     }
 }
@@ -115,11 +118,13 @@ pub struct MusicPlayerWidget {
     next: Offset<RoundButton>,
     position: Offset<Label>,
     duration: Offset<Label>,
+    slider: Slider,
     style: MusicPlayerStyle,
     art_rect: Rect,
     body_rect: Rect,
     footer_rect: Rect,
     position_secs: f32,
+    duration_secs: f32,
     position_dirty: bool,
     status: PlaybackStatus,
 }
@@ -134,6 +139,7 @@ impl Container for MusicPlayerWidget {
         f(&mut self.next);
         f(&mut self.position);
         f(&mut self.duration);
+        f(&mut self.slider);
     }
 
     fn update(&mut self, dt: f32) {
@@ -146,6 +152,8 @@ impl Container for MusicPlayerWidget {
             self.position_dirty = false;
             self.position
                 .set_text(&Self::format_time(self.position_secs));
+
+            self.slider.set_position(self.position_secs / self.duration_secs);
         }
 
         if self.previous.was_clicked() {
@@ -258,6 +266,11 @@ impl MusicPlayerWidget {
         let play = RoundButton::new(primary_button, Some(play_text));
         let next = RoundButton::new(secondary_button, Some(next_text));
 
+        let slider = Slider::new(
+            Default::default(),
+            Rect::from_xy_size(Vec2::ZERO, Vec2::ZERO),
+        );
+
         Self {
             panel,
             artist: make_body_label("Artist"),
@@ -268,11 +281,13 @@ impl MusicPlayerWidget {
             next: Offset::new(next, Vec2::ZERO),
             position: make_footer_label("--:--"),
             duration: make_footer_label("--:--"),
+            slider,
             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),
             position_secs: 0.0,
+            duration_secs: 0.0,
             position_dirty: false,
             status: PlaybackStatus::Paused,
         }
@@ -317,8 +332,17 @@ impl MusicPlayerWidget {
         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 slider_left = style.button_spacing * 4.5;
+        let slider_right = width - style.button_spacing * 1.75;
+        let slider_top = button_y - style.slider_height / 2.0;
+        let slider_bottom = button_y + style.slider_height / 2.0;
         let duration_x = width - style.button_spacing * 0.75;
 
+        let slider_rect = Rect {
+            tl: Vec2::new(slider_left, slider_top),
+            br: Vec2::new(slider_right, slider_bottom),
+        };
+
         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));
@@ -331,6 +355,8 @@ impl MusicPlayerWidget {
         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));
+
+        self.slider.set_rect(slider_rect);
     }
 
     pub fn update_album(&mut self, info: AlbumInfo) {
@@ -359,6 +385,7 @@ impl MusicPlayerWidget {
 
         if let Some(length) = info.length {
             self.duration.set_text(&Self::format_time(length));
+            self.duration_secs = length;
         } else {
             self.duration.set_text("--:--");
         }