Merge remote-tracking branch 'upstream/main' into more-small-screen-r…

…esponsiveness
opencast · Nov 1, 2023 · 2f1baf8 · 2f1baf8
2 parents 6e6ec05 + 6757d7e
commit 2f1baf8
Show file tree

Hide file tree

Showing 15 changed files with 77 additions and 10 deletions.
diff --git a/src/cssStyles.tsx b/src/cssStyles.tsx
@@ -439,10 +439,9 @@ export const spinningStyle = css({
   })}`,
 })
 
-export const customIconStyle = (theme: Theme) => css(({
+export const customIconStyle = css(({
   maxWidth: '16px',
-  height: 'auto',
-  color: theme.text,
+  height: 'auto'
 }))
 
 export const videosStyle = (theme: Theme) => css(({

diff --git a/src/i18n/locales/cs-CZ.json b/src/i18n/locales/cs-CZ.json
@@ -232,6 +232,8 @@
         "createSubtitleDropdown-label": "Pick a language",
         "backButton": "Back",
         "backButton-tooltip": "Return to subtitle selection",
+        "downloadButton-title": "Download",
+        "downloadButton-tooltip": "Download subtitle as vtt file",
         "editTitle": "Subtitle Editor - {{title}}",
         "editTitle-loading": "Loading",
         "generic": "Generic",

diff --git a/src/i18n/locales/de-DE.json b/src/i18n/locales/de-DE.json
@@ -232,6 +232,8 @@
         "createSubtitleDropdown-label": "Wähle eine Sprache",
         "backButton": "Zurück",
         "backButton-tooltip": "Zurück zur Untertitelauswahl",
+        "downloadButton-title": "Herunterladen",
+        "downloadButton-tooltip": "Untertitel als VTT-Datei herunterladen",
         "editTitle": "Untertitel-Editor - {{title}}",
         "editTitle-loading": "Lädt",
         "generic": "Unspezifiziert",

diff --git a/src/i18n/locales/el-GR.json b/src/i18n/locales/el-GR.json
@@ -232,6 +232,8 @@
         "createSubtitleDropdown-label": "Επιλέξτε μια γλώσσα",
         "backButton": "Επιστροφή",
         "backButton-tooltip": "Επιστροφή στην επιλογή υποτίτλων",
+        "downloadButton-title": "Κατεβάστε",
+        "downloadButton-tooltip": "Download subtitle as vtt file",
         "editTitle": "Επεξεργαστής υποτίτλων - {{title}}",
         "editTitle-loading": "Φόρτωση",
         "generic": "Γενικά",

diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
@@ -249,6 +249,8 @@
       "createSubtitleDropdown-label": "Pick a language",
       "backButton": "Back",
       "backButton-tooltip": "Return to subtitle selection",
+      "downloadButton-title": "Download",
+      "downloadButton-tooltip": "Download subtitle as vtt file",
       "editTitle": "Subtitle Editor - {{title}}",
       "editTitle-loading": "Loading",
       "generic": "Generic",

diff --git a/src/i18n/locales/es-ES.json b/src/i18n/locales/es-ES.json
@@ -232,6 +232,8 @@
         "createSubtitleDropdown-label": "Seleccione un idioma",
         "backButton": "Atras",
         "backButton-tooltip": "Volver a la selección de subtítulos",
+        "downloadButton-title": "Descargar",
+        "downloadButton-tooltip": "Download subtitle as vtt file",
         "editTitle": "Editor de subtítulos - {{title}}",
         "editTitle-loading": "Cargando",
         "generic": "Generico",

diff --git a/src/i18n/locales/fr-FR.json b/src/i18n/locales/fr-FR.json
@@ -232,6 +232,8 @@
         "createSubtitleDropdown-label": "Pick a language",
         "backButton": "Back",
         "backButton-tooltip": "Return to subtitle selection",
+        "downloadButton-title": "Download",
+        "downloadButton-tooltip": "Download subtitle as vtt file",
         "editTitle": "Subtitle Editor - {{title}}",
         "editTitle-loading": "Loading",
         "generic": "Generic",

diff --git a/src/i18n/locales/nl-NL.json b/src/i18n/locales/nl-NL.json
@@ -232,6 +232,8 @@
         "createSubtitleDropdown-label": "Pick a language",
         "backButton": "Back",
         "backButton-tooltip": "Return to subtitle selection",
+        "downloadButton-title": "Download",
+        "downloadButton-tooltip": "Download subtitle as vtt file",
         "editTitle": "Subtitle Editor - {{title}}",
         "editTitle-loading": "Loading",
         "generic": "Generic",

diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
@@ -232,6 +232,8 @@
         "createSubtitleDropdown-label": "Pick a language",
         "backButton": "Back",
         "backButton-tooltip": "Return to subtitle selection",
+        "downloadButton-title": "Download",
+        "downloadButton-tooltip": "Download subtitle as vtt file",
         "editTitle": "Subtitle Editor - {{title}}",
         "editTitle-loading": "Loading",
         "generic": "Generic",

diff --git a/src/i18n/locales/zh-TW.json b/src/i18n/locales/zh-TW.json
@@ -232,6 +232,8 @@
         "createSubtitleDropdown-label": "Pick a language",
         "backButton": "Back",
         "backButton-tooltip": "Return to subtitle selection",
+        "downloadButton-title": "Download",
+        "downloadButton-tooltip": "Download subtitle as vtt file",
         "editTitle": "Subtitle Editor - {{title}}",
         "editTitle-loading": "Loading",
         "generic": "Generic",

diff --git a/src/main/CuttingActions.tsx b/src/main/CuttingActions.tsx
@@ -183,7 +183,7 @@ const MarkAsDeletedButton : React.FC<markAsDeleteButtonInterface> = ({actionHand
           actionHandler(action)
         } }}
       >
-        {isCurrentSegmentAlive ? <LuTrash /> : <TrashRestore css={customIconStyle(theme)} /> }
+        {isCurrentSegmentAlive ? <LuTrash /> : <TrashRestore css={customIconStyle} /> }
         <span css={undisplay(BREAKPOINTS.medium)}>{isCurrentSegmentAlive ? t('cuttingActions.delete-button') : t("cuttingActions.restore-button")}</span>
       </div>
     </ThemedTooltip>

diff --git a/src/main/SubtitleEditor.tsx b/src/main/SubtitleEditor.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { css } from "@emotion/react";
 import { basicButtonStyle, flexGapReplacementStyle } from "../cssStyles";
-import { LuChevronLeft} from "react-icons/lu";
+import { LuChevronLeft, LuDownload} from "react-icons/lu";
 import {
   selectSubtitlesFromOpencastById,
 } from '../redux/videoSlice'
@@ -17,7 +17,7 @@ import SubtitleVideoArea from "./SubtitleVideoArea";
 import SubtitleTimeline from "./SubtitleTimeline";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "../themes";
-import { parseSubtitle } from "../util/utilityFunctions";
+import { parseSubtitle, serializeSubtitle } from "../util/utilityFunctions";
 import { ThemedTooltip } from "./Tooltip";
 import { titleStyle, titleStyleBold } from "../cssStyles";
 import { generateButtonTitle } from "./SubtitleSelect";
@@ -109,7 +109,7 @@ const SubtitleEditor : React.FC = () => {
             <div css={[titleStyle(theme), titleStyleBold(theme)]}>
               {t("subtitles.editTitle", {title: getTitle()})}
             </div>
-            <div css={{width: '50px'}}></div>
+            <DownloadButton/>
           </div>
           <div css={subAreaStyle}>
             <SubtitleListEditor />
@@ -128,6 +128,47 @@ const SubtitleEditor : React.FC = () => {
   );
 }
 
+const DownloadButton: React.FC = () => {
+
+  const subtitle = useSelector(selectSelectedSubtitleById);
+
+  const downloadSubtitles = () => {
+
+    const vttFile = new Blob([serializeSubtitle(subtitle.cues)], {type: 'text/vtt'});
+
+    const vttFileLink = window.URL.createObjectURL(vttFile);
+    const vttHyperLink = document.createElement('a');
+    vttHyperLink.setAttribute('href', vttFileLink);
+
+    const vttFileName = generateButtonTitle(subtitle.tags, t).trimEnd();
+    vttHyperLink.setAttribute('download', `${vttFileName}.vtt`);
+    vttHyperLink.click();
+  }
+
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const style = css({
+    fontSize: '16px',
+    height: '10px',
+    padding: '16px',
+    justifyContent: 'space-around',
+    boxShadow: `${theme.boxShadow}`,
+    background: `${theme.element_bg}`,
+  });
+
+  return (
+    <ThemedTooltip title={t("subtitles.downloadButton-tooltip")}>
+      <div css={[basicButtonStyle(theme), style]}
+        role="button"
+        onClick={() => downloadSubtitles()}
+      >
+        <LuDownload css={{fontSize: '16px'}}/>
+        <span>{t("subtitles.downloadButton-title")}</span>
+      </div>
+    </ThemedTooltip>
+  );
+}
+
 
 /**
  * Takes you to a different page

diff --git a/src/main/TrackSelection.tsx b/src/main/TrackSelection.tsx
@@ -188,7 +188,7 @@ const SelectButton : React.FC<selectButtonInterface> = ({handler, text, Icon, to
         aria-label={tooltip}
         onClick={clickHandler}
         onKeyDown={keyHandler} >
-        <Icon css={customIconStyle(theme)}/>
+        <Icon css={customIconStyle}/>
         <div>{ text }</div>
       </div>
     </ThemedTooltip>

diff --git a/src/redux/workflowPostAndProcessSlice.ts b/src/redux/workflowPostAndProcessSlice.ts
@@ -17,7 +17,12 @@ export const postVideoInformationWithWorkflow = createAsyncThunk('video/postVide
   }
 
   const response = await client.post(`${settings.opencast.url}/editor/${settings.id}/edit.json`,
-    { segments: convertSegments(argument.segments), tracks: argument.tracks, workflows: argument.workflow }
+    {
+      segments: convertSegments(argument.segments),
+      tracks: argument.tracks,
+      subtitles: argument.subtitles,
+      workflows: argument.workflow
+    }
   )
   return response
 })

diff --git a/src/redux/workflowPostSlice.ts b/src/redux/workflowPostSlice.ts
@@ -15,7 +15,11 @@ export const postVideoInformation = createAsyncThunk('video/postVideoInformation
   }
 
   const response = await client.post(`${settings.opencast.url}/editor/${settings.id}/edit.json`,
-    { segments: convertSegments(argument.segments), tracks: argument.tracks, subtitles: argument.subtitles }
+    {
+      segments: convertSegments(argument.segments),
+      tracks: argument.tracks,
+      subtitles: argument.subtitles
+    }
   )
   return response
 })