Migrate button display methods

hanydd · Sep 9, 2024 · d571fd6 · d571fd6
1 parent 87f0c63
commit d571fd6
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 32 deletions.
diff --git a/src/components/playerButtons/PlayerButtonGroupComponent.tsx b/src/components/playerButtons/PlayerButtonGroupComponent.tsx
@@ -1,8 +1,9 @@
 import { ConfigProvider, Popconfirm, theme } from "antd";
 import * as React from "react";
+import Config from "../../config";
 import InfoButtonComponent from "./InfoButton";
 import PlayerButtonComponent from "./PlayerButton";
-import Config from "../../config";
+import StartEndSegmentButton from "./StartEndSegmentButton";
 
 interface PlayerButtonGroupProps {
     startSegmentCallback: () => void;
@@ -32,6 +33,19 @@ function PlayerButtonGroupComponent({
         return !!(segment && segment?.segment?.length != 2);
     }
 
+    function showSubmitButton() {
+        return sponsorTimesSubmitting.length > 0 && !Config.config.hideUploadButtonPlayerControls;
+    }
+
+    function showdeleteButton() {
+        if (Config.config.hideUploadButtonPlayerControls) {
+            return false;
+        }
+        return (
+            sponsorTimesSubmitting.length > 1 || (sponsorTimesSubmitting.length > 0 && !isSegmentCreationInProgress())
+        );
+    }
+
     function getPopconfirmDescription() {
         const message = chrome.i18n.getMessage("confirmMSG").split("\n");
         return (
@@ -53,6 +67,7 @@ function PlayerButtonGroupComponent({
                     title="OpenSubmissionMenu"
                     imageName="PlayerUploadIconSponsorBlocker.svg"
                     isDraggable={false}
+                    show={showSubmitButton()}
                     onClick={submitCallback}
                 ></PlayerButtonComponent>
 
@@ -68,6 +83,7 @@ function PlayerButtonGroupComponent({
                         title="clearTimes"
                         imageName="PlayerDeleteIconSponsorBlocker.svg"
                         isDraggable={false}
+                        show={showdeleteButton()}
                     ></PlayerButtonComponent>
                 </Popconfirm>
 
@@ -80,13 +96,10 @@ function PlayerButtonGroupComponent({
                     onClick={cancelSegmentCallback}
                 ></PlayerButtonComponent>
 
-                <PlayerButtonComponent
-                    baseID="startSegment"
-                    title="sponsorStart"
-                    imageName="PlayerStartIconSponsorBlocker.svg"
-                    isDraggable={false}
+                <StartEndSegmentButton
+                    isCreatingSegment={isSegmentCreationInProgress()}
                     onClick={startSegmentCallback}
-                ></PlayerButtonComponent>
+                ></StartEndSegmentButton>
             </div>
         </ConfigProvider>
     );

diff --git a/src/components/playerButtons/StartEndSegmentButton.tsx b/src/components/playerButtons/StartEndSegmentButton.tsx
@@ -0,0 +1,28 @@
+import * as React from "react";
+import { forwardRef } from "react";
+import PlayerButtonComponent from "./PlayerButton";
+
+interface StartEndSegmentButtonProps {
+    isCreatingSegment: boolean;
+    onClick: () => void;
+}
+
+const StartEndSegmentButton = forwardRef<HTMLButtonElement, StartEndSegmentButtonProps>(function (
+    { isCreatingSegment, onClick },
+    ref
+) {
+    return (
+        <PlayerButtonComponent
+            ref={ref}
+            baseID="startSegment"
+            title={isCreatingSegment ? "sponsorEnd" : "sponsorStart"}
+            imageName={isCreatingSegment ? "PlayerStopIconSponsorBlocker.svg" : "PlayerStartIconSponsorBlocker.svg"}
+            isDraggable={false}
+            // show={showStartEndButton()}
+            onClick={onClick}
+        ></PlayerButtonComponent>
+    );
+});
+StartEndSegmentButton.displayName = "StartSegmentButton";
+
+export default StartEndSegmentButton;
diff --git a/src/content.ts b/src/content.ts
@@ -1924,32 +1924,7 @@ async function updateVisibilityOfPlayerControlsButton(): Promise<void> {
 function updateEditButtonsOnPlayer(): void {
     // Don't try to update the buttons if we aren't on a Bilibili video page
     if (!getVideoID()) return;
-
     window.dispatchEvent(new CustomEvent("sponsorTimesSubmittingChange", { detail: sponsorTimesSubmitting }));
-
-    const creatingSegment = isSegmentCreationInProgress();
-    // Show only if there are any segments to submit
-    const submitButtonVisible = sponsorTimesSubmitting.length > 0;
-    // Show only if there are any segments to delete
-    const deleteButtonVisible =
-        sponsorTimesSubmitting.length > 1 || (sponsorTimesSubmitting.length > 0 && !creatingSegment);
-
-    // Update the elements
-    // playerButtons.startSegment.button.style.display = "unset";
-    // playerButtons.cancelSegment.button.style.display = creatingSegment ? "unset" : "none";
-
-    if (creatingSegment) {
-        playerButtons.startSegment.image.src = chrome.runtime.getURL("icons/PlayerStopIconSponsorBlocker.svg");
-        playerButtons.startSegment.button.setAttribute("title", chrome.i18n.getMessage("sponsorEnd"));
-    } else {
-        playerButtons.startSegment.image.src = chrome.runtime.getURL("icons/PlayerStartIconSponsorBlocker.svg");
-        playerButtons.startSegment.button.setAttribute("title", chrome.i18n.getMessage("sponsorStart"));
-    }
-
-    playerButtons.submit.button.style.display =
-        submitButtonVisible && !Config.config.hideUploadButtonPlayerControls ? "unset" : "none";
-    playerButtons.delete.button.style.display =
-        deleteButtonVisible && !Config.config.hideDeleteButtonPlayerControls ? "unset" : "none";
 }
 
 /**