From 6d845ef74c23ef41e178163e7ab6ad6f0580b647 Mon Sep 17 00:00:00 2001
From: hanyd <hanyd@bsbsb.top>
Date: Wed, 16 Oct 2024 00:14:19 +0800
Subject: [PATCH] Add refresh button to update ported segments

---
 public/_locales/en/messages.json                |  9 +++++++++
 public/content.css                              |  1 +
 public/icons/refresh.svg                        |  2 +-
 src/components/DescriptionPortPillComponent.tsx |  7 +++++++
 src/render/DesciptionPortPill.tsx               | 15 ++++++++++++++-
 src/requests/portVideo.ts                       |  5 +++++
 6 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index 452954c8..5d48bcc6 100644
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -1170,6 +1170,15 @@
     "hasbindedPortVideo": {
         "message": "已绑定搬运视频："
     },
+    "refreshPortedSegments": {
+        "message": "更新绑定视频的片段"
+    },
+    "refreshSuccess": {
+        "message": "更新成功！"
+    },
+    "refreshFailed": {
+        "message": "更新失败！"
+    },
     "enterPortVideoURL": {
         "message": "请输入搬运视频地址"
     },
diff --git a/public/content.css b/public/content.css
index 06837698..f58ca305 100644
--- a/public/content.css
+++ b/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;
diff --git a/public/icons/refresh.svg b/public/icons/refresh.svg
index 87a7e9a6..47b412bd 100644
--- a/public/icons/refresh.svg
+++ b/public/icons/refresh.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#00aeec"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
\ No newline at end of file
diff --git a/src/components/DescriptionPortPillComponent.tsx b/src/components/DescriptionPortPillComponent.tsx
index a88587cb..32718c3a 100644
--- a/src/components/DescriptionPortPillComponent.tsx
+++ b/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() && (
diff --git a/src/render/DesciptionPortPill.tsx b/src/render/DesciptionPortPill.tsx
index ebd3e692..6c585d2e 100644
--- a/src/render/DesciptionPortPill.tsx
+++ b/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");
+    }
 }
diff --git a/src/requests/portVideo.ts b/src/requests/portVideo.ts
index ab967052..9c0b1441 100644
--- a/src/requests/portVideo.ts
+++ b/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 });
+}