Slightly less generic error message for unauthorized users

src/i18n/locales/en-US.json

@@ -61,10 +61,6 @@
       "unmutebutton-tooltip": "Unmute video",
       "volume-tooltip": "Adjust volume: {{current}}%",
       "volumeSlider-aria": "Adjust the volume level of the video.",
-      "comError-text": "A problem occurred during communication with Opencast.",
-      "loadError-text": "An error has occurred loading this video.",
-      "durationError-text": "Opencast failed to provide the video duration.",
-      "noVideoError-text": "The editor does not support audio files yet!",
       "title-tooltip": "Video Title",
       "presenter-tooltip": "Video Presenters"
     },
@@ -228,9 +224,14 @@
 
     "error": {
       "generic-message": "A critical error has occurred!",
-      "details": "Details: ",
+      "details": "Technical Details: ",
       "workflowActive-errorTitle": "Temporarily unavailable",
-      "workflowActive-errorMessage": "This event is being processed. Please wait until the process is finished."
+      "workflowActive-errorMessage": "This event is being processed. Please wait until the process is finished.",
+      "unauthorizedError-text": "You are not allowed to edit this video",
+      "comError-text": "A problem occurred during communication with Opencast.",
+      "loadError-text": "An error has occurred loading this video.",
+      "durationError-text": "Opencast failed to provide the video duration.",
+      "noVideoError-text": "The editor does not support audio files yet!"
     },
 
     "landing": {

src/main/Body.tsx

@@ -35,7 +35,9 @@ const Body: React.FC = () => {
       );
     } else if (isError) {
       return (
-        <Error />
+        <div css={css({ height: "calc(100% - 64px)" })}>
+          <Error />
+        </div>
       );
     } else {
       return (

src/main/Cutting.tsx

@@ -36,6 +36,7 @@ import { css } from "@emotion/react";
 import VideoPlayers from "./VideoPlayers";
 import VideoControls from "./VideoControls";
 import { fetchMetadata, selectGetStatus as selectMetadataGetStatus } from "../redux/metadataSlice";
+import { readableErrorMessage } from "../util/utilityFunctions";
 
 const Cutting: React.FC = () => {
 
@@ -69,7 +70,7 @@ const Cutting: React.FC = () => {
       } else {
         dispatch(setError({
           error: true,
-          errorMessage: t("video.comError-text"),
+          errorMessage: readableErrorMessage(t, error),
           errorDetails: error,
         }));
       }
@@ -78,14 +79,14 @@ const Cutting: React.FC = () => {
       if (videos === null || videos.length === 0) {
         dispatch(setError({
           error: true,
-          errorMessage: t("video.noVideoError-text"),
+          errorMessage: t("error.noVideoError-text"),
           errorDetails: error,
         }));
       }
       if (duration === null) {
         dispatch(setError({
           error: true,
-          errorMessage: t("video.durationError-text"),
+          errorMessage: t("error.durationError-text"),
           errorDetails: error,
         }));
       }

src/main/Error.tsx

@@ -27,6 +27,8 @@ const Error: React.FC = () => {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
+
+    fontSize: "small",
   });
 
   const theEndStyle = css({
@@ -35,6 +37,8 @@ const Error: React.FC = () => {
     flexDirection: "column",
     justifyContent: "center",
     alignItems: "center",
+    paddingRight: "20px",
+    paddingLeft: "20px",
     gap: "10px",
   });
 

src/main/VideoPlayers.tsx

@@ -449,7 +449,7 @@ export const VideoPlayer = React.forwardRef<VideoPlayerForwardRef, VideoPlayerPr
       } else {
         return (
           <ErrorBox>
-            {t("video.loadError-text")}
+            {t("error.loadError-text")}
           </ErrorBox>
         );
       }

src/util/utilityFunctions.ts

@@ -2,7 +2,7 @@ import { nanoid } from "@reduxjs/toolkit";
 import { WebVTTParser, WebVTTSerializer } from "webvtt-parser";
 import { ExtendedSubtitleCue, SubtitleCue } from "../types";
 import { useEffect, useState, useRef } from "react";
-import i18next from "i18next";
+import i18next, { TFunction } from "i18next";
 
 export const roundToDecimalPlace = (num: number, decimalPlace: number) => {
   const decimalFactor = Math.pow(10, decimalPlace);
@@ -221,3 +221,16 @@ export const isJson = (text: string) => {
     return false;
   }
 };
+
+// Error message depending on the http error code
+export function readableErrorMessage(t: TFunction, errorMessage?: string) {
+  if (!errorMessage) {
+    return t("error.comError-text");
+  }
+
+  if (errorMessage.includes("403") || errorMessage.includes("401")) {
+    return t("error.unauthorizedError-text");
+  } else {
+    return t("error.comError-text");
+  }
+}