Merge branch 'main' into appkit-replace-spinner

opencast · Dec 10, 2024 · 29cfd13 · 29cfd13
2 parents b30c6a9 + ef8aec1
commit 29cfd13
Show file tree

Hide file tree

Showing 20 changed files with 248 additions and 266 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "deepmerge": "^4.3.1",
     "emotion-normalize": "^11.0.1",
     "final-form": "^4.20.10",
-    "i18next": "^23.16.0",
+    "i18next": "^24.0.5",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-chained-backend": "^4.6.2",
     "i18next-resources-to-backend": "^1.2.1",

diff --git a/src/cssStyles.tsx b/src/cssStyles.tsx
@@ -6,6 +6,9 @@ import React from "react";
 import emotionNormalize from "emotion-normalize";
 import { createTheme } from "@mui/material/styles";
 import { Theme, useTheme } from "./themes";
+import {
+  DEFAULT_CONFIG as APPKIT_CONFIG,
+} from "@opencast/appkit";
 import { StylesConfig } from "react-select";
 
 /**
@@ -35,8 +38,8 @@ export const globalStyle = (theme: Theme) => css({
 
 
 // When to switch behaviour based on screen width
-export const BREAKPOINT_SMALL = 450;
-export const BREAKPOINT_MEDIUM = 650;
+/** Breakpoint values */
+export const BREAKPOINTS = APPKIT_CONFIG.breakpoints;
 
 /**
  * CSS for buttons
@@ -426,3 +429,9 @@ export const backgroundBoxStyle = (theme: Theme) => css(({
   padding: "20px",
   gap: "25px",
 }));
+
+export const undisplay = (maxWidth: number) => css({
+  [`@media (max-width: ${maxWidth}px)`]: {
+    display: "none",
+  },
+});
diff --git a/src/img/opencast-editor-narrow.svg b/src/img/opencast-editor-narrow.svg
diff --git a/src/main/CuttingActions.tsx b/src/main/CuttingActions.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { basicButtonStyle, customIconStyle } from "../cssStyles";
+import { BREAKPOINTS, basicButtonStyle, customIconStyle, undisplay } from "../cssStyles";
 
 import { IconType } from "react-icons";
 import { LuScissors, LuChevronLeft, LuChevronRight, LuTrash, LuMoveHorizontal } from "react-icons/lu";
@@ -110,6 +110,8 @@ const CuttingActions: React.FC = () => {
     flexDirection: "row" as const,
     justifyContent: "center",
     alignItems: "center",
+
+    flexWrap: "wrap",
   });
 
   const verticalLineStyle = css({
@@ -246,7 +248,7 @@ const CuttingActionsButton: React.FC<cuttingActionsButtonInterface> = ({
         }}
       >
         <Icon />
-        <span>{actionName}</span>
+        <span css={undisplay(BREAKPOINTS.medium)}>{actionName}</span>
       </div>
     </ThemedTooltip>
   );
@@ -291,8 +293,10 @@ const MarkAsDeletedButton: React.FC<markAsDeleteButtonInterface> = ({
           }
         }}
       >
-        {isCurrentSegmentAlive ? <LuTrash /> : <TrashRestore css={customIconStyle} />}
-        <div>{isCurrentSegmentAlive ? t("cuttingActions.delete-button") : t("cuttingActions.restore-button")}</div>
+        {isCurrentSegmentAlive ? <LuTrash /> : <TrashRestore css={customIconStyle} /> }
+        <span css={undisplay(BREAKPOINTS.medium)}>
+          {isCurrentSegmentAlive ? t("cuttingActions.delete-button") : t("cuttingActions.restore-button")}
+        </span>
       </div>
     </ThemedTooltip>
   );

diff --git a/src/main/Discard.tsx b/src/main/Discard.tsx
@@ -5,8 +5,7 @@ import { basicButtonStyle, backOrContinueStyle, navigationButtonStyle } from "..
 
 import { LuChevronLeft, LuXCircle } from "react-icons/lu";
 
-import { useAppDispatch, useAppSelector } from "../redux/store";
-import { selectFinishState } from "../redux/finishSlice";
+import { useAppDispatch } from "../redux/store";
 import { setEnd } from "../redux/endSlice";
 
 import { PageButton } from "./Finish";
@@ -22,10 +21,8 @@ const Discard: React.FC = () => {
 
   const { t } = useTranslation();
 
-  const finishState = useAppSelector(selectFinishState);
-
   const cancelStyle = css({
-    display: finishState !== "Discard changes" ? "none" : "flex",
+    display: "flex",
     flexDirection: "column" as const,
     alignItems: "center",
     gap: "30px",

diff --git a/src/main/Finish.tsx b/src/main/Finish.tsx
@@ -14,7 +14,7 @@ import { basicButtonStyle, navigationButtonStyle } from "../cssStyles";
 import { IconType } from "react-icons";
 
 import { useAppDispatch, useAppSelector } from "../redux/store";
-import { selectPageNumber, setPageNumber } from "../redux/finishSlice";
+import { selectFinishState, selectPageNumber, setPageNumber } from "../redux/finishSlice";
 import { useTheme } from "../themes";
 import { settings } from "../config";
 import { useTranslation } from "react-i18next";
@@ -25,33 +25,36 @@ import { useTranslation } from "react-i18next";
 const Finish: React.FC = () => {
 
   const pageNumber = useAppSelector(selectPageNumber);
+  const finishState = useAppSelector(selectFinishState);
 
-  const pageZeroStyle = css({
-    display: pageNumber !== 0 ? "none" : "block",
-  });
-
-  const pageOneStyle = css({
-    display: pageNumber !== 1 ? "none" : "block",
-  });
-
-  const pageTwoStyle = css({
-    display: pageNumber !== 2 ? "none" : "block",
-  });
-
-  return (
-    <div>
-      <div css={pageZeroStyle} >
+  const render = () => {
+    if (pageNumber === 0) {
+      return (
         <FinishMenu />
-      </div>
-      <div css={pageOneStyle} >
-        <Save />
-        <WorkflowSelection />
-        <Discard />
-      </div>
-      <div css={pageTwoStyle} >
+      );
+    } else if (pageNumber === 1) {
+      if (finishState === "Save changes") {
+        return (
+          <Save />
+        );
+      } else if (finishState === "Start processing") {
+        return (
+          <WorkflowSelection />
+        );
+      } else if (finishState === "Discard changes") {
+        return (
+          <Discard />
+        );
+      }
+    } else if (pageNumber === 2) {
+      return (
         <WorkflowConfiguration />
-      </div>
-    </div>
+      );
+    }
+  };
+
+  return (
+    <>{render()}</>
   );
 };
 

diff --git a/src/main/Header.tsx b/src/main/Header.tsx
@@ -10,10 +10,17 @@ import { LuMoon, LuSun } from "react-icons/lu";
 import { HiOutlineTranslate } from "react-icons/hi";
 import { LuKeyboard } from "react-icons/lu";
 import { MainMenuStateNames } from "../types";
-import { basicButtonStyle, BREAKPOINT_MEDIUM, BREAKPOINT_SMALL } from "../cssStyles";
+import { basicButtonStyle, BREAKPOINTS, undisplay } from "../cssStyles";
 
 import { selectIsEnd } from "../redux/endSlice";
-import { checkboxMenuItem, HeaderMenuItemDef, ProtoButton, useColorScheme, WithHeaderMenu } from "@opencast/appkit";
+import {
+  checkboxMenuItem,
+  HeaderMenuItemDef,
+  ProtoButton,
+  screenWidthAtMost,
+  useColorScheme,
+  WithHeaderMenu,
+} from "@opencast/appkit";
 import { IconType } from "react-icons";
 import i18next from "i18next";
 import { languages as lngs } from "../i18n/lngs-generated";
@@ -68,6 +75,10 @@ function Header() {
       backgroundColor: theme.header_button_hover_bg,
       color: `${theme.header_text}`,
     },
+
+    [screenWidthAtMost(BREAKPOINTS.medium)]: {
+      fontSize: 0,
+    },
   });
 
   return (
@@ -184,7 +195,7 @@ const LanguageButton: React.FC = () => {
       menu={{
         label,
         items: menuItems,
-        breakpoint: BREAKPOINT_SMALL,
+        breakpoint: BREAKPOINTS.small,
       }}
     >
       <HeaderButton Icon={HiOutlineTranslate} label={label} />
@@ -210,7 +221,7 @@ const ThemeButton: React.FC = () => {
       menu={{
         label: t("theme.appearance"),
         items: menuItems,
-        breakpoint: BREAKPOINT_MEDIUM,
+        breakpoint: BREAKPOINTS.medium,
       }}>
       <HeaderButton
         Icon={scheme === "light" || scheme === "light-high-contrast" ? LuMoon : LuSun}
@@ -268,11 +279,7 @@ const HeaderButton = React.forwardRef<HTMLButtonElement, HeaderButtonProps>(
         css={[basicButtonStyle(theme), themeSelectorButtonStyle]}
       >
         <Icon css={iconStyle} />
-        <span css={{
-          [`@media (max-width: ${BREAKPOINT_MEDIUM}px)`]: {
-            display: "none",
-          },
-        }}>{label}</span>
+        <span css={undisplay(BREAKPOINTS.medium)}>{label}</span>
       </ProtoButton>
     );
   });

diff --git a/src/main/MainMenu.tsx b/src/main/MainMenu.tsx
@@ -13,14 +13,15 @@ import { setPageNumber } from "../redux/finishSlice";
 
 import { MainMenuStateNames } from "../types";
 import { settings } from "../config";
-import { basicButtonStyle } from "../cssStyles";
+import { basicButtonStyle, BREAKPOINTS } from "../cssStyles";
 import { setIsPlaying } from "../redux/videoSlice";
 
 import { useTranslation } from "react-i18next";
 import { resetPostRequestState } from "../redux/workflowPostSlice";
 import { setIsDisplayEditView } from "../redux/subtitleSlice";
 
 import { useTheme } from "../themes";
+import { screenWidthAtMost } from "@opencast/appkit";
 
 /**
  * A container for selecting the functionality shown in the main part of the app
@@ -42,6 +43,10 @@ const MainMenu: React.FC = () => {
     overflowY: "auto",
     background: `${theme.menu_background}`,
     gap: "30px",
+    [screenWidthAtMost(BREAKPOINTS.large)]: {
+      minWidth: "60px",
+      padding: "20px 10px",
+    },
   });
 
   return (
@@ -142,6 +147,10 @@ export const MainMenuButton: React.FC<mainMenuButtonInterface> = ({
       boxShadow: `${theme.boxShadow}`,
     },
     flexDirection: "column",
+    [screenWidthAtMost(BREAKPOINTS.large)]: {
+      height: "60px",
+      minHeight: "40px",
+    },
   });
 
   return (
@@ -159,8 +168,15 @@ export const MainMenuButton: React.FC<mainMenuButtonInterface> = ({
         fontSize: 36,
         width: "36px",
         height: "auto",
-      }} />
-      {bottomText && <div>{bottomText}</div>}
+      }}/>
+      {bottomText &&
+      <div css={{
+        [screenWidthAtMost(BREAKPOINTS.large)]: {
+          display: "none",
+        },
+      }}>
+        {bottomText}
+      </div>}
     </li>
   );
 };