Download subtitle files

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",

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",

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": "Γενικά",

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",

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",

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",

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",

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",

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",

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