Add refresh button to update ported segments

public/_locales/en/messages.json

@@ -1170,6 +1170,15 @@
     "hasbindedPortVideo": {
         "message": "已绑定搬运视频："
     },
+    "refreshPortedSegments": {
+        "message": "更新绑定视频的片段"
+    },
+    "refreshSuccess": {
+        "message": "更新成功！"
+    },
+    "refreshFailed": {
+        "message": "更新失败！"
+    },
     "enterPortVideoURL": {
         "message": "请输入搬运视频地址"
     },

public/content.css

@@ -840,6 +840,7 @@ input::-webkit-inner-spin-button {
 }
 
 #bsbDescriptionPortVideoPill .bsbVoteButton {
+	color: var(--sb-brand-blue);
 	cursor: pointer;
 	height: 24px;
 	padding: 0 3px;

src/components/DescriptionPortPillComponent.tsx

@@ -13,6 +13,7 @@ export interface DescriptionPortPillProps {
 
     onSubmitPortVideo: (ytbID: VideoID) => Promise<PortVideo>;
     onVote(type: number): Promise<void>;
+    onRefresh(): Promise<void>;
 }
 
 export interface DescriptionPortPillState {
@@ -61,6 +62,12 @@ export class DescriptionPortPillComponent extends React.Component<DescriptionPor
                                     src={chrome.runtime.getURL("icons/thumbs_down_blue.svg")}
                                     onClick={(e) => this.vote(e, 0)}
                                 ></img>
+                                <img
+                                    className="bsbVoteButton"
+                                    title={chrome.i18n.getMessage("refreshPortedSegments")}
+                                    src={chrome.runtime.getURL("icons/refresh.svg")}
+                                    onClick={() => this.props.onRefresh()}
+                                ></img>
                             </>
                         )}
                         {!this.hasYtbVideo() && (

src/render/DesciptionPortPill.tsx

@@ -4,13 +4,14 @@ import { DescriptionPortPillComponent } from "../components/DescriptionPortPillC
 import YouTubeLogoButton from "../components/YouTubeLogoButton";
 import Config from "../config";
 import { getPageLoaded } from "../content";
-import { getPortVideoByHash } from "../requests/portVideo";
+import { getPortVideoByHash, updatePortedSegments } from "../requests/portVideo";
 import { asyncRequestToServer } from "../requests/requests";
 import { VideoID } from "../types";
 import { waitFor } from "../utils/";
 import { waitForElement } from "../utils/dom";
 import { getVideoDescriptionFromWindow } from "../utils/injectedScriptMessageUtils";
 import { getVideo, getVideoID } from "../utils/video";
+import { showMessage } from "./MessageNotice";
 
 const id = "bsbDescriptionContainer";
 
@@ -100,6 +101,7 @@ export class DescriptionPortPill {
                 showYtbVideoButton={Config.config.showPreviewYoutubeButton}
                 onSubmitPortVideo={(ytbID) => this.submitPortVideo(ytbID)}
                 onVote={(type) => this.vote(type)}
+                onRefresh={() => this.updateSegments()}
             />
         );
 
@@ -208,4 +210,15 @@ export class DescriptionPortPill {
         await this.getPortVideo(this.bvID, true);
         this.ref.current.setState({ ytbVideoID: this.ytbID, previewYtbID: this.ytbID });
     }
+
+    private async updateSegments() {
+        const response = await updatePortedSegments(this.bvID);
+        if (!response?.ok) {
+            console.error(response.responseText);
+            showMessage(chrome.i18n.getMessage("refreshFailed") + response.responseText, "error");
+            return;
+        }
+        this.sponsorsLookup(true, true, true);
+        showMessage(chrome.i18n.getMessage("refreshSuccess"), "success");
+    }
 }

src/requests/portVideo.ts

@@ -1,5 +1,6 @@
 import { VideoID } from "../types";
 import { getHash } from "../utils/hash";
+import { FetchResponse } from "./background-request-proxy";
 import { asyncRequestToServer } from "./requests";
 
 interface RequestOptions {
@@ -49,3 +50,7 @@ export async function getPortVideoByHash(bvID: VideoID, options: RequestOptions
     }
     throw response;
 }
+
+export async function updatePortedSegments(bvID: VideoID): Promise<FetchResponse> {
+    return asyncRequestToServer("POST", "/api/updatePortedSegments", { videoID: bvID });
+}