From 3e65a45c1a855cc0178dfb8deea970136abe21ec Mon Sep 17 00:00:00 2001 From: Sebastian Rettig Date: Tue, 6 Apr 2021 20:05:21 +0200 Subject: [PATCH] feat(server+client): localized export --- .../components/H5PEditorExportDialog.tsx | 79 ++++++++++++------- locales/lumi/en.json | 49 +++++++++--- server/src/routes/h5pRoutes.ts | 18 ++--- 3 files changed, 93 insertions(+), 53 deletions(-) diff --git a/client/src/views/components/H5PEditorExportDialog.tsx b/client/src/views/components/H5PEditorExportDialog.tsx index d40483afc..0e9dfbcb1 100644 --- a/client/src/views/components/H5PEditorExportDialog.tsx +++ b/client/src/views/components/H5PEditorExportDialog.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -// import { useTranslation } from 'react-i18next'; +import { useTranslation } from 'react-i18next'; import Button from '@material-ui/core/Button'; import Dialog from '@material-ui/core/Dialog'; @@ -19,11 +19,14 @@ import { actions, IState } from '../../state'; import { Box, FormHelperText, TextField } from '@material-ui/core'; export default function H5PEditorExportDialog() { - // const { open, yesCallback, noCallback } = props; + const dispatch = useDispatch(); + const { t } = useTranslation('lumi'); + + // State from Redux const open = useSelector( (state: IState) => state.h5peditor.showExportDialog ); - + // Internal State const [formatChoice, setFormatChoice] = useState< 'bundle' | 'external' | 'scorm' >('bundle'); @@ -32,9 +35,6 @@ export default function H5PEditorExportDialog() { const [masteryScoreError, setMasteryScoreError] = useState(); const [isValid, setIsValid] = useState(true); - const dispatch = useDispatch(); - // const { t } = useTranslation(); - return (
dispatch(actions.h5peditor.cancelExportH5P())} > - Export settings + {t('editor.exportDialog.title')} - Format + + {t('editor.exportDialog.format.title')} + } - label="All-in-one HTML file" + label={t( + 'editor.exportDialog.format.bundleLabel' + )} /> {formatChoice === 'bundle' && ( - The file can grow too big for some - computers if you include lots of media - files. + {t( + 'editor.exportDialog.format.bundleHint' + )} )} } - label="One HTML file and several media files" + label={t( + 'editor.exportDialog.format.externalLabel' + )} /> {formatChoice === 'external' && ( - You will be asked for a name for the - HTML file in the next step. The media - files will be put into folders that - start with the same name as the file. + {t( + 'editor.exportDialog.format.externalHint' + )} )} } - label="SCORM package" + label={t( + 'editor.exportDialog.format.scorm.label' + )} /> {formatChoice === 'scorm' && ( 100 ) { setMasteryScoreError( - 'The value must be between 0 and 100' + t( + 'editor.exportDialog.format.scorm.errorRange' + ) ); setIsValid(false); } else { @@ -131,16 +144,19 @@ export default function H5PEditorExportDialog() { - Reporter + + {t('editor.exportDialog.reporter.title')} + - If you add the reporter, students can save a - file with their progress and send it to you. + {t('editor.exportDialog.reporter.hint')} - Learn more about it here. + {t( + 'editor.exportDialog.reporter.learnMoreLink' + )} {formatChoice === 'scorm' && ( - The reporter cannot be added to SCORM - packages. + {t( + 'editor.exportDialog.reporter.scormHint' + )} )} @@ -172,7 +191,7 @@ export default function H5PEditorExportDialog() { dispatch(actions.h5peditor.cancelExportH5P()) } > - Cancel + {t('editor.exportDialog.cancelButton')} diff --git a/locales/lumi/en.json b/locales/lumi/en.json index 22ebb35ce..b1876bf13 100644 --- a/locales/lumi/en.json +++ b/locales/lumi/en.json @@ -15,9 +15,42 @@ "start": "start" }, "exportDialog": { - "button": "Export H5P as ...", - "htmlExternalResources": "HTML with external resources", - "htmlBundled": "HTML with bundled resources" + "title": "Export settings", + "format": { + "title": "Format", + "bundleLabel": "All-in-one HTML file", + "bundleHint": "The file can grow too big for some computers if you include lots of media files.", + "externalLabel": "One HTML file and several media files", + "externalHint": "You will be asked for a name for the HTML file in the next step. The media files will be put into folders that start with the same name as the file.", + "scorm": { + "label": "SCORM package", + "masteryScoreLabel": "Mastery score (in %)", + "errorNaN": "Entered value is not a number", + "errorRange": "The value must be between 0 and 100" + } + }, + "reporter": { + "title": "Reporter", + "hint": "If you add the reporter, students can save a file with their progress and send it to you.", + "switchLabel": "Include reporter", + "learnMoreLink": "Learn more about it here.", + "scormHint": "The reporter cannot be added to SCORM packages." + }, + "cancelButton": "Cancel", + "exportButton": "Export now", + "filePicker": { + "title": "Export as...", + "buttonLabel": "Export", + "formatNames": { + "bundle": "All-in-one HTML file (.html)", + "external": "HTML file (.html)", + "scorm": "SCORM file (.zip)" + } + }, + "defaults": { + "authorName": "H5P Author", + "title": "H5P Content" + } } }, "settings": { @@ -106,16 +139,6 @@ "success": "H5P successfully exported as HTML", "error": "Could not export H5P as HTML" } - }, - "export_as_html": { - "dialog": { - "title": "Lumi reporter", - "description": "Do you want to include a reporter in your html? Learn more about it", - "yes": "yes", - "no": "no", - "here": "here", - "switch": "Switch" - } } } } diff --git a/server/src/routes/h5pRoutes.ts b/server/src/routes/h5pRoutes.ts index 99603bc1f..f57e7f25b 100644 --- a/server/src/routes/h5pRoutes.ts +++ b/server/src/routes/h5pRoutes.ts @@ -23,6 +23,8 @@ const cleanAndTrim = (text) => { return textClean.replace(/\s/g, ''); }; +const t = i18next.getFixedT(null, 'lumi'); + const reporterTemplate = ( integration: string, scriptsBundle: string, @@ -135,13 +137,13 @@ export default function ( filters: [ { extensions: [expectedExtension], - name: i18next.t( - `lumi:editor.exportDialog.formatNames.${format}` + name: t( + `editor.exportDialog.filePicker.formatNames.${format}` ) } ], - title: i18next.t('lumi:editor.exportDialog.title'), - buttonLabel: i18next.t('lumi:editor.exportDialog.button'), + title: t('editor.exportDialog.filePicker.title'), + buttonLabel: t('editor.exportDialog.filePicker.buttonLabel'), properties: ['showOverwriteConfirmation'] }); @@ -407,14 +409,10 @@ async function exportScorm( contentMetadata.authors && contentMetadata.authors[0] ? contentMetadata.authors[0].name - : i18next.t( - 'lumi:editor.exportDialog.defaults.authorName' - ), + : t('editor.exportDialog.defaults.authorName'), title: contentMetadata.title || - i18next.t( - 'lumi:editor.exportDialog.defaults.title' - ), + t('editor.exportDialog.defaults.title'), language: contentMetadata.language || 'en-EN', identifier: '00', masteryScore: scormOptions.masteryScore,