From fd1cbc0e60c5c58e800ac05cef910de9a8ae8d59 Mon Sep 17 00:00:00 2001
From: Sli <antoine@bartuccio.fr>
Date: Wed, 28 Jan 2026 14:56:56 +0100
Subject: [PATCH] Add music title to html title and as a tooltip for audio
 player

---
 www/index.html | 49 +++++++++++++++++++++++++------------------------
 1 file changed, 25 insertions(+), 24 deletions(-)
diff --git a/www/index.html b/www/index.html
index 4fb3870..4ba34aa 100644
--- a/www/index.html
+++ b/www/index.html
@@ -1,9 +1,31 @@
 <!DOCTYPE html>
-<html>
+<html
+  x-data="{
+    metadata: { status: 'down' },
+    isTitleOverflow: false
+  }"
+  x-init="setInterval(
+    async () => {
+      metadata = await getMetadata()
+    },
+    2000,
+  )
+  $watch('metadata.title', async (value, oldValue) => {
+    if (value == oldValue){
+      return
+    }
+    // First, reset overflow for proper recalculation
+    isTitleOverflow = false
+    await $nextTick()
+    // Now check for overflow
+    isTitleOverflow = $refs.scrollTitle.offsetWidth < $refs.scrollTitle.scrollWidth
+  })
+  "
+>
   <head>
     <script defer src="/static/alpine.min.js"></script>
     <meta charset="utf-8">
-    <title>Radio bullshit, la radio du paradis !</title>
+    <title x-text="'Radio bullshit, la radio du paradis ! Now playing: ' + metadata.title"></title>
     <link rel="stylesheet" type="text/css" href="/static/style.css">
     <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
     <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
@@ -11,27 +33,6 @@
   <body>
     <div
       class="radio-container"
-      x-data="{
-        metadata: { status: 'down' },
-        isTitleOverflow: false
-      }"
-      x-init="setInterval(
-        async () => {
-          metadata = await getMetadata()
-        },
-        2000,
-      )
-      $watch('metadata.title', async (value, oldValue) => {
-        if (value == oldValue){
-          return
-        }
-        // First, reset overflow for proper recalculation
-        isTitleOverflow = false
-        await $nextTick()
-        // Now check for overflow
-        isTitleOverflow = $refs.scrollTitle.offsetWidth < $refs.scrollTitle.scrollWidth
-      })
-      "
     >
       <div
         class="track-title"
@@ -44,7 +45,7 @@
           }"
         ></p>
       </div>
-      <audio controls autoplay>
+      <audio :title="metadata.title" controls autoplay>
         <source src="/radio-bullshit" type="audio/mpeg" preload="none" >
         Ton navigateur ne supporte pas l'audio HTML5. Pas de Zambla pour toi !
       </audio>
