From 4f94a5a8fee17ecdf50c7150865d2ab71fcf351a Mon Sep 17 00:00:00 2001
From: afterlifepro <vielle.dev@proton.me>
Date: Sat, 26 Jul 2025 21:06:48 +0100
Subject: [PATCH] Make now-playing show on .player focus instead of hover.

- .player now can be focused by tab index or clicking
- now-playing now delegates focus (tapping el focuses first focusable child + :focus === :focus-within but extends out shadowroot)

this will be used to show song metadata (artist, album, spotify links)
---
 src/components/playing/NowPlaying.astro | 86 +++++++++++++++----------
 1 file changed, 52 insertions(+), 34 deletions(-)

diff --git a/src/components/playing/NowPlaying.astro b/src/components/playing/NowPlaying.astro
index 7736e13..7f18d84 100644
--- a/src/components/playing/NowPlaying.astro
+++ b/src/components/playing/NowPlaying.astro
@@ -33,6 +33,7 @@ const track = await spotifyNowPlaying().catch((err) => {
 >
   <div
     class="player"
+    tabindex="0"
     style={`display: ${track instanceof SpotifyError ? "none" : "block"};` +
       new Array(5)
         .fill(0)
@@ -60,9 +61,47 @@ const track = await spotifyNowPlaying().catch((err) => {
     </div>
 
     <now-playing>
-      <template shadowrootmode="open">
-        <style></style>
-        <h1>Popup here</h1>
+      test
+
+      <template shadowrootmode="open" shadowrootdelegatesfocus>
+        <slot is:inline />
+
+        <input type="text" />
+
+        <style>
+          :host {
+            contain: layout;
+            position: absolute;
+            bottom: 105cqh;
+
+            width: 100cqw;
+            height: auto;
+
+            box-sizing: border-box;
+            /* gets overridden by the fukcin * selector. for some reason */
+            padding: calc((20 / 3) * 1cqw) !important;
+
+            border-image: var(--box-tlbr-png) 10 fill / calc((20 / 3) * 1cqw)
+              round;
+
+            &::after {
+              content: "";
+
+              position: absolute;
+              bottom: calc((-20 / 3) * 1cqw);
+              left: 0;
+
+              /* width 100% catches :hover to stop it disapearing. also makes centering less magic numbery */
+              width: 100cqw;
+              height: calc((40 / 3) * 1cqw);
+
+              background-image: var(--popout-speech-png);
+              background-size: contain;
+              background-position: center;
+              background-repeat: no-repeat;
+            }
+          }
+        </style>
       </template>
     </now-playing>
   </div>
@@ -200,40 +239,19 @@ const track = await spotifyNowPlaying().catch((err) => {
         background-image: var(--mp3-playback-head-png);
       }
     }
+  }
 
-    &:hover now-playing,
-    & now-playing:hover {
-      display: block;
-    }
-
-    & now-playing {
-      display: none;
-      contain: layout style;
-      position: absolute;
-      bottom: 105cqh;
-
-      width: 100cqw;
-      height: auto;
-
-      border-image: var(--box-tlbr-png) 10 fill / calc((20 / 3) * 1cqw) round;
-
-      &::after {
-        content: "";
-
-        position: absolute;
-        bottom: calc((-20 / 3) * 1cqw);
-        left: 0;
+  now-playing {
+    display: none;
+  }
 
-        /* width 100% catches :hover to stop it disapearing. also makes centering less magic numbery */
-        width: 100cqw;
-        height: calc((40 / 3) * 1cqw);
+  .player:focus now-playing,
+  .player:focus-within now-playing {
+    display: block;
+  }
 
-        background-image: var(--popout-speech-png);
-        background-size: contain;
-        background-position: center;
-        background-repeat: no-repeat;
-      }
-    }
+  now-playing: focus {
+    color: red;
   }
 </style>
 
-- 
2.51.2