Skip to content

Commit

Permalink
feat(server+client): localized export
Browse files Browse the repository at this point in the history
  • Loading branch information
@sr258
sr258 committed Apr 6, 2021
1 parent 5e16b4f commit 3e65a45
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 53 deletions.
79 changes: 49 additions & 30 deletions client/src/views/components/H5PEditorExportDialog.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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');
Expand All @@ -32,9 +35,6 @@ export default function H5PEditorExportDialog() {
const [masteryScoreError, setMasteryScoreError] = useState<string>();
const [isValid, setIsValid] = useState<boolean>(true);

const dispatch = useDispatch();
// const { t } = useTranslation();

return (
<div>
<Dialog
Expand All @@ -44,12 +44,14 @@ export default function H5PEditorExportDialog() {
onClose={() => dispatch(actions.h5peditor.cancelExportH5P())}
>
<DialogTitle id="alert-dialog-title">
Export settings
{t('editor.exportDialog.title')}
</DialogTitle>
<DialogContent>
<Box paddingBottom={4}>
<FormControl>
<FormLabel>Format</FormLabel>
<FormLabel>
{t('editor.exportDialog.format.title')}
</FormLabel>
<RadioGroup
name="exportformat"
value={formatChoice}
Expand All @@ -60,37 +62,44 @@ export default function H5PEditorExportDialog() {
<FormControlLabel
value="bundle"
control={<Radio />}
label="All-in-one HTML file"
label={t(
'editor.exportDialog.format.bundleLabel'
)}
/>
{formatChoice === 'bundle' && (
<FormHelperText>
The file can grow too big for some
computers if you include lots of media
files.
{t(
'editor.exportDialog.format.bundleHint'
)}
</FormHelperText>
)}
<FormControlLabel
value="external"
control={<Radio />}
label="One HTML file and several media files"
label={t(
'editor.exportDialog.format.externalLabel'
)}
/>
{formatChoice === 'external' && (
<FormHelperText>
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'
)}
</FormHelperText>
)}
<FormControlLabel
value="scorm"
control={<Radio />}
label="SCORM package"
label={t(
'editor.exportDialog.format.scorm.label'
)}
/>
{formatChoice === 'scorm' && (
<Box marginLeft={2}>
<TextField
label="Mastery score (in %)"
label={t(
'editor.exportDialog.format.scorm.masteryScoreLabel'
)}
value={masteryScore}
error={
masteryScoreError !== undefined
Expand All @@ -102,15 +111,19 @@ export default function H5PEditorExportDialog() {
);
if (isNaN(parsed)) {
setMasteryScoreError(
'Entered value is not a number'
t(
'editor.exportDialog.format.scorm.errorNaN'
)
);
setIsValid(false);
} else if (
parsed < 0 ||
parsed > 100
) {
setMasteryScoreError(
'The value must be between 0 and 100'
t(
'editor.exportDialog.format.scorm.errorRange'
)
);
setIsValid(false);
} else {
Expand All @@ -131,16 +144,19 @@ export default function H5PEditorExportDialog() {
</Box>
<Box>
<FormControl>
<FormLabel>Reporter</FormLabel>
<FormLabel>
{t('editor.exportDialog.reporter.title')}
</FormLabel>
<FormHelperText>
If you add the reporter, students can save a
file with their progress and send it to you.
{t('editor.exportDialog.reporter.hint')}
<a
href="https://lumieducation.gitbook.io/lumi/analytics/reporter"
target="_blank"
rel="noreferrer"
>
Learn more about it here.
{t(
'editor.exportDialog.reporter.learnMoreLink'
)}
</a>
</FormHelperText>
<FormControlLabel
Expand All @@ -155,12 +171,15 @@ export default function H5PEditorExportDialog() {
}
disabled={formatChoice === 'scorm'}
name="includeReporter"
label="Include reporter"
label={t(
'editor.exportDialog.reporter.switchLabel'
)}
/>
{formatChoice === 'scorm' && (
<FormHelperText>
The reporter cannot be added to SCORM
packages.
{t(
'editor.exportDialog.reporter.scormHint'
)}
</FormHelperText>
)}
</FormControl>
Expand All @@ -172,7 +191,7 @@ export default function H5PEditorExportDialog() {
dispatch(actions.h5peditor.cancelExportH5P())
}
>
Cancel
{t('editor.exportDialog.cancelButton')}
</Button>
<Button
color="primary"
Expand All @@ -195,7 +214,7 @@ export default function H5PEditorExportDialog() {
}
disabled={formatChoice === 'scorm' && !isValid}
>
Export now
{t('editor.exportDialog.exportButton')}
</Button>
</DialogActions>
</Dialog>
Expand Down
49 changes: 36 additions & 13 deletions locales/lumi/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down Expand Up @@ -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"
}
}
}
}
18 changes: 8 additions & 10 deletions server/src/routes/h5pRoutes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ const cleanAndTrim = (text) => {
return textClean.replace(/\s/g, '');
};

const t = i18next.getFixedT(null, 'lumi');

const reporterTemplate = (
integration: string,
scriptsBundle: string,
Expand Down Expand Up @@ -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']
});

Expand Down Expand Up @@ -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,
Expand Down

0 comments on commit 3e65a45

Please sign in to comment.