Fix port video section style

hanydd · Dec 20, 2024 · 9bff05e · 9bff05e
1 parent db9314d
commit 9bff05e
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 16 deletions.
diff --git a/public/popup.css b/public/popup.css
@@ -343,6 +343,16 @@
 	background-color: #f2e4b7;
 }
 
+/*
+* Port Video Sections
+*/
+.port-video-section {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+}
+
 /*
  * Submit box
  */

diff --git a/src/content.ts b/src/content.ts
@@ -396,7 +396,7 @@ function messageListener(
             submitPortVideo(request.ytbID);
             break;
         case "votePortVideo":
-            portVideoVote(request.UUID, request.bvid, request.vote);
+            portVideoVote(request.UUID, request.vote);
             break;
         case "updatePortedSegments":
             updateSegments(request.UUID);
@@ -1290,9 +1290,9 @@ async function submitPortVideo(ytbID: VideoID): Promise<PortVideo> {
     return newPortVideo;
 }
 
-async function portVideoVote(UUID: string, bvID: VideoID, voteType: number) {
-    await postPortVideoVote(UUID, bvID, voteType);
-    await getPortVideo(this.bvID, true);
+async function portVideoVote(UUID: string, voteType: number) {
+    await postPortVideoVote(UUID, getVideoID(), voteType);
+    await getPortVideo(getVideoID(), true);
 }
 
 async function updateSegments(UUID: string): Promise<FetchResponse> {

diff --git a/src/popup/PortVideoSection.tsx b/src/popup/PortVideoSection.tsx
@@ -85,28 +85,28 @@ export class PortVideoSection extends React.Component<PortVideoProps, PortVideoS
 
     render() {
         return (
-            <div>
+            <Spin indicator={<LoadingOutlined spin />} delay={100} spinning={this.state.loading}>
                 {this.state.show && (
-                    <Spin indicator={<LoadingOutlined spin />} delay={100} spinning={this.state.loading}>
+                    <div className="port-video-section">
                         {this.hasPortVideo() ? (
                             <>
                                 <span>{chrome.i18n.getMessage("hasbindedPortVideo")}</span>
                                 <span>{this.state.portVideo.ytbID}</span>
 
                                 <img
-                                    className="bsbVoteButton"
+                                    className="voteButton"
                                     title={chrome.i18n.getMessage("upvote")}
-                                    src={chrome.runtime.getURL("icons/thumbs_up_blue.svg")}
+                                    src={chrome.runtime.getURL("icons/thumbs_up.svg")}
                                     onClick={() => this.vote(1)}
                                 ></img>
                                 <img
-                                    className="bsbVoteButton"
+                                    className="voteButton"
                                     title={chrome.i18n.getMessage("downvote")}
-                                    src={chrome.runtime.getURL("icons/thumbs_down_blue.svg")}
+                                    src={chrome.runtime.getURL("icons/thumbs_down.svg")}
                                     onClick={() => this.vote(0)}
                                 ></img>
                                 <img
-                                    className="bsbVoteButton"
+                                    className="voteButton"
                                     title={chrome.i18n.getMessage("refreshPortedSegments")}
                                     src={chrome.runtime.getURL("icons/refresh.svg")}
                                     onClick={() => this.updatePortedSegments()}
@@ -124,9 +124,9 @@ export class PortVideoSection extends React.Component<PortVideoProps, PortVideoS
                                 </button>
                             </>
                         )}
-                    </Spin>
+                    </div>
                 )}
-            </div>
+            </Spin>
         );
     }
 }
diff --git a/src/render/DesciptionPortPill.tsx b/src/render/DesciptionPortPill.tsx
@@ -20,7 +20,7 @@ export class DescriptionPortPill {
     hasDescription: boolean;
     getPortVideo: (videoId: VideoID, bypassCache?: boolean) => void;
     submitPortVideo: (ytbID: VideoID) => Promise<PortVideo>;
-    portVideoVote: (UUID: string, bvID: VideoID, voteType: number) => void;
+    portVideoVote: (UUID: string, voteType: number) => void;
     updateSegments: (UUID: string) => Promise<FetchResponse>;
     sponsorsLookup: (keepOldSubmissions: boolean, ignoreServerCache: boolean, forceUpdatePreviewBar: boolean) => void;
 
@@ -33,7 +33,7 @@ export class DescriptionPortPill {
     constructor(
         getPortVideo: (videoId: VideoID, bypassCache?: boolean) => void,
         submitPortVideo: (ytbID: VideoID) => Promise<PortVideo>,
-        portVideoVote: (UUID: string, bvID: VideoID, voteType: number) => void,
+        portVideoVote: (UUID: string, voteType: number) => void,
         updateSegments: (UUID: string) => Promise<FetchResponse>,
         sponsorsLookup: () => void
     ) {
@@ -182,7 +182,7 @@ export class DescriptionPortPill {
             return;
         }
 
-        this.portVideoVote(this.portUUID, this.bvID, voteType);
+        this.portVideoVote(this.portUUID, voteType);
     }
 
     private async updateSegmentHandler() {