diff --git a/src/editors/containers/VideoEditor/components/VideoEditorModal.jsx b/src/editors/containers/VideoEditor/components/VideoEditorModal.jsx
index 89df1bf81..836fe2d39 100644
--- a/src/editors/containers/VideoEditor/components/VideoEditorModal.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoEditorModal.jsx
@@ -1,18 +1,27 @@
import React from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
import PropTypes from 'prop-types';
-
-import { thunkActions } from '../../../data/redux';
+import * as appHooks from '../../../hooks';
+import { thunkActions, selectors } from '../../../data/redux';
import VideoSettingsModal from './VideoSettingsModal';
// import SelectVideoModal from './SelectVideoModal';
import * as module from './VideoEditorModal';
+export const {
+ navigateTo,
+} = appHooks;
+
export const hooks = {
initialize: (dispatch) => {
React.useEffect(() => {
dispatch(thunkActions.video.loadVideoData());
}, []);
},
+ returnToGallery: () => {
+ const learningContextId = useSelector(selectors.app.learningContextId);
+ const blockId = useSelector(selectors.app.blockId);
+ return () => (navigateTo(`/course/${learningContextId}/editor/course-videos/${blockId}`));
+ },
};
const VideoEditorModal = ({
@@ -21,8 +30,17 @@ const VideoEditorModal = ({
}) => {
const dispatch = useDispatch();
module.hooks.initialize(dispatch);
+ const searchParams = new URLSearchParams(document.location.search);
+ const showReturn = searchParams.get('return') !== null;
+ const onReturn = module.hooks.returnToGallery();
return (
-
+
);
// TODO: add logic to show SelectVideoModal if no selection
};
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/index.jsx
index 3232d8804..f85269a7d 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/index.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/index.jsx
@@ -1,4 +1,10 @@
import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '@edx/paragon';
+import { ArrowBackIos } from '@edx/paragon/icons';
+import {
+ FormattedMessage,
+} from '@edx/frontend-platform/i18n';
// import VideoPreview from './components/VideoPreview';
import ErrorSummary from './ErrorSummary';
@@ -11,9 +17,24 @@ import VideoSourceWidget from './components/VideoSourceWidget';
import VideoPreviewWidget from './components/VideoPreviewWidget';
import './index.scss';
import SocialShareWidget from './components/SocialShareWidget';
+import messages from '../../messages';
-export const VideoSettingsModal = () => (
+export const VideoSettingsModal = ({
+ showReturn,
+ onReturn,
+}) => (
<>
+ { showReturn && (
+
+ )}
@@ -26,4 +47,9 @@ export const VideoSettingsModal = () => (
>
);
+VideoSettingsModal.propTypes = {
+ showReturn: PropTypes.bool.isRequired,
+ onReturn: PropTypes.func.isRequired,
+};
+
export default VideoSettingsModal;
diff --git a/src/editors/containers/VideoEditor/messages.js b/src/editors/containers/VideoEditor/messages.js
index 515eb4493..c041f69e3 100644
--- a/src/editors/containers/VideoEditor/messages.js
+++ b/src/editors/containers/VideoEditor/messages.js
@@ -1,12 +1,16 @@
import { defineMessages } from '@edx/frontend-platform/i18n';
const messages = defineMessages({
-
spinnerScreenReaderText: {
id: 'authoring.videoEditor.spinnerScreenReaderText',
defaultMessage: 'loading',
description: 'Loading message for spinner screenreader text.',
},
+ replaceVideoButtonLabel: {
+ id: 'authoring.videoEditor.replaceVideoButtonLabel',
+ defaultMessage: 'Replace video',
+ description: 'Text of the replace video button to return to the video gallery',
+ },
});
export default messages;
diff --git a/src/editors/containers/VideoGallery/hooks.js b/src/editors/containers/VideoGallery/hooks.js
index b7285df92..bebef53c9 100644
--- a/src/editors/containers/VideoGallery/hooks.js
+++ b/src/editors/containers/VideoGallery/hooks.js
@@ -128,9 +128,12 @@ export const videoListProps = ({ searchSortProps, videos }) => {
},
selectBtnProps: {
onClick: () => {
- // TODO save the metadata of the video on the block to fill it into the cideo editor
-
- navigateTo(`/course/${learningContextId}/editor/video/${blockId}`);
+ if (highlighted) {
+ // TODO save the metadata of the video on the block to fill it into the cideo editor
+ navigateTo(`/course/${learningContextId}/editor/video/${blockId}?return=true`);
+ } else {
+ setShowSelectVideoError(true);
+ }
},
},
};