From 1ddaf9a6624ee30c40d891e45f88d5766aa975d5 Mon Sep 17 00:00:00 2001 From: Artur Gaspar Date: Mon, 4 Dec 2023 11:58:17 -0300 Subject: [PATCH] fix: video editor and uploader layout fixes (#410) * fix: video upload page layout fixes * fix: video editor thumbnail fallback icon colour and size * fix: video uploader close button go back instead of closing app Change the video uploader close button to always go back in navigation history, and change the gallery to replace its location with the video uploader's when automatically loading it due to an empty video list, so that when the uploader goes back in the history, it goes to what was before the gallery. * fix: video editor spinners vertical alignment The Editor component uses the pgn__modal-fullscreen class to be fullscreen, but it is not structured like a Paragon FullscreenModal and the fullscreen positioning style is not applied correctly, particularly in the case where the content is smaller than the body - a vertically centred component will be centred to the content size, not to the screen. Here we directly apply the style that would have applied to the relevant elements of a Paragon FullscreenModal. * fix: use trailingElement for video uploader input button Also styles the button so it looks the same on hover/active. --- src/editors/Editor.jsx | 14 +- .../__snapshots__/Editor.test.jsx.snap | 22 +- .../__snapshots__/index.test.jsx.snap | 18 +- .../containers/EditorContainer/index.jsx | 5 +- .../components/VideoPreviewWidget/index.jsx | 2 +- src/editors/containers/VideoGallery/hooks.js | 10 +- src/editors/containers/VideoGallery/index.jsx | 2 +- .../containers/VideoGallery/index.test.jsx | 6 +- .../VideoUploadEditor/VideoUploader.jsx | 57 +-- .../__snapshots__/VideoUploader.test.jsx.snap | 154 ++++---- .../__snapshots__/index.test.jsx.snap | 346 +++++++++--------- .../containers/VideoUploadEditor/hooks.js | 3 + .../containers/VideoUploadEditor/index.jsx | 43 +-- .../containers/VideoUploadEditor/index.scss | 31 +- .../VideoUploadEditor/index.test.jsx | 19 +- src/editors/data/images/videoThumbnail.svg | 2 +- 16 files changed, 376 insertions(+), 358 deletions(-) diff --git a/src/editors/Editor.jsx b/src/editors/Editor.jsx index d1b14cb38..9236e0474 100644 --- a/src/editors/Editor.jsx +++ b/src/editors/Editor.jsx @@ -31,9 +31,19 @@ export const Editor = ({ const EditorComponent = supportedEditors[blockType]; return ( -
+
diff --git a/src/editors/__snapshots__/Editor.test.jsx.snap b/src/editors/__snapshots__/Editor.test.jsx.snap index 8c929ec63..8a314a651 100644 --- a/src/editors/__snapshots__/Editor.test.jsx.snap +++ b/src/editors/__snapshots__/Editor.test.jsx.snap @@ -3,10 +3,19 @@ exports[`Editor render presents error message if no relevant editor found and ref ready 1`] = `
TextEditor) 1`] = `

My test content @@ -78,7 +83,12 @@ exports[`EditorContainer component render snapshot: initialized. enable save and exports[`EditorContainer component render snapshot: not initialized. disable save and pass to header 1`] = `
- + {isInitialized && children} {intl.formatMessage(thumbnailMessages.thumbnailAltText)} { +export const useVideoUploadHandler = ({ replace }) => { const learningContextId = useSelector(selectors.app.learningContextId); const blockId = useSelector(selectors.app.blockId); - return () => navigateTo(`/course/${learningContextId}/editor/video_upload/${blockId}`); + const path = `/course/${learningContextId}/editor/video_upload/${blockId}`; + if (replace) { + return () => window.location.replace(path); + } + return () => navigateTo(path); }; export const useCancelHandler = () => ( @@ -196,7 +200,7 @@ export const useVideoProps = ({ videos }) => { inputError, selectBtnProps, } = videoList; - const fileInput = { click: useVideoUploadHandler() }; + const fileInput = { click: useVideoUploadHandler({ replace: false }) }; return { galleryError, diff --git a/src/editors/containers/VideoGallery/index.jsx b/src/editors/containers/VideoGallery/index.jsx index 0600c1334..164f174ae 100644 --- a/src/editors/containers/VideoGallery/index.jsx +++ b/src/editors/containers/VideoGallery/index.jsx @@ -19,7 +19,7 @@ export const VideoGallery = () => { (state) => selectors.requests.isFailed(state, { requestKey: RequestKeys.uploadVideo }), ); const videos = hooks.buildVideos({ rawVideos }); - const handleVideoUpload = hooks.useVideoUploadHandler(); + const handleVideoUpload = hooks.useVideoUploadHandler({ replace: true }); useEffect(() => { // If no videos exists redirects to the video upload screen diff --git a/src/editors/containers/VideoGallery/index.test.jsx b/src/editors/containers/VideoGallery/index.test.jsx index 4bba888b9..4292c24e5 100644 --- a/src/editors/containers/VideoGallery/index.test.jsx +++ b/src/editors/containers/VideoGallery/index.test.jsx @@ -80,7 +80,7 @@ describe('VideoGallery', () => { beforeAll(() => { oldLocation = window.location; delete window.location; - window.location = { assign: jest.fn() }; + window.location = { replace: jest.fn() }; }); afterAll(() => { window.location = oldLocation; @@ -118,10 +118,10 @@ describe('VideoGallery', () => { )); }); it('navigates to video upload page when there are no videos', async () => { - expect(window.location.assign).not.toHaveBeenCalled(); + expect(window.location.replace).not.toHaveBeenCalled(); updateState({ videos: [] }); await renderComponent(); - expect(window.location.assign).toHaveBeenCalled(); + expect(window.location.replace).toHaveBeenCalled(); }); it.each([ [/newest/i, [2, 1, 3]], diff --git a/src/editors/containers/VideoUploadEditor/VideoUploader.jsx b/src/editors/containers/VideoUploadEditor/VideoUploader.jsx index c2783fe64..8b7a73f94 100644 --- a/src/editors/containers/VideoUploadEditor/VideoUploader.jsx +++ b/src/editors/containers/VideoUploadEditor/VideoUploader.jsx @@ -8,7 +8,6 @@ import { ArrowForward, FileUpload, Close } from '@edx/paragon/icons'; import { useDispatch } from 'react-redux'; import { thunkActions } from '../../data/redux'; import * as hooks from './hooks'; -import * as editorHooks from '../EditorContainer/hooks'; import messages from './messages'; const URLUploader = () => { @@ -17,49 +16,52 @@ const URLUploader = () => { const intl = useIntl(); return (
-
- +
+
-
- {intl.formatMessage(messages.dropVideoFileHere)} - {intl.formatMessage(messages.info)} +
+ {intl.formatMessage(messages.dropVideoFileHere)} + {intl.formatMessage(messages.info)}
-
OR
-
- +
+ OR +
+
+ { event.stopPropagation(); }} onChange={(event) => { setTextInputValue(event.target.value); }} + trailingElement={( + { + event.stopPropagation(); + if (textInputValue.trim() !== '') { + onURLUpload(textInputValue); + } + }} + /> + )} /> -
- { - event.stopPropagation(); - if (textInputValue.trim() !== '') { - onURLUpload(textInputValue); - } - }} - /> -
); }; -export const VideoUploader = ({ setLoading, onClose }) => { +export const VideoUploader = ({ setLoading }) => { const dispatch = useDispatch(); const intl = useIntl(); - const handleCancel = editorHooks.handleCancel({ onClose }); + const goBack = hooks.useHistoryGoBack(); const handleProcessUpload = ({ fileData }) => { dispatch(thunkActions.video.uploadVideo({ @@ -77,7 +79,7 @@ export const VideoUploader = ({ setLoading, onClose }) => { alt={intl.formatMessage(messages.closeButtonAltText)} src={Close} iconAs={Icon} - onClick={handleCancel} + onClick={goBack} />
{ VideoUploader.propTypes = { setLoading: PropTypes.func.isRequired, - onClose: PropTypes.func.isRequired, }; export default VideoUploader; diff --git a/src/editors/containers/VideoUploadEditor/__snapshots__/VideoUploader.test.jsx.snap b/src/editors/containers/VideoUploadEditor/__snapshots__/VideoUploader.test.jsx.snap index c4307f49a..5a4f1efbc 100644 --- a/src/editors/containers/VideoUploadEditor/__snapshots__/VideoUploader.test.jsx.snap +++ b/src/editors/containers/VideoUploadEditor/__snapshots__/VideoUploader.test.jsx.snap @@ -60,11 +60,11 @@ Object { class="d-flex flex-column" >
- + Drag and drop video here or click to upload Upload MP4 or MOV files (5 GB max)
OR
-
-
- + +
@@ -218,11 +215,11 @@ Object { class="d-flex flex-column" >
- + Drag and drop video here or click to upload Upload MP4 or MOV files (5 GB max)
OR
-
-
- + +
diff --git a/src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap index e85627dc6..62df48ed6 100644 --- a/src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap +++ b/src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap @@ -5,26 +5,69 @@ Object { "asFragment": [Function], "baseElement":
-
+
-
- +
+