From 2e7dfe564ee226b2de3ec1e97ee90bf724341275 Mon Sep 17 00:00:00 2001
From: Arnei <arnewilken@yahoo.de>
Date: Tue, 21 Feb 2023 12:44:27 +0100
Subject: [PATCH 01/47] Add type checking to i18n

Adds type checking to our translation library.  This will help
us avoid using translation strings that do not exist.

I've use "TFuncKey" as the type for cases where we pass a
variable string  instead of a literal. This could arguably be
improved upon in the future.

Also some related cleanup.
---
 src/i18n/i18next.d.ts              | 13 +++++++++++++
 src/index.tsx                      |  1 +
 src/main/CuttingActions.tsx        |  1 -
 src/main/Discard.tsx               |  1 -
 src/main/Error.tsx                 |  1 -
 src/main/FinishMenu.tsx            |  1 -
 src/main/KeyboardControls.tsx      | 11 ++++++-----
 src/main/Landing.tsx               |  1 -
 src/main/MainMenu.tsx              |  1 -
 src/main/Metadata.tsx              | 15 +++++++--------
 src/main/Save.tsx                  |  5 ++---
 src/main/SubtitleSelect.tsx        |  2 +-
 src/main/SubtitleTimeline.tsx      |  3 ++-
 src/main/TheEnd.tsx                |  1 -
 src/main/Thumbnail.tsx             |  2 +-
 src/main/Timeline.tsx              |  1 -
 src/main/Video.tsx                 |  1 -
 src/main/WorkflowConfiguration.tsx |  5 ++---
 src/main/WorkflowSelection.tsx     |  3 +--
 19 files changed, 36 insertions(+), 33 deletions(-)
 create mode 100644 src/i18n/i18next.d.ts

diff --git a/src/i18n/i18next.d.ts b/src/i18n/i18next.d.ts
new file mode 100644
index 000000000..bd7c548e0
--- /dev/null
+++ b/src/i18n/i18next.d.ts
@@ -0,0 +1,13 @@
+// import the original type declarations
+import 'i18next';
+
+// import all namespaces (for the default language, only)
+import translation from '../i18n/locales/en-US.json';
+
+declare module 'i18next' {
+  interface CustomTypeOptions {
+    resources: {
+      translation: typeof translation;
+    };
+  }
+}
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index f5a9a060b..e8fc5e6bd 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -12,6 +12,7 @@ import { MuiPickersUtilsProvider } from '@material-ui/pickers';
 import DateFnsUtils from '@date-io/date-fns';
 import { GlobalHotKeys } from 'react-hotkeys';
 
+import './i18n/config';
 
 // Load config here
 // Load the rest of the application and try to fetch the settings file from the
diff --git a/src/main/CuttingActions.tsx b/src/main/CuttingActions.tsx
index c314392a6..d82714d9a 100644
--- a/src/main/CuttingActions.tsx
+++ b/src/main/CuttingActions.tsx
@@ -22,7 +22,6 @@ import { GlobalHotKeys, KeySequence, KeyMapOptions } from "react-hotkeys";
 import { cuttingKeyMap } from "../globalKeys";
 import { ActionCreatorWithoutPayload } from "@reduxjs/toolkit";
 
-import './../i18n/config';
 import { useTranslation } from 'react-i18next';
 import { selectTheme, Theme } from "../redux/themeSlice";
 import { ThemedTooltip } from "./Tooltip";
diff --git a/src/main/Discard.tsx b/src/main/Discard.tsx
index 95e6716a3..d33ca4d58 100644
--- a/src/main/Discard.tsx
+++ b/src/main/Discard.tsx
@@ -14,7 +14,6 @@ import { setEnd } from '../redux/endSlice'
 
 import { PageButton } from './Finish'
 
-import './../i18n/config';
 import { useTranslation } from 'react-i18next';
 import { selectTheme } from "../redux/themeSlice";
 
diff --git a/src/main/Error.tsx b/src/main/Error.tsx
index 427cb5b51..7b4fa988d 100644
--- a/src/main/Error.tsx
+++ b/src/main/Error.tsx
@@ -9,7 +9,6 @@ import { useSelector } from 'react-redux';
 import { selectErrorDetails, selectErrorIcon, selectErrorMessage, selectErrorTitle } from '../redux/errorSlice'
 import { flexGapReplacementStyle } from "../cssStyles";
 
-import './../i18n/config';
 import { useTranslation } from 'react-i18next';
 
 /**
diff --git a/src/main/FinishMenu.tsx b/src/main/FinishMenu.tsx
index 336aef297..9b5203cd5 100644
--- a/src/main/FinishMenu.tsx
+++ b/src/main/FinishMenu.tsx
@@ -11,7 +11,6 @@ import {
 import { useDispatch, useSelector } from 'react-redux';
 import { setState, setPageNumber, finish } from '../redux/finishSlice'
 
-import './../i18n/config';
 import { useTranslation } from 'react-i18next';
 import { selectTheme } from "../redux/themeSlice";
 
diff --git a/src/main/KeyboardControls.tsx b/src/main/KeyboardControls.tsx
index 53f20b7c5..181c39fb3 100644
--- a/src/main/KeyboardControls.tsx
+++ b/src/main/KeyboardControls.tsx
@@ -1,4 +1,5 @@
 import { css } from "@emotion/react";
+import { TFuncKey } from "i18next";
 import React from "react";
 
 import { KeyMapDisplayOptions } from 'react-hotkeys';
@@ -7,10 +8,10 @@ import { useSelector } from "react-redux";
 import { flexGapReplacementStyle } from "../cssStyles";
 import { getAllHotkeys } from "../globalKeys";
 import { selectTheme } from "../redux/themeSlice";
-import i18next from "./../i18n/config";
 
-const Group: React.FC<{name: string, entries: KeyMapDisplayOptions[]}> = ({name, entries}) => {
+const Group: React.FC<{name: TFuncKey, entries: KeyMapDisplayOptions[]}> = ({name, entries}) => {
 
+  const { t } = useTranslation();
   const theme = useSelector(selectTheme);
 
   const groupStyle = css({
@@ -26,7 +27,7 @@ const Group: React.FC<{name: string, entries: KeyMapDisplayOptions[]}> = ({name,
 
   return (
     <div css={groupStyle}>
-      <h3 css={headingStyle}>{i18next.t(name)}</h3>
+      <h3 css={headingStyle}>{t(name)}</h3>
       {entries.map((entry: KeyMapDisplayOptions, index: number) => (
         <Entry params={entry} key={index}></Entry>
       ))}
@@ -117,7 +118,7 @@ const KeyboardControls: React.FC<{}> = () => {
   const render = () => {
     if (keyMap && Object.keys(keyMap).length > 0) {
 
-      var obj: Record<string,Array<KeyMapDisplayOptions>> = {}
+      var obj: Record<string, Array<KeyMapDisplayOptions>> = {}
       obj[t("keyboardControls.defaultGroupName")] = []    // For keys without a group
 
       // Sort by group
@@ -136,7 +137,7 @@ const KeyboardControls: React.FC<{}> = () => {
       const groups: JSX.Element[] = [];
       for (const key in obj) {
         if (obj[key].length > 0) {
-          groups.push(<Group name={key} entries={obj[key]} key={key}/>);
+          groups.push(<Group name={key as TFuncKey} entries={obj[key]} key={key}/>);
         }
       }
 
diff --git a/src/main/Landing.tsx b/src/main/Landing.tsx
index 4993cada5..3584371b5 100644
--- a/src/main/Landing.tsx
+++ b/src/main/Landing.tsx
@@ -2,7 +2,6 @@ import React from "react";
 
 import { css } from '@emotion/react'
 
-import './../i18n/config';
 import { useTranslation } from 'react-i18next';
 
 /**
diff --git a/src/main/MainMenu.tsx b/src/main/MainMenu.tsx
index 9d7832f1f..22df87bd8 100644
--- a/src/main/MainMenu.tsx
+++ b/src/main/MainMenu.tsx
@@ -15,7 +15,6 @@ import { settings } from '../config'
 import { basicButtonStyle, flexGapReplacementStyle } from '../cssStyles'
 import { setIsPlaying } from "../redux/videoSlice";
 
-import './../i18n/config';
 import { useTranslation } from 'react-i18next';
 import { resetPostRequestState as metadataResetPostRequestState } from "../redux/metadataSlice";
 import { resetPostRequestState } from "../redux/workflowPostSlice";
diff --git a/src/main/Metadata.tsx b/src/main/Metadata.tsx
index c0b6e1dca..ea6ae6a02 100644
--- a/src/main/Metadata.tsx
+++ b/src/main/Metadata.tsx
@@ -20,8 +20,6 @@ import {
 } from 'mui-rff';
 import DateFnsUtils from "@date-io/date-fns";
 
-import './../i18n/config';
-import i18next from "./../i18n/config";
 import { useTranslation } from 'react-i18next';
 import { DateTime as LuxonDateTime} from "luxon";
 
@@ -31,6 +29,7 @@ import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { AppDispatch } from "../redux/store";
 import { selectTheme } from "../redux/themeSlice";
 import { ThemeProvider } from "@mui/material/styles";
+import { TFuncKey } from "i18next";
 
 /**
  * Creates a Metadata form
@@ -475,10 +474,10 @@ const Metadata: React.FC<{}> = () => {
         // Parse Label
         let descLabel = null
         if (i18n.exists(`metadata.${field.id}`)) {
-          descLabel = t(`metadata.${field.id}.${key.replaceAll(".", "-")}`)
+          descLabel = t(`metadata.${field.id}.${key.replaceAll(".", "-")}` as TFuncKey)
 
           if (field.id === "license") {
-            descLabel = t(`metadata.${field.id}.${JSON.parse(key).label.replaceAll(".", "-")}`)
+            descLabel = t(`metadata.${field.id}.${JSON.parse(key).label.replaceAll(".", "-")}` as TFuncKey)
           }
         }
 
@@ -552,8 +551,8 @@ const Metadata: React.FC<{}> = () => {
                   onBlur: (e: any) => {blurWithSubmit(e, input)},
                   showError: showErrorOnBlur
                 }}
-                leftArrowButtonText={i18next.t('metadata.calendar-prev')}
-                rightArrowButtonText={i18next.t('metadata.calendar-next')}
+                leftArrowButtonText={t('metadata.calendar-prev')}
+                rightArrowButtonText={t('metadata.calendar-next')}
               />
             </ThemeProvider>
           </LocalizationProvider>
@@ -629,7 +628,7 @@ const Metadata: React.FC<{}> = () => {
                   <div css={fieldStyle} data-testid={field.id}>
                     <label css={fieldLabelStyle} htmlFor={input.name}>{
                       i18n.exists(`metadata.labels.${field.id}`) ?
-                      t(`metadata.labels.${field.id}`) : field.id
+                      t(`metadata.labels.${field.id}` as TFuncKey) : field.id
                     }</label>
 
                     {generateComponentWithModifiedInput(field, input)}
@@ -649,7 +648,7 @@ const Metadata: React.FC<{}> = () => {
       <div key={catalogIndex}>
         <h2>
           {i18n.exists(`metadata.${catalog.title.replaceAll(".", "-")}`) ?
-            t(`metadata.${catalog.title.replaceAll(".", "-")}`) : catalog.title
+            t(`metadata.${catalog.title.replaceAll(".", "-")}` as TFuncKey) : catalog.title
           }
         </h2>
 
diff --git a/src/main/Save.tsx b/src/main/Save.tsx
index 779575b51..dd23c8210 100644
--- a/src/main/Save.tsx
+++ b/src/main/Save.tsx
@@ -16,7 +16,6 @@ import { postVideoInformation, selectStatus, selectError } from '../redux/workfl
 
 import { PageButton } from './Finish'
 
-import './../i18n/config';
 import { useTranslation } from 'react-i18next';
 import { AppDispatch } from "../redux/store";
 import { postMetadata, selectPostError, selectPostStatus, setHasChanges as metadataSetHasChanges,
@@ -85,11 +84,11 @@ const Save : React.FC<{}> = () => {
       {render()}
       <div css={errorBoxStyle(postWorkflowStatus === "failed", theme)} role="alert">
         <span>{t("various.error-text")}</span><br />
-        {postError ? t("various.error-details-text", {errorMessage: postError}) : t("various.error-noDetails-text")}<br />
+        {postError ? t("various.error-details-text", {errorMessage: postError}) : t("various.error-text")}<br />
       </div>
       <div css={errorBoxStyle(postMetadataStatus === "failed", theme)} role="alert">
         <span>{t("various.error-text")}</span><br />
-        {postMetadataError ? t("various.error-details-text", {errorMessage: postMetadataError}) : t("various.error-noDetails-text")}<br />
+        {postMetadataError ? t("various.error-details-text", {errorMessage: postMetadataError}) : t("various.error-text")}<br />
       </div>
     </div>
   );
diff --git a/src/main/SubtitleSelect.tsx b/src/main/SubtitleSelect.tsx
index c11158c78..cea89256a 100644
--- a/src/main/SubtitleSelect.tsx
+++ b/src/main/SubtitleSelect.tsx
@@ -199,7 +199,7 @@ const SubtitleAddButton: React.FC<{languages: {subFlavor: string, title: string}
     <ThemedTooltip title={isPlusDisplay ? t("subtitles.createSubtitleButton-tooltip") : ""}>
       <div css={[basicButtonStyle(theme), tileButtonStyle(theme), !isPlusDisplay && disableButtonAnimation]}
         role="button" tabIndex={0}
-        aria-label={isPlusDisplay ? t("subtitles.createSubtitleButton-tooltip") : t("createSubtitleButton-clicked-tooltip-aria")}
+        aria-label={isPlusDisplay ? t("subtitles.createSubtitleButton-tooltip") : t("subtitles.createSubtitleButton-clicked-tooltip-aria")}
         onClick={ () => setIsPlusDisplay(false) }
         onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => { if (event.key === " " || event.key === "Enter") {
           setIsPlusDisplay(false)
diff --git a/src/main/SubtitleTimeline.tsx b/src/main/SubtitleTimeline.tsx
index 07bbe2674..c0b82c1fc 100644
--- a/src/main/SubtitleTimeline.tsx
+++ b/src/main/SubtitleTimeline.tsx
@@ -24,7 +24,7 @@ import { scrubberKeyMap } from "../globalKeys";
 import ScrollContainer, { ScrollEvent } from "react-indiana-drag-scroll";
 import { selectTheme } from "../redux/themeSlice";
 import { ThemedTooltip } from "./Tooltip";
-import { t } from "i18next";
+import { useTranslation } from "react-i18next";
 
 /**
  * Copy-paste of the timeline in Video.tsx, so that we can make some small adjustments,
@@ -32,6 +32,7 @@ import { t } from "i18next";
  */
  const SubtitleTimeline: React.FC<{}> = () => {
 
+  const { t } = useTranslation();
   const theme = useSelector(selectTheme)
 
   // Init redux variables
diff --git a/src/main/TheEnd.tsx b/src/main/TheEnd.tsx
index 3bec09050..de1da1344 100644
--- a/src/main/TheEnd.tsx
+++ b/src/main/TheEnd.tsx
@@ -9,7 +9,6 @@ import { useSelector } from 'react-redux';
 import { selectEndState } from '../redux/endSlice'
 import { basicButtonStyle, flexGapReplacementStyle, navigationButtonStyle } from "../cssStyles";
 
-import './../i18n/config';
 import { useTranslation } from 'react-i18next';
 import { selectTheme } from "../redux/themeSlice";
 import { ThemedTooltip } from "./Tooltip";
diff --git a/src/main/Thumbnail.tsx b/src/main/Thumbnail.tsx
index e3cb93d6e..d5f9f9d69 100644
--- a/src/main/Thumbnail.tsx
+++ b/src/main/Thumbnail.tsx
@@ -2,7 +2,6 @@ import { css } from "@emotion/react";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { faCamera, faCopy, faInfoCircle, faTimesCircle, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { t } from "i18next";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
@@ -472,6 +471,7 @@ const ThumbnailTableSingleRow: React.FC<{
   uploadCallback: any,
   discard: any,
 }> = ({track, index, inputRefs, generate, upload, uploadCallback, discard}) => {
+  const { t } = useTranslation();
 
   return (
     <div key={index} css={thumbnailTableRowStyle}>
diff --git a/src/main/Timeline.tsx b/src/main/Timeline.tsx
index 72af50132..c1d8ae21d 100644
--- a/src/main/Timeline.tsx
+++ b/src/main/Timeline.tsx
@@ -20,7 +20,6 @@ import { convertMsToReadableString } from '../util/utilityFunctions';
 import { GlobalHotKeys } from 'react-hotkeys';
 import { scrubberKeyMap } from '../globalKeys';
 
-import './../i18n/config';
 import { useTranslation } from 'react-i18next';
 import { ActionCreatorWithPayload } from '@reduxjs/toolkit';
 import { RootState } from '../redux/store';
diff --git a/src/main/Video.tsx b/src/main/Video.tsx
index 92a8bf5b6..6e1c32352 100644
--- a/src/main/Video.tsx
+++ b/src/main/Video.tsx
@@ -22,7 +22,6 @@ import { basicButtonStyle, flexGapReplacementStyle, titleStyle, titleStyleBold }
 import { GlobalHotKeys, KeyMapOptions } from 'react-hotkeys';
 import { videoPlayerKeyMap } from "../globalKeys";
 import { SyntheticEvent } from "react";
-import './../i18n/config';
 import { useTranslation } from 'react-i18next';
 import { selectTitleFromEpisodeDc } from "../redux/metadataSlice";
 import { setError } from "../redux/errorSlice";
diff --git a/src/main/WorkflowConfiguration.tsx b/src/main/WorkflowConfiguration.tsx
index 04f8f42ff..588b106eb 100644
--- a/src/main/WorkflowConfiguration.tsx
+++ b/src/main/WorkflowConfiguration.tsx
@@ -14,7 +14,6 @@ import { postVideoInformationWithWorkflow, selectStatus, selectError } from '../
 import { PageButton } from './Finish'
 import { setEnd } from "../redux/endSlice";
 
-import './../i18n/config';
 import { useTranslation } from 'react-i18next';
 import { postMetadata, selectPostError, selectPostStatus, setHasChanges as metadataSetHasChanges } from "../redux/metadataSlice";
 import { AppDispatch } from "../redux/store";
@@ -56,11 +55,11 @@ const WorkflowConfiguration : React.FC<{}> = () => {
       </div>
       <div css={errorBoxStyle(postAndProcessWorkflowStatus === "failed", theme)} role="alert">
         <span>{t("various.error-text")}</span><br />
-        {postAndProcessError ? t("various.error-details-text", {errorMessage: postAndProcessError}) : t("various.error-noDetails-text")}<br/>
+        {postAndProcessError ? t("various.error-details-text", {errorMessage: postAndProcessError}) : t("various.error-text")}<br/>
       </div>
       <div css={errorBoxStyle(postMetadataStatus === "failed", theme)} role="alert">
         <span>{t("various.error-text")}</span><br />
-        {postMetadataError ? t("various.error-details-text", {errorMessage: postMetadataError}) : t("various.error-noDetails-text")}<br />
+        {postMetadataError ? t("various.error-details-text", {errorMessage: postMetadataError}) : t("various.error-text")}<br />
       </div>
     </div>
   );
diff --git a/src/main/WorkflowSelection.tsx b/src/main/WorkflowSelection.tsx
index e73c815ff..3c85eb2df 100644
--- a/src/main/WorkflowSelection.tsx
+++ b/src/main/WorkflowSelection.tsx
@@ -16,7 +16,6 @@ import { httpRequestState, Workflow } from "../types";
 import { SaveButton } from "./Save";
 import { EmotionJSX } from "@emotion/react/types/jsx-namespace";
 
-import './../i18n/config';
 import { useTranslation } from 'react-i18next';
 import { Trans } from "react-i18next";
 import { FormControlLabel, Radio, RadioGroup, withStyles } from "@material-ui/core";
@@ -97,7 +96,7 @@ const WorkflowSelection : React.FC<{}> = () => {
         </div>
         <div css={errorBoxStyle(errorStatus === "failed", theme)} role="alert">
           <span>{t("various.error-text")}</span><br />
-          {errorMessage ? t("various.error-details-text", {errorMessage: postAndProcessError}) : t("various.error-noDetails-text")}<br/>
+          {errorMessage ? t("various.error-details-text", {errorMessage: postAndProcessError}) : t("various.error-text")}<br/>
         </div>
       </div>
     );

From 610ec1c5e14652dc73eca704712657567dbfc475 Mon Sep 17 00:00:00 2001
From: zismir <zismir@users.noreply.github.com>
Date: Wed, 10 May 2023 12:29:47 +0100
Subject: [PATCH 02/47] Updated tests that were failing

---
 src/redux/__tests__/videoSlice.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/redux/__tests__/videoSlice.test.ts b/src/redux/__tests__/videoSlice.test.ts
index 1bee55d25..bee3411c1 100644
--- a/src/redux/__tests__/videoSlice.test.ts
+++ b/src/redux/__tests__/videoSlice.test.ts
@@ -133,8 +133,8 @@ describe('Video reducer', () => {
 
     // Assert
     const rootState = { videoState: nextState };
-    expect(selectCurrentlyAt(rootState)).toEqual(20);
-    expect(selectActiveSegmentIndex(rootState)).toEqual(1);
+    expect(selectCurrentlyAt(rootState)).toEqual(21);
+    expect(selectActiveSegmentIndex(rootState)).toEqual(2);
     expect(selectPreviewTriggered(rootState)).toEqual(true);
   })
 

From 683dbe75704e90315b377c65eddd720cc216b113 Mon Sep 17 00:00:00 2001
From: Crowdin Bot <crowdin-bot@editor.opencast.org>
Date: Mon, 22 May 2023 05:06:35 +0000
Subject: [PATCH 03/47] Automatically update translation keys

---
 src/i18n/locales/el-GR.json | 269 ++++++++++++++++++++++++++++++++++++
 1 file changed, 269 insertions(+)
 create mode 100644 src/i18n/locales/el-GR.json

diff --git a/src/i18n/locales/el-GR.json b/src/i18n/locales/el-GR.json
new file mode 100644
index 000000000..2122e48a8
--- /dev/null
+++ b/src/i18n/locales/el-GR.json
@@ -0,0 +1,269 @@
+{
+    "mainMenu": {
+        "cutting-button": "Περικοπή",
+        "finish-button": "Ολοκλήρωση",
+        "select-tracks-button": "Κομμάτια",
+        "subtitles-button": "Υπότιτλοι",
+        "thumbnail-button": "Μικρογραφία",
+        "metadata-button": "Μεταδεδομένα",
+        "keyboard-controls-button": "Έλεγχοι Πληκτρολογίου",
+        "tooltip-aria": "Κύρια Πλοήγηση"
+    },
+    "cuttingActions": {
+        "cut-button": "Αποκοπή",
+        "cut-tooltip": "Διαχωρισμός του τμήματος στην τρέχουσα θέση του χρονοδιαγράμματος. Πλήκτρο συντόμευσης: {{hotkeyName}}",
+        "cut-tooltip-aria": "Αποκοπή. Διαχωρίστε το τμήμα στην τρέχουσα θέση του χρονοδιαγράμματος. Πλήκτρο συντόμευσης: {{hotkeyName}}.",
+        "delete-button": "Διαγραφή",
+        "delete-restore-tooltip": "Σήμανση ή κατάργηση του τμήματος στην τρέχουσα θέση ως διαγραφή. Πλήκτρο συντόμευσης: {{hotkeyName}}",
+        "delete-restore-tooltip-aria": "Διαγραφή και Επαναφορά. Σήμανση ή κατάργηση επισήμανσης του τμήματος στην τρέχουσα θέση ως διαγραφή. Πλήκτρο συντόμευσης: {{hotKeyName}}.",
+        "restore-button": "Επαναφορά",
+        "mergeLeft-button": "Συγχώνευση Αριστερά",
+        "mergeLeft-tooltip": "Συνδυάστε το τρέχον ενεργό τμήμα με το τμήμα στα αριστερά. Πλήκτρο συντόμευσης: {{hotkeyName}}",
+        "mergeLeft-tooltip-aria": "Συγχώνευση αριστερά. Συνδυάστε το τρέχον ενεργό τμήμα με το τμήμα στα αριστερά. Hotkey: {{hotkeyName}}.",
+        "mergeRight-button": "Συγχώνευση Δεξιά",
+        "mergeRight-tooltip": "Συνδυάστε το τρέχον ενεργό τμήμα με το τμήμα προς τα δεξιά. Πλήκτρο συντόμευσης: {{hotkeyName}}",
+        "mergeRight-tooltip-aria": "Συγχώνευση Δεξιά. Συνδυάστε το τρέχον ενεργό τμήμα με το τμήμα στα δεξιά. Πλήκτρο συντόμευσης: {{hotkeyName}}."
+    },
+    "video": {
+        "previewButton": "Λειτουργία προεπισκόπησης",
+        "previewButton-tooltip": "Παράλειψη διαγραμμένων τμημάτων κατά την αναπαραγωγή του βίντεο. Προς το παρόν {{status}}. Πλήκτρο συντόμευσης: {{hotkeyName}}",
+        "previewButton-aria": "Ενεργοποίηση ή απενεργοποίηση λειτουργίας προεπισκόπησης. Πλήκτρο συντόμευσης: {{hotkeyName}}.",
+        "playButton-tooltip": "Αναπαραγωγή βίντεο",
+        "pauseButton-tooltip": "Παύση του βίντεο",
+        "current-time-tooltip": "Τρέχουσα ώρα",
+        "time-duration-tooltip": "Διάρκεια βίντεο",
+        "duration-aria": "Διάρκεια",
+        "time-aria": "Τρέχουσα ώρα",
+        "comError-text": "Προέκυψε πρόβλημα κατά την επικοινωνία με το Opencast.",
+        "loadError-text": "Παρουσιάστηκε σφάλμα κατά τηn φόρτωση του βίντεο.",
+        "title-tooltip": "Τίτλος Βίντεο",
+        "presenter-tooltip": "Παρουσιαστές Βίντεο"
+    },
+    "finishMenu": {
+        "save-button": "Αποθήκευση αλλαγών",
+        "start-button": "Έναρξη επεξεργασίας",
+        "discard-button": "Απόρριψη αλλαγών"
+    },
+    "save": {
+        "headline-text": "Αποθήκευση τρέχοντος project",
+        "confirm-button": "Ναι, αποθήκευση αλλαγών",
+        "confirmButton-attempting-tooltip": "Προσπάθεια αποθήκευσης",
+        "confirmButton-success-tooltip": "Αποθηκεύτηκε επιτυχώς",
+        "confirmButton-failed-tooltip": "Η αποθήκευση απέτυχε",
+        "info-text": "Το βίντεο δεν θα επεξεργαστεί, αλλά όλες οι πληροφορίες κοπής θα αποθηκευτούν στο Opencast. Μπορείτε να συνεχίσετε την επεξεργασία σας αργότερα.",
+        "success-text": "Οι αλλαγές αποθηκεύτηκαν επιτυχώς! Τώρα μπορείτε να κλείσετε τον επεξεργαστή βίντεο ή να συνεχίσετε να εργάζεστε στο βίντεο.",
+        "success-tooltip-aria": "Αποθηκεύτηκε επιτυχώς",
+        "saveArea-tooltip": "Αποθήκευση Περιοχής"
+    },
+    "discard": {
+        "headline-text": "Απόρριψη αλλαγών",
+        "confirm-button": "Ναι, απόρριψη αλλαγών",
+        "info-text": "Είστε βέβαιοι ότι θέλετε να απορρίψετε τις αλλαγές σας? Αυτό δεν μπορεί να αναιρεθεί!"
+    },
+    "theEnd": {
+        "discarded-text": "Οι αλλαγές σας έχουν απορριφθεί. Τώρα μπορείτε να κλείσετε τον επεξεργαστή βίτεο.",
+        "startOver-button": "Επιτρέψτε μου να ξεκινήσω από την αρχή!",
+        "startOver-tooltip": "Ανανέωση της σελίδας για εκκίνηση από την αρχή",
+        "info-text": "Οι αλλαγές αποθηκεύτηκαν με επιτυχία στο Opencast. Η επεξεργασία των αλλαγών σας μπορεί να διαρκέσει αρκετό χρόνο, οπότε παρακαλώ να είστε υπομονετικοί. Τώρα μπορείτε να κλείσετε τον επεξεργαστή.\n"
+    },
+    "workflowSelection": {
+        "saveAndProcess-text": "Αποθήκευση & επεξεργασία",
+        "selectWF-text": "Επιλέξτε ροή εργασίας",
+        "noWorkflows-text": "Δεν υπάρχουν ροές εργασίας για να επεξεργαστείτε τις αλλαγές σας. Παρακαλώ αποθηκεύστε τις αλλαγές σας και επικοινωνήστε με έναν διαχειριστή.\n",
+        "oneWorkflow-text": "Το βίντεο θα κοπεί και θα επεξεργαστεί με τη ροή εργασίας \"{{workflow}}\". <3/> Αυτό θα πάρει κάποιο χρόνο.\n",
+        "manyWorkflows-text": "Επιλέξτε ποια ροή εργασίας θα χρησιμοποιηθεί για επεξεργασία.",
+        "startProcessing-button": "Έναρξη επεξεργασίας",
+        "back-button": "Πήγαινε με πίσω",
+        "selectWF-button": "Κάντε κλικ για να επιλέξετε αυτήν τη ροή εργασίας",
+        "selectWF-button-aria": "Πατήστε για να επιλέξετε τη ροή εργασίας: {{stateName}}\n"
+    },
+    "timeline": {
+        "generateWaveform-text": "Δημιουργία Κυματομορφής",
+        "segment-tooltip": "Τμήμα {{segment}}",
+        "scrubber-text-aria": "Δείκτης χρονοδιαγράμματος. {{currentTime}}. Ενεργό τμήμα: {{segment}}. {{segmentStatus}}. Έλεγχοι: {{moveLeft}} και {{moveRight}} για να μετακινήσετε το δείκτη χρονολογίου. {{increase}} και {{decrease}} για να αυξήσει/μειώσετε το δέλτα της κίνησης.\n",
+        "segments-text-aria": "Τμήμα {{index}}. {{segmentStatus}}. Έναρξη: {{start}}. Τέλος: {{end}}.\n"
+    },
+    "workflowConfig": {
+        "headline-text": "Ρύθμισεις παραμέτρων ροής εργασίας",
+        "satisfied-text": "Ικανοποιημένος με τις ρυθμίσεις σας;",
+        "confirm-button": "Ναι, έναρξη επεξεργασίας"
+    },
+    "metadata": {
+        "EVENTS-EVENTS-DETAILS-CATALOG-EPISODE": "Μεταδεδομένα επεισοδίου",
+        "submit-button": "Υποβολή",
+        "submit-button-tooltip": "Επιβεβαίωση αλλαγών",
+        "reset-button": "Επαναφορά",
+        "reset-button-tooltip": "Αναίρεση όλων των αλλαγών σας",
+        "submit-helpertext": "Κάντε αλλαγές όπως θέλετε και μετά πατήστε το κουμπί {{buttonName}}.\nΣημειώστε ότι θα πρέπει να ξεκινήσετε την επεξεργασία για να τεθούν σε ισχύ οι αλλαγές σας.",
+        "validation": {
+            "required": "Απαιτείται",
+            "duration-format": "Η μορφή πρέπει να είναι HH:MM:SS",
+            "datetime": "Μη έγκυρος"
+        },
+        "labels": {
+            "title": "Τίτλος",
+            "subject": "Θέμα",
+            "description": "Περιγραφή",
+            "language": "Γλώσσα",
+            "rightsHolder": "Δικαιώματα",
+            "license": "Άδεια χρήσης",
+            "isPartOf": "Σειρά",
+            "creator": "Παρουσιαστής(ές)",
+            "contributor": "Χορηγός(οι)",
+            "startDate": "Ημερομηνία έναρξης",
+            "duration": "Διάρκεια",
+            "location": "Τοποθεσία",
+            "source": "Πηγή",
+            "created": "Δημιουργήθηκε",
+            "publisher": "Εκδότης",
+            "identifier": "UID"
+        },
+        "language": {
+            "LANGUAGES-SLOVENIAN": "Σλοβενικά",
+            "LANGUAGES-PORTUGUESE": "Πορτογαλικά",
+            "LANGUAGES-ROMANSH": "Ρωμανικά",
+            "LANGUAGES-ARABIC": "Αραβικά",
+            "LANGUAGES-POLISH": "Πολωνικά",
+            "LANGUAGES-ITALIAN": "Ιταλικά",
+            "LANGUAGES-CHINESE": "Κινέζικα",
+            "LANGUAGES-FINNISH": "Φινλανδικά",
+            "LANGUAGES-DANISH": "Δανικά",
+            "LANGUAGES-UKRAINIAN": "Ουκρανικά",
+            "LANGUAGES-FRENCH": "Γαλλικά",
+            "LANGUAGES-SPANISH": "Ισπανικά",
+            "LANGUAGES-GERMAN_CH": "Ελβετικά Γερμανικά",
+            "LANGUAGES-NORWEGIAN": "Νορβηγικά",
+            "LANGUAGES-RUSSIAN": "Ρωσικά",
+            "LANGUAGES-JAPANESE": "Ιαπωνικά",
+            "LANGUAGES-DUTCH": "Ολλανδικά",
+            "LANGUAGES-TURKISH": "Τουρκικά",
+            "LANGUAGES-HINDI": "Χίντι",
+            "LANGUAGES-SWEDISH": "Σουηδικά",
+            "LANGUAGES-ENGLISH": "Αγγλικά",
+            "LANGUAGES-GERMAN": "Γερμανικά"
+        },
+        "license": {
+            "EVENTS-LICENSE-CC0": "CC0",
+            "EVENTS-LICENSE-CCBYND": "CC BY-ND",
+            "EVENTS-LICENSE-CCBYNCND": "CC BY-NC-ND",
+            "EVENTS-LICENSE-CCBYNCSA": "CC BY-NC-SA",
+            "EVENTS-LICENSE-ALLRIGHTS": "Με επιφύλαξη παντός δικαιώματος",
+            "EVENTS-LICENSE-CCBYSA": "CC-BY-SA",
+            "EVENTS-LICENSE-CCBYNC": "CC-BY-NC",
+            "EVENTS-LICENSE-CCBY": "CC-BY"
+        },
+        "calendar-prev": "Προηγούμενο",
+        "calendar-next": "Επόμενο"
+    },
+    "thumbnail": {
+        "title": "Επεξεργαστής μικρογραφίας",
+        "noThumbnailAvailable": "Δεν υπάρχει διαθέσιμη μικρογραφία",
+        "previewImageAlt": "Μικρογραφία για το κομμάτι",
+        "buttonGenerate": "Δημιουργία",
+        "buttonGenerate-tooltip": "Δημιουργία νέας μικρογραφίας από την τρέχουσα θέση σήμανσης χρονολογίου",
+        "buttonGenerate-tooltip-aria": "Δημιουργία νέας μικρογραφίας από την τρέχουσα θέση σήμανσης χρονολογίου",
+        "buttonUpload": "Ανέβασμα",
+        "buttonUpload-tooltip": "Ανέβασμα Εικόνας",
+        "buttonUpload-tooltip-aria": "Ανέβασμα Εικόνας",
+        "buttonUseForOtherThumbnails": "Χρήση για όλα τα κομμάτια",
+        "buttonUseForOtherThumbnails-tooltip": "Χρήση της μικρογραφίας για όλα τα κομμάτια",
+        "buttonUseForOtherThumbnails-tooltip-aria": "Χρήση της μικρογραφίας για όλα τα κομμάτια",
+        "buttonDiscard": "Απόρριψη",
+        "buttonDiscard-tooltip": "Απόρριψη της μικρογραφίας για αυτό το κομμάτι",
+        "buttonDiscard-tooltip-aria": "Απόρριψη της μικρογραφίας για αυτό το κομμάτι",
+        "buttonGenerateAll": "Δημιουργία Όλων",
+        "buttonGenerateAll-tooltip": "Δημιουργία νέων εικόνων επισκόπησης για όλα τα κομμάτια από την τρέχουσα θέση του χρονοδιαγράμματος",
+        "buttonGenerateAll-tooltip-aria": "Δημιουργία νέων εικόνων επισκόπησης για όλα τα κομμάτια από την τρέχουσα θέση του χρονοδιαγράμματος",
+        "explanation": "Ανεβάστε ή δημιουργήστε μια μικρογραφία για κάθε κομμάτι.",
+        "primary": "Κύριο",
+        "secondary": "Δευτερεύων"
+    },
+    "thumbnailSimple": {
+        "rowTitle": "Αλλαγή μικρογραφίας εδώ",
+        "from": "απο"
+    },
+    "error": {
+        "generic-message": "Παρουσιάστηκε ένα κρίσιμο σφάλμα",
+        "details": "Λεπτομέρειες: ",
+        "workflowActive-errorTitle": "Προσωρινά μη διαθέσιμη",
+        "workflowActive-errorMessage": "Αυτή η εκδήλωση επεξεργάζεται. Παρακαλώ περιμένετε μέχρι να ολοκληρωθεί η διαδικασία."
+    },
+    "landing": {
+        "main-heading": "Καλώς ήρθατε στον επεξεργαστή βίντεο",
+        "contact-admin": "Αν προσπαθούσατε να επεξεργαστείτε ένα συγκεκριμένο βίντεο, αλλά βλέπετε αυτή τη σελίδα, παρακαλούμε επικοινωνήστε με το διαχειριστή σας.",
+        "start-editing-1": "Για να ξεκινήσετε την επεξεργασία, καθορίστε την παράμετρο ",
+        "start-editing-2": " με το πακέτο πολυμέσων id του βίντεο που θέλετε να επεξεργαστείτε.",
+        "link-to-documentation": "Περισσότερες πληροφορίες για τη ρύθμιση παραμέτρων του επεξεργαστή βίντεο είναι διαθέσιμες στον οδηγό διαχείρισης στο "
+    },
+    "various": {
+        "error-details-text": "Λεπτομέρειες: {{errorMessage}}\n",
+        "error-text": "Παρουσιάστηκε σφάλμα. Παρακαλώ περιμένετε λίγο και προσπαθήστε ξανά.",
+        "goBack-button": "Όχι, πήγαινέ με πίσω"
+    },
+    "trackSelection": {
+        "description": "Επιλέξτε ή αποεπιλέξτε ποια κομμάτια χρησιμοποιούνται για την επεξεργασία και τη δημοσίευση.",
+        "trackInactive": "ανενεργό",
+        "deleteTrackText": "Διαγραφή Κομματιού",
+        "restoreTrackText": "Επαναφορά Κομματιού",
+        "cannotDeleteTrackText": "Αδυναμία Διαγραφής Κομματιού",
+        "deleteTrackTooltip": "Να μην κωδικοποιηθεί και δημοσιευτεί αυτό το κομμάτι.",
+        "restoreTrackTooltip": "Κωδικοποίηση και δημοσίευση αυτού του κομματιού.",
+        "cannotDeleteTrackTooltip": "Δεν είναι δυνατή η αφαίρεση αυτού του κομματιού από τη δημοσίευση."
+    },
+    "subtitles": {
+        "selectSubtitleButton-tooltip": "Επεξεργασία υποτίτλων για {{title}}",
+        "selectSubtitleButton-tooltip-aria": "Επιλέξτε {{title}} για επεξεργασία υποτίτλων",
+        "createSubtitleButton-tooltip": "Ανοίγει ένα διάλογο για τη δημιουργία νέων υποτίτλων",
+        "createSubtitleButton-clicked-tooltip-aria": "Περιέχει ένα διάλογο για τη δημιουργία νέων υποτίτλων",
+        "createSubtitleButton-createButton": "Δημιουργία",
+        "createSubtitleButton-createButton-tooltip": "Ξεκινήστε ένα νέο αρχείο υποτίτλων με τον επιλεγμένο τίτλο.",
+        "createSubtitleDropdown-label": "Επιλέξτε μια γλώσσα",
+        "backButton": "Επιστροφή",
+        "backButton-tooltip": "Επιστροφή στην επιλογή υποτίτλων",
+        "editTitle": "Επεξεργαστής υποτίτλων - {{title}}",
+        "editTitle-loading": "Φόρτωση",
+        "generic": "Γενικά"
+    },
+    "subtitleList": {
+        "startTime-tooltip": "Έναρξη του τμήματος",
+        "startTime-tooltip-aria": "Ξεκινώντας από {0}",
+        "endTime-tooltip": "Τέλος του τμήματος",
+        "endTime-tooltip-aria": "Τελειώνει στις",
+        "addSegmentAbove": "Προσθήκη τμήματος πάνω",
+        "addSegmentBelow": "Προσθήκη τμήματος κάτω",
+        "jumpToSegmentAbove": "Μετάβαση στο τμήμα πάνω",
+        "jumpToSegmentBelow": "Μετάβαση στο τμήμα κάτω",
+        "deleteSegment": "Διαγραφή τμήματος"
+    },
+    "subtitleVideoArea": {
+        "selectVideoLabel": "Τύποι Βίντεο"
+    },
+    "subtitleTimeline": {
+        "overviewTimelineTooltip": "Επισκόπηση χρονολογίου"
+    },
+    "keyboardControls": {
+        "header": "Έλεγχοι Πληκτρολογίου",
+        "defaultGroupName": "Γενικά",
+        "missingLabel": "Άγνωστο",
+        "groupVideoPlayer": "Αναπαραγωγή Βίντεο",
+        "groupCuttingView": "Περικοπή",
+        "groupCuttingViewScrubber": "Χρονολόγιο",
+        "groupSubtitleList": "Υπότιτλοι",
+        "sequenceSeparator": "ή",
+        "genericError": "Αποτυχία φόρτωσης επισκόπησης",
+        "videoPlayButton": "Αναπαραγωγή/Παύση Βίντεο",
+        "scrubberLeft": "Μετακίνηση αριστερά",
+        "scrubberRight": "Μετακίνηση δεξιά",
+        "scrubberIncrease": "Μετακίνηση γρηγορότερα",
+        "scrubberDecrease": "Μετακίνηση πιο αργά"
+    },
+    "theme": {
+        "appearance": "Εμφάνιση",
+        "selectThemesLabel": "Εμφανίσεις",
+        "darkmode": "Σκοτεινή λειτουργία",
+        "lightmode": "Φωτεινή λειτουργία",
+        "system": "Σχεδιασμός συστήματος",
+        "high-contrast-dark": "Υψηλή αντίθεση (Λειτουργία μαύρου)",
+        "high-contrast-light": "Υψηλή αντίθεση (λειτουργία άσπρου)"
+    }
+}

From 283e9ce078aa709c26d748b4a0740749c7fa20d4 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 1 Jun 2023 04:57:46 +0000
Subject: [PATCH 04/47] Bump @mui/material from 5.12.2 to 5.13.3

Bumps [@mui/material](https://github.com/mui/material-ui/tree/HEAD/packages/mui-material) from 5.12.2 to 5.13.3.
- [Release notes](https://github.com/mui/material-ui/releases)
- [Changelog](https://github.com/mui/material-ui/blob/master/CHANGELOG.md)
- [Commits](https://github.com/mui/material-ui/commits/v5.13.3/packages/mui-material)

---
updated-dependencies:
- dependency-name: "@mui/material"
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 270 ++++++++++++++++++++++------------------------
 package.json      |   2 +-
 2 files changed, 130 insertions(+), 142 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 76b9a1c38..15571561f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,7 @@
         "@fortawesome/free-solid-svg-icons": "^6.4.0",
         "@fortawesome/react-fontawesome": "^0.2.0",
         "@iarna/toml": "^2.2.5",
-        "@mui/material": "^5.12.2",
+        "@mui/material": "^5.13.3",
         "@mui/styles": "^5.12.0",
         "@mui/x-date-pickers": "^5.0.20",
         "@reduxjs/toolkit": "^1.9.5",
@@ -2221,11 +2221,6 @@
         "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/@emotion/babel-plugin/node_modules/stylis": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
-      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
-    },
     "node_modules/@emotion/babel-preset-css-prop": {
       "version": "11.11.0",
       "resolved": "https://registry.npmjs.org/@emotion/babel-preset-css-prop/-/babel-preset-css-prop-11.11.0.tgz",
@@ -2241,15 +2236,15 @@
       }
     },
     "node_modules/@emotion/cache": {
-      "version": "11.10.8",
-      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.8.tgz",
-      "integrity": "sha512-5fyqGHi51LU95o7qQ/vD1jyvC4uCY5GcBT+UgP4LHdpO9jPDlXqhrRr9/wCKmfoAvh5G/F7aOh4MwQa+8uEqhA==",
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
       "dependencies": {
-        "@emotion/memoize": "^0.8.0",
-        "@emotion/sheet": "^1.2.1",
-        "@emotion/utils": "^1.2.0",
-        "@emotion/weak-memoize": "^0.3.0",
-        "stylis": "4.1.4"
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "stylis": "4.2.0"
       }
     },
     "node_modules/@emotion/hash": {
@@ -2258,11 +2253,11 @@
       "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
     },
     "node_modules/@emotion/is-prop-valid": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz",
-      "integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
+      "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
       "dependencies": {
-        "@emotion/memoize": "^0.8.0"
+        "@emotion/memoize": "^0.8.1"
       }
     },
     "node_modules/@emotion/memoize": {
@@ -2306,9 +2301,9 @@
       }
     },
     "node_modules/@emotion/sheet": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.1.tgz",
-      "integrity": "sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA=="
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
     },
     "node_modules/@emotion/styled": {
       "version": "11.10.8",
@@ -2351,9 +2346,9 @@
       "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
     },
     "node_modules/@emotion/weak-memoize": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz",
-      "integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg=="
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
     },
     "node_modules/@eslint/eslintrc": {
       "version": "1.3.3",
@@ -3936,14 +3931,14 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
     "node_modules/@mui/base": {
-      "version": "5.0.0-alpha.127",
-      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.127.tgz",
-      "integrity": "sha512-FoRQd0IOH9MnfyL5yXssyQRnC4vXI+1bwkU1idr+wNkP1ZfxE+JsThHcfl1dy5azLssVUGTtQFD9edQLdbyJog==",
+      "version": "5.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.3.tgz",
+      "integrity": "sha512-ErOMoGNpgf6BF5W+jgXDiRlXJnpSeg8XSRonuY5UCCMHIlOWtKDtt/LS3qDAbFFGb7tV/y6EBddbcMeexx+zHw==",
       "dependencies": {
         "@babel/runtime": "^7.21.0",
-        "@emotion/is-prop-valid": "^1.2.0",
+        "@emotion/is-prop-valid": "^1.2.1",
         "@mui/types": "^7.2.4",
-        "@mui/utils": "^5.12.0",
+        "@mui/utils": "^5.13.1",
         "@popperjs/core": "^2.11.7",
         "clsx": "^1.2.1",
         "prop-types": "^15.8.1",
@@ -3973,26 +3968,26 @@
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "5.12.2",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.12.2.tgz",
-      "integrity": "sha512-Qn7dy8tql6T0hY6gTFPkpWlnqVVFGu5Z6QzEzUSzzmLZpfAx4kf8sFz0PHiB7gU5yrqcZF9picMx1shpRY/rXw==",
+      "version": "5.13.3",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.13.3.tgz",
+      "integrity": "sha512-w4//nRIi9fiMow/MmhkForOezd8nc229EpSZZ5DzwpJNOmAXwypFTapOUVAGTUQiTJyeZXUNbQqYuUIrIs2nbg==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mui"
       }
     },
     "node_modules/@mui/material": {
-      "version": "5.12.2",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.12.2.tgz",
-      "integrity": "sha512-XOVy6fVC0rI2dEwDq/1s4Te2hewTUe6lznzeVnruyATGkdmM06WnHqkZOoLVIWo9hWwAxpcgTDcAIVpFtt1nrw==",
+      "version": "5.13.3",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.13.3.tgz",
+      "integrity": "sha512-10pek+Bz+PZ4rjUf3KTKfXWjPMUqU1nSnRPf4DAXABhsjzelGGfGW/EICgrLRrttYplTJZhoponWALezAge8ug==",
       "dependencies": {
         "@babel/runtime": "^7.21.0",
-        "@mui/base": "5.0.0-alpha.127",
-        "@mui/core-downloads-tracker": "^5.12.2",
-        "@mui/system": "^5.12.1",
+        "@mui/base": "5.0.0-beta.3",
+        "@mui/core-downloads-tracker": "^5.13.3",
+        "@mui/system": "^5.13.2",
         "@mui/types": "^7.2.4",
-        "@mui/utils": "^5.12.0",
-        "@types/react-transition-group": "^4.4.5",
+        "@mui/utils": "^5.13.1",
+        "@types/react-transition-group": "^4.4.6",
         "clsx": "^1.2.1",
         "csstype": "^3.1.2",
         "prop-types": "^15.8.1",
@@ -4031,12 +4026,12 @@
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
     "node_modules/@mui/private-theming": {
-      "version": "5.12.0",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.12.0.tgz",
-      "integrity": "sha512-w5dwMen1CUm1puAtubqxY9BIzrBxbOThsg2iWMvRJmWyJAPdf3Z583fPXpqeA2lhTW79uH2jajk5Ka4FuGlTPg==",
+      "version": "5.13.1",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.13.1.tgz",
+      "integrity": "sha512-HW4npLUD9BAkVppOUZHeO1FOKUJWAwbpy0VQoGe3McUYTlck1HezGHQCfBQ5S/Nszi7EViqiimECVl9xi+/WjQ==",
       "dependencies": {
         "@babel/runtime": "^7.21.0",
-        "@mui/utils": "^5.12.0",
+        "@mui/utils": "^5.13.1",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -4057,12 +4052,12 @@
       }
     },
     "node_modules/@mui/styled-engine": {
-      "version": "5.12.0",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.12.0.tgz",
-      "integrity": "sha512-frh8L7CRnvD0RDmIqEv6jFeKQUIXqW90BaZ6OrxJ2j4kIsiVLu29Gss4SbBvvrWwwatR72sBmC3w1aG4fjp9mQ==",
+      "version": "5.13.2",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.13.2.tgz",
+      "integrity": "sha512-VCYCU6xVtXOrIN8lcbuPmoG+u7FYuOERG++fpY74hPpEWkyFQG97F+/XfTQVYzlR2m7nPjnwVUgATcTCMEaMvw==",
       "dependencies": {
         "@babel/runtime": "^7.21.0",
-        "@emotion/cache": "^11.10.7",
+        "@emotion/cache": "^11.11.0",
         "csstype": "^3.1.2",
         "prop-types": "^15.8.1"
       },
@@ -4128,15 +4123,15 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "5.12.1",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.12.1.tgz",
-      "integrity": "sha512-Po+sicdV3bbRYXdU29XZaHPZrW7HUYUqU1qCu77GCCEMbahC756YpeyefdIYuPMUg0OdO3gKIUfDISBrkjJL+w==",
+      "version": "5.13.2",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.13.2.tgz",
+      "integrity": "sha512-TPyWmRJPt0JPVxacZISI4o070xEJ7ftxpVtu6LWuYVOUOINlhoGOclam4iV8PDT3EMQEHuUrwU49po34UdWLlw==",
       "dependencies": {
         "@babel/runtime": "^7.21.0",
-        "@mui/private-theming": "^5.12.0",
-        "@mui/styled-engine": "^5.12.0",
+        "@mui/private-theming": "^5.13.1",
+        "@mui/styled-engine": "^5.13.2",
         "@mui/types": "^7.2.4",
-        "@mui/utils": "^5.12.0",
+        "@mui/utils": "^5.13.1",
         "clsx": "^1.2.1",
         "csstype": "^3.1.2",
         "prop-types": "^15.8.1"
@@ -4180,13 +4175,13 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "5.12.0",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.12.0.tgz",
-      "integrity": "sha512-RmQwgzF72p7Yr4+AAUO6j1v2uzt6wr7SWXn68KBsnfVpdOHyclCzH2lr/Xu6YOw9su4JRtdAIYfJFXsS6Cjkmw==",
+      "version": "5.13.1",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.13.1.tgz",
+      "integrity": "sha512-6lXdWwmlUbEU2jUI8blw38Kt+3ly7xkmV9ljzY4Q20WhsJMWiNry9CX8M+TaP/HbtuyR8XKsdMgQW7h7MM3n3A==",
       "dependencies": {
         "@babel/runtime": "^7.21.0",
         "@types/prop-types": "^15.7.5",
-        "@types/react-is": "^16.7.1 || ^17.0.0",
+        "@types/react-is": "^18.2.0",
         "prop-types": "^15.8.1",
         "react-is": "^18.2.0"
       },
@@ -4425,9 +4420,9 @@
       }
     },
     "node_modules/@popperjs/core": {
-      "version": "2.11.7",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
-      "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==",
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -5192,9 +5187,9 @@
       }
     },
     "node_modules/@types/react-is": {
-      "version": "17.0.3",
-      "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz",
-      "integrity": "sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-1vz2yObaQkLL7YFe/pme2cpvDsCwI1WXIfL+5eLz0MI9gFG24Re16RzUsI8t9XZn9ZWvgLNDrJBmrqXJO7GNQQ==",
       "dependencies": {
         "@types/react": "*"
       }
@@ -5209,9 +5204,9 @@
       }
     },
     "node_modules/@types/react-transition-group": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
-      "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==",
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz",
+      "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==",
       "dependencies": {
         "@types/react": "*"
       }
@@ -18321,9 +18316,9 @@
       }
     },
     "node_modules/stylis": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.4.tgz",
-      "integrity": "sha512-USf5pszRYwuE6hg9by0OkKChkQYEXfkeTtm0xKw+jqQhwyjCVLdYyMBK7R+n7dhzsblAWJnGxju4vxq5eH20GQ=="
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
     },
     "node_modules/supports-color": {
       "version": "5.5.0",
@@ -21453,13 +21448,6 @@
         "find-root": "^1.1.0",
         "source-map": "^0.5.7",
         "stylis": "4.2.0"
-      },
-      "dependencies": {
-        "stylis": {
-          "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
-          "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
-        }
       }
     },
     "@emotion/babel-plugin-jsx-pragmatic": {
@@ -21482,15 +21470,15 @@
       }
     },
     "@emotion/cache": {
-      "version": "11.10.8",
-      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.8.tgz",
-      "integrity": "sha512-5fyqGHi51LU95o7qQ/vD1jyvC4uCY5GcBT+UgP4LHdpO9jPDlXqhrRr9/wCKmfoAvh5G/F7aOh4MwQa+8uEqhA==",
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
       "requires": {
-        "@emotion/memoize": "^0.8.0",
-        "@emotion/sheet": "^1.2.1",
-        "@emotion/utils": "^1.2.0",
-        "@emotion/weak-memoize": "^0.3.0",
-        "stylis": "4.1.4"
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "stylis": "4.2.0"
       }
     },
     "@emotion/hash": {
@@ -21499,11 +21487,11 @@
       "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
     },
     "@emotion/is-prop-valid": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz",
-      "integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
+      "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
       "requires": {
-        "@emotion/memoize": "^0.8.0"
+        "@emotion/memoize": "^0.8.1"
       }
     },
     "@emotion/memoize": {
@@ -21539,9 +21527,9 @@
       }
     },
     "@emotion/sheet": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.1.tgz",
-      "integrity": "sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA=="
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
     },
     "@emotion/styled": {
       "version": "11.10.8",
@@ -21573,9 +21561,9 @@
       "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
     },
     "@emotion/weak-memoize": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz",
-      "integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg=="
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
     },
     "@eslint/eslintrc": {
       "version": "1.3.3",
@@ -22775,14 +22763,14 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
     "@mui/base": {
-      "version": "5.0.0-alpha.127",
-      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.127.tgz",
-      "integrity": "sha512-FoRQd0IOH9MnfyL5yXssyQRnC4vXI+1bwkU1idr+wNkP1ZfxE+JsThHcfl1dy5azLssVUGTtQFD9edQLdbyJog==",
+      "version": "5.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.3.tgz",
+      "integrity": "sha512-ErOMoGNpgf6BF5W+jgXDiRlXJnpSeg8XSRonuY5UCCMHIlOWtKDtt/LS3qDAbFFGb7tV/y6EBddbcMeexx+zHw==",
       "requires": {
         "@babel/runtime": "^7.21.0",
-        "@emotion/is-prop-valid": "^1.2.0",
+        "@emotion/is-prop-valid": "^1.2.1",
         "@mui/types": "^7.2.4",
-        "@mui/utils": "^5.12.0",
+        "@mui/utils": "^5.13.1",
         "@popperjs/core": "^2.11.7",
         "clsx": "^1.2.1",
         "prop-types": "^15.8.1",
@@ -22797,22 +22785,22 @@
       }
     },
     "@mui/core-downloads-tracker": {
-      "version": "5.12.2",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.12.2.tgz",
-      "integrity": "sha512-Qn7dy8tql6T0hY6gTFPkpWlnqVVFGu5Z6QzEzUSzzmLZpfAx4kf8sFz0PHiB7gU5yrqcZF9picMx1shpRY/rXw=="
+      "version": "5.13.3",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.13.3.tgz",
+      "integrity": "sha512-w4//nRIi9fiMow/MmhkForOezd8nc229EpSZZ5DzwpJNOmAXwypFTapOUVAGTUQiTJyeZXUNbQqYuUIrIs2nbg=="
     },
     "@mui/material": {
-      "version": "5.12.2",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.12.2.tgz",
-      "integrity": "sha512-XOVy6fVC0rI2dEwDq/1s4Te2hewTUe6lznzeVnruyATGkdmM06WnHqkZOoLVIWo9hWwAxpcgTDcAIVpFtt1nrw==",
+      "version": "5.13.3",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.13.3.tgz",
+      "integrity": "sha512-10pek+Bz+PZ4rjUf3KTKfXWjPMUqU1nSnRPf4DAXABhsjzelGGfGW/EICgrLRrttYplTJZhoponWALezAge8ug==",
       "requires": {
         "@babel/runtime": "^7.21.0",
-        "@mui/base": "5.0.0-alpha.127",
-        "@mui/core-downloads-tracker": "^5.12.2",
-        "@mui/system": "^5.12.1",
+        "@mui/base": "5.0.0-beta.3",
+        "@mui/core-downloads-tracker": "^5.13.3",
+        "@mui/system": "^5.13.2",
         "@mui/types": "^7.2.4",
-        "@mui/utils": "^5.12.0",
-        "@types/react-transition-group": "^4.4.5",
+        "@mui/utils": "^5.13.1",
+        "@types/react-transition-group": "^4.4.6",
         "clsx": "^1.2.1",
         "csstype": "^3.1.2",
         "prop-types": "^15.8.1",
@@ -22828,22 +22816,22 @@
       }
     },
     "@mui/private-theming": {
-      "version": "5.12.0",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.12.0.tgz",
-      "integrity": "sha512-w5dwMen1CUm1puAtubqxY9BIzrBxbOThsg2iWMvRJmWyJAPdf3Z583fPXpqeA2lhTW79uH2jajk5Ka4FuGlTPg==",
+      "version": "5.13.1",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.13.1.tgz",
+      "integrity": "sha512-HW4npLUD9BAkVppOUZHeO1FOKUJWAwbpy0VQoGe3McUYTlck1HezGHQCfBQ5S/Nszi7EViqiimECVl9xi+/WjQ==",
       "requires": {
         "@babel/runtime": "^7.21.0",
-        "@mui/utils": "^5.12.0",
+        "@mui/utils": "^5.13.1",
         "prop-types": "^15.8.1"
       }
     },
     "@mui/styled-engine": {
-      "version": "5.12.0",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.12.0.tgz",
-      "integrity": "sha512-frh8L7CRnvD0RDmIqEv6jFeKQUIXqW90BaZ6OrxJ2j4kIsiVLu29Gss4SbBvvrWwwatR72sBmC3w1aG4fjp9mQ==",
+      "version": "5.13.2",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.13.2.tgz",
+      "integrity": "sha512-VCYCU6xVtXOrIN8lcbuPmoG+u7FYuOERG++fpY74hPpEWkyFQG97F+/XfTQVYzlR2m7nPjnwVUgATcTCMEaMvw==",
       "requires": {
         "@babel/runtime": "^7.21.0",
-        "@emotion/cache": "^11.10.7",
+        "@emotion/cache": "^11.11.0",
         "csstype": "^3.1.2",
         "prop-types": "^15.8.1"
       }
@@ -22873,15 +22861,15 @@
       }
     },
     "@mui/system": {
-      "version": "5.12.1",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.12.1.tgz",
-      "integrity": "sha512-Po+sicdV3bbRYXdU29XZaHPZrW7HUYUqU1qCu77GCCEMbahC756YpeyefdIYuPMUg0OdO3gKIUfDISBrkjJL+w==",
+      "version": "5.13.2",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.13.2.tgz",
+      "integrity": "sha512-TPyWmRJPt0JPVxacZISI4o070xEJ7ftxpVtu6LWuYVOUOINlhoGOclam4iV8PDT3EMQEHuUrwU49po34UdWLlw==",
       "requires": {
         "@babel/runtime": "^7.21.0",
-        "@mui/private-theming": "^5.12.0",
-        "@mui/styled-engine": "^5.12.0",
+        "@mui/private-theming": "^5.13.1",
+        "@mui/styled-engine": "^5.13.2",
         "@mui/types": "^7.2.4",
-        "@mui/utils": "^5.12.0",
+        "@mui/utils": "^5.13.1",
         "clsx": "^1.2.1",
         "csstype": "^3.1.2",
         "prop-types": "^15.8.1"
@@ -22894,13 +22882,13 @@
       "requires": {}
     },
     "@mui/utils": {
-      "version": "5.12.0",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.12.0.tgz",
-      "integrity": "sha512-RmQwgzF72p7Yr4+AAUO6j1v2uzt6wr7SWXn68KBsnfVpdOHyclCzH2lr/Xu6YOw9su4JRtdAIYfJFXsS6Cjkmw==",
+      "version": "5.13.1",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.13.1.tgz",
+      "integrity": "sha512-6lXdWwmlUbEU2jUI8blw38Kt+3ly7xkmV9ljzY4Q20WhsJMWiNry9CX8M+TaP/HbtuyR8XKsdMgQW7h7MM3n3A==",
       "requires": {
         "@babel/runtime": "^7.21.0",
         "@types/prop-types": "^15.7.5",
-        "@types/react-is": "^16.7.1 || ^17.0.0",
+        "@types/react-is": "^18.2.0",
         "prop-types": "^15.8.1",
         "react-is": "^18.2.0"
       },
@@ -23029,9 +23017,9 @@
       }
     },
     "@popperjs/core": {
-      "version": "2.11.7",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
-      "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw=="
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
     },
     "@reduxjs/toolkit": {
       "version": "1.9.5",
@@ -23620,9 +23608,9 @@
       }
     },
     "@types/react-is": {
-      "version": "17.0.3",
-      "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz",
-      "integrity": "sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-1vz2yObaQkLL7YFe/pme2cpvDsCwI1WXIfL+5eLz0MI9gFG24Re16RzUsI8t9XZn9ZWvgLNDrJBmrqXJO7GNQQ==",
       "requires": {
         "@types/react": "*"
       }
@@ -23637,9 +23625,9 @@
       }
     },
     "@types/react-transition-group": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
-      "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==",
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz",
+      "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==",
       "requires": {
         "@types/react": "*"
       }
@@ -33081,9 +33069,9 @@
       }
     },
     "stylis": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.4.tgz",
-      "integrity": "sha512-USf5pszRYwuE6hg9by0OkKChkQYEXfkeTtm0xKw+jqQhwyjCVLdYyMBK7R+n7dhzsblAWJnGxju4vxq5eH20GQ=="
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
     },
     "supports-color": {
       "version": "5.5.0",
diff --git a/package.json b/package.json
index 96b39df30..c53c9fc4e 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@iarna/toml": "^2.2.5",
-    "@mui/material": "^5.12.2",
+    "@mui/material": "^5.13.3",
     "@mui/styles": "^5.12.0",
     "@mui/x-date-pickers": "^5.0.20",
     "@reduxjs/toolkit": "^1.9.5",

From 19f316bc2ebca8586d3dfd8282a27e28e27ae7f3 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 1 Jun 2023 04:58:14 +0000
Subject: [PATCH 05/47] Bump @emotion/react from 11.10.8 to 11.11.0

Bumps [@emotion/react](https://github.com/emotion-js/emotion) from 11.10.8 to 11.11.0.
- [Release notes](https://github.com/emotion-js/emotion/releases)
- [Changelog](https://github.com/emotion-js/emotion/blob/main/CHANGELOG.md)
- [Commits](https://github.com/emotion-js/emotion/compare/@emotion/react@11.10.8...@emotion/react@11.11.0)

---
updated-dependencies:
- dependency-name: "@emotion/react"
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 130 +++++++++++++++++++++-------------------------
 package.json      |   2 +-
 2 files changed, 60 insertions(+), 72 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 76b9a1c38..ded8f38be 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "dependencies": {
         "@date-io/date-fns": "^2.16.0",
         "@emotion/babel-preset-css-prop": "^11.10.0",
-        "@emotion/react": "^11.10.8",
+        "@emotion/react": "^11.11.0",
         "@emotion/styled": "^11.10.8",
         "@fortawesome/fontawesome-svg-core": "^6.4.0",
         "@fortawesome/free-regular-svg-icons": "^6.4.0",
@@ -2221,11 +2221,6 @@
         "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/@emotion/babel-plugin/node_modules/stylis": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
-      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
-    },
     "node_modules/@emotion/babel-preset-css-prop": {
       "version": "11.11.0",
       "resolved": "https://registry.npmjs.org/@emotion/babel-preset-css-prop/-/babel-preset-css-prop-11.11.0.tgz",
@@ -2241,15 +2236,15 @@
       }
     },
     "node_modules/@emotion/cache": {
-      "version": "11.10.8",
-      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.8.tgz",
-      "integrity": "sha512-5fyqGHi51LU95o7qQ/vD1jyvC4uCY5GcBT+UgP4LHdpO9jPDlXqhrRr9/wCKmfoAvh5G/F7aOh4MwQa+8uEqhA==",
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
       "dependencies": {
-        "@emotion/memoize": "^0.8.0",
-        "@emotion/sheet": "^1.2.1",
-        "@emotion/utils": "^1.2.0",
-        "@emotion/weak-memoize": "^0.3.0",
-        "stylis": "4.1.4"
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "stylis": "4.2.0"
       }
     },
     "node_modules/@emotion/hash": {
@@ -2271,17 +2266,17 @@
       "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
     },
     "node_modules/@emotion/react": {
-      "version": "11.10.8",
-      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.8.tgz",
-      "integrity": "sha512-ZfGfiABtJ1P1OXqOBsW08EgCDp5fK6C5I8hUJauc/VcJBGSzqAirMnFslhFWnZJ/w5HxPI36XbvMV0l4KZHl+w==",
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.0.tgz",
+      "integrity": "sha512-ZSK3ZJsNkwfjT3JpDAWJZlrGD81Z3ytNDsxw1LKq1o+xkmO5pnWfr6gmCC8gHEFf3nSSX/09YrG67jybNPxSUw==",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.10.8",
-        "@emotion/cache": "^11.10.8",
-        "@emotion/serialize": "^1.1.1",
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-        "@emotion/utils": "^1.2.0",
-        "@emotion/weak-memoize": "^0.3.0",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.2",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
         "hoist-non-react-statics": "^3.3.1"
       },
       "peerDependencies": {
@@ -2306,9 +2301,9 @@
       }
     },
     "node_modules/@emotion/sheet": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.1.tgz",
-      "integrity": "sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA=="
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
     },
     "node_modules/@emotion/styled": {
       "version": "11.10.8",
@@ -2338,9 +2333,9 @@
       "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
     },
     "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz",
-      "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
       "peerDependencies": {
         "react": ">=16.8.0"
       }
@@ -2351,9 +2346,9 @@
       "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
     },
     "node_modules/@emotion/weak-memoize": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz",
-      "integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg=="
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
     },
     "node_modules/@eslint/eslintrc": {
       "version": "1.3.3",
@@ -18321,9 +18316,9 @@
       }
     },
     "node_modules/stylis": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.4.tgz",
-      "integrity": "sha512-USf5pszRYwuE6hg9by0OkKChkQYEXfkeTtm0xKw+jqQhwyjCVLdYyMBK7R+n7dhzsblAWJnGxju4vxq5eH20GQ=="
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
     },
     "node_modules/supports-color": {
       "version": "5.5.0",
@@ -21453,13 +21448,6 @@
         "find-root": "^1.1.0",
         "source-map": "^0.5.7",
         "stylis": "4.2.0"
-      },
-      "dependencies": {
-        "stylis": {
-          "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
-          "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
-        }
       }
     },
     "@emotion/babel-plugin-jsx-pragmatic": {
@@ -21482,15 +21470,15 @@
       }
     },
     "@emotion/cache": {
-      "version": "11.10.8",
-      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.8.tgz",
-      "integrity": "sha512-5fyqGHi51LU95o7qQ/vD1jyvC4uCY5GcBT+UgP4LHdpO9jPDlXqhrRr9/wCKmfoAvh5G/F7aOh4MwQa+8uEqhA==",
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
       "requires": {
-        "@emotion/memoize": "^0.8.0",
-        "@emotion/sheet": "^1.2.1",
-        "@emotion/utils": "^1.2.0",
-        "@emotion/weak-memoize": "^0.3.0",
-        "stylis": "4.1.4"
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "stylis": "4.2.0"
       }
     },
     "@emotion/hash": {
@@ -21512,17 +21500,17 @@
       "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
     },
     "@emotion/react": {
-      "version": "11.10.8",
-      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.8.tgz",
-      "integrity": "sha512-ZfGfiABtJ1P1OXqOBsW08EgCDp5fK6C5I8hUJauc/VcJBGSzqAirMnFslhFWnZJ/w5HxPI36XbvMV0l4KZHl+w==",
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.0.tgz",
+      "integrity": "sha512-ZSK3ZJsNkwfjT3JpDAWJZlrGD81Z3ytNDsxw1LKq1o+xkmO5pnWfr6gmCC8gHEFf3nSSX/09YrG67jybNPxSUw==",
       "requires": {
         "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.10.8",
-        "@emotion/cache": "^11.10.8",
-        "@emotion/serialize": "^1.1.1",
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-        "@emotion/utils": "^1.2.0",
-        "@emotion/weak-memoize": "^0.3.0",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.2",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
         "hoist-non-react-statics": "^3.3.1"
       }
     },
@@ -21539,9 +21527,9 @@
       }
     },
     "@emotion/sheet": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.1.tgz",
-      "integrity": "sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA=="
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
     },
     "@emotion/styled": {
       "version": "11.10.8",
@@ -21562,9 +21550,9 @@
       "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
     },
     "@emotion/use-insertion-effect-with-fallbacks": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz",
-      "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
       "requires": {}
     },
     "@emotion/utils": {
@@ -21573,9 +21561,9 @@
       "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
     },
     "@emotion/weak-memoize": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz",
-      "integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg=="
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
     },
     "@eslint/eslintrc": {
       "version": "1.3.3",
@@ -33081,9 +33069,9 @@
       }
     },
     "stylis": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.4.tgz",
-      "integrity": "sha512-USf5pszRYwuE6hg9by0OkKChkQYEXfkeTtm0xKw+jqQhwyjCVLdYyMBK7R+n7dhzsblAWJnGxju4vxq5eH20GQ=="
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
     },
     "supports-color": {
       "version": "5.5.0",
diff --git a/package.json b/package.json
index 96b39df30..8287cebd1 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "dependencies": {
     "@date-io/date-fns": "^2.16.0",
     "@emotion/babel-preset-css-prop": "^11.10.0",
-    "@emotion/react": "^11.10.8",
+    "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.10.8",
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-regular-svg-icons": "^6.4.0",

From 61e98ae27b785d5e52e698be0b2f13cbe9db81cc Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 1 Jun 2023 05:01:21 +0000
Subject: [PATCH 06/47] Bump i18next-browser-languagedetector from 7.0.1 to
 7.0.2

Bumps [i18next-browser-languagedetector](https://github.com/i18next/i18next-browser-languageDetector) from 7.0.1 to 7.0.2.
- [Changelog](https://github.com/i18next/i18next-browser-languageDetector/blob/master/CHANGELOG.md)
- [Commits](https://github.com/i18next/i18next-browser-languageDetector/compare/v7.0.1...v7.0.2)

---
updated-dependencies:
- dependency-name: i18next-browser-languagedetector
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 14 +++++++-------
 package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 76b9a1c38..8961747c8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,7 +30,7 @@
         "emotion-normalize": "^11.0.1",
         "final-form": "^4.20.9",
         "i18next": "^22.0.4",
-        "i18next-browser-languagedetector": "^7.0.1",
+        "i18next-browser-languagedetector": "^7.0.2",
         "lodash": "^4.17.21",
         "luxon": "^3.3.0",
         "mui-rff": "^5.3.2",
@@ -10003,9 +10003,9 @@
       }
     },
     "node_modules/i18next-browser-languagedetector": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-7.0.1.tgz",
-      "integrity": "sha512-Pa5kFwaczXJAeHE56CHG2aWzFBMJNUNghf0Pm4SwSrEMps/PTKqW90EYWlIvhuYStf3Sn1K0vw+gH3+TLdkH1g==",
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-7.0.2.tgz",
+      "integrity": "sha512-5ViaK+gikxfqZ9M3jJ7gJkUzzu/p3HwiqfLoL1bdiL7CUb0IylcTyVLdPaTU3pH5VFWFCiGFuJDg3VkLUikWgg==",
       "dependencies": {
         "@babel/runtime": "^7.19.4"
       }
@@ -27146,9 +27146,9 @@
       }
     },
     "i18next-browser-languagedetector": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-7.0.1.tgz",
-      "integrity": "sha512-Pa5kFwaczXJAeHE56CHG2aWzFBMJNUNghf0Pm4SwSrEMps/PTKqW90EYWlIvhuYStf3Sn1K0vw+gH3+TLdkH1g==",
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-7.0.2.tgz",
+      "integrity": "sha512-5ViaK+gikxfqZ9M3jJ7gJkUzzu/p3HwiqfLoL1bdiL7CUb0IylcTyVLdPaTU3pH5VFWFCiGFuJDg3VkLUikWgg==",
       "requires": {
         "@babel/runtime": "^7.19.4"
       }
diff --git a/package.json b/package.json
index 96b39df30..4b1e7c9b7 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "emotion-normalize": "^11.0.1",
     "final-form": "^4.20.9",
     "i18next": "^22.0.4",
-    "i18next-browser-languagedetector": "^7.0.1",
+    "i18next-browser-languagedetector": "^7.0.2",
     "lodash": "^4.17.21",
     "luxon": "^3.3.0",
     "mui-rff": "^5.3.2",

From e8a7b7b5e3ad4b5e97a5be25d4f09a1eeb8e1d2b Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 1 Jun 2023 05:01:38 +0000
Subject: [PATCH 07/47] Bump react-window from 1.8.8 to 1.8.9

Bumps [react-window](https://github.com/bvaughn/react-window) from 1.8.8 to 1.8.9.
- [Release notes](https://github.com/bvaughn/react-window/releases)
- [Changelog](https://github.com/bvaughn/react-window/blob/master/CHANGELOG.md)
- [Commits](https://github.com/bvaughn/react-window/commits/1.8.9)

---
updated-dependencies:
- dependency-name: react-window
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 14 +++++++-------
 package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 76b9a1c38..2d7aa6693 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -51,7 +51,7 @@
         "react-scripts": "5.0.1",
         "react-select": "^5.7.2",
         "react-virtualized-auto-sizer": "^1.0.15",
-        "react-window": "^1.8.8",
+        "react-window": "^1.8.9",
         "redux": "^4.2.1",
         "standardized-audio-context": "^25.3.45",
         "typescript": "^4.9.5",
@@ -17153,9 +17153,9 @@
       }
     },
     "node_modules/react-window": {
-      "version": "1.8.8",
-      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.8.tgz",
-      "integrity": "sha512-D4IiBeRtGXziZ1n0XklnFGu7h9gU684zepqyKzgPNzrsrk7xOCxni+TCckjg2Nr/DiaEEGVVmnhYSlT2rB47dQ==",
+      "version": "1.8.9",
+      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.9.tgz",
+      "integrity": "sha512-+Eqx/fj1Aa5WnhRfj9dJg4VYATGwIUP2ItwItiJ6zboKWA6EX3lYDAXfGF2hyNqplEprhbtjbipiADEcwQ823Q==",
       "dependencies": {
         "@babel/runtime": "^7.0.0",
         "memoize-one": ">=3.1.1 <6"
@@ -32209,9 +32209,9 @@
       "requires": {}
     },
     "react-window": {
-      "version": "1.8.8",
-      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.8.tgz",
-      "integrity": "sha512-D4IiBeRtGXziZ1n0XklnFGu7h9gU684zepqyKzgPNzrsrk7xOCxni+TCckjg2Nr/DiaEEGVVmnhYSlT2rB47dQ==",
+      "version": "1.8.9",
+      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.9.tgz",
+      "integrity": "sha512-+Eqx/fj1Aa5WnhRfj9dJg4VYATGwIUP2ItwItiJ6zboKWA6EX3lYDAXfGF2hyNqplEprhbtjbipiADEcwQ823Q==",
       "requires": {
         "@babel/runtime": "^7.0.0",
         "memoize-one": ">=3.1.1 <6"
diff --git a/package.json b/package.json
index 96b39df30..36d2a40f8 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,7 @@
     "react-scripts": "5.0.1",
     "react-select": "^5.7.2",
     "react-virtualized-auto-sizer": "^1.0.15",
-    "react-window": "^1.8.8",
+    "react-window": "^1.8.9",
     "redux": "^4.2.1",
     "standardized-audio-context": "^25.3.45",
     "typescript": "^4.9.5",

From cf3c5f10e11d77ad66f2bf74cded2e80ef5fb317 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 1 Jun 2023 05:02:23 +0000
Subject: [PATCH 08/47] Bump react-redux from 8.0.5 to 8.0.7

Bumps [react-redux](https://github.com/reduxjs/react-redux) from 8.0.5 to 8.0.7.
- [Release notes](https://github.com/reduxjs/react-redux/releases)
- [Changelog](https://github.com/reduxjs/react-redux/blob/master/CHANGELOG.md)
- [Commits](https://github.com/reduxjs/react-redux/compare/v8.0.5...v8.0.7)

---
updated-dependencies:
- dependency-name: react-redux
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 20 ++++++++++++--------
 package.json      |  2 +-
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 76b9a1c38..bc79c13f2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -46,7 +46,7 @@
         "react-i18next": "^12.2.2",
         "react-indiana-drag-scroll": "^2.1.0",
         "react-player": "git+https://arnei@github.com/Arnei/react-player.git#20fe6c061cf7d71d33d764b4a51c9b9bbb614bf6",
-        "react-redux": "^8.0.5",
+        "react-redux": "^8.0.7",
         "react-resizable": "^3.0.5",
         "react-scripts": "5.0.1",
         "react-select": "^5.7.2",
@@ -16955,9 +16955,9 @@
       }
     },
     "node_modules/react-redux": {
-      "version": "8.0.5",
-      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz",
-      "integrity": "sha512-Q2f6fCKxPFpkXt1qNRZdEDLlScsDWyrgSj0mliK59qU6W5gvBiKkdMEG2lJzhd1rCctf0hb6EtePPLZ2e0m1uw==",
+      "version": "8.0.7",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.7.tgz",
+      "integrity": "sha512-1vRQuCQI5Y2uNmrMXg81RXKiBHY3jBzvCvNmZF437O/Z9/pZ+ba2uYHbemYXb3g8rjsacBGo+/wmfrQKzMhJsg==",
       "dependencies": {
         "@babel/runtime": "^7.12.1",
         "@types/hoist-non-react-statics": "^3.3.1",
@@ -16967,14 +16967,18 @@
         "use-sync-external-store": "^1.0.0"
       },
       "peerDependencies": {
+        "@reduxjs/toolkit": "^1 || ^2.0.0-beta.0",
         "@types/react": "^16.8 || ^17.0 || ^18.0",
         "@types/react-dom": "^16.8 || ^17.0 || ^18.0",
         "react": "^16.8 || ^17.0 || ^18.0",
         "react-dom": "^16.8 || ^17.0 || ^18.0",
         "react-native": ">=0.59",
-        "redux": "^4"
+        "redux": "^4 || ^5.0.0-beta.0"
       },
       "peerDependenciesMeta": {
+        "@reduxjs/toolkit": {
+          "optional": true
+        },
         "@types/react": {
           "optional": true
         },
@@ -32070,9 +32074,9 @@
       }
     },
     "react-redux": {
-      "version": "8.0.5",
-      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz",
-      "integrity": "sha512-Q2f6fCKxPFpkXt1qNRZdEDLlScsDWyrgSj0mliK59qU6W5gvBiKkdMEG2lJzhd1rCctf0hb6EtePPLZ2e0m1uw==",
+      "version": "8.0.7",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.7.tgz",
+      "integrity": "sha512-1vRQuCQI5Y2uNmrMXg81RXKiBHY3jBzvCvNmZF437O/Z9/pZ+ba2uYHbemYXb3g8rjsacBGo+/wmfrQKzMhJsg==",
       "requires": {
         "@babel/runtime": "^7.12.1",
         "@types/hoist-non-react-statics": "^3.3.1",
diff --git a/package.json b/package.json
index 96b39df30..62b5dca26 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "react-i18next": "^12.2.2",
     "react-indiana-drag-scroll": "^2.1.0",
     "react-player": "git+https://arnei@github.com/Arnei/react-player.git#20fe6c061cf7d71d33d764b4a51c9b9bbb614bf6",
-    "react-redux": "^8.0.5",
+    "react-redux": "^8.0.7",
     "react-resizable": "^3.0.5",
     "react-scripts": "5.0.1",
     "react-select": "^5.7.2",

From 727b1f6919575c804161debc9e4c4bff286e78d2 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 1 Jun 2023 05:03:13 +0000
Subject: [PATCH 09/47] Bump @types/lodash from 4.14.194 to 4.14.195

Bumps [@types/lodash](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/lodash) from 4.14.194 to 4.14.195.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/lodash)

---
updated-dependencies:
- dependency-name: "@types/lodash"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 14 +++++++-------
 package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 76b9a1c38..94a554829 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -59,7 +59,7 @@
       },
       "devDependencies": {
         "@playwright/test": "^1.33.0",
-        "@types/lodash": "^4.14.194",
+        "@types/lodash": "^4.14.195",
         "@types/luxon": "^3.3.0",
         "@types/react-beforeunload": "^2.1.1",
         "@types/react-final-form-listeners": "^1.0.0",
@@ -5104,9 +5104,9 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
     },
     "node_modules/@types/lodash": {
-      "version": "4.14.194",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.194.tgz",
-      "integrity": "sha512-r22s9tAS7imvBt2lyHC9B8AGwWnXaYb1tY09oyLkXDs4vArpYJzw09nj8MLx5VfciBPGIb+ZwG0ssYnEPJxn/g==",
+      "version": "4.14.195",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.195.tgz",
+      "integrity": "sha512-Hwx9EUgdwf2GLarOjQp5ZH8ZmblzcbTBC2wtQWNKARBSxM9ezRIAUpeDTgoQRAFB0+8CNWXVA9+MaSOzOF3nPg==",
       "devOptional": true
     },
     "node_modules/@types/luxon": {
@@ -23532,9 +23532,9 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
     },
     "@types/lodash": {
-      "version": "4.14.194",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.194.tgz",
-      "integrity": "sha512-r22s9tAS7imvBt2lyHC9B8AGwWnXaYb1tY09oyLkXDs4vArpYJzw09nj8MLx5VfciBPGIb+ZwG0ssYnEPJxn/g==",
+      "version": "4.14.195",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.195.tgz",
+      "integrity": "sha512-Hwx9EUgdwf2GLarOjQp5ZH8ZmblzcbTBC2wtQWNKARBSxM9ezRIAUpeDTgoQRAFB0+8CNWXVA9+MaSOzOF3nPg==",
       "devOptional": true
     },
     "@types/luxon": {
diff --git a/package.json b/package.json
index 96b39df30..1091afa7e 100644
--- a/package.json
+++ b/package.json
@@ -80,7 +80,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.33.0",
-    "@types/lodash": "^4.14.194",
+    "@types/lodash": "^4.14.195",
     "@types/luxon": "^3.3.0",
     "@types/react-beforeunload": "^2.1.1",
     "@types/react-final-form-listeners": "^1.0.0",

From 81b39126be985df83d4782036a64536c1e57ffd5 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 5 Jun 2023 12:33:47 +0000
Subject: [PATCH 10/47] Bump @playwright/test from 1.33.0 to 1.34.3

Bumps [@playwright/test](https://github.com/Microsoft/playwright) from 1.33.0 to 1.34.3.
- [Release notes](https://github.com/Microsoft/playwright/releases)
- [Commits](https://github.com/Microsoft/playwright/compare/v1.33.0...v1.34.3)

---
updated-dependencies:
- dependency-name: "@playwright/test"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 32 ++++++++++++++++----------------
 package.json      |  2 +-
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fc51c43ce..d9c56915c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -58,7 +58,7 @@
         "webvtt-parser": "^2.2.0"
       },
       "devDependencies": {
-        "@playwright/test": "^1.33.0",
+        "@playwright/test": "^1.34.3",
         "@types/lodash": "^4.14.195",
         "@types/luxon": "^3.3.0",
         "@types/react-beforeunload": "^2.1.1",
@@ -4349,13 +4349,13 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.33.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.33.0.tgz",
-      "integrity": "sha512-YunBa2mE7Hq4CfPkGzQRK916a4tuZoVx/EpLjeWlTVOnD4S2+fdaQZE0LJkbfhN5FTSKNLdcl7MoT5XB37bTkg==",
+      "version": "1.34.3",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.34.3.tgz",
+      "integrity": "sha512-zPLef6w9P6T/iT6XDYG3mvGOqOyb6eHaV9XtkunYs0+OzxBtrPAAaHotc0X+PJ00WPPnLfFBTl7mf45Mn8DBmw==",
       "dev": true,
       "dependencies": {
         "@types/node": "*",
-        "playwright-core": "1.33.0"
+        "playwright-core": "1.34.3"
       },
       "bin": {
         "playwright": "cli.js"
@@ -15218,12 +15218,12 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.33.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.33.0.tgz",
-      "integrity": "sha512-aizyPE1Cj62vAECdph1iaMILpT0WUDCq3E6rW6I+dleSbBoGbktvJtzS6VHkZ4DKNEOG9qJpiom/ZxO+S15LAw==",
+      "version": "1.34.3",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.34.3.tgz",
+      "integrity": "sha512-2pWd6G7OHKemc5x1r1rp8aQcpvDh7goMBZlJv6Co5vCNLVcQJdhxRL09SGaY6HcyHH9aT4tiynZabMofVasBYw==",
       "dev": true,
       "bin": {
-        "playwright": "cli.js"
+        "playwright-core": "cli.js"
       },
       "engines": {
         "node": ">=14"
@@ -22999,14 +22999,14 @@
       }
     },
     "@playwright/test": {
-      "version": "1.33.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.33.0.tgz",
-      "integrity": "sha512-YunBa2mE7Hq4CfPkGzQRK916a4tuZoVx/EpLjeWlTVOnD4S2+fdaQZE0LJkbfhN5FTSKNLdcl7MoT5XB37bTkg==",
+      "version": "1.34.3",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.34.3.tgz",
+      "integrity": "sha512-zPLef6w9P6T/iT6XDYG3mvGOqOyb6eHaV9XtkunYs0+OzxBtrPAAaHotc0X+PJ00WPPnLfFBTl7mf45Mn8DBmw==",
       "dev": true,
       "requires": {
         "@types/node": "*",
         "fsevents": "2.3.2",
-        "playwright-core": "1.33.0"
+        "playwright-core": "1.34.3"
       }
     },
     "@pmmmwh/react-refresh-webpack-plugin": {
@@ -31013,9 +31013,9 @@
       }
     },
     "playwright-core": {
-      "version": "1.33.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.33.0.tgz",
-      "integrity": "sha512-aizyPE1Cj62vAECdph1iaMILpT0WUDCq3E6rW6I+dleSbBoGbktvJtzS6VHkZ4DKNEOG9qJpiom/ZxO+S15LAw==",
+      "version": "1.34.3",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.34.3.tgz",
+      "integrity": "sha512-2pWd6G7OHKemc5x1r1rp8aQcpvDh7goMBZlJv6Co5vCNLVcQJdhxRL09SGaY6HcyHH9aT4tiynZabMofVasBYw==",
       "dev": true
     },
     "postcss": {
diff --git a/package.json b/package.json
index dcbabcb46..ff3ce0b26 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,7 @@
     ]
   },
   "devDependencies": {
-    "@playwright/test": "^1.33.0",
+    "@playwright/test": "^1.34.3",
     "@types/lodash": "^4.14.195",
     "@types/luxon": "^3.3.0",
     "@types/react-beforeunload": "^2.1.1",

From 3481d5332061b025f3661cafef7e98faf9fd3850 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 5 Jun 2023 12:34:16 +0000
Subject: [PATCH 11/47] Bump i18next from 22.0.4 to 22.5.0

Bumps [i18next](https://github.com/i18next/i18next) from 22.0.4 to 22.5.0.
- [Release notes](https://github.com/i18next/i18next/releases)
- [Changelog](https://github.com/i18next/i18next/blob/master/CHANGELOG.md)
- [Commits](https://github.com/i18next/i18next/compare/v22.0.4...v22.5.0)

---
updated-dependencies:
- dependency-name: i18next
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 18 +++++++++---------
 package.json      |  2 +-
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 73e9f08c6..b8ae45318 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,7 +29,7 @@
         "deepmerge": "^4.3.1",
         "emotion-normalize": "^11.0.1",
         "final-form": "^4.20.9",
-        "i18next": "^22.0.4",
+        "i18next": "^22.5.0",
         "i18next-browser-languagedetector": "^7.0.2",
         "lodash": "^4.17.21",
         "luxon": "^3.3.0",
@@ -9981,9 +9981,9 @@
       "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
     },
     "node_modules/i18next": {
-      "version": "22.0.4",
-      "resolved": "https://registry.npmjs.org/i18next/-/i18next-22.0.4.tgz",
-      "integrity": "sha512-TOp7BTMKDbUkOHMzDlVsCYWpyaFkKakrrO3HNXfSz4EeJaWwnBScRmgQSTaWHScXVHBUFXTvShrCW8uryBYFcg==",
+      "version": "22.5.0",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-22.5.0.tgz",
+      "integrity": "sha512-sqWuJFj+wJAKQP2qBQ+b7STzxZNUmnSxrehBCCj9vDOW9RDYPfqCaK1Hbh2frNYQuPziz6O2CGoJPwtzY3vAYA==",
       "funding": [
         {
           "type": "individual",
@@ -9999,7 +9999,7 @@
         }
       ],
       "dependencies": {
-        "@babel/runtime": "^7.17.2"
+        "@babel/runtime": "^7.20.6"
       }
     },
     "node_modules/i18next-browser-languagedetector": {
@@ -27142,11 +27142,11 @@
       "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
     },
     "i18next": {
-      "version": "22.0.4",
-      "resolved": "https://registry.npmjs.org/i18next/-/i18next-22.0.4.tgz",
-      "integrity": "sha512-TOp7BTMKDbUkOHMzDlVsCYWpyaFkKakrrO3HNXfSz4EeJaWwnBScRmgQSTaWHScXVHBUFXTvShrCW8uryBYFcg==",
+      "version": "22.5.0",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-22.5.0.tgz",
+      "integrity": "sha512-sqWuJFj+wJAKQP2qBQ+b7STzxZNUmnSxrehBCCj9vDOW9RDYPfqCaK1Hbh2frNYQuPziz6O2CGoJPwtzY3vAYA==",
       "requires": {
-        "@babel/runtime": "^7.17.2"
+        "@babel/runtime": "^7.20.6"
       }
     },
     "i18next-browser-languagedetector": {
diff --git a/package.json b/package.json
index b5e6c0486..e2f6bb0bb 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "deepmerge": "^4.3.1",
     "emotion-normalize": "^11.0.1",
     "final-form": "^4.20.9",
-    "i18next": "^22.0.4",
+    "i18next": "^22.5.0",
     "i18next-browser-languagedetector": "^7.0.2",
     "lodash": "^4.17.21",
     "luxon": "^3.3.0",

From 5635c137ef080155b4ab60a94eb5a3b29cecb7cb Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 5 Jun 2023 12:34:25 +0000
Subject: [PATCH 12/47] Bump react-select from 5.7.2 to 5.7.3

Bumps [react-select](https://github.com/JedWatson/react-select) from 5.7.2 to 5.7.3.
- [Release notes](https://github.com/JedWatson/react-select/releases)
- [Changelog](https://github.com/JedWatson/react-select/blob/master/docs/CHANGELOG.md)
- [Commits](https://github.com/JedWatson/react-select/compare/react-select@5.7.2...react-select@5.7.3)

---
updated-dependencies:
- dependency-name: react-select
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 14 +++++++-------
 package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 73e9f08c6..755601530 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -49,7 +49,7 @@
         "react-redux": "^8.0.7",
         "react-resizable": "^3.0.5",
         "react-scripts": "5.0.1",
-        "react-select": "^5.7.2",
+        "react-select": "^5.7.3",
         "react-virtualized-auto-sizer": "^1.0.15",
         "react-window": "^1.8.9",
         "redux": "^4.2.1",
@@ -17108,9 +17108,9 @@
       }
     },
     "node_modules/react-select": {
-      "version": "5.7.2",
-      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.7.2.tgz",
-      "integrity": "sha512-cTlJkQ8YjV6T/js8wW0owTzht0hHGABh29vjLscY4HfZGkv7hc3FFTmRp9NzY/Ib1uQ36GieAKEjxpHdpCFpcA==",
+      "version": "5.7.3",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.7.3.tgz",
+      "integrity": "sha512-z8i3NCuFFWL3w27xq92rBkVI2onT0jzIIPe480HlBjXJ3b5o6Q+Clp4ydyeKrj9DZZ3lrjawwLC5NGl0FSvUDg==",
       "dependencies": {
         "@babel/runtime": "^7.12.0",
         "@emotion/cache": "^11.4.0",
@@ -32173,9 +32173,9 @@
       }
     },
     "react-select": {
-      "version": "5.7.2",
-      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.7.2.tgz",
-      "integrity": "sha512-cTlJkQ8YjV6T/js8wW0owTzht0hHGABh29vjLscY4HfZGkv7hc3FFTmRp9NzY/Ib1uQ36GieAKEjxpHdpCFpcA==",
+      "version": "5.7.3",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.7.3.tgz",
+      "integrity": "sha512-z8i3NCuFFWL3w27xq92rBkVI2onT0jzIIPe480HlBjXJ3b5o6Q+Clp4ydyeKrj9DZZ3lrjawwLC5NGl0FSvUDg==",
       "requires": {
         "@babel/runtime": "^7.12.0",
         "@emotion/cache": "^11.4.0",
diff --git a/package.json b/package.json
index b5e6c0486..4ccacbc8f 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,7 @@
     "react-redux": "^8.0.7",
     "react-resizable": "^3.0.5",
     "react-scripts": "5.0.1",
-    "react-select": "^5.7.2",
+    "react-select": "^5.7.3",
     "react-virtualized-auto-sizer": "^1.0.15",
     "react-window": "^1.8.9",
     "redux": "^4.2.1",

From 4625d8b85d9184b50399fa19711119aa56d8f355 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 5 Jun 2023 12:34:25 +0000
Subject: [PATCH 13/47] Bump react-i18next from 12.2.2 to 12.3.1

Bumps [react-i18next](https://github.com/i18next/react-i18next) from 12.2.2 to 12.3.1.
- [Changelog](https://github.com/i18next/react-i18next/blob/master/CHANGELOG.md)
- [Commits](https://github.com/i18next/react-i18next/compare/v12.2.2...v12.3.1)

---
updated-dependencies:
- dependency-name: react-i18next
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 14 +++++++-------
 package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 73e9f08c6..96e49796b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,7 +43,7 @@
         "react-final-form": "^6.5.9",
         "react-final-form-listeners": "^1.0.3",
         "react-hotkeys": "^2.0.0",
-        "react-i18next": "^12.2.2",
+        "react-i18next": "^12.3.1",
         "react-indiana-drag-scroll": "^2.1.0",
         "react-player": "git+https://arnei@github.com/Arnei/react-player.git#20fe6c061cf7d71d33d764b4a51c9b9bbb614bf6",
         "react-redux": "^8.0.7",
@@ -16895,9 +16895,9 @@
       }
     },
     "node_modules/react-i18next": {
-      "version": "12.2.2",
-      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-12.2.2.tgz",
-      "integrity": "sha512-KBB6buBmVKXUWNxXHdnthp+38gPyBT46hJCAIQ8rX19NFL/m2ahte2KARfIDf2tMnSAL7wwck6eDOd/9zn6aFg==",
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-12.3.1.tgz",
+      "integrity": "sha512-5v8E2XjZDFzK7K87eSwC7AJcAkcLt5xYZ4+yTPDAW1i7C93oOY1dnr4BaQM7un4Hm+GmghuiPvevWwlca5PwDA==",
       "dependencies": {
         "@babel/runtime": "^7.20.6",
         "html-parse-stringify": "^3.0.1"
@@ -32038,9 +32038,9 @@
       }
     },
     "react-i18next": {
-      "version": "12.2.2",
-      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-12.2.2.tgz",
-      "integrity": "sha512-KBB6buBmVKXUWNxXHdnthp+38gPyBT46hJCAIQ8rX19NFL/m2ahte2KARfIDf2tMnSAL7wwck6eDOd/9zn6aFg==",
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-12.3.1.tgz",
+      "integrity": "sha512-5v8E2XjZDFzK7K87eSwC7AJcAkcLt5xYZ4+yTPDAW1i7C93oOY1dnr4BaQM7un4Hm+GmghuiPvevWwlca5PwDA==",
       "requires": {
         "@babel/runtime": "^7.20.6",
         "html-parse-stringify": "^3.0.1"
diff --git a/package.json b/package.json
index b5e6c0486..389d00e59 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "react-final-form": "^6.5.9",
     "react-final-form-listeners": "^1.0.3",
     "react-hotkeys": "^2.0.0",
-    "react-i18next": "^12.2.2",
+    "react-i18next": "^12.3.1",
     "react-indiana-drag-scroll": "^2.1.0",
     "react-player": "git+https://arnei@github.com/Arnei/react-player.git#20fe6c061cf7d71d33d764b4a51c9b9bbb614bf6",
     "react-redux": "^8.0.7",

From 73546d046c83727cc7bc63dd96e6b17a9b66acbe Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 5 Jun 2023 12:34:29 +0000
Subject: [PATCH 14/47] Bump standardized-audio-context from 25.3.45 to 25.3.50

Bumps [standardized-audio-context](https://github.com/chrisguttandin/standardized-audio-context) from 25.3.45 to 25.3.50.
- [Release notes](https://github.com/chrisguttandin/standardized-audio-context/releases)
- [Commits](https://github.com/chrisguttandin/standardized-audio-context/compare/v25.3.45...v25.3.50)

---
updated-dependencies:
- dependency-name: standardized-audio-context
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 70 +++++++++++++++++++++++------------------------
 package.json      |  2 +-
 2 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 73e9f08c6..09614c0d2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -53,7 +53,7 @@
         "react-virtualized-auto-sizer": "^1.0.15",
         "react-window": "^1.8.9",
         "redux": "^4.2.1",
-        "standardized-audio-context": "^25.3.45",
+        "standardized-audio-context": "^25.3.50",
         "typescript": "^4.9.5",
         "webvtt-parser": "^2.2.0"
       },
@@ -1795,9 +1795,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
-      "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.3.tgz",
+      "integrity": "sha512-XsDuspWKLUsxwCp6r7EhsExHtYfbe5oAGQ19kqngTdCPUoPQzOPdUbD/pB9PJiwb2ptYKQDjSJT3R6dC+EPqfQ==",
       "dependencies": {
         "regenerator-runtime": "^0.13.11"
       },
@@ -6091,12 +6091,12 @@
       }
     },
     "node_modules/automation-events": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/automation-events/-/automation-events-6.0.0.tgz",
-      "integrity": "sha512-mSOnckbtuJso8cczB+broNsfcuDIQ+J4GFhlW/V3iD+LAXbS4XGHhdjYvtPnCKclKcvs9cVLtUMUkNncOzUQPg==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/automation-events/-/automation-events-6.0.3.tgz",
+      "integrity": "sha512-RxBkiL3EVdKcRphs/G7E142fPITrXRHOUwpOc/pWio5EY5P17MNdn5YeIvIFcmtZJ55cWHGDzuKzRlPsB7ZRkg==",
       "dependencies": {
-        "@babel/runtime": "^7.21.0",
-        "tslib": "^2.5.0"
+        "@babel/runtime": "^7.22.3",
+        "tslib": "^2.5.2"
       },
       "engines": {
         "node": ">=16.1.0"
@@ -18115,13 +18115,13 @@
       "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw=="
     },
     "node_modules/standardized-audio-context": {
-      "version": "25.3.45",
-      "resolved": "https://registry.npmjs.org/standardized-audio-context/-/standardized-audio-context-25.3.45.tgz",
-      "integrity": "sha512-d1UVvbz0mDmEqNehvoTKlpSevRJ3YiVZ6kdboeaWX+8cl94H1w8x7c5RNdg0nqxiE049LMeF4tFPuDl5Vm78Kg==",
+      "version": "25.3.50",
+      "resolved": "https://registry.npmjs.org/standardized-audio-context/-/standardized-audio-context-25.3.50.tgz",
+      "integrity": "sha512-FGuX3OBOQ7qj9pjX6Fx7SbrIWxYIx02i7iWr04DBo/Gxzm2pEpZpaZ411ew6PLet7hfgbKbp5tDII2jnftRetQ==",
       "dependencies": {
-        "@babel/runtime": "^7.21.0",
-        "automation-events": "^6.0.0",
-        "tslib": "^2.5.0"
+        "@babel/runtime": "^7.22.3",
+        "automation-events": "^6.0.3",
+        "tslib": "^2.5.2"
       }
     },
     "node_modules/statuses": {
@@ -18800,9 +18800,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
-      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz",
+      "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w=="
     },
     "node_modules/tsutils": {
       "version": "3.21.0",
@@ -21228,9 +21228,9 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
-      "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.3.tgz",
+      "integrity": "sha512-XsDuspWKLUsxwCp6r7EhsExHtYfbe5oAGQ19kqngTdCPUoPQzOPdUbD/pB9PJiwb2ptYKQDjSJT3R6dC+EPqfQ==",
       "requires": {
         "regenerator-runtime": "^0.13.11"
       }
@@ -24303,12 +24303,12 @@
       "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg=="
     },
     "automation-events": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/automation-events/-/automation-events-6.0.0.tgz",
-      "integrity": "sha512-mSOnckbtuJso8cczB+broNsfcuDIQ+J4GFhlW/V3iD+LAXbS4XGHhdjYvtPnCKclKcvs9cVLtUMUkNncOzUQPg==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/automation-events/-/automation-events-6.0.3.tgz",
+      "integrity": "sha512-RxBkiL3EVdKcRphs/G7E142fPITrXRHOUwpOc/pWio5EY5P17MNdn5YeIvIFcmtZJ55cWHGDzuKzRlPsB7ZRkg==",
       "requires": {
-        "@babel/runtime": "^7.21.0",
-        "tslib": "^2.5.0"
+        "@babel/runtime": "^7.22.3",
+        "tslib": "^2.5.2"
       }
     },
     "autoprefixer": {
@@ -32928,13 +32928,13 @@
       "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw=="
     },
     "standardized-audio-context": {
-      "version": "25.3.45",
-      "resolved": "https://registry.npmjs.org/standardized-audio-context/-/standardized-audio-context-25.3.45.tgz",
-      "integrity": "sha512-d1UVvbz0mDmEqNehvoTKlpSevRJ3YiVZ6kdboeaWX+8cl94H1w8x7c5RNdg0nqxiE049LMeF4tFPuDl5Vm78Kg==",
+      "version": "25.3.50",
+      "resolved": "https://registry.npmjs.org/standardized-audio-context/-/standardized-audio-context-25.3.50.tgz",
+      "integrity": "sha512-FGuX3OBOQ7qj9pjX6Fx7SbrIWxYIx02i7iWr04DBo/Gxzm2pEpZpaZ411ew6PLet7hfgbKbp5tDII2jnftRetQ==",
       "requires": {
-        "@babel/runtime": "^7.21.0",
-        "automation-events": "^6.0.0",
-        "tslib": "^2.5.0"
+        "@babel/runtime": "^7.22.3",
+        "automation-events": "^6.0.3",
+        "tslib": "^2.5.2"
       }
     },
     "statuses": {
@@ -33451,9 +33451,9 @@
       }
     },
     "tslib": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
-      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz",
+      "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w=="
     },
     "tsutils": {
       "version": "3.21.0",
diff --git a/package.json b/package.json
index b5e6c0486..85fd8bd13 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
     "react-virtualized-auto-sizer": "^1.0.15",
     "react-window": "^1.8.9",
     "redux": "^4.2.1",
-    "standardized-audio-context": "^25.3.45",
+    "standardized-audio-context": "^25.3.50",
     "typescript": "^4.9.5",
     "webvtt-parser": "^2.2.0"
   },

From 2add8cd47705ca5b3800e682beb940eb7f3e4393 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 5 Jun 2023 12:37:36 +0000
Subject: [PATCH 15/47] Bump @mui/styles from 5.12.0 to 5.13.2

Bumps [@mui/styles](https://github.com/mui/material-ui/tree/HEAD/packages/mui-styles) from 5.12.0 to 5.13.2.
- [Release notes](https://github.com/mui/material-ui/releases)
- [Changelog](https://github.com/mui/material-ui/blob/master/CHANGELOG.md)
- [Commits](https://github.com/mui/material-ui/commits/v5.13.2/packages/mui-styles)

---
updated-dependencies:
- dependency-name: "@mui/styles"
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 28 ++++++++++++++--------------
 package.json      |  2 +-
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e7bfc970a..4267d6917 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,7 @@
         "@fortawesome/react-fontawesome": "^0.2.0",
         "@iarna/toml": "^2.2.5",
         "@mui/material": "^5.13.3",
-        "@mui/styles": "^5.12.0",
+        "@mui/styles": "^5.13.2",
         "@mui/x-date-pickers": "^5.0.20",
         "@reduxjs/toolkit": "^1.9.5",
         "@testing-library/jest-dom": "^5.16.5",
@@ -4083,15 +4083,15 @@
       }
     },
     "node_modules/@mui/styles": {
-      "version": "5.12.0",
-      "resolved": "https://registry.npmjs.org/@mui/styles/-/styles-5.12.0.tgz",
-      "integrity": "sha512-X7obkgZTd9X+7igqwKKe8pEncyXYdUCNmyJfHruV9TSc6LThoI29OYs6hkN6n+7ueNli+YDKdZ+TCoC1GpJuOw==",
+      "version": "5.13.2",
+      "resolved": "https://registry.npmjs.org/@mui/styles/-/styles-5.13.2.tgz",
+      "integrity": "sha512-gKNkVyk6azQ8wfCamh3yU/wLv1JscYrsQX9huQBwfwtE7kUTq2rgggdfJjRADjbcmT6IPX+oCHYjGfqqFgDIQQ==",
       "dependencies": {
         "@babel/runtime": "^7.21.0",
-        "@emotion/hash": "^0.9.0",
-        "@mui/private-theming": "^5.12.0",
+        "@emotion/hash": "^0.9.1",
+        "@mui/private-theming": "^5.13.1",
         "@mui/types": "^7.2.4",
-        "@mui/utils": "^5.12.0",
+        "@mui/utils": "^5.13.1",
         "clsx": "^1.2.1",
         "csstype": "^3.1.2",
         "hoist-non-react-statics": "^3.3.2",
@@ -4113,7 +4113,7 @@
         "url": "https://opencollective.com/mui"
       },
       "peerDependencies": {
-        "@types/react": "^17.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
         "react": "^17.0.0"
       },
       "peerDependenciesMeta": {
@@ -22841,15 +22841,15 @@
       }
     },
     "@mui/styles": {
-      "version": "5.12.0",
-      "resolved": "https://registry.npmjs.org/@mui/styles/-/styles-5.12.0.tgz",
-      "integrity": "sha512-X7obkgZTd9X+7igqwKKe8pEncyXYdUCNmyJfHruV9TSc6LThoI29OYs6hkN6n+7ueNli+YDKdZ+TCoC1GpJuOw==",
+      "version": "5.13.2",
+      "resolved": "https://registry.npmjs.org/@mui/styles/-/styles-5.13.2.tgz",
+      "integrity": "sha512-gKNkVyk6azQ8wfCamh3yU/wLv1JscYrsQX9huQBwfwtE7kUTq2rgggdfJjRADjbcmT6IPX+oCHYjGfqqFgDIQQ==",
       "requires": {
         "@babel/runtime": "^7.21.0",
-        "@emotion/hash": "^0.9.0",
-        "@mui/private-theming": "^5.12.0",
+        "@emotion/hash": "^0.9.1",
+        "@mui/private-theming": "^5.13.1",
         "@mui/types": "^7.2.4",
-        "@mui/utils": "^5.12.0",
+        "@mui/utils": "^5.13.1",
         "clsx": "^1.2.1",
         "csstype": "^3.1.2",
         "hoist-non-react-statics": "^3.3.2",
diff --git a/package.json b/package.json
index ea1784109..46ed5f580 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@iarna/toml": "^2.2.5",
     "@mui/material": "^5.13.3",
-    "@mui/styles": "^5.12.0",
+    "@mui/styles": "^5.13.2",
     "@mui/x-date-pickers": "^5.0.20",
     "@reduxjs/toolkit": "^1.9.5",
     "@testing-library/jest-dom": "^5.16.5",

From 8e4ddd5ba0841d3b5e63c158a501a39c465a61af Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 5 Jun 2023 12:37:45 +0000
Subject: [PATCH 16/47] Bump @emotion/styled from 11.10.8 to 11.11.0

Bumps [@emotion/styled](https://github.com/emotion-js/emotion) from 11.10.8 to 11.11.0.
- [Release notes](https://github.com/emotion-js/emotion/releases)
- [Changelog](https://github.com/emotion-js/emotion/blob/main/CHANGELOG.md)
- [Commits](https://github.com/emotion-js/emotion/compare/@emotion/styled@11.10.8...@emotion/styled@11.11.0)

---
updated-dependencies:
- dependency-name: "@emotion/styled"
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 34 +++++++++++++++++-----------------
 package.json      |  2 +-
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e7bfc970a..e2ade16d7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
         "@date-io/date-fns": "^2.16.0",
         "@emotion/babel-preset-css-prop": "^11.10.0",
         "@emotion/react": "^11.11.0",
-        "@emotion/styled": "^11.10.8",
+        "@emotion/styled": "^11.11.0",
         "@fortawesome/fontawesome-svg-core": "^6.4.0",
         "@fortawesome/free-regular-svg-icons": "^6.4.0",
         "@fortawesome/free-solid-svg-icons": "^6.4.0",
@@ -2306,16 +2306,16 @@
       "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
     },
     "node_modules/@emotion/styled": {
-      "version": "11.10.8",
-      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.10.8.tgz",
-      "integrity": "sha512-gow0lF4Uw/QEdX2REMhI8v6wLOabPKJ+4HKNF0xdJ2DJdznN6fxaXpQOx6sNkyBhSUL558Rmcu1Lq/MYlVo4vw==",
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.0.tgz",
+      "integrity": "sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.10.8",
-        "@emotion/is-prop-valid": "^1.2.0",
-        "@emotion/serialize": "^1.1.1",
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-        "@emotion/utils": "^1.2.0"
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/is-prop-valid": "^1.2.1",
+        "@emotion/serialize": "^1.1.2",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1"
       },
       "peerDependencies": {
         "@emotion/react": "^11.0.0-rc.0",
@@ -21536,16 +21536,16 @@
       "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
     },
     "@emotion/styled": {
-      "version": "11.10.8",
-      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.10.8.tgz",
-      "integrity": "sha512-gow0lF4Uw/QEdX2REMhI8v6wLOabPKJ+4HKNF0xdJ2DJdznN6fxaXpQOx6sNkyBhSUL558Rmcu1Lq/MYlVo4vw==",
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.0.tgz",
+      "integrity": "sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==",
       "requires": {
         "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.10.8",
-        "@emotion/is-prop-valid": "^1.2.0",
-        "@emotion/serialize": "^1.1.1",
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-        "@emotion/utils": "^1.2.0"
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/is-prop-valid": "^1.2.1",
+        "@emotion/serialize": "^1.1.2",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1"
       }
     },
     "@emotion/unitless": {
diff --git a/package.json b/package.json
index ea1784109..2a8a8eaff 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
     "@date-io/date-fns": "^2.16.0",
     "@emotion/babel-preset-css-prop": "^11.10.0",
     "@emotion/react": "^11.11.0",
-    "@emotion/styled": "^11.10.8",
+    "@emotion/styled": "^11.11.0",
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-regular-svg-icons": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",

From d15fa2c188d8b4e311c84b20c69dbd7d60918764 Mon Sep 17 00:00:00 2001
From: Arnei <arnewilken@yahoo.de>
Date: Fri, 9 Jun 2023 09:15:01 +0200
Subject: [PATCH 17/47] Add new label "type:code-quality"

I wanted another label that is specifically for
"enhancements" that are not user facing, but are
purely about enhancing the code base. None of the
existing labels seemed to fit the bill so I added one.
---
 .github/workflows/check-label.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/check-label.yml b/.github/workflows/check-label.yml
index 4ee7b9224..6dbe4bad2 100644
--- a/.github/workflows/check-label.yml
+++ b/.github/workflows/check-label.yml
@@ -17,7 +17,7 @@ jobs:
         uses: jesusvasquez333/verify-pr-label-action@v1.4.0
         with:
           github-token: '${{ secrets.GITHUB_TOKEN }}'
-          valid-labels: 'type:tests, type:infrastructure, type:enhancement, type:feature, type:dependencies, type:documentation, type:accessibility, type:security, type:bug, type:usability, type:visual-clarity'
+          valid-labels: 'type:tests, type:infrastructure, type:enhancement, type:feature, type:dependencies, type:documentation, type:accessibility, type:security, type:bug, type:usability, type:visual-clarity, type:code-quality'
           invalid-labels: 'status:duplicate, status:conflicts, status:wontfix'
           pull-request-number: '${{ github.event.pull_request.number }}'
           disable-reviews: true

From 430328bfac4aed1ed5c2a19abb048acf95ad4458 Mon Sep 17 00:00:00 2001
From: Crowdin Bot <crowdin-bot@editor.opencast.org>
Date: Mon, 12 Jun 2023 05:06:50 +0000
Subject: [PATCH 18/47] Automatically update translation keys

---
 src/i18n/locales/de-DE.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/i18n/locales/de-DE.json b/src/i18n/locales/de-DE.json
index a15513a32..62b44fff6 100644
--- a/src/i18n/locales/de-DE.json
+++ b/src/i18n/locales/de-DE.json
@@ -120,7 +120,7 @@
         },
         "language": {
             "LANGUAGES-SLOVENIAN": "Slowenisch",
-            "LANGUAGES-PORTUGUESE": "Portuguese",
+            "LANGUAGES-PORTUGUESE": "Portugiesisch",
             "LANGUAGES-ROMANSH": "Rätoromanisch",
             "LANGUAGES-ARABIC": "Arabisch",
             "LANGUAGES-POLISH": "Polnisch",
@@ -249,7 +249,7 @@
         "groupCuttingView": "Schneiden",
         "groupCuttingViewScrubber": "Zeitleiste",
         "groupSubtitleList": "Untertitel",
-        "sequenceSeparator": "or",
+        "sequenceSeparator": "oder",
         "genericError": "Fehler beim Laden der Übersicht",
         "videoPlayButton": "Video abspielen/pausieren",
         "scrubberLeft": "Nach links",

From a17041e779615c34375498f8490b343bfd069fa3 Mon Sep 17 00:00:00 2001
From: Arne Wilken <Arnei@users.noreply.github.com>
Date: Tue, 13 Jun 2023 08:21:31 +0200
Subject: [PATCH 19/47] Display critical error if Opencast does not provide a
 video duration (#329)

Display critical error if Opencast does not provide a video duration
---
 src/i18n/locales/en-US.json |  1 +
 src/main/Video.tsx          | 11 ++++++++---
 src/redux/errorSlice.ts     | 12 ++++++------
 src/redux/videoSlice.ts     |  2 +-
 4 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 8cce33658..fd8754ccb 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -38,6 +38,7 @@
       "time-aria": "Current time",
       "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.",
       "title-tooltip": "Video Title",
       "presenter-tooltip": "Video Presenters"
     },
diff --git a/src/main/Video.tsx b/src/main/Video.tsx
index 2bfc08a87..b9a8c32ed 100644
--- a/src/main/Video.tsx
+++ b/src/main/Video.tsx
@@ -46,6 +46,7 @@ export const Video: React.FC<{}> = () => {
   const dispatch = useDispatch<AppDispatch>()
   const videoURLStatus = useSelector((state: { videoState: { status: httpRequestState["status"] } }) => state.videoState.status);
   const error = useSelector((state: { videoState: { error: httpRequestState["error"] } }) => state.videoState.error)
+  const duration = useSelector(selectDuration)
   const theme = useSelector(selectTheme);
   const errorReason = useSelector((state: { videoState: { errorReason: httpRequestState["errorReason"] } }) => state.videoState.errorReason)
 
@@ -55,12 +56,16 @@ export const Video: React.FC<{}> = () => {
       dispatch(fetchVideoInformation())
     } else if (videoURLStatus === 'failed') {
       if (errorReason === 'workflowActive') {
-        dispatch(setError({error: true, errorTitle: t("error.workflowActive-errorTitle"), errorMessage: t("error.workflowActive-errorMessage"), errorDetails: undefined, errorIcon: faGears}))
+        dispatch(setError({error: true, errorTitle: t("error.workflowActive-errorTitle"), errorMessage: t("error.workflowActive-errorMessage"), errorIcon: faGears}))
       } else {
-        dispatch(setError({error: true, errorTitle: undefined, errorMessage: t("video.comError-text"), errorDetails: error, errorIcon: undefined}))
+        dispatch(setError({error: true, errorMessage: t("video.comError-text"), errorDetails: error}))
+      }
+    } else if (videoURLStatus === 'success') {
+      if (duration === null) {
+        dispatch(setError({error: true, errorMessage: t("video.durationError-text"), errorDetails: error}))
       }
     }
-  }, [videoURLStatus, dispatch, error, t, errorReason])
+  }, [videoURLStatus, dispatch, error, t, errorReason, duration])
 
   // Update based on current fetching status
   // let content
diff --git a/src/redux/errorSlice.ts b/src/redux/errorSlice.ts
index 753b2bf29..13d0eddb8 100644
--- a/src/redux/errorSlice.ts
+++ b/src/redux/errorSlice.ts
@@ -3,10 +3,10 @@ import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
 
 interface error {
   error: boolean,
-  errorTitle: string | undefined,
+  errorTitle?: string,
   errorMessage: string,
-  errorDetails: string | undefined,
-  errorIcon: IconDefinition | undefined,
+  errorDetails?: string,
+  errorIcon?: IconDefinition,
 }
 
 const initialState: error = {
@@ -26,10 +26,10 @@ export const errorSlice = createSlice({
   reducers: {
     setError: (state, action: PayloadAction<{
       error: error["error"],
-      errorTitle: error["errorTitle"],
+      errorTitle?: error["errorTitle"],
       errorMessage: error["errorMessage"],
-      errorDetails: error["errorDetails"],
-      errorIcon: error["errorIcon"]
+      errorDetails?: error["errorDetails"],
+      errorIcon?: error["errorIcon"]
     }>) => {
       state.error = action.payload.error;
       state.errorTitle = action.payload.errorTitle;
diff --git a/src/redux/videoSlice.ts b/src/redux/videoSlice.ts
index 688ab4a6c..c79b67544 100644
--- a/src/redux/videoSlice.ts
+++ b/src/redux/videoSlice.ts
@@ -23,7 +23,7 @@ export interface video {
 
   videoURLs: string[],  // Links to each video
   videoCount: number,   // Total number of videos
-  duration: number,     // Video duration in milliseconds
+  duration: number,     // Video duration in milliseconds. Can be null due to Opencast internal error
   title: string,
   presenters: string[],
   workflows: Workflow[],

From cf58558162600e36476fb28ccd840aee19597004 Mon Sep 17 00:00:00 2001
From: Arne Wilken <Arnei@users.noreply.github.com>
Date: Tue, 13 Jun 2023 08:23:09 +0200
Subject: [PATCH 20/47] Keep video controls row from overflowing (#908)

For resolutions with small widths, the elements of the video control row
would visibly overflow, for example into the main menu. Overflow should
now be "hidden" like e.g. in the cutting actions row.
---
 src/main/SubtitleSelect.tsx | 3 +--
 src/main/Video.tsx          | 5 ++---
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/main/SubtitleSelect.tsx b/src/main/SubtitleSelect.tsx
index 30e41c93c..9f35273e7 100644
--- a/src/main/SubtitleSelect.tsx
+++ b/src/main/SubtitleSelect.tsx
@@ -223,8 +223,7 @@ const SubtitleAddButton: React.FC<{languages: {subFlavor: string, title: string}
                     label={t("subtitles.createSubtitleDropdown-label") ?? undefined}
                     name="languages"
                     data={selectData()}
-                  >
-                  </Select>
+                  />
                 </ThemeProvider>
 
                 {/* "By default disabled elements like <button> do not trigger user interactions
diff --git a/src/main/Video.tsx b/src/main/Video.tsx
index b9a8c32ed..420bd222d 100644
--- a/src/main/Video.tsx
+++ b/src/main/Video.tsx
@@ -475,8 +475,6 @@ export const VideoControls: React.FC<{
   const videoControlsRowStyle = css({
     display: 'flex',
     flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
     width: '100%',
     padding: '20px',
     ...(flexGapReplacementStyle(50, false)),
@@ -557,7 +555,8 @@ const PreviewMode: React.FC<{
     display: 'flex',
     ...(flexGapReplacementStyle(10, false)),
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
+    overflow: 'hidden',
   })
 
   const switchIconStyle = (theme: Theme) => css({

From c528c52d61f27f1bf94691ab291309168fb9da34 Mon Sep 17 00:00:00 2001
From: Arne Wilken <Arnei@users.noreply.github.com>
Date: Tue, 13 Jun 2023 08:23:51 +0200
Subject: [PATCH 21/47] Update to React 18 (#1056)

* Update to React 18

Bumps React version to 18, and includes all the necessary
changes that React 18 demands.

Does not yet include the switch to the new rendering API.
This is just about getting everything to work with React 18.

* Code quality improvments

* Fix more i18n type issues

* Fix Workflow selection description not showing

* Implement review

* Fix WorkflowSelection not responding

Thanks to @LukasKalbertodt for telling me the solution :)
---
 package-lock.json              | 424 +++++----------------------------
 package.json                   |  14 +-
 src/main/KeyboardControls.tsx  |   2 +-
 src/main/Metadata.tsx          |   4 +-
 src/main/SubtitleSelect.tsx    |   2 +-
 src/main/SubtitleTimeline.tsx  |  14 +-
 src/main/SubtitleVideoArea.tsx |  72 +++---
 src/main/WorkflowSelection.tsx |  22 +-
 8 files changed, 121 insertions(+), 433 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1739215ca..e81597f67 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,13 +18,12 @@
         "@fortawesome/react-fontawesome": "^0.2.0",
         "@iarna/toml": "^2.2.5",
         "@mui/material": "^5.13.3",
-        "@mui/styles": "^5.13.2",
         "@mui/x-date-pickers": "^5.0.20",
         "@reduxjs/toolkit": "^1.9.5",
         "@testing-library/jest-dom": "^5.16.5",
         "@types/iarna__toml": "^2.0.2",
-        "@types/react": "^17.0.45",
-        "@types/react-dom": "^18.0.3",
+        "@types/react": "^18.2.6",
+        "@types/react-dom": "^18.2.4",
         "customize-cra": "^1.0.0",
         "deepmerge": "^4.3.1",
         "emotion-normalize": "^11.0.1",
@@ -33,18 +32,17 @@
         "i18next-browser-languagedetector": "^7.0.2",
         "lodash": "^4.17.21",
         "luxon": "^3.3.0",
-        "mui-rff": "^5.3.2",
-        "react": "^17.0.2",
+        "mui-rff": "^6.1.4",
+        "react": "^18.2.0",
         "react-app-rewired": "^2.2.1",
         "react-beforeunload": "^2.5.3",
         "react-device-detect": "^2.2.3",
-        "react-dom": "^17.0.2",
+        "react-dom": "^18.2.0",
         "react-draggable": "^4.4.5",
         "react-final-form": "^6.5.9",
-        "react-final-form-listeners": "^1.0.3",
         "react-hotkeys": "^2.0.0",
         "react-i18next": "^12.3.1",
-        "react-indiana-drag-scroll": "^2.1.0",
+        "react-indiana-drag-scroll": "^2.2.0",
         "react-player": "git+https://arnei@github.com/Arnei/react-player.git#20fe6c061cf7d71d33d764b4a51c9b9bbb614bf6",
         "react-redux": "^8.0.7",
         "react-resizable": "^3.0.5",
@@ -4082,46 +4080,6 @@
         }
       }
     },
-    "node_modules/@mui/styles": {
-      "version": "5.13.2",
-      "resolved": "https://registry.npmjs.org/@mui/styles/-/styles-5.13.2.tgz",
-      "integrity": "sha512-gKNkVyk6azQ8wfCamh3yU/wLv1JscYrsQX9huQBwfwtE7kUTq2rgggdfJjRADjbcmT6IPX+oCHYjGfqqFgDIQQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.21.0",
-        "@emotion/hash": "^0.9.1",
-        "@mui/private-theming": "^5.13.1",
-        "@mui/types": "^7.2.4",
-        "@mui/utils": "^5.13.1",
-        "clsx": "^1.2.1",
-        "csstype": "^3.1.2",
-        "hoist-non-react-statics": "^3.3.2",
-        "jss": "^10.10.0",
-        "jss-plugin-camel-case": "^10.10.0",
-        "jss-plugin-default-unit": "^10.10.0",
-        "jss-plugin-global": "^10.10.0",
-        "jss-plugin-nested": "^10.10.0",
-        "jss-plugin-props-sort": "^10.10.0",
-        "jss-plugin-rule-value-function": "^10.10.0",
-        "jss-plugin-vendor-prefixer": "^10.10.0",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0",
-        "react": "^17.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@mui/system": {
       "version": "5.13.2",
       "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.13.2.tgz",
@@ -5151,9 +5109,9 @@
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
     },
     "node_modules/@types/react": {
-      "version": "17.0.50",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.50.tgz",
-      "integrity": "sha512-ZCBHzpDb5skMnc1zFXAXnL3l1FAdi+xZvwxK+PkglMmBrwjpp9nKaWuEvrGnSifCJmBFGxZOOFuwC6KH/s0NuA==",
+      "version": "18.2.6",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.6.tgz",
+      "integrity": "sha512-wRZClXn//zxCFW+ye/D2qY65UsYP1Fpex2YXorHc8awoNamkMZSvBxwxdYVInsHOZZd2Ppq8isnSzJL5Mpf8OA==",
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -5170,9 +5128,9 @@
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.0.6",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz",
-      "integrity": "sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==",
+      "version": "18.2.4",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.4.tgz",
+      "integrity": "sha512-G2mHoTMTL4yoydITgOGwWdWMVd8sNgyEP85xVmMKAPUBwQWm9wBPQUmvbeF4V3WBY1P7mmL4BkjQ0SqUpf1snw==",
       "dependencies": {
         "@types/react": "*"
       }
@@ -7351,15 +7309,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/css-vendor": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
-      "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.8.3",
-        "is-in-browser": "^1.0.2"
-      }
-    },
     "node_modules/css-what": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
@@ -9970,11 +9919,6 @@
         "node": ">=10.17.0"
       }
     },
-    "node_modules/hyphenate-style-name": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
-      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
-    },
     "node_modules/i18next": {
       "version": "22.5.0",
       "resolved": "https://registry.npmjs.org/i18next/-/i18next-22.5.0.tgz",
@@ -10267,11 +10211,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-in-browser": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
-      "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g=="
-    },
     "node_modules/is-module": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
@@ -14014,88 +13953,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/jss": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss/-/jss-10.10.0.tgz",
-      "integrity": "sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "csstype": "^3.0.2",
-        "is-in-browser": "^1.1.3",
-        "tiny-warning": "^1.0.2"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/jss"
-      }
-    },
-    "node_modules/jss-plugin-camel-case": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.10.0.tgz",
-      "integrity": "sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "hyphenate-style-name": "^1.0.3",
-        "jss": "10.10.0"
-      }
-    },
-    "node_modules/jss-plugin-default-unit": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.10.0.tgz",
-      "integrity": "sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0"
-      }
-    },
-    "node_modules/jss-plugin-global": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.10.0.tgz",
-      "integrity": "sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0"
-      }
-    },
-    "node_modules/jss-plugin-nested": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.10.0.tgz",
-      "integrity": "sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "node_modules/jss-plugin-props-sort": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.10.0.tgz",
-      "integrity": "sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0"
-      }
-    },
-    "node_modules/jss-plugin-rule-value-function": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.10.0.tgz",
-      "integrity": "sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "node_modules/jss-plugin-vendor-prefixer": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.10.0.tgz",
-      "integrity": "sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "css-vendor": "^2.0.8",
-        "jss": "10.10.0"
-      }
-    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz",
@@ -14548,26 +14405,26 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "node_modules/mui-rff": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/mui-rff/-/mui-rff-5.3.2.tgz",
-      "integrity": "sha512-cTWZ2HiMviK9+BPa3AzJHWM8V3RpnHgoEIdEbYpYjAD5QhSqMnL2yaZZ6P9/Q+61wQccH7ZzjE/qVnSwEMhWNA==",
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/mui-rff/-/mui-rff-6.1.4.tgz",
+      "integrity": "sha512-9en2EHHhzuaX39xrCcpKLgyJ5cPVNmZlyhY4ZZxHXFPI+NdJa2DF2wTOOP5SE58qhC3jZzza81HJpi5aqqPFYQ==",
       "engines": {
         "node": ">=10"
       },
       "optionalDependencies": {
-        "@date-io/core": "^2.11.0",
-        "@date-io/date-fns": "^2.11.0",
-        "date-fns": "^2.25.0",
+        "@date-io/core": "^2.16.0",
+        "@date-io/date-fns": "^2.16.0",
+        "date-fns": "^2.29.3",
         "yup": "^0.32.11"
       },
       "peerDependencies": {
-        "@emotion/react": "^11.9.0",
-        "@emotion/styled": "^11.8.1",
-        "@mui/material": "^5.6.1",
-        "@mui/styles": "^5.6.1",
-        "@mui/x-date-pickers": "^5.0.0-alpha.0",
+        "@emotion/react": "^11.10.4",
+        "@emotion/styled": "^11.10.4",
+        "@mui/material": "^5.10.5",
+        "@mui/system": "^5.10.5",
+        "@mui/x-date-pickers": "^5.0.1",
         "final-form": ">=4.19.1 < 5",
-        "react": ">=16",
+        "react": ">=18",
         "react-final-form": "^6.5.9"
       }
     },
@@ -16624,12 +16481,11 @@
       }
     },
     "node_modules/react": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
-      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
       "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       },
       "engines": {
         "node": ">=0.10.0"
@@ -16813,16 +16669,15 @@
       }
     },
     "node_modules/react-dom": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
-      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "scheduler": "^0.20.2"
+        "scheduler": "^0.23.0"
       },
       "peerDependencies": {
-        "react": "17.0.2"
+        "react": "^18.2.0"
       }
     },
     "node_modules/react-draggable": {
@@ -16864,20 +16719,6 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/react-final-form-listeners": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/react-final-form-listeners/-/react-final-form-listeners-1.0.3.tgz",
-      "integrity": "sha512-OrdCNxSS4JQS/EXD+R530kZKFqaPfa+WcXPgVro/h4BpaBDF/Ja+BtHyCzDezCIb5rWaGGdOJIj+tN2YdtvrXg==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.5"
-      },
-      "peerDependencies": {
-        "final-form": ">=4.0.0",
-        "prop-types": "^15.6.0",
-        "react": "^15.3.0 || ^16.0.0 || ^17.0.0",
-        "react-final-form": ">=3.0.0"
-      }
-    },
     "node_modules/react-hotkeys": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/react-hotkeys/-/react-hotkeys-2.0.0.tgz",
@@ -17715,12 +17556,11 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
-      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
       "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       }
     },
     "node_modules/schema-utils": {
@@ -18683,11 +18523,6 @@
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
       "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw=="
     },
-    "node_modules/tiny-warning": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
-    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -22840,30 +22675,6 @@
         "prop-types": "^15.8.1"
       }
     },
-    "@mui/styles": {
-      "version": "5.13.2",
-      "resolved": "https://registry.npmjs.org/@mui/styles/-/styles-5.13.2.tgz",
-      "integrity": "sha512-gKNkVyk6azQ8wfCamh3yU/wLv1JscYrsQX9huQBwfwtE7kUTq2rgggdfJjRADjbcmT6IPX+oCHYjGfqqFgDIQQ==",
-      "requires": {
-        "@babel/runtime": "^7.21.0",
-        "@emotion/hash": "^0.9.1",
-        "@mui/private-theming": "^5.13.1",
-        "@mui/types": "^7.2.4",
-        "@mui/utils": "^5.13.1",
-        "clsx": "^1.2.1",
-        "csstype": "^3.1.2",
-        "hoist-non-react-statics": "^3.3.2",
-        "jss": "^10.10.0",
-        "jss-plugin-camel-case": "^10.10.0",
-        "jss-plugin-default-unit": "^10.10.0",
-        "jss-plugin-global": "^10.10.0",
-        "jss-plugin-nested": "^10.10.0",
-        "jss-plugin-props-sort": "^10.10.0",
-        "jss-plugin-rule-value-function": "^10.10.0",
-        "jss-plugin-vendor-prefixer": "^10.10.0",
-        "prop-types": "^15.8.1"
-      }
-    },
     "@mui/system": {
       "version": "5.13.2",
       "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.13.2.tgz",
@@ -23576,9 +23387,9 @@
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
     },
     "@types/react": {
-      "version": "17.0.50",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.50.tgz",
-      "integrity": "sha512-ZCBHzpDb5skMnc1zFXAXnL3l1FAdi+xZvwxK+PkglMmBrwjpp9nKaWuEvrGnSifCJmBFGxZOOFuwC6KH/s0NuA==",
+      "version": "18.2.6",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.6.tgz",
+      "integrity": "sha512-wRZClXn//zxCFW+ye/D2qY65UsYP1Fpex2YXorHc8awoNamkMZSvBxwxdYVInsHOZZd2Ppq8isnSzJL5Mpf8OA==",
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -23595,9 +23406,9 @@
       }
     },
     "@types/react-dom": {
-      "version": "18.0.6",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz",
-      "integrity": "sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==",
+      "version": "18.2.4",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.4.tgz",
+      "integrity": "sha512-G2mHoTMTL4yoydITgOGwWdWMVd8sNgyEP85xVmMKAPUBwQWm9wBPQUmvbeF4V3WBY1P7mmL4BkjQ0SqUpf1snw==",
       "requires": {
         "@types/react": "*"
       }
@@ -25213,15 +25024,6 @@
         }
       }
     },
-    "css-vendor": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
-      "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
-      "requires": {
-        "@babel/runtime": "^7.8.3",
-        "is-in-browser": "^1.0.2"
-      }
-    },
     "css-what": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
@@ -27124,11 +26926,6 @@
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
       "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw=="
     },
-    "hyphenate-style-name": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
-      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
-    },
     "i18next": {
       "version": "22.5.0",
       "resolved": "https://registry.npmjs.org/i18next/-/i18next-22.5.0.tgz",
@@ -27318,11 +27115,6 @@
         "is-extglob": "^2.1.1"
       }
     },
-    "is-in-browser": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
-      "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g=="
-    },
     "is-module": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
@@ -30116,84 +29908,6 @@
       "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-5.0.1.tgz",
       "integrity": "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ=="
     },
-    "jss": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss/-/jss-10.10.0.tgz",
-      "integrity": "sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "csstype": "^3.0.2",
-        "is-in-browser": "^1.1.3",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "jss-plugin-camel-case": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.10.0.tgz",
-      "integrity": "sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "hyphenate-style-name": "^1.0.3",
-        "jss": "10.10.0"
-      }
-    },
-    "jss-plugin-default-unit": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.10.0.tgz",
-      "integrity": "sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0"
-      }
-    },
-    "jss-plugin-global": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.10.0.tgz",
-      "integrity": "sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0"
-      }
-    },
-    "jss-plugin-nested": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.10.0.tgz",
-      "integrity": "sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "jss-plugin-props-sort": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.10.0.tgz",
-      "integrity": "sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0"
-      }
-    },
-    "jss-plugin-rule-value-function": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.10.0.tgz",
-      "integrity": "sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.10.0",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "jss-plugin-vendor-prefixer": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.10.0.tgz",
-      "integrity": "sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "css-vendor": "^2.0.8",
-        "jss": "10.10.0"
-      }
-    },
     "jsx-ast-utils": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz",
@@ -30534,13 +30248,13 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "mui-rff": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/mui-rff/-/mui-rff-5.3.2.tgz",
-      "integrity": "sha512-cTWZ2HiMviK9+BPa3AzJHWM8V3RpnHgoEIdEbYpYjAD5QhSqMnL2yaZZ6P9/Q+61wQccH7ZzjE/qVnSwEMhWNA==",
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/mui-rff/-/mui-rff-6.1.4.tgz",
+      "integrity": "sha512-9en2EHHhzuaX39xrCcpKLgyJ5cPVNmZlyhY4ZZxHXFPI+NdJa2DF2wTOOP5SE58qhC3jZzza81HJpi5aqqPFYQ==",
       "requires": {
-        "@date-io/core": "^2.11.0",
-        "@date-io/date-fns": "^2.11.0",
-        "date-fns": "^2.25.0",
+        "@date-io/core": "^2.16.0",
+        "@date-io/date-fns": "^2.16.0",
+        "date-fns": "^2.29.3",
         "yup": "^0.32.11"
       }
     },
@@ -31833,12 +31547,11 @@
       }
     },
     "react": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
-      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
       "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       }
     },
     "react-app-polyfill": {
@@ -31973,13 +31686,12 @@
       }
     },
     "react-dom": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
-      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
       "requires": {
         "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "scheduler": "^0.20.2"
+        "scheduler": "^0.23.0"
       }
     },
     "react-draggable": {
@@ -32009,14 +31721,6 @@
         "@babel/runtime": "^7.15.4"
       }
     },
-    "react-final-form-listeners": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/react-final-form-listeners/-/react-final-form-listeners-1.0.3.tgz",
-      "integrity": "sha512-OrdCNxSS4JQS/EXD+R530kZKFqaPfa+WcXPgVro/h4BpaBDF/Ja+BtHyCzDezCIb5rWaGGdOJIj+tN2YdtvrXg==",
-      "requires": {
-        "@babel/runtime": "^7.12.5"
-      }
-    },
     "react-hotkeys": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/react-hotkeys/-/react-hotkeys-2.0.0.tgz",
@@ -32587,12 +32291,11 @@
       }
     },
     "scheduler": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
-      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
       "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       }
     },
     "schema-utils": {
@@ -33347,11 +33050,6 @@
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
       "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw=="
     },
-    "tiny-warning": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
-    },
     "tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
diff --git a/package.json b/package.json
index 2a2bb34a2..7de5b4182 100644
--- a/package.json
+++ b/package.json
@@ -13,13 +13,12 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@iarna/toml": "^2.2.5",
     "@mui/material": "^5.13.3",
-    "@mui/styles": "^5.13.2",
     "@mui/x-date-pickers": "^5.0.20",
     "@reduxjs/toolkit": "^1.9.5",
     "@testing-library/jest-dom": "^5.16.5",
     "@types/iarna__toml": "^2.0.2",
-    "@types/react": "^17.0.45",
-    "@types/react-dom": "^18.0.3",
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "^18.2.4",
     "customize-cra": "^1.0.0",
     "deepmerge": "^4.3.1",
     "emotion-normalize": "^11.0.1",
@@ -28,18 +27,17 @@
     "i18next-browser-languagedetector": "^7.0.2",
     "lodash": "^4.17.21",
     "luxon": "^3.3.0",
-    "mui-rff": "^5.3.2",
-    "react": "^17.0.2",
+    "mui-rff": "^6.1.4",
+    "react": "^18.2.0",
     "react-app-rewired": "^2.2.1",
     "react-beforeunload": "^2.5.3",
     "react-device-detect": "^2.2.3",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
     "react-final-form": "^6.5.9",
-    "react-final-form-listeners": "^1.0.3",
     "react-hotkeys": "^2.0.0",
     "react-i18next": "^12.3.1",
-    "react-indiana-drag-scroll": "^2.1.0",
+    "react-indiana-drag-scroll": "^2.2.0",
     "react-player": "git+https://arnei@github.com/Arnei/react-player.git#20fe6c061cf7d71d33d764b4a51c9b9bbb614bf6",
     "react-redux": "^8.0.7",
     "react-resizable": "^3.0.5",
diff --git a/src/main/KeyboardControls.tsx b/src/main/KeyboardControls.tsx
index c6daad2ae..33164a0d2 100644
--- a/src/main/KeyboardControls.tsx
+++ b/src/main/KeyboardControls.tsx
@@ -27,7 +27,7 @@ const Group: React.FC<{name: TFuncKey, entries: KeyMapDisplayOptions[]}> = ({nam
 
   return (
     <div css={groupStyle}>
-      <h3 css={headingStyle}>{t(name)}</h3>
+      <h3 css={headingStyle}>{t(name) as string}</h3>
       {entries.map((entry: KeyMapDisplayOptions, index: number) => (
         <Entry params={entry} key={index}></Entry>
       ))}
diff --git a/src/main/Metadata.tsx b/src/main/Metadata.tsx
index 4bc69bc75..b1715f071 100644
--- a/src/main/Metadata.tsx
+++ b/src/main/Metadata.tsx
@@ -626,7 +626,7 @@ const Metadata: React.FC<{}> = () => {
                   <div css={fieldStyle} data-testid={field.id}>
                     <label css={fieldLabelStyle} htmlFor={input.name}>{
                       i18n.exists(`metadata.labels.${field.id}`) ?
-                      t(`metadata.labels.${field.id}` as TFuncKey) : field.id
+                      t(`metadata.labels.${field.id}` as TFuncKey) as string: field.id
                     }</label>
 
                     {generateComponentWithModifiedInput(field, input)}
@@ -646,7 +646,7 @@ const Metadata: React.FC<{}> = () => {
       <div key={catalogIndex}>
         <h2>
           {i18n.exists(`metadata.${catalog.title.replaceAll(".", "-")}`) ?
-            t(`metadata.${catalog.title.replaceAll(".", "-")}` as TFuncKey) : catalog.title
+            t(`metadata.${catalog.title.replaceAll(".", "-")}` as TFuncKey) as string: catalog.title
           }
         </h2>
 
diff --git a/src/main/SubtitleSelect.tsx b/src/main/SubtitleSelect.tsx
index 9f35273e7..a593aec1b 100644
--- a/src/main/SubtitleSelect.tsx
+++ b/src/main/SubtitleSelect.tsx
@@ -220,7 +220,7 @@ const SubtitleAddButton: React.FC<{languages: {subFlavor: string, title: string}
                 */}
                 <ThemeProvider theme={subtitleSelectStyle(theme)}>
                   <Select
-                    label={t("subtitles.createSubtitleDropdown-label") ?? undefined}
+                    label={t("subtitles.createSubtitleDropdown-label")}
                     name="languages"
                     data={selectData()}
                   />
diff --git a/src/main/SubtitleTimeline.tsx b/src/main/SubtitleTimeline.tsx
index 55d64413c..2fcee850e 100644
--- a/src/main/SubtitleTimeline.tsx
+++ b/src/main/SubtitleTimeline.tsx
@@ -41,7 +41,7 @@ import { useTranslation } from "react-i18next";
   const currentlyAt = useSelector(selectCurrentlyAt)
 
   const { ref, width = 1, } = useResizeObserver<HTMLDivElement>();
-  const refTop = useRef<ScrollContainer>(null);
+  const refTop = useRef<HTMLElement>(null);
   const { ref: refMini, width: widthMiniTimeline = 1, } = useResizeObserver<HTMLDivElement>();
 
   const timelineCutoutInMs = 10000    // How much of the timeline should be visible in milliseconds. Aka a specific zoom level
@@ -63,8 +63,8 @@ import { useTranslation } from "react-i18next";
   // Apply horizonal scrolling when scrolled from somewhere else
   useEffect(() => {
     if (currentlyAt !== undefined && refTop.current) {
-      const scrollLeftMax = (refTop.current.getElement().scrollWidth - refTop.current.getElement().clientWidth)
-      refTop.current.getElement().scrollTo(Math.round((currentlyAt / duration) * scrollLeftMax), 0)
+      const scrollLeftMax = (refTop.current.scrollWidth - refTop.current.clientWidth)
+      refTop.current.scrollTo(Math.round((currentlyAt / duration) * scrollLeftMax), 0)
     }
   }, [currentlyAt, duration, width]);
 
@@ -84,8 +84,8 @@ import { useTranslation } from "react-i18next";
   const onEndScroll = (e: ScrollEvent) => {
     // If scrolled by user
     if (!e.external && refTop && refTop.current) {
-      const offsetX = refTop.current.getElement().scrollLeft
-      const scrollLeftMax = (refTop.current.getElement().scrollWidth - refTop.current.getElement().clientWidth)
+      const offsetX = refTop.current.scrollLeft
+      const scrollLeftMax = (refTop.current.scrollWidth - refTop.current.clientWidth)
       dispatch(setCurrentlyAt((offsetX / scrollLeftMax) * (duration)))
     }
   }
@@ -98,14 +98,14 @@ import { useTranslation } from "react-i18next";
           position: 'absolute',
           width: '2px',
           height: '190px',
-          ...(refTop.current) && {left: (refTop.current.getElement().clientWidth / 2)},
+          ...(refTop.current) && {left: (refTop.current.clientWidth / 2)},
           top: '10px',
           background: `${theme.text}`,
           zIndex: 100,
         }}
       />
       {/* Scrollable timeline container. Has width of parent*/}
-      <ScrollContainer ref={refTop} css={{overflow: 'hidden', width: '100%', height: '215px'}}
+      <ScrollContainer innerRef={refTop} css={{overflow: 'hidden', width: '100%', height: '215px'}}
         vertical={false}
         horizontal={true}
         onEndScroll={onEndScroll}
diff --git a/src/main/SubtitleVideoArea.tsx b/src/main/SubtitleVideoArea.tsx
index 55b4ed37a..8b10d0eb4 100644
--- a/src/main/SubtitleVideoArea.tsx
+++ b/src/main/SubtitleVideoArea.tsx
@@ -18,15 +18,13 @@ import { selectCurrentlyAt,
 import { selectVideos } from "../redux/videoSlice";
 import { Flavor } from "../types";
 import { settings } from "../config";
-import { Form } from "react-final-form";
-import { Select } from "mui-rff";
 import { useTranslation } from "react-i18next";
-import { OnChange } from 'react-final-form-listeners'
 import { VideoControls, VideoPlayer } from "./Video";
-import { flexGapReplacementStyle, subtitleSelectStyle } from "../cssStyles";
+import { flexGapReplacementStyle } from "../cssStyles";
 import { serializeSubtitle } from "../util/utilityFunctions";
 import { selectTheme } from "../redux/themeSlice";
-import { ThemeProvider } from "@mui/material/styles";
+import Select from "react-select";
+import { selectFieldStyle } from "../cssStyles";
 
 /**
  * A part of the subtitle editor that displays a video and related controls
@@ -108,12 +106,12 @@ const SubtitleVideoArea : React.FC<{}> = () => {
     return(
       <div css={areaWrapper}>
         <div css={videoPlayerAreaStyle}>
-          <VideoSelectDropdown
+          {selectedFlavor && <VideoSelectDropdown
             // eslint-disable-next-line no-sequences
             flavors={tracks.reduce((a: Flavor[], o: { flavor: Flavor }) => (a.push(o.flavor), a), [])}
             changeFlavorcallback={setSelectedFlavor}
             defaultFlavor={selectedFlavor}
-          />
+          />}
           {/* TODO: Make preview mode work or remove it */}
           <VideoPlayer
             dataKey={0}
@@ -156,7 +154,7 @@ const SubtitleVideoArea : React.FC<{}> = () => {
 const VideoSelectDropdown : React.FC<{
   flavors: Flavor[],
   changeFlavorcallback: React.Dispatch<React.SetStateAction<Flavor | undefined>>,
-  defaultFlavor: Flavor | undefined
+  defaultFlavor: Flavor
 }> = ({
   flavors,
   changeFlavorcallback,
@@ -183,50 +181,36 @@ const VideoSelectDropdown : React.FC<{
   }
 
   // Data to populate the dropdown with
-  const selectData = () => {
-    const data = []
-    for (let flavor of flavors) {
-      // We have to deconstruct the flavor object for the value as well and put it back together
-      data.push({label: getFlavorLabel(flavor), value: stringifyFlavor(flavor)})
-    }
-    return data
-  }
-
-  const onSubmit = () => {}
-
+  const data = flavors.map(flavor => ({
+    label: getFlavorLabel(flavor),
+    value: stringifyFlavor(flavor),
+  }));
 
   const subtitleAddFormStyle = css({
     width: '100%',
   });
 
   return (
-    <Form
-    onSubmit={(onSubmit)}
-    // TODO: Find out why "dropdownName" does not work with initialValues
-    initialValues={{"flavors": defaultFlavor ? stringifyFlavor(defaultFlavor) : ""}}
-    render={({ handleSubmit, form, submitting, pristine, values}) => (
-      <form onSubmit={event => {
-        handleSubmit(event)
-      }} css={subtitleAddFormStyle}>
-
-          <ThemeProvider theme={subtitleSelectStyle(theme)}>
-            <Select
-              label={t("subtitleVideoArea.selectVideoLabel") ?? undefined}
-              name={dropdownName}
-              data={selectData()}
-            />
-          </ThemeProvider>
-
-          <OnChange name={dropdownName}>
-            {(value, previous) => {
+    <>
+      <div>{t("subtitleVideoArea.selectVideoLabel")}</div>
+      <Select
+        name={dropdownName}
+        styles={selectFieldStyle(theme)}
+        css={subtitleAddFormStyle}
+        options={data}
+        defaultValue={data.filter(({value}) => value === stringifyFlavor(defaultFlavor))}
+        onChange={
+          (newValue) => {
+            if (newValue) {
               // Put flavor back together
-              const newFlavor: Flavor = {type: value.split("/")[0], subtype: value.split("/")[1]}
+              const [type, subtype] = newValue.value.split("/")
+              const newFlavor: Flavor = { type, subtype }
               changeFlavorcallback(newFlavor)
-            }}
-          </OnChange>
-      </form>
-    )}
-  />
+            }
+          }
+        }
+      />
+    </>
   )
 }
 
diff --git a/src/main/WorkflowSelection.tsx b/src/main/WorkflowSelection.tsx
index 0f147fd72..878b212ab 100644
--- a/src/main/WorkflowSelection.tsx
+++ b/src/main/WorkflowSelection.tsx
@@ -18,7 +18,6 @@ import { EmotionJSX } from "@emotion/react/types/jsx-namespace";
 
 import { useTranslation } from 'react-i18next';
 import { Trans } from "react-i18next";
-import { withStyles } from "@mui/styles";
 import { FormControlLabel, Radio, RadioGroup } from "@mui/material";
 import { selectTheme } from "../redux/themeSlice";
 
@@ -71,7 +70,7 @@ const WorkflowSelection : React.FC<{}> = () => {
   };
 
   // Layout template
-  const render = (topTitle: string, topText: {} | null | undefined, hasWorkflowButtons: boolean,
+  const render = (topTitle: string, topText: JSX.Element, hasWorkflowButtons: boolean,
     nextButton: EmotionJSX.Element, errorStatus: httpRequestState["status"],
     errorMessage: httpRequestState["error"]) => {
     return (
@@ -182,15 +181,24 @@ const WorkflowButton: React.FC<{stateName: string, workflowId: string, workflowD
   );
 }
 
-const WorkflowSelectRadio = withStyles({
-  root: {
+const WorkflowSelectRadio: React.FC = (props) => {
+
+  const style = css({
     alignSelf: 'start',
     color: 'grey',
     "&$checked": {
       color: 'grey'
     }
-  },
-  checked: {}
-})((props) => <Radio color="default" {...props} />);
+  })
+
+  return (
+    <Radio
+      color="default"
+      css={style}
+      {...props}
+    />
+  )
+}
+
 
 export default WorkflowSelection;

From 07deff2c2e750bf537f4c796f1b7fd356dd7d978 Mon Sep 17 00:00:00 2001
From: Lukas Kalbertodt <lukas.kalbertodt@gmail.com>
Date: Thu, 8 Jun 2023 17:58:57 +0200
Subject: [PATCH 22/47] Replace tabs with spaces

---
 src/util/utilityFunctions.ts | 34 +++++++++++++++++-----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/util/utilityFunctions.ts b/src/util/utilityFunctions.ts
index c135334a2..ef003e13c 100644
--- a/src/util/utilityFunctions.ts
+++ b/src/util/utilityFunctions.ts
@@ -32,9 +32,9 @@ export const convertMsToReadableString = (ms: number): string => {
  */
 export function safeJsonParse(str : string) {
   try {
-      return [null, JSON.parse(str)];
+    return [null, JSON.parse(str)];
   } catch (err) {
-      return [err];
+    return [err];
   }
 }
 
@@ -46,23 +46,23 @@ export function safeJsonParse(str : string) {
 var flexGapIsSupported: boolean | undefined;
 export function checkFlexGapSupport() {
   // Use the cached value if it has been defined
-	if (flexGapIsSupported !== undefined) {
-		return flexGapIsSupported
-	}
+  if (flexGapIsSupported !== undefined) {
+    return flexGapIsSupported
+  }
 
-	// Create a flex container with row-gap set
-	const flex = document.createElement('div')
-	flex.style.display = 'flex'
-	flex.style.flexDirection = 'column'
-	flex.style.rowGap = '1px'
-	flex.style.position = 'absolute'
+  // Create a flex container with row-gap set
+  const flex = document.createElement('div')
+  flex.style.display = 'flex'
+  flex.style.flexDirection = 'column'
+  flex.style.rowGap = '1px'
+  flex.style.position = 'absolute'
 
-	// Create two, elements inside it
-	flex.appendChild(document.createElement('div'))
-	flex.appendChild(document.createElement('div'))
+  // Create two, elements inside it
+  flex.appendChild(document.createElement('div'))
+  flex.appendChild(document.createElement('div'))
 
-	// Append to the DOM (needed to obtain scrollHeight)
-	document.body.appendChild(flex)
+  // Append to the DOM (needed to obtain scrollHeight)
+  document.body.appendChild(flex)
 
   // Flex container should be 1px high due to the row-gap
   flexGapIsSupported = flex.scrollHeight === 1
@@ -72,7 +72,7 @@ export function checkFlexGapSupport() {
     flex.parentNode.removeChild(flex)
   }
 
-	return flexGapIsSupported
+  return flexGapIsSupported
 }
 
 /**

From 33a41d9921c045607855b5caee62d7830c1b8241 Mon Sep 17 00:00:00 2001
From: Lukas Kalbertodt <lukas.kalbertodt@gmail.com>
Date: Thu, 8 Jun 2023 18:10:47 +0200
Subject: [PATCH 23/47] Disable 'camelcase' eslint rule for 'themes.ts'

---
 src/themes.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/themes.ts b/src/themes.ts
index c56a3a5d3..f02184f64 100644
--- a/src/themes.ts
+++ b/src/themes.ts
@@ -1,3 +1,5 @@
+/* eslint-disable camelcase */
+
 import { Theme } from "./redux/themeSlice";
 
 export const lightMode: Theme = {

From 9a507f45530653796c3a866ac0116c1bfa256fdd Mon Sep 17 00:00:00 2001
From: Lukas Kalbertodt <lukas.kalbertodt@gmail.com>
Date: Thu, 8 Jun 2023 18:17:58 +0200
Subject: [PATCH 24/47] Fix indentation errors automatically via `eslint --fix`

---
 config-overrides.js                      |  11 +-
 src/cssStyles.tsx                        |  10 +-
 src/globalKeys.ts                        |   2 +-
 src/i18n/config.tsx                      |  14 +-
 src/index.tsx                            |  16 +-
 src/main/CuttingActions.tsx              |  52 +--
 src/main/Error.tsx                       |   2 +-
 src/main/FinishMenu.tsx                  |   8 +-
 src/main/Header.tsx                      |  18 +-
 src/main/Landing.tsx                     |   4 +-
 src/main/MainContent.tsx                 |   4 +-
 src/main/MainMenu.tsx                    |   2 +-
 src/main/Metadata.tsx                    | 148 +++----
 src/main/SubtitleEditor.tsx              |   4 +-
 src/main/SubtitleListEditor.tsx          |  16 +-
 src/main/SubtitleSelect.tsx              |  38 +-
 src/main/SubtitleTimeline.tsx            |  72 ++--
 src/main/Thumbnail.tsx                   |  54 +--
 src/main/Timeline.tsx                    |  90 ++---
 src/main/TrackSelection.tsx              |  18 +-
 src/main/Video.tsx                       | 480 +++++++++++------------
 src/redux/metadataSlice.ts               |  12 +-
 src/redux/themeSlice.ts                  |   2 +-
 src/redux/videoSlice.ts                  |  52 +--
 src/redux/workflowPostAndProcessSlice.ts |   6 +-
 src/redux/workflowPostSlice.ts           |   6 +-
 src/util/client.js                       |   6 +-
 27 files changed, 573 insertions(+), 574 deletions(-)

diff --git a/config-overrides.js b/config-overrides.js
index c7cc79d77..300542779 100644
--- a/config-overrides.js
+++ b/config-overrides.js
@@ -1,7 +1,6 @@
+// Overrides to make emotion css work with createReactApp
+const { override, addBabelPreset } = require('customize-cra')
 
-  // Overrides to make emotion css work with createReactApp
-  const { override, addBabelPreset } = require('customize-cra')
-  
-  module.exports = override(
-    addBabelPreset('@emotion/babel-preset-css-prop')
-  )
\ No newline at end of file
+module.exports = override(
+  addBabelPreset('@emotion/babel-preset-css-prop')
+)
diff --git a/src/cssStyles.tsx b/src/cssStyles.tsx
index ab765641b..b85c60f38 100644
--- a/src/cssStyles.tsx
+++ b/src/cssStyles.tsx
@@ -48,9 +48,9 @@ export const flexGapReplacementStyle = (flexGapValue: number, flexDirectionIsRow
   return (
     {
     // Use gap if supported
-    ...(checkFlexGapSupport()) && {gap: `${flexGapValue}px`},
-    // Else use margins
-    ...(!checkFlexGapSupport()) &&
+      ...(checkFlexGapSupport()) && {gap: `${flexGapValue}px`},
+      // Else use margins
+      ...(!checkFlexGapSupport()) &&
       {
         ">*": { // For each child
           marginTop: `${quarter}px`,
@@ -122,7 +122,7 @@ export const navigationButtonStyle = (theme: Theme) => css({
   justifyContent: 'space-around',
   boxShadow: `${theme.boxShadow}`,
   background: `${theme.element_bg}`,
- })
+})
 
 /**
  * CSS for a container that holds back/forward buttons
@@ -136,7 +136,7 @@ export const backOrContinueStyle = css(({
 /**
  * CSS for big buttons in a dynamic grid
  */
- export const tileButtonStyle = (theme: Theme) => css({
+export const tileButtonStyle = (theme: Theme) => css({
   width: '250px',
   height: '220px',
   display: 'flex',
diff --git a/src/globalKeys.ts b/src/globalKeys.ts
index dc4be2c81..45b1a6c32 100644
--- a/src/globalKeys.ts
+++ b/src/globalKeys.ts
@@ -153,7 +153,7 @@ export const subtitleListKeyMap: KeyMap = {
  * Combines all keyMaps into a single list of keys for KeyboardControls to display
  * Placing this under the keyMaps is important, else the translation hooks won't happen
  */
- export const getAllHotkeys = () => {
+export const getAllHotkeys = () => {
   const allKeyMaps = [videoPlayerKeyMap, cuttingKeyMap, scrubberKeyMap, subtitleListKeyMap]
   const allKeys : ApplicationKeyMap = {}
 
diff --git a/src/i18n/config.tsx b/src/i18n/config.tsx
index 6a93827a9..3c19c683d 100644
--- a/src/i18n/config.tsx
+++ b/src/i18n/config.tsx
@@ -19,13 +19,13 @@ for (const lang of locales) {
 }
 
 i18next
-    .use(initReactI18next)
-    .use(LanguageDetector)
-    .init({
-        resources,
-        fallbackLng: ['en-US', 'en'],
-        nonExplicitSupportedLngs: true,
-        debug: debug,
+  .use(initReactI18next)
+  .use(LanguageDetector)
+  .init({
+    resources,
+    fallbackLng: ['en-US', 'en'],
+    nonExplicitSupportedLngs: true,
+    debug: debug,
   });
 
 if (debug) {
diff --git a/src/index.tsx b/src/index.tsx
index 0eecb67ce..02c340318 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -31,14 +31,14 @@ initialize.then(
   () => {
     ReactDOM.render(
       <React.StrictMode>
-          <Provider store={store}>
-            <LocalizationProvider dateAdapter={AdapterDateFns}>
-              {/* Workaround for getApplicationKeyMap based on https://github.com/greena13/react-hotkeys/issues/228 */}
-              <GlobalHotKeys>
-                <App />
-              </GlobalHotKeys>
-            </LocalizationProvider>
-          </Provider>
+        <Provider store={store}>
+          <LocalizationProvider dateAdapter={AdapterDateFns}>
+            {/* Workaround for getApplicationKeyMap based on https://github.com/greena13/react-hotkeys/issues/228 */}
+            <GlobalHotKeys>
+              <App />
+            </GlobalHotKeys>
+          </LocalizationProvider>
+        </Provider>
       </React.StrictMode>,
       document.getElementById('root')
     );
diff --git a/src/main/CuttingActions.tsx b/src/main/CuttingActions.tsx
index d82714d9a..7f03fbd74 100644
--- a/src/main/CuttingActions.tsx
+++ b/src/main/CuttingActions.tsx
@@ -10,7 +10,7 @@ import {
   faStepForward,
   faTrash,
   faTrashRestore,
-  } from "@fortawesome/free-solid-svg-icons";
+} from "@fortawesome/free-solid-svg-icons";
 
 import { css } from '@emotion/react'
 
@@ -77,28 +77,28 @@ const CuttingActions: React.FC<{}> = () => {
   return (
     <GlobalHotKeys keyMap={cuttingKeyMap} handlers={handlers} allowChanges={true} >
       <div css={cuttingStyle}>
-          <div css={blockStyle}>
-            <CuttingActionsButton iconName={faCut}
-              actionName={t("cuttingActions.cut-button")} actionHandler={dispatchAction} action={cut}
-              tooltip={t('cuttingActions.cut-tooltip', { hotkeyName: (cuttingKeyMap[handlers.cut.name] as KeyMapOptions).sequence })}
-              ariaLabelText={t('cuttingActions.cut-tooltip-aria', { hotkeyName: (cuttingKeyMap[handlers.cut.name] as KeyMapOptions).sequence })}
-            />
-            <MarkAsDeletedButton actionHandler={dispatchAction} action={markAsDeletedOrAlive}
-              hotKeyName={(cuttingKeyMap[handlers.delete.name] as KeyMapOptions).sequence}
-            />
-            <CuttingActionsButton iconName={faStepBackward}
-              actionName={t("cuttingActions.mergeLeft-button")} actionHandler={dispatchAction} action={mergeLeft}
-              tooltip={t('cuttingActions.mergeLeft-tooltip', { hotkeyName: (cuttingKeyMap[handlers.mergeLeft.name] as KeyMapOptions).sequence })}
-              ariaLabelText={t('cuttingActions.mergeLeft-tooltip-aria', { hotkeyName: (cuttingKeyMap[handlers.mergeLeft.name] as KeyMapOptions).sequence })}
-            />
-            <CuttingActionsButton iconName={faStepForward}
-              actionName={t("cuttingActions.mergeRight-button")} actionHandler={dispatchAction} action={mergeRight}
-              tooltip={t('cuttingActions.mergeRight-tooltip', { hotkeyName: (cuttingKeyMap[handlers.mergeRight.name] as KeyMapOptions).sequence })}
-              ariaLabelText={t('cuttingActions.mergeRight-tooltip-aria', { hotkeyName: (cuttingKeyMap[handlers.mergeRight.name] as KeyMapOptions).sequence })}
-            />
-          </div>
-          <div css={blockStyle}>
-            {/* <CuttingActionsButton iconName={faQuestion} actionName="Reset changes" action={null}
+        <div css={blockStyle}>
+          <CuttingActionsButton iconName={faCut}
+            actionName={t("cuttingActions.cut-button")} actionHandler={dispatchAction} action={cut}
+            tooltip={t('cuttingActions.cut-tooltip', { hotkeyName: (cuttingKeyMap[handlers.cut.name] as KeyMapOptions).sequence })}
+            ariaLabelText={t('cuttingActions.cut-tooltip-aria', { hotkeyName: (cuttingKeyMap[handlers.cut.name] as KeyMapOptions).sequence })}
+          />
+          <MarkAsDeletedButton actionHandler={dispatchAction} action={markAsDeletedOrAlive}
+            hotKeyName={(cuttingKeyMap[handlers.delete.name] as KeyMapOptions).sequence}
+          />
+          <CuttingActionsButton iconName={faStepBackward}
+            actionName={t("cuttingActions.mergeLeft-button")} actionHandler={dispatchAction} action={mergeLeft}
+            tooltip={t('cuttingActions.mergeLeft-tooltip', { hotkeyName: (cuttingKeyMap[handlers.mergeLeft.name] as KeyMapOptions).sequence })}
+            ariaLabelText={t('cuttingActions.mergeLeft-tooltip-aria', { hotkeyName: (cuttingKeyMap[handlers.mergeLeft.name] as KeyMapOptions).sequence })}
+          />
+          <CuttingActionsButton iconName={faStepForward}
+            actionName={t("cuttingActions.mergeRight-button")} actionHandler={dispatchAction} action={mergeRight}
+            tooltip={t('cuttingActions.mergeRight-tooltip', { hotkeyName: (cuttingKeyMap[handlers.mergeRight.name] as KeyMapOptions).sequence })}
+            ariaLabelText={t('cuttingActions.mergeRight-tooltip-aria', { hotkeyName: (cuttingKeyMap[handlers.mergeRight.name] as KeyMapOptions).sequence })}
+          />
+        </div>
+        <div css={blockStyle}>
+          {/* <CuttingActionsButton iconName={faQuestion} actionName="Reset changes" action={null}
               tooltip="Not implemented"
               ariaLabelText="Reset changes. Not implemented"
             />
@@ -106,7 +106,7 @@ const CuttingActions: React.FC<{}> = () => {
               tooltip="Not implemented"
               ariaLabelText="Undo. Not implemented"
             /> */}
-          </div>
+        </div>
       </div>
     </GlobalHotKeys>
   );
@@ -147,7 +147,7 @@ const CuttingActionsButton: React.FC<cuttingActionsButtonInterface> = ({iconName
         onKeyDown={(event: React.KeyboardEvent) => { if (event.key === " " || event.key === "Enter") {
           actionHandler(event, action, undefined)
         }}}
-        >
+      >
         <FontAwesomeIcon icon={iconName} size="1x" />
         <span>{actionName}</span>
       </div>
@@ -181,7 +181,7 @@ const MarkAsDeletedButton : React.FC<markAsDeleteButtonInterface> = ({actionHand
         onKeyDown={(event: React.KeyboardEvent) => { if (event.key === " " || event.key === "Enter") {
           actionHandler(event, action, undefined)
         }}}
-        >
+      >
         <FontAwesomeIcon icon={isCurrentSegmentAlive ? faTrash : faTrashRestore} size="1x" />
         <div>{isCurrentSegmentAlive ? t('cuttingActions.delete-button') : t("cuttingActions.restore-button")}</div>
       </div>
diff --git a/src/main/Error.tsx b/src/main/Error.tsx
index 7b4fa988d..29a1b84cf 100644
--- a/src/main/Error.tsx
+++ b/src/main/Error.tsx
@@ -15,7 +15,7 @@ import { useTranslation } from 'react-i18next';
  * This page is to be displayed when the application has run into a critical error
  * from which it cannot recover.
  */
- const Error : React.FC<{}> = () => {
+const Error : React.FC<{}> = () => {
 
   const { t } = useTranslation();
 
diff --git a/src/main/FinishMenu.tsx b/src/main/FinishMenu.tsx
index 9b5203cd5..51d2c19bd 100644
--- a/src/main/FinishMenu.tsx
+++ b/src/main/FinishMenu.tsx
@@ -29,9 +29,9 @@ const FinishMenu : React.FC<{}> = () => {
 
   return (
     <div css={finishMenuStyle}>
-        <FinishMenuButton iconName={faSave} stateName="Save changes"/>
-        <FinishMenuButton iconName={faFileExport} stateName="Start processing"/>
-        <FinishMenuButton iconName={faTimesCircle} stateName="Discard changes"/>
+      <FinishMenuButton iconName={faSave} stateName="Save changes"/>
+      <FinishMenuButton iconName={faFileExport} stateName="Start processing"/>
+      <FinishMenuButton iconName={faTimesCircle} stateName="Discard changes"/>
     </div>
   );
 }
@@ -68,7 +68,7 @@ const FinishMenuButton: React.FC<{iconName: IconDefinition, stateName: finish["v
 
   return (
     <div css={[basicButtonStyle(theme), tileButtonStyle(theme)]}
-    role="button" tabIndex={0}
+      role="button" tabIndex={0}
       onClick={ finish }
       onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => { if (event.key === " " || event.key === "Enter") {
         finish()
diff --git a/src/main/Header.tsx b/src/main/Header.tsx
index 95d8bcc4b..dbf6410c1 100644
--- a/src/main/Header.tsx
+++ b/src/main/Header.tsx
@@ -8,15 +8,15 @@ function Header() {
   const themeState = useSelector(selectThemeState);
 
   const header = themeState.startsWith('high-contrast-')
-  ? css({
-    height: '46px',
-    backgroundColor: '#000',
-    borderBottom: '2px solid white'
-  })
-  : css({
-    height: '48px',
-    backgroundColor: '#333333',
-  })
+    ? css({
+      height: '46px',
+      backgroundColor: '#000',
+      borderBottom: '2px solid white'
+    })
+    : css({
+      height: '48px',
+      backgroundColor: '#333333',
+    })
 
   const logo = css({
     height: '48px',
diff --git a/src/main/Landing.tsx b/src/main/Landing.tsx
index 3584371b5..971c83c4e 100644
--- a/src/main/Landing.tsx
+++ b/src/main/Landing.tsx
@@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next';
  * This page is to be displayed when the application has run into a critical error
  * from which it cannot recover.
  */
- const Landing : React.FC<{}> = () => {
+const Landing : React.FC<{}> = () => {
 
   const { t } = useTranslation();
 
@@ -37,7 +37,7 @@ import { useTranslation } from 'react-i18next';
       <h1>{t("landing.main-heading")}</h1>
       <div>
         <li>
-        {t("landing.contact-admin")}
+          {t("landing.contact-admin")}
         </li>
         <li>
           {t("landing.start-editing-1")}
diff --git a/src/main/MainContent.tsx b/src/main/MainContent.tsx
index 1f2a1d73a..2956dbf87 100644
--- a/src/main/MainContent.tsx
+++ b/src/main/MainContent.tsx
@@ -136,14 +136,14 @@ const MainContent: React.FC<{}> = () => {
         <div css={[mainContentStyle, finishStyle]} role="main">
           <Finish />
         </div>
-        )
+      )
     } else if (mainMenuState === MainMenuStateNames.keyboardControls) {
       return (
         <div css={[mainContentStyle, keyboardControlsStyle]} role="main">
           <ThemeSwitcher/>
           <KeyboardControls />
         </div>
-        )
+      )
     } else {
       <div css={[mainContentStyle, defaultStyle]} role="main">
         <FontAwesomeIcon icon={faTools} size="10x" />
diff --git a/src/main/MainMenu.tsx b/src/main/MainMenu.tsx
index 22df87bd8..5d264e6ae 100644
--- a/src/main/MainMenu.tsx
+++ b/src/main/MainMenu.tsx
@@ -174,7 +174,7 @@ const MainMenuButton: React.FC<mainMenuButtonInterface> = ({iconName, stateName,
       onKeyDown={(event: React.KeyboardEvent<HTMLLIElement>) => { if (event.key === "Enter") {
         onMenuItemClicked()
       }}}
-      >
+    >
       <FontAwesomeIcon icon={iconName} size={miniButton ? "1x" : "2x"}/>
       {bottomText && <div>{bottomText}</div>}
     </li>
diff --git a/src/main/Metadata.tsx b/src/main/Metadata.tsx
index b1715f071..d243a5867 100644
--- a/src/main/Metadata.tsx
+++ b/src/main/Metadata.tsx
@@ -216,7 +216,7 @@ const Metadata: React.FC<{}> = () => {
    * Form Callbacks - Other
    */
 
-   /**
+  /**
     * Recursively recreates nested array structures for form initalValues
     * @param library
     * @param input
@@ -336,7 +336,7 @@ const Metadata: React.FC<{}> = () => {
    * Form Callbacks - Submitting
    */
 
-   /**
+  /**
     * Sends a single value to the corresponding field in redux.
     * This kinda breaks the form workflow, since we do not use the submit callback
     * of the form class anymore.
@@ -372,8 +372,8 @@ const Metadata: React.FC<{}> = () => {
    * @param input
    */
   const blurWithSubmit = (e: any, input: any) => {
-      input.onBlur(e);
-      submitSingleField(input.value, input.name)
+    input.onBlur(e);
+    submitSingleField(input.value, input.name)
   }
 
   /**
@@ -520,7 +520,7 @@ const Metadata: React.FC<{}> = () => {
             styles={selectFieldStyle(theme)}
             css={fieldTypeStyle(field.readOnly)}>
           </CreatableSelect>
-          );
+        );
       } else {
         return (
           <Select {...input}
@@ -533,27 +533,27 @@ const Metadata: React.FC<{}> = () => {
             styles={selectFieldStyle(theme)}
             css={fieldTypeStyle(field.readOnly)}>
           </Select>
-          );
+        );
       }
 
     } else if (field.type === "date") {
       return (
         <div data-testid="dateTimePicker" css={[fieldTypeStyle(field.readOnly), dateTimeTypeStyle(field.readOnly)]}>
-            <ThemeProvider theme={calendarStyle(theme)}>
-              <DateTimePicker {...input}
-                name={field.id}
-                inputFormat="yyyy/MM/dd HH:mm"
-                disabled={field.readOnly}
-                dateFunsUtils={DateFnsUtils}
-                TextFieldProps={{
-                  variant: 'standard', // Removes default outline
-                  onBlur: (e: any) => {blurWithSubmit(e, input)},
-                  showError: showErrorOnBlur
-                }}
-                leftArrowButtonText={t('metadata.calendar-prev')}
-                rightArrowButtonText={t('metadata.calendar-next')}
-              />
-            </ThemeProvider>
+          <ThemeProvider theme={calendarStyle(theme)}>
+            <DateTimePicker {...input}
+              name={field.id}
+              inputFormat="yyyy/MM/dd HH:mm"
+              disabled={field.readOnly}
+              dateFunsUtils={DateFnsUtils}
+              TextFieldProps={{
+                variant: 'standard', // Removes default outline
+                onBlur: (e: any) => {blurWithSubmit(e, input)},
+                showError: showErrorOnBlur
+              }}
+              leftArrowButtonText={t('metadata.calendar-prev')}
+              rightArrowButtonText={t('metadata.calendar-next')}
+            />
+          </ThemeProvider>
         </div>
       );
     } else if (field.type === "time") {
@@ -618,21 +618,21 @@ const Metadata: React.FC<{}> = () => {
 
     return (
         <Field key={fieldIndex}
-                name={"catalog" + catalogIndex + "." + field.id}
-                validate={getValidators(field)}
-                type={field.type === "boolean" ? "checkbox" : undefined}  // react-final-form complains if we don't specify checkboxes here
-                >
-                {({ input, meta }) => (
-                  <div css={fieldStyle} data-testid={field.id}>
-                    <label css={fieldLabelStyle} htmlFor={input.name}>{
-                      i18n.exists(`metadata.labels.${field.id}`) ?
-                      t(`metadata.labels.${field.id}` as TFuncKey) as string: field.id
-                    }</label>
-
-                    {generateComponentWithModifiedInput(field, input)}
-                    {meta.error && meta.touched && <span css={validateStyle(true)}>{meta.error}</span>}
-                  </div>
-                )}
+          name={"catalog" + catalogIndex + "." + field.id}
+          validate={getValidators(field)}
+          type={field.type === "boolean" ? "checkbox" : undefined}  // react-final-form complains if we don't specify checkboxes here
+          >
+          {({ input, meta }) => (
+            <div css={fieldStyle} data-testid={field.id}>
+              <label css={fieldLabelStyle} htmlFor={input.name}>{
+                i18n.exists(`metadata.labels.${field.id}`) ?
+                t(`metadata.labels.${field.id}` as TFuncKey) as string: field.id
+              }</label>
+
+              {generateComponentWithModifiedInput(field, input)}
+              {meta.error && meta.touched && <span css={validateStyle(true)}>{meta.error}</span>}
+            </div>
+          )}
         </Field>
     );
   }
@@ -671,38 +671,38 @@ const Metadata: React.FC<{}> = () => {
    */
   const render = () => {
     return (
-        <Form
-          onSubmit={onSubmit}
-          subscription={{ submitting: true, pristine: true }} // Hopefully causes less rerenders
-          initialValues={getInitialValues(catalogs)}
-          render={({ handleSubmit, form, submitting, pristine, values}) => (
-            <form onSubmit={event => {
-              handleSubmit(event)
-              // Ugly fix for form not getting updated after submit. TODO: Find a better fix
-              form.reset()
-            }} css={metadataStyle}>
-
-              <div css={errorBoxStyle(getStatus === "failed", theme)} role="alert">
-                <span>A problem occurred during communication with Opencast.</span><br />
-                {getError ? "Details: " + getError : "No error details are available."}<br />
-              </div>
-
-              {catalogs.map((catalog, i) => {
-                if (settings.metadata.configureFields) {
-                  if (catalog.title in settings.metadata.configureFields) {
-                    // If there are no fields for a given catalog, do not render
-                    if (Object.keys(settings.metadata.configureFields[catalog.title]).length > 0) {
-                      return renderCatalog(catalog, i, settings.metadata.configureFields[catalog.title])
-                    } else {
-                      return undefined
-                    }
+      <Form
+        onSubmit={onSubmit}
+        subscription={{ submitting: true, pristine: true }} // Hopefully causes less rerenders
+        initialValues={getInitialValues(catalogs)}
+        render={({ handleSubmit, form, submitting, pristine, values}) => (
+          <form onSubmit={event => {
+            handleSubmit(event)
+            // Ugly fix for form not getting updated after submit. TODO: Find a better fix
+            form.reset()
+          }} css={metadataStyle}>
+
+            <div css={errorBoxStyle(getStatus === "failed", theme)} role="alert">
+              <span>A problem occurred during communication with Opencast.</span><br />
+              {getError ? "Details: " + getError : "No error details are available."}<br />
+            </div>
+
+            {catalogs.map((catalog, i) => {
+              if (settings.metadata.configureFields) {
+                if (catalog.title in settings.metadata.configureFields) {
+                  // If there are no fields for a given catalog, do not render
+                  if (Object.keys(settings.metadata.configureFields[catalog.title]).length > 0) {
+                    return renderCatalog(catalog, i, settings.metadata.configureFields[catalog.title])
+                  } else {
+                    return undefined
                   }
                 }
-                // If there are no settings for a given catalog, just render it completely
-                return renderCatalog(catalog, i, {})
-              })}
+              }
+              // If there are no settings for a given catalog, just render it completely
+              return renderCatalog(catalog, i, {})
+            })}
 
-{/*
+            {/*
                 <div css={{display: "block", wordWrap: "normal", whiteSpace: "pre"}}>{t("metadata.submit-helpertext", { buttonName: t("metadata.submit-button") })}</div>
 
 
@@ -724,21 +724,21 @@ const Metadata: React.FC<{}> = () => {
                 </button>
               </div> */}
 
-              <div css={errorBoxStyle(postStatus === "failed", theme)} role="alert">
-                <span>A problem occurred during communication with Opencast. <br />
+            <div css={errorBoxStyle(postStatus === "failed", theme)} role="alert">
+              <span>A problem occurred during communication with Opencast. <br />
                       Changes could not be saved to Opencast.</span><br />
-                {postError ? "Details: " + postError : "No error details are available."}<br />
-              </div>
+              {postError ? "Details: " + postError : "No error details are available."}<br />
+            </div>
 
-              {/* For debugging the forms current values*/}
-              {/* <FormSpy subscription={{ values: true }}>
+            {/* For debugging the forms current values*/}
+            {/* <FormSpy subscription={{ values: true }}>
                 {({ values }) => (
                   <pre>{JSON.stringify(values, null, 2)}</pre>
                 )}
               </FormSpy> */}
-            </form>
-          )}
-        />
+          </form>
+        )}
+      />
     );
   }
 
diff --git a/src/main/SubtitleEditor.tsx b/src/main/SubtitleEditor.tsx
index 436042709..63cab1d74 100644
--- a/src/main/SubtitleEditor.tsx
+++ b/src/main/SubtitleEditor.tsx
@@ -26,7 +26,7 @@ import { ThemedTooltip } from "./Tooltip";
 /**
  * Displays an editor view for a selected subtitle file
  */
- const SubtitleEditor : React.FC<{}> = () => {
+const SubtitleEditor : React.FC<{}> = () => {
 
   const { t } = useTranslation();
 
@@ -145,7 +145,7 @@ import { ThemedTooltip } from "./Tooltip";
 /**
  * Takes you to a different page
  */
- export const BackButton : React.FC<{}> = () => {
+export const BackButton : React.FC<{}> = () => {
 
   const { t } = useTranslation();
   const theme = useSelector(selectTheme)
diff --git a/src/main/SubtitleListEditor.tsx b/src/main/SubtitleListEditor.tsx
index ab2c053e2..1f3fd7cc5 100644
--- a/src/main/SubtitleListEditor.tsx
+++ b/src/main/SubtitleListEditor.tsx
@@ -54,7 +54,7 @@ const SubtitleListEditor : React.FC<{}> = () => {
     if (subtitle) {
       itemsRef.current = itemsRef.current.slice(0, subtitle.length);
     }
- }, [subtitle]);
+  }, [subtitle]);
 
   // Scroll to segment when triggered by reduxState
   useEffect(() => {
@@ -554,14 +554,14 @@ const TimeInput : React.FC<{
         onBlur={onBlur}
         value={myValue}
       />
-     </ThemedTooltip>
+    </ThemedTooltip>
   )
 }
 
 /**
  * Converts a number into a string with leading zeros
  */
- const fillIn = (val: number) => {
+const fillIn = (val: number) => {
   return val < 10 ? `0${val}` : val
 }
 const fillInMilliseconds = (val: number) => {
@@ -578,11 +578,11 @@ const fillInMilliseconds = (val: number) => {
  * Utility function for TimeInpit
  * Converts a number in milliseoncsd to a string of the format HH:MM:SS:MSS
  */
-  function toHHMMSSMS (ms: number)  {
+function toHHMMSSMS (ms: number)  {
   const milliseconds = (ms % 1000)
-  , seconds = Math.floor((ms/1000)%60)
-  , minutes = Math.floor((ms/(1000*60))%60)
-  , hours = Math.floor((ms/(1000*60*60)))
+    , seconds = Math.floor((ms/1000)%60)
+    , minutes = Math.floor((ms/(1000*60))%60)
+    , hours = Math.floor((ms/(1000*60*60)))
 
   const millisecondsString = fillInMilliseconds(milliseconds)
   const secondsString = fillIn(seconds)
@@ -596,7 +596,7 @@ const fillInMilliseconds = (val: number) => {
   Utility function for TimeInpit
  * Converts a string of the format HH:MM:SS:MSS to a millisecond number
  */
-  function getMillisecondsFromHHMMSSMS(value: string) {
+function getMillisecondsFromHHMMSSMS(value: string) {
   const [str1, str2, str3, str4] = value.split(":");
 
   const val1 = Number(str1);
diff --git a/src/main/SubtitleSelect.tsx b/src/main/SubtitleSelect.tsx
index a593aec1b..0a34781fd 100644
--- a/src/main/SubtitleSelect.tsx
+++ b/src/main/SubtitleSelect.tsx
@@ -204,7 +204,7 @@ const SubtitleAddButton: React.FC<{languages: {subFlavor: string, title: string}
         onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => { if (event.key === " " || event.key === "Enter") {
           setIsPlusDisplay(false)
         }}}
-        >
+      >
         <FontAwesomeIcon icon={faPlus} size="2x" css={plusIconStyle}/>
         <Form
           onSubmit={onSubmit}
@@ -215,31 +215,31 @@ const SubtitleAddButton: React.FC<{languages: {subFlavor: string, title: string}
               // // Ugly fix for form not getting updated after submit. TODO: Find a better fix
               // form.reset()
             }} css={subtitleAddFormStyle}>
-                {/* TODO: Fix the following warning, caused by removing items from data:
+              {/* TODO: Fix the following warning, caused by removing items from data:
                   MUI: You have provided an out-of-range value `undefined` for the select (name="languages") component.
                 */}
-                <ThemeProvider theme={subtitleSelectStyle(theme)}>
-                  <Select
-                    label={t("subtitles.createSubtitleDropdown-label")}
-                    name="languages"
-                    data={selectData()}
-                  />
-                </ThemeProvider>
+              <ThemeProvider theme={subtitleSelectStyle(theme)}>
+                <Select
+                  label={t("subtitles.createSubtitleDropdown-label")}
+                  name="languages"
+                  data={selectData()}
+                />
+              </ThemeProvider>
 
                 {/* "By default disabled elements like <button> do not trigger user interactions
                  * so a Tooltip will not activate on normal events like hover. To accommodate
                  * disabled elements, add a simple wrapper element, such as a span."
                  * see: https://mui.com/material-ui/react-tooltip/#disabled-elements */}
-                <ThemedTooltip title={t("subtitles.createSubtitleButton-createButton-tooltip")}>
-                  <span>
-                    <button css={[basicButtonStyle(theme), createButtonStyle, { width:"100%" } ]}
-                      type="submit"
-                      aria-label={t("subtitles.createSubtitleButton-createButton-tooltip")}
-                      disabled={submitting || pristine}>
-                        {t("subtitles.createSubtitleButton-createButton")}
-                    </button>
-                  </span>
-                </ThemedTooltip>
+              <ThemedTooltip title={t("subtitles.createSubtitleButton-createButton-tooltip")}>
+                <span>
+                  <button css={[basicButtonStyle(theme), createButtonStyle, { width:"100%" } ]}
+                    type="submit"
+                    aria-label={t("subtitles.createSubtitleButton-createButton-tooltip")}
+                    disabled={submitting || pristine}>
+                    {t("subtitles.createSubtitleButton-createButton")}
+                  </button>
+                </span>
+              </ThemedTooltip>
 
             </form>
           )}
diff --git a/src/main/SubtitleTimeline.tsx b/src/main/SubtitleTimeline.tsx
index 2fcee850e..76e27d479 100644
--- a/src/main/SubtitleTimeline.tsx
+++ b/src/main/SubtitleTimeline.tsx
@@ -30,7 +30,7 @@ import { useTranslation } from "react-i18next";
  * Copy-paste of the timeline in Video.tsx, so that we can make some small adjustments,
  * like adding in a list of subtitle segments
  */
- const SubtitleTimeline: React.FC<{}> = () => {
+const SubtitleTimeline: React.FC<{}> = () => {
 
   const { t } = useTranslation();
   const theme = useSelector(selectTheme)
@@ -145,16 +145,16 @@ import { useTranslation } from "react-i18next";
 
 
 
-    // <div className="layoutRoot absoluteLayout">
-    //   {/* <Example /> */}
-    //   <Example2 />
-    //   {/* <TimelineSubtitleSegment
-    //   timelineWidth={width}
-    //   cue={{id: '42', text:"HI", startTime: 1000, endTime: 5000, tree:{children: [{type: "", value: ""}]}}}
-    //   index={0}
-    //   height={80}
-    //   /> */}
-    // </div>
+  // <div className="layoutRoot absoluteLayout">
+  //   {/* <Example /> */}
+  //   <Example2 />
+  //   {/* <TimelineSubtitleSegment
+  //   timelineWidth={width}
+  //   cue={{id: '42', text:"HI", startTime: 1000, endTime: 5000, tree:{children: [{type: "", value: ""}]}}}
+  //   index={0}
+  //   height={80}
+  //   /> */}
+  // </div>
   );
 };
 
@@ -358,32 +358,32 @@ const TimelineSubtitleSegment: React.FC<{
   })
 
   return (
-      <Draggable
-        onStart={onStartDrag}
-        onStop={onStopDrag}
-        defaultPosition={{ x: 10, y: 10 }}
-        position={controlledPosition}
-        axis="x"
-        bounds="parent"
-        nodeRef={nodeRef}
-        cancel={".react-resizable-handle"}
+    <Draggable
+      onStart={onStartDrag}
+      onStop={onStopDrag}
+      defaultPosition={{ x: 10, y: 10 }}
+      position={controlledPosition}
+      axis="x"
+      bounds="parent"
+      nodeRef={nodeRef}
+      cancel={".react-resizable-handle"}
+    >
+      <Resizable
+        height={absoluteHeight}
+        width={absoluteWidth}
+        onResize={onResizeAbsolute}
+        onResizeStop={onResizeStop}
+        // TODO: The 'e' handle is currently NOT WORKING CORRECTLY!
+        //  The errounous behaviour can already be seens with a minimal
+        //  draggable + resizable example.
+        //  Fix most likely requires changes in one of those modules
+        resizeHandles={['w']}
       >
-        <Resizable
-          height={absoluteHeight}
-          width={absoluteWidth}
-          onResize={onResizeAbsolute}
-          onResizeStop={onResizeStop}
-          // TODO: The 'e' handle is currently NOT WORKING CORRECTLY!
-          //  The errounous behaviour can already be seens with a minimal
-          //  draggable + resizable example.
-          //  Fix most likely requires changes in one of those modules
-          resizeHandles={['w']}
-        >
-          <div css={ segmentStyle } ref={nodeRef} onClick={onClick} id="no-scrolling">
-            <span css={textStyle}>{props.cue.text}</span>
-          </div>
-        </Resizable>
-      </Draggable>
+        <div css={ segmentStyle } ref={nodeRef} onClick={onClick} id="no-scrolling">
+          <span css={textStyle}>{props.cue.text}</span>
+        </div>
+      </Resizable>
+    </Draggable>
   )
 })
 
diff --git a/src/main/Thumbnail.tsx b/src/main/Thumbnail.tsx
index d5f9f9d69..19d7f9d46 100644
--- a/src/main/Thumbnail.tsx
+++ b/src/main/Thumbnail.tsx
@@ -65,14 +65,14 @@ const Thumbnail : React.FC<{}> = () => {
 
     var reader  = new FileReader();
     reader.onload = function(e)  {
-        // the result image data
-        if (e.target && e.target.result) {
-          const uri = e.target.result.toString();
-          dispatch(setThumbnail({id: track.id, uri: uri}))
-          dispatch(setHasChanges(true))
-        }
+      // the result image data
+      if (e.target && e.target.result) {
+        const uri = e.target.result.toString();
+        dispatch(setThumbnail({id: track.id, uri: uri}))
+        dispatch(setHasChanges(true))
       }
-      reader.readAsDataURL(fileObj);
+    }
+    reader.readAsDataURL(fileObj);
   };
 
   const discardThumbnail = (id: string) => {
@@ -328,16 +328,16 @@ const ThumbnailButtons : React.FC<{
         active={true}
       />
       {/* Hidden input field for upload */}
-        <input
-          style={{display: 'none'}}
-          ref={(el) => {
-            inputRefs.current[index] = el;
-          }}
-          type="file"
-          accept="image/*"
-          onChange={(event) => uploadCallback(event, track)}
-          aria-hidden="true"
-        />
+      <input
+        style={{display: 'none'}}
+        ref={(el) => {
+          inputRefs.current[index] = el;
+        }}
+        type="file"
+        accept="image/*"
+        onChange={(event) => uploadCallback(event, track)}
+        aria-hidden="true"
+      />
       <ThumbnailButton
         handler={() => { setForOtherThumbnails(track.thumbnailUri) }}
         text={t('thumbnail.buttonUseForOtherThumbnails')}
@@ -532,16 +532,16 @@ const ThumbnailButtonsSimple : React.FC<{
         active={true}
       />
       {/* Hidden input field for upload */}
-        <input
-          style={{display: 'none'}}
-          ref={(el) => {
-            inputRefs.current[index] = el;
-          }}
-          type="file"
-          accept="image/*"
-          onChange={(event) => uploadCallback(event, track)}
-          aria-hidden="true"
-        />
+      <input
+        style={{display: 'none'}}
+        ref={(el) => {
+          inputRefs.current[index] = el;
+        }}
+        type="file"
+        accept="image/*"
+        onChange={(event) => uploadCallback(event, track)}
+        aria-hidden="true"
+      />
       <ThumbnailButton
         handler={() => { discard(track.id) }}
         text={t('thumbnail.buttonDiscard')}
diff --git a/src/main/Timeline.tsx b/src/main/Timeline.tsx
index 72f21d698..ebf24935d 100644
--- a/src/main/Timeline.tsx
+++ b/src/main/Timeline.tsx
@@ -71,20 +71,20 @@ const Timeline: React.FC<{
   }
 
   return (
-  <div ref={ref} css={timelineStyle} onMouseDown={e => setCurrentlyAtToClick(e)}>
-    <Scrubber
-      timelineWidth={width}
-      timelineHeight={timelineHeight}
-      selectCurrentlyAt={selectCurrentlyAt}
-      selectIsPlaying={selectIsPlaying}
-      setCurrentlyAt={setCurrentlyAt}
-      setIsPlaying={setIsPlaying}
-    />
-    <div css={{position: 'relative', height: timelineHeight - 20 + 'px'}} >
-      <Waveforms timelineHeight={timelineHeight}/>
-      <SegmentsList timelineWidth={width} timelineHeight={timelineHeight} styleByActiveSegment={styleByActiveSegment} tabable={true}/>
+    <div ref={ref} css={timelineStyle} onMouseDown={e => setCurrentlyAtToClick(e)}>
+      <Scrubber
+        timelineWidth={width}
+        timelineHeight={timelineHeight}
+        selectCurrentlyAt={selectCurrentlyAt}
+        selectIsPlaying={selectIsPlaying}
+        setCurrentlyAt={setCurrentlyAt}
+        setIsPlaying={setIsPlaying}
+      />
+      <div css={{position: 'relative', height: timelineHeight - 20 + 'px'}} >
+        <Waveforms timelineHeight={timelineHeight}/>
+        <SegmentsList timelineWidth={width} timelineHeight={timelineHeight} styleByActiveSegment={styleByActiveSegment} tabable={true}/>
+      </div>
     </div>
-  </div>
   );
 };
 
@@ -258,21 +258,21 @@ export const Scrubber: React.FC<{
         bounds="parent"
         position={controlledPosition}
         nodeRef={nodeRef}
-        >
-          <div ref={nodeRef} css={scrubberStyle}>
-
-            <div css={scrubberDragHandleStyle} aria-grabbed={isGrabbed}
-              aria-label={t("timeline.scrubber-text-aria",
-                         {currentTime: convertMsToReadableString(currentlyAt), segment: activeSegmentIndex,
-                          segmentStatus: (segments[activeSegmentIndex].deleted ? "Deleted" : "Alive"),
-                          moveLeft: scrubberKeyMap[handlers.left.name],
-                          moveRight: scrubberKeyMap[handlers.right.name],
-                          increase: scrubberKeyMap[handlers.increase.name],
-                          decrease: scrubberKeyMap[handlers.decrease.name] })}
-              tabIndex={0}>
-              <FontAwesomeIcon css={scrubberDragHandleIconStyle} icon={faBars} size="1x" />
-            </div>
+      >
+        <div ref={nodeRef} css={scrubberStyle}>
+
+          <div css={scrubberDragHandleStyle} aria-grabbed={isGrabbed}
+            aria-label={t("timeline.scrubber-text-aria",
+              {currentTime: convertMsToReadableString(currentlyAt), segment: activeSegmentIndex,
+                segmentStatus: (segments[activeSegmentIndex].deleted ? "Deleted" : "Alive"),
+                moveLeft: scrubberKeyMap[handlers.left.name],
+                moveRight: scrubberKeyMap[handlers.right.name],
+                increase: scrubberKeyMap[handlers.increase.name],
+                decrease: scrubberKeyMap[handlers.decrease.name] })}
+            tabIndex={0}>
+            <FontAwesomeIcon css={scrubberDragHandleIconStyle} icon={faBars} size="1x" />
           </div>
+        </div>
       </Draggable>
     </GlobalHotKeys>
   );
@@ -333,22 +333,22 @@ export const SegmentsList: React.FC<{
         <ThemedTooltip title={t("timeline.segment-tooltip", {segment: index})} key={segment.id}>
           <div
             aria-label={t("timeline.segments-text-aria",
-                      {segment: index,
-                        segmentStatus: (segment.deleted ? "Deleted" : "Alive"),
-                        start: convertMsToReadableString(segment.start),
-                        end: convertMsToReadableString(segment.end) })}
+              {segment: index,
+                segmentStatus: (segment.deleted ? "Deleted" : "Alive"),
+                start: convertMsToReadableString(segment.start),
+                end: convertMsToReadableString(segment.end) })}
             tabIndex={tabable ? 0 : -1}
-          css={{
-            background: bgColor(segment.deleted, styleByActiveSegment ? activeSegmentIndex === index : false),
-            borderRadius: '5px',
-            borderStyle: styleByActiveSegment ? (activeSegmentIndex === index ? 'dashed' : 'solid') : 'solid',
-            borderColor: 'white',
-            borderWidth: '1px',
-            boxSizing: 'border-box',
-            width: ((segment.end - segment.start) / duration) * 100 + '%',
-            height: timelineHeight - 20 + 'px',     // CHECK IF 100%
-            zIndex: 1,
-          }}>
+            css={{
+              background: bgColor(segment.deleted, styleByActiveSegment ? activeSegmentIndex === index : false),
+              borderRadius: '5px',
+              borderStyle: styleByActiveSegment ? (activeSegmentIndex === index ? 'dashed' : 'solid') : 'solid',
+              borderColor: 'white',
+              borderWidth: '1px',
+              boxSizing: 'border-box',
+              width: ((segment.end - segment.start) / duration) * 100 + '%',
+              height: timelineHeight - 20 + 'px',     // CHECK IF 100%
+              zIndex: 1,
+            }}>
           </div>
         </ThemedTooltip>
       ))
@@ -478,9 +478,9 @@ export const Waveforms: React.FC<{timelineHeight: number}> = ({timelineHeight})
   }
 
   return (
-  <div css={waveformDisplayTestStyle}>
-    {renderImages()}
-  </div>
+    <div css={waveformDisplayTestStyle}>
+      {renderImages()}
+    </div>
   );
 }
 
diff --git a/src/main/TrackSelection.tsx b/src/main/TrackSelection.tsx
index 8fee75113..d62bd43fb 100644
--- a/src/main/TrackSelection.tsx
+++ b/src/main/TrackSelection.tsx
@@ -69,7 +69,7 @@ const TrackItem: React.FC<{track: Track, enabledCount: number}> = ({track, enabl
   const dispatch = useDispatch();
   const header = track.flavor.type + ' '
     + (track.video_stream.enabled ? ''
-       :  `(${t('trackSelection.trackInactive', 'inactive')})`);
+      :  `(${t('trackSelection.trackInactive', 'inactive')})`);
 
   const trackItemStyle = css({
     display: 'flex',
@@ -109,12 +109,12 @@ const TrackItem: React.FC<{track: Track, enabledCount: number}> = ({track, enabl
     t('trackSelection.deleteTrackText', 'Delete Track'),
     t('trackSelection.cannotDeleteTrackText', 'Cannot Delete Track'),
     t('trackSelection.restoreTrackText', 'Restore Track')
-    ][deleteStatus];
+  ][deleteStatus];
   const deleteTooltip = [
     t('trackSelection.deleteTrackTooltip', 'Do not encode and publish this track.'),
     t('trackSelection.cannotDeleteTrackTooltip', 'Cannot remove this track from publication.'),
     t('trackSelection.restoreTrackTooltip', 'Encode and publish this track.')
-    ][deleteStatus];
+  ][deleteStatus];
   const deleteIcon = [faTrash, faTrash, faTrashRestore][deleteStatus];
   const trackEnabledChange = () => {
     dispatch(setTrackEnabled({
@@ -173,12 +173,12 @@ const SelectButton : React.FC<selectButtonInterface> = ({handler, text, icon, to
   return (
     <ThemedTooltip title={tooltip}>
       <div css={ buttonStyle }
-          tabIndex={ 0 }
-          ref={ref}
-          role="button"
-          aria-label={ tooltip }
-          onClick={ clickHandler }
-          onKeyDown={ keyHandler } >
+        tabIndex={ 0 }
+        ref={ref}
+        role="button"
+        aria-label={ tooltip }
+        onClick={ clickHandler }
+        onKeyDown={ keyHandler } >
         <FontAwesomeIcon icon={ icon } size="1x" />
         <div>{ text }</div>
       </div>
diff --git a/src/main/Video.tsx b/src/main/Video.tsx
index 420bd222d..9707e561c 100644
--- a/src/main/Video.tsx
+++ b/src/main/Video.tsx
@@ -174,275 +174,275 @@ export const VideoPlayer = React.forwardRef(
     setAspectRatio: ActionCreatorWithPayload<{dataKey: number} & {width: number, height: number}, string>,
   },
   forwardRefThing
-) => {
-  const {
-    dataKey,
-    url,
-    isPrimary,
-    selectIsPlaying,
-    subtitleUrl,
-    selectCurrentlyAtInSeconds,
-    selectPreviewTriggered,
-    selectClickTriggered,
-    selectAspectRatio,
-    setIsPlaying,
-    setPreviewTriggered,
-    setClickTriggered,
-    setCurrentlyAt,
-    setAspectRatio,
-  } = props
-
-  const { t } = useTranslation();
-
-  // Init redux variables
-  const dispatch = useDispatch();
-  const isPlaying = useSelector(selectIsPlaying)
-  const currentlyAt = useSelector(selectCurrentlyAtInSeconds)
-  const duration  = useSelector(selectDurationInSeconds)
-  const previewTriggered = useSelector(selectPreviewTriggered)
-  const clickTriggered = useSelector(selectClickTriggered)
-  const aspectRatio = useSelector(selectAspectRatio)
-  const theme = useSelector(selectTheme)
-
-  // Init state variables
-  const ref = useRef<ReactPlayer>(null);
-  const [ready, setReady] = useState(false);
-  const [errorState, setError] = useState(false);
-  const [isAspectRatioUpdated, setIsAspectRatioUpdated] = useState(false);
-
-  // Callback for when the video is playing
-  const onProgressCallback = (state: { played: number, playedSeconds: number, loaded: number, loadedSeconds:  number }) => {
-    if (isPrimary) {
+  ) => {
+    const {
+      dataKey,
+      url,
+      isPrimary,
+      selectIsPlaying,
+      subtitleUrl,
+      selectCurrentlyAtInSeconds,
+      selectPreviewTriggered,
+      selectClickTriggered,
+      selectAspectRatio,
+      setIsPlaying,
+      setPreviewTriggered,
+      setClickTriggered,
+      setCurrentlyAt,
+      setAspectRatio,
+    } = props
+
+    const { t } = useTranslation();
+
+    // Init redux variables
+    const dispatch = useDispatch();
+    const isPlaying = useSelector(selectIsPlaying)
+    const currentlyAt = useSelector(selectCurrentlyAtInSeconds)
+    const duration  = useSelector(selectDurationInSeconds)
+    const previewTriggered = useSelector(selectPreviewTriggered)
+    const clickTriggered = useSelector(selectClickTriggered)
+    const aspectRatio = useSelector(selectAspectRatio)
+    const theme = useSelector(selectTheme)
+
+    // Init state variables
+    const ref = useRef<ReactPlayer>(null);
+    const [ready, setReady] = useState(false);
+    const [errorState, setError] = useState(false);
+    const [isAspectRatioUpdated, setIsAspectRatioUpdated] = useState(false);
+
+    // Callback for when the video is playing
+    const onProgressCallback = (state: { played: number, playedSeconds: number, loaded: number, loadedSeconds:  number }) => {
+      if (isPrimary) {
       // Only update redux if there was a substantial change
-      if (roundToDecimalPlace(currentlyAt, 3) !== roundToDecimalPlace(state.playedSeconds, 3) &&
+        if (roundToDecimalPlace(currentlyAt, 3) !== roundToDecimalPlace(state.playedSeconds, 3) &&
           state.playedSeconds !== 0 &&
           // Avoid overwriting video restarts
           state.playedSeconds < duration) {
-        dispatch(setCurrentlyAt(state.playedSeconds * 1000))
+          dispatch(setCurrentlyAt(state.playedSeconds * 1000))
+        }
       }
     }
-  }
 
-  // Tries to get video dimensions from the HTML5 elements until they are not 0,
-  // then updates the store
-  async function updateAspectRatio() {
-    if (ref.current && ref.current.getInternalPlayer()) {
-      let w = (ref.current.getInternalPlayer() as HTMLVideoElement).videoWidth
-      let h = (ref.current.getInternalPlayer() as HTMLVideoElement).videoHeight
-      while (w === 0 || h === 0) {
-        await sleep(100);
-        w = (ref.current.getInternalPlayer() as HTMLVideoElement).videoWidth
-        h = (ref.current.getInternalPlayer() as HTMLVideoElement).videoHeight
+    // Tries to get video dimensions from the HTML5 elements until they are not 0,
+    // then updates the store
+    async function updateAspectRatio() {
+      if (ref.current && ref.current.getInternalPlayer()) {
+        let w = (ref.current.getInternalPlayer() as HTMLVideoElement).videoWidth
+        let h = (ref.current.getInternalPlayer() as HTMLVideoElement).videoHeight
+        while (w === 0 || h === 0) {
+          await sleep(100);
+          w = (ref.current.getInternalPlayer() as HTMLVideoElement).videoWidth
+          h = (ref.current.getInternalPlayer() as HTMLVideoElement).videoHeight
+        }
+        dispatch(setAspectRatio({dataKey, width: w, height: h}))
+        setIsAspectRatioUpdated(true)
       }
-      dispatch(setAspectRatio({dataKey, width: w, height: h}))
-      setIsAspectRatioUpdated(true)
     }
-  }
 
-  // Callback for checking whether the video element is ready
-  const onReadyCallback = () => {
-    setReady(true);
-  }
+    // Callback for checking whether the video element is ready
+    const onReadyCallback = () => {
+      setReady(true);
+    }
 
-  const onPlay = () => {
+    const onPlay = () => {
     // Restart the video from the beginning when at the end
-    if (isPrimary && currentlyAt >= duration) {
-      dispatch(setCurrentlyAt(0))
-      // Flip-flop the "isPlaying" switch, or else the video won't start playing
-      dispatch(setIsPlaying(false));
-      dispatch(setIsPlaying(true));
+      if (isPrimary && currentlyAt >= duration) {
+        dispatch(setCurrentlyAt(0))
+        // Flip-flop the "isPlaying" switch, or else the video won't start playing
+        dispatch(setIsPlaying(false));
+        dispatch(setIsPlaying(true));
+      }
     }
-  }
 
-  const onEndedCallback = () => {
-    if (isPrimary && currentlyAt !== 0) {
-      dispatch(setIsPlaying(false));
-      dispatch(setCurrentlyAt(duration * 1000)); // It seems onEnded is called before the full duration is reached, so we set currentlyAt to the very end
+    const onEndedCallback = () => {
+      if (isPrimary && currentlyAt !== 0) {
+        dispatch(setIsPlaying(false));
+        dispatch(setCurrentlyAt(duration * 1000)); // It seems onEnded is called before the full duration is reached, so we set currentlyAt to the very end
+      }
     }
-  }
 
-  const onErrorCallback = (e: any) => {
-    setError(true)
-  }
+    const onErrorCallback = (e: any) => {
+      setError(true)
+    }
 
-  useEffect(() => {
+    useEffect(() => {
     // Seek if the position in the video got changed externally
-    if (!isPlaying && ref.current && ready) {
-      ref.current.seekTo(currentlyAt, "seconds")
-    }
-    if (previewTriggered && ref.current && ready) {
-      ref.current.seekTo(currentlyAt, "seconds")
-      dispatch(setPreviewTriggered(false))
-    }
-    if (clickTriggered && ref.current && ready) {
-      ref.current.seekTo(currentlyAt, "seconds")
-      dispatch(setClickTriggered(false))
-    }
-    if (!isAspectRatioUpdated && ready) {     //     if (!isAspectRatioUpdated && ref.current && ready) {
+      if (!isPlaying && ref.current && ready) {
+        ref.current.seekTo(currentlyAt, "seconds")
+      }
+      if (previewTriggered && ref.current && ready) {
+        ref.current.seekTo(currentlyAt, "seconds")
+        dispatch(setPreviewTriggered(false))
+      }
+      if (clickTriggered && ref.current && ready) {
+        ref.current.seekTo(currentlyAt, "seconds")
+        dispatch(setClickTriggered(false))
+      }
+      if (!isAspectRatioUpdated && ready) {     //     if (!isAspectRatioUpdated && ref.current && ready) {
       // Update the store with video dimensions for rendering purposes
-      updateAspectRatio();
-    }
-  })
-
-  // Callback specifically for the subtitle editor view
-  // When changing urls while the player is playing, don't reset to 0
-  // (due to onProgressCallback resetting to 0),
-  // but keep the current currentlyAt
-  useEffect(() => {
-    if (ref.current && ready) {
-      ref.current.seekTo(currentlyAt, "seconds")
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [url])
+        updateAspectRatio();
+      }
+    })
+
+    // Callback specifically for the subtitle editor view
+    // When changing urls while the player is playing, don't reset to 0
+    // (due to onProgressCallback resetting to 0),
+    // but keep the current currentlyAt
+    useEffect(() => {
+      if (ref.current && ready) {
+        ref.current.seekTo(currentlyAt, "seconds")
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [url])
 
-  // Trigger a workaround for subtitles not being displayed in the video in Firefox
-  useEffect(() => {
+    // Trigger a workaround for subtitles not being displayed in the video in Firefox
+    useEffect(() => {
     // Only trigger workaround in Firefox, as it will cause issues in Chrome
     // @ts-ignore
-    if (typeof InstallTrigger !== 'undefined') {
-      reAddTrack()
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [subtitleUrl])
+      if (typeof InstallTrigger !== 'undefined') {
+        reAddTrack()
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [subtitleUrl])
 
-  const playerConfig: Config = {
-    file: {
-      attributes: {
+    const playerConfig: Config = {
+      file: {
+        attributes: {
         // Skip player when navigating page with keyboard
-        tabIndex: '-1',
-        crossOrigin: "anonymous"    // allow thumbnail generation
-      },
-      tracks: [
-        {kind: 'subtitles', src: subtitleUrl, srcLang: 'en', default: true, label: 'I am irrelevant'}
-      ]
+          tabIndex: '-1',
+          crossOrigin: "anonymous"    // allow thumbnail generation
+        },
+        tracks: [
+          {kind: 'subtitles', src: subtitleUrl, srcLang: 'en', default: true, label: 'I am irrelevant'}
+        ]
+      }
     }
-  }
 
-  /**
+    /**
    * Workaround for subtitles not appearing in Firefox (or only appearing on inital mount, then disappearing
    * when changed). Removes old tracks and readds them, because letting React to it does not seem
    * to work properly.
    * Fairly hacky, currently only works for a page with only one video
    * https://github.com/CookPete/react-player/issues/490
    */
-  function reAddTrack() {
-    const video = document.querySelector('video');
-
-    if (video) {
-      const oldTracks = video.querySelectorAll('track');
-      oldTracks.forEach((oldTrack) => {
-        video.removeChild(oldTrack);
-      });
-    }
+    function reAddTrack() {
+      const video = document.querySelector('video');
 
-    if (playerConfig && playerConfig.file && playerConfig.file.tracks) {
-      // eslint-disable-next-line array-callback-return
-      playerConfig.file.tracks.map((t, trackIdx) => {
-        const track = document.createElement('track');
-        track.kind = t.kind!;
-        track.label = t.label!;
-        track.srclang = t.srcLang!;
-        track.default = t.default!;
-        track.src = t.src!;
-        track.track.mode = 'showing'    // Because the load callback may sometimes not execute properly
-        track.addEventListener('error', (e: Event) => {
-          console.warn(`Cannot load track ${t.src!}`)
+      if (video) {
+        const oldTracks = video.querySelectorAll('track');
+        oldTracks.forEach((oldTrack) => {
+          video.removeChild(oldTrack);
         });
-        track.addEventListener('load', (e: Event) => {
-          const textTrack = e.currentTarget as HTMLTrackElement;
-          if (textTrack) {
-            if (t.default === true) {
-              textTrack.track.mode = 'showing';
+      }
+
+      if (playerConfig && playerConfig.file && playerConfig.file.tracks) {
+      // eslint-disable-next-line array-callback-return
+        playerConfig.file.tracks.map((t, trackIdx) => {
+          const track = document.createElement('track');
+          track.kind = t.kind!;
+          track.label = t.label!;
+          track.srclang = t.srcLang!;
+          track.default = t.default!;
+          track.src = t.src!;
+          track.track.mode = 'showing'    // Because the load callback may sometimes not execute properly
+          track.addEventListener('error', (e: Event) => {
+            console.warn(`Cannot load track ${t.src!}`)
+          });
+          track.addEventListener('load', (e: Event) => {
+            const textTrack = e.currentTarget as HTMLTrackElement;
+            if (textTrack) {
+              if (t.default === true) {
+                textTrack.track.mode = 'showing';
               video!.textTracks[trackIdx].mode = 'showing'; // thanks Firefox
-            } else {
-              textTrack.track.mode = 'hidden';
+              } else {
+                textTrack.track.mode = 'hidden';
               video!.textTracks[trackIdx].mode = 'hidden'; // thanks Firefox
+              }
             }
+          });
+          const video = document.querySelector('video');
+          if (video) {
+            video.appendChild(track);
           }
         });
-        const video = document.querySelector('video');
-        if (video) {
-          video.appendChild(track);
-        }
-      });
+      }
     }
-  }
 
-  // External functions
-  useImperativeHandle(forwardRefThing, () => ({
+    // External functions
+    useImperativeHandle(forwardRefThing, () => ({
     // Renders the current frame in the video element to a canvas
     // Returns the data url
-    captureVideo() {
-      const video = ref.current?.getInternalPlayer() as HTMLVideoElement
-      var canvas = document.createElement("canvas");
-      canvas.width = video.videoWidth;
-      canvas.height = video.videoHeight;
-      var canvasContext = canvas.getContext("2d");
-      if (canvasContext !== null) {
-        canvasContext.drawImage(video, 0, 0);
-        return canvas.toDataURL('image/png')
+      captureVideo() {
+        const video = ref.current?.getInternalPlayer() as HTMLVideoElement
+        var canvas = document.createElement("canvas");
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        var canvasContext = canvas.getContext("2d");
+        if (canvasContext !== null) {
+          canvasContext.drawImage(video, 0, 0);
+          return canvas.toDataURL('image/png')
+        }
+      }
+    }));
+
+    const errorBoxStyle = css({
+      ...(!errorState) && {display: "none"},
+      borderColor: `${theme.error}`,
+      borderStyle: 'dashed',
+      fontWeight: 'bold',
+      padding: '10px',
+    })
+
+    const playerWrapper = css({
+      position: 'relative',
+      width: '100%',
+      paddingTop: aspectRatio + '%',
+    });
+
+    const reactPlayerStyle = css({
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      background: ' black',
+    })
+
+    const render = () => {
+      if (!errorState) {
+        return(
+          <div css={playerWrapper}>
+            <ReactPlayer url={url}
+              css={reactPlayerStyle}
+              ref={ref}
+              width='100%'
+              height='100%'
+              playing={isPlaying}
+              muted={!isPrimary}
+              onProgress={onProgressCallback}
+              progressInterval={100}
+              onReady={onReadyCallback}
+              onPlay={onPlay}
+              onEnded={onEndedCallback}
+              onError={onErrorCallback}
+              tabIndex={-1}
+              config={playerConfig}
+              disablePictureInPicture
+            />
+          </div>
+        );
+      } else {
+        return (
+          <div css={errorBoxStyle} role="alert">
+            <span>{t("video.loadError-text")} </span>
+          </div>
+        );
       }
     }
-  }));
-
-  const errorBoxStyle = css({
-    ...(!errorState) && {display: "none"},
-    borderColor: `${theme.error}`,
-    borderStyle: 'dashed',
-    fontWeight: 'bold',
-    padding: '10px',
-  })
-
-  const playerWrapper = css({
-    position: 'relative',
-    width: '100%',
-    paddingTop: aspectRatio + '%',
-  });
-
-  const reactPlayerStyle = css({
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    background: ' black',
-  })
-
-  const render = () => {
-    if (!errorState) {
-      return(
-        <div css={playerWrapper}>
-          <ReactPlayer url={url}
-            css={reactPlayerStyle}
-            ref={ref}
-            width='100%'
-            height='100%'
-            playing={isPlaying}
-            muted={!isPrimary}
-            onProgress={onProgressCallback}
-            progressInterval={100}
-            onReady={onReadyCallback}
-            onPlay={onPlay}
-            onEnded={onEndedCallback}
-            onError={onErrorCallback}
-            tabIndex={-1}
-            config={playerConfig}
-            disablePictureInPicture
-          />
-        </div>
-      );
-    } else {
-      return (
-        <div css={errorBoxStyle} role="alert">
-          <span>{t("video.loadError-text")} </span>
-        </div>
-      );
-    }
-  }
 
-  return (
-    <>
-      {render()}
-    </>
-  );
+    return (
+      <>
+        {render()}
+      </>
+    );
 
   // return (
   //   <div title="Video Player">
@@ -452,7 +452,7 @@ export const VideoPlayer = React.forwardRef(
   //     </video>
   //   </div>
   // );
-});
+  });
 
 /**
  * Contains controls for manipulating multiple video players at once
@@ -500,10 +500,10 @@ export const VideoControls: React.FC<{
           setIsPlayPreview={setIsPlayPreview}
         />
       </div>
-        <PlayButton
-          selectIsPlaying={selectIsPlaying}
-          setIsPlaying={setIsPlaying}
-        />
+      <PlayButton
+        selectIsPlaying={selectIsPlaying}
+        setIsPlaying={setIsPlaying}
+      />
       <div css={rightSideBoxStyle}>
         <TimeDisplay
           selectCurrentlyAt={selectCurrentlyAt}
@@ -572,8 +572,8 @@ const PreviewMode: React.FC<{
   return (
     <ThemedTooltip
       title={t("video.previewButton-tooltip", { status: (isPlayPreview ? "on" : "off"),
-      hotkeyName: (videoPlayerKeyMap[handlers.preview.name] as KeyMapOptions).sequence })}
-      >
+        hotkeyName: (videoPlayerKeyMap[handlers.preview.name] as KeyMapOptions).sequence })}
+    >
       <div css={previewModeStyle}
         ref={ref}
         role="switch" aria-checked={isPlayPreview} tabIndex={0} aria-hidden={false}
@@ -624,15 +624,15 @@ const PlayButton: React.FC<{
   return (
     <ThemedTooltip title={isPlaying ? t("video.pauseButton-tooltip") : t("video.playButton-tooltip")}>
       <div>
-      <GlobalHotKeys keyMap={videoPlayerKeyMap} handlers={handlers} allowChanges={true} />
-      <FontAwesomeIcon css={[basicButtonStyle(theme), {justifySelf: 'center', outline: 'none', color: `${theme.icon_color}`}]} icon={isPlaying ? faPause : faPlay} size="2x"
-        role="button" aria-pressed={isPlaying} tabIndex={0} aria-hidden={false}
-        aria-label={t("video.playButton-tooltip")}
-        onClick={(event: SyntheticEvent) => { switchIsPlaying(event) }}
-        onKeyDown={(event: React.KeyboardEvent) => { if (event.key === "Enter") { // "Space" is handled by global key
-          switchIsPlaying(event)
-        }}}
-      />
+        <GlobalHotKeys keyMap={videoPlayerKeyMap} handlers={handlers} allowChanges={true} />
+        <FontAwesomeIcon css={[basicButtonStyle(theme), {justifySelf: 'center', outline: 'none', color: `${theme.icon_color}`}]} icon={isPlaying ? faPause : faPlay} size="2x"
+          role="button" aria-pressed={isPlaying} tabIndex={0} aria-hidden={false}
+          aria-label={t("video.playButton-tooltip")}
+          onClick={(event: SyntheticEvent) => { switchIsPlaying(event) }}
+          onKeyDown={(event: React.KeyboardEvent) => { if (event.key === "Enter") { // "Space" is handled by global key
+            switchIsPlaying(event)
+          }}}
+        />
       </div>
     </ThemedTooltip>
   );
@@ -681,7 +681,7 @@ const VideoHeader: React.FC<{}> = () => {
 
   return (
     <div css={[titleStyle, titleStyleBold]}>
-        {metadataTitle ? metadataTitle : title}
+      {metadataTitle ? metadataTitle : title}
     </div>
   );
 }
diff --git a/src/redux/metadataSlice.ts b/src/redux/metadataSlice.ts
index b92f38647..d8c70f165 100644
--- a/src/redux/metadataSlice.ts
+++ b/src/redux/metadataSlice.ts
@@ -117,31 +117,31 @@ const metadataSlice = createSlice({
     builder.addCase(
       fetchMetadata.pending, (state, action) => {
         state.status = 'loading'
-    })
+      })
     builder.addCase(
       fetchMetadata.fulfilled, (state, action) => {
         state.catalogs = action.payload
 
         state.status = 'success'
-    })
+      })
     builder.addCase(
       fetchMetadata.rejected, (state, action) => {
         state.status = 'failed'
         state.error = action.error.message
-    })
+      })
     builder.addCase(
       postMetadata.pending, (state, action) => {
         state.postStatus = 'loading'
-    })
+      })
     builder.addCase(
       postMetadata.fulfilled, (state, action) => {
         state.postStatus = 'success'
-    })
+      })
     builder.addCase(
       postMetadata.rejected, (state, action) => {
         state.postStatus = 'failed'
         state.postError = action.error.message
-    })
+      })
   }
 })
 
diff --git a/src/redux/themeSlice.ts b/src/redux/themeSlice.ts
index 3e2664bb4..32395de08 100644
--- a/src/redux/themeSlice.ts
+++ b/src/redux/themeSlice.ts
@@ -96,7 +96,7 @@ const getTheme = () => {
     document.documentElement.setAttribute('data-theme', 'dark');
     return darkMode
   }
-    return lightMode   
+  return lightMode   
 }
 
 export interface theme {
diff --git a/src/redux/videoSlice.ts b/src/redux/videoSlice.ts
index c79b67544..1fd459912 100644
--- a/src/redux/videoSlice.ts
+++ b/src/redux/videoSlice.ts
@@ -184,7 +184,7 @@ const videoSlice = createSlice({
     builder.addCase(
       fetchVideoInformation.pending, (state, action) => {
         state.status = 'loading'
-    })
+      })
     builder.addCase(
       fetchVideoInformation.fulfilled, (state, action) => {
         state.status = 'success'
@@ -219,12 +219,12 @@ const videoSlice = createSlice({
         state.originalThumbnails = state.tracks.map((track: Track) => { return {id: track.id, uri: track.thumbnailUri} })
 
         state.aspectRatios = new Array(state.videoCount)
-    })
+      })
     builder.addCase(
       fetchVideoInformation.rejected, (state, action) => {
         state.status = 'failed'
         state.error = action.error.message
-    })
+      })
   }
 })
 
@@ -281,35 +281,35 @@ const mergeSegments = (state: video, activeSegmentIndex: number, mergeSegmentInd
 
 const skipDeletedSegments = (state: video) => {
   if(state.isPlaying && state.segments[state.activeSegmentIndex].deleted && state.isPlayPreview) {
-      let endTime = state.segments[state.activeSegmentIndex].end
+    let endTime = state.segments[state.activeSegmentIndex].end
 
-      for (let index = state.activeSegmentIndex; index < state.segments.length; index++) {
-        endTime = state.segments[index].end
+    for (let index = state.activeSegmentIndex; index < state.segments.length; index++) {
+      endTime = state.segments[index].end
 
-        if (!state.segments[index].deleted) {
-          // Need to at +1 as start and end of neighbouring segments are identical
-          endTime = state.segments[index].start + 1
-          break
-        }
+      if (!state.segments[index].deleted) {
+        // Need to at +1 as start and end of neighbouring segments are identical
+        endTime = state.segments[index].start + 1
+        break
+      }
 
-        // If this is the last segment and it is deleted
-        if (index + 1 === state.segments.length) {
-          // Properly pause the player
-          state.isPlaying = false
-          // Jump to start of first non-deleted segment
-          for (let j = 0; j < state.segments.length; j++) {
-            if (!state.segments[j].deleted) {
-              endTime = state.segments[j].start
-              break
-            }
+      // If this is the last segment and it is deleted
+      if (index + 1 === state.segments.length) {
+        // Properly pause the player
+        state.isPlaying = false
+        // Jump to start of first non-deleted segment
+        for (let j = 0; j < state.segments.length; j++) {
+          if (!state.segments[j].deleted) {
+            endTime = state.segments[j].start
+            break
           }
         }
       }
-
-      state.currentlyAt = endTime
-      state.previewTriggered = true
-      updateActiveSegment(state);
     }
+
+    state.currentlyAt = endTime
+    state.previewTriggered = true
+    updateActiveSegment(state);
+  }
 }
 
 /**
@@ -362,7 +362,7 @@ export const selectIsCurrentSegmentAlive = (state: { videoState:
   !state.videoState.segments[state.videoState.activeSegmentIndex].deleted
 export const selectSelectedWorkflowId = (state: { videoState:
     { selectedWorkflowId: video["selectedWorkflowId"]; }; }) =>
-    state.videoState.selectedWorkflowId
+  state.videoState.selectedWorkflowId
 export const selectHasChanges = (state: { videoState: { hasChanges: video["hasChanges"]; }; }) =>
   state.videoState.hasChanges
 export const selectWaveformImages = (state: { videoState: { waveformImages: video["waveformImages"]; }; }) =>
diff --git a/src/redux/workflowPostAndProcessSlice.ts b/src/redux/workflowPostAndProcessSlice.ts
index bef4ae8ba..4b6793fcd 100644
--- a/src/redux/workflowPostAndProcessSlice.ts
+++ b/src/redux/workflowPostAndProcessSlice.ts
@@ -35,16 +35,16 @@ const workflowPostAndProcessSlice = createSlice({
     builder.addCase(
       postVideoInformationWithWorkflow.pending, (state, action) => {
         state.status = 'loading'
-    })
+      })
     builder.addCase(
       postVideoInformationWithWorkflow.fulfilled, (state, action) => {
         state.status = 'success'
-    })
+      })
     builder.addCase(
       postVideoInformationWithWorkflow.rejected, (state, action) => {
         state.status = 'failed'
         state.error = action.error.message
-    })
+      })
   }
 })
 
diff --git a/src/redux/workflowPostSlice.ts b/src/redux/workflowPostSlice.ts
index 06d178e93..a82f6bc21 100644
--- a/src/redux/workflowPostSlice.ts
+++ b/src/redux/workflowPostSlice.ts
@@ -36,16 +36,16 @@ const workflowPostSlice = createSlice({
     builder.addCase(
       postVideoInformation.pending, (state, action) => {
         state.status = 'loading'
-    })
+      })
     builder.addCase(
       postVideoInformation.fulfilled, (state, action) => {
         state.status = 'success'
-    })
+      })
     builder.addCase(
       postVideoInformation.rejected, (state, action) => {
         state.status = 'failed'
         state.error = action.error.message
-    })
+      })
   }
 })
 
diff --git a/src/util/client.js b/src/util/client.js
index 4da4d5eb9..d03cac0ae 100644
--- a/src/util/client.js
+++ b/src/util/client.js
@@ -50,9 +50,9 @@ export async function client(endpoint, { body, ...customConfig } = {}) {
     throw new Error(response.statusText)
   } catch (err) {
     return Promise.reject(response.status ?
-        "Status " + response.status + ": " + text :
-        err.message
-      )
+      "Status " + response.status + ": " + text :
+      err.message
+    )
   }
 }
 

From 85548c1d3ae9695b747d3d37d6c792376ff21c00 Mon Sep 17 00:00:00 2001
From: Lukas Kalbertodt <lukas.kalbertodt@gmail.com>
Date: Thu, 8 Jun 2023 18:34:38 +0200
Subject: [PATCH 25/47] Fix most `space-before-function-paren` lints

Only the ones in `waveform.js` remaining
---
 src/main/SubtitleListEditor.tsx | 2 +-
 src/main/Thumbnail.tsx          | 2 +-
 src/main/Timeline.tsx           | 7 +++----
 src/redux/videoSlice.ts         | 4 ++--
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/main/SubtitleListEditor.tsx b/src/main/SubtitleListEditor.tsx
index 1f3fd7cc5..8f209afc9 100644
--- a/src/main/SubtitleListEditor.tsx
+++ b/src/main/SubtitleListEditor.tsx
@@ -578,7 +578,7 @@ const fillInMilliseconds = (val: number) => {
  * Utility function for TimeInpit
  * Converts a number in milliseoncsd to a string of the format HH:MM:SS:MSS
  */
-function toHHMMSSMS (ms: number)  {
+function toHHMMSSMS(ms: number)  {
   const milliseconds = (ms % 1000)
     , seconds = Math.floor((ms/1000)%60)
     , minutes = Math.floor((ms/(1000*60))%60)
diff --git a/src/main/Thumbnail.tsx b/src/main/Thumbnail.tsx
index 19d7f9d46..26102e7db 100644
--- a/src/main/Thumbnail.tsx
+++ b/src/main/Thumbnail.tsx
@@ -64,7 +64,7 @@ const Thumbnail : React.FC<{}> = () => {
     }
 
     var reader  = new FileReader();
-    reader.onload = function(e)  {
+    reader.onload = e => {
       // the result image data
       if (e.target && e.target.result) {
         const uri = e.target.result.toString();
diff --git a/src/main/Timeline.tsx b/src/main/Timeline.tsx
index ebf24935d..604b7c952 100644
--- a/src/main/Timeline.tsx
+++ b/src/main/Timeline.tsx
@@ -423,21 +423,20 @@ export const Waveforms: React.FC<{timelineHeight: number}> = ({timelineHeight})
         var xhr = new XMLHttpRequest()
         xhr.open("GET", videoURL)
         xhr.responseType = "blob"
-        xhr.onload = function()
-        {
+        xhr.onload = () => {
           blob = xhr.response
           var file = new File([blob], blob)
 
           // Start waveform worker with blob
           const waveformWorker : any = new Waveform({type: 'img', width: '2000', height: '230', samples: 100000, media: file})
 
-          waveformWorker.onerror = function(error: string) {
+          waveformWorker.onerror = (error: string) => {
             setWaveformWorkerError(true)
             console.log("Waveform could not be generated:" + error)
           }
 
           // When done, save path to generated waveform img
-          waveformWorker.oncomplete = function(image: any, numSamples: any) {
+          waveformWorker.oncomplete = (image: any, numSamples: any) => {
             newImages.push(image)
             waveformsProcessed++
             // If all images are generated, rerender
diff --git a/src/redux/videoSlice.ts b/src/redux/videoSlice.ts
index 1fd459912..67f677d3c 100644
--- a/src/redux/videoSlice.ts
+++ b/src/redux/videoSlice.ts
@@ -321,8 +321,8 @@ const skipDeletedSegments = (state: video) => {
  * TODO: Improve calculation to handle multiple rows of videos
  */
 export const calculateTotalAspectRatio = (aspectRatios: video["aspectRatios"]) => {
-  let minHeight = Math.min.apply(Math, aspectRatios.map(function(o) { return o.height; }))
-  let minWidth = Math.min.apply(Math, aspectRatios.map(function(o) { return o.width; }))
+  let minHeight = Math.min.apply(Math, aspectRatios.map(o => o.height))
+  let minWidth = Math.min.apply(Math, aspectRatios.map(o => o.width))
   minWidth *= aspectRatios.length
   return Math.min((minHeight / minWidth) * 100, (9/32) * 100)
 }

From 0b736ebb32c418b2bfae26f4b5053ef60fe0542c Mon Sep 17 00:00:00 2001
From: Lukas Kalbertodt <lukas.kalbertodt@gmail.com>
Date: Thu, 8 Jun 2023 18:36:18 +0200
Subject: [PATCH 26/47] Fix `prefer-const` lints automatically via `eslint
 --fix`

---
 src/config.ts                          | 12 ++++++------
 src/cssStyles.tsx                      |  4 ++--
 src/main/Metadata.tsx                  | 12 ++++++------
 src/main/Save.tsx                      |  2 +-
 src/main/SubtitleSelect.tsx            | 12 ++++++------
 src/main/SubtitleTimeline.tsx          |  4 ++--
 src/main/SubtitleVideoArea.tsx         |  2 +-
 src/main/Timeline.tsx                  |  4 ++--
 src/main/WorkflowConfiguration.tsx     |  2 +-
 src/redux/__tests__/videoSlice.test.ts | 16 ++++++++--------
 src/redux/subtitleSlice.ts             |  2 +-
 src/redux/videoSlice.ts                | 10 +++++-----
 src/redux/workflowPostSlice.ts         |  2 +-
 src/util/utilityFunctions.ts           | 12 ++++++------
 14 files changed, 48 insertions(+), 48 deletions(-)

diff --git a/src/config.ts b/src/config.ts
index ae0f2789a..c588500b7 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -114,7 +114,7 @@ export const init = async () => {
   // Get settings from URL query.
   var urlParams = new URLSearchParams(window.location.search);
 
-  let rawUrlSettings = {};
+  const rawUrlSettings = {};
   urlParams.forEach((value, key) => {
     // Create empty objects for full path (if the key contains '.') and set
     // the value at the end.
@@ -255,7 +255,7 @@ const validate = (obj: Record<string, any> | null, allowParse: boolean, src: str
   const validateObj = (schema: any, obj: Record<string, any> | null, path: string) => {
     // We iterate through all keys of the given settings object, checking if
     // each key is valid and recursively validating the value of that key.
-    let out : {[k: string]: any} = {};
+    const out : {[k: string]: any} = {};
     for (const key in obj) {
       const newPath = path ? `${path}.${key}` : key;
       if (key in schema) {
@@ -305,7 +305,7 @@ const types = {
     }
   },
   'map': (v: any, allowParse: any) => {
-    for (let key in v) {
+    for (const key in v) {
       if (typeof key !== 'string') {
         throw new Error("is not a string, but should be");
       }
@@ -315,15 +315,15 @@ const types = {
     }
   },
   'objectsWithinObjects': (v: any, allowParse: any) => {
-    for (let catalogName in v) {
+    for (const catalogName in v) {
       if (typeof catalogName !== 'string') {
         throw new Error("is not a string, but should be");
       }
-      for (let fieldName in v[catalogName]) {
+      for (const fieldName in v[catalogName]) {
         if (typeof fieldName !== 'string') {
           throw new Error("is not a string, but should be");
         }
-        for (let attributeName in v[catalogName][fieldName]) {
+        for (const attributeName in v[catalogName][fieldName]) {
           if (typeof attributeName !== 'string') {
             throw new Error("is not a string, but should be");
           }
diff --git a/src/cssStyles.tsx b/src/cssStyles.tsx
index b85c60f38..84d24eb82 100644
--- a/src/cssStyles.tsx
+++ b/src/cssStyles.tsx
@@ -42,8 +42,8 @@ export const globalStyle = (theme: Theme) => css({
  */
 export const flexGapReplacementStyle = (flexGapValue: number, flexDirectionIsRow: boolean) => {
 
-  let half = flexGapValue / 2
-  let quarter = flexGapValue / 4
+  const half = flexGapValue / 2
+  const quarter = flexGapValue / 4
 
   return (
     {
diff --git a/src/main/Metadata.tsx b/src/main/Metadata.tsx
index d243a5867..e7540b9d0 100644
--- a/src/main/Metadata.tsx
+++ b/src/main/Metadata.tsx
@@ -63,12 +63,12 @@ const Metadata: React.FC<{}> = () => {
     if (getStatus === 'success') {
       for(let catalogIndex = 0; catalogIndex < catalogs.length; catalogIndex++) {
         if (settings.metadata.configureFields) {
-          let configureFields = settings.metadata.configureFields
-          let catalog = catalogs[catalogIndex]
+          const configureFields = settings.metadata.configureFields
+          const catalog = catalogs[catalogIndex]
 
           if (catalog.title in configureFields) {
             if (Object.keys(configureFields[catalog.title]).length > 0) {
-              let configureFieldsCatalog = configureFields[catalog.title]
+              const configureFieldsCatalog = configureFields[catalog.title]
 
               for (let fieldIndex = 0; fieldIndex < catalog.fields.length; fieldIndex++) {
                 if (catalog.fields[fieldIndex].id in configureFieldsCatalog) {
@@ -253,7 +253,7 @@ const Metadata: React.FC<{}> = () => {
           let searchValue : any = field.value
 
           if (Array.isArray(searchValue)) {
-            let result: any[] = [];
+            const result: any[] = [];
             helperHandleArrays(library, field.value, result)
             searchValue = result
           } else {
@@ -283,7 +283,7 @@ const Metadata: React.FC<{}> = () => {
    * @param value
    */
   const duration = (value: any) => {
-    let re: RegExp = /^[0-9][0-9]:[0-9][0-9]:[0-9][0-9]$/
+    const re: RegExp = /^[0-9][0-9]:[0-9][0-9]:[0-9][0-9]$/
     return re.test(value) ? undefined : t("metadata.validation.duration-format")
   }
 
@@ -430,7 +430,7 @@ const Metadata: React.FC<{}> = () => {
   const onSubmit = (values: { [x: string]: { [x: string]: any; }; }) => {
     // For each submitted value, get the catalog it belongs to
     Object.keys(values).forEach((formCatalogName: string) => {
-      let catalogIndex = parseInt(formCatalogName.replace("catalog", ""))
+      const catalogIndex = parseInt(formCatalogName.replace("catalog", ""))
 
       // For each field in the submitted values
       Object.keys(values[formCatalogName]).forEach((formFieldName: any) => {
diff --git a/src/main/Save.tsx b/src/main/Save.tsx
index 75513c9d8..61f50d940 100644
--- a/src/main/Save.tsx
+++ b/src/main/Save.tsx
@@ -142,7 +142,7 @@ export const SaveButton: React.FC<{}> = () => {
     const subtitlesForPosting = []
 
     for (const identifier in subtitles) {
-      let flavor: Flavor = {type: identifier.split("/")[0], subtype: identifier.split("/")[1]}
+      const flavor: Flavor = {type: identifier.split("/")[0], subtype: identifier.split("/")[1]}
       subtitlesForPosting.push({flavor: flavor, subtitle: serializeSubtitle(subtitles[identifier])})
 
     }
diff --git a/src/main/SubtitleSelect.tsx b/src/main/SubtitleSelect.tsx
index 0a34781fd..f8a54ad3f 100644
--- a/src/main/SubtitleSelect.tsx
+++ b/src/main/SubtitleSelect.tsx
@@ -30,14 +30,14 @@ const SubtitleSelect : React.FC<{}> = () => {
 
   // Update the displayFlavors and canBeAddedFlavors
   useEffect(() => {
-    let languages = { ...settings.subtitles.languages };
+    const languages = { ...settings.subtitles.languages };
 
     // Get flavors of already created tracks or existing subtitle tracks
-    let subtitleFlavors = captionTracks
+    const subtitleFlavors = captionTracks
       .map(track => track.flavor.type + '/' + track.flavor.subtype)
       .filter(flavor => !subtitles[flavor])
       .concat(Object.keys(subtitles));
-    let tempDisplayFlavors = []
+    const tempDisplayFlavors = []
     for (const flavor of subtitleFlavors) {
       const lang = flavor.replace(/^[^+]*/, '') || t('subtitles.generic');
       tempDisplayFlavors.push({
@@ -48,7 +48,7 @@ const SubtitleSelect : React.FC<{}> = () => {
     tempDisplayFlavors.sort((f1, f2) => f1.title.localeCompare(f2.title));
 
     // List of unused languages
-    let tempCanBeAddedFlavors = Object.keys(languages)
+    const tempCanBeAddedFlavors = Object.keys(languages)
       .map(flavor => ({subFlavor: flavor, title: languages[flavor]}))
       .sort((lang1, lang2) => lang1.title.localeCompare(lang2.title));
 
@@ -63,12 +63,12 @@ const SubtitleSelect : React.FC<{}> = () => {
   })
 
   const renderButtons = () => {
-    let buttons : JSX.Element[] = []
+    const buttons : JSX.Element[] = []
     if (settings.subtitles.languages === undefined) {
       return buttons
     }
 
-    for (let subFlavor of displayFlavors) {
+    for (const subFlavor of displayFlavors) {
       const icon = ((settings.subtitles || {}).icons || {})[subFlavor.subFlavor];
       buttons.push(
         <SubtitleSelectButton
diff --git a/src/main/SubtitleTimeline.tsx b/src/main/SubtitleTimeline.tsx
index 76e27d479..3d7857357 100644
--- a/src/main/SubtitleTimeline.tsx
+++ b/src/main/SubtitleTimeline.tsx
@@ -54,8 +54,8 @@ const SubtitleTimeline: React.FC<{}> = () => {
   });
 
   const setCurrentlyAtToClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-    let rect = e.currentTarget.getBoundingClientRect()
-    let offsetX = e.clientX - rect.left
+    const rect = e.currentTarget.getBoundingClientRect()
+    const offsetX = e.clientX - rect.left
     dispatch(setClickTriggered(true))
     dispatch(setCurrentlyAt((offsetX / widthMiniTimeline) * (duration)))
   }
diff --git a/src/main/SubtitleVideoArea.tsx b/src/main/SubtitleVideoArea.tsx
index 8b10d0eb4..dac1adcd0 100644
--- a/src/main/SubtitleVideoArea.tsx
+++ b/src/main/SubtitleVideoArea.tsx
@@ -38,7 +38,7 @@ import { selectFieldStyle } from "../cssStyles";
 const SubtitleVideoArea : React.FC<{}> = () => {
 
   const tracks = useSelector(selectVideos)
-  let subtitle = useSelector(selectSelectedSubtitleByFlavor)
+  const subtitle = useSelector(selectSelectedSubtitleByFlavor)
   const [selectedFlavor, setSelectedFlavor] = useState<Flavor>()
   const [subtitleUrl, setSubtitleUrl] = useState("")
 
diff --git a/src/main/Timeline.tsx b/src/main/Timeline.tsx
index 604b7c952..e7d21d8a6 100644
--- a/src/main/Timeline.tsx
+++ b/src/main/Timeline.tsx
@@ -64,8 +64,8 @@ const Timeline: React.FC<{
 
   // Update the current time based on the position clicked on the timeline
   const setCurrentlyAtToClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-    let rect = e.currentTarget.getBoundingClientRect()
-    let offsetX = e.clientX - rect.left
+    const rect = e.currentTarget.getBoundingClientRect()
+    const offsetX = e.clientX - rect.left
     dispatch(setClickTriggered(true))
     dispatch(setCurrentlyAt((offsetX / width) * (duration)))
   }
diff --git a/src/main/WorkflowConfiguration.tsx b/src/main/WorkflowConfiguration.tsx
index 588b106eb..1dfa17690 100644
--- a/src/main/WorkflowConfiguration.tsx
+++ b/src/main/WorkflowConfiguration.tsx
@@ -96,7 +96,7 @@ export const SaveAndProcessButton: React.FC<{text: string}> = ({text}) => {
     const subtitlesForPosting = []
 
     for (const identifier in subtitles) {
-      let flavor: Flavor = {type: identifier.split("/")[0], subtype: identifier.split("/")[1]}
+      const flavor: Flavor = {type: identifier.split("/")[0], subtype: identifier.split("/")[1]}
       subtitlesForPosting.push({flavor: flavor, subtitle: serializeSubtitle(subtitles[identifier])})
 
     }
diff --git a/src/redux/__tests__/videoSlice.test.ts b/src/redux/__tests__/videoSlice.test.ts
index bee3411c1..7e65e6214 100644
--- a/src/redux/__tests__/videoSlice.test.ts
+++ b/src/redux/__tests__/videoSlice.test.ts
@@ -145,7 +145,7 @@ describe('Video reducer', () => {
     initState.segments = [
       {id: '0', start: 0, end: 10, deleted: false},
     ]
-    let resultSegments = [
+    const resultSegments = [
       {start: 0, end: 5, deleted: false},
       {start: 5, end: 10, deleted: false}
     ]
@@ -165,7 +165,7 @@ describe('Video reducer', () => {
     initState.segments = [
       {id: '0', start: 0, end: 10, deleted: false},
     ]
-    let resultSegments = [
+    const resultSegments = [
       {start: 0, end: 10, deleted: false},
     ]
 
@@ -184,7 +184,7 @@ describe('Video reducer', () => {
     initState.segments = [
       {id: '0', start: 0, end: 10, deleted: false},
     ]
-    let resultSegments = [
+    const resultSegments = [
       {start: 0, end: 10, deleted: false},
     ]
 
@@ -204,7 +204,7 @@ describe('Video reducer', () => {
       {id: '0', start: 0, end: 5, deleted: false},
       {id: '0', start: 5, end: 10, deleted: false}
     ]
-    let resultSegments = [
+    const resultSegments = [
       {start: 0, end: 5, deleted: false},
       {start: 5, end: 10, deleted: false}
     ]
@@ -218,7 +218,7 @@ describe('Video reducer', () => {
   })
 
   it('should mark a segment as deleted if alive', () => {
-    let resultSegments = [
+    const resultSegments = [
       {deleted: true},
     ]
 
@@ -235,7 +235,7 @@ describe('Video reducer', () => {
       {id: '0', start: 0, end: 5, deleted: false},
       {id: '0', start: 5, end: 10, deleted: false}
     ]
-    let resultSegments = [
+    const resultSegments = [
       {start: 0, end: 10, deleted: false},
     ]
 
@@ -253,7 +253,7 @@ describe('Video reducer', () => {
       {id: '0', start: 0, end: 5, deleted: false},
       {id: '0', start: 5, end: 10, deleted: false}
     ]
-    let resultSegments = [
+    const resultSegments = [
       {id: '0', start: 0, end: 5, deleted: false},
       {id: '0', start: 5, end: 10, deleted: false}
     ]
@@ -271,7 +271,7 @@ describe('Video reducer', () => {
       {id: '0', start: 0, end: 5, deleted: true},
       {id: '0', start: 5, end: 10, deleted: false}
     ]
-    let resultSegments = [
+    const resultSegments = [
       {start: 0, end: 10, deleted: true},
     ]
 
diff --git a/src/redux/subtitleSlice.ts b/src/redux/subtitleSlice.ts
index 5ee1a11fd..f0aaca441 100644
--- a/src/redux/subtitleSlice.ts
+++ b/src/redux/subtitleSlice.ts
@@ -83,7 +83,7 @@ export const subtitleSlice = createSlice({
         return
       }
 
-      let cue = state.subtitles[action.payload.identifier][action.payload.cueIndex]
+      const cue = state.subtitles[action.payload.identifier][action.payload.cueIndex]
       cue.id = action.payload.newCue.id
       cue.idInternal = action.payload.newCue.idInternal
       cue.text = action.payload.newCue.text
diff --git a/src/redux/videoSlice.ts b/src/redux/videoSlice.ts
index 67f677d3c..f7ed8b875 100644
--- a/src/redux/videoSlice.ts
+++ b/src/redux/videoSlice.ts
@@ -91,7 +91,7 @@ const videoSlice = createSlice({
   initialState,
   reducers: {
     setTrackEnabled: (state, action) => {
-      for (let track of state.tracks) {
+      for (const track of state.tracks) {
         if (track.id === action.payload.id) {
           track.audio_stream.enabled = action.payload.enabled;
           track.video_stream.enabled = action.payload.enabled;
@@ -149,11 +149,11 @@ const videoSlice = createSlice({
       }
 
       // Make two (new) segments out of it
-      let segmentA : Segment =  {id: nanoid(),
+      const segmentA : Segment =  {id: nanoid(),
         start: state.segments[state.activeSegmentIndex].start,
         end: state.currentlyAt,
         deleted: state.segments[state.activeSegmentIndex].deleted}
-      let segmentB : Segment =  {id: nanoid(),
+      const segmentB : Segment =  {id: nanoid(),
         start: state.currentlyAt,
         end: state.segments[state.activeSegmentIndex].end,
         deleted: state.segments[state.activeSegmentIndex].deleted}
@@ -245,7 +245,7 @@ const updateActiveSegment = (state: video) => {
  * Helper Function for testing with current/old editor API
  */
 export const parseSegments = (segments: Segment[], duration: number) => {
-  let newSegments : Segment[] = []
+  const newSegments : Segment[] = []
 
   if (segments.length === 0) {
     newSegments.push({id: nanoid(), start: 0, end: duration, deleted: false})
@@ -321,7 +321,7 @@ const skipDeletedSegments = (state: video) => {
  * TODO: Improve calculation to handle multiple rows of videos
  */
 export const calculateTotalAspectRatio = (aspectRatios: video["aspectRatios"]) => {
-  let minHeight = Math.min.apply(Math, aspectRatios.map(o => o.height))
+  const minHeight = Math.min.apply(Math, aspectRatios.map(o => o.height))
   let minWidth = Math.min.apply(Math, aspectRatios.map(o => o.width))
   minWidth *= aspectRatios.length
   return Math.min((minHeight / minWidth) * 100, (9/32) * 100)
diff --git a/src/redux/workflowPostSlice.ts b/src/redux/workflowPostSlice.ts
index a82f6bc21..ea8285dd6 100644
--- a/src/redux/workflowPostSlice.ts
+++ b/src/redux/workflowPostSlice.ts
@@ -59,7 +59,7 @@ interface segmentAPI {
 // Convert a segment from how it is stored in redux into
 // a segment that can be send to Opencast
 export const convertSegments = (segments: Segment[]) => {
-  let newSegments: segmentAPI[] = []
+  const newSegments: segmentAPI[] = []
 
   segments.forEach(segment => {
     newSegments.push({
diff --git a/src/util/utilityFunctions.ts b/src/util/utilityFunctions.ts
index ef003e13c..e49901938 100644
--- a/src/util/utilityFunctions.ts
+++ b/src/util/utilityFunctions.ts
@@ -3,7 +3,7 @@ import { WebVTTParser, WebVTTSerializer } from 'webvtt-parser';
 import { ExtendedSubtitleCue, SubtitleCue } from '../types';
 
 export const roundToDecimalPlace = (num: number, decimalPlace: number) => {
-  let decimalFactor = Math.pow(10, decimalPlace)
+  const decimalFactor = Math.pow(10, decimalPlace)
   return Math.round((num + Number.EPSILON) * decimalFactor) / decimalFactor
 }
 
@@ -14,11 +14,11 @@ export const sleep = (ms: number) => new Promise((resolve, reject) => setTimeout
 
 // Get an understandable time string for ARIA
 export const convertMsToReadableString = (ms: number): string => {
-  let hours = new Date((ms ? ms : 0)).toISOString().substr(11, 2)
-  let minutes = new Date((ms ? ms : 0)).toISOString().substr(14, 2)
-  let seconds = new Date((ms ? ms : 0)).toISOString().substr(17, 2)
+  const hours = new Date((ms ? ms : 0)).toISOString().substr(11, 2)
+  const minutes = new Date((ms ? ms : 0)).toISOString().substr(14, 2)
+  const seconds = new Date((ms ? ms : 0)).toISOString().substr(17, 2)
 
-  let result = []
+  const result = []
   if (parseInt(hours) > 0) { result.push(hours + " hours, ")}
   if (parseInt(minutes) > 0 || parseInt(hours) > 0) { result.push(minutes + " minutes, ")}
   result.push(seconds + " seconds")
@@ -144,7 +144,7 @@ export function parseSubtitle(subtitle: String) {
   // Attach a unique id to each segment/cue
   // This is used by React to keep track of cues between changes (e.g. addition, deletion)
   let index = 0
-  for (let cue of tree.cues) {
+  for (const cue of tree.cues) {
     if (!cue.id) {
       cue.idInternal = nanoid()
       tree.cues[index] = cue

From d0a3f415ce053ee9c75fcc12f46e27a38defdc70 Mon Sep 17 00:00:00 2001
From: Lukas Kalbertodt <lukas.kalbertodt@gmail.com>
Date: Thu, 8 Jun 2023 18:38:04 +0200
Subject: [PATCH 27/47] Use `string` instead of `String` as TS type

Fixes `@typescript-eslint/ban-types` lints
---
 src/main/ThemeSwitcher.tsx |  2 +-
 src/redux/themeSlice.ts    | 76 +++++++++++++++++++-------------------
 2 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/src/main/ThemeSwitcher.tsx b/src/main/ThemeSwitcher.tsx
index 6f2eda94f..205cd0075 100644
--- a/src/main/ThemeSwitcher.tsx
+++ b/src/main/ThemeSwitcher.tsx
@@ -29,7 +29,7 @@ const ThemeSwitcher: React.FC<{}> = () => {
 
   isDarkPrefered.addEventListener('change', systemPreferenceHasChanged)
 
-  const switchTheme = (themeState: String) => {
+  const switchTheme = (themeState: string) => {
     if(themeState === 'system'){
       dispatch(setState('system'))
     } 
diff --git a/src/redux/themeSlice.ts b/src/redux/themeSlice.ts
index 32395de08..dffef2a80 100644
--- a/src/redux/themeSlice.ts
+++ b/src/redux/themeSlice.ts
@@ -2,44 +2,44 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { darkMode, lightMode, highContrastDarkMode, highContrastLightMode } from "../themes";
 
 export interface Theme {
-  background: String
-  menu_background: String
-  text: String
-  error: String
-  element_bg: String
-  multiValue: String
-  focused: String
-  focus_text: String
-  selected: String
-  disabled: String
-  menuBorder: String
-  boxShadow: String
-  singleKey_bg: String
-  singleKey_border: String
-  invert_wave: String
-  inverted_text: String
-  tooltip: String
-  tooltip_text: String
-  element_outline: String
-  selected_text: String
-  dropdown_border: String
-  menuButton_outline: String
-  button_outline: String
-  button_color: String
-  indicator_color: String
-  icon_color: String
-  waveform_filter: String
-  waveform_bg: String
-  scrubber: String
-  subtitle_segment_bg: String
-  subtitle_segment_border: String
-  subtitle_segment_text: String
-  clock_bg: String
-  clock_border: String
-  clock_hands: String
-  clock_focus: String
-  digit_selected: String
-  text_shadow: String
+  background: string
+  menu_background: string
+  text: string
+  error: string
+  element_bg: string
+  multiValue: string
+  focused: string
+  focus_text: string
+  selected: string
+  disabled: string
+  menuBorder: string
+  boxShadow: string
+  singleKey_bg: string
+  singleKey_border: string
+  invert_wave: string
+  inverted_text: string
+  tooltip: string
+  tooltip_text: string
+  element_outline: string
+  selected_text: string
+  dropdown_border: string
+  menuButton_outline: string
+  button_outline: string
+  button_color: string
+  indicator_color: string
+  icon_color: string
+  waveform_filter: string
+  waveform_bg: string
+  scrubber: string
+  subtitle_segment_bg: string
+  subtitle_segment_border: string
+  subtitle_segment_text: string
+  clock_bg: string
+  clock_border: string
+  clock_hands: string
+  clock_focus: string
+  digit_selected: string
+  text_shadow: string
 };
 
 const getValue = () => {

From 850a317472bf45cae1a03ac2eddaad86cde8b222 Mon Sep 17 00:00:00 2001
From: Lukas Kalbertodt <lukas.kalbertodt@gmail.com>
Date: Thu, 8 Jun 2023 18:42:38 +0200
Subject: [PATCH 28/47] Remove usages of `{}` as a type

Fixes `@typescript-eslint/ban-types` lints
---
 src/main/Body.tsx                  | 2 +-
 src/main/CuttingActions.tsx        | 2 +-
 src/main/Discard.tsx               | 4 ++--
 src/main/Error.tsx                 | 2 +-
 src/main/Finish.tsx                | 2 +-
 src/main/FinishMenu.tsx            | 2 +-
 src/main/KeyboardControls.tsx      | 2 +-
 src/main/Landing.tsx               | 2 +-
 src/main/MainContent.tsx           | 4 ++--
 src/main/MainMenu.tsx              | 2 +-
 src/main/Metadata.tsx              | 2 +-
 src/main/Save.tsx                  | 4 ++--
 src/main/Subtitle.tsx              | 2 +-
 src/main/SubtitleEditor.tsx        | 4 ++--
 src/main/SubtitleListEditor.tsx    | 2 +-
 src/main/SubtitleSelect.tsx        | 2 +-
 src/main/SubtitleTimeline.tsx      | 6 +++---
 src/main/SubtitleVideoArea.tsx     | 2 +-
 src/main/TheEnd.tsx                | 4 ++--
 src/main/ThemeSwitcher.tsx         | 2 +-
 src/main/Thumbnail.tsx             | 2 +-
 src/main/TrackSelection.tsx        | 4 ++--
 src/main/Video.tsx                 | 4 ++--
 src/main/WorkflowConfiguration.tsx | 2 +-
 src/main/WorkflowSelection.tsx     | 2 +-
 25 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/src/main/Body.tsx b/src/main/Body.tsx
index b4eb2ab65..5daf030d1 100644
--- a/src/main/Body.tsx
+++ b/src/main/Body.tsx
@@ -14,7 +14,7 @@ import { selectIsError } from "../redux/errorSlice";
 import { settings } from '../config';
 
 
-const Body: React.FC<{}> = () => {
+const Body: React.FC = () => {
 
   const isEnd = useSelector(selectIsEnd)
   const isError = useSelector(selectIsError)
diff --git a/src/main/CuttingActions.tsx b/src/main/CuttingActions.tsx
index 7f03fbd74..ec02f3116 100644
--- a/src/main/CuttingActions.tsx
+++ b/src/main/CuttingActions.tsx
@@ -29,7 +29,7 @@ import { ThemedTooltip } from "./Tooltip";
 /**
  * Defines the different actions a user can perform while in cutting mode
  */
-const CuttingActions: React.FC<{}> = () => {
+const CuttingActions: React.FC = () => {
 
   const { t } = useTranslation();
 
diff --git a/src/main/Discard.tsx b/src/main/Discard.tsx
index d33ca4d58..7c518a9fe 100644
--- a/src/main/Discard.tsx
+++ b/src/main/Discard.tsx
@@ -21,7 +21,7 @@ import { selectTheme } from "../redux/themeSlice";
  * Shown if the user wishes to abort.
  * Informs the user about aborting and displays abort button.
  */
-const Discard : React.FC<{}> = () => {
+const Discard : React.FC = () => {
 
   const { t } = useTranslation();
 
@@ -51,7 +51,7 @@ const Discard : React.FC<{}> = () => {
 /**
  * Button that sets the app into an aborted state
  */
-const DiscardButton : React.FC<{}> = () => {
+const DiscardButton : React.FC = () => {
 
   const { t } = useTranslation();
 
diff --git a/src/main/Error.tsx b/src/main/Error.tsx
index 29a1b84cf..246f11d0d 100644
--- a/src/main/Error.tsx
+++ b/src/main/Error.tsx
@@ -15,7 +15,7 @@ import { useTranslation } from 'react-i18next';
  * This page is to be displayed when the application has run into a critical error
  * from which it cannot recover.
  */
-const Error : React.FC<{}> = () => {
+const Error : React.FC = () => {
 
   const { t } = useTranslation();
 
diff --git a/src/main/Finish.tsx b/src/main/Finish.tsx
index c5b477fda..a75c03cd2 100644
--- a/src/main/Finish.tsx
+++ b/src/main/Finish.tsx
@@ -21,7 +21,7 @@ import { selectTheme } from "../redux/themeSlice";
 /**
  * Displays a menu for selecting what should be done with the current changes
  */
-const Finish : React.FC<{}> = () => {
+const Finish : React.FC = () => {
 
   const pageNumber = useSelector(selectPageNumber)
 
diff --git a/src/main/FinishMenu.tsx b/src/main/FinishMenu.tsx
index 51d2c19bd..daed094c6 100644
--- a/src/main/FinishMenu.tsx
+++ b/src/main/FinishMenu.tsx
@@ -17,7 +17,7 @@ import { selectTheme } from "../redux/themeSlice";
 /**
  * Displays a menu for selecting what should be done with the current changes
  */
-const FinishMenu : React.FC<{}> = () => {
+const FinishMenu : React.FC = () => {
 
   const finishMenuStyle = css({
     display: 'flex',
diff --git a/src/main/KeyboardControls.tsx b/src/main/KeyboardControls.tsx
index 33164a0d2..dcc1ea546 100644
--- a/src/main/KeyboardControls.tsx
+++ b/src/main/KeyboardControls.tsx
@@ -101,7 +101,7 @@ const Entry: React.FC<{params: KeyMapDisplayOptions}> = ({params}) => {
 }
 
 
-const KeyboardControls: React.FC<{}> = () => {
+const KeyboardControls: React.FC = () => {
 
   const { t } = useTranslation();
 
diff --git a/src/main/Landing.tsx b/src/main/Landing.tsx
index 971c83c4e..03fbef58b 100644
--- a/src/main/Landing.tsx
+++ b/src/main/Landing.tsx
@@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next';
  * This page is to be displayed when the application has run into a critical error
  * from which it cannot recover.
  */
-const Landing : React.FC<{}> = () => {
+const Landing : React.FC = () => {
 
   const { t } = useTranslation();
 
diff --git a/src/main/MainContent.tsx b/src/main/MainContent.tsx
index 2956dbf87..ad90a0ef2 100644
--- a/src/main/MainContent.tsx
+++ b/src/main/MainContent.tsx
@@ -36,7 +36,7 @@ import Thumbnail from "./Thumbnail";
  * A container for the main functionality
  * Shows different components depending on the state off the app
  */
-const MainContent: React.FC<{}> = () => {
+const MainContent: React.FC = () => {
 
   const mainMenuState = useSelector(selectMainMenuState)
   const videoChanged = useSelector(videoSelectHasChanges)
@@ -157,7 +157,7 @@ const MainContent: React.FC<{}> = () => {
   );
 };
 
-const CuttingTimeline : React.FC<{}> = () => {
+const CuttingTimeline : React.FC = () => {
   return (
     <Timeline
       selectIsPlaying={selectIsPlaying}
diff --git a/src/main/MainMenu.tsx b/src/main/MainMenu.tsx
index 5d264e6ae..f795f7c71 100644
--- a/src/main/MainMenu.tsx
+++ b/src/main/MainMenu.tsx
@@ -25,7 +25,7 @@ import { selectTheme } from "../redux/themeSlice";
 /**
  * A container for selecting the functionality shown in the main part of the app
  */
-const MainMenu: React.FC<{}> = () => {
+const MainMenu: React.FC = () => {
 
   const { t } = useTranslation();
   const theme = useSelector(selectTheme);
diff --git a/src/main/Metadata.tsx b/src/main/Metadata.tsx
index e7540b9d0..d5750871f 100644
--- a/src/main/Metadata.tsx
+++ b/src/main/Metadata.tsx
@@ -38,7 +38,7 @@ import { TFuncKey } from "i18next";
  * If something doesn't work, main places of interest are the submit function
  * and the initialValues function
  */
-const Metadata: React.FC<{}> = () => {
+const Metadata: React.FC = () => {
 
   const { t, i18n } = useTranslation();
 
diff --git a/src/main/Save.tsx b/src/main/Save.tsx
index 61f50d940..3e2ef9b92 100644
--- a/src/main/Save.tsx
+++ b/src/main/Save.tsx
@@ -31,7 +31,7 @@ import { ThemedTooltip } from "./Tooltip";
  * Shown if the user wishes to save.
  * Informs the user about saving and displays a save button
  */
-const Save : React.FC<{}> = () => {
+const Save : React.FC = () => {
 
   const { t } = useTranslation();
 
@@ -99,7 +99,7 @@ const Save : React.FC<{}> = () => {
 /**
  * Button that sends a post request to save current changes
  */
-export const SaveButton: React.FC<{}> = () => {
+export const SaveButton: React.FC = () => {
 
   const { t } = useTranslation();
 
diff --git a/src/main/Subtitle.tsx b/src/main/Subtitle.tsx
index 241e19f4c..d3e5b766c 100644
--- a/src/main/Subtitle.tsx
+++ b/src/main/Subtitle.tsx
@@ -7,7 +7,7 @@ import { selectIsDisplayEditView } from "../redux/subtitleSlice";
 /**
  * A container for the various subtitle views
  */
-const Subtitle : React.FC<{}> = () => {
+const Subtitle : React.FC = () => {
 
   const displayEditView = useSelector(selectIsDisplayEditView)
 
diff --git a/src/main/SubtitleEditor.tsx b/src/main/SubtitleEditor.tsx
index 63cab1d74..11b97a1b0 100644
--- a/src/main/SubtitleEditor.tsx
+++ b/src/main/SubtitleEditor.tsx
@@ -26,7 +26,7 @@ import { ThemedTooltip } from "./Tooltip";
 /**
  * Displays an editor view for a selected subtitle file
  */
-const SubtitleEditor : React.FC<{}> = () => {
+const SubtitleEditor : React.FC = () => {
 
   const { t } = useTranslation();
 
@@ -145,7 +145,7 @@ const SubtitleEditor : React.FC<{}> = () => {
 /**
  * Takes you to a different page
  */
-export const BackButton : React.FC<{}> = () => {
+export const BackButton : React.FC = () => {
 
   const { t } = useTranslation();
   const theme = useSelector(selectTheme)
diff --git a/src/main/SubtitleListEditor.tsx b/src/main/SubtitleListEditor.tsx
index 8f209afc9..186c6a86a 100644
--- a/src/main/SubtitleListEditor.tsx
+++ b/src/main/SubtitleListEditor.tsx
@@ -35,7 +35,7 @@ import { IconProp } from "@fortawesome/fontawesome-svg-core"
 /**
  * Displays everything needed to edit subtitles
  */
-const SubtitleListEditor : React.FC<{}> = () => {
+const SubtitleListEditor : React.FC = () => {
 
   const dispatch = useDispatch()
 
diff --git a/src/main/SubtitleSelect.tsx b/src/main/SubtitleSelect.tsx
index f8a54ad3f..db4126226 100644
--- a/src/main/SubtitleSelect.tsx
+++ b/src/main/SubtitleSelect.tsx
@@ -19,7 +19,7 @@ import { ThemedTooltip } from "./Tooltip";
 /**
  * Displays buttons that allow the user to select the flavor/language they want to edit
  */
-const SubtitleSelect : React.FC<{}> = () => {
+const SubtitleSelect : React.FC = () => {
 
   const { t } = useTranslation();
   const captionTracks = useSelector(selectCaptions) // track objects received from Opencast
diff --git a/src/main/SubtitleTimeline.tsx b/src/main/SubtitleTimeline.tsx
index 3d7857357..d27895e89 100644
--- a/src/main/SubtitleTimeline.tsx
+++ b/src/main/SubtitleTimeline.tsx
@@ -30,7 +30,7 @@ import { useTranslation } from "react-i18next";
  * Copy-paste of the timeline in Video.tsx, so that we can make some small adjustments,
  * like adding in a list of subtitle segments
  */
-const SubtitleTimeline: React.FC<{}> = () => {
+const SubtitleTimeline: React.FC = () => {
 
   const { t } = useTranslation();
   const theme = useSelector(selectTheme)
@@ -391,7 +391,7 @@ const TimelineSubtitleSegment: React.FC<{
 //  * For debugging
 //  * Minimal example: Resizable
 //  */
-//  const Example: React.FC<{}> = () => {
+//  const Example: React.FC = () => {
 
 //   const [absoluteWidth, setAbsoluteWidth] = useState(200)
 //   const [absoluteHeight, setAbsoluteHeight] = useState(200)
@@ -448,7 +448,7 @@ const TimelineSubtitleSegment: React.FC<{
 //  * Minimal example: Draggable + Resizable
 //  * Erratic behaviour when resizing the east handle for smallish widths
 //  */
-// const Example2: React.FC<{}> = () => {
+// const Example2: React.FC = () => {
 
 //   const [absoluteWidth, setAbsoluteWidth] = useState(200)
 //   const [absoluteHeight, setAbsoluteHeight] = useState(200)
diff --git a/src/main/SubtitleVideoArea.tsx b/src/main/SubtitleVideoArea.tsx
index dac1adcd0..418c114f2 100644
--- a/src/main/SubtitleVideoArea.tsx
+++ b/src/main/SubtitleVideoArea.tsx
@@ -35,7 +35,7 @@ import { selectFieldStyle } from "../cssStyles";
  * coming up with a proper fix appears to be rather difficult
  * TODO: Come up with a proper fix and create a PR
  */
-const SubtitleVideoArea : React.FC<{}> = () => {
+const SubtitleVideoArea : React.FC = () => {
 
   const tracks = useSelector(selectVideos)
   const subtitle = useSelector(selectSelectedSubtitleByFlavor)
diff --git a/src/main/TheEnd.tsx b/src/main/TheEnd.tsx
index de1da1344..4443c3cb1 100644
--- a/src/main/TheEnd.tsx
+++ b/src/main/TheEnd.tsx
@@ -17,7 +17,7 @@ import { ThemedTooltip } from "./Tooltip";
  * This page is to be displayed when the user is "done" with the editor
  * and should not be able to perfom any actions anymore
  */
-const TheEnd : React.FC<{}> = () => {
+const TheEnd : React.FC = () => {
 
   const { t } = useTranslation();
 
@@ -60,7 +60,7 @@ const TheEnd : React.FC<{}> = () => {
 }
 
 
-const StartOverButton: React.FC<{}> = () => {
+const StartOverButton: React.FC = () => {
 
   const { t } = useTranslation();
   const theme = useSelector(selectTheme);
diff --git a/src/main/ThemeSwitcher.tsx b/src/main/ThemeSwitcher.tsx
index 205cd0075..7def8b5ea 100644
--- a/src/main/ThemeSwitcher.tsx
+++ b/src/main/ThemeSwitcher.tsx
@@ -5,7 +5,7 @@ import { selectTheme, selectThemeState, toggleTheme, setState } from "../redux/t
 import Select from "react-select";
 import { selectFieldStyle } from "../cssStyles";
 
-const ThemeSwitcher: React.FC<{}> = () => {
+const ThemeSwitcher: React.FC = () => {
 
   const { t } = useTranslation();
 
diff --git a/src/main/Thumbnail.tsx b/src/main/Thumbnail.tsx
index 26102e7db..aed7ccf2e 100644
--- a/src/main/Thumbnail.tsx
+++ b/src/main/Thumbnail.tsx
@@ -21,7 +21,7 @@ import { ThemedTooltip } from "./Tooltip";
 /**
  * User interface for handling thumbnails
  */
-const Thumbnail : React.FC<{}> = () => {
+const Thumbnail : React.FC = () => {
 
   const { t } = useTranslation()
   const dispatch = useDispatch()
diff --git a/src/main/TrackSelection.tsx b/src/main/TrackSelection.tsx
index d62bd43fb..8bf2b503f 100644
--- a/src/main/TrackSelection.tsx
+++ b/src/main/TrackSelection.tsx
@@ -20,7 +20,7 @@ import { ThemedTooltip } from "./Tooltip";
 /**
  * Creates the track selection.
  */
-const TrackSelection: React.FC<{}> = () => {
+const TrackSelection: React.FC = () => {
 
   // Generate list of tracks
   const tracks: Track[] = useSelector(selectVideos);
@@ -38,7 +38,7 @@ const TrackSelection: React.FC<{}> = () => {
 }
 
 
-const Description: React.FC<{}> = () => {
+const Description: React.FC = () => {
 
   const { t } = useTranslation();
 
diff --git a/src/main/Video.tsx b/src/main/Video.tsx
index 9707e561c..69173d589 100644
--- a/src/main/Video.tsx
+++ b/src/main/Video.tsx
@@ -38,7 +38,7 @@ import { selectTheme, Theme } from "../redux/themeSlice";
  * Container for the videos and their controls
  * TODO: Move fetching to a more central part of the app
  */
-export const Video: React.FC<{}> = () => {
+export const Video: React.FC = () => {
 
   const { t } = useTranslation();
 
@@ -674,7 +674,7 @@ const TimeDisplay: React.FC<{
 /**
  * Displays elements above the video, e.g. title
  */
-const VideoHeader: React.FC<{}> = () => {
+const VideoHeader: React.FC = () => {
 
   const title = useSelector(selectTitle)
   const metadataTitle = useSelector(selectTitleFromEpisodeDc)
diff --git a/src/main/WorkflowConfiguration.tsx b/src/main/WorkflowConfiguration.tsx
index 1dfa17690..009f8844a 100644
--- a/src/main/WorkflowConfiguration.tsx
+++ b/src/main/WorkflowConfiguration.tsx
@@ -25,7 +25,7 @@ import { selectTheme } from "../redux/themeSlice";
 /**
  * Will eventually display settings based on the selected workflow index
  */
-const WorkflowConfiguration : React.FC<{}> = () => {
+const WorkflowConfiguration : React.FC = () => {
 
   const { t } = useTranslation();
 
diff --git a/src/main/WorkflowSelection.tsx b/src/main/WorkflowSelection.tsx
index 878b212ab..bbb035fea 100644
--- a/src/main/WorkflowSelection.tsx
+++ b/src/main/WorkflowSelection.tsx
@@ -24,7 +24,7 @@ import { selectTheme } from "../redux/themeSlice";
 /**
  * Allows the user to select a workflow
  */
-const WorkflowSelection : React.FC<{}> = () => {
+const WorkflowSelection : React.FC = () => {
 
   const { t } = useTranslation();
 

From 4b3051efd0c46f48f09622aff2d00d50c99c53b5 Mon Sep 17 00:00:00 2001
From: Lukas Kalbertodt <lukas.kalbertodt@gmail.com>
Date: Thu, 8 Jun 2023 18:54:21 +0200
Subject: [PATCH 29/47] Fix `react/jsx-curly-spacing` lints

---
 src/main/CuttingActions.tsx        |  2 +-
 src/main/Discard.tsx               |  4 ++--
 src/main/Finish.tsx                |  2 +-
 src/main/FinishMenu.tsx            |  2 +-
 src/main/MainMenu.tsx              |  2 +-
 src/main/Save.tsx                  |  2 +-
 src/main/SubtitleEditor.tsx        |  2 +-
 src/main/SubtitleSelect.tsx        |  4 ++--
 src/main/SubtitleTimeline.tsx      |  2 +-
 src/main/TheEnd.tsx                |  2 +-
 src/main/TrackSelection.tsx        | 32 +++++++++++++++---------------
 src/main/Video.tsx                 |  2 +-
 src/main/WorkflowConfiguration.tsx |  2 +-
 13 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/main/CuttingActions.tsx b/src/main/CuttingActions.tsx
index ec02f3116..39fb30f27 100644
--- a/src/main/CuttingActions.tsx
+++ b/src/main/CuttingActions.tsx
@@ -143,7 +143,7 @@ const CuttingActionsButton: React.FC<cuttingActionsButtonInterface> = ({iconName
       <div css={[basicButtonStyle(theme), cuttingActionButtonStyle(theme)]}
         ref={ref}
         role="button" tabIndex={0} aria-label={ariaLabelText}
-        onClick={ (event: SyntheticEvent) => actionHandler(event, action, ref) }
+        onClick={(event: SyntheticEvent) => actionHandler(event, action, ref)}
         onKeyDown={(event: React.KeyboardEvent) => { if (event.key === " " || event.key === "Enter") {
           actionHandler(event, action, undefined)
         }}}
diff --git a/src/main/Discard.tsx b/src/main/Discard.tsx
index 7c518a9fe..816169843 100644
--- a/src/main/Discard.tsx
+++ b/src/main/Discard.tsx
@@ -66,11 +66,11 @@ const DiscardButton : React.FC = () => {
   return (
     <div css={[basicButtonStyle(theme), navigationButtonStyle(theme)]}
       role="button" tabIndex={0}
-      onClick={ discard }
+      onClick={discard}
       onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => { if (event.key === " " || event.key === "Enter") {
         discard()
       }}}>
-      <FontAwesomeIcon  icon={faTimesCircle} size="1x"/>
+      <FontAwesomeIcon icon={faTimesCircle} size="1x" />
       <span>{t("discard.confirm-button")}</span>
     </div>
   );
diff --git a/src/main/Finish.tsx b/src/main/Finish.tsx
index a75c03cd2..21d4e80d5 100644
--- a/src/main/Finish.tsx
+++ b/src/main/Finish.tsx
@@ -79,7 +79,7 @@ export const PageButton : React.FC<{pageNumber: number, label: string, iconName:
   return (
     <div css={[basicButtonStyle(theme), pageButtonStyle]}
       role="button" tabIndex={0}
-      onClick={ onPageChange }
+      onClick={onPageChange}
       onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => { if (event.key === " " || event.key === "Enter") {
         onPageChange()
       }}}>
diff --git a/src/main/FinishMenu.tsx b/src/main/FinishMenu.tsx
index daed094c6..d132ecb35 100644
--- a/src/main/FinishMenu.tsx
+++ b/src/main/FinishMenu.tsx
@@ -69,7 +69,7 @@ const FinishMenuButton: React.FC<{iconName: IconDefinition, stateName: finish["v
   return (
     <div css={[basicButtonStyle(theme), tileButtonStyle(theme)]}
       role="button" tabIndex={0}
-      onClick={ finish }
+      onClick={finish}
       onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => { if (event.key === " " || event.key === "Enter") {
         finish()
       }}}>
diff --git a/src/main/MainMenu.tsx b/src/main/MainMenu.tsx
index f795f7c71..37a4615f5 100644
--- a/src/main/MainMenu.tsx
+++ b/src/main/MainMenu.tsx
@@ -170,7 +170,7 @@ const MainMenuButton: React.FC<mainMenuButtonInterface> = ({iconName, stateName,
     <li css={[basicButtonStyle(theme), buttonStyle()]}
       role="menuitem" tabIndex={0}
       aria-label={ariaLabelText}
-      onClick={ onMenuItemClicked }
+      onClick={onMenuItemClicked}
       onKeyDown={(event: React.KeyboardEvent<HTMLLIElement>) => { if (event.key === "Enter") {
         onMenuItemClicked()
       }}}
diff --git a/src/main/Save.tsx b/src/main/Save.tsx
index 3e2ef9b92..e27b95ada 100644
--- a/src/main/Save.tsx
+++ b/src/main/Save.tsx
@@ -184,7 +184,7 @@ export const SaveButton: React.FC = () => {
     <ThemedTooltip title={tooltip == null ? tooltip = "" : tooltip}>
       <div css={[basicButtonStyle(theme), navigationButtonStyle(theme)]}
         role="button" tabIndex={0}
-        onClick={ save }
+        onClick={save}
         onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => { if (event.key === " " || event.key === "Enter") {
           save()
         }}}>
diff --git a/src/main/SubtitleEditor.tsx b/src/main/SubtitleEditor.tsx
index 11b97a1b0..8c8d31849 100644
--- a/src/main/SubtitleEditor.tsx
+++ b/src/main/SubtitleEditor.tsx
@@ -165,7 +165,7 @@ export const BackButton : React.FC = () => {
       <div css={[basicButtonStyle(theme), backButtonStyle]}
         role="button" tabIndex={0}
         aria-label={t("subtitles.backButton-tooltip")}
-        onClick={ () => dispatch(setIsDisplayEditView(false)) }
+        onClick={() => dispatch(setIsDisplayEditView(false))}
         onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => { if (event.key === " " || event.key === "Enter") {
           dispatch(setIsDisplayEditView(false))
         }}}>
diff --git a/src/main/SubtitleSelect.tsx b/src/main/SubtitleSelect.tsx
index db4126226..85ebfcd6a 100644
--- a/src/main/SubtitleSelect.tsx
+++ b/src/main/SubtitleSelect.tsx
@@ -124,7 +124,7 @@ const SubtitleSelectButton: React.FC<{
       <div css={[basicButtonStyle(theme), tileButtonStyle(theme)]}
         role="button" tabIndex={0}
         aria-label={t("subtitles.selectSubtitleButton-tooltip-aria", {title: title})}
-        onClick={ () => {
+        onClick={() => {
           dispatch(setIsDisplayEditView(true))
           dispatch(setSelectedSubtitleFlavor(flavor))
         }}
@@ -200,7 +200,7 @@ const SubtitleAddButton: React.FC<{languages: {subFlavor: string, title: string}
       <div css={[basicButtonStyle(theme), tileButtonStyle(theme), !isPlusDisplay && disableButtonAnimation]}
         role="button" tabIndex={0}
         aria-label={isPlusDisplay ? t("subtitles.createSubtitleButton-tooltip") : t("subtitles.createSubtitleButton-clicked-tooltip-aria")}
-        onClick={ () => setIsPlusDisplay(false) }
+        onClick={() => setIsPlusDisplay(false)}
         onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => { if (event.key === " " || event.key === "Enter") {
           setIsPlusDisplay(false)
         }}}
diff --git a/src/main/SubtitleTimeline.tsx b/src/main/SubtitleTimeline.tsx
index d27895e89..59393200e 100644
--- a/src/main/SubtitleTimeline.tsx
+++ b/src/main/SubtitleTimeline.tsx
@@ -379,7 +379,7 @@ const TimelineSubtitleSegment: React.FC<{
         //  Fix most likely requires changes in one of those modules
         resizeHandles={['w']}
       >
-        <div css={ segmentStyle } ref={nodeRef} onClick={onClick} id="no-scrolling">
+        <div css={segmentStyle} ref={nodeRef} onClick={onClick} id="no-scrolling">
           <span css={textStyle}>{props.cue.text}</span>
         </div>
       </Resizable>
diff --git a/src/main/TheEnd.tsx b/src/main/TheEnd.tsx
index 4443c3cb1..98d0f4c7f 100644
--- a/src/main/TheEnd.tsx
+++ b/src/main/TheEnd.tsx
@@ -73,7 +73,7 @@ const StartOverButton: React.FC = () => {
     <ThemedTooltip title={t("theEnd.startOver-tooltip")}>
       <div css={[basicButtonStyle(theme), navigationButtonStyle(theme)]}
         role="button" tabIndex={0}
-        onClick={ reloadPage }
+        onClick={reloadPage}
         onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => { if (event.key === " " || event.key === "Enter") {
           reloadPage()
         }}}>
diff --git a/src/main/TrackSelection.tsx b/src/main/TrackSelection.tsx
index 8bf2b503f..f05c19a4f 100644
--- a/src/main/TrackSelection.tsx
+++ b/src/main/TrackSelection.tsx
@@ -26,7 +26,7 @@ const TrackSelection: React.FC = () => {
   const tracks: Track[] = useSelector(selectVideos);
   const enabledCount = tracks.filter(t => t.video_stream.enabled).length;
   const trackItems: JSX.Element[] = tracks.map((track: Track) =>
-    <TrackItem key={ track.id } track={ track } enabledCount={ enabledCount } />
+    <TrackItem key={track.id} track={track} enabledCount={enabledCount} />
   );
 
   return (
@@ -53,7 +53,7 @@ const Description: React.FC = () => {
   });
 
   return (
-    <aside css={ descriptionStyle }>
+    <aside css={descriptionStyle}>
       <FontAwesomeIcon css={{margin: '10px'}} icon={faInfoCircle} size="2x" />
       { description }
     </aside>
@@ -124,17 +124,17 @@ const TrackItem: React.FC<{track: Track, enabledCount: number}> = ({track, enabl
   }
 
   return (
-    <div css={ trackItemStyle }>
-      <div css={ headerStyle }>{ header }</div>
+    <div css={trackItemStyle}>
+      <div css={headerStyle}>{ header }</div>
       <div css={{ width: '95%', textAlign: 'center', opacity: track.video_stream.enabled ? '1' : '0.5' }}>
-        <ReactPlayer css={ playerStyle } url={ track.uri } width="90%" />
+        <ReactPlayer css={playerStyle} url={track.uri} width="90%" />
       </div>
       <SelectButton
-        text={ deleteText }
-        tooltip={ deleteTooltip }
-        handler={ trackEnabledChange }
-        icon={ deleteIcon }
-        active={ deleteEnabled } />
+        text={deleteText}
+        tooltip={deleteTooltip}
+        handler={trackEnabledChange}
+        icon={deleteIcon}
+        active={deleteEnabled} />
     </div>
   );
 }
@@ -172,14 +172,14 @@ const SelectButton : React.FC<selectButtonInterface> = ({handler, text, icon, to
   const ref = React.useRef<HTMLDivElement>(null)
   return (
     <ThemedTooltip title={tooltip}>
-      <div css={ buttonStyle }
-        tabIndex={ 0 }
+      <div css={buttonStyle}
+        tabIndex={0}
         ref={ref}
         role="button"
-        aria-label={ tooltip }
-        onClick={ clickHandler }
-        onKeyDown={ keyHandler } >
-        <FontAwesomeIcon icon={ icon } size="1x" />
+        aria-label={tooltip}
+        onClick={clickHandler}
+        onKeyDown={keyHandler} >
+        <FontAwesomeIcon icon={icon} size="1x" />
         <div>{ text }</div>
       </div>
     </ThemedTooltip>
diff --git a/src/main/Video.tsx b/src/main/Video.tsx
index 69173d589..6cee60cbd 100644
--- a/src/main/Video.tsx
+++ b/src/main/Video.tsx
@@ -578,7 +578,7 @@ const PreviewMode: React.FC<{
         ref={ref}
         role="switch" aria-checked={isPlayPreview} tabIndex={0} aria-hidden={false}
         aria-label={t("video.previewButton-aria", { hotkeyName: (videoPlayerKeyMap[handlers.preview.name] as KeyMapOptions).sequence })}
-        onClick={ (event: SyntheticEvent) => switchPlayPreview(event, ref) }
+        onClick={(event: SyntheticEvent) => switchPlayPreview(event, ref)}
         onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => { if (event.key === " ") {
           switchPlayPreview(event, undefined)
         }}}>
diff --git a/src/main/WorkflowConfiguration.tsx b/src/main/WorkflowConfiguration.tsx
index 009f8844a..1b9279887 100644
--- a/src/main/WorkflowConfiguration.tsx
+++ b/src/main/WorkflowConfiguration.tsx
@@ -149,7 +149,7 @@ export const SaveAndProcessButton: React.FC<{text: string}> = ({text}) => {
   return (
     <div css={[basicButtonStyle(theme), saveButtonStyle]}
       role="button" tabIndex={0}
-      onClick={ saveAndProcess }
+      onClick={saveAndProcess}
       onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => { if (event.key === " " || event.key === "Enter") {
         saveAndProcess()
       }}}>

From e20cfe8be0c91f92191e91bf00e083f5369f150d Mon Sep 17 00:00:00 2001
From: Lukas Kalbertodt <lukas.kalbertodt@gmail.com>
Date: Thu, 8 Jun 2023 19:22:57 +0200
Subject: [PATCH 30/47] Fix many different lint warnings

---
 src/cssStyles.tsx                      |  4 ++--
 src/globalKeys.ts                      |  2 +-
 src/i18n/config.tsx                    |  2 +-
 src/i18n/i18next.d.ts                  |  2 +-
 src/import-png.d.ts                    |  2 +-
 src/main/Metadata.tsx                  |  8 ++++----
 src/main/Save.tsx                      |  2 +-
 src/main/SubtitleListEditor.tsx        | 12 ++++++------
 src/main/SubtitleSelect.tsx            |  2 +-
 src/main/SubtitleTimeline.tsx          |  8 ++++----
 src/main/SubtitleVideoArea.tsx         |  2 +-
 src/main/ThemeSwitcher.tsx             |  8 ++++----
 src/main/Thumbnail.tsx                 |  2 +-
 src/main/Timeline.tsx                  | 10 +++++-----
 src/main/Tooltip.tsx                   |  2 +-
 src/main/TrackSelection.tsx            |  2 +-
 src/main/Video.tsx                     |  6 +++---
 src/main/WorkflowSelection.tsx         |  2 +-
 src/redux/__tests__/videoSlice.test.ts |  4 ++--
 src/redux/endSlice.ts                  |  2 +-
 src/redux/errorSlice.ts                |  2 +-
 src/redux/mainMenuSlice.ts             |  2 +-
 src/redux/metadataSlice.ts             |  2 +-
 src/redux/themeSlice.ts                |  2 +-
 src/redux/videoSlice.ts                |  8 ++++----
 src/util/client.js                     |  4 ++--
 src/util/utilityFunctions.ts           |  2 +-
 src/util/webvtt-parser.d.ts            |  2 +-
 28 files changed, 54 insertions(+), 54 deletions(-)

diff --git a/src/cssStyles.tsx b/src/cssStyles.tsx
index 84d24eb82..a9c4cc787 100644
--- a/src/cssStyles.tsx
+++ b/src/cssStyles.tsx
@@ -229,13 +229,13 @@ export function selectFieldStyle(theme: Theme) {
       ...provided,
       color: theme.text,
     }),
-    multiValue: (provided: any) =>({
+    multiValue: (provided: any) => ({
       ...provided,
       color: theme.selected_text,
       background: theme.multiValue,
       cursor: 'default',
     }),
-    multiValueLabel: (provided: any) =>({
+    multiValueLabel: (provided: any) => ({
       ...provided,
       color: theme.selected_text,
     }),
diff --git a/src/globalKeys.ts b/src/globalKeys.ts
index 45b1a6c32..eed4529e8 100644
--- a/src/globalKeys.ts
+++ b/src/globalKeys.ts
@@ -167,7 +167,7 @@ export const getAllHotkeys = () => {
           sequences.push({sequence: sequence as MouseTrapKeySequence, action: (value as ExtendedKeyMapOptions).action})
         }
       } else {
-        sequences = [ {sequence: (value as ExtendedKeyMapOptions).sequence, action: (value as ExtendedKeyMapOptions).action } ]
+        sequences = [{sequence: (value as ExtendedKeyMapOptions).sequence, action: (value as ExtendedKeyMapOptions).action }]
       }
 
       // Create new key
diff --git a/src/i18n/config.tsx b/src/i18n/config.tsx
index 3c19c683d..bbb5534ef 100644
--- a/src/i18n/config.tsx
+++ b/src/i18n/config.tsx
@@ -33,4 +33,4 @@ if (debug) {
   console.debug('languages', i18next.languages);
 }
 
-export default i18next;
\ No newline at end of file
+export default i18next;
diff --git a/src/i18n/i18next.d.ts b/src/i18n/i18next.d.ts
index bd7c548e0..e738b1147 100644
--- a/src/i18n/i18next.d.ts
+++ b/src/i18n/i18next.d.ts
@@ -10,4 +10,4 @@ declare module 'i18next' {
       translation: typeof translation;
     };
   }
-}
\ No newline at end of file
+}
diff --git a/src/import-png.d.ts b/src/import-png.d.ts
index f49c420f3..1b8a12db5 100644
--- a/src/import-png.d.ts
+++ b/src/import-png.d.ts
@@ -2,4 +2,4 @@
 declare module "*.png" {
   const value: any;
   export default value;
-}
\ No newline at end of file
+}
diff --git a/src/main/Metadata.tsx b/src/main/Metadata.tsx
index d5750871f..2d6d1603a 100644
--- a/src/main/Metadata.tsx
+++ b/src/main/Metadata.tsx
@@ -139,7 +139,7 @@ const Metadata: React.FC = () => {
 
   const dateTimeTypeStyle = (isReadOnly: boolean) => {
     return (
-      css ({
+      css({
         padding: '5px 10px',
         border: isReadOnly ? '0px solid #ccc' : '1px solid #ccc',
         background: isReadOnly ? `${theme.background}` : `${theme.element_bg}`,
@@ -243,7 +243,7 @@ const Metadata: React.FC = () => {
 
     catalogs.forEach((catalog: Catalog, catalogIndex: number) => {
       initValues["catalog" + catalogIndex] = {}
-      catalog.fields.forEach((field: MetadataField) =>{
+      catalog.fields.forEach((field: MetadataField) => {
         initValues["catalog" + catalogIndex][field.id] = field.value
 
         // Handle initial values for select fields differently
@@ -283,7 +283,7 @@ const Metadata: React.FC = () => {
    * @param value
    */
   const duration = (value: any) => {
-    const re: RegExp = /^[0-9][0-9]:[0-9][0-9]:[0-9][0-9]$/
+    const re = /^[0-9][0-9]:[0-9][0-9]:[0-9][0-9]$/
     return re.test(value) ? undefined : t("metadata.validation.duration-format")
   }
 
@@ -394,7 +394,7 @@ const Metadata: React.FC = () => {
     }
 
     // If the value is hidden an object due to react-select, extract it
-    if (typeof value === 'object' && value !== null && value.hasOwnProperty("submitValue")) {
+    if (typeof value === 'object' && value !== null && Object.prototype.hasOwnProperty.call(value, "submitValue")) {
       returnValue = value.submitValue
     } else if (typeof value === 'object' && value !== null && value.__isNew__) {
       returnValue = value.value
diff --git a/src/main/Save.tsx b/src/main/Save.tsx
index e27b95ada..77a1d1369 100644
--- a/src/main/Save.tsx
+++ b/src/main/Save.tsx
@@ -118,7 +118,7 @@ export const SaveButton: React.FC = () => {
   let icon = faSave
   let spin = false
   let tooltip = null
-  if (workflowStatus === 'failed' || metadataStatus === 'failed'){
+  if (workflowStatus === 'failed' || metadataStatus === 'failed') {
     icon = faExclamationCircle
     spin = false
     tooltip = t("save.confirmButton-failed-tooltip")
diff --git a/src/main/SubtitleListEditor.tsx b/src/main/SubtitleListEditor.tsx
index 186c6a86a..91240417d 100644
--- a/src/main/SubtitleListEditor.tsx
+++ b/src/main/SubtitleListEditor.tsx
@@ -477,7 +477,7 @@ const FunctionButton : React.FC<{
       <div css={[basicButtonStyle(theme), addSegmentButtonStyle]}
         role="button" 
         tabIndex={0}
-        arial-label={tooltipAria}
+        aria-label={tooltipAria}
         onClick={onClick}
         onKeyDown={onKeyDown}
       >
@@ -580,9 +580,9 @@ const fillInMilliseconds = (val: number) => {
  */
 function toHHMMSSMS(ms: number)  {
   const milliseconds = (ms % 1000)
-    , seconds = Math.floor((ms/1000)%60)
-    , minutes = Math.floor((ms/(1000*60))%60)
-    , hours = Math.floor((ms/(1000*60*60)))
+  const seconds = Math.floor((ms / 1000) % 60)
+  const minutes = Math.floor((ms / (1000 * 60)) % 60)
+  const hours = Math.floor(ms / (1000 * 60 * 60))
 
   const millisecondsString = fillInMilliseconds(milliseconds)
   const secondsString = fillIn(seconds)
@@ -590,7 +590,7 @@ function toHHMMSSMS(ms: number)  {
   const hoursString = fillIn(hours)
 
   return [hoursString, minutesString, secondsString, millisecondsString].join(":")
-};
+}
 
 /**
   Utility function for TimeInpit
@@ -625,6 +625,6 @@ function getMillisecondsFromHHMMSSMS(value: string) {
   }
 
   return undefined
-};
+}
 
 export default SubtitleListEditor
diff --git a/src/main/SubtitleSelect.tsx b/src/main/SubtitleSelect.tsx
index 85ebfcd6a..67264767c 100644
--- a/src/main/SubtitleSelect.tsx
+++ b/src/main/SubtitleSelect.tsx
@@ -232,7 +232,7 @@ const SubtitleAddButton: React.FC<{languages: {subFlavor: string, title: string}
                  * see: https://mui.com/material-ui/react-tooltip/#disabled-elements */}
               <ThemedTooltip title={t("subtitles.createSubtitleButton-createButton-tooltip")}>
                 <span>
-                  <button css={[basicButtonStyle(theme), createButtonStyle, { width:"100%" } ]}
+                  <button css={[basicButtonStyle(theme), createButtonStyle, { width:"100%" }]}
                     type="submit"
                     aria-label={t("subtitles.createSubtitleButton-createButton-tooltip")}
                     disabled={submitting || pristine}>
diff --git a/src/main/SubtitleTimeline.tsx b/src/main/SubtitleTimeline.tsx
index 59393200e..418f0b999 100644
--- a/src/main/SubtitleTimeline.tsx
+++ b/src/main/SubtitleTimeline.tsx
@@ -40,9 +40,9 @@ const SubtitleTimeline: React.FC = () => {
   const duration = useSelector(selectDuration)
   const currentlyAt = useSelector(selectCurrentlyAt)
 
-  const { ref, width = 1, } = useResizeObserver<HTMLDivElement>();
+  const { ref, width = 1 } = useResizeObserver<HTMLDivElement>();
   const refTop = useRef<HTMLElement>(null);
-  const { ref: refMini, width: widthMiniTimeline = 1, } = useResizeObserver<HTMLDivElement>();
+  const { ref: refMini, width: widthMiniTimeline = 1 } = useResizeObserver<HTMLDivElement>();
 
   const timelineCutoutInMs = 10000    // How much of the timeline should be visible in milliseconds. Aka a specific zoom level
 
@@ -214,7 +214,7 @@ const TimelineSubtitleSegment: React.FC<{
   // Reposition scrubber when the current x position was changed externally
   useEffect(() => {
     setControlledPosition({x: (props.cue.startTime / duration) * (props.timelineWidth), y: 0});
-  },[props.cue.startTime, duration, props.timelineWidth])
+  }, [props.cue.startTime, duration, props.timelineWidth])
 
   // Set width and reset any resizing that may have happened meanwhile
   useEffect(() => {
@@ -222,7 +222,7 @@ const TimelineSubtitleSegment: React.FC<{
     setAbsoluteHeight(props.height)
     setAbsoluteLeft(0)
     setAbsoluteTop(0)
-  },[duration, props.cue.endTime, props.cue.startTime, props.height, props.timelineWidth])
+  }, [duration, props.cue.endTime, props.cue.startTime, props.height, props.timelineWidth])
 
   // Check for impossible timestamps and update state in redux
   const dispatchNewTimes = (newStartTime: number, newEndTime: number) => {
diff --git a/src/main/SubtitleVideoArea.tsx b/src/main/SubtitleVideoArea.tsx
index 418c114f2..dc235c7bd 100644
--- a/src/main/SubtitleVideoArea.tsx
+++ b/src/main/SubtitleVideoArea.tsx
@@ -164,7 +164,7 @@ const VideoSelectDropdown : React.FC<{
   const { t } = useTranslation();
   const theme = useSelector(selectTheme)
 
-  const dropdownName: string = "flavors"
+  const dropdownName = "flavors"
 
   // Turn flavor into string
   const stringifyFlavor = (flavor: Flavor) => {
diff --git a/src/main/ThemeSwitcher.tsx b/src/main/ThemeSwitcher.tsx
index 7def8b5ea..8afcf6757 100644
--- a/src/main/ThemeSwitcher.tsx
+++ b/src/main/ThemeSwitcher.tsx
@@ -16,7 +16,7 @@ const ThemeSwitcher: React.FC = () => {
   React.useEffect(() => {
     localStorage.setItem('theme', themeState)
     dispatch(toggleTheme())
-  }, [ themeState, theme, dispatch ] )
+  }, [themeState, theme, dispatch])
 
   const isDarkPrefered = window.matchMedia('(prefers-color-scheme: dark)');
   // Listen to system preference changes
@@ -30,13 +30,13 @@ const ThemeSwitcher: React.FC = () => {
   isDarkPrefered.addEventListener('change', systemPreferenceHasChanged)
 
   const switchTheme = (themeState: string) => {
-    if(themeState === 'system'){
+    if(themeState === 'system') {
       dispatch(setState('system'))
     } 
-    else if(themeState === 'high-contrast-dark'){
+    else if(themeState === 'high-contrast-dark') {
       dispatch(setState('high-contrast-dark'))
     }
-    else if(themeState === 'high-contrast-light'){
+    else if(themeState === 'high-contrast-light') {
       dispatch(setState('high-contrast-light'))
     }
     else if(themeState === 'dark') {
diff --git a/src/main/Thumbnail.tsx b/src/main/Thumbnail.tsx
index aed7ccf2e..a76a6ae3a 100644
--- a/src/main/Thumbnail.tsx
+++ b/src/main/Thumbnail.tsx
@@ -370,7 +370,7 @@ const ThumbnailButton : React.FC<{
   const ref = React.useRef<HTMLDivElement>(null)
 
   const clickHandler = () => {
-    active && handler();
+    if (active) { handler() }
     ref.current?.blur();
   };
   const keyHandler = (event: React.KeyboardEvent) => {
diff --git a/src/main/Timeline.tsx b/src/main/Timeline.tsx
index e7d21d8a6..7ed54368a 100644
--- a/src/main/Timeline.tsx
+++ b/src/main/Timeline.tsx
@@ -54,7 +54,7 @@ const Timeline: React.FC<{
   const dispatch = useDispatch();
   const duration = useSelector(selectDuration)
 
-  const { ref, width = 1, } = useResizeObserver<HTMLDivElement>();
+  const { ref, width = 1 } = useResizeObserver<HTMLDivElement>();
 
   const timelineStyle = css({
     position: 'relative',     // Need to set position for Draggable bounds to work
@@ -120,7 +120,7 @@ export const Scrubber: React.FC<{
   const theme = useSelector(selectTheme)
 
   // Init state variables
-  const [controlledPosition, setControlledPosition] = useState({x: 0,y: 0,});
+  const [controlledPosition, setControlledPosition] = useState({ x: 0, y: 0 });
   const [isGrabbed, setIsGrabbed] = useState(false)
   const [wasPlayingWhenGrabbed, setWasPlayingWhenGrabbed] = useState(false)
   const [keyboardJumpDelta, setKeyboardJumpDelta] = useState(1000)  // In milliseconds. For keyboard navigation
@@ -388,7 +388,7 @@ export const Waveforms: React.FC<{timelineHeight: number}> = ({timelineHeight})
   const waveformDisplayTestStyle = css({
     display: 'flex',
     flexDirection: 'column',
-    position: "absolute" as "absolute",
+    position: "absolute" as const,
     justifyContent: 'center',
     ...(images.length <= 0) && {alignItems: 'center'},  // Only center during loading
     width: '100%',
@@ -412,7 +412,7 @@ export const Waveforms: React.FC<{timelineHeight: number}> = ({timelineHeight})
       }
 
       const newImages: string[] = []    // Store local paths to image files
-      let waveformsProcessed : number = 0  // Counter for checking if all workers are done
+      let waveformsProcessed = 0  // Counter for checking if all workers are done
 
       // Only display the waveform of the first video we get
       const onlyOneURL = [videoURLs[0]]
@@ -455,7 +455,7 @@ export const Waveforms: React.FC<{timelineHeight: number}> = ({timelineHeight})
   const renderImages = () => {
     if (images.length > 0) {
       return (
-        <img alt='Waveform' src={images[0]} css={[waveformStyle, {minHeight: 0, height: '100%'}]}></img>
+        <img alt="Waveform" src={images[0]} css={[waveformStyle, {minHeight: 0, height: '100%'}]}></img>
         // images.map((image, index) =>
         //   <img key={index} alt='Waveform' src={image ? image : ""} css={{minHeight: 0}}></img>
         // )
diff --git a/src/main/Tooltip.tsx b/src/main/Tooltip.tsx
index fe563ac17..65d3c7761 100644
--- a/src/main/Tooltip.tsx
+++ b/src/main/Tooltip.tsx
@@ -17,7 +17,7 @@ export const ThemedTooltip = ({ className, ...props }: TooltipProps) => {
       enterDelay={500}
       enterNextDelay={500}
       leaveDelay={150}
-      placement='top'
+      placement="top"
       ref={areaRef}
 
       /** onMouseOut: Workaround to hide tooltip after the mouse leaves the element.
diff --git a/src/main/TrackSelection.tsx b/src/main/TrackSelection.tsx
index f05c19a4f..d7b167a82 100644
--- a/src/main/TrackSelection.tsx
+++ b/src/main/TrackSelection.tsx
@@ -161,7 +161,7 @@ const SelectButton : React.FC<selectButtonInterface> = ({handler, text, icon, to
       background: `${theme.element_bg}`,
     }];
   const clickHandler = () => {
-    active && handler();
+    if (active) { handler() }
     ref.current?.blur();
   };
   const keyHandler = (event: React.KeyboardEvent) => {
diff --git a/src/main/Video.tsx b/src/main/Video.tsx
index 6cee60cbd..eb17209ca 100644
--- a/src/main/Video.tsx
+++ b/src/main/Video.tsx
@@ -137,7 +137,7 @@ export const VideoPlayers: React.FC<{refs: any, widthInPercent?: number}> = ({re
         setCurrentlyAt={setCurrentlyAt}
         setAspectRatio={setAspectRatio}
         ref={(el) => {
-          if (refs === undefined) return
+          if (refs === undefined) { return }
           (refs.current[i] = el)
         }}
       />
@@ -413,8 +413,8 @@ export const VideoPlayer = React.forwardRef(
             <ReactPlayer url={url}
               css={reactPlayerStyle}
               ref={ref}
-              width='100%'
-              height='100%'
+              width="100%"
+              height="100%"
               playing={isPlaying}
               muted={!isPrimary}
               onProgress={onProgressCallback}
diff --git a/src/main/WorkflowSelection.tsx b/src/main/WorkflowSelection.tsx
index bbb035fea..3e440e62f 100644
--- a/src/main/WorkflowSelection.tsx
+++ b/src/main/WorkflowSelection.tsx
@@ -123,7 +123,7 @@ const WorkflowSelection : React.FC = () => {
         render(
           t("workflowSelection.saveAndProcess-text"),
           <Trans i18nKey="workflowSelection.oneWorkflow-text">
-            The video will be cut and processed with the workflow "{{workflow: workflows[0].name}}".<br/>
+            The video will be cut and processed with the workflow {{workflow: workflows[0].name}}.<br/>
             This will take some time.
           </Trans>,
           false,
diff --git a/src/redux/__tests__/videoSlice.test.ts b/src/redux/__tests__/videoSlice.test.ts
index 7e65e6214..d6b9d416c 100644
--- a/src/redux/__tests__/videoSlice.test.ts
+++ b/src/redux/__tests__/videoSlice.test.ts
@@ -300,7 +300,7 @@ describe('Video reducer', () => {
     // Arrange
     const resultStatus: httpRequestState = { status: 'success', error: undefined, errorReason: "unknown" }
     const segments = [{ start: 0, end: 42, deleted: false }]
-    const videoURLs: video["videoURLs"] = [ "video/url" ]
+    const videoURLs: video["videoURLs"] = ["video/url"]
     const dur: video["duration"] = 42
     const title: video["title"] = "Video Title"
     // const presenters: video["presenters"] = [ "Otto Opencast" ]    // Currently missing from the API
@@ -353,4 +353,4 @@ describe('Video reducer', () => {
   })
 
   // TODO: Figure out how to properly mock the API and the redux store to test requests
-})
\ No newline at end of file
+})
diff --git a/src/redux/endSlice.ts b/src/redux/endSlice.ts
index 51f20e82c..d7722ebe8 100644
--- a/src/redux/endSlice.ts
+++ b/src/redux/endSlice.ts
@@ -24,7 +24,7 @@ export const endSlice = createSlice({
   }
 })
 
-export const { setEnd, } = endSlice.actions
+export const { setEnd } = endSlice.actions
 
 // Export Selectors
 export const selectIsEnd = (state: { endState: { end: end["end"] }; }) => state.endState.end
diff --git a/src/redux/errorSlice.ts b/src/redux/errorSlice.ts
index 13d0eddb8..7e26e06a8 100644
--- a/src/redux/errorSlice.ts
+++ b/src/redux/errorSlice.ts
@@ -40,7 +40,7 @@ export const errorSlice = createSlice({
   }
 })
 
-export const { setError, } = errorSlice.actions
+export const { setError } = errorSlice.actions
 
 // Export Selectors
 export const selectIsError = (state: { errorState: { error: error["error"] }; }) => state.errorState.error
diff --git a/src/redux/mainMenuSlice.ts b/src/redux/mainMenuSlice.ts
index ea2dd306a..4969ec8be 100644
--- a/src/redux/mainMenuSlice.ts
+++ b/src/redux/mainMenuSlice.ts
@@ -23,7 +23,7 @@ export const mainMenuSlice = createSlice({
   }
 })
 
-export const { setState, } = mainMenuSlice.actions
+export const { setState } = mainMenuSlice.actions
 
 // The function below is called a selector and allows us to select a value from
 // the state. Selectors can also be defined inline where they're used instead of
diff --git a/src/redux/metadataSlice.ts b/src/redux/metadataSlice.ts
index d8c70f165..1504c2b7c 100644
--- a/src/redux/metadataSlice.ts
+++ b/src/redux/metadataSlice.ts
@@ -145,7 +145,7 @@ const metadataSlice = createSlice({
   }
 })
 
-export const { setFieldValue, setHasChanges, setFieldReadonly,resetPostRequestState } = metadataSlice.actions
+export const { setFieldValue, setHasChanges, setFieldReadonly, resetPostRequestState } = metadataSlice.actions
 
 export const selectCatalogs = (state: { metadataState: { catalogs: metadata["catalogs"] } }) =>
   state.metadataState.catalogs
diff --git a/src/redux/themeSlice.ts b/src/redux/themeSlice.ts
index dffef2a80..e696d3312 100644
--- a/src/redux/themeSlice.ts
+++ b/src/redux/themeSlice.ts
@@ -40,7 +40,7 @@ export interface Theme {
   clock_focus: string
   digit_selected: string
   text_shadow: string
-};
+}
 
 const getValue = () => {
   const value = localStorage.getItem('theme');
diff --git a/src/redux/videoSlice.ts b/src/redux/videoSlice.ts
index f7ed8b875..8918c24b1 100644
--- a/src/redux/videoSlice.ts
+++ b/src/redux/videoSlice.ts
@@ -195,7 +195,7 @@ const videoSlice = createSlice({
           state.error = "This event is being processed. Please wait until the process is finished."
         }
         state.tracks = action.payload.tracks
-          .sort((a: { thumbnailPriority: number; },b: { thumbnailPriority: number; }) => {
+          .sort((a: { thumbnailPriority: number; }, b: { thumbnailPriority: number; }) => {
             return a.thumbnailPriority - b.thumbnailPriority
           }).map((track: Track) => {
             if (action.payload.local && settings.opencast.local) {
@@ -212,7 +212,7 @@ const videoSlice = createSlice({
         state.duration = action.payload.duration
         state.title = action.payload.title
         state.segments = parseSegments(action.payload.segments, action.payload.duration)
-        state.workflows = action.payload.workflows.sort((n1: { displayOrder: number; },n2: { displayOrder: number; }) => {
+        state.workflows = action.payload.workflows.sort((n1: { displayOrder: number; }, n2: { displayOrder: number; }) => {
           return n1.displayOrder - n2.displayOrder;
         });
         state.waveformImages = action.payload.waveformURIs ? action.payload.waveformURIs : state.waveformImages
@@ -321,8 +321,8 @@ const skipDeletedSegments = (state: video) => {
  * TODO: Improve calculation to handle multiple rows of videos
  */
 export const calculateTotalAspectRatio = (aspectRatios: video["aspectRatios"]) => {
-  const minHeight = Math.min.apply(Math, aspectRatios.map(o => o.height))
-  let minWidth = Math.min.apply(Math, aspectRatios.map(o => o.width))
+  const minHeight = Math.min(...aspectRatios.map(o => o.height))
+  let minWidth = Math.min(...aspectRatios.map(o => o.width))
   minWidth *= aspectRatios.length
   return Math.min((minHeight / minWidth) * 100, (9/32) * 100)
 }
diff --git a/src/util/client.js b/src/util/client.js
index d03cac0ae..eac60c18d 100644
--- a/src/util/client.js
+++ b/src/util/client.js
@@ -44,7 +44,7 @@ export async function client(endpoint, { body, ...customConfig } = {}) {
     }
 
     if (response.ok) {
-      text.length ? data = text : data = ''
+      data = text.length ? text : ''
       return data
     }
     throw new Error(response.statusText)
@@ -62,4 +62,4 @@ client.get = function (endpoint, customConfig = {}) {
 
 client.post = function (endpoint, body, customConfig = {}) {
   return client(endpoint, { ...customConfig, body })
-}
\ No newline at end of file
+}
diff --git a/src/util/utilityFunctions.ts b/src/util/utilityFunctions.ts
index e49901938..bc1bdebc0 100644
--- a/src/util/utilityFunctions.ts
+++ b/src/util/utilityFunctions.ts
@@ -117,7 +117,7 @@ export function serializeSubtitle(subtitle: SubtitleCue[]) {
   return seri.serialize(cues)
 }
 
-export function parseSubtitle(subtitle: String) {
+export function parseSubtitle(subtitle: string) {
   // Used parsing library: https://www.npmjs.com/package/webvtt-parser
   // - Unmaintained and does have bugs, so we will need to switch eventually
   // Other interesting vtt parsing libraries:
diff --git a/src/util/webvtt-parser.d.ts b/src/util/webvtt-parser.d.ts
index aeec1b50d..5494a6b3a 100644
--- a/src/util/webvtt-parser.d.ts
+++ b/src/util/webvtt-parser.d.ts
@@ -1,2 +1,2 @@
 // webvtt-parser.d.ts
-declare module 'webvtt-parser';
\ No newline at end of file
+declare module 'webvtt-parser';

From 2a7e7bc0f95e29428e0ff53514a563c7562ac6b6 Mon Sep 17 00:00:00 2001
From: Lukas Kalbertodt <lukas.kalbertodt@gmail.com>
Date: Tue, 13 Jun 2023 09:53:44 +0200
Subject: [PATCH 31/47] Fix `key-spacing` lint warnings

---
 src/config.ts                  | 6 +++---
 src/cssStyles.tsx              | 2 +-
 src/globalKeys.ts              | 2 +-
 src/main/Metadata.tsx          | 6 +++---
 src/main/SubtitleSelect.tsx    | 2 +-
 src/main/SubtitleVideoArea.tsx | 2 +-
 src/main/Tooltip.tsx           | 4 ++--
 src/themes.ts                  | 4 ++--
 8 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/config.ts b/src/config.ts
index c588500b7..dcea223b8 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -357,11 +357,11 @@ const SCHEMA = {
     password: types.string,
   },
   metadata: {
-    show : types.boolean,
+    show: types.boolean,
     configureFields: types.objectsWithinObjects,
   },
   trackSelection: {
-    show : types.boolean,
+    show: types.boolean,
   },
   subtitles: {
     show: types.boolean,
@@ -371,7 +371,7 @@ const SCHEMA = {
     defaultVideoFlavor: types.map,
   },
   thumbnail: {
-    show : types.boolean,
+    show: types.boolean,
     simpleMode: types.boolean,
   }
 }
diff --git a/src/cssStyles.tsx b/src/cssStyles.tsx
index a9c4cc787..f144c3d63 100644
--- a/src/cssStyles.tsx
+++ b/src/cssStyles.tsx
@@ -342,7 +342,7 @@ export const calendarStyle = (theme: Theme) => createTheme({
           '&:not(.Mui-selected)': {
             borderColor: `${theme.focused} !important`,
           },
-          '&.Mui-disabled':{
+          '&.Mui-disabled': {
             color: `${theme.disabled} !important`,
           },
           '&.MuiClock-amButton, &.MuiClock-pmButton': {
diff --git a/src/globalKeys.ts b/src/globalKeys.ts
index eed4529e8..c0dd3e564 100644
--- a/src/globalKeys.ts
+++ b/src/globalKeys.ts
@@ -141,7 +141,7 @@ export const subtitleListKeyMap: KeyMap = {
     action: "keydown",
     group: groupSubtitleList,
   },
-  delete : {
+  delete: {
     name: "subtitleList.deleteSegment",
     sequence: rewriteKeys("Control+Alt+d"),
     action: "keydown",
diff --git a/src/main/Metadata.tsx b/src/main/Metadata.tsx
index 2d6d1603a..0d7e0fc28 100644
--- a/src/main/Metadata.tsx
+++ b/src/main/Metadata.tsx
@@ -94,8 +94,8 @@ const Metadata: React.FC = () => {
 
   const metadataStyle = css({
     padding: '20px',
-    marginLeft:'auto',
-    marginRight:'auto',
+    marginLeft: 'auto',
+    marginRight: 'auto',
     minWidth: '50%',
     display: 'grid',
   })
@@ -145,7 +145,7 @@ const Metadata: React.FC = () => {
         background: isReadOnly ? `${theme.background}` : `${theme.element_bg}`,
         '.Mui-disabled, .Mui-disabled button > svg': {
           color: `${theme.disabled} !important`,
-          'WebkitTextFillColor':`${theme.disabled}`,
+          'WebkitTextFillColor': `${theme.disabled}`,
         },
         'button > svg': {
           color: `${theme.indicator_color}`
diff --git a/src/main/SubtitleSelect.tsx b/src/main/SubtitleSelect.tsx
index 67264767c..dfa55e18f 100644
--- a/src/main/SubtitleSelect.tsx
+++ b/src/main/SubtitleSelect.tsx
@@ -232,7 +232,7 @@ const SubtitleAddButton: React.FC<{languages: {subFlavor: string, title: string}
                  * see: https://mui.com/material-ui/react-tooltip/#disabled-elements */}
               <ThemedTooltip title={t("subtitles.createSubtitleButton-createButton-tooltip")}>
                 <span>
-                  <button css={[basicButtonStyle(theme), createButtonStyle, { width:"100%" }]}
+                  <button css={[basicButtonStyle(theme), createButtonStyle, { width: "100%" }]}
                     type="submit"
                     aria-label={t("subtitles.createSubtitleButton-createButton-tooltip")}
                     disabled={submitting || pristine}>
diff --git a/src/main/SubtitleVideoArea.tsx b/src/main/SubtitleVideoArea.tsx
index dc235c7bd..41c47b053 100644
--- a/src/main/SubtitleVideoArea.tsx
+++ b/src/main/SubtitleVideoArea.tsx
@@ -81,7 +81,7 @@ const SubtitleVideoArea : React.FC = () => {
   useEffect(() => {
     if(subtitle) {
       const serializedSubtitle = serializeSubtitle(subtitle)
-      setSubtitleUrl(window.URL.createObjectURL(new Blob([serializedSubtitle], {type : 'text/vtt'})))
+      setSubtitleUrl(window.URL.createObjectURL(new Blob([serializedSubtitle], {type: 'text/vtt'})))
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [subtitle])
diff --git a/src/main/Tooltip.tsx b/src/main/Tooltip.tsx
index 65d3c7761..af771ead9 100644
--- a/src/main/Tooltip.tsx
+++ b/src/main/Tooltip.tsx
@@ -40,7 +40,7 @@ export const ThemedTooltip = ({ className, ...props }: TooltipProps) => {
 
       componentsProps={{
         tooltip: {
-          sx:{
+          sx: {
             backgroundColor: `${theme.tooltip}`,
             outline: '2px solid transparent',
             color: `${theme.tooltip_text}`,
@@ -50,7 +50,7 @@ export const ThemedTooltip = ({ className, ...props }: TooltipProps) => {
           }
         },
         arrow: {
-          sx:{
+          sx: {
             color: `${theme.tooltip}`,
           }
         }
diff --git a/src/themes.ts b/src/themes.ts
index f02184f64..fdf5473f6 100644
--- a/src/themes.ts
+++ b/src/themes.ts
@@ -9,7 +9,7 @@ export const lightMode: Theme = {
   error: '#ed1741',
   element_bg: 'snow',
   multiValue: '#e6e6e6',
-  focused:'#e6e6e6',
+  focused: '#e6e6e6',
   focus_text: '#000',
   selected: '#a1a1a1',
   disabled: 'rgba(0, 0, 0, 0.55)',
@@ -135,7 +135,7 @@ export const highContrastLightMode: Theme = {
   error: '#a5102d',
   element_bg: 'none',
   multiValue: '#2e2e2e',
-  focused:'#000099',
+  focused: '#000099',
   focus_text: '#fff',
   selected: '#4646b5',
   disabled: 'rgba(0, 0, 0, 0.6)',

From 1ad5d1b31fab527f6871e6a1bf6109bcb378f555 Mon Sep 17 00:00:00 2001
From: Lukas Kalbertodt <lukas.kalbertodt@gmail.com>
Date: Tue, 13 Jun 2023 10:05:43 +0200
Subject: [PATCH 32/47] Fix or disable remaining lints in `waveform.js`

---
 src/util/waveform.js | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/util/waveform.js b/src/util/waveform.js
index 14b801dc2..5eba798ec 100644
--- a/src/util/waveform.js
+++ b/src/util/waveform.js
@@ -4,6 +4,8 @@
  * duncan83@gmail.com
  */
 
+/* eslint-disable space-before-function-paren */
+
 import { AudioContext } from 'standardized-audio-context';
 
 export function Waveform(opts) {
@@ -45,7 +47,7 @@ export function Waveform(opts) {
           });
         }
       })
-      .catch((e) => {
+      .catch(e => {
         console.log("Waveform Worker: " + e);
         this._error = e.toString()
         this.onerror.forEach(fn => fn(e.toString()));
@@ -57,7 +59,7 @@ export function Waveform(opts) {
     get: function() {
       return _completeFuncs;
     },
-    set: function(fn, opt) {
+    set: function(fn, _opt) {
       if (typeof fn == 'function') {
         if (this.waveformImage || this.svgPath) {
           fn(this.waveformImage || this.svgPath, this.svgLength);
@@ -75,7 +77,7 @@ export function Waveform(opts) {
     get: function() {
       return _errorFuncs;
     },
-    set: function(fn, opt) {
+    set: function(fn, _opt) {
       if (typeof fn == 'function') {
         if (this._error && this._error !== "") {
           fn(_error);
@@ -99,11 +101,10 @@ Waveform.prototype = {
   },
   decodeAudioData: function(arraybuffer) {
     return new Promise((resolve, reject) => {
-      new Promise((res, rej) => {
+      new Promise((res, _rej) => {
         if (arraybuffer instanceof ArrayBuffer) {
           res(arraybuffer);
-        }
-        else if (arraybuffer instanceof Blob) {
+        } else if (arraybuffer instanceof Blob) {
           let reader = new FileReader();
           reader.onload = function() {
             res(reader.result);
@@ -132,10 +133,10 @@ Waveform.prototype = {
   },
   drawCanvasWaveform: function(amp) {
     amp = amp || 1;
-    this.ocCtx.fillStyle = '#FFFFFF00'; //'#b7d8f9';
+    this.ocCtx.fillStyle = '#FFFFFF00'; // '#b7d8f9';
     this.ocCtx.fillRect(0, 0, this.WIDTH, this.HEIGHT);
     this.ocCtx.lineWidth = 1;
-    this.ocCtx.strokeStyle = 'black'; //'#38597a';
+    this.ocCtx.strokeStyle = 'black'; // '#38597a';
     let sliceWidth = this.WIDTH * 1.0 / this.channelData.length;
     let x = 0;
 
@@ -150,7 +151,7 @@ Waveform.prototype = {
       this.peakRMS = Math.max(sample * sample, this.peakRMS);
       x += sliceWidth;
     });
-    this.ocCtx.lineTo(this.WIDTH, this.HEIGHT/2);
+    this.ocCtx.lineTo(this.WIDTH, this.HEIGHT / 2);
     this.ocCtx.stroke();
     this.aveRMS = Math.sqrt(this.aveRMS / this.channelData.length);
     this.aveDBs = 20 * Math.log(this.aveRMS) / Math.log(10);
@@ -158,7 +159,7 @@ Waveform.prototype = {
   },
   dropSamples: function(data, requestedLength) {
     let divider = Math.max(parseInt(data.length / requestedLength), 1);
-    return data.filter((sample, i) => i % divider === 0);
+    return data.filter((_sample, i) => i % divider === 0);
   },
   generateWaveform: function(arraybuffer) {
     return this.decodeAudioData(arraybuffer);
@@ -171,7 +172,7 @@ Waveform.prototype = {
     }
   },
   workerCommunication: function(e) {
-    switch(e.data.type) {
+    switch (e.data.type) {
       case 'path':
         this.setSVGpath(e.data.path, e.data.length);
         this.worker.removeEventListener('message', this.workerCommunication.bind(this), false);

From 235087ec569620946e8b0c18f18a215dc45e5688 Mon Sep 17 00:00:00 2001
From: Lukas Kalbertodt <lukas.kalbertodt@gmail.com>
Date: Tue, 13 Jun 2023 10:07:01 +0200
Subject: [PATCH 33/47] Remove trailing spaces with `eslint --fix`

---
 src/config.ts                   |  2 +-
 src/cssStyles.tsx               | 10 +++++-----
 src/main/Finish.tsx             |  2 +-
 src/main/Metadata.tsx           |  2 +-
 src/main/SubtitleListEditor.tsx |  2 +-
 src/main/ThemeSwitcher.tsx      |  6 +++---
 src/main/Tooltip.tsx            |  6 +++---
 src/main/TrackSelection.tsx     |  2 +-
 src/redux/themeSlice.ts         |  4 ++--
 9 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/config.ts b/src/config.ts
index dcea223b8..f707814f5 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -4,7 +4,7 @@
  * - GET parameters
  * and exports them.
  * Code was largely adapted from https://github.com/elan-ev/opencast-studio/blob/master/src/settings.js (January 11th, 2021)
- * 
+ *
  * Also does some global hotkey configuration
  */
 import parseToml from '@iarna/toml/parse-string';
diff --git a/src/cssStyles.tsx b/src/cssStyles.tsx
index f144c3d63..ae840b0b0 100644
--- a/src/cssStyles.tsx
+++ b/src/cssStyles.tsx
@@ -273,7 +273,7 @@ export function selectFieldStyle(theme: Theme) {
 export const calendarStyle = (theme: Theme) => createTheme({
 
   components: {
-    
+
     MuiPaper: {
       styleOverrides: {
         root: {
@@ -293,7 +293,7 @@ export const calendarStyle = (theme: Theme) => createTheme({
               color: `${theme.selected_text}`,
             }
           },
-          
+
           /* Clock-modal */
           '& .MuiClock-clock': { // round clock
             background: `${theme.clock_bg}`,
@@ -316,7 +316,7 @@ export const calendarStyle = (theme: Theme) => createTheme({
             border: `16px solid ${theme.clock_hands}`,
           }
         },
-        
+
       }
     },
     MuiButtonBase: {
@@ -336,7 +336,7 @@ export const calendarStyle = (theme: Theme) => createTheme({
           '&.Mui-selected': {
             background: `${theme.selected} !important`,
             color: `${theme.selected_text} !important`,
-            
+
           },
           // Current day
           '&:not(.Mui-selected)': {
@@ -361,7 +361,7 @@ export const calendarStyle = (theme: Theme) => createTheme({
         },
       }
     },
-  }  
+  }
 })
 
 export const subtitleSelectStyle = (theme: Theme) => createTheme({
diff --git a/src/main/Finish.tsx b/src/main/Finish.tsx
index 21d4e80d5..596cebc4e 100644
--- a/src/main/Finish.tsx
+++ b/src/main/Finish.tsx
@@ -60,7 +60,7 @@ const Finish : React.FC = () => {
 export const PageButton : React.FC<{pageNumber: number, label: string, iconName: IconDefinition}> = ({pageNumber, label, iconName}) => {
 
   const theme = useSelector(selectTheme);
-  
+
   // Initialize redux variables
   const dispatch = useDispatch()
 
diff --git a/src/main/Metadata.tsx b/src/main/Metadata.tsx
index 0d7e0fc28..77afcc579 100644
--- a/src/main/Metadata.tsx
+++ b/src/main/Metadata.tsx
@@ -157,7 +157,7 @@ const Metadata: React.FC = () => {
             background: 'transparent !important',
             outline: 'none'
           }
-        },    
+        },
       })
     );
   }
diff --git a/src/main/SubtitleListEditor.tsx b/src/main/SubtitleListEditor.tsx
index 91240417d..a8624d10c 100644
--- a/src/main/SubtitleListEditor.tsx
+++ b/src/main/SubtitleListEditor.tsx
@@ -475,7 +475,7 @@ const FunctionButton : React.FC<{
   return (
     <ThemedTooltip title={tooltip}>
       <div css={[basicButtonStyle(theme), addSegmentButtonStyle]}
-        role="button" 
+        role="button"
         tabIndex={0}
         aria-label={tooltipAria}
         onClick={onClick}
diff --git a/src/main/ThemeSwitcher.tsx b/src/main/ThemeSwitcher.tsx
index 8afcf6757..c000b386f 100644
--- a/src/main/ThemeSwitcher.tsx
+++ b/src/main/ThemeSwitcher.tsx
@@ -32,7 +32,7 @@ const ThemeSwitcher: React.FC = () => {
   const switchTheme = (themeState: string) => {
     if(themeState === 'system') {
       dispatch(setState('system'))
-    } 
+    }
     else if(themeState === 'high-contrast-dark') {
       dispatch(setState('high-contrast-dark'))
     }
@@ -55,7 +55,7 @@ const ThemeSwitcher: React.FC = () => {
   }
 
   const headerStyle = {
-    display: 'flex', 
+    display: 'flex',
     flexDirection: 'column' as const,
     alignItems: 'center',
   }
@@ -67,7 +67,7 @@ const ThemeSwitcher: React.FC = () => {
     { value: 'high-contrast-light', label: t('theme.high-contrast-light') },
     { value: 'high-contrast-dark', label: t('theme.high-contrast-dark') },
   ]
-  
+
   return (
     <div css={baseStyle}>
       <h2 css={headerStyle}>{t('theme.appearance')}</h2>
diff --git a/src/main/Tooltip.tsx b/src/main/Tooltip.tsx
index af771ead9..e8ce9ee60 100644
--- a/src/main/Tooltip.tsx
+++ b/src/main/Tooltip.tsx
@@ -9,9 +9,9 @@ export const ThemedTooltip = ({ className, ...props }: TooltipProps) => {
 
   const positionRef = React.useRef<{ x: number; y: number }>({ x: 0, y: 0 });
   const areaRef = React.useRef<HTMLDivElement>(null);
-  
+
   return (
-    <Tooltip {...props} 
+    <Tooltip {...props}
       classes={{ popper: className }}
       arrow
       enterDelay={500}
@@ -24,7 +24,7 @@ export const ThemedTooltip = ({ className, ...props }: TooltipProps) => {
         * Else the tooltip would appear for a second where the mousepointer leaves. */
       onMouseOut={() => positionRef.current = { x: -9999, y: -9999 }}
       onMouseMove={event => positionRef.current = { x: event.clientX, y: event.clientY }}
-      
+
       PopperProps={{
         anchorEl: {
           getBoundingClientRect: () => {
diff --git a/src/main/TrackSelection.tsx b/src/main/TrackSelection.tsx
index d7b167a82..5b918bd26 100644
--- a/src/main/TrackSelection.tsx
+++ b/src/main/TrackSelection.tsx
@@ -150,7 +150,7 @@ interface selectButtonInterface {
 const SelectButton : React.FC<selectButtonInterface> = ({handler, text, icon, tooltip, active}) => {
 
   const theme = useSelector(selectTheme);
-  
+
   const buttonStyle = [
     active ? basicButtonStyle(theme) : deactivatedButtonStyle,
     {
diff --git a/src/redux/themeSlice.ts b/src/redux/themeSlice.ts
index e696d3312..27b5900b5 100644
--- a/src/redux/themeSlice.ts
+++ b/src/redux/themeSlice.ts
@@ -44,7 +44,7 @@ export interface Theme {
 
 const getValue = () => {
   const value = localStorage.getItem('theme');
-  
+
   if(value === 'system' || value === null) {
     return 'system'
   }
@@ -96,7 +96,7 @@ const getTheme = () => {
     document.documentElement.setAttribute('data-theme', 'dark');
     return darkMode
   }
-  return lightMode   
+  return lightMode
 }
 
 export interface theme {

From e1cae90e7c19e9aae9195c37184c483df50d6d84 Mon Sep 17 00:00:00 2001
From: Lukas Kalbertodt <lukas.kalbertodt@gmail.com>
Date: Tue, 13 Jun 2023 10:09:32 +0200
Subject: [PATCH 34/47] Fix remaining `indent` lint warnings

---
 src/main/Metadata.tsx       | 30 +++++++++++++++---------------
 src/main/SubtitleSelect.tsx |  2 +-
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/main/Metadata.tsx b/src/main/Metadata.tsx
index 77afcc579..e0e873ffa 100644
--- a/src/main/Metadata.tsx
+++ b/src/main/Metadata.tsx
@@ -617,23 +617,23 @@ const Metadata: React.FC = () => {
     }
 
     return (
-        <Field key={fieldIndex}
-          name={"catalog" + catalogIndex + "." + field.id}
-          validate={getValidators(field)}
-          type={field.type === "boolean" ? "checkbox" : undefined}  // react-final-form complains if we don't specify checkboxes here
-          >
-          {({ input, meta }) => (
-            <div css={fieldStyle} data-testid={field.id}>
-              <label css={fieldLabelStyle} htmlFor={input.name}>{
-                i18n.exists(`metadata.labels.${field.id}`) ?
+      <Field key={fieldIndex}
+        name={"catalog" + catalogIndex + "." + field.id}
+        validate={getValidators(field)}
+        type={field.type === "boolean" ? "checkbox" : undefined}  // react-final-form complains if we don't specify checkboxes here
+      >
+        {({ input, meta }) => (
+          <div css={fieldStyle} data-testid={field.id}>
+            <label css={fieldLabelStyle} htmlFor={input.name}>{
+              i18n.exists(`metadata.labels.${field.id}`) ?
                 t(`metadata.labels.${field.id}` as TFuncKey) as string: field.id
-              }</label>
+            }</label>
 
-              {generateComponentWithModifiedInput(field, input)}
-              {meta.error && meta.touched && <span css={validateStyle(true)}>{meta.error}</span>}
-            </div>
-          )}
-        </Field>
+            {generateComponentWithModifiedInput(field, input)}
+            {meta.error && meta.touched && <span css={validateStyle(true)}>{meta.error}</span>}
+          </div>
+        )}
+      </Field>
     );
   }
 
diff --git a/src/main/SubtitleSelect.tsx b/src/main/SubtitleSelect.tsx
index dfa55e18f..b675009fc 100644
--- a/src/main/SubtitleSelect.tsx
+++ b/src/main/SubtitleSelect.tsx
@@ -226,7 +226,7 @@ const SubtitleAddButton: React.FC<{languages: {subFlavor: string, title: string}
                 />
               </ThemeProvider>
 
-                {/* "By default disabled elements like <button> do not trigger user interactions
+              {/* "By default disabled elements like <button> do not trigger user interactions
                  * so a Tooltip will not activate on normal events like hover. To accommodate
                  * disabled elements, add a simple wrapper element, such as a span."
                  * see: https://mui.com/material-ui/react-tooltip/#disabled-elements */}

From 2f816defab08f7457c3d0f410d47ac2fae7e21b8 Mon Sep 17 00:00:00 2001
From: Lukas Kalbertodt <lukas.kalbertodt@gmail.com>
Date: Tue, 13 Jun 2023 10:12:55 +0200
Subject: [PATCH 35/47] Fix 'no-multi-spaces' and 'space-in-parens' lint
 warnings

---
 src/config.ts                      |  4 ++--
 src/main/CuttingActions.tsx        |  4 ++--
 src/main/FinishMenu.tsx            |  2 +-
 src/main/Save.tsx                  |  2 +-
 src/main/SubtitleListEditor.tsx    |  2 +-
 src/main/Thumbnail.tsx             |  8 ++++----
 src/main/Timeline.tsx              |  6 +++---
 src/main/TrackSelection.tsx        |  4 ++--
 src/main/Video.tsx                 |  4 ++--
 src/main/WorkflowConfiguration.tsx |  2 +-
 src/main/WorkflowSelection.tsx     |  2 +-
 src/redux/metadataSlice.ts         |  2 +-
 src/redux/subtitleSlice.ts         |  6 +++---
 src/redux/videoSlice.ts            | 14 +++++++-------
 14 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/config.ts b/src/config.ts
index f707814f5..21604a385 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -42,7 +42,7 @@ interface iSettings {
   },
   metadata: {
     show: boolean,
-    configureFields: { [key: string]: { [key: string]: configureFieldsAttributes } }  | undefined,
+    configureFields: { [key: string]: { [key: string]: configureFieldsAttributes } } | undefined,
   },
   trackSelection: {
     show: boolean,
@@ -148,7 +148,7 @@ export const init = async () => {
 
   // Configure hotkeys
   configure({
-    ignoreTags: [],   // Do not ignore hotkeys when focused on a textarea, input, select
+    ignoreTags: [], // Do not ignore hotkeys when focused on a textarea, input, select
     ignoreEventsCondition: (e: any) => {
       // Ignore hotkeys when focused on a textarea, input, select IF that hotkey is expected to perform
       // a certain function in that element that is more important than any hotkey function
diff --git a/src/main/CuttingActions.tsx b/src/main/CuttingActions.tsx
index 39fb30f27..44856a923 100644
--- a/src/main/CuttingActions.tsx
+++ b/src/main/CuttingActions.tsx
@@ -61,7 +61,7 @@ const CuttingActions: React.FC = () => {
     mergeRight: (keyEvent?: KeyboardEvent | SyntheticEvent) => { if(keyEvent) { dispatchAction(keyEvent, mergeRight, undefined) } },
   }
 
-  const cuttingStyle =  css({
+  const cuttingStyle = css({
     display: 'flex',
     flexDirection: 'row' as const,
     justifyContent: 'space-between',
@@ -172,7 +172,7 @@ const MarkAsDeletedButton : React.FC<markAsDeleteButtonInterface> = ({actionHand
   const theme = useSelector(selectTheme);
 
   return (
-    <ThemedTooltip title={t('cuttingActions.delete-restore-tooltip', { hotkeyName: hotKeyName } )}>
+    <ThemedTooltip title={t('cuttingActions.delete-restore-tooltip', { hotkeyName: hotKeyName })}>
       <div css={[basicButtonStyle(theme), cuttingActionButtonStyle(theme)]}
         ref={ref}
         role="button" tabIndex={0}
diff --git a/src/main/FinishMenu.tsx b/src/main/FinishMenu.tsx
index d132ecb35..bdc190aee 100644
--- a/src/main/FinishMenu.tsx
+++ b/src/main/FinishMenu.tsx
@@ -73,7 +73,7 @@ const FinishMenuButton: React.FC<{iconName: IconDefinition, stateName: finish["v
       onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => { if (event.key === " " || event.key === "Enter") {
         finish()
       }}}>
-      <FontAwesomeIcon  icon={iconName} size="2x"/>
+      <FontAwesomeIcon icon={iconName} size="2x"/>
       <div style={{padding: '0px 20px'}}>{buttonString}</div>
     </div>
   );
diff --git a/src/main/Save.tsx b/src/main/Save.tsx
index 77a1d1369..77d501622 100644
--- a/src/main/Save.tsx
+++ b/src/main/Save.tsx
@@ -126,7 +126,7 @@ export const SaveButton: React.FC = () => {
     icon = faCheck
     spin = false
     tooltip = t("save.confirmButton-success-tooltip")
-  } else if (workflowStatus === 'loading' || metadataStatus === 'loading')  {
+  } else if (workflowStatus === 'loading' || metadataStatus === 'loading') {
     icon = faSpinner
     spin = true
     tooltip = t("save.confirmButton-attempting-tooltip")
diff --git a/src/main/SubtitleListEditor.tsx b/src/main/SubtitleListEditor.tsx
index a8624d10c..1b98ae10f 100644
--- a/src/main/SubtitleListEditor.tsx
+++ b/src/main/SubtitleListEditor.tsx
@@ -578,7 +578,7 @@ const fillInMilliseconds = (val: number) => {
  * Utility function for TimeInpit
  * Converts a number in milliseoncsd to a string of the format HH:MM:SS:MSS
  */
-function toHHMMSSMS(ms: number)  {
+function toHHMMSSMS(ms: number) {
   const milliseconds = (ms % 1000)
   const seconds = Math.floor((ms / 1000) % 60)
   const minutes = Math.floor((ms / (1000 * 60)) % 60)
diff --git a/src/main/Thumbnail.tsx b/src/main/Thumbnail.tsx
index a76a6ae3a..7eb106656 100644
--- a/src/main/Thumbnail.tsx
+++ b/src/main/Thumbnail.tsx
@@ -63,7 +63,7 @@ const Thumbnail : React.FC = () => {
       return
     }
 
-    var reader  = new FileReader();
+    var reader = new FileReader();
     reader.onload = e => {
       // the result image data
       if (e.target && e.target.result) {
@@ -155,9 +155,9 @@ const ThumbnailTable : React.FC<{
         />
       </>)
     } else {
-      return ( <>
+      return (<>
         <AffectAllRow tracks={videoTracks} generate={generate}/>
-        {videoTracks.map( (track: Track, index: number) => (
+        {videoTracks.map((track: Track, index: number) => (
           <ThumbnailTableRow
             key={index}
             track={track}
@@ -512,7 +512,7 @@ const ThumbnailButtonsSimple : React.FC<{
 
   return (
     <div css={thumbnailButtonsStyle}>
-      {tracks.map( (generateTrack: Track, generateIndex: number) => (
+      {tracks.map((generateTrack: Track, generateIndex: number) => (
         <ThumbnailButton
           handler={() => { generate(track, generateIndex) }}
           text={t('thumbnail.buttonGenerate') + " " + t("thumbnailSimple.from") + " " + generateTrack.flavor.type}
diff --git a/src/main/Timeline.tsx b/src/main/Timeline.tsx
index 7ed54368a..df3ea3a2d 100644
--- a/src/main/Timeline.tsx
+++ b/src/main/Timeline.tsx
@@ -7,7 +7,7 @@ import { css } from '@emotion/react'
 import { useSelector, useDispatch } from 'react-redux';
 import { Segment, httpRequestState } from '../types'
 import {
-  selectSegments, selectActiveSegmentIndex, selectDuration, selectVideoURL,  selectWaveformImages, setWaveformImages
+  selectSegments, selectActiveSegmentIndex, selectDuration, selectVideoURL, selectWaveformImages, setWaveformImages
 } from '../redux/videoSlice'
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -329,7 +329,7 @@ export const SegmentsList: React.FC<{
   // Render the individual segments
   const renderedSegments = () => {
     return (
-      segments.map( (segment: Segment, index: number) => (
+      segments.map((segment: Segment, index: number) => (
         <ThemedTooltip title={t("timeline.segment-tooltip", {segment: index})} key={segment.id}>
           <div
             aria-label={t("timeline.segments-text-aria",
@@ -405,7 +405,7 @@ export const Waveforms: React.FC<{timelineHeight: number}> = ({timelineHeight})
   });
 
   // When the URLs to the videos are fetched, generate waveforms
-  useEffect( () => {
+  useEffect(() => {
     if (videoURLStatus === 'success') {
       if (images.length > 0) {
         return
diff --git a/src/main/TrackSelection.tsx b/src/main/TrackSelection.tsx
index 5b918bd26..d96862d4d 100644
--- a/src/main/TrackSelection.tsx
+++ b/src/main/TrackSelection.tsx
@@ -8,7 +8,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import ReactPlayer from 'react-player'
 
-import { Track }  from '../types'
+import { Track } from '../types'
 import { useSelector, useDispatch } from 'react-redux';
 import { selectVideos, setTrackEnabled } from '../redux/videoSlice'
 import { basicButtonStyle, deactivatedButtonStyle } from '../cssStyles'
@@ -69,7 +69,7 @@ const TrackItem: React.FC<{track: Track, enabledCount: number}> = ({track, enabl
   const dispatch = useDispatch();
   const header = track.flavor.type + ' '
     + (track.video_stream.enabled ? ''
-      :  `(${t('trackSelection.trackInactive', 'inactive')})`);
+      : `(${t('trackSelection.trackInactive', 'inactive')})`);
 
   const trackItemStyle = css({
     display: 'flex',
diff --git a/src/main/Video.tsx b/src/main/Video.tsx
index eb17209ca..1dbb40aa6 100644
--- a/src/main/Video.tsx
+++ b/src/main/Video.tsx
@@ -198,7 +198,7 @@ export const VideoPlayer = React.forwardRef(
     const dispatch = useDispatch();
     const isPlaying = useSelector(selectIsPlaying)
     const currentlyAt = useSelector(selectCurrentlyAtInSeconds)
-    const duration  = useSelector(selectDurationInSeconds)
+    const duration = useSelector(selectDurationInSeconds)
     const previewTriggered = useSelector(selectPreviewTriggered)
     const clickTriggered = useSelector(selectClickTriggered)
     const aspectRatio = useSelector(selectAspectRatio)
@@ -211,7 +211,7 @@ export const VideoPlayer = React.forwardRef(
     const [isAspectRatioUpdated, setIsAspectRatioUpdated] = useState(false);
 
     // Callback for when the video is playing
-    const onProgressCallback = (state: { played: number, playedSeconds: number, loaded: number, loadedSeconds:  number }) => {
+    const onProgressCallback = (state: { played: number, playedSeconds: number, loaded: number, loadedSeconds: number }) => {
       if (isPrimary) {
       // Only update redux if there was a substantial change
         if (roundToDecimalPlace(currentlyAt, 3) !== roundToDecimalPlace(state.playedSeconds, 3) &&
diff --git a/src/main/WorkflowConfiguration.tsx b/src/main/WorkflowConfiguration.tsx
index 1b9279887..475163ea9 100644
--- a/src/main/WorkflowConfiguration.tsx
+++ b/src/main/WorkflowConfiguration.tsx
@@ -153,7 +153,7 @@ export const SaveAndProcessButton: React.FC<{text: string}> = ({text}) => {
       onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => { if (event.key === " " || event.key === "Enter") {
         saveAndProcess()
       }}}>
-      <FontAwesomeIcon  icon={icon} spin={spin} size="1x"/>
+      <FontAwesomeIcon icon={icon} spin={spin} size="1x"/>
       <span>{text}</span>
     </div>
   );
diff --git a/src/main/WorkflowSelection.tsx b/src/main/WorkflowSelection.tsx
index 3e440e62f..2fa2cd656 100644
--- a/src/main/WorkflowSelection.tsx
+++ b/src/main/WorkflowSelection.tsx
@@ -84,7 +84,7 @@ const WorkflowSelection : React.FC = () => {
               name="Workflow Selection Area"
               onChange={handleWorkflowSelectChange}
             >
-              {workflows.map( (workflow: Workflow, index: number) => (
+              {workflows.map((workflow: Workflow, index: number) => (
                 <WorkflowButton key={workflow.id} stateName={workflow.name} workflowId={workflow.id} workflowDescription={workflow.description}/>
               ))}
             </RadioGroup>
diff --git a/src/redux/metadataSlice.ts b/src/redux/metadataSlice.ts
index 1504c2b7c..d4f03446e 100644
--- a/src/redux/metadataSlice.ts
+++ b/src/redux/metadataSlice.ts
@@ -1,7 +1,7 @@
 import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
 import { client } from '../util/client'
 
-import { httpRequestState }  from '../types'
+import { httpRequestState } from '../types'
 import { settings } from '../config';
 
 export interface Catalog {
diff --git a/src/redux/subtitleSlice.ts b/src/redux/subtitleSlice.ts
index f0aaca441..68271e018 100644
--- a/src/redux/subtitleSlice.ts
+++ b/src/redux/subtitleSlice.ts
@@ -113,7 +113,7 @@ export const subtitleSlice = createSlice({
       state.focusSegmentTriggered2 = true
       state.focusSegmentId = cue.idInternal
 
-      if (action.payload.cueIndex < 0 ) {
+      if (action.payload.cueIndex < 0) {
         state.subtitles[action.payload.identifier].splice(0, 0, cue);
       }
 
@@ -153,7 +153,7 @@ export const subtitleSlice = createSlice({
     setFocusToSegmentAboveId: (state, action: PayloadAction<{identifier: string, segmentId: subtitle["focusSegmentId"]}>) => {
       let cueIndex = state.subtitles[action.payload.identifier].findIndex(i => i.idInternal === action.payload.segmentId);
       cueIndex = cueIndex - 1
-      if (cueIndex < 0 ) {
+      if (cueIndex < 0) {
         cueIndex = 0
       }
       state.focusSegmentId = state.subtitles[action.payload.identifier][cueIndex].idInternal
@@ -166,7 +166,7 @@ export const subtitleSlice = createSlice({
       }
       state.focusSegmentId = state.subtitles[action.payload.identifier][cueIndex].idInternal
     },
-    setAspectRatio: (state, action: PayloadAction<{dataKey: number} & {width: number, height: number}> ) => {
+    setAspectRatio: (state, action: PayloadAction<{dataKey: number} & {width: number, height: number}>) => {
       state.aspectRatios[action.payload.dataKey] = {width: action.payload.width, height: action.payload.height}
     },
     setHasChanges: (state, action: PayloadAction<subtitle["hasChanges"]>) => {
diff --git a/src/redux/videoSlice.ts b/src/redux/videoSlice.ts
index 8918c24b1..abd569c60 100644
--- a/src/redux/videoSlice.ts
+++ b/src/redux/videoSlice.ts
@@ -1,7 +1,7 @@
 import { createSlice, nanoid, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
 import { client } from '../util/client'
 
-import { Segment, httpRequestState, Track, Workflow, SubtitlesFromOpencast }  from '../types'
+import { Segment, httpRequestState, Track, Workflow, SubtitlesFromOpencast } from '../types'
 import { roundToDecimalPlace } from '../util/utilityFunctions'
 import { settings } from '../config';
 
@@ -120,7 +120,7 @@ const videoSlice = createSlice({
     addSegment: (state, action: PayloadAction<video["segments"][0]>) => {
       state.segments.push(action.payload)
     },
-    setAspectRatio: (state, action: PayloadAction<{dataKey: number} & {width: number, height: number}> ) => {
+    setAspectRatio: (state, action: PayloadAction<{dataKey: number} & {width: number, height: number}>) => {
       state.aspectRatios[action.payload.dataKey] = {width: action.payload.width, height: action.payload.height}
     },
     setHasChanges: (state, action: PayloadAction<video["hasChanges"]>) => {
@@ -144,16 +144,16 @@ const videoSlice = createSlice({
     cut: (state) => {
       // If we're exactly between two segments, we can't split the current segment
       if (state.segments[state.activeSegmentIndex].start === state.currentlyAt ||
-          state.segments[state.activeSegmentIndex].end === state.currentlyAt ) {
+          state.segments[state.activeSegmentIndex].end === state.currentlyAt) {
         return
       }
 
       // Make two (new) segments out of it
-      const segmentA : Segment =  {id: nanoid(),
+      const segmentA : Segment = {id: nanoid(),
         start: state.segments[state.activeSegmentIndex].start,
         end: state.currentlyAt,
         deleted: state.segments[state.activeSegmentIndex].deleted}
-      const segmentB : Segment =  {id: nanoid(),
+      const segmentB : Segment = {id: nanoid(),
         start: state.currentlyAt,
         end: state.segments[state.activeSegmentIndex].end,
         deleted: state.segments[state.activeSegmentIndex].deleted}
@@ -200,7 +200,7 @@ const videoSlice = createSlice({
           }).map((track: Track) => {
             if (action.payload.local && settings.opencast.local) {
               console.debug('Replacing track URL')
-              track.uri = track.uri.replace(/https?:\/\/[^/]*/g, window.location.origin )
+              track.uri = track.uri.replace(/https?:\/\/[^/]*/g, window.location.origin)
             }
             return track
           })
@@ -327,7 +327,7 @@ export const calculateTotalAspectRatio = (aspectRatios: video["aspectRatios"]) =
   return Math.min((minHeight / minWidth) * 100, (9/32) * 100)
 }
 
-const setThumbnailHelper = (state:  video, id: Track["id"], uri: Track["thumbnailUri"]) => {
+const setThumbnailHelper = (state: video, id: Track["id"], uri: Track["thumbnailUri"]) => {
   const index = state.tracks.findIndex(t => t.id === id)
   if (index >= 0) {
     state.tracks[index].thumbnailUri = uri

From 3617d430a01851367781ad4940c13bae0e207ff0 Mon Sep 17 00:00:00 2001
From: Lukas Kalbertodt <lukas.kalbertodt@gmail.com>
Date: Tue, 13 Jun 2023 10:18:06 +0200
Subject: [PATCH 36/47] Fix `block-spacing` lint warnings

---
 src/main/CuttingActions.tsx        |  4 ++--
 src/main/Discard.tsx               |  2 +-
 src/main/Finish.tsx                |  2 +-
 src/main/FinishMenu.tsx            |  2 +-
 src/main/MainMenu.tsx              |  2 +-
 src/main/Metadata.tsx              | 12 ++++++------
 src/main/Save.tsx                  |  2 +-
 src/main/SubtitleEditor.tsx        |  2 +-
 src/main/SubtitleListEditor.tsx    |  6 +++---
 src/main/SubtitleSelect.tsx        |  4 ++--
 src/main/TheEnd.tsx                |  2 +-
 src/main/Thumbnail.tsx             |  2 +-
 src/main/Video.tsx                 |  4 ++--
 src/main/WorkflowConfiguration.tsx |  2 +-
 src/util/utilityFunctions.ts       |  4 ++--
 15 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/main/CuttingActions.tsx b/src/main/CuttingActions.tsx
index 44856a923..b1c856939 100644
--- a/src/main/CuttingActions.tsx
+++ b/src/main/CuttingActions.tsx
@@ -146,7 +146,7 @@ const CuttingActionsButton: React.FC<cuttingActionsButtonInterface> = ({iconName
         onClick={(event: SyntheticEvent) => actionHandler(event, action, ref)}
         onKeyDown={(event: React.KeyboardEvent) => { if (event.key === " " || event.key === "Enter") {
           actionHandler(event, action, undefined)
-        }}}
+        } }}
       >
         <FontAwesomeIcon icon={iconName} size="1x" />
         <span>{actionName}</span>
@@ -180,7 +180,7 @@ const MarkAsDeletedButton : React.FC<markAsDeleteButtonInterface> = ({actionHand
         onClick={(event: SyntheticEvent) => actionHandler(event, action, ref)}
         onKeyDown={(event: React.KeyboardEvent) => { if (event.key === " " || event.key === "Enter") {
           actionHandler(event, action, undefined)
-        }}}
+        } }}
       >
         <FontAwesomeIcon icon={isCurrentSegmentAlive ? faTrash : faTrashRestore} size="1x" />
         <div>{isCurrentSegmentAlive ? t('cuttingActions.delete-button') : t("cuttingActions.restore-button")}</div>
diff --git a/src/main/Discard.tsx b/src/main/Discard.tsx
index 816169843..414d7adda 100644
--- a/src/main/Discard.tsx
+++ b/src/main/Discard.tsx
@@ -69,7 +69,7 @@ const DiscardButton : React.FC = () => {
       onClick={discard}
       onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => { if (event.key === " " || event.key === "Enter") {
         discard()
-      }}}>
+      } }}>
       <FontAwesomeIcon icon={faTimesCircle} size="1x" />
       <span>{t("discard.confirm-button")}</span>
     </div>
diff --git a/src/main/Finish.tsx b/src/main/Finish.tsx
index 596cebc4e..5855fc170 100644
--- a/src/main/Finish.tsx
+++ b/src/main/Finish.tsx
@@ -82,7 +82,7 @@ export const PageButton : React.FC<{pageNumber: number, label: string, iconName:
       onClick={onPageChange}
       onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => { if (event.key === " " || event.key === "Enter") {
         onPageChange()
-      }}}>
+      } }}>
       <FontAwesomeIcon icon={iconName} size="1x" />
       <span>{label}</span>
     </div>
diff --git a/src/main/FinishMenu.tsx b/src/main/FinishMenu.tsx
index bdc190aee..d29a7e06f 100644
--- a/src/main/FinishMenu.tsx
+++ b/src/main/FinishMenu.tsx
@@ -72,7 +72,7 @@ const FinishMenuButton: React.FC<{iconName: IconDefinition, stateName: finish["v
       onClick={finish}
       onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => { if (event.key === " " || event.key === "Enter") {
         finish()
-      }}}>
+      } }}>
       <FontAwesomeIcon icon={iconName} size="2x"/>
       <div style={{padding: '0px 20px'}}>{buttonString}</div>
     </div>
diff --git a/src/main/MainMenu.tsx b/src/main/MainMenu.tsx
index 37a4615f5..68512b45a 100644
--- a/src/main/MainMenu.tsx
+++ b/src/main/MainMenu.tsx
@@ -173,7 +173,7 @@ const MainMenuButton: React.FC<mainMenuButtonInterface> = ({iconName, stateName,
       onClick={onMenuItemClicked}
       onKeyDown={(event: React.KeyboardEvent<HTMLLIElement>) => { if (event.key === "Enter") {
         onMenuItemClicked()
-      }}}
+      } }}
     >
       <FontAwesomeIcon icon={iconName} size={miniButton ? "1x" : "2x"}/>
       {bottomText && <div>{bottomText}</div>}
diff --git a/src/main/Metadata.tsx b/src/main/Metadata.tsx
index e0e873ffa..f682a44d1 100644
--- a/src/main/Metadata.tsx
+++ b/src/main/Metadata.tsx
@@ -510,7 +510,7 @@ const Metadata: React.FC = () => {
       if (Array.isArray(field.value)) {
         return (
           <CreatableSelect {...input}
-            onBlur={e => {blurWithSubmit(e, input)}}
+            onBlur={e => { blurWithSubmit(e, input) }}
             isMulti
             isClearable={!field.readOnly}     // The component does not support readOnly, so we have to work around
             isSearchable={!field.readOnly}    // by setting other settings
@@ -524,7 +524,7 @@ const Metadata: React.FC = () => {
       } else {
         return (
           <Select {...input}
-            onBlur={e => {blurWithSubmit(e, input)}}
+            onBlur={e => { blurWithSubmit(e, input) }}
             isClearable={!field.readOnly}     // The component does not support readOnly, so we have to work around
             isSearchable={!field.readOnly}    // by setting other settings
             openMenuOnClick={!field.readOnly}
@@ -547,7 +547,7 @@ const Metadata: React.FC = () => {
               dateFunsUtils={DateFnsUtils}
               TextFieldProps={{
                 variant: 'standard', // Removes default outline
-                onBlur: (e: any) => {blurWithSubmit(e, input)},
+                onBlur: (e: any) => { blurWithSubmit(e, input) },
                 showError: showErrorOnBlur
               }}
               leftArrowButtonText={t('metadata.calendar-prev')}
@@ -567,7 +567,7 @@ const Metadata: React.FC = () => {
               dateFunsUtils={DateFnsUtils}
               TextFieldProps={{
                 variant: 'standard', // Removes default outline
-                onBlur: (e: any) => {blurWithSubmit(e, input)},
+                onBlur: (e: any) => { blurWithSubmit(e, input) },
                 showError: showErrorOnBlur
               }}
             />
@@ -577,7 +577,7 @@ const Metadata: React.FC = () => {
     } else if (field.type === "text_long") {
       return (
         <textarea {...input}
-          onBlur={e => {blurWithSubmit(e, input)}}
+          onBlur={e => { blurWithSubmit(e, input) }}
           readOnly={field.readOnly}
           css={[fieldTypeStyle(field.readOnly), inputFieldTypeStyle(field.readOnly)]}
         />
@@ -585,7 +585,7 @@ const Metadata: React.FC = () => {
     } else {
       return(
         <input {...input}
-          onBlur={e => {blurWithSubmit(e, input)}}
+          onBlur={e => { blurWithSubmit(e, input) }}
           readOnly={field.readOnly}
           css={[fieldTypeStyle(field.readOnly), inputFieldTypeStyle(field.readOnly)]}
         />
diff --git a/src/main/Save.tsx b/src/main/Save.tsx
index 77d501622..bb70f0bd8 100644
--- a/src/main/Save.tsx
+++ b/src/main/Save.tsx
@@ -187,7 +187,7 @@ export const SaveButton: React.FC = () => {
         onClick={save}
         onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => { if (event.key === " " || event.key === "Enter") {
           save()
-        }}}>
+        } }}>
         <FontAwesomeIcon icon={icon} spin={spin} size="1x"/>
         <span>{t("save.confirm-button")}</span>
         <div css={ariaLive} aria-live="polite" aria-atomic="true">{ariaSaveUpdate()}</div>
diff --git a/src/main/SubtitleEditor.tsx b/src/main/SubtitleEditor.tsx
index 8c8d31849..6e99bd219 100644
--- a/src/main/SubtitleEditor.tsx
+++ b/src/main/SubtitleEditor.tsx
@@ -168,7 +168,7 @@ export const BackButton : React.FC = () => {
         onClick={() => dispatch(setIsDisplayEditView(false))}
         onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => { if (event.key === " " || event.key === "Enter") {
           dispatch(setIsDisplayEditView(false))
-        }}}>
+        } }}>
         <FontAwesomeIcon icon={faChevronLeft} size="1x" />
         <span>{t("subtitles.backButton")}</span>
       </div>
diff --git a/src/main/SubtitleListEditor.tsx b/src/main/SubtitleListEditor.tsx
index 1b98ae10f..9500e3e1d 100644
--- a/src/main/SubtitleListEditor.tsx
+++ b/src/main/SubtitleListEditor.tsx
@@ -417,7 +417,7 @@ const SubtitleListSegment = React.memo((props: subtitleListSegmentProps) => {
               event.preventDefault()                      // Prevent page scrolling due to Space bar press
               event.stopPropagation()                     // Prevent video playback due to Space bar press
               addCueAbove()
-            }}}
+            } }}
             icon={faPlus}
           />
           <FunctionButton
@@ -428,7 +428,7 @@ const SubtitleListSegment = React.memo((props: subtitleListSegmentProps) => {
               event.preventDefault()                      // Prevent page scrolling due to Space bar press
               event.stopPropagation()                     // Prevent video playback due to Space bar press
               deleteCue()
-            }}}
+            } }}
             icon={faTrash}
           />
           <FunctionButton
@@ -439,7 +439,7 @@ const SubtitleListSegment = React.memo((props: subtitleListSegmentProps) => {
               event.preventDefault()                      // Prevent page scrolling due to Space bar press
               event.stopPropagation()                     // Prevent video playback due to Space bar press
               addCueBelow()
-            }}}
+            } }}
             icon={faPlus}
           />
         </div>
diff --git a/src/main/SubtitleSelect.tsx b/src/main/SubtitleSelect.tsx
index b675009fc..2cb0a5579 100644
--- a/src/main/SubtitleSelect.tsx
+++ b/src/main/SubtitleSelect.tsx
@@ -131,7 +131,7 @@ const SubtitleSelectButton: React.FC<{
         onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => { if (event.key === " " || event.key === "Enter") {
           dispatch(setIsDisplayEditView(true))
           dispatch(setSelectedSubtitleFlavor(flavor))
-        }}}>
+        } }}>
         {icon && <div css={flagStyle}>{icon}</div>}
         <div css={titleStyle}>{title}</div>
       </div>
@@ -203,7 +203,7 @@ const SubtitleAddButton: React.FC<{languages: {subFlavor: string, title: string}
         onClick={() => setIsPlusDisplay(false)}
         onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => { if (event.key === " " || event.key === "Enter") {
           setIsPlusDisplay(false)
-        }}}
+        } }}
       >
         <FontAwesomeIcon icon={faPlus} size="2x" css={plusIconStyle}/>
         <Form
diff --git a/src/main/TheEnd.tsx b/src/main/TheEnd.tsx
index 98d0f4c7f..0a24df59c 100644
--- a/src/main/TheEnd.tsx
+++ b/src/main/TheEnd.tsx
@@ -76,7 +76,7 @@ const StartOverButton: React.FC = () => {
         onClick={reloadPage}
         onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => { if (event.key === " " || event.key === "Enter") {
           reloadPage()
-        }}}>
+        } }}>
         {/* <FontAwesomeIcon icon={icon} spin={spin} size="1x"/> */}
         <span>{t("theEnd.startOver-button")}</span>
       </div>
diff --git a/src/main/Thumbnail.tsx b/src/main/Thumbnail.tsx
index 7eb106656..60b13f39a 100644
--- a/src/main/Thumbnail.tsx
+++ b/src/main/Thumbnail.tsx
@@ -444,7 +444,7 @@ const AffectAllRow : React.FC<{
           }}
           onKeyDown={(event: React.KeyboardEvent) => { if (event.key === " " || event.key === "Enter") {
             generateAll()
-          }}}
+          } }}
         >
           <FontAwesomeIcon icon={faCamera}/>
           {t('thumbnail.buttonGenerateAll')}
diff --git a/src/main/Video.tsx b/src/main/Video.tsx
index 1dbb40aa6..4f54bf48b 100644
--- a/src/main/Video.tsx
+++ b/src/main/Video.tsx
@@ -581,7 +581,7 @@ const PreviewMode: React.FC<{
         onClick={(event: SyntheticEvent) => switchPlayPreview(event, ref)}
         onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => { if (event.key === " ") {
           switchPlayPreview(event, undefined)
-        }}}>
+        } }}>
         <GlobalHotKeys keyMap={videoPlayerKeyMap} handlers={handlers} allowChanges={true} />
         <div css={{display: 'inline-block', flexWrap: 'nowrap'}}>
           {t("video.previewButton")}
@@ -631,7 +631,7 @@ const PlayButton: React.FC<{
           onClick={(event: SyntheticEvent) => { switchIsPlaying(event) }}
           onKeyDown={(event: React.KeyboardEvent) => { if (event.key === "Enter") { // "Space" is handled by global key
             switchIsPlaying(event)
-          }}}
+          } }}
         />
       </div>
     </ThemedTooltip>
diff --git a/src/main/WorkflowConfiguration.tsx b/src/main/WorkflowConfiguration.tsx
index 475163ea9..5f0645bd8 100644
--- a/src/main/WorkflowConfiguration.tsx
+++ b/src/main/WorkflowConfiguration.tsx
@@ -152,7 +152,7 @@ export const SaveAndProcessButton: React.FC<{text: string}> = ({text}) => {
       onClick={saveAndProcess}
       onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => { if (event.key === " " || event.key === "Enter") {
         saveAndProcess()
-      }}}>
+      } }}>
       <FontAwesomeIcon icon={icon} spin={spin} size="1x"/>
       <span>{text}</span>
     </div>
diff --git a/src/util/utilityFunctions.ts b/src/util/utilityFunctions.ts
index bc1bdebc0..2eef25eda 100644
--- a/src/util/utilityFunctions.ts
+++ b/src/util/utilityFunctions.ts
@@ -19,8 +19,8 @@ export const convertMsToReadableString = (ms: number): string => {
   const seconds = new Date((ms ? ms : 0)).toISOString().substr(17, 2)
 
   const result = []
-  if (parseInt(hours) > 0) { result.push(hours + " hours, ")}
-  if (parseInt(minutes) > 0 || parseInt(hours) > 0) { result.push(minutes + " minutes, ")}
+  if (parseInt(hours) > 0) { result.push(hours + " hours, ") }
+  if (parseInt(minutes) > 0 || parseInt(hours) > 0) { result.push(minutes + " minutes, ") }
   result.push(seconds + " seconds")
 
   return result.join("")

From aa3613dff49ac0c66275b4eac049eb9b96597bee Mon Sep 17 00:00:00 2001
From: Lukas Kalbertodt <lukas.kalbertodt@gmail.com>
Date: Tue, 13 Jun 2023 10:26:08 +0200
Subject: [PATCH 37/47] Fix `arrow-parens` lint warnings

---
 src/config.ts                   |  4 ++--
 src/main/SubtitleListEditor.tsx |  2 +-
 src/main/SubtitleVideoArea.tsx  |  4 ++--
 src/main/Thumbnail.tsx          | 10 +++++-----
 src/main/Video.tsx              |  4 ++--
 src/main/WorkflowSelection.tsx  |  2 +-
 src/redux/metadataSlice.ts      |  2 +-
 src/redux/themeSlice.ts         |  2 +-
 src/redux/videoSlice.ts         |  8 ++++----
 src/redux/workflowPostSlice.ts  |  2 +-
 10 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/config.ts b/src/config.ts
index 21604a385..d3777f8f5 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -107,7 +107,7 @@ export var settings: iSettings
  */
 export const init = async () => {
   // Get settings from config file
-  await loadContextSettings().then((result) => {
+  await loadContextSettings().then(result => {
     configFileSettings = validate(result, false, SRC_SERVER, "from server settings file")
   })
 
@@ -129,7 +129,7 @@ export const init = async () => {
     }
 
     const segments = key.split('.');
-    segments.slice(0, -1).forEach((segment) => {
+    segments.slice(0, -1).forEach(segment => {
       if (!(segment in obj)) {
         obj[segment] = {};
       }
diff --git a/src/main/SubtitleListEditor.tsx b/src/main/SubtitleListEditor.tsx
index 9500e3e1d..4d8cd017f 100644
--- a/src/main/SubtitleListEditor.tsx
+++ b/src/main/SubtitleListEditor.tsx
@@ -120,7 +120,7 @@ const SubtitleListEditor : React.FC = () => {
             height={height ? height : 0}
             itemCount={subtitle !== undefined ? subtitle.length : 0}
             itemData={itemData}
-            itemSize={(index) => segmentHeight}
+            itemSize={index => segmentHeight}
             itemKey={(index, data) => data.items[index].idInternal}
             width={width ? width : 0}
             overscanCount={4}
diff --git a/src/main/SubtitleVideoArea.tsx b/src/main/SubtitleVideoArea.tsx
index 41c47b053..93c3ee3aa 100644
--- a/src/main/SubtitleVideoArea.tsx
+++ b/src/main/SubtitleVideoArea.tsx
@@ -173,7 +173,7 @@ const VideoSelectDropdown : React.FC<{
 
   const getFlavorLabel = (flavor: Flavor) => {
     // Omit subtype if all flavour subtypes are equal
-    if (flavors.every((f) => f.subtype === flavors[0].subtype)) {
+    if (flavors.every(f => f.subtype === flavors[0].subtype)) {
       return flavor.type
     }
 
@@ -200,7 +200,7 @@ const VideoSelectDropdown : React.FC<{
         options={data}
         defaultValue={data.filter(({value}) => value === stringifyFlavor(defaultFlavor))}
         onChange={
-          (newValue) => {
+          newValue => {
             if (newValue) {
               // Put flavor back together
               const [type, subtype] = newValue.value.split("/")
diff --git a/src/main/Thumbnail.tsx b/src/main/Thumbnail.tsx
index 60b13f39a..3fa77c7e4 100644
--- a/src/main/Thumbnail.tsx
+++ b/src/main/Thumbnail.tsx
@@ -140,7 +140,7 @@ const ThumbnailTable : React.FC<{
   })
 
   const renderSingleOrMultiple = () => {
-    const primaryTrack = videoTracks.find((e) => e.thumbnailPriority === 0)
+    const primaryTrack = videoTracks.find(e => e.thumbnailPriority === 0)
 
     if (settings.thumbnail.simpleMode && primaryTrack !== undefined) {
       return (<>
@@ -330,12 +330,12 @@ const ThumbnailButtons : React.FC<{
       {/* Hidden input field for upload */}
       <input
         style={{display: 'none'}}
-        ref={(el) => {
+        ref={el => {
           inputRefs.current[index] = el;
         }}
         type="file"
         accept="image/*"
-        onChange={(event) => uploadCallback(event, track)}
+        onChange={event => uploadCallback(event, track)}
         aria-hidden="true"
       />
       <ThumbnailButton
@@ -534,12 +534,12 @@ const ThumbnailButtonsSimple : React.FC<{
       {/* Hidden input field for upload */}
       <input
         style={{display: 'none'}}
-        ref={(el) => {
+        ref={el => {
           inputRefs.current[index] = el;
         }}
         type="file"
         accept="image/*"
-        onChange={(event) => uploadCallback(event, track)}
+        onChange={event => uploadCallback(event, track)}
         aria-hidden="true"
       />
       <ThumbnailButton
diff --git a/src/main/Video.tsx b/src/main/Video.tsx
index 4f54bf48b..5a90c490e 100644
--- a/src/main/Video.tsx
+++ b/src/main/Video.tsx
@@ -136,7 +136,7 @@ export const VideoPlayers: React.FC<{refs: any, widthInPercent?: number}> = ({re
         setClickTriggered={setClickTriggered}
         setCurrentlyAt={setCurrentlyAt}
         setAspectRatio={setAspectRatio}
-        ref={(el) => {
+        ref={el => {
           if (refs === undefined) { return }
           (refs.current[i] = el)
         }}
@@ -330,7 +330,7 @@ export const VideoPlayer = React.forwardRef(
 
       if (video) {
         const oldTracks = video.querySelectorAll('track');
-        oldTracks.forEach((oldTrack) => {
+        oldTracks.forEach(oldTrack => {
           video.removeChild(oldTrack);
         });
       }
diff --git a/src/main/WorkflowSelection.tsx b/src/main/WorkflowSelection.tsx
index 2fa2cd656..a9c51940d 100644
--- a/src/main/WorkflowSelection.tsx
+++ b/src/main/WorkflowSelection.tsx
@@ -181,7 +181,7 @@ const WorkflowButton: React.FC<{stateName: string, workflowId: string, workflowD
   );
 }
 
-const WorkflowSelectRadio: React.FC = (props) => {
+const WorkflowSelectRadio: React.FC = props => {
 
   const style = css({
     alignSelf: 'start',
diff --git a/src/redux/metadataSlice.ts b/src/redux/metadataSlice.ts
index d4f03446e..e9078cd1f 100644
--- a/src/redux/metadataSlice.ts
+++ b/src/redux/metadataSlice.ts
@@ -109,7 +109,7 @@ const metadataSlice = createSlice({
     setHasChanges: (state, action: PayloadAction<metadata["hasChanges"]>) => {
       state.hasChanges = action.payload
     },
-    resetPostRequestState: (state) => {
+    resetPostRequestState: state => {
       state.postStatus = 'idle'
     }
   },
diff --git a/src/redux/themeSlice.ts b/src/redux/themeSlice.ts
index 27b5900b5..fd2cc9903 100644
--- a/src/redux/themeSlice.ts
+++ b/src/redux/themeSlice.ts
@@ -116,7 +116,7 @@ export const themeSlice = createSlice({
     setState: (state, action: PayloadAction<theme["value"]>) => {
       state.value = action.payload;
     },
-    toggleTheme: (state) => {
+    toggleTheme: state => {
       state.theme = getTheme()
     },
   }
diff --git a/src/redux/videoSlice.ts b/src/redux/videoSlice.ts
index abd569c60..42c2cb5ff 100644
--- a/src/redux/videoSlice.ts
+++ b/src/redux/videoSlice.ts
@@ -141,7 +141,7 @@ const videoSlice = createSlice({
       const index = state.tracks.findIndex(t => t.id === action.payload)
       state.tracks[index].thumbnailUri = undefined
     },
-    cut: (state) => {
+    cut: state => {
       // If we're exactly between two segments, we can't split the current segment
       if (state.segments[state.activeSegmentIndex].start === state.currentlyAt ||
           state.segments[state.activeSegmentIndex].end === state.currentlyAt) {
@@ -163,18 +163,18 @@ const videoSlice = createSlice({
 
       state.hasChanges = true
     },
-    markAsDeletedOrAlive: (state) => {
+    markAsDeletedOrAlive: state => {
       state.segments[state.activeSegmentIndex].deleted = !state.segments[state.activeSegmentIndex].deleted
       state.hasChanges = true
     },
     setSelectedWorkflowIndex: (state, action: PayloadAction<video["selectedWorkflowId"]>) => {
       state.selectedWorkflowId = action.payload
     },
-    mergeLeft: (state) => {
+    mergeLeft: state => {
       mergeSegments(state, state.activeSegmentIndex, state.activeSegmentIndex - 1)
       state.hasChanges = true
     },
-    mergeRight: (state) => {
+    mergeRight: state => {
       mergeSegments(state, state.activeSegmentIndex, state.activeSegmentIndex + 1)
       state.hasChanges = true
     },
diff --git a/src/redux/workflowPostSlice.ts b/src/redux/workflowPostSlice.ts
index ea8285dd6..84f45d59d 100644
--- a/src/redux/workflowPostSlice.ts
+++ b/src/redux/workflowPostSlice.ts
@@ -28,7 +28,7 @@ const workflowPostSlice = createSlice({
   name: 'workflowPostState',
   initialState,
   reducers: {
-    resetPostRequestState: (state) => {
+    resetPostRequestState: state => {
       state.status = 'idle'
     }
   },

From d0ef876c4cfafd537be02b9055664e151019a3d2 Mon Sep 17 00:00:00 2001
From: Lukas Kalbertodt <lukas.kalbertodt@gmail.com>
Date: Tue, 13 Jun 2023 10:27:24 +0200
Subject: [PATCH 38/47] Fix `space-infix-ops` lint warnings

---
 src/main/Finish.tsx             | 6 +++---
 src/main/Metadata.tsx           | 6 +++---
 src/main/SubtitleListEditor.tsx | 6 +++---
 src/main/Thumbnail.tsx          | 6 +++---
 src/main/Video.tsx              | 6 +++---
 src/redux/videoSlice.ts         | 4 ++--
 6 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/main/Finish.tsx b/src/main/Finish.tsx
index 5855fc170..16bfa209a 100644
--- a/src/main/Finish.tsx
+++ b/src/main/Finish.tsx
@@ -26,15 +26,15 @@ const Finish : React.FC = () => {
   const pageNumber = useSelector(selectPageNumber)
 
   const pageZeroStyle = css({
-    display: pageNumber !== 0 ? 'none' :'block',
+    display: pageNumber !== 0 ? 'none' : 'block',
   })
 
   const pageOneStyle = css({
-    display: pageNumber !== 1 ? 'none' :'block',
+    display: pageNumber !== 1 ? 'none' : 'block',
   })
 
   const pageTwoStyle = css({
-    display: pageNumber !== 2 ? 'none' :'block',
+    display: pageNumber !== 2 ? 'none' : 'block',
   })
 
   return (
diff --git a/src/main/Metadata.tsx b/src/main/Metadata.tsx
index f682a44d1..1b9f36eb8 100644
--- a/src/main/Metadata.tsx
+++ b/src/main/Metadata.tsx
@@ -401,7 +401,7 @@ const Metadata: React.FC = () => {
     }
 
     // For these fields, the value needs to be inside an array
-    if (field && !Array.isArray(value) &&(field.id === "creator" || field.id === "contributor")) {
+    if (field && !Array.isArray(value) && (field.id === "creator" || field.id === "contributor")) {
       returnValue = [returnValue]
     }
 
@@ -626,7 +626,7 @@ const Metadata: React.FC = () => {
           <div css={fieldStyle} data-testid={field.id}>
             <label css={fieldLabelStyle} htmlFor={input.name}>{
               i18n.exists(`metadata.labels.${field.id}`) ?
-                t(`metadata.labels.${field.id}` as TFuncKey) as string: field.id
+                t(`metadata.labels.${field.id}` as TFuncKey) as string : field.id
             }</label>
 
             {generateComponentWithModifiedInput(field, input)}
@@ -646,7 +646,7 @@ const Metadata: React.FC = () => {
       <div key={catalogIndex}>
         <h2>
           {i18n.exists(`metadata.${catalog.title.replaceAll(".", "-")}`) ?
-            t(`metadata.${catalog.title.replaceAll(".", "-")}` as TFuncKey) as string: catalog.title
+            t(`metadata.${catalog.title.replaceAll(".", "-")}` as TFuncKey) as string : catalog.title
           }
         </h2>
 
diff --git a/src/main/SubtitleListEditor.tsx b/src/main/SubtitleListEditor.tsx
index 4d8cd017f..40b5bf92d 100644
--- a/src/main/SubtitleListEditor.tsx
+++ b/src/main/SubtitleListEditor.tsx
@@ -397,7 +397,7 @@ const SubtitleListSegment = React.memo((props: subtitleListSegmentProps) => {
             value={cue.startTime}
             changeCallback={updateCueStart}
             tooltip={t("subtitleList.startTime-tooltip")}
-            tooltipAria={t("subtitleList.startTime-tooltip-aria")+": " + convertMsToReadableString(cue.startTime)}
+            tooltipAria={t("subtitleList.startTime-tooltip-aria") + ": " + convertMsToReadableString(cue.startTime)}
           />
           <TimeInput
             generalFieldStyle={[fieldStyle,
@@ -405,7 +405,7 @@ const SubtitleListSegment = React.memo((props: subtitleListSegmentProps) => {
             value={cue.endTime}
             changeCallback={updateCueEnd}
             tooltip={t("subtitleList.endTime-tooltip")}
-            tooltipAria={t("subtitleList.endTime-tooltip-aria")+": " + convertMsToReadableString(cue.endTime)}
+            tooltipAria={t("subtitleList.endTime-tooltip-aria") + ": " + convertMsToReadableString(cue.endTime)}
           />
         </div>
         <div css={functionButtonAreaStyle} className="functionButtonAreaStyle">
@@ -496,7 +496,7 @@ const TimeInput : React.FC<{
   generalFieldStyle: SerializedStyles[],
   tooltip: string,
   tooltipAria: string,
-}>= ({
+}> = ({
   value,
   changeCallback,
   generalFieldStyle,
diff --git a/src/main/Thumbnail.tsx b/src/main/Thumbnail.tsx
index 3fa77c7e4..259db6439 100644
--- a/src/main/Thumbnail.tsx
+++ b/src/main/Thumbnail.tsx
@@ -344,7 +344,7 @@ const ThumbnailButtons : React.FC<{
         tooltipText={t('thumbnail.buttonUseForOtherThumbnails-tooltip')}
         ariaLabel={t('thumbnail.buttonUseForOtherThumbnails-tooltip-aria')}
         icon={faCopy}
-        active={(track.thumbnailUri && track.thumbnailUri.startsWith("data") ? true: false)}
+        active={(track.thumbnailUri && track.thumbnailUri.startsWith("data") ? true : false)}
       />
       <ThumbnailButton
         handler={() => { discard(track.id) }}
@@ -352,7 +352,7 @@ const ThumbnailButtons : React.FC<{
         tooltipText={t('thumbnail.buttonDiscard-tooltip')}
         ariaLabel={t('thumbnail.buttonDiscard-tooltip-aria')}
         icon={faTimesCircle}
-        active={(track.thumbnailUri && track.thumbnailUri.startsWith("data") ? true: false)}
+        active={(track.thumbnailUri && track.thumbnailUri.startsWith("data") ? true : false)}
       />
     </div>
   )
@@ -548,7 +548,7 @@ const ThumbnailButtonsSimple : React.FC<{
         tooltipText={t('thumbnail.buttonDiscard-tooltip')}
         ariaLabel={t('thumbnail.buttonDiscard-tooltip-aria')}
         icon={faTimesCircle}
-        active={(track.thumbnailUri && track.thumbnailUri.startsWith("data") ? true: false)}
+        active={(track.thumbnailUri && track.thumbnailUri.startsWith("data") ? true : false)}
       />
     </div>
   )
diff --git a/src/main/Video.tsx b/src/main/Video.tsx
index 5a90c490e..d96079dd2 100644
--- a/src/main/Video.tsx
+++ b/src/main/Video.tsx
@@ -103,7 +103,7 @@ export const Video: React.FC = () => {
   );
 };
 
-export const VideoPlayers: React.FC<{refs: any, widthInPercent?: number}> = ({refs, widthInPercent=100}) => {
+export const VideoPlayers: React.FC<{refs: any, widthInPercent?: number}> = ({refs, widthInPercent = 100}) => {
 
   const videoURLs = useSelector(selectVideoURL)
   const videoCount = useSelector(selectVideoCount)
@@ -657,13 +657,13 @@ const TimeDisplay: React.FC<{
     <div css={{display: 'flex', flexDirection: 'row', gap: '5px'}}>
       <ThemedTooltip title={t("video.current-time-tooltip")}>
         <time css={{display: 'inline-block', width: '100px'}}
-          tabIndex={0} role="timer" aria-label={t("video.time-aria")+": " + convertMsToReadableString(currentlyAt)}>
+          tabIndex={0} role="timer" aria-label={t("video.time-aria") + ": " + convertMsToReadableString(currentlyAt)}>
           {new Date((currentlyAt ? currentlyAt : 0)).toISOString().substr(11, 12)}
         </time>
       </ThemedTooltip>
       {" / "}
       <ThemedTooltip title={t("video.time-duration-tooltip")}>
-        <div tabIndex={0} aria-label={t("video.duration-aria")+": " + convertMsToReadableString(duration)}>
+        <div tabIndex={0} aria-label={t("video.duration-aria") + ": " + convertMsToReadableString(duration)}>
           {new Date((duration ? duration : 0)).toISOString().substr(11, 12)}
         </div>
       </ThemedTooltip>
diff --git a/src/redux/videoSlice.ts b/src/redux/videoSlice.ts
index 42c2cb5ff..be960b1fe 100644
--- a/src/redux/videoSlice.ts
+++ b/src/redux/videoSlice.ts
@@ -324,7 +324,7 @@ export const calculateTotalAspectRatio = (aspectRatios: video["aspectRatios"]) =
   const minHeight = Math.min(...aspectRatios.map(o => o.height))
   let minWidth = Math.min(...aspectRatios.map(o => o.width))
   minWidth *= aspectRatios.length
-  return Math.min((minHeight / minWidth) * 100, (9/32) * 100)
+  return Math.min((minHeight / minWidth) * 100, (9 / 32) * 100)
 }
 
 const setThumbnailHelper = (state: video, id: Track["id"], uri: Track["thumbnailUri"]) => {
@@ -386,7 +386,7 @@ export const selectCaptions = (state: { videoState: { captions: video["captions"
   state.videoState.captions
 export const selectCaptionTrackByFlavor = (flavor: string) => (state: { videoState: { captions: video["captions"]; }; }) => {
   for (const cap of state.videoState.captions) {
-    if (cap.flavor.type+"/"+cap.flavor.subtype === flavor) {
+    if (cap.flavor.type + "/" + cap.flavor.subtype === flavor) {
       return cap
     }
   }

From 03bb853f493b5ae28b7480137691e0a3601144c6 Mon Sep 17 00:00:00 2001
From: Lukas Kalbertodt <lukas.kalbertodt@gmail.com>
Date: Tue, 13 Jun 2023 10:28:26 +0200
Subject: [PATCH 39/47] Fix `keyword-spacing` lint warnings

---
 src/main/CuttingActions.tsx    |  8 ++++----
 src/main/FinishMenu.tsx        |  2 +-
 src/main/Metadata.tsx          |  6 +++---
 src/main/Save.tsx              |  4 ++--
 src/main/SubtitleEditor.tsx    |  2 +-
 src/main/SubtitleVideoArea.tsx |  4 ++--
 src/main/ThemeSwitcher.tsx     | 10 +++++-----
 src/main/Thumbnail.tsx         |  2 +-
 src/main/Timeline.tsx          |  4 ++--
 src/main/Video.tsx             |  6 +++---
 src/main/WorkflowSelection.tsx |  2 +-
 src/redux/themeSlice.ts        | 22 +++++++++++-----------
 src/redux/videoSlice.ts        |  4 ++--
 src/util/utilityFunctions.ts   |  2 +-
 14 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/src/main/CuttingActions.tsx b/src/main/CuttingActions.tsx
index b1c856939..0f3629ff5 100644
--- a/src/main/CuttingActions.tsx
+++ b/src/main/CuttingActions.tsx
@@ -55,10 +55,10 @@ const CuttingActions: React.FC = () => {
 
   // Maps functions to hotkeys
   const handlers = {
-    cut: (keyEvent?: KeyboardEvent | SyntheticEvent) => { if(keyEvent) { dispatchAction(keyEvent, cut, undefined) } },
-    delete: (keyEvent?: KeyboardEvent | SyntheticEvent) => { if(keyEvent) { dispatchAction(keyEvent, markAsDeletedOrAlive, undefined) } },
-    mergeLeft: (keyEvent?: KeyboardEvent | SyntheticEvent) => { if(keyEvent) { dispatchAction(keyEvent, mergeLeft, undefined) } },
-    mergeRight: (keyEvent?: KeyboardEvent | SyntheticEvent) => { if(keyEvent) { dispatchAction(keyEvent, mergeRight, undefined) } },
+    cut: (keyEvent?: KeyboardEvent | SyntheticEvent) => { if (keyEvent) { dispatchAction(keyEvent, cut, undefined) } },
+    delete: (keyEvent?: KeyboardEvent | SyntheticEvent) => { if (keyEvent) { dispatchAction(keyEvent, markAsDeletedOrAlive, undefined) } },
+    mergeLeft: (keyEvent?: KeyboardEvent | SyntheticEvent) => { if (keyEvent) { dispatchAction(keyEvent, mergeLeft, undefined) } },
+    mergeRight: (keyEvent?: KeyboardEvent | SyntheticEvent) => { if (keyEvent) { dispatchAction(keyEvent, mergeRight, undefined) } },
   }
 
   const cuttingStyle = css({
diff --git a/src/main/FinishMenu.tsx b/src/main/FinishMenu.tsx
index d29a7e06f..4b70ed60c 100644
--- a/src/main/FinishMenu.tsx
+++ b/src/main/FinishMenu.tsx
@@ -51,7 +51,7 @@ const FinishMenuButton: React.FC<{iconName: IconDefinition, stateName: finish["v
   }
 
   var buttonString;
-  switch(stateName) {
+  switch (stateName) {
     case "Save changes":
       buttonString = t("finishMenu.save-button");
       break;
diff --git a/src/main/Metadata.tsx b/src/main/Metadata.tsx
index 1b9f36eb8..57b6d97f4 100644
--- a/src/main/Metadata.tsx
+++ b/src/main/Metadata.tsx
@@ -61,7 +61,7 @@ const Metadata: React.FC = () => {
   // Overwrite readonly property of fields based on config settings
   useEffect(() => {
     if (getStatus === 'success') {
-      for(let catalogIndex = 0; catalogIndex < catalogs.length; catalogIndex++) {
+      for (let catalogIndex = 0; catalogIndex < catalogs.length; catalogIndex++) {
         if (settings.metadata.configureFields) {
           const configureFields = settings.metadata.configureFields
           const catalog = catalogs[catalogIndex]
@@ -386,7 +386,7 @@ const Metadata: React.FC = () => {
     let returnValue : any = value
 
     // Parse values out react-multi-select and put them in an array
-    if(Array.isArray(value)) {
+    if (Array.isArray(value)) {
       returnValue = []
       value.forEach((subValue : any) => {
         returnValue.push(parseValue(null, subValue))  // Pass field as null to avoid each value into an array later on
@@ -583,7 +583,7 @@ const Metadata: React.FC = () => {
         />
       );
     } else {
-      return(
+      return (
         <input {...input}
           onBlur={e => { blurWithSubmit(e, input) }}
           readOnly={field.readOnly}
diff --git a/src/main/Save.tsx b/src/main/Save.tsx
index bb70f0bd8..db84d677d 100644
--- a/src/main/Save.tsx
+++ b/src/main/Save.tsx
@@ -58,7 +58,7 @@ const Save : React.FC = () => {
     // Post (successful) save
     if (postWorkflowStatus === 'success' && postMetadataStatus === 'success'
       && !hasChanges && !metadataHasChanges && !subtitleHasChanges) {
-      return(
+      return (
         <>
           <FontAwesomeIcon icon={faCheckCircle} size="10x" />
           <div>{t("save.success-text")}</div>
@@ -133,7 +133,7 @@ export const SaveButton: React.FC = () => {
   }
 
   const ariaSaveUpdate = () => {
-    if(workflowStatus === 'success') {
+    if (workflowStatus === 'success') {
       return t("save.success-tooltip-aria")
     }
   }
diff --git a/src/main/SubtitleEditor.tsx b/src/main/SubtitleEditor.tsx
index 6e99bd219..b57ec102f 100644
--- a/src/main/SubtitleEditor.tsx
+++ b/src/main/SubtitleEditor.tsx
@@ -115,7 +115,7 @@ const SubtitleEditor : React.FC = () => {
         <span>{"Subtitle Parsing Error(s): " + getError}</span>
       )
     } else {
-      return(
+      return (
         <>
           <div css={headerRowStyle}>
             <BackButton />
diff --git a/src/main/SubtitleVideoArea.tsx b/src/main/SubtitleVideoArea.tsx
index 93c3ee3aa..effcd6712 100644
--- a/src/main/SubtitleVideoArea.tsx
+++ b/src/main/SubtitleVideoArea.tsx
@@ -79,7 +79,7 @@ const SubtitleVideoArea : React.FC = () => {
 
   // Parse subtitles to something the video player understands
   useEffect(() => {
-    if(subtitle) {
+    if (subtitle) {
       const serializedSubtitle = serializeSubtitle(subtitle)
       setSubtitleUrl(window.URL.createObjectURL(new Blob([serializedSubtitle], {type: 'text/vtt'})))
     }
@@ -103,7 +103,7 @@ const SubtitleVideoArea : React.FC = () => {
   });
 
   const render = () => {
-    return(
+    return (
       <div css={areaWrapper}>
         <div css={videoPlayerAreaStyle}>
           {selectedFlavor && <VideoSelectDropdown
diff --git a/src/main/ThemeSwitcher.tsx b/src/main/ThemeSwitcher.tsx
index c000b386f..bcb9fdfe3 100644
--- a/src/main/ThemeSwitcher.tsx
+++ b/src/main/ThemeSwitcher.tsx
@@ -21,7 +21,7 @@ const ThemeSwitcher: React.FC = () => {
   const isDarkPrefered = window.matchMedia('(prefers-color-scheme: dark)');
   // Listen to system preference changes
   const systemPreferenceHasChanged = () => {
-    if(themeState === 'system') {
+    if (themeState === 'system') {
       dispatch(toggleTheme())
     }
     isDarkPrefered.removeEventListener('change', systemPreferenceHasChanged)
@@ -30,16 +30,16 @@ const ThemeSwitcher: React.FC = () => {
   isDarkPrefered.addEventListener('change', systemPreferenceHasChanged)
 
   const switchTheme = (themeState: string) => {
-    if(themeState === 'system') {
+    if (themeState === 'system') {
       dispatch(setState('system'))
     }
-    else if(themeState === 'high-contrast-dark') {
+    else if (themeState === 'high-contrast-dark') {
       dispatch(setState('high-contrast-dark'))
     }
-    else if(themeState === 'high-contrast-light') {
+    else if (themeState === 'high-contrast-light') {
       dispatch(setState('high-contrast-light'))
     }
-    else if(themeState === 'dark') {
+    else if (themeState === 'dark') {
       dispatch(setState('dark'))
     }
     else {
diff --git a/src/main/Thumbnail.tsx b/src/main/Thumbnail.tsx
index 259db6439..c8b54bdba 100644
--- a/src/main/Thumbnail.tsx
+++ b/src/main/Thumbnail.tsx
@@ -173,7 +173,7 @@ const ThumbnailTable : React.FC<{
     }
   }
 
-  return(
+  return (
     <div css={thumbnailTableStyle}>
       {renderSingleOrMultiple()}
     </div>
diff --git a/src/main/Timeline.tsx b/src/main/Timeline.tsx
index df3ea3a2d..67a5482e6 100644
--- a/src/main/Timeline.tsx
+++ b/src/main/Timeline.tsx
@@ -129,7 +129,7 @@ export const Scrubber: React.FC<{
 
   // Reposition scrubber when the current x position was changed externally
   useEffect(() => {
-    if(currentlyAt !== wasCurrentlyAtRef.current && !isGrabbed) {
+    if (currentlyAt !== wasCurrentlyAtRef.current && !isGrabbed) {
       updateXPos();
       wasCurrentlyAtRef.current = currentlyAt;
     }
@@ -137,7 +137,7 @@ export const Scrubber: React.FC<{
 
   // Reposition scrubber when the timeline width changes
   useEffect(() => {
-    if(currentlyAt && duration) {
+    if (currentlyAt && duration) {
       setControlledPosition({x: (currentlyAt / duration) * (timelineWidth), y: 0});
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/src/main/Video.tsx b/src/main/Video.tsx
index d96079dd2..5d150aa96 100644
--- a/src/main/Video.tsx
+++ b/src/main/Video.tsx
@@ -408,7 +408,7 @@ export const VideoPlayer = React.forwardRef(
 
     const render = () => {
       if (!errorState) {
-        return(
+        return (
           <div css={playerWrapper}>
             <ReactPlayer url={url}
               css={reactPlayerStyle}
@@ -547,7 +547,7 @@ const PreviewMode: React.FC<{
   // Maps functions to hotkeys
   const handlers = {
     // preview: switchPlayPreview,
-    preview: (keyEvent?: KeyboardEvent) => { if(keyEvent) { switchPlayPreview(keyEvent, undefined) } }
+    preview: (keyEvent?: KeyboardEvent) => { if (keyEvent) { switchPlayPreview(keyEvent, undefined) } }
   }
 
   const previewModeStyle = css({
@@ -618,7 +618,7 @@ const PlayButton: React.FC<{
 
   // Maps functions to hotkeys
   const handlers = {
-    play: (keyEvent?: KeyboardEvent) => { if(keyEvent) { switchIsPlaying(keyEvent) } }
+    play: (keyEvent?: KeyboardEvent) => { if (keyEvent) { switchIsPlaying(keyEvent) } }
   }
 
   return (
diff --git a/src/main/WorkflowSelection.tsx b/src/main/WorkflowSelection.tsx
index a9c51940d..79024294e 100644
--- a/src/main/WorkflowSelection.tsx
+++ b/src/main/WorkflowSelection.tsx
@@ -105,7 +105,7 @@ const WorkflowSelection : React.FC = () => {
   // Fills the layout template with values based on how many workflows are available
   const renderSelection = () => {
     if (workflows.length <= 0) {
-      return(
+      return (
         render(
           t("workflowSelection.saveAndProcess-text"),
           <Trans i18nKey="workflowSelection.noWorkflows-text">
diff --git a/src/redux/themeSlice.ts b/src/redux/themeSlice.ts
index fd2cc9903..c59dd8df4 100644
--- a/src/redux/themeSlice.ts
+++ b/src/redux/themeSlice.ts
@@ -45,16 +45,16 @@ export interface Theme {
 const getValue = () => {
   const value = localStorage.getItem('theme');
 
-  if(value === 'system' || value === null) {
+  if (value === 'system' || value === null) {
     return 'system'
   }
-  else if(value === 'high-contrast-dark') {
+  else if (value === 'high-contrast-dark') {
     return 'high-contrast-dark'
   }
-  else if(value === 'high-contrast-light') {
+  else if (value === 'high-contrast-light') {
     return 'high-contrast-light'
   }
-  else if(value === 'dark') {
+  else if (value === 'dark') {
     return 'dark'
   }
   return 'light'
@@ -64,35 +64,35 @@ const getTheme = () => {
   const themeId = getValue();
   document.documentElement.setAttribute('data-theme', 'light');
 
-  if(themeId === 'system' || themeId === undefined) {
+  if (themeId === 'system' || themeId === undefined) {
     const isDarkPrefered = window.matchMedia('(prefers-color-scheme: dark)');
     const isContrastPrefered = window.matchMedia('(prefers-contrast: more)');
     console.log('isContrastPrefered', isContrastPrefered)
 
-    if(isDarkPrefered.matches && !isContrastPrefered.matches) {
+    if (isDarkPrefered.matches && !isContrastPrefered.matches) {
       document.documentElement.setAttribute('data-theme', 'dark');
       return darkMode
     }
-    else if(isContrastPrefered.matches && isDarkPrefered.matches) {
+    else if (isContrastPrefered.matches && isDarkPrefered.matches) {
       document.documentElement.setAttribute('data-theme', 'high-contrast-dark');
       return highContrastDarkMode
     }
-    else if(isContrastPrefered.matches && !isDarkPrefered.matches) {
+    else if (isContrastPrefered.matches && !isDarkPrefered.matches) {
       document.documentElement.setAttribute('data-theme', 'high-contrast-light');
       return highContrastLightMode
     }
     return lightMode
   }
 
-  if(themeId === 'high-contrast-dark') {
+  if (themeId === 'high-contrast-dark') {
     document.documentElement.setAttribute('data-theme', 'high-contrast-dark');
     return highContrastDarkMode
   }
-  if(themeId === 'high-contrast-light') {
+  if (themeId === 'high-contrast-light') {
     document.documentElement.setAttribute('data-theme', 'high-contrast-light');
     return highContrastLightMode
   }
-  if(themeId === 'dark') {
+  if (themeId === 'dark') {
     document.documentElement.setAttribute('data-theme', 'dark');
     return darkMode
   }
diff --git a/src/redux/videoSlice.ts b/src/redux/videoSlice.ts
index be960b1fe..02a000655 100644
--- a/src/redux/videoSlice.ts
+++ b/src/redux/videoSlice.ts
@@ -236,7 +236,7 @@ const updateActiveSegment = (state: video) => {
   state.activeSegmentIndex = state.segments.findIndex(element =>
     element.start <= state.currentlyAt && element.end >= state.currentlyAt)
   // If there is an error, assume the first (the starting) segment
-  if(state.activeSegmentIndex < 0) {
+  if (state.activeSegmentIndex < 0) {
     state.activeSegmentIndex = 0
   }
 }
@@ -280,7 +280,7 @@ const mergeSegments = (state: video, activeSegmentIndex: number, mergeSegmentInd
 }
 
 const skipDeletedSegments = (state: video) => {
-  if(state.isPlaying && state.segments[state.activeSegmentIndex].deleted && state.isPlayPreview) {
+  if (state.isPlaying && state.segments[state.activeSegmentIndex].deleted && state.isPlayPreview) {
     let endTime = state.segments[state.activeSegmentIndex].end
 
     for (let index = state.activeSegmentIndex; index < state.segments.length; index++) {
diff --git a/src/util/utilityFunctions.ts b/src/util/utilityFunctions.ts
index 2eef25eda..4ce362010 100644
--- a/src/util/utilityFunctions.ts
+++ b/src/util/utilityFunctions.ts
@@ -68,7 +68,7 @@ export function checkFlexGapSupport() {
   flexGapIsSupported = flex.scrollHeight === 1
 
   // Remove element from the DOM after you are done with it
-  if(flex.parentNode) {
+  if (flex.parentNode) {
     flex.parentNode.removeChild(flex)
   }
 

From 6d23ecbeed56885fc8c7a902b1f9381e0d502665 Mon Sep 17 00:00:00 2001
From: Lukas Kalbertodt <lukas.kalbertodt@gmail.com>
Date: Tue, 13 Jun 2023 12:05:48 +0200
Subject: [PATCH 40/47] Fix `no-unused-vars` lint warnings

---
 src/App.tsx                              | 1 -
 src/config.ts                            | 8 ++++----
 src/main/Header.tsx                      | 2 --
 src/main/Metadata.tsx                    | 2 +-
 src/main/SubtitleListEditor.tsx          | 4 ++--
 src/main/SubtitleSelect.tsx              | 2 +-
 src/main/SubtitleTimeline.tsx            | 8 ++++----
 src/main/Timeline.tsx                    | 7 +++----
 src/main/Video.tsx                       | 4 ++--
 src/main/WorkflowSelection.tsx           | 2 +-
 src/redux/metadataSlice.ts               | 6 +++---
 src/redux/subtitleSlice.ts               | 2 +-
 src/redux/videoSlice.ts                  | 2 +-
 src/redux/workflowPostAndProcessSlice.ts | 4 ++--
 src/redux/workflowPostSlice.ts           | 4 ++--
 src/util/utilityFunctions.ts             | 2 +-
 16 files changed, 28 insertions(+), 32 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index ad371acd2..09c373394 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import Body from './main/Body';
 import Header from './main/Header';
 import { GlobalStyle } from './cssStyles';
diff --git a/src/config.ts b/src/config.ts
index d3777f8f5..1acf4eade 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -282,7 +282,7 @@ const validate = (obj: Record<string, any> | null, allowParse: boolean, src: str
 
 // Validation functions for different types.
 const types = {
-  'string': (v: any, allowParse: any) => {
+  'string': (v: any, _allowParse: any) => {
     if (typeof v !== 'string') {
       throw new Error("is not a string, but should be");
     }
@@ -304,7 +304,7 @@ const types = {
       throw new Error("is not a boolean");
     }
   },
-  'map': (v: any, allowParse: any) => {
+  'map': (v: any, _allowParse: any) => {
     for (const key in v) {
       if (typeof key !== 'string') {
         throw new Error("is not a string, but should be");
@@ -314,7 +314,7 @@ const types = {
       }
     }
   },
-  'objectsWithinObjects': (v: any, allowParse: any) => {
+  'objectsWithinObjects': (v: any, _allowParse: any) => {
     for (const catalogName in v) {
       if (typeof catalogName !== 'string') {
         throw new Error("is not a string, but should be");
@@ -380,4 +380,4 @@ const merge = (a: iSettings, b: iSettings) => {
   return deepmerge(a, b, { arrayMerge });
 };
 merge.all = (array: object[]) => deepmerge.all(array, { arrayMerge })
-const arrayMerge = (destinationArray: any, sourceArray: any, options: any) => sourceArray;
+const arrayMerge = (_destinationArray: any, sourceArray: any, _options: any) => sourceArray;
diff --git a/src/main/Header.tsx b/src/main/Header.tsx
index dbf6410c1..6105e7354 100644
--- a/src/main/Header.tsx
+++ b/src/main/Header.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { useSelector } from "react-redux"
 import { selectThemeState } from "../redux/themeSlice"
 import { css } from '@emotion/react'
diff --git a/src/main/Metadata.tsx b/src/main/Metadata.tsx
index 57b6d97f4..831a79d6c 100644
--- a/src/main/Metadata.tsx
+++ b/src/main/Metadata.tsx
@@ -675,7 +675,7 @@ const Metadata: React.FC = () => {
         onSubmit={onSubmit}
         subscription={{ submitting: true, pristine: true }} // Hopefully causes less rerenders
         initialValues={getInitialValues(catalogs)}
-        render={({ handleSubmit, form, submitting, pristine, values}) => (
+        render={({ handleSubmit, form }) => (
           <form onSubmit={event => {
             handleSubmit(event)
             // Ugly fix for form not getting updated after submit. TODO: Find a better fix
diff --git a/src/main/SubtitleListEditor.tsx b/src/main/SubtitleListEditor.tsx
index 40b5bf92d..8ea9574f9 100644
--- a/src/main/SubtitleListEditor.tsx
+++ b/src/main/SubtitleListEditor.tsx
@@ -120,7 +120,7 @@ const SubtitleListEditor : React.FC = () => {
             height={height ? height : 0}
             itemCount={subtitle !== undefined ? subtitle.length : 0}
             itemData={itemData}
-            itemSize={index => segmentHeight}
+            itemSize={_index => segmentHeight}
             itemKey={(index, data) => data.items[index].idInternal}
             width={width ? width : 0}
             overscanCount={4}
@@ -387,7 +387,7 @@ const SubtitleListSegment = React.memo((props: subtitleListSegmentProps) => {
             }
           }}
           onChange={updateCueText}
-          onFocus={e => setTimeToSegmentStart()}
+          onFocus={() => setTimeToSegmentStart()}
         />
 
         <div css={timeAreaStyle}>
diff --git a/src/main/SubtitleSelect.tsx b/src/main/SubtitleSelect.tsx
index 2cb0a5579..6039c0450 100644
--- a/src/main/SubtitleSelect.tsx
+++ b/src/main/SubtitleSelect.tsx
@@ -209,7 +209,7 @@ const SubtitleAddButton: React.FC<{languages: {subFlavor: string, title: string}
         <Form
           onSubmit={onSubmit}
           subscription={{ submitting: true, pristine: true }} // Hopefully causes less rerenders
-          render={({ handleSubmit, form, submitting, pristine, values}) => (
+          render={({ handleSubmit, submitting, pristine }) => (
             <form onSubmit={event => {
               handleSubmit(event)
               // // Ugly fix for form not getting updated after submit. TODO: Find a better fix
diff --git a/src/main/SubtitleTimeline.tsx b/src/main/SubtitleTimeline.tsx
index 418f0b999..78cd7d503 100644
--- a/src/main/SubtitleTimeline.tsx
+++ b/src/main/SubtitleTimeline.tsx
@@ -250,7 +250,7 @@ const TimelineSubtitleSegment: React.FC<{
   // Resizable does not support resizing in the west/north directions out of the box,
   // so additional calculations are necessary.
   // Adapted from Resizable example code
-  const onResizeAbsolute = (event: any, {element, size, handle}: any) => {
+  const onResizeAbsolute = (_event: any, {size, handle}: any) => {
     // Possible TODO: Find a way to stop resizing a segment beyond 0ms here instead of later
     let newLeft = absoluteLeft;
     let newTop = absoluteTop;
@@ -274,7 +274,7 @@ const TimelineSubtitleSegment: React.FC<{
   };
 
   // Update redux state based on the resize
-  const onResizeStop = (event: any, {element, size, handle}: any) => {
+  const onResizeStop = (_event: any, {handle}: any) => {
     // Calc new width, factoring in offset
     const newWidth = absoluteWidth
 
@@ -303,11 +303,11 @@ const TimelineSubtitleSegment: React.FC<{
     setAbsoluteTop(0)
   }
 
-  const onStartDrag = (e: DraggableEvent) => {
+  const onStartDrag = (_e: DraggableEvent) => {
     setIsGrabbed(true)
   }
 
-  const onStopDrag = (e: DraggableEvent, position: any) => {
+  const onStopDrag = (_e: DraggableEvent, position: any) => {
     // Update position and thereby start/end times in redux
     const {x} = position
     dispatchNewTimes(
diff --git a/src/main/Timeline.tsx b/src/main/Timeline.tsx
index 67a5482e6..87eb7ab3d 100644
--- a/src/main/Timeline.tsx
+++ b/src/main/Timeline.tsx
@@ -144,7 +144,7 @@ export const Scrubber: React.FC<{
   }, [timelineWidth])
 
   // Callback for when the scrubber gets dragged by the user
-  const onControlledDrag = (e: any, position: any) => {
+  const onControlledDrag = (_e: any, position: any) => {
     // Update position
     const {x} = position
     dispatch(setCurrentlyAt((x / timelineWidth) * (duration)))
@@ -167,7 +167,7 @@ export const Scrubber: React.FC<{
     }
   }
 
-  const onStopDrag = (e: any, position: any) => {
+  const onStopDrag = (_e: any, position: any) => {
     // Update position
     const {x} = position;
     setControlledPosition({x, y: 0});
@@ -287,7 +287,6 @@ export const SegmentsList: React.FC<{
   styleByActiveSegment?: boolean,
   tabable?: boolean,
 }> = ({
-  timelineWidth,
   timelineHeight,
   styleByActiveSegment = true,
   tabable = true,
@@ -436,7 +435,7 @@ export const Waveforms: React.FC<{timelineHeight: number}> = ({timelineHeight})
           }
 
           // When done, save path to generated waveform img
-          waveformWorker.oncomplete = (image: any, numSamples: any) => {
+          waveformWorker.oncomplete = (image: any, _numSamples: any) => {
             newImages.push(image)
             waveformsProcessed++
             // If all images are generated, rerender
diff --git a/src/main/Video.tsx b/src/main/Video.tsx
index 5d150aa96..5be7dde03 100644
--- a/src/main/Video.tsx
+++ b/src/main/Video.tsx
@@ -261,7 +261,7 @@ export const VideoPlayer = React.forwardRef(
       }
     }
 
-    const onErrorCallback = (e: any) => {
+    const onErrorCallback = (_e: any) => {
       setError(true)
     }
 
@@ -345,7 +345,7 @@ export const VideoPlayer = React.forwardRef(
           track.default = t.default!;
           track.src = t.src!;
           track.track.mode = 'showing'    // Because the load callback may sometimes not execute properly
-          track.addEventListener('error', (e: Event) => {
+          track.addEventListener('error', (_e: Event) => {
             console.warn(`Cannot load track ${t.src!}`)
           });
           track.addEventListener('load', (e: Event) => {
diff --git a/src/main/WorkflowSelection.tsx b/src/main/WorkflowSelection.tsx
index 79024294e..ccc8debca 100644
--- a/src/main/WorkflowSelection.tsx
+++ b/src/main/WorkflowSelection.tsx
@@ -84,7 +84,7 @@ const WorkflowSelection : React.FC = () => {
               name="Workflow Selection Area"
               onChange={handleWorkflowSelectChange}
             >
-              {workflows.map((workflow: Workflow, index: number) => (
+              {workflows.map((workflow: Workflow, _index: number) => (
                 <WorkflowButton key={workflow.id} stateName={workflow.name} workflowId={workflow.id} workflowDescription={workflow.description}/>
               ))}
             </RadioGroup>
diff --git a/src/redux/metadataSlice.ts b/src/redux/metadataSlice.ts
index e9078cd1f..cf291c86d 100644
--- a/src/redux/metadataSlice.ts
+++ b/src/redux/metadataSlice.ts
@@ -115,7 +115,7 @@ const metadataSlice = createSlice({
   },
   extraReducers: builder => {
     builder.addCase(
-      fetchMetadata.pending, (state, action) => {
+      fetchMetadata.pending, (state, _action) => {
         state.status = 'loading'
       })
     builder.addCase(
@@ -130,11 +130,11 @@ const metadataSlice = createSlice({
         state.error = action.error.message
       })
     builder.addCase(
-      postMetadata.pending, (state, action) => {
+      postMetadata.pending, (state, _action) => {
         state.postStatus = 'loading'
       })
     builder.addCase(
-      postMetadata.fulfilled, (state, action) => {
+      postMetadata.fulfilled, (state, _action) => {
         state.postStatus = 'success'
       })
     builder.addCase(
diff --git a/src/redux/subtitleSlice.ts b/src/redux/subtitleSlice.ts
index 68271e018..3452822db 100644
--- a/src/redux/subtitleSlice.ts
+++ b/src/redux/subtitleSlice.ts
@@ -209,7 +209,7 @@ export const selectFocusSegmentTriggered2 = (state: { subtitleState: { focusSegm
   state.subtitleState.focusSegmentTriggered2
 // Hardcoding this value to achieve a desired size for the video player
 // TODO: Don't hardcode this value, instead make the video player component more flexible
-export const selectAspectRatio = (state: { subtitleState: { aspectRatios: subtitle["aspectRatios"] } }) =>
+export const selectAspectRatio = (_state: { subtitleState: { aspectRatios: subtitle["aspectRatios"] } }) =>
   50
 
 export const selectSubtitles = (state: { subtitleState: { subtitles: subtitle["subtitles"] } }) =>
diff --git a/src/redux/videoSlice.ts b/src/redux/videoSlice.ts
index 02a000655..4bb612a3d 100644
--- a/src/redux/videoSlice.ts
+++ b/src/redux/videoSlice.ts
@@ -182,7 +182,7 @@ const videoSlice = createSlice({
   // For Async Requests
   extraReducers: builder => {
     builder.addCase(
-      fetchVideoInformation.pending, (state, action) => {
+      fetchVideoInformation.pending, (state, _action) => {
         state.status = 'loading'
       })
     builder.addCase(
diff --git a/src/redux/workflowPostAndProcessSlice.ts b/src/redux/workflowPostAndProcessSlice.ts
index 4b6793fcd..68524b09b 100644
--- a/src/redux/workflowPostAndProcessSlice.ts
+++ b/src/redux/workflowPostAndProcessSlice.ts
@@ -33,11 +33,11 @@ const workflowPostAndProcessSlice = createSlice({
   },
   extraReducers: builder => {
     builder.addCase(
-      postVideoInformationWithWorkflow.pending, (state, action) => {
+      postVideoInformationWithWorkflow.pending, (state, _action) => {
         state.status = 'loading'
       })
     builder.addCase(
-      postVideoInformationWithWorkflow.fulfilled, (state, action) => {
+      postVideoInformationWithWorkflow.fulfilled, (state, _action) => {
         state.status = 'success'
       })
     builder.addCase(
diff --git a/src/redux/workflowPostSlice.ts b/src/redux/workflowPostSlice.ts
index 84f45d59d..70c86f5b4 100644
--- a/src/redux/workflowPostSlice.ts
+++ b/src/redux/workflowPostSlice.ts
@@ -34,11 +34,11 @@ const workflowPostSlice = createSlice({
   },
   extraReducers: builder => {
     builder.addCase(
-      postVideoInformation.pending, (state, action) => {
+      postVideoInformation.pending, (state, _action) => {
         state.status = 'loading'
       })
     builder.addCase(
-      postVideoInformation.fulfilled, (state, action) => {
+      postVideoInformation.fulfilled, (state, _action) => {
         state.status = 'success'
       })
     builder.addCase(
diff --git a/src/util/utilityFunctions.ts b/src/util/utilityFunctions.ts
index 4ce362010..ba58d0804 100644
--- a/src/util/utilityFunctions.ts
+++ b/src/util/utilityFunctions.ts
@@ -9,7 +9,7 @@ export const roundToDecimalPlace = (num: number, decimalPlace: number) => {
 
 
 // Returns a promise that resolves after `ms` milliseconds.
-export const sleep = (ms: number) => new Promise((resolve, reject) => setTimeout(resolve, ms));
+export const sleep = (ms: number) => new Promise((resolve, _reject) => setTimeout(resolve, ms));
 
 
 // Get an understandable time string for ARIA

From f4095d001077fa974738bf5bf8eb6f3d73640bbd Mon Sep 17 00:00:00 2001
From: Lukas Kalbertodt <lukas.kalbertodt@gmail.com>
Date: Tue, 13 Jun 2023 12:13:22 +0200
Subject: [PATCH 41/47] Fix ESLint warnings in `test/*`

---
 tests/metadata.test.ts   | 162 ++++++++++++++++++++-------------------
 tests/navigation.test.ts |  20 ++---
 2 files changed, 92 insertions(+), 90 deletions(-)

diff --git a/tests/metadata.test.ts b/tests/metadata.test.ts
index 12c9cb5c8..6db9cfdd2 100644
--- a/tests/metadata.test.ts
+++ b/tests/metadata.test.ts
@@ -1,92 +1,94 @@
 import { test, expect } from '@playwright/test';
 
 test.beforeEach(async ({ page, baseURL }) => {
-    await page.goto(baseURL);
-    await page.click('li[role="menuitem"]:has-text("Metadata")');
+  await page.goto(baseURL);
+  await page.click('li[role="menuitem"]:has-text("Metadata")');
 });
 
 test.describe('Test Metadata-Page', () => {
 
-    // checks if fields contains their dummy-data
-    test('Check Inputfields', async ({ page }) => {
-
-        for(let i = 0; i < input.length; i++) {
-            const locator = page.locator('input[name="catalog0.' + input[i] + '"]');
-            await expect(locator).toHaveValue(iValue[i]);
-            await page.click('input[name="catalog0.' + input[i] + '"]');
-            await page.fill('input[name="catalog0.' + input[i] + '"]', iFill[i]);
-        }
-        for(let i = 0; i < dropdown.length; i++) {
-            const locator = page.locator('input[name="catalog0.' + dropdown[i] + '"]');
-            await expect(locator).toHaveValue(dValue[i]);
-        }
-    });
-
-    test('Check other fields', async ({ page }) => {
-
-        // different syntax and or not editable
-        const description = page.locator('textarea[name="catalog0.description"]');
-        await expect(description).toHaveValue('');
-        await page.click('textarea[name="catalog0.description"]');
-        await page.fill('textarea[name="catalog0.description"]', 'Test-Description');
-
-        const startDate = page.locator('input[name="startDate"]');
-        await expect(startDate).toHaveValue(/[0-9]/);
-
-        const created = page.locator('input[name="created"]');
-        await expect(created).toHaveValue(/[0-9]/);
-
-        const publisher = page.locator('input[name="catalog0.publisher"]');
-        await expect(publisher).toHaveValue('');
-
-        const identifier = page.locator('input[name="catalog0.identifier"]');
-        await expect(identifier).toHaveValue('ID-dual-stream-demo');
-
-    });
-
-    test('Check: Change Dropdown Value', async ({ page, browserName }) => {
-
-        // Language
-        await page.click('text=LanguageNo value >> :nth-match(svg, 2)');
-        await page.click('div[id*="option-22"]');
-
-        // License
-        await page.click('text=LicenseCC-BY-SA >> :nth-match(svg, 2)');
-        await page.click('div[id*="option-8"]');
-
-        // Series / isPartOf
-        await page.click('text=SeriesNo value >> :nth-match(svg, 2)');
-        await page.click('div[id*="option-4"]');
-
-        // Creator
-        await page.click('[id="catalog0.creator"] div div >> :nth-match(div, 4)');
-        await page.click('div[id*="option-15"]');
-        await page.click('[aria-label="Remove Lars Kiesow"]');
-
-        // Contributor
-        await page.click('text=Contributor(s)Select... >> svg');
-        await page.click('div[id*="option-15"]');
-
-        // startDate
-        // Expect date-time selector to pop up and hide again
-        // Headless Firefox is picked up as mobile and this test will not work.
-        // That's why we exclude it:
-        //   https://github.com/microsoft/playwright/issues/7769
-        if (browserName != 'firefox') {
-          await page.click('div[data-testid="startDate"] >> button');
-          await expect(page.locator('div.MuiPaper-root').first()).toBeVisible();
-          await page.click('div[data-testid="startDate"] >> input');
-          await expect(page.locator('div.MuiPaper-root').first()).toBeHidden();
-        }
-
-    });
+  // checks if fields contains their dummy-data
+  test('Check Inputfields', async ({ page }) => {
+
+    for (let i = 0; i < input.length; i++) {
+      const locator = page.locator('input[name="catalog0.' + input[i] + '"]');
+      await expect(locator).toHaveValue(iValue[i]);
+      await page.click('input[name="catalog0.' + input[i] + '"]');
+      await page.fill('input[name="catalog0.' + input[i] + '"]', iFill[i]);
+    }
+    for (let i = 0; i < dropdown.length; i++) {
+      const locator = page.locator('input[name="catalog0.' + dropdown[i] + '"]');
+      await expect(locator).toHaveValue(dValue[i]);
+    }
+  });
+
+  test('Check other fields', async ({ page }) => {
+
+    // different syntax and or not editable
+    const description = page.locator('textarea[name="catalog0.description"]');
+    await expect(description).toHaveValue('');
+    await page.click('textarea[name="catalog0.description"]');
+    await page.fill('textarea[name="catalog0.description"]', 'Test-Description');
+
+    const startDate = page.locator('input[name="startDate"]');
+    await expect(startDate).toHaveValue(/[0-9]/);
+
+    const created = page.locator('input[name="created"]');
+    await expect(created).toHaveValue(/[0-9]/);
+
+    const publisher = page.locator('input[name="catalog0.publisher"]');
+    await expect(publisher).toHaveValue('');
+
+    const identifier = page.locator('input[name="catalog0.identifier"]');
+    await expect(identifier).toHaveValue('ID-dual-stream-demo');
+
+  });
+
+  test('Check: Change Dropdown Value', async ({ page, browserName }) => {
+
+    // Language
+    await page.click('text=LanguageNo value >> :nth-match(svg, 2)');
+    await page.click('div[id*="option-22"]');
+
+    // License
+    await page.click('text=LicenseCC-BY-SA >> :nth-match(svg, 2)');
+    await page.click('div[id*="option-8"]');
+
+    // Series / isPartOf
+    await page.click('text=SeriesNo value >> :nth-match(svg, 2)');
+    await page.click('div[id*="option-4"]');
+
+    // Creator
+    await page.click('[id="catalog0.creator"] div div >> :nth-match(div, 4)');
+    await page.click('div[id*="option-15"]');
+    await page.click('[aria-label="Remove Lars Kiesow"]');
+
+    // Contributor
+    await page.click('text=Contributor(s)Select... >> svg');
+    await page.click('div[id*="option-15"]');
+
+    // startDate
+    // Expect date-time selector to pop up and hide again
+    // Headless Firefox is picked up as mobile and this test will not work.
+    // That's why we exclude it:
+    //   https://github.com/microsoft/playwright/issues/7769
+    if (browserName != 'firefox') {
+      /* eslint-disable jest/no-conditional-expect */
+      await page.click('div[data-testid="startDate"] >> button');
+      await expect(page.locator('div.MuiPaper-root').first()).toBeVisible();
+      await page.click('div[data-testid="startDate"] >> input');
+      await expect(page.locator('div.MuiPaper-root').first()).toBeHidden();
+      /* eslint-enable jest/no-conditional-expect */
+    }
+
+  });
 
 });
 
-var input = ['title', 'subject', 'rightsHolder', 'duration', 'location', 'source'];
-var iValue = ['Dual-Stream Demo', '', '', '00:00:00', '', ''];
-var iFill = ['Test-Title', 'Test-Subject', 'Test-Rights', '00:02:45', 'Test-Location', 'Test-Source'];
+const input = ['title', 'subject', 'rightsHolder', 'duration', 'location', 'source'];
+const iValue = ['Dual-Stream Demo', '', '', '00:00:00', '', ''];
+const iFill = ['Test-Title', 'Test-Subject', 'Test-Rights', '00:02:45', 'Test-Location', 'Test-Source'];
 
-var dropdown = ['language', 'license', 'isPartOf', 'creator', 'contributor'];
-var dValue = ['', '{\"label\":\"EVENTS.LICENSE.CCBYSA\", \"order\":3, \"selectable\": true}', '', 'Lars Kiesow', ''];
+const dropdown = ['language', 'license', 'isPartOf', 'creator', 'contributor'];
+const dValue = ['', '{"label":"EVENTS.LICENSE.CCBYSA", "order":3, "selectable": true}', '', 'Lars Kiesow', ''];
 
diff --git a/tests/navigation.test.ts b/tests/navigation.test.ts
index d6d9cbe76..45cf56fc9 100644
--- a/tests/navigation.test.ts
+++ b/tests/navigation.test.ts
@@ -2,17 +2,17 @@ import { test, expect } from '@playwright/test';
 
 test('Test: Navigation', async ({ page, baseURL }) => {
 
-    await page.goto(baseURL);
-    expect(page.url()).toBe(baseURL);
-    await expect(page).toHaveTitle("Opencast Editor");
+  await page.goto(baseURL);
+  expect(page.url()).toBe(baseURL);
+  await expect(page).toHaveTitle("Opencast Editor");
 
-    // checks if Navbar on left has 4 elements
-    const length = await page.locator('#root > div > div > nav > li').count();
-    expect(length >= 2).toBeTruthy();
+  // checks if Navbar on left has 4 elements
+  const length = await page.locator('#root > div > div > nav > li').count();
+  expect(length >= 2).toBeTruthy();
 
-    // Navigation to Finish
-    await page.click('li[role="menuitem"]:has-text("Finish")');
+  // Navigation to Finish
+  await page.click('li[role="menuitem"]:has-text("Finish")');
 
-    // Navigation to Cutting
-    await page.click('li[role="menuitem"]:has-text("Cutting")');
+  // Navigation to Cutting
+  await page.click('li[role="menuitem"]:has-text("Cutting")');
 });

From c05fdfe8ca3abdd06bc0efa0df8bb2c41f19b799 Mon Sep 17 00:00:00 2001
From: Lukas Kalbertodt <lukas.kalbertodt@gmail.com>
Date: Tue, 13 Jun 2023 12:18:45 +0200
Subject: [PATCH 42/47] Fix lint warnings by replacing `var` with `let` or
 `const`

---
 src/config.ts                 | 10 +++++-----
 src/main/FinishMenu.tsx       |  2 +-
 src/main/KeyboardControls.tsx |  2 +-
 src/main/Metadata.tsx         |  2 +-
 src/main/Thumbnail.tsx        |  2 +-
 src/main/Timeline.tsx         |  6 +++---
 src/main/Video.tsx            |  4 ++--
 src/util/utilityFunctions.ts  |  2 +-
 8 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/config.ts b/src/config.ts
index 1acf4eade..4c5b3c9ae 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -67,7 +67,7 @@ interface iSettings {
  * urlParameterSettings: contains values from GET parameters
  * settings: contains the combined values from all other setting objects
  */
-var defaultSettings: iSettings = {
+const defaultSettings: iSettings = {
   id: undefined,
   opencast: {
     url: window.location.origin,
@@ -94,9 +94,9 @@ var defaultSettings: iSettings = {
     defaultVideoFlavor: undefined,
   }
 }
-var configFileSettings: iSettings
-var urlParameterSettings: iSettings
-export var settings: iSettings
+let configFileSettings: iSettings
+let urlParameterSettings: iSettings
+export let settings: iSettings
 
 /**
  * Entry point. Loads values from settings into the exported variables
@@ -112,7 +112,7 @@ export const init = async () => {
   })
 
   // Get settings from URL query.
-  var urlParams = new URLSearchParams(window.location.search);
+  const urlParams = new URLSearchParams(window.location.search);
 
   const rawUrlSettings = {};
   urlParams.forEach((value, key) => {
diff --git a/src/main/FinishMenu.tsx b/src/main/FinishMenu.tsx
index 4b70ed60c..e51ea88d6 100644
--- a/src/main/FinishMenu.tsx
+++ b/src/main/FinishMenu.tsx
@@ -50,7 +50,7 @@ const FinishMenuButton: React.FC<{iconName: IconDefinition, stateName: finish["v
     dispatch(setPageNumber(1))
   }
 
-  var buttonString;
+  let buttonString;
   switch (stateName) {
     case "Save changes":
       buttonString = t("finishMenu.save-button");
diff --git a/src/main/KeyboardControls.tsx b/src/main/KeyboardControls.tsx
index dcc1ea546..1399a819e 100644
--- a/src/main/KeyboardControls.tsx
+++ b/src/main/KeyboardControls.tsx
@@ -118,7 +118,7 @@ const KeyboardControls: React.FC = () => {
   const render = () => {
     if (keyMap && Object.keys(keyMap).length > 0) {
 
-      var obj: Record<string, Array<KeyMapDisplayOptions>> = {}
+      const obj: Record<string, Array<KeyMapDisplayOptions>> = {}
       obj[t("keyboardControls.defaultGroupName")] = []    // For keys without a group
 
       // Sort by group
diff --git a/src/main/Metadata.tsx b/src/main/Metadata.tsx
index 831a79d6c..b0f43e382 100644
--- a/src/main/Metadata.tsx
+++ b/src/main/Metadata.tsx
@@ -609,7 +609,7 @@ const Metadata: React.FC = () => {
      */
     const generateComponentWithModifiedInput = (field: MetadataField, input: FieldInputProps<any, HTMLElement>) => {
       if ((field.type === "date" || field.type === "time") && input.value === "") {
-        var {value, ...other} = input
+        const {value, ...other} = input
         return generateComponent(field, other)
       } else {
         return generateComponent(field, input)
diff --git a/src/main/Thumbnail.tsx b/src/main/Thumbnail.tsx
index c8b54bdba..4c703aaf8 100644
--- a/src/main/Thumbnail.tsx
+++ b/src/main/Thumbnail.tsx
@@ -63,7 +63,7 @@ const Thumbnail : React.FC = () => {
       return
     }
 
-    var reader = new FileReader();
+    const reader = new FileReader();
     reader.onload = e => {
       // the result image data
       if (e.target && e.target.result) {
diff --git a/src/main/Timeline.tsx b/src/main/Timeline.tsx
index 87eb7ab3d..6ed81d1c3 100644
--- a/src/main/Timeline.tsx
+++ b/src/main/Timeline.tsx
@@ -418,13 +418,13 @@ export const Waveforms: React.FC<{timelineHeight: number}> = ({timelineHeight})
 
       onlyOneURL.forEach((videoURL, _index, array) => {
         // Set up blob request
-        var blob = null
-        var xhr = new XMLHttpRequest()
+        let blob = null
+        const xhr = new XMLHttpRequest()
         xhr.open("GET", videoURL)
         xhr.responseType = "blob"
         xhr.onload = () => {
           blob = xhr.response
-          var file = new File([blob], blob)
+          const file = new File([blob], blob)
 
           // Start waveform worker with blob
           const waveformWorker : any = new Waveform({type: 'img', width: '2000', height: '230', samples: 100000, media: file})
diff --git a/src/main/Video.tsx b/src/main/Video.tsx
index 5be7dde03..a73a3bf04 100644
--- a/src/main/Video.tsx
+++ b/src/main/Video.tsx
@@ -374,10 +374,10 @@ export const VideoPlayer = React.forwardRef(
     // Returns the data url
       captureVideo() {
         const video = ref.current?.getInternalPlayer() as HTMLVideoElement
-        var canvas = document.createElement("canvas");
+        const canvas = document.createElement("canvas");
         canvas.width = video.videoWidth;
         canvas.height = video.videoHeight;
-        var canvasContext = canvas.getContext("2d");
+        const canvasContext = canvas.getContext("2d");
         if (canvasContext !== null) {
           canvasContext.drawImage(video, 0, 0);
           return canvas.toDataURL('image/png')
diff --git a/src/util/utilityFunctions.ts b/src/util/utilityFunctions.ts
index ba58d0804..1bd3e7a89 100644
--- a/src/util/utilityFunctions.ts
+++ b/src/util/utilityFunctions.ts
@@ -43,7 +43,7 @@ export function safeJsonParse(str : string) {
  * Currently, this cannot be checked with "@support", so we use this workaround
  * instead.
  */
-var flexGapIsSupported: boolean | undefined;
+let flexGapIsSupported: boolean | undefined;
 export function checkFlexGapSupport() {
   // Use the cached value if it has been defined
   if (flexGapIsSupported !== undefined) {

From bd649f39b0659c89feb462b9b40cc4f82f70cb7d Mon Sep 17 00:00:00 2001
From: Lukas Kalbertodt <lukas.kalbertodt@gmail.com>
Date: Tue, 13 Jun 2023 12:22:02 +0200
Subject: [PATCH 43/47] Fix a few more lint warnings

---
 playwright.config.ts   | 6 ++++--
 src/main/Metadata.tsx  | 2 +-
 src/react-app-env.d.ts | 1 +
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/playwright.config.ts b/playwright.config.ts
index 83231e3c0..7f5bb61f1 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -2,8 +2,10 @@ import { PlaywrightTestConfig, devices } from '@playwright/test';
 
 const config: PlaywrightTestConfig = {
 
-  reporter: [ [process.env.CI ? 'github' : 'list',],
-            ['html', { outputFolder: 'playwright-report' }]],
+  reporter: [
+    [process.env.CI ? 'github' : 'list'],
+    ['html', { outputFolder: 'playwright-report' }],
+  ],
   testIgnore: '**/redux/**',
   retries: 1,
   timeout: 60 * 1000,
diff --git a/src/main/Metadata.tsx b/src/main/Metadata.tsx
index b0f43e382..feb6207f9 100644
--- a/src/main/Metadata.tsx
+++ b/src/main/Metadata.tsx
@@ -301,7 +301,7 @@ const Metadata: React.FC = () => {
     if (Object.prototype.toString.call(date) === '[object Date]') {
       dt = LuxonDateTime.fromJSDate(date);
     }
-    if (typeof(date) === 'string') {
+    if (typeof date === 'string') {
       dt = LuxonDateTime.fromISO(date);
     }
 
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
index 6431bc5fc..6a940fb56 100644
--- a/src/react-app-env.d.ts
+++ b/src/react-app-env.d.ts
@@ -1 +1,2 @@
+/* eslint-disable spaced-comment */
 /// <reference types="react-scripts" />

From fe262bdc6fb0de8686096349a1b51ef9485d363a Mon Sep 17 00:00:00 2001
From: Lukas Kalbertodt <lukas.kalbertodt@gmail.com>
Date: Tue, 13 Jun 2023 12:36:30 +0200
Subject: [PATCH 44/47] Ignore two remaining eslint warnings

---
 src/i18n/config.tsx | 1 +
 src/main/Video.tsx  | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/i18n/config.tsx b/src/i18n/config.tsx
index bbb5534ef..ec1b22437 100644
--- a/src/i18n/config.tsx
+++ b/src/i18n/config.tsx
@@ -11,6 +11,7 @@ for (const lang of locales) {
   const code = lang.replace(/\..*$/, '');
   const short = code.replace(/-.*$/, '');
   const main = locales.filter(l => l.indexOf(short) === 0).length === 1
+  /* eslint-disable-next-line @typescript-eslint/no-var-requires */
   const translations = require('./locales/' + lang);
   if (!main) {
     resources[code] = { translation: translations };
diff --git a/src/main/Video.tsx b/src/main/Video.tsx
index a73a3bf04..161f4ce10 100644
--- a/src/main/Video.tsx
+++ b/src/main/Video.tsx
@@ -297,8 +297,9 @@ export const VideoPlayer = React.forwardRef(
 
     // Trigger a workaround for subtitles not being displayed in the video in Firefox
     useEffect(() => {
-    // Only trigger workaround in Firefox, as it will cause issues in Chrome
-    // @ts-ignore
+      // Only trigger workaround in Firefox, as it will cause issues in Chrome
+      /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+      // @ts-ignore
       if (typeof InstallTrigger !== 'undefined') {
         reAddTrack()
       }

From 7fd6286ee145749a8e41097b69f8d2551b70fc2e Mon Sep 17 00:00:00 2001
From: Lukas Kalbertodt <lukas.kalbertodt@gmail.com>
Date: Tue, 13 Jun 2023 13:09:37 +0200
Subject: [PATCH 45/47] Ignore some `camelcase` lints for API results

---
 src/redux/__tests__/videoSlice.test.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/redux/__tests__/videoSlice.test.ts b/src/redux/__tests__/videoSlice.test.ts
index d6b9d416c..2ac8be4db 100644
--- a/src/redux/__tests__/videoSlice.test.ts
+++ b/src/redux/__tests__/videoSlice.test.ts
@@ -306,8 +306,10 @@ describe('Video reducer', () => {
     // const presenters: video["presenters"] = [ "Otto Opencast" ]    // Currently missing from the API
     const tracks: video["tracks"] = [{
       id: "id", uri: videoURLs[0], flavor: { subtype: "prepared", type: "presenter"},
+      /* eslint-disable camelcase */
       video_stream: { available: true, enabled: true, thumbnail_uri: "thumb/url"},
       audio_stream: { available: true, enabled: true, thumbnail_uri: "thumb/url"},
+      /* eslint-enable camelcase */
       thumbnailUri: undefined,
       thumbnailPriority: 0,
     }]

From 60f5b5c8440227a54c4f8bb897fc0176c39d4972 Mon Sep 17 00:00:00 2001
From: Lukas Kalbertodt <lukas.kalbertodt@gmail.com>
Date: Mon, 12 Jun 2023 09:13:00 +0200
Subject: [PATCH 46/47] Use shared ESLint config and override some rules

This project has a different code style than the shared config in a few
aspects. That's no problem, that's what overrides are for. Even with
those, we benefit a lot from having a shared base. For some of those
overrides, it might be beneficial to remove those (and fix the warnings)
in the future.
---
 .eslintrc.js      |  48 ++++++
 package-lock.json | 411 ++++++++++++++++++++++++++++++++++------------
 package.json      |   9 +-
 3 files changed, 356 insertions(+), 112 deletions(-)
 create mode 100644 .eslintrc.js

diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 000000000..7d731061c
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,48 @@
+module.exports = {
+  extends: [
+    "@opencast/eslint-config-ts-react",
+    "react-app/jest"
+  ],
+  rules: {
+    // Semicolon usage is inconsistent right now. Both, "always" and "never",
+    // result in a significant number of warnings.
+    "semi": "off",
+
+    // Both kinds of quotes are used a lot
+    "quotes": "off",
+
+    // "always" gives 319 warning, "never" gives 991.
+    "object-curly-spacing": "off",
+
+    // Many multiline lists do not have a trailing comma right now
+    "comma-dangle": ["warn", "only-multiline"],
+
+    // Currently there are quite a lot of lines longer than 120 chars (85 ones).
+    // And 34 even longer than 140 chars.
+    "max-len": "off",
+
+    // Currently 120 warnings.
+    "@typescript-eslint/no-explicit-any": "off",
+
+    // `else` in new line is used often, and often an `if` condition is on the
+    // same line as `{`.
+    "brace-style": "off",
+
+    // A few of those are used.
+    "@typescript-eslint/no-non-null-assertion": "off",
+  },
+  overrides: [
+    {
+      files: ["./*.js"],
+      env: {
+        node: true,
+      },
+    },
+    {
+      files: ["./*.ts", "tests/**"],
+      parserOptions: {
+        project: false,
+      },
+    },
+  ],
+};
diff --git a/package-lock.json b/package-lock.json
index e81597f67..9d6489fbc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,8 @@
         "customize-cra": "^1.0.0",
         "deepmerge": "^4.3.1",
         "emotion-normalize": "^11.0.1",
+        "eslint-plugin-react": "^7.32.2",
+        "eslint-plugin-react-hooks": "^4.6.0",
         "final-form": "^4.20.9",
         "i18next": "^22.5.0",
         "i18next-browser-languagedetector": "^7.0.2",
@@ -56,6 +58,7 @@
         "webvtt-parser": "^2.2.0"
       },
       "devDependencies": {
+        "@opencast/eslint-config-ts-react": "^0.1.0",
         "@playwright/test": "^1.34.3",
         "@types/lodash": "^4.14.195",
         "@types/luxon": "^3.3.0",
@@ -67,6 +70,21 @@
         "use-resize-observer": "^9.1.0"
       }
     },
+    "../elan-eslint-config": {
+      "name": "@opencast/eslint-config-ts-react",
+      "version": "0.1.0",
+      "extraneous": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/parser": "^5.59.9"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/eslint-plugin": ">= 5",
+        "eslint": ">= 8",
+        "eslint-plugin-react": ">= 7",
+        "eslint-plugin-react-hooks": ">= 4"
+      }
+    },
     "node_modules/@adobe/css-tools": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.0.1.tgz",
@@ -4301,6 +4319,21 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@opencast/eslint-config-ts-react": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@opencast/eslint-config-ts-react/-/eslint-config-ts-react-0.1.0.tgz",
+      "integrity": "sha512-+GTSxMUZQvT13Noe1+4X3s0hHc9cNxMAXWNYqlDGQ2tO7ygvk1+w7a/HhpRGeDeQxk7EahCn36Z/2stKGVlnPw==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/parser": "^5.59.9"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/eslint-plugin": ">= 5",
+        "eslint": ">= 8",
+        "eslint-plugin-react": ">= 7",
+        "eslint-plugin-react-hooks": ">= 4"
+      }
+    },
     "node_modules/@playwright/test": {
       "version": "1.34.3",
       "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.34.3.tgz",
@@ -5338,13 +5371,13 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "5.40.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.40.0.tgz",
-      "integrity": "sha512-Ah5gqyX2ySkiuYeOIDg7ap51/b63QgWZA7w6AHtFrag7aH0lRQPbLzUjk0c9o5/KZ6JRkTTDKShL4AUrQa6/hw==",
+      "version": "5.59.11",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.59.11.tgz",
+      "integrity": "sha512-s9ZF3M+Nym6CAZEkJJeO2TFHHDsKAM3ecNkLuH4i4s8/RCPnF5JRip2GyviYkeEAcwGMJxkqG9h2dAsnA1nZpA==",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.40.0",
-        "@typescript-eslint/types": "5.40.0",
-        "@typescript-eslint/typescript-estree": "5.40.0",
+        "@typescript-eslint/scope-manager": "5.59.11",
+        "@typescript-eslint/types": "5.59.11",
+        "@typescript-eslint/typescript-estree": "5.59.11",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -5363,6 +5396,90 @@
         }
       }
     },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/scope-manager": {
+      "version": "5.59.11",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.59.11.tgz",
+      "integrity": "sha512-dHFOsxoLFtrIcSj5h0QoBT/89hxQONwmn3FOQ0GOQcLOOXm+MIrS8zEAhs4tWl5MraxCY3ZJpaXQQdFMc2Tu+Q==",
+      "dependencies": {
+        "@typescript-eslint/types": "5.59.11",
+        "@typescript-eslint/visitor-keys": "5.59.11"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/types": {
+      "version": "5.59.11",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.59.11.tgz",
+      "integrity": "sha512-epoN6R6tkvBYSc+cllrz+c2sOFWkbisJZWkOE+y3xHtvYaOE6Wk6B8e114McRJwFRjGvYdJwLXQH5c9osME/AA==",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/typescript-estree": {
+      "version": "5.59.11",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.11.tgz",
+      "integrity": "sha512-YupOpot5hJO0maupJXixi6l5ETdrITxeo5eBOeuV7RSKgYdU3G5cxO49/9WRnJq9EMrB7AuTSLH/bqOsXi7wPA==",
+      "dependencies": {
+        "@typescript-eslint/types": "5.59.11",
+        "@typescript-eslint/visitor-keys": "5.59.11",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "semver": "^7.3.7",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/visitor-keys": {
+      "version": "5.59.11",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.11.tgz",
+      "integrity": "sha512-KGYniTGG3AMTuKF9QBD7EIrvufkB6O6uX3knP73xbKLMpH+QRPcgnCxjWXSHjMRuOxFLovljqQgQpR0c7GvjoA==",
+      "dependencies": {
+        "@typescript-eslint/types": "5.59.11",
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/semver": {
+      "version": "7.5.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
+      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@typescript-eslint/scope-manager": {
       "version": "5.40.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.40.0.tgz",
@@ -5938,14 +6055,14 @@
       "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ=="
     },
     "node_modules/array-includes": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.5.tgz",
-      "integrity": "sha512-iSDYZMMyTPkiFasVqfuAQnWAYcvO/SeBSCGKePoEthjp4LEMTe4uLc7b025o4jAZpHhihh8xPo99TNWUWWkGDQ==",
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.6.tgz",
+      "integrity": "sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw==",
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
-        "es-abstract": "^1.19.5",
-        "get-intrinsic": "^1.1.1",
+        "es-abstract": "^1.20.4",
+        "get-intrinsic": "^1.1.3",
         "is-string": "^1.0.7"
       },
       "engines": {
@@ -5981,13 +6098,13 @@
       }
     },
     "node_modules/array.prototype.flatmap": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.0.tgz",
-      "integrity": "sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.1.tgz",
+      "integrity": "sha512-8UGn9O1FDVvMNB0UlLv4voxRMze7+FpHyF5mSMRjWHUMlpoDViniy05870VlxhfgTnLbpuwTzvD76MTtWxB/mQ==",
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4",
         "es-shim-unscopables": "^1.0.0"
       },
       "engines": {
@@ -6015,6 +6132,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/array.prototype.tosorted": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.1.tgz",
+      "integrity": "sha512-pZYPXPRl2PqWcsUs6LOMn+1f1532nEoPTYowBtqLwAW+W8vSVhkIGnmOX1t/UQjD6YGI0vcD2B1U7ZFGQH9jnQ==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4",
+        "es-shim-unscopables": "^1.0.0",
+        "get-intrinsic": "^1.1.3"
+      }
+    },
     "node_modules/asap": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
@@ -8367,24 +8496,25 @@
       }
     },
     "node_modules/eslint-plugin-react": {
-      "version": "7.31.10",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.31.10.tgz",
-      "integrity": "sha512-e4N/nc6AAlg4UKW/mXeYWd3R++qUano5/o+t+wnWxIf+bLsOaH3a4q74kX3nDjYym3VBN4HyO9nEn1GcAqgQOA==",
+      "version": "7.32.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz",
+      "integrity": "sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg==",
       "dependencies": {
-        "array-includes": "^3.1.5",
-        "array.prototype.flatmap": "^1.3.0",
+        "array-includes": "^3.1.6",
+        "array.prototype.flatmap": "^1.3.1",
+        "array.prototype.tosorted": "^1.1.1",
         "doctrine": "^2.1.0",
         "estraverse": "^5.3.0",
         "jsx-ast-utils": "^2.4.1 || ^3.0.0",
         "minimatch": "^3.1.2",
-        "object.entries": "^1.1.5",
-        "object.fromentries": "^2.0.5",
-        "object.hasown": "^1.1.1",
-        "object.values": "^1.1.5",
+        "object.entries": "^1.1.6",
+        "object.fromentries": "^2.0.6",
+        "object.hasown": "^1.1.2",
+        "object.values": "^1.1.6",
         "prop-types": "^15.8.1",
-        "resolve": "^2.0.0-next.3",
+        "resolve": "^2.0.0-next.4",
         "semver": "^6.3.0",
-        "string.prototype.matchall": "^4.0.7"
+        "string.prototype.matchall": "^4.0.8"
       },
       "engines": {
         "node": ">=4"
@@ -14606,26 +14736,26 @@
       }
     },
     "node_modules/object.entries": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.5.tgz",
-      "integrity": "sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==",
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.6.tgz",
+      "integrity": "sha512-leTPzo4Zvg3pmbQ3rDK69Rl8GQvIqMWubrkxONG9/ojtFE2rD9fjMKfSI5BxW3osRH1m6VdzmqK8oAY9aT4x5w==",
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.1"
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4"
       },
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/object.fromentries": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.5.tgz",
-      "integrity": "sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==",
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.6.tgz",
+      "integrity": "sha512-VciD13dswC4j1Xt5394WR4MzmAQmlgN72phd/riNp9vtD7tp4QQWJ0R4wvclXcafgcYK8veHRed2W6XeGBvcfg==",
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.1"
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4"
       },
       "engines": {
         "node": ">= 0.4"
@@ -14652,25 +14782,25 @@
       }
     },
     "node_modules/object.hasown": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.1.tgz",
-      "integrity": "sha512-LYLe4tivNQzq4JdaWW6WO3HMZZJWzkkH8fnI6EebWl0VZth2wL2Lovm74ep2/gZzlaTdV62JZHEqHQ2yVn8Q/A==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.2.tgz",
+      "integrity": "sha512-B5UIT3J1W+WuWIU55h0mjlwaqxiE5vYENJXIXZ4VFe05pNYrkKuK0U/6aFcb0pKywYJh7IhfoqUfKVmrJJHZHw==",
       "dependencies": {
         "define-properties": "^1.1.4",
-        "es-abstract": "^1.19.5"
+        "es-abstract": "^1.20.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/object.values": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.5.tgz",
-      "integrity": "sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==",
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.6.tgz",
+      "integrity": "sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw==",
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.1"
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4"
       },
       "engines": {
         "node": ">= 0.4"
@@ -18016,17 +18146,17 @@
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
     "node_modules/string.prototype.matchall": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz",
-      "integrity": "sha512-f48okCX7JiwVi1NXCVWcFnZgADDC/n2vePlQ/KUCNqCikLLilQvwjMO8+BHVKvgzH0JB0J9LEPgxOGT02RoETg==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.8.tgz",
+      "integrity": "sha512-6zOCOcJ+RJAQshcTvXPHoxoQGONa3e/Lqx90wUA+wEzX78sg5Bo+1tQo4N0pohS0erG9qtCqJDjNCQBjeWVxyg==",
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.1",
-        "get-intrinsic": "^1.1.1",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4",
+        "get-intrinsic": "^1.1.3",
         "has-symbols": "^1.0.3",
         "internal-slot": "^1.0.3",
-        "regexp.prototype.flags": "^1.4.1",
+        "regexp.prototype.flags": "^1.4.3",
         "side-channel": "^1.0.4"
       },
       "funding": {
@@ -22797,6 +22927,15 @@
         "fastq": "^1.6.0"
       }
     },
+    "@opencast/eslint-config-ts-react": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@opencast/eslint-config-ts-react/-/eslint-config-ts-react-0.1.0.tgz",
+      "integrity": "sha512-+GTSxMUZQvT13Noe1+4X3s0hHc9cNxMAXWNYqlDGQ2tO7ygvk1+w7a/HhpRGeDeQxk7EahCn36Z/2stKGVlnPw==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/parser": "^5.59.9"
+      }
+    },
     "@playwright/test": {
       "version": "1.34.3",
       "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.34.3.tgz",
@@ -23586,14 +23725,61 @@
       }
     },
     "@typescript-eslint/parser": {
-      "version": "5.40.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.40.0.tgz",
-      "integrity": "sha512-Ah5gqyX2ySkiuYeOIDg7ap51/b63QgWZA7w6AHtFrag7aH0lRQPbLzUjk0c9o5/KZ6JRkTTDKShL4AUrQa6/hw==",
+      "version": "5.59.11",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.59.11.tgz",
+      "integrity": "sha512-s9ZF3M+Nym6CAZEkJJeO2TFHHDsKAM3ecNkLuH4i4s8/RCPnF5JRip2GyviYkeEAcwGMJxkqG9h2dAsnA1nZpA==",
       "requires": {
-        "@typescript-eslint/scope-manager": "5.40.0",
-        "@typescript-eslint/types": "5.40.0",
-        "@typescript-eslint/typescript-estree": "5.40.0",
+        "@typescript-eslint/scope-manager": "5.59.11",
+        "@typescript-eslint/types": "5.59.11",
+        "@typescript-eslint/typescript-estree": "5.59.11",
         "debug": "^4.3.4"
+      },
+      "dependencies": {
+        "@typescript-eslint/scope-manager": {
+          "version": "5.59.11",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.59.11.tgz",
+          "integrity": "sha512-dHFOsxoLFtrIcSj5h0QoBT/89hxQONwmn3FOQ0GOQcLOOXm+MIrS8zEAhs4tWl5MraxCY3ZJpaXQQdFMc2Tu+Q==",
+          "requires": {
+            "@typescript-eslint/types": "5.59.11",
+            "@typescript-eslint/visitor-keys": "5.59.11"
+          }
+        },
+        "@typescript-eslint/types": {
+          "version": "5.59.11",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.59.11.tgz",
+          "integrity": "sha512-epoN6R6tkvBYSc+cllrz+c2sOFWkbisJZWkOE+y3xHtvYaOE6Wk6B8e114McRJwFRjGvYdJwLXQH5c9osME/AA=="
+        },
+        "@typescript-eslint/typescript-estree": {
+          "version": "5.59.11",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.11.tgz",
+          "integrity": "sha512-YupOpot5hJO0maupJXixi6l5ETdrITxeo5eBOeuV7RSKgYdU3G5cxO49/9WRnJq9EMrB7AuTSLH/bqOsXi7wPA==",
+          "requires": {
+            "@typescript-eslint/types": "5.59.11",
+            "@typescript-eslint/visitor-keys": "5.59.11",
+            "debug": "^4.3.4",
+            "globby": "^11.1.0",
+            "is-glob": "^4.0.3",
+            "semver": "^7.3.7",
+            "tsutils": "^3.21.0"
+          }
+        },
+        "@typescript-eslint/visitor-keys": {
+          "version": "5.59.11",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.11.tgz",
+          "integrity": "sha512-KGYniTGG3AMTuKF9QBD7EIrvufkB6O6uX3knP73xbKLMpH+QRPcgnCxjWXSHjMRuOxFLovljqQgQpR0c7GvjoA==",
+          "requires": {
+            "@typescript-eslint/types": "5.59.11",
+            "eslint-visitor-keys": "^3.3.0"
+          }
+        },
+        "semver": {
+          "version": "7.5.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
+          "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        }
       }
     },
     "@typescript-eslint/scope-manager": {
@@ -24026,14 +24212,14 @@
       "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ=="
     },
     "array-includes": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.5.tgz",
-      "integrity": "sha512-iSDYZMMyTPkiFasVqfuAQnWAYcvO/SeBSCGKePoEthjp4LEMTe4uLc7b025o4jAZpHhihh8xPo99TNWUWWkGDQ==",
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.6.tgz",
+      "integrity": "sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw==",
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
-        "es-abstract": "^1.19.5",
-        "get-intrinsic": "^1.1.1",
+        "es-abstract": "^1.20.4",
+        "get-intrinsic": "^1.1.3",
         "is-string": "^1.0.7"
       }
     },
@@ -24054,13 +24240,13 @@
       }
     },
     "array.prototype.flatmap": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.0.tgz",
-      "integrity": "sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.1.tgz",
+      "integrity": "sha512-8UGn9O1FDVvMNB0UlLv4voxRMze7+FpHyF5mSMRjWHUMlpoDViniy05870VlxhfgTnLbpuwTzvD76MTtWxB/mQ==",
       "requires": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4",
         "es-shim-unscopables": "^1.0.0"
       }
     },
@@ -24076,6 +24262,18 @@
         "is-string": "^1.0.7"
       }
     },
+    "array.prototype.tosorted": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.1.tgz",
+      "integrity": "sha512-pZYPXPRl2PqWcsUs6LOMn+1f1532nEoPTYowBtqLwAW+W8vSVhkIGnmOX1t/UQjD6YGI0vcD2B1U7ZFGQH9jnQ==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4",
+        "es-shim-unscopables": "^1.0.0",
+        "get-intrinsic": "^1.1.3"
+      }
+    },
     "asap": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
@@ -25889,24 +26087,25 @@
       }
     },
     "eslint-plugin-react": {
-      "version": "7.31.10",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.31.10.tgz",
-      "integrity": "sha512-e4N/nc6AAlg4UKW/mXeYWd3R++qUano5/o+t+wnWxIf+bLsOaH3a4q74kX3nDjYym3VBN4HyO9nEn1GcAqgQOA==",
+      "version": "7.32.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz",
+      "integrity": "sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg==",
       "requires": {
-        "array-includes": "^3.1.5",
-        "array.prototype.flatmap": "^1.3.0",
+        "array-includes": "^3.1.6",
+        "array.prototype.flatmap": "^1.3.1",
+        "array.prototype.tosorted": "^1.1.1",
         "doctrine": "^2.1.0",
         "estraverse": "^5.3.0",
         "jsx-ast-utils": "^2.4.1 || ^3.0.0",
         "minimatch": "^3.1.2",
-        "object.entries": "^1.1.5",
-        "object.fromentries": "^2.0.5",
-        "object.hasown": "^1.1.1",
-        "object.values": "^1.1.5",
+        "object.entries": "^1.1.6",
+        "object.fromentries": "^2.0.6",
+        "object.hasown": "^1.1.2",
+        "object.values": "^1.1.6",
         "prop-types": "^15.8.1",
-        "resolve": "^2.0.0-next.3",
+        "resolve": "^2.0.0-next.4",
         "semver": "^6.3.0",
-        "string.prototype.matchall": "^4.0.7"
+        "string.prototype.matchall": "^4.0.8"
       },
       "dependencies": {
         "doctrine": {
@@ -30385,23 +30584,23 @@
       }
     },
     "object.entries": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.5.tgz",
-      "integrity": "sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==",
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.6.tgz",
+      "integrity": "sha512-leTPzo4Zvg3pmbQ3rDK69Rl8GQvIqMWubrkxONG9/ojtFE2rD9fjMKfSI5BxW3osRH1m6VdzmqK8oAY9aT4x5w==",
       "requires": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.1"
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4"
       }
     },
     "object.fromentries": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.5.tgz",
-      "integrity": "sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==",
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.6.tgz",
+      "integrity": "sha512-VciD13dswC4j1Xt5394WR4MzmAQmlgN72phd/riNp9vtD7tp4QQWJ0R4wvclXcafgcYK8veHRed2W6XeGBvcfg==",
       "requires": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.1"
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4"
       }
     },
     "object.getownpropertydescriptors": {
@@ -30416,22 +30615,22 @@
       }
     },
     "object.hasown": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.1.tgz",
-      "integrity": "sha512-LYLe4tivNQzq4JdaWW6WO3HMZZJWzkkH8fnI6EebWl0VZth2wL2Lovm74ep2/gZzlaTdV62JZHEqHQ2yVn8Q/A==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.2.tgz",
+      "integrity": "sha512-B5UIT3J1W+WuWIU55h0mjlwaqxiE5vYENJXIXZ4VFe05pNYrkKuK0U/6aFcb0pKywYJh7IhfoqUfKVmrJJHZHw==",
       "requires": {
         "define-properties": "^1.1.4",
-        "es-abstract": "^1.19.5"
+        "es-abstract": "^1.20.4"
       }
     },
     "object.values": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.5.tgz",
-      "integrity": "sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==",
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.6.tgz",
+      "integrity": "sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw==",
       "requires": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.1"
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4"
       }
     },
     "obuf": {
@@ -32680,17 +32879,17 @@
       }
     },
     "string.prototype.matchall": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz",
-      "integrity": "sha512-f48okCX7JiwVi1NXCVWcFnZgADDC/n2vePlQ/KUCNqCikLLilQvwjMO8+BHVKvgzH0JB0J9LEPgxOGT02RoETg==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.8.tgz",
+      "integrity": "sha512-6zOCOcJ+RJAQshcTvXPHoxoQGONa3e/Lqx90wUA+wEzX78sg5Bo+1tQo4N0pohS0erG9qtCqJDjNCQBjeWVxyg==",
       "requires": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.1",
-        "get-intrinsic": "^1.1.1",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4",
+        "get-intrinsic": "^1.1.3",
         "has-symbols": "^1.0.3",
         "internal-slot": "^1.0.3",
-        "regexp.prototype.flags": "^1.4.1",
+        "regexp.prototype.flags": "^1.4.3",
         "side-channel": "^1.0.4"
       }
     },
diff --git a/package.json b/package.json
index 7de5b4182..a58501f94 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,8 @@
     "customize-cra": "^1.0.0",
     "deepmerge": "^4.3.1",
     "emotion-normalize": "^11.0.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "final-form": "^4.20.9",
     "i18next": "^22.5.0",
     "i18next-browser-languagedetector": "^7.0.2",
@@ -58,12 +60,6 @@
     "test:debug": "react-scripts --inspect-brk test --runInBand --no-cache",
     "playtest": "npx playwright test --config=playwright.config.ts"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -77,6 +73,7 @@
     ]
   },
   "devDependencies": {
+    "@opencast/eslint-config-ts-react": "^0.1.0",
     "@playwright/test": "^1.34.3",
     "@types/lodash": "^4.14.195",
     "@types/luxon": "^3.3.0",

From 9e46141040e43c2e3f1cd234060f28554b922355 Mon Sep 17 00:00:00 2001
From: Crowdin Bot <crowdin-bot@editor.opencast.org>
Date: Mon, 19 Jun 2023 05:07:06 +0000
Subject: [PATCH 47/47] Automatically update translation keys

---
 src/i18n/locales/de-DE.json | 1 +
 src/i18n/locales/el-GR.json | 1 +
 src/i18n/locales/es-ES.json | 1 +
 src/i18n/locales/fr-FR.json | 1 +
 src/i18n/locales/nl-NL.json | 1 +
 src/i18n/locales/zh-CN.json | 1 +
 src/i18n/locales/zh-TW.json | 1 +
 7 files changed, 7 insertions(+)

diff --git a/src/i18n/locales/de-DE.json b/src/i18n/locales/de-DE.json
index 62b44fff6..25a5b861a 100644
--- a/src/i18n/locales/de-DE.json
+++ b/src/i18n/locales/de-DE.json
@@ -36,6 +36,7 @@
         "time-aria": "Aktuelle Zeit",
         "comError-text": "Bei der Kommunikation mit Opencast ist ein Problem aufgetreten.",
         "loadError-text": "Beim Laden des Videos ist ein Fehler aufgetreten.",
+        "durationError-text": "Opencast failed to provide the video duration.",
         "title-tooltip": "Videotitel",
         "presenter-tooltip": "Vortragende"
     },
diff --git a/src/i18n/locales/el-GR.json b/src/i18n/locales/el-GR.json
index 2122e48a8..5beabe311 100644
--- a/src/i18n/locales/el-GR.json
+++ b/src/i18n/locales/el-GR.json
@@ -36,6 +36,7 @@
         "time-aria": "Τρέχουσα ώρα",
         "comError-text": "Προέκυψε πρόβλημα κατά την επικοινωνία με το Opencast.",
         "loadError-text": "Παρουσιάστηκε σφάλμα κατά τηn φόρτωση του βίντεο.",
+        "durationError-text": "Opencast failed to provide the video duration.",
         "title-tooltip": "Τίτλος Βίντεο",
         "presenter-tooltip": "Παρουσιαστές Βίντεο"
     },
diff --git a/src/i18n/locales/es-ES.json b/src/i18n/locales/es-ES.json
index 85fe0b197..991303623 100644
--- a/src/i18n/locales/es-ES.json
+++ b/src/i18n/locales/es-ES.json
@@ -36,6 +36,7 @@
         "time-aria": "Tiempo actual",
         "comError-text": "Se ha producido un error al establecer comunicación con Opencast.",
         "loadError-text": "Ocurrió un error al cargar el video.",
+        "durationError-text": "Opencast failed to provide the video duration.",
         "title-tooltip": "Título del vídeo",
         "presenter-tooltip": "Presentadores"
     },
diff --git a/src/i18n/locales/fr-FR.json b/src/i18n/locales/fr-FR.json
index 873978de6..1f5bbf766 100644
--- a/src/i18n/locales/fr-FR.json
+++ b/src/i18n/locales/fr-FR.json
@@ -36,6 +36,7 @@
         "time-aria": "Temps actuel",
         "comError-text": "Un problème est survenu lors de la communication avec Opencast.",
         "loadError-text": "Une erreur s'est produite lors du chargement de cette vidéo.",
+        "durationError-text": "Opencast failed to provide the video duration.",
         "title-tooltip": "Titre de la vidéo",
         "presenter-tooltip": "Présentateurs vidéo"
     },
diff --git a/src/i18n/locales/nl-NL.json b/src/i18n/locales/nl-NL.json
index 701557a4e..0bf21fdff 100644
--- a/src/i18n/locales/nl-NL.json
+++ b/src/i18n/locales/nl-NL.json
@@ -36,6 +36,7 @@
         "time-aria": "Actuele tijd",
         "comError-text": "Er is een probleem opgetreden tijdens de communicatie met Opencast.",
         "loadError-text": "Er is een fout opgetreden tijdens het laden van deze video.",
+        "durationError-text": "Opencast failed to provide the video duration.",
         "title-tooltip": "Titel van de video",
         "presenter-tooltip": "Video presentatoren"
     },
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index 6573a6980..087983035 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -36,6 +36,7 @@
         "time-aria": "Current time",
         "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.",
         "title-tooltip": "Video Title",
         "presenter-tooltip": "Video Presenters"
     },
diff --git a/src/i18n/locales/zh-TW.json b/src/i18n/locales/zh-TW.json
index d1359d7f9..00a1ffaed 100644
--- a/src/i18n/locales/zh-TW.json
+++ b/src/i18n/locales/zh-TW.json
@@ -36,6 +36,7 @@
         "time-aria": "目前時間",
         "comError-text": "與 Opencast 通訊時出現問題。",
         "loadError-text": "載入此影片時出現錯誤。",
+        "durationError-text": "Opencast failed to provide the video duration.",
         "title-tooltip": "影片標題",
         "presenter-tooltip": "影片簡報者"
     },