From 2bb9b3bdd74e535464a7fdd7cb6ce74e5c6d8ef5 Mon Sep 17 00:00:00 2001
From: Aidan Westphal <kylesteine1@gmail.com>
Date: Fri, 4 Oct 2024 23:19:07 +0000
Subject: [PATCH] Page Title Updates on Playing Song

---
 src/app.rs     |  3 ++-
 src/playbar.rs | 17 +++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/app.rs b/src/app.rs
index 67a6c7a..ed9fd1b 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -1,4 +1,5 @@
 use crate::playbar::PlayBar;
+use crate::playbar::CustomTitle;
 use crate::playstatus::PlayStatus;
 use crate::queue::Queue;
 use leptos::*;
@@ -24,7 +25,7 @@ pub fn App() -> impl IntoView {
         <Stylesheet id="leptos" href="/pkg/libretunes.css"/>
 
         // sets the document title
-        <Title text="LibreTunes"/>
+        <CustomTitle play_status=play_status/>
 
         // content for this welcome page
         <Router fallback=|| {
diff --git a/src/playbar.rs b/src/playbar.rs
index f0055e4..69ac98f 100644
--- a/src/playbar.rs
+++ b/src/playbar.rs
@@ -5,6 +5,7 @@ use crate::api::songs;
 use leptos::ev::MouseEvent;
 use leptos::html::{Audio, Div};
 use leptos::leptos_dom::*;
+use leptos_meta::Title;
 use leptos::*;
 use leptos_icons::*;
 use leptos_use::{utils::Pausable, use_interval_fn};
@@ -460,6 +461,22 @@ fn QueueToggle(status: RwSignal<PlayStatus>) -> impl IntoView {
     }
 }
 
+/// Renders the title of the page based on the currently playing song
+#[component]
+pub fn CustomTitle(play_status: RwSignal<PlayStatus>) -> impl IntoView {
+    let title = create_memo(move |_| {
+        play_status.with(|play_status| {
+            match play_status.queue.front() {
+                Some(song_data) => song_data.title.clone(),
+                None => "LibreTunes".to_owned(),
+            }
+        })
+    });
+    view! {
+        <Title text=title />
+    }
+}
+
 /// The main play bar component, containing the progress bar, media info, play controls, and play duration
 #[component]
 pub fn PlayBar(status: RwSignal<PlayStatus>) -> impl IntoView {