Fix #72: Refactor thumbnail label update methods

hanydd · Nov 13, 2024 · 806a520 · 806a520
1 parent 5125625
commit 806a520
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/src/thumbnail-utils/thumbnailManagement.ts b/src/thumbnail-utils/thumbnailManagement.ts
@@ -3,7 +3,7 @@ import { waitFor } from "../utils/";
 import { addCleanupListener } from "../utils/cleanup";
 import { getPageType } from "../utils/video";
 import { getThumbnailContainerElements, getThumbnailLink, getThumbnailSelectors } from "./thumbnail-selectors";
-import { insertSBIconDefinition, labelThumbnails } from "./thumbnails";
+import { insertSBIconDefinition, labelThumbnail, labelThumbnails } from "./thumbnails";
 
 export type ThumbnailListener = (newThumbnails: HTMLElement[]) => void;
 
@@ -83,15 +83,15 @@ export function newThumbnails() {
             const observer = new MutationObserver((mutations) => {
                 for (const mutation of mutations) {
                     if (mutation.type === "attributes" && mutation.attributeName === "href") {
-                        labelThumbnails([thumbnail]);
+                        labelThumbnail(thumbnail as HTMLImageElement, mutation.oldValue);
                         break;
                     }
                 }
             });
             handledThumbnailsObserverMap.set(thumbnail, observer);
 
             const link = getThumbnailLink(thumbnail);
-            if (link) observer.observe(link, { attributes: true });
+            if (link) observer.observe(link, { attributes: true, attributeOldValue: true, attributeFilter: ["href"] });
         }
     }
 

diff --git a/src/thumbnail-utils/thumbnails.ts b/src/thumbnail-utils/thumbnails.ts
@@ -7,7 +7,10 @@ export async function labelThumbnails(thumbnails: HTMLElement[]): Promise<void>
     await Promise.all(thumbnails.map((t) => labelThumbnail(t as HTMLImageElement)));
 }
 
-export async function labelThumbnail(thumbnail: HTMLImageElement): Promise<HTMLElement | null> {
+export async function labelThumbnail(
+    thumbnail: HTMLImageElement,
+    thumbnailOldHref?: string
+): Promise<HTMLElement | null> {
     if (!Config.config?.fullVideoSegments || !Config.config?.fullVideoLabelsOnThumbnails) {
         hideThumbnailLabel(thumbnail);
         return null;
@@ -28,14 +31,22 @@ export async function labelThumbnail(thumbnail: HTMLImageElement): Promise<HTMLE
     }
     const [videoID] = videoIDs;
 
+    // 获取或创建缩略图标签
+    const { overlay, text } = await createOrGetThumbnail(thumbnail);
+
+    if (thumbnailOldHref) {
+        const oldVideoID = getBvIDFromURL(thumbnailOldHref);
+        if (oldVideoID && oldVideoID == videoID) {
+            return overlay;
+        }
+    }
+
     const category = await getVideoLabel(videoID);
     if (!category) {
         hideThumbnailLabel(thumbnail);
         return null;
     }
 
-    const { overlay, text } = await createOrGetThumbnail(thumbnail);
-
     overlay.style.setProperty(
         "--category-color",
         `var(--sb-category-preview-${category}, var(--sb-category-${category}))`
@@ -51,7 +62,7 @@ export async function labelThumbnail(thumbnail: HTMLImageElement): Promise<HTMLE
 }
 
 function getOldThumbnailLabel(thumbnail: HTMLImageElement): HTMLElement | null {
-    return thumbnail.querySelector(".sponsorThumbnailLabel") as HTMLElement | null;
+    return thumbnail.querySelector("#sponsorThumbnailLabel") as HTMLElement | null;
 }
 
 function hideThumbnailLabel(thumbnail: HTMLImageElement): void {