From f838c1eb0f6025ce4fb3a849bb0596b0a5f28cdf Mon Sep 17 00:00:00 2001
From: HanYaodong <hanyaodongcn@gmail.com>
Date: Fri, 23 Feb 2024 00:35:26 +0800
Subject: [PATCH] Add thumbnail lisenter for feed popup

---
 maze-utils              |  2 +-
 public/content.css      | 12 ++++++------
 src/utils/thumbnails.ts | 18 ++++++++++++------
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/maze-utils b/maze-utils
index 5ddcc477..fdd17002 160000
--- a/maze-utils
+++ b/maze-utils
@@ -1 +1 @@
-Subproject commit 5ddcc4774f5592b2a5ecc2fbf94300f6c3ad9613
+Subproject commit fdd17002f9792d074989bbfa1687f000c48f24ce
diff --git a/public/content.css b/public/content.css
index 0906b98a..197dc993 100644
--- 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
index e54dee7c..c6e2f9d0 100644
--- 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 {