Thumbnail Editor

public/editor-settings.toml

@@ -96,7 +96,19 @@ password = "opencast"
 [thumbnail]
 
 # If the thumbnail editor appears in the main menu
-# Warning: This interface is unfinished
 # Type: boolean
 # Default: false
-#show = false
+show = true
+
+# Whether to use "simple" or "professional" mode.
+# Professional mode allows users to edit all thumbnails that fit the subflavor
+# specified in the Opencast configuration file
+# `etc/org.opencastproject.editor.EditorServiceImpl.cfg`. It is useful
+# when working with multiple thumbnails.
+# Simple mode only allows users to edit the "primary" thumbnail, as specified
+# in the Opencast configuration file
+# `etc/org.opencastproject.editor.EditorServiceImpl.cfg`. It is useful
+# when there is only a single thumbnail to worry about and you want hide
+# potential fallbacks from the user. If a primary thumbnail cannot be
+# determined, this falls back to professional mode.
+simpleMode = false

src/config.ts

@@ -44,6 +44,7 @@ interface iSettings {
   },
   thumbnail: {
     show: boolean,
+    simpleMode: boolean,
   }
 }
 
@@ -70,6 +71,7 @@ var defaultSettings: iSettings = {
   },
   thumbnail: {
     show: false,
+    simpleMode: false,
   }
 }
 var configFileSettings: iSettings
@@ -311,6 +313,7 @@ const SCHEMA = {
   },
   thumbnail: {
     show : types.boolean,
+    simpleMode: types.boolean,
   }
 }
 

src/cssStyles.tsx

@@ -131,6 +131,28 @@ export const backOrContinueStyle = css(({
   ...(flexGapReplacementStyle(20, false)),
 }))
 
+/**
+ * CSS for a title
+ */
+export const titleStyle = css(({
+  display: 'inline-block',
+  padding: '15px',
+  overflow: 'hidden',
+  whiteSpace: "nowrap",
+  textOverflow: 'ellipsis',
+  maxWidth: '500px',
+}))
+
+/**
+ * Addendum for the titleStyle
+ * Used for page titles
+ */
+export const titleStyleBold = css({
+  fontWeight: 'bold',
+  fontSize: '24px',
+  verticalAlign: '-2.5px',
+})
+
 /**
  * CSS for ariaLive regions that should not be visible
  */

src/i18n/locales/en-US.json

@@ -165,6 +165,35 @@
       }
     },
 
+    "thumbnail": {
+      "title": "Thumbnail Editor",
+      "noThumbnailAvailable": "No Thumbnail set",
+      "previewImageAlt": "Thumbnail for",
+      "buttonGenerate": "Generate",
+      "buttonGenerate-tooltip": "Create a new thumbnail from the current scrubber position",
+      "buttonGenerate-tooltip-aria": "Create a new thumbnail from the current scrubber position",
+      "buttonUpload": "Upload",
+      "buttonUpload-tooltip": "Upload an image",
+      "buttonUpload-tooltip-aria": "Upload an image",
+      "buttonUseForOtherThumbnails": "Use for other thumbnails",
+      "buttonUseForOtherThumbnails-tooltip": "Use the thumbnail for all other videos",
+      "buttonUseForOtherThumbnails-tooltip-aria": "Use the thumbnail for all other videos",
+      "buttonDiscard": "Discard",
+      "buttonDiscard-tooltip": "Undo all changes made to this thumbnail",
+      "buttonDiscard-tooltip-aria": "Undo all changes made to this thumbnail",
+      "buttonGenerateAll": "Generate All",
+      "buttonGenerateAll-tooltip": "Create new thumbnails from the current scrubber position",
+      "buttonGenerateAll-tooltip-aria": "Create new thumbnails from the current scrubber position",
+      "explanation": "Here you can set the thumbnail for each video",
+      "primary": "Primary",
+      "secondary": "Secondary"
+    },
+
+    "thumbnailSimple": {
+      "rowTitle": "Change thumbnail here",
+      "from": "from"
+    },
+
     "error": {
       "generic-message": "A critical error has occurred!",
       "details": "Details: ",

src/main/MainContent.tsx

@@ -24,6 +24,7 @@ import { hasChanges as videoHasChanges } from "../redux/videoSlice";
 import { hasChanges as metadataHasChanges} from "../redux/metadataSlice";
 import { selectTheme } from "../redux/themeSlice";
 import ThemeSwitcher from "./ThemeSwitcher";
+import Thumbnail from "./Thumbnail";
 
 /**
  * A container for the main functionality
@@ -82,6 +83,16 @@ const MainContent: React.FC<{}> = () => {
     background: `${theme.background}`,
   })
 
+  const thumbnailSelectStyle = css({
+    ...displayState(MainMenuStateNames.thumbnail),
+    flexDirection: 'column' as const,
+    alignContent: 'space-around',
+    ...(flexGapReplacementStyle(20, false)),
+    paddingRight: '20px',
+    paddingLeft: '161px',
+    background: `${theme.background}`,
+  })
+
   const finishStyle = css({
     ...displayState(MainMenuStateNames.finish),
     flexDirection: 'column' as const,
@@ -123,6 +134,9 @@ const MainContent: React.FC<{}> = () => {
       <div css={trackSelectStyle}>
           <TrackSelection />
       </div>
+      <div css={thumbnailSelectStyle}>
+          <Thumbnail />
+      </div>
       <div css={finishStyle}>
         <Finish />
       </div>