Skip to content

Commit

Permalink
feat(client): added export options
Browse files Browse the repository at this point in the history
  • Loading branch information
@sr258
sr258 committed Apr 4, 2021
1 parent d94d87c commit 2c7379b
Show file tree
Hide file tree
Showing 9 changed files with 48,286 additions and 132 deletions.
27,284 changes: 27,260 additions & 24 deletions client/package-lock.json
View file

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions client/src/state/H5PEditor/H5PApi.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,11 @@ export function loadPlayerContent(

export function exportAsHtml(
contentId: string,
includeReporter: boolean
includeReporter: boolean,
format: 'bundle' | 'external' | 'scorm'
): Promise<superagent.Response> {
return superagent.get(
`/api/v1/h5p/${contentId}/html?includeReporter=${includeReporter}`
`/api/v1/h5p/${contentId}/html?includeReporter=${includeReporter}&format=${format}`
);
}

Expand Down
22 changes: 14 additions & 8 deletions client/src/state/H5PEditor/H5PEditorActions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,20 +116,24 @@ export function blurActiveElement(): IBlurActiveElementAction {
};
}

export function exportH5P(includeReporter: boolean): any {
export function exportH5P(
includeReporter: boolean,
format: 'bundle' | 'external' | 'scorm'
): any {
return async (dispatch: any) => {
try {
await dispatch(updateContentOnServer());

const data = await window.h5peditor.current?.save(); // this dispatches updateContent()
dispatch({
payload: { contentId: data.contentId, includeReporter },
payload: { contentId: data.contentId, includeReporter, format },
type: H5PEDITOR_EXPORT_REQUEST
});

try {
await api.exportAsHtml(data.contentId, includeReporter);
await api.exportAsHtml(data.contentId, includeReporter, format);

// TOOD: chang tracking
dispatch(
track(
'H5P',
Expand All @@ -142,16 +146,19 @@ export function exportH5P(includeReporter: boolean): any {
)
);
dispatch({
payload: { contentId: data.contentId, includeReporter },
payload: {
contentId: data.contentId,
includeReporter,
format
},
type: H5PEDITOR_EXPORT_SUCCESS
});
} catch (error) {
if (error.status === 499) {
// dispatched if the user cancel the system's save dialog.
dispatch({
payload: {
contentId: data.contentId,
includeReporter
contentId: data.contentId
},
type: H5PEDITOR_EXPORT_CANCEL
});
Expand All @@ -161,8 +168,7 @@ export function exportH5P(includeReporter: boolean): any {
dispatch({
payload: {
error,
contentId: data.contentId,
includeReporter
contentId: data.contentId
},
type: H5PEDITOR_EXPORT_ERROR
});
Expand Down
2 changes: 2 additions & 0 deletions client/src/state/H5PEditor/H5PEditorTypes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,8 @@ export interface IH5PEditorOpenExportDialogAction {
export interface IH5PEditorExportRequestAction {
payload: {
contentId: string;
includeReporter: boolean;
format: 'bundle' | 'external' | 'scorm';
};
type: typeof H5PEDITOR_EXPORT_REQUEST;
}
Expand Down
117 changes: 93 additions & 24 deletions client/src/views/components/H5PEditorExportDialog.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';

import { useDispatch, useSelector } from 'react-redux';
import { useTranslation } from 'react-i18next';
Expand All @@ -7,17 +7,28 @@ import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import FormControl from '@material-ui/core/FormControl';
import FormLabel from '@material-ui/core/FormLabel';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import Switch from '@material-ui/core/Switch';

import { actions, IState } from '../../state';
import { FormHelperText } from '@material-ui/core';

export default function H5PEditorExportDialog() {
// const { open, yesCallback, noCallback } = props;
const open = useSelector(
(state: IState) => state.h5peditor.showExportDialog
);

const [formatChoice, setFormatChoice] = useState<
'bundle' | 'external' | 'scorm'
>('bundle');
const [includeReporter, setIncludeReporter] = useState<boolean>(true);

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

Expand All @@ -29,38 +40,96 @@ export default function H5PEditorExportDialog() {
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
{t('notifications.export_as_html.dialog.title')}
Export settings
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
{t('notifications.export_as_html.dialog.description')}
<a
href="https://lumieducation.gitbook.io/lumi/analytics/reporter"
target="_blank"
rel="noreferrer"
<FormControl>
<FormLabel>Format</FormLabel>
<RadioGroup
name="exportformat"
value={formatChoice}
onChange={(e, val) => setFormatChoice(val as any)}
>
{t('notifications.export_as_html.dialog.here')}
</a>
.
</DialogContentText>
<FormControlLabel
value="bundle"
control={<Radio />}
label="All-in-one HTML file"
/>
{formatChoice === 'bundle' && (
<FormHelperText>
The file can grow too big for some computers
if you include lots of media files.
</FormHelperText>
)}
<FormControlLabel
value="external"
control={<Radio />}
label="One HTML file and several media files"
/>
{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.
</FormHelperText>
)}
<FormControlLabel
value="scorm"
control={<Radio />}
label="SCORM package"
/>
</RadioGroup>
</FormControl>
<FormControl>
<FormLabel>Reporter</FormLabel>
<FormHelperText>
If you add the reporter, students can save a file
with their progress and send it to you.{' '}
<a
href="https://lumieducation.gitbook.io/lumi/analytics/reporter"
target="_blank"
rel="noreferrer"
>
Learn more about it here.
</a>
</FormHelperText>
<FormControlLabel
control={<Switch />}
checked={
formatChoice === 'scorm'
? false
: includeReporter
}
onChange={(e, checked) =>
setIncludeReporter(checked)
}
disabled={formatChoice === 'scorm'}
name="includeReporter"
label="Include reporter"
/>
{formatChoice === 'scorm' && (
<FormHelperText>
The reporter cannot be added to SCORM packages.
</FormHelperText>
)}
</FormControl>
</DialogContent>
<DialogActions>
<Button color="secondary">Cancel</Button>
<Button
onClick={() =>
dispatch(actions.h5peditor.exportH5P(false))
}
color="primary"
>
{t('notifications.export_as_html.dialog.no')}
</Button>
<Button
autoFocus
onClick={() =>
dispatch(actions.h5peditor.exportH5P(true))
dispatch(
actions.h5peditor.exportH5P(
includeReporter,
formatChoice
)
)
}
color="primary"
autoFocus
>
{t('notifications.export_as_html.dialog.yes')}
Export now
</Button>
</DialogActions>
</Dialog>
Expand Down
8 changes: 7 additions & 1 deletion locales/lumi/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,11 @@
"open": "Open existing H5P",
"create": "create new H5P",
"start": "start"
},
"exportDialog": {
"button": "Export H5P as ...",
"htmlExternalResources": "HTML with external resources",
"htmlBundled": "HTML with bundled resources"
}
},
"settings": {
Expand Down Expand Up @@ -108,7 +113,8 @@
"description": "Do you want to include a reporter in your html? Learn more about it",
"yes": "yes",
"no": "no",
"here": "here"
"here": "here",
"switch": "Switch"
}
}
}
Expand Down

0 comments on commit 2c7379b

Please sign in to comment.