feat: implement ripple for all circular buttons

src/features/layout.ts

@@ -5,7 +5,7 @@ import { addSelectorListener } from "../observers.js";
 import { error, getResourceUrl, log, warn, t, onInteraction, openInTab, getBestThumbnailUrl, getDomain, addStyle, currentMediaType, domLoaded, waitVideoElementReady, getVideoTime, fetchCss, addStyleFromResource, fetchVideoVotes, getWatchId, type ReturnYoutubeDislikesVotesObj } from "../utils/index.js";
 import { mode, scriptInfo } from "../constants.js";
 import { openCfgMenu } from "../menu/menu_old.js";
-import { createCircularBtn } from "../components/index.js";
+import { createCircularBtn, createRipple } from "../components/index.js";
 import type { ResourceKey } from "../types.js";
 import "./layout.css";
 
@@ -606,7 +606,7 @@ export async function initThumbnailOverlay() {
     
       // toggle button
       if(toggleBtnShown) {
-        const toggleBtnElem = document.createElement("a");
+        const toggleBtnElem = createRipple(document.createElement("a"), { speed: "slow" });
         toggleBtnElem.id = "bytm-thumbnail-overlay-toggle";
         toggleBtnElem.role = "button";
         toggleBtnElem.tabIndex = 0;

src/features/songLists.ts

@@ -8,6 +8,7 @@ import type { LyricsCacheEntry } from "../types.js";
 import { addSelectorListener } from "../observers.js";
 import { getFeatures } from "../config.js";
 import "./songLists.css";
+import { createRipple } from "src/components/ripple.js";
 
 /** Initializes the queue buttons */
 export async function initQueueButtons() {
@@ -265,8 +266,8 @@ async function addQueueButtons(
     deleteBtnElem.appendChild(imgElem);
   }
 
-  lyricsBtnElem && queueBtnsCont.appendChild(lyricsBtnElem);
-  deleteBtnElem && queueBtnsCont.appendChild(deleteBtnElem);
+  lyricsBtnElem && queueBtnsCont.appendChild(createRipple(lyricsBtnElem, { speed: "slow" }));
+  deleteBtnElem && queueBtnsCont.appendChild(createRipple(deleteBtnElem, { speed: "slow" }));
 
   queueItem.querySelector<HTMLElement>(containerParentSelector)?.appendChild(queueBtnsCont);
   queueItem.classList.add("bytm-has-queue-btns");

src/utils/dom.ts

@@ -110,9 +110,12 @@ function ytForceShowVideoTime() {
   return true;
 }
 
-/** Waits for the video element to be in its readyState 4 / canplay state and returns it - resolves immediately if the video is already ready */
+/**
+ * Waits for the video element to be in its readyState 4 / canplay state and returns it.  
+ * Resolves immediately if the video element is already ready.
+ */
 export function waitVideoElementReady(): Promise<HTMLVideoElement> {
-  return new Promise((res) => {
+  return new Promise(async (res) => {
     const waitForEl = () => addSelectorListener<HTMLVideoElement>("body", getVideoSelector(), {
       listener: async (vidElem) => {
         if(vidElem) {
@@ -124,11 +127,10 @@ export function waitVideoElementReady(): Promise<HTMLVideoElement> {
         }
       },
     });
-  
-    if(location.pathname.startsWith("/watch"))
-      waitForEl();
-    else
-      siteEvents.once("watchIdChanged", waitForEl);
+
+    if(!location.pathname.startsWith("/watch"))
+      await siteEvents.once("watchIdChanged");
+    waitForEl();
   });
 }
 
@@ -163,7 +165,7 @@ export function addStyle(css: string, ref?: string, transform: (css: string) =>
 
 /**
  * Checks if the currently playing media is a song or a video.  
- * This function should only be called after awaiting `waitVideoElementReady()`!
+ * This function should only be called after awaiting {@linkcode waitVideoElementReady}!
  */
 export function currentMediaType(): "video" | "song" {
   const songImgElem = document.querySelector("ytmusic-player #song-image");