ref: lyrics button

assets/style/volSliderSize.css

@@ -1,4 +1,4 @@
-/* {WIDTH} will be replaced with the width number set in the config menu */
+/* {WIDTH} (in comments) will be replaced with the width number set in the config menu */
 #bytm-vol-slider-cont tp-yt-paper-slider#volume-slider {
   --bytm-slider-width: /*{WIDTH}*/;
   width: var(--bytm-slider-width, 120px) !important;

src/features/layout.ts

@@ -485,7 +485,7 @@ export async function initThumbnailOverlay() {
   if(getFeatures().thumbnailOverlayBehavior === "never" && !toggleBtnShown)
     return;
 
-  // so the script doesn't wait until a /watch page is loaded
+  // so the script init doesn't keep waiting until a /watch page is loaded
   waitVideoElementReady().then(() => {
     const playerSelector = "ytmusic-player#player";
     const playerEl = document.querySelector<HTMLElement>(playerSelector);

src/features/lyrics.ts

@@ -27,23 +27,6 @@ async function addActualMediaCtrlLyricsBtn(likeContainer: HTMLElement) {
   if(!songTitleElem)
     return warn("Couldn't find song title element");
 
-  // run parallel without awaiting so the MutationObserver below can observe the title element in time
-  (async () => {
-    const gUrl = await getCurrentLyricsUrl();
-
-    const lyricsBtnElem = await createLyricsBtn(gUrl ?? undefined);
-    lyricsBtnElem.id = "betterytm-lyrics-button";
-
-    log("Inserted lyrics button into media controls bar");
-
-    const thumbToggleElem = document.querySelector<HTMLElement>("#bytm-thumbnail-overlay-toggle");
-
-    if(thumbToggleElem)
-      thumbToggleElem.insertAdjacentElement("afterend", lyricsBtnElem);
-    else
-      likeContainer.insertAdjacentElement("afterend", lyricsBtnElem);
-  })();
-
   currentSongTitle = songTitleElem.title;
 
   const spinnerIconUrl = await getResourceUrl("icon-spinner");
@@ -55,7 +38,7 @@ async function addActualMediaCtrlLyricsBtn(likeContainer: HTMLElement) {
       const newTitle = (mut.target as HTMLElement).title;
 
       if(newTitle !== currentSongTitle && newTitle.length > 0) {
-        const lyricsBtn = document.querySelector<HTMLAnchorElement>("#betterytm-lyrics-button");
+        const lyricsBtn = document.querySelector<HTMLAnchorElement>("#bytm-player-bar-lyrics-btn");
 
         if(!lyricsBtn)
           continue;
@@ -108,6 +91,23 @@ async function addActualMediaCtrlLyricsBtn(likeContainer: HTMLElement) {
   const obs = new MutationObserver(onMutation);
 
   obs.observe(songTitleElem, { attributes: true, attributeFilter: [ "title" ] });
+
+  const lyricsBtnElem = await createLyricsBtn(undefined);
+  lyricsBtnElem.id = "bytm-player-bar-lyrics-btn";
+
+  // run parallel so the element is inserted as soon as possible
+  getCurrentLyricsUrl().then(url => {
+    url && addGeniusUrlToLyricsBtn(lyricsBtnElem, url);
+  });
+
+  log("Inserted lyrics button into media controls bar");
+
+  const thumbToggleElem = document.querySelector<HTMLElement>("#bytm-thumbnail-overlay-toggle");
+
+  if(thumbToggleElem)
+    thumbToggleElem.insertAdjacentElement("afterend", lyricsBtnElem);
+  else
+    likeContainer.insertAdjacentElement("afterend", lyricsBtnElem);
 }
 
 //#region lyrics utils
@@ -374,6 +374,14 @@ export async function fetchLyricsUrls(artist: string, song: string): Promise<Omi
   }
 }
 
+/** Adds the genius URL to the passed lyrics button element if it was previously instantiated with an undefined URL */
+export async function addGeniusUrlToLyricsBtn(btnElem: HTMLAnchorElement, geniusUrl: string) {
+  btnElem.href = geniusUrl;
+  btnElem.ariaLabel = btnElem.title = t("open_lyrics");
+  btnElem.style.visibility = "visible";
+  btnElem.style.display = "inline-flex";
+}
+
 /** Creates the base lyrics button element */
 export async function createLyricsBtn(geniusUrl?: string, hideIfLoading = true) {
   const linkElem = document.createElement("a");

src/features/volume.ts

@@ -159,7 +159,7 @@ function setVolSliderSize() {
 
   addStyleFromResource(
     "css-vol_slider_size",
-    (css) => css.replace(/\/\*\{WIDTH\}\*\//m, `${size}px`),
+    (css) => css.replace(/\/\*\s*\{WIDTH\}\s*\*\//gm, `${size}px`),
   );
 }
 

src/utils/dom.ts

@@ -197,7 +197,10 @@ export function currentMediaType(): "video" | "song" {
   return getUnsafeWindow().getComputedStyle(songImgElem).display !== "none" ? "song" : "video";
 }
 
-/** Adds a global style element with the contents of the specified CSS resource */
+/**
+ * Adds a global style element with the contents fetched from the specified CSS resource.  
+ * The CSS can be transformed using the provided function before being added to the DOM.
+ */
 export async function addStyleFromResource(key: ResourceKey & `css-${string}`, transform: (css: string) => string = (c) => c) {
   const css = await fetchCss(key);
   if(css) {