Revert "Change subtitle identification from flavor to id"

This reverts commit 5a90406.

editor-settings.toml

@@ -99,21 +99,18 @@
 #mainFlavor = "captions"
 
 [subtitles.languages]
-## A list of languages for which new subtitles can be created
-# For each language, various tags can be specified
-# A list of officially recommended tags can be found at: TODO: link to opencast documentation for subtitle tags
-# At least the "lang" tag MUST be specified
-german = { lang = "de-DE" }
-english = { lang = "en-US", type = "closed-caption" }
-spanish = { lang = "es" }
+## A list of languages for which subtitles can be created
+"captions/source+de" = "Deutsch"
+"captions/source+en" = "English"
+"captions/source+es" = "Spanish"
 
 [subtitles.icons]
 # A list of icons to be displayed for languages defined above.
 # Values are strings but should preferably be Unicode icons.
 # These are optional and you can also choose to have no icons.
-"de-DE" = "DE"
-"en-US" = "EN"
-"es" = "ES"
+"captions/source+de" = "🇩🇪"
+"captions/source+en" = "🇺🇸"
+"captions/source+es" = "🇪🇸"
 
 [subtitles.defaultVideoFlavor]
 # Specify the default video in the subtitle video player by flavor

package.json

@@ -48,7 +48,6 @@
     "redux": "^4.2.1",
     "standardized-audio-context": "^25.3.57",
     "typescript": "^5.1.6",
-    "uuid": "^9.0.1",
     "webvtt-parser": "^2.2.0"
   },
   "overrides": {
@@ -86,7 +85,6 @@
     "@types/react-resizable": "^3.0.5",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
-    "@types/uuid": "^9.0.4",
     "use-resize-observer": "^9.1.0"
   }
 }

public/editor-settings.toml

@@ -34,15 +34,15 @@ show = true
 mainFlavor = "captions"
 
 [subtitles.languages]
-german = { lang = "de-DE" }
-english = { lang = "en-US", type = "closed-caption" }
-spanish = { lang = "es" }
-
+"captions/source+de" = "Deutsch"
+"captions/source+en" = "English"
+"captions/source+es" = "Spanish"
+"captions/source" = "Generic"
 
 [subtitles.icons]
-"de-DE" = "DE"
-"en-US" = "EN"
-"es" = "ES"
+"captions/source+de" = "🇩🇪"
+"captions/source+en" = "🇺🇸"
+"captions/source+es" = "🇪🇸"
 
 [thumbnail]
 show = true

src/config.ts

@@ -28,13 +28,6 @@ export interface configureFieldsAttributes {
   readonly: boolean,
 }
 
-export interface subtitleTags {
-  lang: string,
-  'auto-generated': string,
-  'auto-generator': string,
-  type: string,
-}
-
 /**
  * Settings interface
  */
