Move get portVideo to content

hanydd · Dec 10, 2024 · 5453507 · 5453507
1 parent a32963a
commit 5453507
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 26 deletions.
diff --git a/src/components/DescriptionPortPillComponent.tsx b/src/components/DescriptionPortPillComponent.tsx
@@ -105,6 +105,14 @@ export class DescriptionPortPillComponent extends React.Component<DescriptionPor
         );
     }
 
+    setPortVideoData(portVideo: PortVideo): void {
+        if (portVideo) {
+            this.setState({ ytbVideoID: portVideo.ytbID, previewYtbID: portVideo.ytbID, loading: false });
+        } else {
+            this.setState({ ytbVideoID: null, previewYtbID: null, loading: false });
+        }
+    }
+
     toggleInput(): void {
         this.setState({ show: !this.state.show });
     }

diff --git a/src/content.ts b/src/content.ts
@@ -11,6 +11,7 @@ import { setMessageNotice, showMessage } from "./render/MessageNotice";
 import { PlayerButton } from "./render/PlayerButton";
 import SkipNotice from "./render/SkipNotice";
 import SubmissionNotice from "./render/SubmissionNotice";
+import { getPortVideoByHash } from "./requests/portVideo";
 import { asyncRequestToServer } from "./requests/requests";
 import { getSegmentsByHash } from "./requests/segments";
 import { getVideoLabel } from "./requests/videoLabels";
@@ -1236,13 +1237,19 @@ function setupCategoryPill() {
 
 function setupDescriptionPill() {
     if (!descriptionPill) {
-        descriptionPill = new DescriptionPortPill(updatePortvideo, sponsorsLookup);
+        descriptionPill = new DescriptionPortPill(getPortVideo, sponsorsLookup);
     }
     descriptionPill.setupDecription(getVideoID());
 }
 
-function updatePortvideo(newPortVideo: PortVideo) {
+async function getPortVideo(videoId: VideoID, bypassCache = false) {
+    const newPortVideo = await getPortVideoByHash(videoId, { bypassCache });
+    if (newPortVideo.UUID === portVideo?.UUID) return;
     portVideo = newPortVideo;
+
+    // notify description pill
+    waitFor(() => descriptionPill).then(() => descriptionPill.setPortVideoData(portVideo));
+
     // notify popup of port video changes
     chrome.runtime.sendMessage({
         message: "infoUpdated",

diff --git a/src/render/DesciptionPortPill.tsx b/src/render/DesciptionPortPill.tsx
@@ -4,7 +4,7 @@ import { DescriptionPortPillComponent } from "../components/DescriptionPortPillC
 import YouTubeLogoButton from "../components/YouTubeLogoButton";
 import Config from "../config";
 import { getPageLoaded } from "../content";
-import { getPortVideoByHash, updatePortedSegments } from "../requests/portVideo";
+import { updatePortedSegments } from "../requests/portVideo";
 import { asyncRequestToServer } from "../requests/requests";
 import { PortVideo, VideoID } from "../types";
 import { waitFor } from "../utils/";
@@ -20,16 +20,16 @@ export class DescriptionPortPill {
     ytbID: VideoID;
     portUUID: string;
     hasDescription: boolean;
-    updatePortvideo: (newPortVideo: PortVideo) => void;
+    getPortVideo: (videoId: VideoID, bypassCache?: boolean) => void;
     sponsorsLookup: (keepOldSubmissions: boolean, ignoreServerCache: boolean, forceUpdatePreviewBar: boolean) => void;
 
     inputContainer: HTMLElement;
     buttonContainer: HTMLElement;
     ref: React.RefObject<DescriptionPortPillComponent>;
     root: Root;
 
-    constructor(updatePortvideo: (newPortVideo: PortVideo) => void, sponsorsLookup: () => void) {
-        this.updatePortvideo = updatePortvideo;
+    constructor(getPortVideo: (videoId: VideoID, bypassCache?: boolean) => void, sponsorsLookup: () => void) {
+        this.getPortVideo = getPortVideo;
         this.sponsorsLookup = sponsorsLookup;
     }
 
@@ -45,7 +45,7 @@ export class DescriptionPortPill {
         this.cleanup();
 
         // make request to get the port video first, while waiting for the page to load
-        await this.getPortVideo(videoId);
+        this.getPortVideo(videoId);
 
         this.hasDescription = true;
         const referenceNode = (await waitForElement(".basic-desc-info")) as HTMLElement;
@@ -76,6 +76,13 @@ export class DescriptionPortPill {
         this.attachToPage(referenceNode);
     }
 
+    setPortVideoData(portVideo: PortVideo) {
+        this.bvID = portVideo.bvID;
+        this.ytbID = portVideo.ytbID;
+        this.portUUID = portVideo.UUID;
+        if (this?.ref?.current) this.ref.current.setPortVideoData(portVideo);
+    }
+
     private attachToPage(referenceNode: HTMLElement) {
         this.attachInputToPage(referenceNode);
         this.attachButtonToPage();
@@ -152,19 +159,6 @@ export class DescriptionPortPill {
         this.portUUID = null;
     }
 
-    private async getPortVideo(videoId: VideoID, bypassCache = false) {
-        const portVideo = await getPortVideoByHash(videoId, { bypassCache });
-        if (portVideo) {
-            this.ytbID = portVideo.ytbID;
-            this.portUUID = portVideo.UUID;
-            this.updatePortvideo(portVideo);
-        } else {
-            this.ytbID = null;
-            this.portUUID = null;
-            this.updatePortvideo(null);
-        }
-    }
-
     private async submitPortVideo(ytbID: VideoID): Promise<PortVideo> {
         const response = await asyncRequestToServer("POST", "/api/portVideo", {
             bvID: getVideoID(),

diff --git a/src/requests/portVideo.ts b/src/requests/portVideo.ts
@@ -31,12 +31,10 @@ export async function getPortVideo(bvID: VideoID, options: RequestOptions = {}):
 }
 
 export async function getPortVideoByHash(bvID: VideoID, options: RequestOptions = {}): Promise<PortVideoRecord> {
-    const hashedBvID = await getHash(bvID, 1);
-    const response = await asyncRequestToServer(
-        "GET",
-        `/api/portVideo/${hashedBvID.slice(0, 3)}`,
-        options?.bypassCache
-    ).catch((e) => e);
+    const hashedPrefix = (await getHash(bvID, 1)).slice(0, 3);
+    const response = await asyncRequestToServer("GET", `/api/portVideo/${hashedPrefix}`, options?.bypassCache).catch(
+        (e) => e
+    );
     if (response && response?.ok) {
         const responseData = JSON.parse(response?.responseText) as PortVideoRecord[];
         const portVideo = responseData.filter((portVideo) => portVideo.bvID == bvID);