Merge remote-tracking branch 'upstream/main'

package.json

@@ -16,7 +16,7 @@
     "@material-ui/pickers": "^3.3.10",
     "@mui/material": "^5.10.9",
     "@mui/styles": "^5.10.9",
-    "@mui/x-date-pickers": "^5.0.0",
+    "@mui/x-date-pickers": "^5.0.4",
     "@reduxjs/toolkit": "^1.8.5",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
@@ -26,8 +26,8 @@
     "@types/node": "^18.8.4",
     "@types/react": "^17.0.45",
     "@types/react-dom": "^18.0.3",
-    "@types/react-redux": "^7.1.24",
     "@types/yup": "^0.32.0",
+    "buffer": "^6.0.3",
     "customize-cra": "^1.0.0",
     "deepmerge": "^4.2.2",
     "emotion": "^11.0.0",
@@ -48,14 +48,21 @@
     "react-final-form-listeners": "^1.0.3",
     "react-hotkeys": "^2.0.0",
     "react-i18next": "^11.18.3",
-    "react-player": "^2.10.1",
-    "react-redux": "^7.2.8",
+    "react-indiana-drag-scroll": "^2.1.0",
+    "react-player": "git+https://arnei@github.com/Arnei/react-player.git#20fe6c061cf7d71d33d764b4a51c9b9bbb614bf6",
+    "react-redux": "^8.0.4",
+    "react-resizable": "^3.0.4",
     "react-scripts": "5.0.1",
     "react-select": "^5.4.0",
     "react-use": "^17.4.0",
+    "react-virtualized-auto-sizer": "^1.0.6",
+    "react-window": "^1.8.7",
     "redux": "^4.2.0",
     "standardized-audio-context": "^25.3.32",
-    "typescript": "^4.8.4"
+    "stream": "0.0.2",
+    "subtitle": "^4.1.2",
+    "typescript": "^4.8.4",
+    "webvtt-parser": "^2.2.0"
   },
   "scripts": {
     "start": "REACT_APP_GIT_SHA=`git rev-parse HEAD` REACT_APP_BUILD_DATE=\"`date`\" react-app-rewired start",
@@ -85,10 +92,14 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.26.1",
+    "@redux-devtools/core": "^3.13.1",
     "@types/lodash": "^4.14.186",
     "@types/luxon": "^3.0.1",
     "@types/react-beforeunload": "^2.1.1",
-    "@redux-devtools/core": "^3.13.1",
+    "@types/react-final-form-listeners": "^1.0.0",
+    "@types/react-resizable": "^1.7.4",
+    "@types/react-virtualized-auto-sizer": "^1.0.1",
+    "@types/react-window": "^1.8.5",
     "use-resize-observer": "^9.0.2"
   }
 }

public/editor-settings.toml

@@ -27,6 +27,8 @@ id = 'ID-dual-stream-demo'
 # Default: Current server
 url = 'https://develop.opencast.org'
 
+
+
 # Username, used for HTTP basic authentication against Opencast.
 # Not defining this will work just fine if integrated in Opencast.
 # Type: string | undefined
@@ -88,6 +90,37 @@ password = "opencast"
 # Default: true
 #show = true
 
+####
+# Subtitles
+##
+
+[subtitles]
+
+# If the subtitle editor appears in the main menu
+# Before you enable the subtitle editor, you should define some languages
+# under "subtitles.languages"
+# Type: boolean
+# Default: false
+#show = false
+
+# The main flavor of the subtitle tracks in Opencast
+# No other tracks should have the same main flavor as subtitle tracks
+# Type: string
+# Default: "captions"
+#mainFlavor = "captions"
+
+## A list of languages for which subtitles can be created
+#
+# Example:
+[subtitles.languages]
+# "captions/source+de" = "Deutsch"
+# "captions/source+en" = "English"
+
+# Specify the default video in the subtitle video player by flavor
+# If not specified, the editor will decide on a default by itself
+#[subtitles.defaultVideoFlavor]
+# "type" = "presentation"
+# "subtype" = "preview"
 
 ####
 # Thumbnail Selection

src/config.ts

@@ -4,9 +4,13 @@
  * - 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';
 import deepmerge from 'deepmerge';
