From 71efe876d33806e27f4933019cd373fe0475551a Mon Sep 17 00:00:00 2001 From: XnpioChV Date: Sun, 19 Mar 2023 15:41:43 -0500 Subject: [PATCH] style: adding more styles on the selection modal --- package-lock.json | 34 +++++++++++ package.json | 1 + .../{Selector.jsx => VideoSelector.jsx} | 6 +- ...lector.test.jsx => VideoSelector.test.jsx} | 8 +-- ...SelectorPage.jsx => VideoSelectorPage.jsx} | 12 ++-- ...ge.test.jsx => VideoSelectorPage.test.jsx} | 10 ++-- .../__snapshots__/Selector.test.jsx.snap | 3 - .../__snapshots__/VideoSelector.test.jsx.snap | 3 + ...x.snap => VideoSelectorPage.test.jsx.snap} | 4 +- .../__snapshots__/index.test.jsx.snap | 4 ++ .../AnswerWidget/AnswerOption.test.jsx | 3 + .../QuestionWidget/index.test.jsx | 5 ++ .../ShowAnswerCard.test.jsx | 3 + .../SwitchToAdvancedEditorCard.test.jsx.snap | 2 + .../containers/TextEditor/index.test.jsx | 5 ++ src/editors/containers/VideoGallery/hooks.js | 30 +++++++--- .../__snapshots__/index.test.jsx.snap | 12 +++- .../sharedComponents/BaseModal/index.jsx | 11 +++- .../__snapshots__/index.test.jsx.snap | 2 + .../SelectionModal/Gallery.jsx | 10 ++-- .../SelectionModal/GalleryCard.jsx | 60 ++++++++++++------- .../SelectionModal/SearchSort.jsx | 4 +- .../__snapshots__/Gallery.test.jsx.snap | 3 + .../__snapshots__/GalleryCard.test.jsx.snap | 34 +++++++++-- .../sharedComponents/SelectionModal/index.jsx | 24 ++++---- .../__snapshots__/index.test.jsx.snap | 2 + src/editors/utils/formatDuration.js | 18 ++++++ src/editors/utils/index.js | 1 + src/index.jsx | 4 +- 29 files changed, 233 insertions(+), 85 deletions(-) rename src/editors/{Selector.jsx => VideoSelector.jsx} (88%) rename src/editors/{Selector.test.jsx => VideoSelector.test.jsx} (81%) rename src/editors/{SelectorPage.jsx => VideoSelectorPage.jsx} (76%) rename src/editors/{SelectorPage.test.jsx => VideoSelectorPage.test.jsx} (60%) delete mode 100644 src/editors/__snapshots__/Selector.test.jsx.snap create mode 100644 src/editors/__snapshots__/VideoSelector.test.jsx.snap rename src/editors/__snapshots__/{SelectorPage.test.jsx.snap => VideoSelectorPage.test.jsx.snap} (84%) create mode 100644 src/editors/utils/formatDuration.js diff --git a/package-lock.json b/package-lock.json index a6109891e..94e32a4a4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "codemirror": "^6.0.0", "fast-xml-parser": "^4.0.10", "lodash-es": "^4.17.21", + "moment-shortformat": "^2.1.0", "react-redux": "^7.2.8", "react-responsive": "8.2.0", "react-transition-group": "4.4.2", @@ -26149,6 +26150,27 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/moment": { + "version": "2.29.4", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz", + "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==", + "peer": true, + "engines": { + "node": "*" + } + }, + "node_modules/moment-shortformat": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/moment-shortformat/-/moment-shortformat-2.1.0.tgz", + "integrity": "sha512-TBh8jH4cVQOnZU+fQXkyCgj74ti//0CTdQd5sQLDTZuHLMaUP3uFEhbfb3yrrLYNVzgoiUhyiIMf0rDdn5iTJg==", + "deprecated": "Package is no longer maintained", + "engines": { + "node": ">= 4" + }, + "peerDependencies": { + "moment": "^2.4.0" + } + }, "node_modules/moo": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz", @@ -54618,6 +54640,18 @@ } } }, + "moment": { + "version": "2.29.4", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz", + "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==", + "peer": true + }, + "moment-shortformat": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/moment-shortformat/-/moment-shortformat-2.1.0.tgz", + "integrity": "sha512-TBh8jH4cVQOnZU+fQXkyCgj74ti//0CTdQd5sQLDTZuHLMaUP3uFEhbfb3yrrLYNVzgoiUhyiIMf0rDdn5iTJg==", + "requires": {} + }, "moo": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz", diff --git a/package.json b/package.json index 5be2b045c..2c8ac4800 100644 --- a/package.json +++ b/package.json @@ -69,6 +69,7 @@ "codemirror": "^6.0.0", "fast-xml-parser": "^4.0.10", "lodash-es": "^4.17.21", + "moment-shortformat": "^2.1.0", "react-redux": "^7.2.8", "react-responsive": "8.2.0", "react-transition-group": "4.4.2", diff --git a/src/editors/Selector.jsx b/src/editors/VideoSelector.jsx similarity index 88% rename from src/editors/Selector.jsx rename to src/editors/VideoSelector.jsx index 9bf074ee5..ae5961f73 100644 --- a/src/editors/Selector.jsx +++ b/src/editors/VideoSelector.jsx @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import VideoGallery from './containers/VideoGallery'; import * as hooks from './hooks'; -export const Selector = ({ +export const VideoSelector = ({ learningContextId, lmsEndpointUrl, studioEndpointUrl, @@ -25,10 +25,10 @@ export const Selector = ({ ); }; -Selector.propTypes = { +VideoSelector.propTypes = { learningContextId: PropTypes.string.isRequired, lmsEndpointUrl: PropTypes.string.isRequired, studioEndpointUrl: PropTypes.string.isRequired, }; -export default Selector; +export default VideoSelector; diff --git a/src/editors/Selector.test.jsx b/src/editors/VideoSelector.test.jsx similarity index 81% rename from src/editors/Selector.test.jsx rename to src/editors/VideoSelector.test.jsx index ffbaadce5..fa518a0cb 100644 --- a/src/editors/Selector.test.jsx +++ b/src/editors/VideoSelector.test.jsx @@ -2,7 +2,7 @@ import React from 'react'; import { useDispatch } from 'react-redux'; import { shallow } from 'enzyme'; import * as hooks from './hooks'; -import Selector from './Selector'; +import VideoSelector from './VideoSelector'; jest.mock('./hooks', () => ({ initializeApp: jest.fn(), @@ -22,15 +22,15 @@ const initData = { ...props, }; -describe('Editor', () => { +describe('Video Selector', () => { describe('render', () => { test('rendering correctly with expected Input', () => { - expect(shallow()).toMatchSnapshot(); + expect(shallow()).toMatchSnapshot(); }); }); describe('behavior', () => { it('calls initializeApp hook with dispatch, and passed data', () => { - shallow(); + shallow(); expect(hooks.initializeApp).toHaveBeenCalledWith({ dispatch: useDispatch(), data: initData, diff --git a/src/editors/SelectorPage.jsx b/src/editors/VideoSelectorPage.jsx similarity index 76% rename from src/editors/SelectorPage.jsx rename to src/editors/VideoSelectorPage.jsx index d3777b2c5..371cfa5e4 100644 --- a/src/editors/SelectorPage.jsx +++ b/src/editors/VideoSelectorPage.jsx @@ -2,17 +2,17 @@ import React from 'react'; import { Provider } from 'react-redux'; import PropTypes from 'prop-types'; import ErrorBoundary from './sharedComponents/ErrorBoundary'; -import { Selector } from './Selector'; +import { VideoSelector } from './VideoSelector'; import store from './data/store'; -const SelectorPage = ({ +const VideoSelectorPage = ({ courseId, lmsEndpointUrl, studioEndpointUrl, }) => ( - ); -SelectorPage.defaultProps = { +VideoSelectorPage.defaultProps = { courseId: null, lmsEndpointUrl: null, studioEndpointUrl: null, }; -SelectorPage.propTypes = { +VideoSelectorPage.propTypes = { courseId: PropTypes.string, lmsEndpointUrl: PropTypes.string, studioEndpointUrl: PropTypes.string, }; -export default SelectorPage; +export default VideoSelectorPage; diff --git a/src/editors/SelectorPage.test.jsx b/src/editors/VideoSelectorPage.test.jsx similarity index 60% rename from src/editors/SelectorPage.test.jsx rename to src/editors/VideoSelectorPage.test.jsx index 9d278888d..8cab51d13 100644 --- a/src/editors/SelectorPage.test.jsx +++ b/src/editors/VideoSelectorPage.test.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { shallow } from 'enzyme'; -import SelectorPage from './SelectorPage'; +import VideoSelectorPage from './VideoSelectorPage'; const props = { courseId: 'course-v1:edX+DemoX+Demo_Course', @@ -11,15 +11,15 @@ const props = { jest.mock('react-redux', () => ({ Provider: 'Provider', })); -jest.mock('./Selector', () => 'Selector'); +jest.mock('./VideoSelector', () => 'VideoSelector'); -describe('Selector Page', () => { +describe('Video Selector Page', () => { describe('snapshots', () => { test('rendering correctly with expected Input', () => { - expect(shallow()).toMatchSnapshot(); + expect(shallow()).toMatchSnapshot(); }); test('rendering with props to null', () => { - expect(shallow()).toMatchSnapshot(); + expect(shallow()).toMatchSnapshot(); }); }); }); diff --git a/src/editors/__snapshots__/Selector.test.jsx.snap b/src/editors/__snapshots__/Selector.test.jsx.snap deleted file mode 100644 index 966902d43..000000000 --- a/src/editors/__snapshots__/Selector.test.jsx.snap +++ /dev/null @@ -1,3 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Editor render rendering correctly with expected Input 1`] = ``; diff --git a/src/editors/__snapshots__/VideoSelector.test.jsx.snap b/src/editors/__snapshots__/VideoSelector.test.jsx.snap new file mode 100644 index 000000000..d067c4a41 --- /dev/null +++ b/src/editors/__snapshots__/VideoSelector.test.jsx.snap @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Video Selector render rendering correctly with expected Input 1`] = ``; diff --git a/src/editors/__snapshots__/SelectorPage.test.jsx.snap b/src/editors/__snapshots__/VideoSelectorPage.test.jsx.snap similarity index 84% rename from src/editors/__snapshots__/SelectorPage.test.jsx.snap rename to src/editors/__snapshots__/VideoSelectorPage.test.jsx.snap index 578eefd76..390794300 100644 --- a/src/editors/__snapshots__/SelectorPage.test.jsx.snap +++ b/src/editors/__snapshots__/VideoSelectorPage.test.jsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Selector Page snapshots rendering correctly with expected Input 1`] = ` +exports[`Video Selector Page snapshots rendering correctly with expected Input 1`] = ` `; -exports[`Selector Page snapshots rendering with props to null 1`] = ` +exports[`Video Selector Page snapshots rendering with props to null 1`] = ` } footerAction={null} + headerComponent={null} isFullscreenScroll={true} isOpen={false} size="md" @@ -84,6 +86,7 @@ exports[`EditorContainer component render snapshot: not initialized. disable sav className="position-relative zindex-0" > } footerAction={null} + headerComponent={null} isFullscreenScroll={true} isOpen={false} size="md" diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.test.jsx index 3b039975d..5df664cea 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.test.jsx +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.test.jsx @@ -10,6 +10,9 @@ jest.mock('../../../../../data/redux', () => ({ problemType: jest.fn(state => ({ problemType: state })), }, }, + thunkActions: { + video: jest.fn(), + }, })); describe('AnswerOption', () => { diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.test.jsx index 561602f53..80b288a7b 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.test.jsx +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.test.jsx @@ -21,6 +21,11 @@ jest.mock('../../../../../data/redux', () => ({ question: jest.fn(state => ({ question: state })), }, }, + thunkActions: { + video: { + importTranscript: jest.fn(), + }, + }, })); jest.mock('../../../../../sharedComponents/TinyMceWidget/hooks', () => ({ diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.test.jsx index 81f58d130..36b4ff0b4 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.test.jsx +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.test.jsx @@ -16,6 +16,9 @@ jest.mock('../../../../../../data/redux', () => ({ learningContextId: jest.fn(state => ({ learningContextId: state })), }, }, + thunkActions: { + video: jest.fn(), + }, })); describe('ShowAnswerCard', () => { diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/SwitchToAdvancedEditorCard.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/SwitchToAdvancedEditorCard.test.jsx.snap index 2a0a1c3c4..124838e2d 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/SwitchToAdvancedEditorCard.test.jsx.snap +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/SwitchToAdvancedEditorCard.test.jsx.snap @@ -5,6 +5,7 @@ exports[`SwitchToAdvancedEditorCard snapshot snapshot: SwitchToAdvancedEditorCar className="border border-light-700 shadow-none" > } footerAction={null} + headerComponent={null} isFullscreenScroll={true} isOpen={false} size="md" diff --git a/src/editors/containers/TextEditor/index.test.jsx b/src/editors/containers/TextEditor/index.test.jsx index 2ee14c75a..196f5028b 100644 --- a/src/editors/containers/TextEditor/index.test.jsx +++ b/src/editors/containers/TextEditor/index.test.jsx @@ -61,6 +61,11 @@ jest.mock('../../data/redux', () => ({ isFinished: jest.fn((state, params) => ({ isFailed: { state, params } })), }, }, + thunkActions: { + video: { + importTranscript: jest.fn(), + }, + }, })); describe('TextEditor', () => { diff --git a/src/editors/containers/VideoGallery/hooks.js b/src/editors/containers/VideoGallery/hooks.js index 835c313a7..84104711b 100644 --- a/src/editors/containers/VideoGallery/hooks.js +++ b/src/editors/containers/VideoGallery/hooks.js @@ -139,20 +139,34 @@ export const buildVideos = ({ rawVideos }) => { let videos = []; const videoList = Object.values(rawVideos); if (videoList.length > 0) { - videos = videoList.map(asset => ({ - id: asset.edx_video_id, - displayName: asset.client_video_id, - externalUrl: asset.course_video_image_url, - dateAdded: asset.created, + videos = videoList.map(video => ({ + id: video.edx_video_id, + displayName: video.client_video_id, + externalUrl: video.course_video_image_url, + dateAdded: video.created, locked: false, - thumbnail: asset.course_video_image_url, - status: asset.status, - duration: asset.duration, + thumbnail: video.course_video_image_url, + status: video.status, + statusBadgeVariant: module.getstatusBadgeVariant({ status: video.status }), + duration: video.duration, + transcripts: video.transcripts, })); } return videos; }; +export const getstatusBadgeVariant = ({ status }) => { + switch (status) { + case filterKeys.failed: + return 'danger'; + case filterKeys.uploading: + case filterKeys.processing: + return 'light'; + default: + return null; + } +}; + export const videoHooks = ({ videos }) => { const searchSortProps = module.searchAndSortHooks(); const videoList = module.videoListHooks({ searchSortProps, videos }); diff --git a/src/editors/sharedComponents/BaseModal/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/BaseModal/__snapshots__/index.test.jsx.snap index e15c4ccdc..00d2ed5d9 100644 --- a/src/editors/sharedComponents/BaseModal/__snapshots__/index.test.jsx.snap +++ b/src/editors/sharedComponents/BaseModal/__snapshots__/index.test.jsx.snap @@ -10,12 +10,20 @@ exports[`BaseModal ImageUploadModal template component snapshot 1`] = ` size="lg" variant="default" > - + props.title node - + props.children node diff --git a/src/editors/sharedComponents/BaseModal/index.jsx b/src/editors/sharedComponents/BaseModal/index.jsx index 5f87c8167..66521fcb7 100644 --- a/src/editors/sharedComponents/BaseModal/index.jsx +++ b/src/editors/sharedComponents/BaseModal/index.jsx @@ -14,10 +14,12 @@ export const BaseModal = ({ close, title, children, + headerComponent, confirmAction, footerAction, size, isFullscreenScroll, + bodyStyle, }) => ( - + {title} + {headerComponent} - + {children} @@ -51,8 +54,10 @@ export const BaseModal = ({ BaseModal.defaultProps = { footerAction: null, + headerComponent: null, size: 'lg', isFullscreenScroll: true, + bodyStyle: null, }; BaseModal.propTypes = { @@ -62,8 +67,10 @@ BaseModal.propTypes = { children: PropTypes.node.isRequired, confirmAction: PropTypes.node.isRequired, footerAction: PropTypes.node, + headerComponent: PropTypes.node, size: PropTypes.string, isFullscreenScroll: PropTypes.bool, + bodyStyle: PropTypes.shape({}), }; export default BaseModal; diff --git a/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/__snapshots__/index.test.jsx.snap index 29f2bd566..c0459220a 100644 --- a/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/__snapshots__/index.test.jsx.snap +++ b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/__snapshots__/index.test.jsx.snap @@ -2,6 +2,7 @@ exports[`ImageSettingsModal render snapshot 1`] = ` } footerAction={null} + headerComponent={null} isFullscreenScroll={true} isOpen={false} size="lg" diff --git a/src/editors/sharedComponents/SelectionModal/Gallery.jsx b/src/editors/sharedComponents/SelectionModal/Gallery.jsx index 26359b000..69eafb5c2 100644 --- a/src/editors/sharedComponents/SelectionModal/Gallery.jsx +++ b/src/editors/sharedComponents/SelectionModal/Gallery.jsx @@ -9,7 +9,6 @@ import { FormattedMessage, injectIntl, intlShape, - MessageDescriptor, } from '@edx/frontend-platform/i18n'; import messages from './messages'; @@ -39,20 +38,20 @@ export const Gallery = ({ } if (galleryIsEmpty) { return ( -
+
); } if (searchIsEmpty) { return ( -
+
); } return ( - +
( - +
- -
-

{asset.displayName}

- { showId && ( -

- -

+
+ + { asset.status && asset.statusBadgeVariant && ( + + {asset.status} + )} -

+ { asset.duration >= 0 && ( + + {formatDuration(asset.duration)} + + )} +

+
+

{asset.displayName}

+ { asset.transcripts && ( +
+ +
+ )} +

); -GalleryCard.defaultProps = { - showId: false, -}; - GalleryCard.propTypes = { asset: PropTypes.shape({ contentType: PropTypes.string, @@ -62,8 +75,9 @@ GalleryCard.propTypes = { url: PropTypes.string, duration: PropTypes.number, status: PropTypes.string, + statusBadgeVariant: PropTypes.string, + transcripts: PropTypes.array, }).isRequired, - showId: PropTypes.bool, }; export default GalleryCard; diff --git a/src/editors/sharedComponents/SelectionModal/SearchSort.jsx b/src/editors/sharedComponents/SelectionModal/SearchSort.jsx index 3a54af3ce..11a5f9145 100644 --- a/src/editors/sharedComponents/SelectionModal/SearchSort.jsx +++ b/src/editors/sharedComponents/SelectionModal/SearchSort.jsx @@ -8,7 +8,6 @@ import { Close, Search } from '@edx/paragon/icons'; import { FormattedMessage, injectIntl, - MessageDescriptor, intlShape, } from '@edx/frontend-platform/i18n'; @@ -109,7 +108,6 @@ SearchSort.defaultProps = { filterKeys: null, filterMessages: null, showSwitch: false, - switchMessage: null, onSwitchClick: null, }; @@ -126,7 +124,7 @@ SearchSort.propTypes = { filterKeys: PropTypes.shape({}), filterMessages: PropTypes.shape({}), showSwitch: PropTypes.bool, - switchMessage: MessageDescriptor, + switchMessage: PropTypes.shape({}).isRequired, onSwitchClick: PropTypes.func, // injected intl: intlShape.isRequired, diff --git a/src/editors/sharedComponents/SelectionModal/__snapshots__/Gallery.test.jsx.snap b/src/editors/sharedComponents/SelectionModal/__snapshots__/Gallery.test.jsx.snap index 92be690c8..380b58307 100644 --- a/src/editors/sharedComponents/SelectionModal/__snapshots__/Gallery.test.jsx.snap +++ b/src/editors/sharedComponents/SelectionModal/__snapshots__/Gallery.test.jsx.snap @@ -6,6 +6,7 @@ exports[`TextEditor Image Gallery component component snapshot: loaded but no im style={ Object { "height": "375px", + "margin": "0 -1.5rem", } } > @@ -19,6 +20,7 @@ exports[`TextEditor Image Gallery component component snapshot: loaded but searc style={ Object { "height": "375px", + "margin": "0 -1.5rem", } } > @@ -36,6 +38,7 @@ exports[`TextEditor Image Gallery component component snapshot: loaded, show gal style={ Object { "height": "375px", + "margin": "0 -1.5rem", } } > diff --git a/src/editors/sharedComponents/SelectionModal/__snapshots__/GalleryCard.test.jsx.snap b/src/editors/sharedComponents/SelectionModal/__snapshots__/GalleryCard.test.jsx.snap index 41f5ac1df..684f7189c 100644 --- a/src/editors/sharedComponents/SelectionModal/__snapshots__/GalleryCard.test.jsx.snap +++ b/src/editors/sharedComponents/SelectionModal/__snapshots__/GalleryCard.test.jsx.snap @@ -4,27 +4,49 @@ exports[`GalleryCard component snapshot: dateAdded=12345 1`] = `

- + > + +

props.img.displayName

-

+

)} title={intl.formatMessage(titleMsg)} + bodyStyle={{ background: '#EBEBEB' }} + headerComponent={( +

+ +
+ )} > {/* Error Alerts */} @@ -85,8 +90,7 @@ export const SelectionModal = ({ > - - + @@ -108,13 +112,13 @@ SelectionModal.propTypes = { dismiss: PropTypes.func.isRequired, show: PropTypes.bool.isRequired, set: PropTypes.func.isRequired, - message: MessageDescriptor, + message: PropTypes.shape({}).isRequired, }).isRequired, inputError: PropTypes.shape({ dismiss: PropTypes.func.isRequired, show: PropTypes.bool.isRequired, set: PropTypes.func.isRequired, - message: MessageDescriptor, + message: PropTypes.shape({}).isRequired, }).isRequired, fileInput: PropTypes.shape({ click: PropTypes.func.isRequired, @@ -125,11 +129,11 @@ SelectionModal.propTypes = { selectBtnProps: PropTypes.shape({}).isRequired, acceptedFiles: PropTypes.shape({}).isRequired, modalMessages: PropTypes.shape({ - confirmMsg: MessageDescriptor, - uploadButtonMsg: MessageDescriptor, - titleMsg: MessageDescriptor, - fetchError: MessageDescriptor, - uploadError: MessageDescriptor, + confirmMsg: PropTypes.shape({}).isRequired, + uploadButtonMsg: PropTypes.shape({}).isRequired, + titleMsg: PropTypes.shape({}).isRequired, + fetchError: PropTypes.shape({}).isRequired, + uploadError: PropTypes.shape({}).isRequired, }).isRequired, isLoaded: PropTypes.bool.isRequired, isFetchError: PropTypes.bool.isRequired, diff --git a/src/editors/sharedComponents/SourceCodeModal/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/SourceCodeModal/__snapshots__/index.test.jsx.snap index 33662d621..2676d51a9 100644 --- a/src/editors/sharedComponents/SourceCodeModal/__snapshots__/index.test.jsx.snap +++ b/src/editors/sharedComponents/SourceCodeModal/__snapshots__/index.test.jsx.snap @@ -2,6 +2,7 @@ exports[`SourceCodeModal renders as expected with default behavior 1`] = ` } footerAction={null} + headerComponent={null} isFullscreenScroll={true} isOpen={false} size="xl" diff --git a/src/editors/utils/formatDuration.js b/src/editors/utils/formatDuration.js new file mode 100644 index 000000000..83008b7d7 --- /dev/null +++ b/src/editors/utils/formatDuration.js @@ -0,0 +1,18 @@ +import * as moment from 'moment-shortformat'; + +const formatDuration = (duration) => { + const d = moment.duration(duration, 'seconds'); + if (d.hours > 0) { + return ( + `${d.hours().toString().padStart(2, '0')}:` + + `${d.minutes().toString().padStart(2, '0')}:` + + `${d.seconds().toString().padStart(2, '0')}` + ); + } + return ( + `${d.minutes().toString().padStart(2, '0')}:` + + `${d.seconds().toString().padStart(2, '0')}` + ); +}; + +export default formatDuration; diff --git a/src/editors/utils/index.js b/src/editors/utils/index.js index b765c1382..14ecc749c 100644 --- a/src/editors/utils/index.js +++ b/src/editors/utils/index.js @@ -3,3 +3,4 @@ export { default as StrictDict } from './StrictDict'; export { default as keyStore } from './keyStore'; export { default as camelizeKeys } from './camelizeKeys'; export { default as removeItemOnce } from './removeOnce'; +export { default as formatDuration } from './formatDuration'; diff --git a/src/index.jsx b/src/index.jsx index c4b875116..847deec60 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -1,7 +1,7 @@ import Placeholder from './Placeholder'; import messages from './i18n/index'; import EditorPage from './editors/EditorPage'; -import SelectorPage from './editors/SelectorPage'; +import VideoSelectorPage from './editors/VideoSelectorPage'; -export { messages, EditorPage, SelectorPage }; +export { messages, EditorPage, VideoSelectorPage }; export default Placeholder;