Metadata

package.json

@@ -3,13 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@date-io/date-fns": "^1.3.13",
     "@emotion/babel-preset-css-prop": "^11.2.0",
     "@emotion/react": "^11.1.5",
     "@fortawesome/fontawesome-svg-core": "^1.2.34",
     "@fortawesome/free-regular-svg-icons": "^5.15.2",
     "@fortawesome/free-solid-svg-icons": "^5.15.2",
     "@fortawesome/react-fontawesome": "^0.1.14",
     "@iarna/toml": "^2.2.5",
+    "@material-ui/core": "^4.11.3",
+    "@material-ui/lab": "^4.0.0-alpha.57",
+    "@material-ui/pickers": "^3.2.10",
     "@reduxjs/toolkit": "^1.5.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
@@ -20,22 +24,28 @@
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.2",
     "@types/react-redux": "^7.1.16",
-    "comlink": "^4.3.0",
+    "@types/yup": "^0.29.11",
     "customize-cra": "^1.0.0",
+    "date-fns": "^2.19.0",
     "deepmerge": "^4.2.2",
     "emotion": "^11.0.0",
+    "emotion-normalize": "^11.0.1",
+    "final-form": "^4.20.1",
     "i18next": "^19.9.0",
     "i18next-browser-languagedetector": "^6.0.1",
     "lodash.clonedeep": "^4.5.0",
+    "mui-rff": "^3.0.3",
     "react": "^17.0.1",
     "react-app-rewired": "^2.1.8",
     "react-dom": "^17.0.1",
     "react-draggable": "^4.4.3",
-    "react-i18next": "^11.8.8",
+    "react-final-form": "^6.5.2",
     "react-player": "^2.9.0",
     "react-redux": "^7.2.2",
     "react-scripts": "4.0.3",
+    "react-select": "^4.2.1",
     "react-use": "^17.2.1",
+    "react-i18next": "^11.8.8",
     "redux": "^4.0.5",
     "typescript": "^4.2.3",
     "web-vitals": "^1.1.0"
@@ -67,6 +77,7 @@
   },
   "devDependencies": {
     "@types/lodash": "^4.14.168",
+    "@types/react-select": "^4.0.13",
     "redux-devtools": "^3.7.0",
     "use-resize-observer": "^7.0.0"
   }

public/editor-settings.toml

@@ -9,6 +9,7 @@ mediaPackageId = '61813d6d-85c9-45fb-b982-f0fecdcca004'
 # Should be deleted when deployed in Opencast, as the editor can then
 # figure out the correct URL by itself.
 url = 'https://pyca.opencast.org'
+# url = "http://localhost:8080"
 # Opencast username. Used for Http basic authentication.
 name = "admin"
 # Password belonging to the above username
@@ -18,7 +19,7 @@ password = "opencast"
 ### Settings of the metadata tab
 [metadata]
 # If false, the metadata button is not displayed in the main menu
-show = false
+show = true
 
 ### Settings of the thumbnail tab
 [thumbnail]

src/cssStyles.tsx

@@ -3,6 +3,7 @@
  */
 import { css, Global } from '@emotion/react'
 import React from "react";
