Merge branch 'main' into more-small-screen-responsiveness

opencast · Jul 3, 2024 · 9adee03 · 9adee03
2 parents 377d533 + d981113
commit 9adee03
Show file tree

Hide file tree

Showing 21 changed files with 568 additions and 265 deletions.
diff --git a/.github/workflows/playwright-test.yml b/.github/workflows/playwright-test.yml
@@ -25,9 +25,6 @@ jobs:
     - name: Install dependencies
       run: npm ci
 
-    - name: Install Playwright
-      run: npm i -D @playwright/test
-
     - name: Install supported browsers
       run: npx playwright install
 
@@ -52,6 +49,7 @@ jobs:
       run: npx playwright test --config=playwright.config.ts
 
     - name: Upload tests results
+      if: success() || failure()
       uses: actions/upload-artifact@v4
       with:
         name: test-results

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,10 +7,10 @@
     "@emotion/styled": "^11.11.5",
     "@fontsource-variable/roboto-flex": "^5.0.15",
     "@iarna/toml": "^2.2.5",
-    "@mui/material": "^5.15.19",
+    "@mui/material": "^5.15.21",
     "@opencast/appkit": "^0.3.0",
-    "@reduxjs/toolkit": "^2.2.5",
-    "@testing-library/jest-dom": "^6.4.5",
+    "@reduxjs/toolkit": "^2.2.6",
+    "@testing-library/jest-dom": "^6.4.6",
     "@types/iarna__toml": "^2.0.5",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
@@ -42,8 +42,8 @@
     "react-window": "^1.8.10",
     "redux": "^5.0.1",
     "standardized-audio-context": "^25.3.72",
