From 33fa7b9b260eed47123d5dd0013fe65d31a00876 Mon Sep 17 00:00:00 2001
From: Samuel Oldham <77629938+SO9010@users.noreply.github.com>
Date: Mon, 7 Oct 2024 05:29:19 +0100
Subject: [PATCH] Lyrics support (#535)

* Cache lyrics and add ability to skip to position in song via lyrics

* Better formatting for lyrics and fix initialization

* Add music note button to show lyrics.

* Toggle lyrics

---------

Co-authored-by: SO9010 <SO9010sami@gmail.com>
Co-authored-by: Jackson Goode <jacksongoode@proton.me>
---
 psst-gui/build.rs                   |   2 +-
 psst-gui/src/cmd.rs                 |   2 +
 psst-gui/src/controller/nav.rs      |   4 +-
 psst-gui/src/controller/playback.rs |  22 +++++-
 psst-gui/src/data/mod.rs            |   4 +-
 psst-gui/src/data/nav.rs            |   5 ++
 psst-gui/src/data/track.rs          |   9 +++
 psst-gui/src/ui/home.rs             |  52 +++++++-------
 psst-gui/src/ui/lyrics.rs           | 108 ++++++++++++++++++++++++++++
 psst-gui/src/ui/mod.rs              |   5 ++
 psst-gui/src/ui/playback.rs         |  19 +++--
 psst-gui/src/webapi/client.rs       |  32 ++++++++-
 psst-gui/src/webapi/local.rs        |   1 +
 psst-gui/src/widget/icons.rs        |   7 ++
 14 files changed, 233 insertions(+), 39 deletions(-)
 create mode 100644 psst-gui/src/ui/lyrics.rs

diff --git a/psst-gui/build.rs b/psst-gui/build.rs
index 1870fcd1..1499033f 100644
--- a/psst-gui/build.rs
+++ b/psst-gui/build.rs
@@ -21,7 +21,7 @@ fn add_windows_icon() {
     res.compile().expect("Could not attach exe icon");
 
     fn load_images() -> Vec<IcoFrame<'static>> {
-        let sizes = vec![32, 64, 128, 256];
+        let sizes = [32, 64, 128, 256];
         sizes
             .iter()
             .map(|s| {
diff --git a/psst-gui/src/cmd.rs b/psst-gui/src/cmd.rs
index 65957e13..ce6bd0cb 100644
--- a/psst-gui/src/cmd.rs
+++ b/psst-gui/src/cmd.rs
@@ -32,6 +32,7 @@ pub const LOG_OUT: Selector = Selector::new("app.log-out");
 pub const NAVIGATE: Selector<Nav> = Selector::new("app.navigates");
 pub const NAVIGATE_BACK: Selector<usize> = Selector::new("app.navigate-back");
 pub const NAVIGATE_REFRESH: Selector = Selector::new("app.navigate-refresh");
+pub const TOGGLE_LYRICS: Selector = Selector::new("app.toggle-lyrics");
 
 // Playback state
 pub const PLAYBACK_LOADING: Selector<ItemId> = Selector::new("app.playback-loading");
@@ -53,6 +54,7 @@ pub const PLAY_STOP: Selector = Selector::new("app.play-stop");
 pub const ADD_TO_QUEUE: Selector<(QueueEntry, PlaybackItem)> = Selector::new("app.add-to-queue");
 pub const PLAY_QUEUE_BEHAVIOR: Selector<QueueBehavior> = Selector::new("app.play-queue-behavior");
 pub const PLAY_SEEK: Selector<f64> = Selector::new("app.play-seek");
+pub const SKIP_TO_POSITION: Selector<u64> = Selector::new("app.skip-to-position");
 
 // Sorting control
 pub const SORT_BY_DATE_ADDED: Selector = Selector::new("app.sort-by-date-added");
diff --git a/psst-gui/src/controller/nav.rs b/psst-gui/src/controller/nav.rs
index 06c9aa60..bf294e9f 100644
--- a/psst-gui/src/controller/nav.rs
+++ b/psst-gui/src/controller/nav.rs
@@ -1,10 +1,9 @@
-use druid::widget::{prelude::*, Controller};
-
 use crate::{
     cmd,
     data::{AppState, Nav, SpotifyUrl},
     ui::{album, artist, library, playlist, recommend, search, show},
 };
+use druid::widget::{prelude::*, Controller};
 
 pub struct NavController;
 
@@ -12,6 +11,7 @@ impl NavController {
     fn load_route_data(&self, ctx: &mut EventCtx, data: &mut AppState) {
         match &data.nav {
             Nav::Home => {}
+            Nav::Lyrics => {}
             Nav::SavedTracks => {
                 if !data.library.saved_tracks.is_resolved() {
                     ctx.submit_command(library::LOAD_TRACKS);
diff --git a/psst-gui/src/controller/playback.rs b/psst-gui/src/controller/playback.rs
index 79b8b811..792b9947 100644
--- a/psst-gui/src/controller/playback.rs
+++ b/psst-gui/src/controller/playback.rs
@@ -22,7 +22,12 @@ use souvlaki::{
 
 use crate::{
     cmd,
-    data::{AppState, Config, Playback, PlaybackOrigin, PlaybackState, QueueBehavior, QueueEntry},
+    data::Nav,
+    data::{
+        AppState, Config, NowPlaying, Playback, PlaybackOrigin, PlaybackState, QueueBehavior,
+        QueueEntry,
+    },
+    ui::lyrics,
 };
 
 pub struct PlaybackController {
@@ -310,6 +315,12 @@ impl PlaybackController {
             },
         }));
     }
+
+    fn update_lyrics(&self, ctx: &mut EventCtx, data: &AppState, now_playing: &NowPlaying) {
+        if matches!(data.nav, Nav::Lyrics) {
+            ctx.submit_command(lyrics::SHOW_LYRICS.with(now_playing.clone()));
+        }
+    }
 }
 
 impl<W> Controller<AppState, W> for PlaybackController
@@ -348,6 +359,9 @@ where
                     data.start_playback(queued.item, queued.origin, progress.to_owned());
                     self.update_media_control_playback(&data.playback);
                     self.update_media_control_metadata(&data.playback);
+                    if let Some(now_playing) = &data.playback.now_playing {
+                        self.update_lyrics(ctx, data, now_playing);
+                    }
                 } else {
                     log::warn!("played item not found in playback queue");
                 }
@@ -436,6 +450,12 @@ where
                 }
                 ctx.set_handled();
             }
+            Event::Command(cmd) if cmd.is(cmd::SKIP_TO_POSITION) => {
+                let location = cmd.get_unchecked(cmd::SKIP_TO_POSITION);
+                self.seek(Duration::from_millis(location.clone()));
+
+                ctx.set_handled();
+            }
             // Keyboard shortcuts.
             Event::KeyDown(key) if key.code == Code::Space => {
                 self.pause_or_resume();
diff --git a/psst-gui/src/data/mod.rs b/psst-gui/src/data/mod.rs
index 685b4e81..21fa81d0 100644
--- a/psst-gui/src/data/mod.rs
+++ b/psst-gui/src/data/mod.rs
@@ -55,7 +55,7 @@ pub use crate::data::{
     search::{Search, SearchResults, SearchTopic},
     show::{Episode, EpisodeId, EpisodeLink, Show, ShowDetail, ShowEpisodes, ShowLink},
     slider_scroll_scale::SliderScrollScale,
-    track::{AudioAnalysis, Track, TrackId},
+    track::{AudioAnalysis, Track, TrackId, TrackLines},
     user::{PublicUser, UserProfile},
     utils::{Cached, Float64, Image, Page},
 };
@@ -83,6 +83,7 @@ pub struct AppState {
     pub alerts: Vector<Alert>,
     pub finder: Finder,
     pub added_queue: Vector<QueueEntry>,
+    pub lyrics: Promise<Vector<TrackLines>>,
 }
 
 impl AppState {
@@ -164,6 +165,7 @@ impl AppState {
             common_ctx,
             alerts: Vector::new(),
             finder: Finder::new(),
+            lyrics: Promise::Empty,
         }
     }
 }
diff --git a/psst-gui/src/data/nav.rs b/psst-gui/src/data/nav.rs
index 0a52e10e..3b0e2b1d 100644
--- a/psst-gui/src/data/nav.rs
+++ b/psst-gui/src/data/nav.rs
@@ -11,6 +11,7 @@ use super::RecommendationsRequest;
 #[derive(Copy, Clone, Debug, Data, PartialEq, Eq, Hash)]
 pub enum Route {
     Home,
+    Lyrics,
     SavedTracks,
     SavedAlbums,
     SavedShows,
@@ -26,6 +27,7 @@ pub enum Route {
 pub enum Nav {
     #[default]
     Home,
+    Lyrics,
     SavedTracks,
     SavedAlbums,
     SavedShows,
@@ -41,6 +43,7 @@ impl Nav {
     pub fn route(&self) -> Route {
         match self {
             Nav::Home => Route::Home,
+            Nav::Lyrics => Route::Lyrics,
             Nav::SavedTracks => Route::SavedTracks,
             Nav::SavedAlbums => Route::SavedAlbums,
             Nav::SavedShows => Route::SavedShows,
@@ -56,6 +59,7 @@ impl Nav {
     pub fn title(&self) -> String {
         match self {
             Nav::Home => "Home".to_string(),
+            Nav::Lyrics => "Lyrics".to_string(),
             Nav::SavedTracks => "Saved Tracks".to_string(),
             Nav::SavedAlbums => "Saved Albums".to_string(),
             Nav::SavedShows => "Saved Podcasts".to_string(),
@@ -71,6 +75,7 @@ impl Nav {
     pub fn full_title(&self) -> String {
         match self {
             Nav::Home => "Home".to_string(),
+            Nav::Lyrics => "Lyrics".to_string(),
             Nav::SavedTracks => "Saved Tracks".to_string(),
             Nav::SavedAlbums => "Saved Albums".to_string(),
             Nav::SavedShows => "Saved Shows".to_string(),
diff --git a/psst-gui/src/data/track.rs b/psst-gui/src/data/track.rs
index c978b5be..bfb8d4ff 100644
--- a/psst-gui/src/data/track.rs
+++ b/psst-gui/src/data/track.rs
@@ -27,6 +27,7 @@ pub struct Track {
     pub popularity: Option<u32>,
     #[serde(skip)]
     pub track_pos: usize,
+    pub lyrics: Option<Vector<TrackLines>>,
 }
 
 impl Track {
@@ -74,6 +75,14 @@ impl Track {
     }
 }
 
+#[derive(Clone, Debug, Data, Lens, Deserialize, Serialize, PartialEq)]
+#[serde(rename_all = "camelCase")]
+pub struct TrackLines {
+    pub start_time_ms: String,
+    pub words: String,
+    pub end_time_ms: String,
+}
+
 #[derive(Clone, Copy, Default, PartialEq, Eq, Debug, Hash, Deserialize, Serialize)]
 #[serde(try_from = "String")]
 #[serde(into = "String")]
diff --git a/psst-gui/src/ui/home.rs b/psst-gui/src/ui/home.rs
index 8ea7d916..8e56a043 100644
--- a/psst-gui/src/ui/home.rs
+++ b/psst-gui/src/ui/home.rs
@@ -37,17 +37,16 @@ pub fn home_widget() -> impl Widget<AppState> {
 }
 
 fn simple_title_label(title: &str) -> impl Widget<AppState> {
-    Flex::column()
-    .with_default_spacer()
-    .with_child(Label::new(title)
-        .with_text_size(theme::grid(2.5))
-        .align_left()
-        .padding((theme::grid(1.5), 0.0))
+    Flex::column().with_default_spacer().with_child(
+        Label::new(title)
+            .with_text_size(theme::grid(2.5))
+            .align_left()
+            .padding((theme::grid(1.5), 0.0)),
     )
 }
 
 pub fn made_for_you() -> impl Widget<AppState> {
-    Async::new(spinner_widget, loaded_results_widget, || {Empty})
+    Async::new(spinner_widget, loaded_results_widget, || Empty)
         .lens(
             Ctx::make(
                 AppState::common_ctx,
@@ -64,7 +63,7 @@ pub fn made_for_you() -> impl Widget<AppState> {
 }
 
 pub fn recommended_stations() -> impl Widget<AppState> {
-    Async::new(spinner_widget, loaded_results_widget, || {Empty})
+    Async::new(spinner_widget, loaded_results_widget, || Empty)
         .lens(
             Ctx::make(
                 AppState::common_ctx,
@@ -82,27 +81,24 @@ pub fn recommended_stations() -> impl Widget<AppState> {
 
 fn uniquely_yours_results_widget() -> impl Widget<WithCtx<MixedView>> {
     Either::new(
-        |results: &WithCtx<MixedView>, _| {
-                results.data.playlists.is_empty()
-        },
+        |results: &WithCtx<MixedView>, _| results.data.playlists.is_empty(),
         Empty,
-        Flex::column().with_default_spacer()
-        .with_child(Label::new("Uniquely yours")
-            .with_text_size(theme::grid(2.5))
-            .align_left()
-            .padding((theme::grid(1.5), 0.0))
-        ).with_child(
-            Scroll::new(
-                Flex::row()
-                    .with_child(playlist_results_widget())
+        Flex::column()
+            .with_default_spacer()
+            .with_child(
+                Label::new("Uniquely yours")
+                    .with_text_size(theme::grid(2.5))
+                    .align_left()
+                    .padding((theme::grid(1.5), 0.0)),
             )
-            .align_left(),
-        ),
+            .with_child(
+                Scroll::new(Flex::row().with_child(playlist_results_widget())).align_left(),
+            ),
     )
 }
 
 pub fn uniquely_yours() -> impl Widget<AppState> {
-    Async::new(spinner_widget, uniquely_yours_results_widget, || {Empty})
+    Async::new(spinner_widget, uniquely_yours_results_widget, || Empty)
         .lens(
             Ctx::make(
                 AppState::common_ctx,
@@ -119,7 +115,7 @@ pub fn uniquely_yours() -> impl Widget<AppState> {
 }
 
 pub fn user_top_mixes() -> impl Widget<AppState> {
-    Async::new(spinner_widget, loaded_results_widget, || {Empty})
+    Async::new(spinner_widget, loaded_results_widget, || Empty)
         .lens(
             Ctx::make(
                 AppState::common_ctx,
@@ -136,7 +132,7 @@ pub fn user_top_mixes() -> impl Widget<AppState> {
 }
 
 pub fn best_of_artists() -> impl Widget<AppState> {
-    Async::new(spinner_widget, loaded_results_widget, || {Empty})
+    Async::new(spinner_widget, loaded_results_widget, || Empty)
         .lens(
             Ctx::make(
                 AppState::common_ctx,
@@ -153,7 +149,7 @@ pub fn best_of_artists() -> impl Widget<AppState> {
 }
 
 pub fn your_shows() -> impl Widget<AppState> {
-    Async::new(spinner_widget, loaded_results_widget, || {Empty})
+    Async::new(spinner_widget, loaded_results_widget, || Empty)
         .lens(
             Ctx::make(
                 AppState::common_ctx,
@@ -170,7 +166,7 @@ pub fn your_shows() -> impl Widget<AppState> {
 }
 
 pub fn jump_back_in() -> impl Widget<AppState> {
-    Async::new(spinner_widget, loaded_results_widget, || {Empty})
+    Async::new(spinner_widget, loaded_results_widget, || Empty)
         .lens(
             Ctx::make(
                 AppState::common_ctx,
@@ -187,7 +183,7 @@ pub fn jump_back_in() -> impl Widget<AppState> {
 }
 
 pub fn shows_that_you_might_like() -> impl Widget<AppState> {
-    Async::new(spinner_widget, loaded_results_widget, || {Empty})
+    Async::new(spinner_widget, loaded_results_widget, || Empty)
         .lens(
             Ctx::make(
                 AppState::common_ctx,
diff --git a/psst-gui/src/ui/lyrics.rs b/psst-gui/src/ui/lyrics.rs
new file mode 100644
index 00000000..b7f8d57a
--- /dev/null
+++ b/psst-gui/src/ui/lyrics.rs
@@ -0,0 +1,108 @@
+use druid::widget::{Container, CrossAxisAlignment, Flex, Label, LineBreaking, List, Scroll};
+use druid::{EventCtx, Insets, LensExt, Selector, Widget, WidgetExt};
+
+use crate::cmd;
+use crate::data::{AppState, Ctx, Nav, NowPlaying, Playable, TrackLines};
+use crate::widget::MyWidgetExt;
+use crate::{webapi::WebApi, widget::Async};
+
+use super::theme;
+use super::utils;
+
+pub const SHOW_LYRICS: Selector<NowPlaying> = Selector::new("app.home.show_lyrics");
+
+pub fn lyrics_widget() -> impl Widget<AppState> {
+    Scroll::new(
+        Container::new(
+            Flex::column()
+                .cross_axis_alignment(CrossAxisAlignment::Center)
+                .with_default_spacer()
+                .with_child(track_info_widget())
+                .with_spacer(theme::grid(2.0))
+                .with_child(track_lyrics_widget()),
+        )
+        .fix_width(400.0)
+        .center(),
+    )
+    .vertical()
+    .on_command(cmd::TOGGLE_LYRICS, |ctx, _, data| {
+        toggle_lyrics(data, ctx);
+    })
+}
+
+fn track_info_widget() -> impl Widget<AppState> {
+    Flex::column()
+        .cross_axis_alignment(CrossAxisAlignment::Center)
+        .with_child(
+            Label::dynamic(|data: &AppState, _| {
+                data.playback.now_playing.as_ref().map_or_else(
+                    || "No track playing".to_string(),
+                    |np| match &np.item {
+                        Playable::Track(track) => track.name.clone().to_string(),
+                        _ => "Unknown track".to_string(),
+                    },
+                )
+            })
+            .with_font(theme::UI_FONT_MEDIUM)
+            .with_text_size(theme::TEXT_SIZE_LARGE),
+        )
+        .with_spacer(theme::grid(0.5))
+        .with_child(
+            Label::dynamic(|data: &AppState, _| {
+                data.playback.now_playing.as_ref().map_or_else(
+                    || "".to_string(),
+                    |np| match &np.item {
+                        Playable::Track(track) => {
+                            format!("{} - {}", track.artist_name(), track.album_name())
+                        }
+                        _ => "".to_string(),
+                    },
+                )
+            })
+            .with_text_size(theme::TEXT_SIZE_SMALL)
+            .with_text_color(theme::PLACEHOLDER_COLOR),
+        )
+}
+
+fn track_lyrics_widget() -> impl Widget<AppState> {
+    Async::new(
+        utils::spinner_widget,
+        || {
+            List::new(|| {
+                Label::raw()
+                    .with_line_break_mode(LineBreaking::WordWrap)
+                    .lens(Ctx::data().then(TrackLines::words))
+                    .expand_width()
+                    .center()
+                    .padding(Insets::uniform_xy(theme::grid(1.0), theme::grid(0.5)))
+                    .link()
+                    .rounded(theme::BUTTON_BORDER_RADIUS)
+                    .on_left_click(|ctx, _, c, _| {
+                        ctx.submit_command(
+                            cmd::SKIP_TO_POSITION
+                                .with(c.data.start_time_ms.parse::<u64>().unwrap()),
+                        )
+                    })
+            })
+        },
+        || Label::new("No lyrics found for this track").center(),
+    )
+    .lens(Ctx::make(AppState::common_ctx, AppState::lyrics).then(Ctx::in_promise()))
+    .on_command_async(
+        SHOW_LYRICS,
+        |t| WebApi::global().get_lyrics(t.item.id().to_base62()),
+        |_, data, _| data.lyrics.defer(()),
+        |_, data, r| data.lyrics.update(((), r.1)),
+    )
+}
+
+pub fn toggle_lyrics(data: &mut AppState, ctx: &mut EventCtx) {
+    if data.nav == Nav::Lyrics {
+        ctx.submit_command(cmd::NAVIGATE_BACK.with(1));
+    } else {
+        if let Some(now_playing) = &data.playback.now_playing {
+            ctx.submit_command(SHOW_LYRICS.with(now_playing.clone()));
+            ctx.submit_command(cmd::NAVIGATE.with(Nav::Lyrics));
+        }
+    }
+}
diff --git a/psst-gui/src/ui/mod.rs b/psst-gui/src/ui/mod.rs
index 0f7b9b6b..13cc3fd1 100644
--- a/psst-gui/src/ui/mod.rs
+++ b/psst-gui/src/ui/mod.rs
@@ -27,6 +27,7 @@ pub mod artist;
 pub mod episode;
 pub mod find;
 pub mod home;
+pub mod lyrics;
 pub mod library;
 pub mod menu;
 pub mod playable;
@@ -217,6 +218,9 @@ fn route_widget() -> impl Widget<AppState> {
             Route::Home => Scroll::new(home::home_widget().padding(theme::grid(1.0)))
                 .vertical()
                 .boxed(),
+            Route::Lyrics => Scroll::new(lyrics::lyrics_widget().padding(theme::grid(1.0)))
+                .vertical()
+                .boxed(),
             Route::SavedTracks => Flex::column()
                 .with_child(
                     find::finder_widget(cmd::FIND_IN_SAVED_TRACKS, "Find in Saved Tracks...")
@@ -471,6 +475,7 @@ fn route_icon_widget() -> impl Widget<Nav> {
             let icon = |icon: &SvgIcon| icon.scale(theme::ICON_SIZE_MEDIUM);
             match &nav {
                 Nav::Home => Empty.boxed(),
+                Nav::Lyrics => Empty.boxed(),
                 Nav::SavedTracks => Empty.boxed(),
                 Nav::SavedAlbums => Empty.boxed(),
                 Nav::SavedShows => Empty.boxed(),
diff --git a/psst-gui/src/ui/playback.rs b/psst-gui/src/ui/playback.rs
index e3558a06..2017331a 100644
--- a/psst-gui/src/ui/playback.rs
+++ b/psst-gui/src/ui/playback.rs
@@ -10,7 +10,7 @@ use druid::{
 use itertools::Itertools;
 
 use crate::{
-    cmd::{self, ADD_TO_QUEUE},
+    cmd::{self, ADD_TO_QUEUE, TOGGLE_LYRICS},
     controller::PlaybackController,
     data::{
         AppState, AudioAnalysis, Episode, NowPlaying, Playable, PlayableMatcher, Playback,
@@ -186,20 +186,29 @@ fn playback_origin_icon(origin: &PlaybackOrigin) -> &'static SvgIcon {
 fn player_widget() -> impl Widget<Playback> {
     Flex::row()
         .with_child(
-            small_button_widget(&icons::SKIP_BACK)
-                .on_left_click(|ctx, _, _, _| ctx.submit_command(cmd::PLAY_PREVIOUS)),
+            small_button_widget(&icons::SKIP_BACK).on_left_click(|ctx, _, _, _| {
+                ctx.submit_command(cmd::PLAY_PREVIOUS);
+            }),
         )
         .with_default_spacer()
         .with_child(player_play_pause_widget())
         .with_default_spacer()
         .with_child(
-            small_button_widget(&icons::SKIP_FORWARD)
-                .on_left_click(|ctx, _, _, _| ctx.submit_command(cmd::PLAY_NEXT)),
+            small_button_widget(&icons::SKIP_FORWARD).on_left_click(|ctx, _, _, _| {
+                ctx.submit_command(cmd::PLAY_NEXT);
+            }),
         )
         .with_default_spacer()
         .with_child(queue_behavior_widget())
         .with_default_spacer()
         .with_child(Maybe::or_empty(durations_widget).lens(Playback::now_playing))
+        .with_child(
+            small_button_widget(&icons::MUSIC_NOTE)
+                .align_right()
+                .on_left_click(|ctx, _, _, _| {
+                    ctx.submit_command(TOGGLE_LYRICS);
+                }),
+        )
         .padding(theme::grid(2.0))
 }
 
diff --git a/psst-gui/src/webapi/client.rs b/psst-gui/src/webapi/client.rs
index 61c65276..9e75e1d6 100644
--- a/psst-gui/src/webapi/client.rs
+++ b/psst-gui/src/webapi/client.rs
@@ -30,7 +30,8 @@ use crate::{
     data::{
         self, Album, AlbumType, Artist, ArtistAlbums, ArtistLink, AudioAnalysis, Cached, Episode,
         EpisodeId, EpisodeLink, MixedView, Nav, Page, Playlist, PublicUser, Range, Recommendations,
-        RecommendationsRequest, SearchResults, SearchTopic, Show, SpotifyUrl, Track, UserProfile,
+        RecommendationsRequest, SearchResults, SearchTopic, Show, SpotifyUrl, Track, TrackLines,
+        UserProfile,
     },
     error::Error,
 };
@@ -821,6 +822,35 @@ impl WebApi {
         let result = self.load(request)?;
         Ok(result)
     }
+
+    pub fn get_lyrics(&self, track_id: String) -> Result<Vector<TrackLines>, Error> {
+        #[derive(Default, Debug, Clone, PartialEq, Deserialize, Data)]
+        #[serde(rename_all = "camelCase")]
+        pub struct Root {
+            pub lyrics: Lyrics,
+        }
+
+        #[derive(Default, Debug, Clone, PartialEq, Deserialize, Data)]
+        #[serde(rename_all = "camelCase")]
+        pub struct Lyrics {
+            pub lines: Vector<TrackLines>,
+            pub provider: String,
+            pub provider_lyrics_id: String,
+        }
+
+        let token = self.access_token()?;
+        let request = self
+            .agent
+            .request("GET", &format!("https://spclient.wg.spotify.com/color-lyrics/v2/track/{}/image/https%3A%2F%2Fi.scdn.co%2Fimage%2F{}", track_id, track_id.clone().split_off(3)))
+            .query("format", "json")
+            .query("vocalRemoval", "false")
+            .query("market", "from_token")
+            .set("app-platform", "WebPlayer")
+            .set("Authorization", &format!("Bearer {}", &token));
+
+        let lyrics: Cached<Root> = self.load_cached(request.clone(), "TrackLines", &track_id)?;
+        Ok(lyrics.data.lyrics.lines)
+    }
 }
 
 /// Library endpoints.
diff --git a/psst-gui/src/webapi/local.rs b/psst-gui/src/webapi/local.rs
index 7b2e22ed..6dcd711a 100644
--- a/psst-gui/src/webapi/local.rs
+++ b/psst-gui/src/webapi/local.rs
@@ -172,6 +172,7 @@ impl LocalTrackManager {
                     is_playable: Some(false),
                     popularity: local_track.popularity,
                     track_pos: 0,
+                    lyrics: None,
                 }));
             }
         }
diff --git a/psst-gui/src/widget/icons.rs b/psst-gui/src/widget/icons.rs
index 23956f61..cc8d9eb5 100644
--- a/psst-gui/src/widget/icons.rs
+++ b/psst-gui/src/widget/icons.rs
@@ -94,6 +94,13 @@ pub static PLAY_LOOP_ALL: SvgIcon = SvgIcon {
     op: PaintOp::Fill,
 };
 
+// SFsymbols - music.note
+pub static MUSIC_NOTE: SvgIcon = SvgIcon {
+    svg_path: "M 41.83984375,16.7578125 L 41.83984375,9.302734375 C 41.83984375,8.099609375 40.89453125,7.3046875 39.712890625,7.5625 L 28.390625,9.990234375 C 27.015625,10.291015625 26.328125,10.978515625 26.328125,12.1171875 L 26.478515625,34.9765625 C 26.478515625,36.05078125 25.94140625,36.759765625 24.99609375,36.953125 L 21.623046875,37.662109375 C 17.43359375,38.54296875 15.478515625,40.6484375 15.478515625,43.806640625 C 15.478515625,46.986328125 17.90625,49.19921875 21.365234375,49.19921875 C 24.458984375,49.19921875 29.03515625,46.96484375 29.03515625,40.86328125 L 29.03515625,22.193359375 C 29.03515625,21.033203125 29.271484375,20.796875 30.32421875,20.5390625 L 40.59375,18.283203125 C 41.3671875,18.1328125 41.83984375,17.53125 41.83984375,16.7578125 Z",
+    svg_size: Size::new(52.0, 54.0),
+    op: PaintOp::Fill,
+};
+
 // SF Pro Regular - exclamationmark.circle
 pub static ERROR: SvgIcon = SvgIcon {
     svg_path: "M13.9912 22.7422C18.9746 22.7422 23.0879 18.6289 23.0879 13.6543C23.0879 8.67969 18.9658 4.56641 13.9824 4.56641C9.00781 4.56641 4.90332 8.67969 4.90332 13.6543C4.90332 18.6289 9.0166 22.7422 13.9912 22.7422ZM13.9912 20.9316C9.95703 20.9316 6.73145 17.6885 6.73145 13.6543C6.73145 9.62012 9.95703 6.38574 13.9824 6.38574C18.0166 6.38574 21.2598 9.62012 21.2686 13.6543C21.2773 17.6885 18.0254 20.9316 13.9912 20.9316ZM13.9824 15.1133C14.4658 15.1133 14.7471 14.8408 14.7559 14.3311L14.8877 10.1035C14.9053 9.58496 14.5186 9.20703 13.9736 9.20703C13.4287 9.20703 13.0508 9.57617 13.0684 10.0947L13.1914 14.3311C13.209 14.832 13.4902 15.1133 13.9824 15.1133ZM13.9824 18.0312C14.5537 18.0312 15.0195 17.6182 15.0195 17.0557C15.0195 16.502 14.5625 16.0889 13.9824 16.0889C13.4111 16.0889 12.9453 16.502 12.9453 17.0557C12.9453 17.6094 13.4199 18.0312 13.9824 18.0312Z",