+import emotionNormalize from 'emotion-normalize';
 
 /**
  * An emotion component that inserts styles globally
@@ -18,6 +19,7 @@ export const GlobalStyle: React.FC = () => {
  * CSS for the global style component
  */
 export const globalStyle = css({
+  emotionNormalize,
   body: {
     backgroundColor: 'snow',
     fontSize: 'medium',

src/i18n/locales/en.json

@@ -86,7 +86,7 @@
       "selectWF-button": "Click to select this workflow",
       "selectWF-button-aria": "Press to select the workflow: {{stateName}}\n"
     },
-    
+
     "timeline": {
       "generateWaveform-text": "Generating Waveform",
       "segment-tooltip": "Segment {{segment}}",
@@ -105,6 +105,71 @@
       "confirm-button": "Yes, start processing"
     },
 
+    "metadata": {
+      "EVENTS-EVENTS-DETAILS-CATALOG-EPISODE": "Episode Metadata",
+      "submit-button": "Submit",
+      "submit-button-tooltip": "Confirm your changes",
+      "reset-button": "Reset",
+      "reset-button-tooltip": "Undo all your changes",
+      "submit-helpertext": "Make changes as you like, then hit the {{buttonName}} button.\nNote that you will still have to start processing for your changes to take effect.",
+      "validation": {
+        "required": "Required",
+        "duration-format": "Format must be HH:MM:SS"
+      },
+      "labels": {
+        "title": "Title",
+        "subject": "Subject",
+        "description": "Description",
+        "language": "Language",
+        "rightsHolder": "Rights",
+        "license": "License",
+        "isPartOf": "Series",
+        "creator": "Presenter(s)",
+        "contributor": "Contributor(s)",
+        "startDate": "Start date",
+        "duration": "Duration",
+        "location": "Location",
+        "source": "Source",
+        "created": "Created",
+        "publisher": "Publisher",
+        "identifier": "UID"
+      },
+      "language": {
+        "LANGUAGES-SLOVENIAN": "Slovenian",
+        "LANGUAGES-PORTUGESE": "Portugese",
+        "LANGUAGES-ROMANSH": "Romansh",
+        "LANGUAGES-ARABIC": "Arabic",
+        "LANGUAGES-POLISH": "Polish",
+        "LANGUAGES-ITALIAN": "Italian",
+        "LANGUAGES-CHINESE": "Chinese",
+        "LANGUAGES-FINNISH": "Finnish",
+        "LANGUAGES-DANISH": "Danish",
+        "LANGUAGES-UKRAINIAN": "Ukrainian",
+        "LANGUAGES-FRENCH": "French",
+        "LANGUAGES-SPANISH": "Spanish",
+        "LANGUAGES-GERMAN_CH": "Swiss German",
+        "LANGUAGES-NORWEGIAN": "Norwegian",
+        "LANGUAGES-RUSSIAN": "Russian",
+        "LANGUAGES-JAPANESE": "Japanese",
+        "LANGUAGES-DUTCH": "Dutch",
+        "LANGUAGES-TURKISH": "Turkish",
+        "LANGUAGES-HINDI": "Hindi",
+        "LANGUAGES-SWEDISH": "Swedish",
+        "LANGUAGES-ENGLISH": "English",
+        "LANGUAGES-GERMAN": "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": "All rights reserved",
+        "EVENTS-LICENSE-CCBYSA": "CC-BY-SA",
+        "EVENTS-LICENSE-CCBYNC": "CC-BY-NC",
+        "EVENTS-LICENSE-CCBY": "CC-BY"
+      }
+    },
+
     "various": {
       "error-details-text": "Details: {{errorMessage}}\n",
       "error-noDetails-text": "No error details are available.",

src/index.tsx

@@ -9,6 +9,9 @@ import store from './redux/store'
 import { init } from './config'
 import { sleep } from './util/utilityFunctions'
 
+import { MuiPickersUtilsProvider } from '@material-ui/pickers';
+import DateFnsUtils from '@date-io/date-fns';
+
 
 // Load config here
 // Load the rest of the application and try to fetch the settings file from the
@@ -28,7 +31,9 @@ initialize.then(
     ReactDOM.render(
       <React.StrictMode>
           <Provider store={store}>
-            <App />
+            <MuiPickersUtilsProvider utils={DateFnsUtils}>
+              <App />
+            </MuiPickersUtilsProvider>
           </Provider>
       </React.StrictMode>,
       document.getElementById('root')

src/main/MainContent.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import Video from './Video';
 import Timeline from './Timeline';
 import CuttingActions from './CuttingActions';
+import Metadata from './Metadata';
 import Finish from "./Finish"
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -32,6 +33,15 @@ const MainContent: React.FC<{}> = () => {
     paddingLeft: '20px',
   })
 
+  const metadataStyle = css({
+    display: mainMenuState !== MainMenuStateNames.metadata ? 'none' :'flex',
+    // flexDirection: 'column' as const,
+    // justifyContent: 'space-around',
+    gap: "20px",
+    paddingRight: '20px',
+    paddingLeft: '20px',
+  })
+
   const finishStyle = css({
     display: mainMenuState !== MainMenuStateNames.finish ? 'none' : 'flex',
     flexDirection: 'column' as const,
@@ -42,7 +52,8 @@ const MainContent: React.FC<{}> = () => {
   })
 
   const defaultStyle = css({
-    display: (mainMenuState === MainMenuStateNames.cutting || mainMenuState === MainMenuStateNames.finish )
+    display: (mainMenuState === MainMenuStateNames.cutting || mainMenuState === MainMenuStateNames.finish
+              || mainMenuState === MainMenuStateNames.metadata)
               ? 'none' : 'flex',
     flexDirection: 'column' as const,
     alignItems: 'center',
@@ -57,6 +68,9 @@ const MainContent: React.FC<{}> = () => {
           <CuttingActions />
           <Timeline />
       </div>
+      <div css={metadataStyle}>
+          <Metadata />
+      </div>
       <div css={finishStyle}>
         <Finish />
       </div>