-    "typescript": "^5.4.5",
-    "uuid": "^9.0.1",
+    "typescript": "^5.5.2",
+    "uuid": "^10.0.0",
     "webvtt-parser": "^2.2.0"
   },
   "scripts": {
@@ -67,21 +67,21 @@
   },
   "devDependencies": {
     "@opencast/eslint-config-ts-react": "^0.2.0",
-    "@playwright/test": "^1.44.1",
-    "@types/lodash": "^4.17.4",
+    "@playwright/test": "^1.45.0",
+    "@types/lodash": "^4.17.6",
     "@types/luxon": "^3.4.2",
     "@types/react-beforeunload": "^2.1.5",
     "@types/react-resizable": "^3.0.7",
     "@types/react-virtualized-auto-sizer": "^1.0.4",
     "@types/react-window": "^1.8.8",
-    "@types/uuid": "^9.0.8",
-    "@vitejs/plugin-react": "^4.3.0",
+    "@types/uuid": "^10.0.0",
+    "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^8.56.0",
-    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "jsdom": "^24.1.0",
     "use-resize-observer": "^9.1.0",
-    "vite": "^5.2.12",
+    "vite": "^5.3.2",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "^1.6.0"

diff --git a/src/img/opencast-editor.svg → public/opencast-editor.svg b/src/img/opencast-editor.svg → public/opencast-editor.svg
diff --git a/src/globalKeys.ts b/src/globalKeys.ts
@@ -8,6 +8,7 @@
  * If you add a new keyMap, be sure to add it to the getAllHotkeys function
  */
 import { match } from "@opencast/appkit";
+import { isString } from "lodash";
 import { ParseKeys } from "i18next";
 import { isMacOs } from "react-device-detect";
 
@@ -20,13 +21,10 @@ const groupSubtitleList = "keyboardControls.groupSubtitleList";
 /**
  * Helper function that rewrites keys based on the OS
  */
-export const rewriteKeys = (key: string) => {
-  let newKey = key;
-  if (isMacOs) {
-    newKey = newKey.replace("Alt", "Option");
-  }
+export const rewriteKeys = (key: string | IKey) => {
+  const newKey = isString(key) ? key : key.key.replaceAll(key.combinationKey, "+");
 
-  return newKey;
+  return isMacOs ? newKey.replace("Alt", "Option") : newKey;
 };
 
 export const getGroupName = (groupName: string): ParseKeys => {
@@ -49,6 +47,7 @@ export interface IKeyGroup {
 export interface IKey {
   name: string;
   key: string;
+  combinationKey?: string;
 }
 
 export const KEYMAP: IKeyMap = {
@@ -87,6 +86,15 @@ export const KEYMAP: IKeyMap = {
       name: "cuttingActions.mergeRight-button",
       key: "Shift+Alt+m",
     },
+    zoomIn: {
+      name: "cuttingActions.zoomIn",
+      key: "Shift;Alt;z, +",
+      combinationKey: ";",
+    },
+    zoomOut: {
+      name: "cuttingActions.zoomOut",
+      key: "Shift+Alt+t, -",
+    },
   },
   timeline: {
     left: {

diff --git a/src/i18n/locales/am-ET.json b/src/i18n/locales/am-ET.json
@@ -25,7 +25,12 @@
         "mergeLeft-tooltip-aria": "Merge Left. Combine the currently active segment with the segment to its left. Hotkey: {{hotkeyName}}.",
         "mergeRight-button": "Merge Right",
         "mergeRight-tooltip": "Combine the currently active segment with the segment to its right. Hotkey: {{hotkeyName}}",
-        "mergeRight-tooltip-aria": "Merge Right. Combine the currently active segment with the segment to its right. Hotkey: {{hotkeyName}}."
+        "mergeRight-tooltip-aria": "Merge Right. Combine the currently active segment with the segment to its right. Hotkey: {{hotkeyName}}.",
+        "zoom": "Zoom",
+        "zoomSlider-aria": "Zoom. Zoom in or out of the timeline. Hotkey for Zoom in: {{hotkeyNameIn}}. Hotkey for Zoom out: {{hotkeyNameOut}}.",
+        "zoomSlider-tooltip": "Zoom in or out of the timeline. Hotkey for Zoom in: {{hotkeyNameIn}}. Hotkey for Zoom out: {{hotkeyNameOut}}.",
+        "zoomIn": "Zoom in",
+        "zoomOut": "Zoom out"
     },
     "video": {
         "previewButton": "Preview Mode",

diff --git a/src/i18n/locales/cs-CZ.json b/src/i18n/locales/cs-CZ.json
@@ -25,7 +25,12 @@
         "mergeLeft-tooltip-aria": "Merge Left. Combine the currently active segment with the segment to its left. Hotkey: {{hotkeyName}}.",
         "mergeRight-button": "Merge Right",
         "mergeRight-tooltip": "Combine the currently active segment with the segment to its right. Hotkey: {{hotkeyName}}",
-        "mergeRight-tooltip-aria": "Merge Right. Combine the currently active segment with the segment to its right. Hotkey: {{hotkeyName}}."
+        "mergeRight-tooltip-aria": "Merge Right. Combine the currently active segment with the segment to its right. Hotkey: {{hotkeyName}}.",
+        "zoom": "Zoom",
+        "zoomSlider-aria": "Zoom. Zoom in or out of the timeline. Hotkey for Zoom in: {{hotkeyNameIn}}. Hotkey for Zoom out: {{hotkeyNameOut}}.",
+        "zoomSlider-tooltip": "Zoom in or out of the timeline. Hotkey for Zoom in: {{hotkeyNameIn}}. Hotkey for Zoom out: {{hotkeyNameOut}}.",
+        "zoomIn": "Zoom in",
+        "zoomOut": "Zoom out"
     },
     "video": {
         "previewButton": "Preview Mode",

diff --git a/src/i18n/locales/de-DE.json b/src/i18n/locales/de-DE.json
@@ -25,7 +25,12 @@
         "mergeLeft-tooltip-aria": "Links zusammenfügen. Verbinden Sie das aktuell aktive Segment mit dem Segment auf der linken Seite. Hotkey: {{hotkeyName}}.",
         "mergeRight-button": "Rechts zusammenfügen",
         "mergeRight-tooltip": "Verbinde das aktuell aktive Segment mit dem Segment auf der rechten Seite. Hotkey: {{hotkeyName}}",
-        "mergeRight-tooltip-aria": "Rechts zusammenfügen. Verbinden Sie das aktuell aktive Segment mit dem Segment auf der rechten Seite. Hotkey: {{hotkeyName}}."
+        "mergeRight-tooltip-aria": "Rechts zusammenfügen. Verbinden Sie das aktuell aktive Segment mit dem Segment auf der rechten Seite. Hotkey: {{hotkeyName}}.",
+        "zoom": "Zoom",
+        "zoomSlider-aria": "Zoomen. Zoome in die Zeitleiste herein oder aus ihr heraus. Hotkey fürs Hereinzoomen: {{hotkeyNameIn}}. Hotkey fürs Herauszoomen: {{hotkeyNameOut}}.",
+        "zoomSlider-tooltip": "Zoome in die Zeitleiste herein oder aus ihr heraus. Hotkey fürs Hereinzoomen: {{hotkeyNameIn}}. Hotkey fürs Herauszoomen: {{hotkeyNameOut}}.",
+        "zoomIn": "Hereinzoomen",
+        "zoomOut": "Herauszoomen"
     },
     "video": {
         "previewButton": "Vorschaumodus",
@@ -84,7 +89,7 @@
         "saveAndProcess-text": "Speichern & verarbeiten",
         "selectWF-text": "Workflow wählen",
         "noWorkflows-text": "Es gibt keine Workflows zum Verarbeiten Ihrer Änderungen. Bitte speichern Sie Ihre Änderungen und kontaktieren Sie einen Administrator.\n",
-        "oneWorkflow-text": "The changes will be saved and the video will be cut and processed with the workflow \"{{workflow}}\". <3/> This will take some time.\n",
+        "oneWorkflow-text": "Die Änderungen werden gespeichert und das Video wird mit dem Workflow \"{{workflow}}\" geschnitten und verarbeitet. <3/> Dies wird einige Zeit in Anspruch nehmen.\n",
         "manyWorkflows-text": "Wählen Sie aus, welchen Workflow Opencast für die Verarbeitung verwenden soll.",
         "startProcessing-button": "Verarbeitung starten",
         "back-button": "Zurück",
@@ -96,7 +101,7 @@
         "segment-tooltip": "Segment {{segment}}",
         "scrubber-text-aria": "Zeitmarker. {{currentTime}}. Aktives Segment: {{segment}}. {{segmentStatus}}. Steuerung: {{moveLeft}} und {{moveRight}}, um den Zeitmarker zu bewegen. {{increase}} und {{decrease}}, um das Verschiebungdelta zu erhöhen/verringern.\n",
         "segments-text-aria": "Segment {{index}}. {{segmentStatus}}. Start: {{start}}. Ende: {{end}}.\n",
-        "cut-text-aria": "Cut marker. {{time}}. Between segment {{leftSegment}} and {{rightSegment}}.\n"
+        "cut-text-aria": "Schnittmarke. {{time}}. Zwischen Segment {{leftSegment}} und {{rightSegment}}.\n"
     },
     "workflowConfig": {
         "headline-text": "Workflow Konfiguration",
@@ -230,7 +235,7 @@
     "subtitles": {
         "selectSubtitleButton-tooltip": "Untertitel für {{title}} bearbeiten",
         "selectSubtitleButton-tooltip-aria": "{{title}} zur Bearbeitung von Untertiteln auswählen",
-        "createSubtitleButton-tooltip": "Opens a dialog for creating/uploading new subtitles",
+        "createSubtitleButton-tooltip": "Öffnet einen Dialog zum Erstellen/Hochladen neuer Untertitel",
         "createSubtitleButton-clicked-tooltip-aria": "Enthält einen Dialog zum Erstellen neuer Untertitel",
         "createSubtitleButton-createButton": "Erstellen",
         "createSubtitleButton-createButton-tooltip": "Beginne eine neue Untertiteldatei mit dem ausgewählten Titel.",
@@ -241,12 +246,12 @@
         "downloadButton-title": "Herunterladen",
         "downloadButton-tooltip": "Untertitel als vtt-Datei herunterladen",
         "uploadButton-title": "Hochladen",
-        "uploadButton-tooltip": "Upload subtitle as vtt file",
-        "uploadButton-warning-header": "Caution!",
-        "uploadButton-warning": "Uploading will overwrite the current subtitle. This cannot be undone. Are you sure?",
-        "uploadButton-error": "Upload failed.",
-        "uploadButton-error-filetype": "Wrong file type.",
-        "uploadButton-error-parse": "Could not parse subtitle file. Please ensure that the file contains valid WebVTT.",
+        "uploadButton-tooltip": "Untertitel als vtt-Datei hochladen",
+        "uploadButton-warning-header": "Achtung!",
+        "uploadButton-warning": "Hochladen wird den aktuellen Untertitel überschreiben. Dies kann nicht rückgängig gemacht werden. Sind Sie sicher?",
+        "uploadButton-error": "Hochladen fehlgeschlagen.",
+        "uploadButton-error-filetype": "Falsches Dateiformat.",
+        "uploadButton-error-parse": "Untertiteldatei konnte nicht analysiert werden. Bitte stellen Sie sicher, dass die Datei gültiges WebVTT enthält.",
         "editTitle": "Untertitel-Editor - {{title}}",
         "editTitle-loading": "Lädt",
         "generic": "Unspezifiziert",
@@ -297,9 +302,9 @@
         "language": "Sprache"
     },
     "modal": {
-        "areYouSure": "Are you sure?",
-        "cancel": "Cancel",
-        "close": "Close",
-        "confirm": "Confirm"
+        "areYouSure": "Sind Sie sicher?",
+        "cancel": "Abbrechen",
+        "close": "Schließen",
+        "confirm": "Bestätigen"
     }
 }
diff --git a/src/i18n/locales/el-GR.json b/src/i18n/locales/el-GR.json
@@ -25,7 +25,12 @@
         "mergeLeft-tooltip-aria": "Συγχώνευση αριστερά. Συνδυάστε το τρέχον ενεργό τμήμα με το τμήμα στα αριστερά. Hotkey: {{hotkeyName}}.",
         "mergeRight-button": "Συγχώνευση Δεξιά",
         "mergeRight-tooltip": "Συνδυάστε το τρέχον ενεργό τμήμα με το τμήμα προς τα δεξιά. Πλήκτρο συντόμευσης: {{hotkeyName}}",
-        "mergeRight-tooltip-aria": "Συγχώνευση Δεξιά. Συνδυάστε το τρέχον ενεργό τμήμα με το τμήμα στα δεξιά. Πλήκτρο συντόμευσης: {{hotkeyName}}."
+        "mergeRight-tooltip-aria": "Συγχώνευση Δεξιά. Συνδυάστε το τρέχον ενεργό τμήμα με το τμήμα στα δεξιά. Πλήκτρο συντόμευσης: {{hotkeyName}}.",
+        "zoom": "Zoom",
+        "zoomSlider-aria": "Zoom. Zoom in or out of the timeline. Hotkey for Zoom in: {{hotkeyNameIn}}. Hotkey for Zoom out: {{hotkeyNameOut}}.",
+        "zoomSlider-tooltip": "Zoom in or out of the timeline. Hotkey for Zoom in: {{hotkeyNameIn}}. Hotkey for Zoom out: {{hotkeyNameOut}}.",
+        "zoomIn": "Zoom in",
+        "zoomOut": "Zoom out"
     },
     "video": {
         "previewButton": "Λειτουργία προεπισκόπησης",

diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
@@ -26,7 +26,12 @@
       "mergeLeft-tooltip-aria": "Merge Left. Combine the currently active segment with the segment to its left. Hotkey: {{hotkeyName}}.",
       "mergeRight-button": "Merge Right",
       "mergeRight-tooltip": "Combine the currently active segment with the segment to its right. Hotkey: {{hotkeyName}}",
-      "mergeRight-tooltip-aria": "Merge Right. Combine the currently active segment with the segment to its right. Hotkey: {{hotkeyName}}."
+      "mergeRight-tooltip-aria": "Merge Right. Combine the currently active segment with the segment to its right. Hotkey: {{hotkeyName}}.",
+      "zoom": "Zoom",
+      "zoomSlider-aria": "Zoom. Zoom in or out of the timeline. Hotkey for Zoom in: {{hotkeyNameIn}}. Hotkey for Zoom out: {{hotkeyNameOut}}.",
+      "zoomSlider-tooltip": "Zoom in or out of the timeline. Hotkey for Zoom in: {{hotkeyNameIn}}. Hotkey for Zoom out: {{hotkeyNameOut}}.",
+      "zoomIn": "Zoom in",
+      "zoomOut": "Zoom out"
     },
 
     "video": {

diff --git a/src/i18n/locales/es-ES.json b/src/i18n/locales/es-ES.json
@@ -25,7 +25,12 @@
         "mergeLeft-tooltip-aria": "Combina el segmento actualmente activo con el segmento a su izquierda. Acceso rápido: {{hotkeyName}}.",
         "mergeRight-button": "Fusionar a la derecha",
         "mergeRight-tooltip": "Combina el segmento actualmente activo con el segmento a su izquierda. Acceso rápido: {{hotkeyName}}",
-        "mergeRight-tooltip-aria": "Combina el segmento actualmente activo con el segmento a su izquierda. Acceso rápido: {{hotkeyName}}."
+        "mergeRight-tooltip-aria": "Combina el segmento actualmente activo con el segmento a su izquierda. Acceso rápido: {{hotkeyName}}.",
+        "zoom": "Zoom",
+        "zoomSlider-aria": "Zoom. Zoom in or out of the timeline. Hotkey for Zoom in: {{hotkeyNameIn}}. Hotkey for Zoom out: {{hotkeyNameOut}}.",
+        "zoomSlider-tooltip": "Zoom in or out of the timeline. Hotkey for Zoom in: {{hotkeyNameIn}}. Hotkey for Zoom out: {{hotkeyNameOut}}.",
+        "zoomIn": "Zoom in",
+        "zoomOut": "Zoom out"
     },
     "video": {
         "previewButton": "Vista previa",

diff --git a/src/i18n/locales/fr-FR.json b/src/i18n/locales/fr-FR.json
@@ -25,7 +25,12 @@
         "mergeLeft-tooltip-aria": "Fusionner à gauche. Combiner le segment actif avec le segment à gauche. Raccourci : {{hotkeyName}}.",
         "mergeRight-button": "Fusionner à droite",
         "mergeRight-tooltip": "Combine le segment actif avec le segment à sa droite. Raccourci : {{hotkeyName}}",
-        "mergeRight-tooltip-aria": "Fusionner à droite. Combiner le segment actif avec le segment à droite. Raccourci : {{hotkeyName}}."
+        "mergeRight-tooltip-aria": "Fusionner à droite. Combiner le segment actif avec le segment à droite. Raccourci : {{hotkeyName}}.",
+        "zoom": "Zoom",
+        "zoomSlider-aria": "Zoom. Zoom in or out of the timeline. Hotkey for Zoom in: {{hotkeyNameIn}}. Hotkey for Zoom out: {{hotkeyNameOut}}.",
+        "zoomSlider-tooltip": "Zoom in or out of the timeline. Hotkey for Zoom in: {{hotkeyNameIn}}. Hotkey for Zoom out: {{hotkeyNameOut}}.",
+        "zoomIn": "Zoom in",
+        "zoomOut": "Zoom out"
     },
     "video": {
         "previewButton": "Mode aperçu",

diff --git a/src/i18n/locales/nl-NL.json b/src/i18n/locales/nl-NL.json
@@ -25,7 +25,12 @@
         "mergeLeft-tooltip-aria": "Links samenvoegen. Combineer het momenteel actieve segment met het segment aan de linkerkant. Sneltoets: {{hotkeyName}}.",
         "mergeRight-button": "Rechts samenvoegen",
         "mergeRight-tooltip": "Combineer het momenteel actieve segment met het segment aan de rechterkant. Sneltoets: {{hotkeyName}}",
-        "mergeRight-tooltip-aria": "Rechts samenvoegen. Combineer het momenteel actieve segment met het segment aan de rechterkant. Sneltoets: {{hotkeyName}}."
+        "mergeRight-tooltip-aria": "Rechts samenvoegen. Combineer het momenteel actieve segment met het segment aan de rechterkant. Sneltoets: {{hotkeyName}}.",
+        "zoom": "Zoom",
+        "zoomSlider-aria": "Zoom. Zoom in or out of the timeline. Hotkey for Zoom in: {{hotkeyNameIn}}. Hotkey for Zoom out: {{hotkeyNameOut}}.",
+        "zoomSlider-tooltip": "Zoom in or out of the timeline. Hotkey for Zoom in: {{hotkeyNameIn}}. Hotkey for Zoom out: {{hotkeyNameOut}}.",
+        "zoomIn": "Zoom in",
+        "zoomOut": "Zoom out"
     },
     "video": {
         "previewButton": "Voorvertoningsmodus",

diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
@@ -25,7 +25,12 @@
         "mergeLeft-tooltip-aria": "Merge Left. Combine the currently active segment with the segment to its left. Hotkey: {{hotkeyName}}.",
         "mergeRight-button": "Merge Right",
         "mergeRight-tooltip": "Combine the currently active segment with the segment to its right. Hotkey: {{hotkeyName}}",
-        "mergeRight-tooltip-aria": "Merge Right. Combine the currently active segment with the segment to its right. Hotkey: {{hotkeyName}}."
+        "mergeRight-tooltip-aria": "Merge Right. Combine the currently active segment with the segment to its right. Hotkey: {{hotkeyName}}.",
+        "zoom": "Zoom",
+        "zoomSlider-aria": "Zoom. Zoom in or out of the timeline. Hotkey for Zoom in: {{hotkeyNameIn}}. Hotkey for Zoom out: {{hotkeyNameOut}}.",
+        "zoomSlider-tooltip": "Zoom in or out of the timeline. Hotkey for Zoom in: {{hotkeyNameIn}}. Hotkey for Zoom out: {{hotkeyNameOut}}.",
+        "zoomIn": "Zoom in",
+        "zoomOut": "Zoom out"
     },
     "video": {
         "previewButton": "Preview Mode",

diff --git a/src/i18n/locales/zh-TW.json b/src/i18n/locales/zh-TW.json
@@ -25,7 +25,12 @@
         "mergeLeft-tooltip-aria": "左合併。 將當前活動區段與其左側的區段合併。 熱鍵：{{hotkeyName}}。",
         "mergeRight-button": "右合併",
         "mergeRight-tooltip": "將當前活動區段與其右側的區段合併。 熱鍵：{{hotkeyName}}",
-        "mergeRight-tooltip-aria": "右合併。將當前活動區段與其右側的區段合併。 熱鍵：{{hotkeyName}}"
+        "mergeRight-tooltip-aria": "右合併。將當前活動區段與其右側的區段合併。 熱鍵：{{hotkeyName}}",
+        "zoom": "Zoom",
+        "zoomSlider-aria": "Zoom. Zoom in or out of the timeline. Hotkey for Zoom in: {{hotkeyNameIn}}. Hotkey for Zoom out: {{hotkeyNameOut}}.",
+        "zoomSlider-tooltip": "Zoom in or out of the timeline. Hotkey for Zoom in: {{hotkeyNameIn}}. Hotkey for Zoom out: {{hotkeyNameOut}}.",
+        "zoomIn": "Zoom in",
+        "zoomOut": "Zoom out"
     },
     "video": {
         "previewButton": "預覽模式",