SubtitleEditor: download button for subtitle; updated some locales fo…

…r button title and tooltip
opencast · Oct 15, 2023 · d2e34fe · d2e34fe
1 parent 9685fcf
commit d2e34fe
Show file tree

Hide file tree

Showing 10 changed files with 94 additions and 7 deletions.
diff --git a/src/i18n/locales/cs-CZ.json b/src/i18n/locales/cs-CZ.json
@@ -37,6 +37,10 @@
         "time-duration-tooltip": "Video duration",
         "duration-aria": "Duration",
         "time-aria": "Current time",
+        "mutebutton-tooltip": "Mute video",
+        "unmutebutton-tooltip": "Unmute video",
+        "volume-tooltip": "Adjust volume: {{current}}%",
+        "volumeSlider-aria": "Adjust the volume level of the video.",
         "comError-text": "A problem occurred during communication with Opencast.",
         "loadError-text": "An error has occurred loading this video.",
         "durationError-text": "Opencast failed to provide the video duration.",
@@ -228,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
@@ -37,10 +37,10 @@
         "time-duration-tooltip": "Videodauer",
         "duration-aria": "Dauer",
         "time-aria": "Aktuelle Zeit",
-        "mutebutton-tooltip": "Video stummschalten",
-        "unmutebutton-tooltip": "Stummschaltung aufheben",
-        "volume-tooltip": "Lautstärke: {{current}}%",
-        "volumeSlider-aria": "Anpassen der Videolautstärke.",
+        "mutebutton-tooltip": "Mute video",
+        "unmutebutton-tooltip": "Unmute video",
+        "volume-tooltip": "Adjust volume: {{current}}%",
+        "volumeSlider-aria": "Adjust the volume level of the video.",
         "comError-text": "Bei der Kommunikation mit Opencast ist ein Problem aufgetreten.",
         "loadError-text": "Beim Laden des Videos ist ein Fehler aufgetreten.",
         "durationError-text": "Opencast konnte die Video-Dauer nicht angeben.",
@@ -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
@@ -37,6 +37,10 @@
         "time-duration-tooltip": "Διάρκεια βίντεο",
         "duration-aria": "Διάρκεια",
         "time-aria": "Τρέχουσα ώρα",
+        "mutebutton-tooltip": "Mute video",
+        "unmutebutton-tooltip": "Unmute video",
+        "volume-tooltip": "Adjust volume: {{current}}%",
+        "volumeSlider-aria": "Adjust the volume level of the video.",
         "comError-text": "Προέκυψε πρόβλημα κατά την επικοινωνία με το Opencast.",
         "loadError-text": "Παρουσιάστηκε σφάλμα κατά τηn φόρτωση του βίντεο.",
         "durationError-text": "Opencast failed to provide the video duration.",
@@ -228,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
@@ -37,6 +37,10 @@
         "time-duration-tooltip": "Duración del vídeo",
         "duration-aria": "Duración",
         "time-aria": "Tiempo actual",
+        "mutebutton-tooltip": "Mute video",
+        "unmutebutton-tooltip": "Unmute video",
+        "volume-tooltip": "Adjust volume: {{current}}%",
+        "volumeSlider-aria": "Adjust the volume level of the video.",
         "comError-text": "Se ha producido un error al establecer comunicación con Opencast.",
         "loadError-text": "Ocurrió un error al cargar el video.",
         "durationError-text": "Opencast falló al proporcionar la duracion del vídeo.",
@@ -228,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
@@ -37,6 +37,10 @@
         "time-duration-tooltip": "Video duration",
         "duration-aria": "Durée",
         "time-aria": "Temps actuel",
+        "mutebutton-tooltip": "Mute video",
+        "unmutebutton-tooltip": "Unmute video",
+        "volume-tooltip": "Adjust volume: {{current}}%",
+        "volumeSlider-aria": "Adjust the volume level of the video.",
         "comError-text": "Un problème est survenu lors de la communication avec Opencast.",
         "loadError-text": "Une erreur s'est produite lors du chargement de cette vidéo.",
         "durationError-text": "Opencast failed to provide the video duration.",
@@ -228,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
@@ -37,6 +37,10 @@
         "time-duration-tooltip": "Video duration",
         "duration-aria": "Duur",
         "time-aria": "Actuele tijd",
+        "mutebutton-tooltip": "Mute video",
+        "unmutebutton-tooltip": "Unmute video",
+        "volume-tooltip": "Adjust volume: {{current}}%",
+        "volumeSlider-aria": "Adjust the volume level of the video.",
         "comError-text": "Er is een probleem opgetreden tijdens de communicatie met Opencast.",
         "loadError-text": "Er is een fout opgetreden tijdens het laden van deze video.",
         "durationError-text": "Opencast failed to provide the video duration.",
@@ -228,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
@@ -37,6 +37,10 @@
         "time-duration-tooltip": "Video duration",
         "duration-aria": "Duration",
         "time-aria": "Current time",
+        "mutebutton-tooltip": "Mute video",
+        "unmutebutton-tooltip": "Unmute video",
+        "volume-tooltip": "Adjust volume: {{current}}%",
+        "volumeSlider-aria": "Adjust the volume level of the video.",
         "comError-text": "A problem occurred during communication with Opencast.",
         "loadError-text": "An error has occurred loading this video.",
         "durationError-text": "Opencast failed to provide the video duration.",
@@ -228,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
@@ -37,6 +37,10 @@
         "time-duration-tooltip": "Video duration",
         "duration-aria": "持續時間",
         "time-aria": "目前時間",
+        "mutebutton-tooltip": "Mute video",
+        "unmutebutton-tooltip": "Unmute video",
+        "volume-tooltip": "Adjust volume: {{current}}%",
+        "volumeSlider-aria": "Adjust the volume level of the video.",
         "comError-text": "與 Opencast 通訊時出現問題。",
         "loadError-text": "載入此影片時出現錯誤。",
         "durationError-text": "Opencast failed to provide the video duration.",
@@ -228,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/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