Add confirmation modal to Upload subtitle

Fixes an issue with the upload subtitle button, where the automatic browser dialog used by the button would "time out", failing to open up the subsequent file dialog. This replaces it with a confirmation modal from appkit. WARNING: Requires opencast/appkit#5 to be merged and released!
Arnei · May 24, 2024 · fbcabd4 · fbcabd4
1 parent 59526c9
commit fbcabd4
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 10 deletions.
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
@@ -254,7 +254,8 @@
       "downloadButton-tooltip": "Download subtitle as vtt file",
       "uploadButton-title": "Upload",
       "uploadButton-tooltip": "Upload subtitle as vtt file",
-      "uploadButton-warning": "Caution! Uploading will overwrite the current subtitle. This cannot be undone. Are you sure?",
+      "uploadButton-warning-header": "Caution!",
+      "uploadButton-warning": "Uploading will overwrite the current subtitle. This cannot be undone. Are you sure?",
       "uploadButton-error": "Upload failed.",
       "uploadButton-error-filetype": "Wrong file type.",
       "uploadButton-error-parse": "Could not parse subtitle file. Please ensure that the file contains valid WebVTT.",
@@ -312,5 +313,12 @@
 
     "language": {
       "language": "Language"
+    },
+
+    "modal": {
+      "areYouSure": "Are you sure?",
+      "cancel": "Cancel",
+      "close": "Close",
+      "confirm": "Confirm"
     }
   }
diff --git a/src/main/SubtitleEditor.tsx b/src/main/SubtitleEditor.tsx
@@ -21,6 +21,7 @@ import { parseSubtitle, serializeSubtitle } from "../util/utilityFunctions";
 import { ThemedTooltip } from "./Tooltip";
 import { titleStyle, titleStyleBold } from "../cssStyles";
 import { generateButtonTitle } from "./SubtitleSelect";
+import { ConfirmationModal, ConfirmationModalHandle } from "@opencast/appkit";
 
 /**
  * Displays an editor view for a selected subtitle file
@@ -189,23 +190,28 @@ const UploadButton: React.FC = () => {
   const theme = useTheme();
   const dispatch = useAppDispatch();
 
+  const [isFileUploadTriggered, setisFileUploadTriggered] = useState(false);
   const [errorState, setErrorState] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
   const subtitle = useAppSelector(selectSelectedSubtitleById);
   const selectedId = useAppSelector(selectSelectedSubtitleId);
   // Upload Ref
   const inputRef = React.useRef<HTMLInputElement>(null);
+  // Modal Ref
+  const modalRef = React.useRef<ConfirmationModalHandle>(null);
 
-  const uploadSubtitles = () => {
-    // open file input box on click of other element
-    const ref = inputRef.current;
-    if (ref !== null) {
-      if (confirm(t("subtitles.uploadButton-warning"))) {
-        ref.click();
-      }
-    }
+  const triggerFileUpload = () => {
+    modalRef.current?.done();
+    setisFileUploadTriggered(true);
   };
 
+  useEffect(() => {
+    if (isFileUploadTriggered) {
+      inputRef.current?.click();
+      setisFileUploadTriggered(false);
+    }
+  }, [isFileUploadTriggered]);
+
   // Save uploaded file in redux
   const uploadCallback = (event: React.ChangeEvent<HTMLInputElement>) => {
     const fileObj = event.target.files && event.target.files[0];
@@ -243,7 +249,7 @@ const UploadButton: React.FC = () => {
       <ThemedTooltip title={t("subtitles.uploadButton-tooltip")}>
         <div css={[basicButtonStyle(theme), subtitleButtonStyle(theme)]}
           role="button"
-          onClick={() => uploadSubtitles()}
+          onClick={() => modalRef.current?.open()}
         >
           <LuUpload css={{ fontSize: "16px" }}/>
           <span>{t("subtitles.uploadButton-title")}</span>
@@ -262,6 +268,19 @@ const UploadButton: React.FC = () => {
         onChange={event => uploadCallback(event)}
         aria-hidden="true"
       />
+      <ConfirmationModal
+        title={t("subtitles.uploadButton-warning-header")}
+        buttonContent={t("modal.confirm")}
+        onSubmit={triggerFileUpload}
+        ref={modalRef}
+        text={{
+          generalActionCancel: t("modal.cancel"),
+          generalActionClose: t("modal.close"),
+          manageAreYouSure: t("modal.areYouSure"),
+        }}
+      >
+        {t("subtitles.uploadButton-warning")}
+      </ConfirmationModal>
     </>
   );
 };