pass port video to popup

src/components/DescriptionPortPillComponent.tsx

@@ -1,8 +1,7 @@
 import { ConfigProvider, Spin } from "antd";
 import * as React from "react";
-import { PortVideo } from "../render/DesciptionPortPill";
 import { showMessage } from "../render/MessageNotice";
-import { VideoID } from "../types";
+import { PortVideo, VideoID } from "../types";
 import { AnimationUtils } from "../utils/animationUtils";
 import { parseYoutubeID } from "../utils/parseVideoID";
 

src/content.ts

@@ -6,7 +6,7 @@ import { SkipButtonControlBar } from "./js-components/skipButtonControlBar";
 import { Message, MessageResponse, VoteResponse } from "./messageTypes";
 import { CategoryPill } from "./render/CategoryPill";
 import { ChapterVote } from "./render/ChapterVote";
-import { DescriptionPortPill, PortVideo } from "./render/DesciptionPortPill";
+import { DescriptionPortPill } from "./render/DesciptionPortPill";
 import { setMessageNotice, showMessage } from "./render/MessageNotice";
 import { PlayerButton } from "./render/PlayerButton";
 import SkipNotice from "./render/SkipNotice";
@@ -23,6 +23,7 @@ import {
     ChannelIDStatus,
     ContentContainer,
     PageType,
+    PortVideo,
     ScheduledTime,
     SegmentUUID,
     SkipToTimeParams,
@@ -248,7 +249,6 @@ function messageListener(
             break;
         case "isInfoFound":
             //send the sponsor times along with if it's found
-            console.log(portVideo);
             sendResponse({
                 found: sponsorDataFound,
                 status: lastResponseStatus,
@@ -1243,6 +1243,15 @@ function setupDescriptionPill() {
 
 function updatePortvideo(newPortVideo: PortVideo) {
     portVideo = newPortVideo;
+    // notify popup of port video changes
+    chrome.runtime.sendMessage({
+        message: "infoUpdated",
+        found: sponsorDataFound,
+        status: lastResponseStatus,
+        sponsorTimes: sponsorTimes,
+        portVideo: portVideo,
+        time: getVideo()?.currentTime ?? 0,
+    });
 }
 
 async function sponsorsLookup(keepOldSubmissions = true, ignoreServerCache = false, forceUpdatePreviewBar = false) {
@@ -1357,6 +1366,7 @@ async function sponsorsLookup(keepOldSubmissions = true, ignoreServerCache = fal
         found: sponsorDataFound,
         status: lastResponseStatus,
         sponsorTimes: sponsorTimes,
+        portVideo: portVideo,
         time: getVideo()?.currentTime ?? 0,
     });
 

src/messageTypes.ts

@@ -2,8 +2,7 @@
 // Message and Response Types
 //
 
-import { PortVideo } from "./render/DesciptionPortPill";
-import { SegmentUUID, SponsorHideType, SponsorTime } from "./types";
+import { PortVideo, SegmentUUID, SponsorHideType, SponsorTime } from "./types";
 
 interface BaseMessage {
     from?: string;

src/popup/VideoInfo/VideoInfo.tsx

@@ -4,7 +4,7 @@ import { MessageInstance } from "antd/es/message/interface";
 import * as React from "react";
 import Config from "../../config";
 import { Message, RefreshSegmentsResponse } from "../../messageTypes";
-import { SponsorTime } from "../../types";
+import { PortVideo, SponsorTime } from "../../types";
 import { exportTimes } from "../../utils/exporter";
 import PopupSegment from "./PopupSegment";
 
@@ -25,6 +25,7 @@ interface VideoInfoState {
     importInputOpen: boolean;
 
     downloadedTimes: SponsorTime[];
+    portVideo: PortVideo;
     currentTime: number;
 }
 
@@ -38,6 +39,7 @@ class VideoInfo extends React.Component<VideoInfoProps, VideoInfoState> {
             importInputOpen: false,
 
             downloadedTimes: [],
+            portVideo: null,
             currentTime: 0,
         };
     }
@@ -133,13 +135,13 @@ class VideoInfo extends React.Component<VideoInfoProps, VideoInfoState> {
     }
 
     //display the video times from the array at the top, in a different section
-    displayDownloadedSponsorTimes(sponsorTimes: SponsorTime[], time: number) {
+    displayDownloadedSponsorTimes(sponsorTimes: SponsorTime[], portVideo: PortVideo, time: number) {
         // Sort list by start time
         const downloadedTimes = sponsorTimes
             .sort((a, b) => a.segment[1] - b.segment[1])
             .sort((a, b) => a.segment[0] - b.segment[0]);
 
-        this.setState({ downloadedTimes: downloadedTimes, currentTime: time });
+        this.setState({ downloadedTimes: downloadedTimes, portVideo: portVideo, currentTime: time });
     }
 
     private SegmentList(): React.ReactNode[] {
@@ -159,14 +161,12 @@ class VideoInfo extends React.Component<VideoInfoProps, VideoInfoState> {
     render() {
         return (
             <div style={Config.config.cleanPopup ? { marginTop: 20 } : {}}>
-                {/* <!-- Loading text --> */}
+                {/* Loading text */}
                 <p className="u-mZ grey-text">{this.computeIndicatorText()}</p>
-
                 <Button id="refreshSegmentsButton" shape="circle" type="text" onClick={this.refreshSegments.bind(this)}>
                     <ReloadOutlined spin={this.state.loading} style={{ fontSize: 16, padding: 1 }} />
                 </Button>
-
-                {/* <!-- Video Segments --> */}
+                {/* Video Segments */}
                 <div id="issueReporterContainer">
                     <div id="issueReporterTimeButtons">{this.SegmentList()}</div>
                     <div id="issueReporterImportExport" className={this.state.videoFound ? "" : "hidden"}>

src/popup/app.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import Config from "../config";
 import { StorageChangesObject } from "../config/config";
 import { IsChannelWhitelistedResponse, IsInfoFoundMessageResponse, Message, PopupMessage } from "../messageTypes";
-import { SponsorTime, VideoID } from "../types";
+import { PortVideo, SponsorTime, VideoID } from "../types";
 import { waitFor } from "../utils/index";
 import ControlMenu from "./ControlMenu";
 import PopupFooter from "./PopupFooter";
@@ -95,13 +95,7 @@ function app() {
     }
 
     function getSegmentsFromContentScript(updating: boolean): void {
-        messageHandler.query(
-            {
-                active: true,
-                currentWindow: true,
-            },
-            (tabs) => onTabs(tabs, updating)
-        );
+        messageHandler.query({ active: true, currentWindow: true }, (tabs) => onTabs(tabs, updating));
     }
 
     async function infoFound(request: IsInfoFoundMessageResponse) {
@@ -119,7 +113,7 @@ function app() {
         submitBoxRef.current?.showSubmitBox();
         controlMenuRef.current.setState({ hasVideo: true });
 
-        displayDownloadedSponsorTimes(request.sponsorTimes ?? [], request.time);
+        displayDownloadedSponsorTimes(request.sponsorTimes ?? [], request.portVideo ?? null, request.time);
         if (request.found) {
             videoInfoRef.current.displayVideoWithMessage();
         } else if (request.status == 404 || request.status == 200) {
@@ -142,8 +136,8 @@ function app() {
     }
 
     //display the video times from the array at the top, in a different section
-    function displayDownloadedSponsorTimes(sponsorTimes: SponsorTime[], time: number) {
-        videoInfoRef.current.displayDownloadedSponsorTimes(sponsorTimes, time);
+    function displayDownloadedSponsorTimes(sponsorTimes: SponsorTime[], portVideo: PortVideo, time: number) {
+        videoInfoRef.current.displayDownloadedSponsorTimes(sponsorTimes, portVideo, time);
     }
 
     /** this is not a Bilibili video page */
@@ -233,7 +227,7 @@ function app() {
                 // Clear segments list & start loading animation
                 // We'll get a ping once they're loaded
                 startLoadingAnimation();
-                displayDownloadedSponsorTimes([], 0);
+                displayDownloadedSponsorTimes([], null, 0);
                 break;
         }
     }

src/render/DesciptionPortPill.tsx

@@ -6,7 +6,7 @@ import Config from "../config";
 import { getPageLoaded } from "../content";
 import { getPortVideoByHash, updatePortedSegments } from "../requests/portVideo";
 import { asyncRequestToServer } from "../requests/requests";
-import { VideoID } from "../types";
+import { PortVideo, VideoID } from "../types";
 import { waitFor } from "../utils/";
 import { waitForElement } from "../utils/dom";
 import { getVideoDescriptionFromWindow } from "../utils/injectedScriptMessageUtils";
@@ -15,14 +15,6 @@ import { showMessage } from "./MessageNotice";
 
 const id = "bsbDescriptionContainer";
 
-export interface PortVideo {
-    bvID: VideoID;
-    ytbID: VideoID;
-    UUID: string;
-    votes: number;
-    locked: boolean;
-}
-
 export class DescriptionPortPill {
     bvID: VideoID;
     ytbID: VideoID;

src/types.ts

@@ -121,6 +121,14 @@ export interface BackgroundScriptContainer {
     unregisterFirefoxContentScript: (id: string) => void;
 }
 
+export interface PortVideo {
+    bvID: VideoID;
+    ytbID: VideoID;
+    UUID: string;
+    votes: number;
+    locked: boolean;
+}
+
 export interface VideoInfo {
     responseContext: {
         serviceTrackingParams: Array<{ service: string; params: Array<{ key: string; value: string }> }>;