+import { configure } from 'react-hotkeys';
+import { Flavor } from './types';
 
 /**
  * Local constants
@@ -45,6 +49,12 @@ interface iSettings {
   thumbnail: {
     show: boolean,
     simpleMode: boolean,
+  },
+  subtitles: {
+    show: boolean,
+    mainFlavor: string,
+    languages: { [key: string]: string } | undefined,
+    defaultVideoFlavor: Flavor | undefined,
   }
 }
 
@@ -72,6 +82,12 @@ var defaultSettings: iSettings = {
   thumbnail: {
     show: false,
     simpleMode: false,
+  },
+  subtitles: {
+    show: false,
+    mainFlavor: "captions",
+    languages: undefined,
+    defaultVideoFlavor: undefined,
   }
 }
 var configFileSettings: iSettings
@@ -122,6 +138,25 @@ export const init = async () => {
 
   // Combine results
   settings = merge.all([defaultSettings, configFileSettings, urlParameterSettings]) as iSettings;
+
+  // Configure hotkeys
+  configure({
+    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
+      // (e.g. you need "Space" in a textarea to create whitespaces, not play/pause videos)
+      if (e.target && e.target.tagName) {
+        const tagname = e.target.tagName.toLowerCase()
+        if ((tagname === "textarea" || tagname === "input" || tagname === "select")
+          && (!e.altKey && !e.ctrlKey)
+          && (e.code === "Space" || e.code === "ArrowLeft" || e.code === "ArrowRight" || e.code === "ArrowUp" || e.code === "ArrowDown")) {
+          return true
+        }
+      }
+      return false
+    },
+  })
 };
 
 /**
@@ -262,6 +297,16 @@ const types = {
       throw new Error("is not a boolean");
     }
   },
+  'map': (v: any, allowParse: any) => {
+    for (let key in v) {
+      if (typeof key !== 'string') {
+        throw new Error("is not a string, but should be");
+      }
+      if (typeof v[key] !== 'string') {
+        throw new Error("is not a string, but should be");
+      }
+    }
+  },
   'objectsWithinObjects': (v: any, allowParse: any) => {
     for (let catalogName in v) {
       if (typeof catalogName !== 'string') {
@@ -311,6 +356,12 @@ const SCHEMA = {
   trackSelection: {
     show : types.boolean,
   },
+  subtitles: {
+    show: types.boolean,
+    mainFlavor: types.string,
+    languages: types.map,
+    defaultVideoFlavor: types.map,
+  },
   thumbnail: {
     show : types.boolean,
     simpleMode: types.boolean,

src/cssStyles.tsx

@@ -73,7 +73,7 @@ export const flexGapReplacementStyle = (flexGapValue: number, flexDirectionIsRow
 /**
  * CSS for buttons
  */
-export const basicButtonStyle = css({
+export const basicButtonStyle = (theme: Theme) => css({
   borderRadius: '10px',
   cursor: "pointer",
   // Animation
@@ -94,6 +94,7 @@ export const basicButtonStyle = css({
   alignItems: 'center',
   ...(flexGapReplacementStyle(10, false)),
   textAlign: 'center' as const,
+  outline: `${theme.button_outline}`
 });
 
 /**
@@ -131,6 +132,37 @@ export const backOrContinueStyle = css(({
   ...(flexGapReplacementStyle(20, false)),
 }))
 
+/**
+ * CSS for big buttons in a dynamic grid
+ */
+ export const tileButtonStyle = (theme: Theme) => css({
+  width: '250px',
+  height: '220px',
+  display: 'flex',
+  flexDirection: 'column' as const,
+  fontSize: "x-large",
+  ...(flexGapReplacementStyle(30, false)),
+  boxShadow: `${theme.boxShadow}`,
+  background: `${theme.element_bg}`,
+  alignItems: 'unset',  // overwrite from basicButtonStyle to allow for textOverflow to work
+  placeSelf: 'center',
+});
+
+/**
+ * CSS for disabling the animation of the basicButtonStyle
+ */
+export const disableButtonAnimation = css({
+  "&:hover": {
+    transform: 'none',
+  },
+  "&:focus": {
+    transform: 'none',
+  },
+  "&:active": {
+    transform: 'none',
+  },
+})
+
 /**
  * CSS for a title
  */
@@ -188,7 +220,7 @@ export function selectFieldStyle(theme: Theme) {
     menu: (provided: any) => ({
       ...provided,
       background: theme.element_bg,
-      border: '1px solid #ccc',
+      outline: theme.dropdown_border,
       // kill the gap
       marginTop: 0,
     }),
@@ -198,23 +230,33 @@ export function selectFieldStyle(theme: Theme) {
     }),
     multiValue: (provided: any) =>({
       ...provided,
-      color: theme.text,
+      color: theme.selected_text,
       background: theme.multiValue,
       cursor: 'default',
     }),
     multiValueLabel: (provided: any) =>({
       ...provided,
-      color: theme.text,
+      color: theme.selected_text,
     }),
     option: (provided: any, state: any) => ({
       ...provided,
-      background: state.isFocused ? theme.focused : theme.background 
+      background: state.isFocused ? theme.focused : theme.background
         && state.isSelected ? theme.selected : theme.background,
       ...(state.isFocused && {color: theme.focus_text}),
+      color: state.isFocused ? theme.focus_text : theme.text
+        && state.isSelected ? theme.selected_text : theme.text,
     }),
     placeholder: (provided: any) => ({
       ...provided,
-      color: theme.text
+      color: theme.text,
+    }),
+    clearIndicator: (provided: any) => ({
+      ...provided,
+      color: theme.indicator_color,
+    }),
+    dropdownIndicator: (provided: any) => ({
+      ...provided,
+      color: theme.indicator_color,
     }),
     valueContainer: (provided: any) => ({
       ...provided,