Add thumbnail lisenter for feed popup

hanydd · Feb 24, 2024 · f838c1e · f838c1e
1 parent c18b81c
commit f838c1e
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 13 deletions.
diff --git a/maze-utils b/maze-utils
diff --git a/public/content.css b/public/content.css
@@ -799,7 +799,7 @@ input::-webkit-inner-spin-button {
 }
 
 /* full video labels on thumbnails */
-.sponsorThumbnailLabel {
+#sponsorThumbnailLabel {
 	display: none;
 	position: absolute;
 	top: 0;
@@ -814,28 +814,28 @@ input::-webkit-inner-spin-button {
 	font-size: 10px;
 }
 
-.sponsorThumbnailLabel.sponsorThumbnailLabelVisible {
+#sponsorThumbnailLabel.sponsorThumbnailLabelVisible {
 	display: flex;
 }
 
-.sponsorThumbnailLabel svg {
+#sponsorThumbnailLabel svg {
 	height: 2em;
 	fill: var(--category-text-color, #fff);
 }
 
-.sponsorThumbnailLabel span {
+#sponsorThumbnailLabel span {
 	display: none;
 	padding-left: 0.25em;
 	font-size: 1.5em;
 	color: var(--category-text-color, #fff);
 }
 
-.sponsorThumbnailLabel:hover {
+#sponsorThumbnailLabel:hover {
 	border-radius: 0.25em;
 	opacity: 1;
 }
 
-.sponsorThumbnailLabel:hover span {
+#sponsorThumbnailLabel:hover span {
 	display: inline;
 }
 

diff --git a/src/utils/thumbnails.ts b/src/utils/thumbnails.ts
@@ -13,13 +13,18 @@ export async function labelThumbnail(thumbnail: HTMLImageElement): Promise<HTMLE
         return null;
     }
 
-    const link = thumbnail.querySelector("a") as HTMLAnchorElement;
-    if (!link || !link.href) return null; // no link found
-    const videoID = parseBilibiliVideoIDFromURL(link.href)?.videoID;
-    if (!videoID) {
+    // find all links in the thumbnail, reduce to only one video ID
+    const links = Array.from(thumbnail.querySelectorAll("a[href]")) as Array<HTMLAnchorElement>;
+    const videoIDs = new Set(links.filter((link) => link && link.href)
+        .map((link) => parseBilibiliVideoIDFromURL(link.href)?.videoID)
+        .filter((id) => id));
+    if (videoIDs.size !== 1) {
+        // none or multiple video IDs found
         hideThumbnailLabel(thumbnail);
         return null;
     }
+    const [videoID] = videoIDs;
+    console.log("videoID", videoID)
 
     const category = await getVideoLabel(videoID);
     if (!category) {
@@ -58,7 +63,7 @@ function createOrGetThumbnail(thumbnail: HTMLImageElement): { overlay: HTMLEleme
     }
 
     const overlay = document.createElement("div") as HTMLElement;
-    overlay.classList.add("sponsorThumbnailLabel");
+    overlay.id = "sponsorThumbnailLabel";
     // Disable hover autoplay
     overlay.addEventListener("pointerenter", (e) => {
         e.stopPropagation();
@@ -73,7 +78,8 @@ function createOrGetThumbnail(thumbnail: HTMLImageElement): { overlay: HTMLEleme
     const text = document.createElement("span");
     overlay.appendChild(icon);
     overlay.appendChild(text);
-    const labelAnchor = thumbnail.querySelector("img") ?? thumbnail.lastChild;
+    // try append after image element, exclude avatar in feed popup
+    const labelAnchor = thumbnail.querySelector("picture img:not(.bili-avatar-img)") ?? thumbnail.lastChild;
     labelAnchor.after(overlay);
 
     return {