Merge branch 'main' into appkit-replace-spinner

src/cssStyles.tsx

@@ -34,6 +34,10 @@ export const globalStyle = (theme: Theme) => css({
     // Makes the body span to the bottom of the page
     minHeight: "100vh",
   },
+  // Some elements not inheriting fonts is a really confusing browser default.
+  "input, button, textarea, select": {
+    font: "inherit",
+  },
 });
 
 
@@ -46,7 +50,6 @@ export const BREAKPOINTS = APPKIT_CONFIG.breakpoints;
  */
 export const basicButtonStyle = (theme: Theme) => css({
   borderRadius: "5px",
-  cursor: "pointer",
   "&:hover": {
     backgroundColor: `${theme.button_color}`,
     color: `${theme.inverted_text}`,

src/i18n/locales/am-ET.json

@@ -243,6 +243,10 @@
         "createSubtitleDropdown-label": "Pick a language",
         "backButton": "Back",
         "backButton-tooltip": "Return to subtitle selection",
+        "deleteButton-title": "Delete",
+        "deleteButton-tooltip": "Delete subtitle",
+        "deleteButton-warning-header": "Caution!",
+        "deleteButton-warning": "You will remove the current subtitle. This cannot be undone. Are you sure?",
         "downloadButton-title": "Download",
         "downloadButton-tooltip": "Download subtitle as vtt file",
         "uploadButton-title": "Upload",

src/i18n/locales/cs-CZ.json

@@ -243,6 +243,10 @@
         "createSubtitleDropdown-label": "Pick a language",
         "backButton": "Back",
         "backButton-tooltip": "Return to subtitle selection",
+        "deleteButton-title": "Delete",
+        "deleteButton-tooltip": "Delete subtitle",
+        "deleteButton-warning-header": "Caution!",
+        "deleteButton-warning": "You will remove the current subtitle. This cannot be undone. Are you sure?",
         "downloadButton-title": "Download",
         "downloadButton-tooltip": "Download subtitle as vtt file",
         "uploadButton-title": "Upload",

src/i18n/locales/de-AT.json

@@ -243,6 +243,10 @@
         "createSubtitleDropdown-label": "Pick a language",
         "backButton": "Back",
         "backButton-tooltip": "Return to subtitle selection",
+        "deleteButton-title": "Delete",
+        "deleteButton-tooltip": "Delete subtitle",
+        "deleteButton-warning-header": "Caution!",
+        "deleteButton-warning": "You will remove the current subtitle. This cannot be undone. Are you sure?",
         "downloadButton-title": "Download",
         "downloadButton-tooltip": "Download subtitle as vtt file",
         "uploadButton-title": "Upload",

src/i18n/locales/de-DE.json

@@ -243,6 +243,10 @@
         "createSubtitleDropdown-label": "Wähle eine Sprache",
         "backButton": "Zurück",
         "backButton-tooltip": "Zurück zur Untertitelauswahl",
+        "deleteButton-title": "Löschen",
+        "deleteButton-tooltip": "Delete subtitle",
+        "deleteButton-warning-header": "Achtung!",
+        "deleteButton-warning": "You will remove the current subtitle. This cannot be undone. Are you sure?",
         "downloadButton-title": "Herunterladen",
         "downloadButton-tooltip": "Untertitel als vtt-Datei herunterladen",
         "uploadButton-title": "Hochladen",

src/i18n/locales/el-GR.json

@@ -243,6 +243,10 @@
         "createSubtitleDropdown-label": "Επιλέξτε μια γλώσσα",
         "backButton": "Επιστροφή",
         "backButton-tooltip": "Επιστροφή στην επιλογή υποτίτλων",
+        "deleteButton-title": "Διαγραφή",
+        "deleteButton-tooltip": "Delete subtitle",
+        "deleteButton-warning-header": "Προσοχή!",
+        "deleteButton-warning": "You will remove the current subtitle. This cannot be undone. Are you sure?",
         "downloadButton-title": "Λήψη",
         "downloadButton-tooltip": "Λήψη υποτίτλων ως αρχείο vtt",
         "uploadButton-title": "Ανέβασμα",

src/i18n/locales/en-US.json

@@ -260,6 +260,10 @@
       "createSubtitleDropdown-label": "Pick a language",
       "backButton": "Back",
       "backButton-tooltip": "Return to subtitle selection",
+      "deleteButton-title": "Delete",
+      "deleteButton-tooltip": "Delete subtitle",
+      "deleteButton-warning-header": "Caution!",
+      "deleteButton-warning": "You will remove the current subtitle. This cannot be undone. Are you sure?",
       "downloadButton-title": "Download",
       "downloadButton-tooltip": "Download subtitle as vtt file",
       "uploadButton-title": "Upload",

src/i18n/locales/es-ES.json

@@ -243,6 +243,10 @@
         "createSubtitleDropdown-label": "Seleccione un idioma",
         "backButton": "Atras",
         "backButton-tooltip": "Volver a la selección de subtítulos",
+        "deleteButton-title": "Borrar",
+        "deleteButton-tooltip": "Delete subtitle",
+        "deleteButton-warning-header": "Caution!",
+        "deleteButton-warning": "You will remove the current subtitle. This cannot be undone. Are you sure?",
         "downloadButton-title": "Descargar",
         "downloadButton-tooltip": "Descargar subtítulo como un archivo vtt",
         "uploadButton-title": "Cargar",

src/i18n/locales/fr-FR.json

@@ -243,6 +243,10 @@
         "createSubtitleDropdown-label": "Pick a language",
         "backButton": "Back",
         "backButton-tooltip": "Return to subtitle selection",
+        "deleteButton-title": "Supprimer",
+        "deleteButton-tooltip": "Delete subtitle",
+        "deleteButton-warning-header": "Caution!",
+        "deleteButton-warning": "You will remove the current subtitle. This cannot be undone. Are you sure?",
         "downloadButton-title": "Download",
         "downloadButton-tooltip": "Download subtitle as vtt file",
         "uploadButton-title": "Upload",

src/i18n/locales/gl-ES.json

@@ -243,6 +243,10 @@
         "createSubtitleDropdown-label": "Pick a language",
         "backButton": "Back",
         "backButton-tooltip": "Return to subtitle selection",
+        "deleteButton-title": "Delete",
+        "deleteButton-tooltip": "Delete subtitle",
+        "deleteButton-warning-header": "Caution!",
+        "deleteButton-warning": "You will remove the current subtitle. This cannot be undone. Are you sure?",
         "downloadButton-title": "Download",
         "downloadButton-tooltip": "Download subtitle as vtt file",
         "uploadButton-title": "Upload",

src/i18n/locales/he-IL.json

@@ -243,6 +243,10 @@
         "createSubtitleDropdown-label": "Pick a language",
         "backButton": "Back",
         "backButton-tooltip": "Return to subtitle selection",
+        "deleteButton-title": "Delete",
+        "deleteButton-tooltip": "Delete subtitle",
+        "deleteButton-warning-header": "Caution!",
+        "deleteButton-warning": "You will remove the current subtitle. This cannot be undone. Are you sure?",
         "downloadButton-title": "Download",
         "downloadButton-tooltip": "Download subtitle as vtt file",
         "uploadButton-title": "Upload",

src/i18n/locales/it-IT.json

@@ -243,6 +243,10 @@
         "createSubtitleDropdown-label": "Pick a language",
         "backButton": "Back",
         "backButton-tooltip": "Return to subtitle selection",
+        "deleteButton-title": "Delete",
+        "deleteButton-tooltip": "Delete subtitle",
+        "deleteButton-warning-header": "Caution!",
+        "deleteButton-warning": "You will remove the current subtitle. This cannot be undone. Are you sure?",
         "downloadButton-title": "Download",
         "downloadButton-tooltip": "Download subtitle as vtt file",
         "uploadButton-title": "Upload",

src/i18n/locales/nl-NL.json

@@ -243,6 +243,10 @@
         "createSubtitleDropdown-label": "Pick a language",
         "backButton": "Back",
         "backButton-tooltip": "Return to subtitle selection",
+        "deleteButton-title": "Verwijder",
+        "deleteButton-tooltip": "Delete subtitle",
+        "deleteButton-warning-header": "Caution!",
+        "deleteButton-warning": "You will remove the current subtitle. This cannot be undone. Are you sure?",
         "downloadButton-title": "Download",
         "downloadButton-tooltip": "Download subtitle as vtt file",
         "uploadButton-title": "Upload",

src/i18n/locales/pl-PL.json

@@ -243,6 +243,10 @@
         "createSubtitleDropdown-label": "Pick a language",
         "backButton": "Back",
         "backButton-tooltip": "Return to subtitle selection",
+        "deleteButton-title": "Delete",
+        "deleteButton-tooltip": "Delete subtitle",
+        "deleteButton-warning-header": "Caution!",
+        "deleteButton-warning": "You will remove the current subtitle. This cannot be undone. Are you sure?",
         "downloadButton-title": "Download",
         "downloadButton-tooltip": "Download subtitle as vtt file",
         "uploadButton-title": "Upload",

src/i18n/locales/sl-SI.json

@@ -243,6 +243,10 @@
         "createSubtitleDropdown-label": "Pick a language",
         "backButton": "Back",
         "backButton-tooltip": "Return to subtitle selection",
+        "deleteButton-title": "Delete",
+        "deleteButton-tooltip": "Delete subtitle",
+        "deleteButton-warning-header": "Caution!",
+        "deleteButton-warning": "You will remove the current subtitle. This cannot be undone. Are you sure?",
         "downloadButton-title": "Download",
         "downloadButton-tooltip": "Download subtitle as vtt file",
         "uploadButton-title": "Upload",

src/i18n/locales/sv-SE.json

@@ -243,6 +243,10 @@
         "createSubtitleDropdown-label": "Pick a language",
         "backButton": "Back",
         "backButton-tooltip": "Return to subtitle selection",
+        "deleteButton-title": "Delete",
+        "deleteButton-tooltip": "Delete subtitle",
+        "deleteButton-warning-header": "Caution!",
+        "deleteButton-warning": "You will remove the current subtitle. This cannot be undone. Are you sure?",
         "downloadButton-title": "Download",
         "downloadButton-tooltip": "Download subtitle as vtt file",
         "uploadButton-title": "Upload",

src/i18n/locales/tr-TR.json

@@ -243,6 +243,10 @@
         "createSubtitleDropdown-label": "Pick a language",
         "backButton": "Back",
         "backButton-tooltip": "Return to subtitle selection",
+        "deleteButton-title": "Delete",
+        "deleteButton-tooltip": "Delete subtitle",
+        "deleteButton-warning-header": "Caution!",
+        "deleteButton-warning": "You will remove the current subtitle. This cannot be undone. Are you sure?",
         "downloadButton-title": "Download",
         "downloadButton-tooltip": "Download subtitle as vtt file",
         "uploadButton-title": "Upload",

src/i18n/locales/zh-CN.json

@@ -243,6 +243,10 @@
         "createSubtitleDropdown-label": "Pick a language",
         "backButton": "Back",
         "backButton-tooltip": "Return to subtitle selection",
+        "deleteButton-title": "Delete",
+        "deleteButton-tooltip": "Delete subtitle",
+        "deleteButton-warning-header": "Caution!",
+        "deleteButton-warning": "You will remove the current subtitle. This cannot be undone. Are you sure?",
         "downloadButton-title": "Download",
         "downloadButton-tooltip": "Download subtitle as vtt file",
         "uploadButton-title": "Upload",

src/i18n/locales/zh-TW.json

@@ -243,6 +243,10 @@
         "createSubtitleDropdown-label": "Pick a language",
         "backButton": "Back",
         "backButton-tooltip": "Return to subtitle selection",
+        "deleteButton-title": "刪除",
+        "deleteButton-tooltip": "Delete subtitle",
+        "deleteButton-warning-header": "Caution!",
+        "deleteButton-warning": "You will remove the current subtitle. This cannot be undone. Are you sure?",
         "downloadButton-title": "Download",
         "downloadButton-tooltip": "Download subtitle as vtt file",
         "uploadButton-title": "Upload",

src/main/CuttingActions.tsx

@@ -30,6 +30,7 @@ import { useTheme } from "../themes";
 import { ThemedTooltip } from "./Tooltip";
 import { Slider } from "@mui/material";
 import { useHotkeys } from "react-hotkeys-hook";
+import { ProtoButton } from "@opencast/appkit";
 
 /**
  * Defines the different actions a user can perform while in cutting mode
@@ -52,7 +53,7 @@ const CuttingActions: React.FC = () => {
     actionWithPayload?: ActionCreatorWithPayload<number, string> | undefined,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     payload?: any,
-    ref?: React.RefObject<HTMLDivElement>
+    ref?: React.RefObject<HTMLButtonElement>
   ) => {
     if (action) {
       dispatch(action());
@@ -196,8 +197,6 @@ const CuttingActions: React.FC = () => {
  */
 const cuttingActionButtonStyle = css({
   padding: "16px",
-  // boxShadow: `${theme.boxShadow}`,
-  // background: `${theme.element_bg}`
 });
 
 interface cuttingActionsButtonInterface {
@@ -208,7 +207,7 @@ interface cuttingActionsButtonInterface {
     actionWithPayload: ActionCreatorWithPayload<number, string> | undefined,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     payload: any,
-    ref?: React.RefObject<HTMLDivElement>,
+    ref?: React.RefObject<HTMLButtonElement>,
   ) => void,
   action: ActionCreatorWithoutPayload<string>,
   actionWithPayload: ActionCreatorWithPayload<number, string> | undefined,
@@ -232,24 +231,20 @@ const CuttingActionsButton: React.FC<cuttingActionsButtonInterface> = ({
   tooltip,
   ariaLabelText,
 }) => {
-  const ref = React.useRef<HTMLDivElement>(null);
+  const ref = React.useRef<HTMLButtonElement>(null);
   const theme = useTheme();
 
   return (
     <ThemedTooltip title={tooltip}>
-      <div css={[basicButtonStyle(theme), cuttingActionButtonStyle]}
-        ref={ref}
-        role="button" tabIndex={0} aria-label={ariaLabelText}
+      <ProtoButton
+        {...{ ref }}
+        aria-label={ariaLabelText}
         onClick={() => actionHandler(action, actionWithPayload, payload, ref)}
-        onKeyDown={(event: React.KeyboardEvent) => {
-          if (event.key === " " || event.key === "Enter") {
-            actionHandler(action, actionWithPayload, payload);
-          }
-        }}
+        css={[basicButtonStyle(theme), cuttingActionButtonStyle]}
       >
         <Icon />
         <span css={undisplay(BREAKPOINTS.medium)}>{actionName}</span>
-      </div>
+      </ProtoButton>
     </ThemedTooltip>
   );
 };
@@ -260,7 +255,7 @@ interface markAsDeleteButtonInterface {
     actionWithPayload: ActionCreatorWithPayload<number, string> | undefined,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     payload: any,
-    ref?: React.RefObject<HTMLDivElement>
+    ref?: React.RefObject<HTMLButtonElement>
   ) => void,
   action: ActionCreatorWithoutPayload<string>,
   hotKeyName: string,
@@ -276,28 +271,23 @@ const MarkAsDeletedButton: React.FC<markAsDeleteButtonInterface> = ({
 }) => {
   const { t } = useTranslation();
   const isCurrentSegmentAlive = useAppSelector(selectIsCurrentSegmentAlive);
-  const ref = React.useRef<HTMLDivElement>(null);
+  const ref = React.useRef<HTMLButtonElement>(null);
 
   const theme = useTheme();
 
   return (
     <ThemedTooltip title={t("cuttingActions.delete-restore-tooltip", { hotkeyName: hotKeyName })}>
-      <div css={[basicButtonStyle(theme), cuttingActionButtonStyle]}
-        ref={ref}
-        role="button" tabIndex={0}
+      <ProtoButton
+        {...{ ref }}
         aria-label={t("cuttingActions.delete-restore-tooltip-aria", { hotkeyName: hotKeyName })}
         onClick={() => actionHandler(action, undefined, undefined, ref)}
-        onKeyDown={(event: React.KeyboardEvent) => {
-          if (event.key === " " || event.key === "Enter") {
-            actionHandler(action, undefined, undefined);
-          }
-        }}
+        css={[basicButtonStyle(theme), cuttingActionButtonStyle]}
       >
         {isCurrentSegmentAlive ? <LuTrash /> : <TrashRestore css={customIconStyle} /> }
         <span css={undisplay(BREAKPOINTS.medium)}>
           {isCurrentSegmentAlive ? t("cuttingActions.delete-button") : t("cuttingActions.restore-button")}
         </span>
-      </div>
+      </ProtoButton>
     </ThemedTooltip>
   );
 };
@@ -308,7 +298,7 @@ interface ZoomSliderInterface {
     actionWithPayload: ActionCreatorWithPayload<number, string> | undefined,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     payload: any,
-    ref?: React.RefObject<HTMLDivElement>,
+    ref?: React.RefObject<HTMLButtonElement>,
   ) => void,
   tooltip: string,
   ariaLabelText: string,

src/main/Discard.tsx

@@ -12,6 +12,7 @@ import { PageButton } from "./Finish";
 
 import { useTranslation } from "react-i18next";
 import { useTheme } from "../themes";
+import { ProtoButton } from "@opencast/appkit";
 
 /**
  * Shown if the user wishes to abort.
@@ -58,17 +59,13 @@ const DiscardButton: React.FC = () => {
   };
 
   return (
-    <div css={[basicButtonStyle(theme), navigationButtonStyle(theme)]}
-      role="button" tabIndex={0}
+    <ProtoButton
       onClick={discard}
-      onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === " " || event.key === "Enter") {
-          discard();
-        }
-      }}>
+      css={[basicButtonStyle(theme), navigationButtonStyle(theme)]}
+    >
       <LuXCircle />
       <span>{t("discard.confirm-button")}</span>
-    </div>
+    </ProtoButton>
   );
 };