From 806a5208a83ef201ece4beb5225b6d2525efc6ef Mon Sep 17 00:00:00 2001
From: xiaoxuan010 <2592053474@qq.com>
Date: Wed, 13 Nov 2024 22:38:39 +0800
Subject: [PATCH] Fix #72: Refactor thumbnail label update methods

---
 src/thumbnail-utils/thumbnailManagement.ts |  6 +++---
 src/thumbnail-utils/thumbnails.ts          | 19 +++++++++++++++----
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/thumbnail-utils/thumbnailManagement.ts b/src/thumbnail-utils/thumbnailManagement.ts
index 757b0561..39280907 100644
--- 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,7 +83,7 @@ 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;
                     }
                 }
@@ -91,7 +91,7 @@ export function newThumbnails() {
             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
index de2d3322..507131df 100644
--- 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 {