@@ -63,7 +56,7 @@ interface iSettings {
   subtitles: {
     show: boolean,
     mainFlavor: string,
-    languages: { [key: string]: subtitleTags } | undefined,
+    languages: { [key: string]: string } | undefined,
     icons: { [key: string]: string } | undefined,
     defaultVideoFlavor: Flavor | undefined,
   }
@@ -387,7 +380,7 @@ const SCHEMA = {
   subtitles: {
     show: types.boolean,
     mainFlavor: types.string,
-    languages: types.objectsWithinObjects,
+    languages: types.map,
     icons: types.map,
     defaultVideoFlavor: types.map,
   },

src/i18n/locales/en-US.json

@@ -251,8 +251,7 @@
       "backButton-tooltip": "Return to subtitle selection",
       "editTitle": "Subtitle Editor - {{title}}",
       "editTitle-loading": "Loading",
-      "generic": "Generic",
-      "autoGenerated": "Auto-generated"
+      "generic": "Generic"
     },
 
     "subtitleList": {

src/main/Save.tsx

@@ -22,6 +22,7 @@ import { selectSubtitles, selectHasChanges as selectSubtitleHasChanges,
 import { serializeSubtitle } from "../util/utilityFunctions";
 import { useTheme } from "../themes";
 import { ThemedTooltip } from "./Tooltip";
+import { Flavor } from "../types";
 
 /**
  * Shown if the user wishes to save.
@@ -139,11 +140,9 @@ export const SaveButton: React.FC = () => {
     const subtitlesForPosting = []
 
     for (const identifier in subtitles) {
-      subtitlesForPosting.push({
-        id: identifier,
-        subtitle: serializeSubtitle(subtitles[identifier].cues),
-        tags: subtitles[identifier].tags
-      })
+      const flavor: Flavor = {type: identifier.split("/")[0], subtype: identifier.split("/")[1]}
+      subtitlesForPosting.push({flavor: flavor, subtitle: serializeSubtitle(subtitles[identifier])})
+
     }
     return subtitlesForPosting
   }

src/main/SubtitleEditor.tsx

@@ -3,24 +3,25 @@ import { css } from "@emotion/react";
 import { basicButtonStyle, flexGapReplacementStyle } from "../cssStyles";
 import { LuChevronLeft} from "react-icons/lu";
 import {
-  selectSubtitlesFromOpencastById,
+  selectCaptionTrackByFlavor,
 } from '../redux/videoSlice'
 import { useDispatch, useSelector } from "react-redux";
+import { SubtitleCue } from "../types";
 import SubtitleListEditor from "./SubtitleListEditor";
 import {
   setIsDisplayEditView,
-  selectSelectedSubtitleById,
-  selectSelectedSubtitleId,
+  selectSelectedSubtitleByFlavor,
+  selectSelectedSubtitleFlavor,
   setSubtitle
 } from '../redux/subtitleSlice'
+import { settings } from "../config";
 import SubtitleVideoArea from "./SubtitleVideoArea";
 import SubtitleTimeline from "./SubtitleTimeline";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "../themes";
 import { parseSubtitle } from "../util/utilityFunctions";
 import { ThemedTooltip } from "./Tooltip";
 import { titleStyle, titleStyleBold } from "../cssStyles";
-import { generateButtonTitle } from "./SubtitleSelect";
 
 /**
  * Displays an editor view for a selected subtitle file
@@ -31,17 +32,17 @@ const SubtitleEditor : React.FC = () => {
 
   const dispatch = useDispatch()
   const [getError, setGetError] = useState<string | undefined>(undefined)
-  const subtitle = useSelector(selectSelectedSubtitleById)
-  const selectedId = useSelector(selectSelectedSubtitleId)
-  const captionTrack = useSelector(selectSubtitlesFromOpencastById(selectedId))
+  const subtitle : SubtitleCue[] = useSelector(selectSelectedSubtitleByFlavor)
+  const selectedFlavor = useSelector(selectSelectedSubtitleFlavor)
+  const captionTrack = useSelector(selectCaptionTrackByFlavor(selectedFlavor))
   const theme = useTheme()
 
   // Prepare subtitle in redux
   useEffect(() => {
     // Parse subtitle data from Opencast
-    if (subtitle?.cues === undefined && captionTrack !== undefined && captionTrack.subtitle !== undefined && selectedId) {
+    if (subtitle === undefined && captionTrack !== undefined && captionTrack.subtitle !== undefined && selectedFlavor) {
       try {
-        dispatch(setSubtitle({identifier: selectedId, subtitles: { cues: parseSubtitle(captionTrack.subtitle), tags: captionTrack.tags } }))
+        dispatch(setSubtitle({identifier: selectedFlavor, subtitles: parseSubtitle(captionTrack.subtitle)}))
       } catch (error) {
         if (error instanceof Error) {
           setGetError(error.message)
@@ -51,18 +52,15 @@ const SubtitleEditor : React.FC = () => {
       }
 
     // Or create a new subtitle instead
-    } else if (subtitle?.cues === undefined && captionTrack === undefined && selectedId) {
+    } else if (subtitle === undefined && captionTrack === undefined && selectedFlavor) {
       // Create an empty subtitle
-      dispatch(setSubtitle({identifier: selectedId, subtitles: { cues: [], tags: [] }}))
+      dispatch(setSubtitle({identifier: selectedFlavor, subtitles: []}))
     }
-  }, [dispatch, captionTrack, subtitle, selectedId])
+  }, [dispatch, captionTrack, subtitle, selectedFlavor])
 
   const getTitle = () => {
-    if (subtitle) {
-      return generateButtonTitle(subtitle.tags, t)
-    } else {
-      return t("subtitles.editTitle-loading")
-    }
+    return (settings.subtitles.languages !== undefined && subtitle && selectedFlavor) ?
+      settings.subtitles.languages[selectedFlavor] : t("subtitles.editTitle-loading")
   }
 
   const subtitleEditorStyle = css({

src/main/SubtitleListEditor.tsx

@@ -13,8 +13,8 @@ import { addCueAtIndex,
   selectFocusSegmentId,
   selectFocusSegmentTriggered,
   selectFocusSegmentTriggered2,
-  selectSelectedSubtitleById,
-  selectSelectedSubtitleId,
+  selectSelectedSubtitleByFlavor,
+  selectSelectedSubtitleFlavor,
   setCueAtIndex,
   setCurrentlyAt,
   setFocusSegmentTriggered,
@@ -39,8 +39,8 @@ const SubtitleListEditor : React.FC = () => {
 
   const dispatch = useDispatch()
 
-  const subtitle = useSelector(selectSelectedSubtitleById)
-  const subtitleId = useSelector(selectSelectedSubtitleId, shallowEqual)
+  const subtitle = useSelector(selectSelectedSubtitleByFlavor)
+  const subtitleFlavor = useSelector(selectSelectedSubtitleFlavor, shallowEqual)
   const focusTriggered = useSelector(selectFocusSegmentTriggered, shallowEqual)
   const focusId = useSelector(selectFocusSegmentId, shallowEqual)
   const defaultSegmentLength = 5000
@@ -51,37 +51,37 @@ const SubtitleListEditor : React.FC = () => {
 
   // Update ref array size
   useEffect(() => {
-    if (subtitle?.cues) {
-      itemsRef.current = itemsRef.current.slice(0, subtitle.cues.length);
+    if (subtitle) {
+      itemsRef.current = itemsRef.current.slice(0, subtitle.length);
     }
-  }, [subtitle?.cues]);
+  }, [subtitle]);
 
   // Scroll to segment when triggered by reduxState
   useEffect(() => {
     if (focusTriggered) {
-      if (itemsRef && itemsRef.current && subtitle?.cues) {
-        const itemIndex = subtitle?.cues.findIndex(item => item.idInternal === focusId)
+      if (itemsRef && itemsRef.current && subtitle) {
+        const itemIndex = subtitle.findIndex(item => item.idInternal === focusId)
         if (listRef && listRef.current) {
           listRef.current.scrollToItem(itemIndex, "center");
 
         }
       }
       dispatch(setFocusSegmentTriggered(false))
     }
-  }, [dispatch, focusId, focusTriggered, itemsRef, subtitle?.cues])
+  }, [dispatch, focusId, focusTriggered, itemsRef, subtitle])
 
   // Automatically create a segment if there are no segments
   useEffect(() => {
-    if (subtitle?.cues && subtitle?.cues.length === 0) {
+    if (subtitle && subtitle.length === 0) {
       dispatch(addCueAtIndex({
-        identifier: subtitleId,
+        identifier: subtitleFlavor,
         cueIndex: 0,
         text: "",
         startTime: 0,
         endTime: defaultSegmentLength
       }))
     }
-  }, [dispatch, subtitle?.cues, subtitleId])
+  }, [dispatch, subtitle, subtitleFlavor])
 
   const listStyle = css({
     display: 'flex',
@@ -110,15 +110,15 @@ const SubtitleListEditor : React.FC = () => {
     return segmentHeight
   }, [])
 
-  const itemData = createItemData(subtitle?.cues, subtitleId, defaultSegmentLength)
+  const itemData = createItemData(subtitle, subtitleFlavor, defaultSegmentLength)
 
   return (
     <div css={listStyle}>
       <AutoSizer>
         {({ height, width }: {height: string | number, width: string | number}) => (
           <VariableSizeList
             height={height ? height : 0}
-            itemCount={subtitle?.cues !== undefined ? subtitle?.cues.length : 0}
+            itemCount={subtitle !== undefined ? subtitle.length : 0}
             itemData={itemData}
             itemSize={_index => segmentHeight}
             itemKey={(index, data) => data.items[index].idInternal}