From 341250540991d16258509920cc021a363e9d93bc Mon Sep 17 00:00:00 2001 From: mfrachet Date: Fri, 29 Jan 2021 13:36:54 +0100 Subject: [PATCH 01/11] Shows a preview message when media type is not supported --- .../src/components/VideoPreview/index.js | 68 +++++++++- .../src/components/VideoPreview/reducer.js | 3 + .../VideoPreview/tests/VideoPreview.test.js | 78 ++++++++++++ .../__snapshots__/VideoPreview.test.js.snap | 118 ++++++++++++++++++ .../admin/src/icons/File/index.js | 12 +- .../admin/src/translations/en.json | 4 + .../admin/src/translations/fr.json | 4 + test/config/front/strapi.js | 2 + 8 files changed, 282 insertions(+), 7 deletions(-) create mode 100644 packages/strapi-plugin-upload/admin/src/components/VideoPreview/tests/VideoPreview.test.js create mode 100644 packages/strapi-plugin-upload/admin/src/components/VideoPreview/tests/__snapshots__/VideoPreview.test.js.snap diff --git a/packages/strapi-plugin-upload/admin/src/components/VideoPreview/index.js b/packages/strapi-plugin-upload/admin/src/components/VideoPreview/index.js index deda4e2ea8..22fd13a508 100644 --- a/packages/strapi-plugin-upload/admin/src/components/VideoPreview/index.js +++ b/packages/strapi-plugin-upload/admin/src/components/VideoPreview/index.js @@ -1,18 +1,42 @@ import React, { useEffect, useReducer, useRef } from 'react'; import PropTypes from 'prop-types'; - +import styled from 'styled-components'; +import { FormattedMessage, useIntl } from 'react-intl'; import Duration from '../Duration'; import LoadingIndicator from '../LoadingIndicator'; import PlayIcon from '../PlayIcon'; import Wrapper from './Wrapper'; import CanvasWrapper from './CanvasWrapper'; import Thumbnail from './Thumbnail'; - import reducer, { initialState } from './reducer'; +import File from '../../icons/File'; +import getTrad from '../../utils/getTrad'; + +const EmptyPreviewTitle = styled.h3` + text-align: center; + color: ${({ theme }) => theme.main.colors.white}; + font-size: ${({ theme }) => theme.main.sizes.fonts.xl}; +`; + +const EmptyPreviewContent = styled.p` + font-size: ${({ theme }) => theme.main.sizes.fonts.xs}; + text-align: center; + color: ${({ theme }) => theme.main.colors.white}; + padding: 0 ${({ theme }) => theme.main.sizes.paddings.sm}; +`; const VideoPreview = ({ hasIcon, previewUrl, src }) => { + const { formatMessage } = useIntl(); const [reducerState, dispatch] = useReducer(reducer, initialState); - const { duration, dataLoaded, isHover, metadataLoaded, snapshot, seeked } = reducerState.toJS(); + const { + duration, + dataLoaded, + isHover, + metadataLoaded, + snapshot, + seeked, + isError, + } = reducerState.toJS(); // Adapted from https://github.com/brothatru/react-video-thumbnail/blob/master/src/components/VideoThumbnail.js // And from https://github.com/soupette/poc-video-preview @@ -51,6 +75,19 @@ const VideoPreview = ({ hasIcon, previewUrl, src }) => { } }, [dataLoaded, metadataLoaded, seeked, snapshot]); + if (isError) { + return ( +
+ + + + + + +
+ ); + } + return ( { }); }} > - {!snapshot && } + {!snapshot && ( + + )} + {previewUrl ? ( - + ) : ( <> diff --git a/packages/strapi-plugin-upload/admin/src/components/VideoPreview/reducer.js b/packages/strapi-plugin-upload/admin/src/components/VideoPreview/reducer.js index 3809dcf882..572d344abd 100644 --- a/packages/strapi-plugin-upload/admin/src/components/VideoPreview/reducer.js +++ b/packages/strapi-plugin-upload/admin/src/components/VideoPreview/reducer.js @@ -7,6 +7,7 @@ const initialState = fromJS({ metadataLoaded: false, seeked: false, snapshot: false, + isError: false, }); const videoReducer = (state, action) => { @@ -21,6 +22,8 @@ const videoReducer = (state, action) => { return state.update('isHover', () => action.isHover); case 'SET_SNAPSHOT': return state.update('snapshot', () => action.snapshot); + case 'SET_ERROR': + return state.update('isError', () => action.isError); default: return state; } diff --git a/packages/strapi-plugin-upload/admin/src/components/VideoPreview/tests/VideoPreview.test.js b/packages/strapi-plugin-upload/admin/src/components/VideoPreview/tests/VideoPreview.test.js new file mode 100644 index 0000000000..acec811ae0 --- /dev/null +++ b/packages/strapi-plugin-upload/admin/src/components/VideoPreview/tests/VideoPreview.test.js @@ -0,0 +1,78 @@ +import React from 'react'; +import { screen, render, fireEvent } from '@testing-library/react'; +import { ThemeProvider } from 'styled-components'; +import VideoPreview from '..'; +import themes from '../../../../../../strapi-admin/admin/src/themes'; + +jest.mock('react-intl', () => ({ + // eslint-disable-next-line react/prop-types + FormattedMessage: ({ id }) =>
{id}
, + useIntl: () => ({ + formatMessage: ({ id }) => id, + }), +})); + +describe('VideoPreview', () => { + it('shows its initial state with no props', () => { + const { container } = render( + + + + ); + + expect(container).toMatchSnapshot(); + }); + + it('shows a loading state when resolving the asset', () => { + render( + + + + ); + + expect(screen.getByLabelText('upload.list.assets.loading-asset')).toBeVisible(); + }); + + it('shows the thumbnail but not the video when previewURL is passed', () => { + const { container } = render( + + + + ); + + expect(screen.getByAltText('upload.list.assets.preview-asset')).toBeVisible(); + + expect(container.querySelector('video')).toBeFalsy(); + }); + + it('shows the video when the previewURL is not passed', () => { + const { container } = render( + + + + ); + + expect(container.querySelector('video')).toBeVisible(); + }); + + it('shows a fallback message when the video is in error', () => { + const { container } = render( + + + + ); + + fireEvent(container.querySelector('video'), new Event('error')); + + expect(screen.getByTitle('upload.list.assets.not-supported-title')).toBeTruthy(); + expect(screen.getByText('upload.list.assets.not-supported-content')).toBeVisible(); + }); +}); diff --git a/packages/strapi-plugin-upload/admin/src/components/VideoPreview/tests/__snapshots__/VideoPreview.test.js.snap b/packages/strapi-plugin-upload/admin/src/components/VideoPreview/tests/__snapshots__/VideoPreview.test.js.snap new file mode 100644 index 0000000000..03dae6bbc5 --- /dev/null +++ b/packages/strapi-plugin-upload/admin/src/components/VideoPreview/tests/__snapshots__/VideoPreview.test.js.snap @@ -0,0 +1,118 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`VideoPreview shows its initial state with no props 1`] = ` +.c3 { + margin: 0; + line-height: normal; + color: #ffffff; + font-size: 13px; + font-weight: 500; + text-transform: none; +} + +.c4 { + position: absolute; + bottom: 10px; + right: 10px; + padding: 3px 5px; + border-radius: 2px; + background-color: #333740; +} + +.c1 { + position: relative; + width: 44%; + height: 4px; + overflow: hidden; + background-color: #515764; + border-radius: 2px; +} + +.c1:before { + content: ''; + display: block; + position: absolute; + left: -100px; + width: 100px; + height: 4px; + background-color: #b3b5b9; + -webkit-animation: gPeyzP 2s linear infinite; + animation: gPeyzP 2s linear infinite; +} + +.c0 { + position: relative; + width: 100%; + height: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + +.c0 video { + display: none; +} + +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.c2 canvas { + display: block; + max-width: 100%; + max-height: 100%; + width: auto; + height: auto; + margin: auto; +} + +
+
+
+
+
+
+
+`; diff --git a/packages/strapi-plugin-upload/admin/src/icons/File/index.js b/packages/strapi-plugin-upload/admin/src/icons/File/index.js index 144c66955f..814d59e657 100644 --- a/packages/strapi-plugin-upload/admin/src/icons/File/index.js +++ b/packages/strapi-plugin-upload/admin/src/icons/File/index.js @@ -1,8 +1,10 @@ import React from 'react'; +import PropTypes from 'prop-types'; -const File = props => { +const File = ({ title, ...props }) => { return ( + {title} { ); }; +File.defaultProps = { + title: '', +}; + +File.propTypes = { + title: PropTypes.string, +}; + export default File; diff --git a/packages/strapi-plugin-upload/admin/src/translations/en.json b/packages/strapi-plugin-upload/admin/src/translations/en.json index 9845cdab28..e41fe6176b 100644 --- a/packages/strapi-plugin-upload/admin/src/translations/en.json +++ b/packages/strapi-plugin-upload/admin/src/translations/en.json @@ -35,6 +35,10 @@ "list.assets.selected.plural": "{number} assets selected", "list.assets.selected.singular": "{number} asset selected", "list.assets.type-not-allowed": "This type of file is not allowed.", + "list.assets.not-supported-title": "Media not supported", + "list.assets.not-supported-content": "Preview doesn't not support this media content.", + "list.assets.loading-asset": "Loading the preview for the media: {path}", + "list.assets.preview-asset": "Preview for the video at path {path}", "modal.file-details.date": "Date", "modal.file-details.dimensions": "Dimensions", "modal.file-details.extension": "Extension", diff --git a/packages/strapi-plugin-upload/admin/src/translations/fr.json b/packages/strapi-plugin-upload/admin/src/translations/fr.json index 5b51121d14..8bd4fbbbf1 100644 --- a/packages/strapi-plugin-upload/admin/src/translations/fr.json +++ b/packages/strapi-plugin-upload/admin/src/translations/fr.json @@ -35,6 +35,10 @@ "list.assets.selected.plural": "{number} médias sélectionnés", "list.assets.selected.singular": "{number} média sélectionné", "list.assets.type-not-allowed": "Ce type de fichier n'est pas autorisé.", + "list.assets.not-supported-title": "Media non supporté", + "list.assets.not-supported-content": "Ce type de contenu n'est pas supporté par la preview.", + "list.assets.loading-asset": "Chargement du contenu pour le media {path}", + "list.assets.preview-asset": "Preview de la vidéo {path}", "modal.file-details.date": "Date", "modal.file-details.dimensions": "Dimensions", "modal.file-details.extension": "Extension", diff --git a/test/config/front/strapi.js b/test/config/front/strapi.js index 182c0a6e71..1ea0728f8d 100644 --- a/test/config/front/strapi.js +++ b/test/config/front/strapi.js @@ -7,6 +7,8 @@ // Setup the strapi functioon global variable +import '@testing-library/jest-dom/extend-expect'; + const React = require('react'); const hoistNonReactStatics = require('hoist-non-react-statics'); From 59f0c4f30dd8fc651939dc63fd56c0b8f42b2660 Mon Sep 17 00:00:00 2001 From: mfrachet Date: Fri, 29 Jan 2021 14:25:55 +0100 Subject: [PATCH 02/11] Add test for reducer --- .../components/VideoPreview/tests/reducer.test.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/packages/strapi-plugin-upload/admin/src/components/VideoPreview/tests/reducer.test.js b/packages/strapi-plugin-upload/admin/src/components/VideoPreview/tests/reducer.test.js index 86e79360c7..5d7c5ce591 100644 --- a/packages/strapi-plugin-upload/admin/src/components/VideoPreview/tests/reducer.test.js +++ b/packages/strapi-plugin-upload/admin/src/components/VideoPreview/tests/reducer.test.js @@ -79,4 +79,17 @@ describe('Upload | components | VideoPreview | reducer', () => { expect(reducer(state, action)).toEqual(expectedState); }); + + it('should set isError to true when the payload is true', () => { + const state = initialState; + + const action = { + type: 'SET_ERROR', + isError: true, + }; + + const expectedState = state.set('isError', true); + + expect(reducer(state, action)).toEqual(expectedState); + }); }); From 326f6d8d518a1be6b636a14da059fae34d3f5bb9 Mon Sep 17 00:00:00 2001 From: mfrachet Date: Fri, 29 Jan 2021 15:24:57 +0100 Subject: [PATCH 03/11] Increasing padding bottom to prevent question button from overlapping --- .../admin/src/components/Container/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/strapi-plugin-content-manager/admin/src/components/Container/index.js b/packages/strapi-plugin-content-manager/admin/src/components/Container/index.js index 74a5fae189..b5c9ceee0a 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/Container/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/Container/index.js @@ -1,7 +1,7 @@ import styled from 'styled-components'; const Container = styled.div` - padding: 18px 30px 18px 30px; + padding: 18px 30px 66px 30px; `; export default Container; From 3e1b8a0364f20a46e91dc4715efbb7fa9211869b Mon Sep 17 00:00:00 2001 From: mfrachet Date: Fri, 29 Jan 2021 16:28:56 +0100 Subject: [PATCH 04/11] Reducing the amount of things pushed --- .../src/components/VideoPreview/index.js | 28 ++++++------------- .../VideoPreview/tests/VideoPreview.test.js | 1 - .../admin/src/icons/File/index.js | 12 +------- .../admin/src/translations/en.json | 3 +- .../admin/src/translations/fr.json | 3 +- 5 files changed, 11 insertions(+), 36 deletions(-) diff --git a/packages/strapi-plugin-upload/admin/src/components/VideoPreview/index.js b/packages/strapi-plugin-upload/admin/src/components/VideoPreview/index.js index 22fd13a508..887bc49b06 100644 --- a/packages/strapi-plugin-upload/admin/src/components/VideoPreview/index.js +++ b/packages/strapi-plugin-upload/admin/src/components/VideoPreview/index.js @@ -9,20 +9,13 @@ import Wrapper from './Wrapper'; import CanvasWrapper from './CanvasWrapper'; import Thumbnail from './Thumbnail'; import reducer, { initialState } from './reducer'; -import File from '../../icons/File'; import getTrad from '../../utils/getTrad'; -const EmptyPreviewTitle = styled.h3` - text-align: center; - color: ${({ theme }) => theme.main.colors.white}; - font-size: ${({ theme }) => theme.main.sizes.fonts.xl}; -`; - -const EmptyPreviewContent = styled.p` - font-size: ${({ theme }) => theme.main.sizes.fonts.xs}; - text-align: center; - color: ${({ theme }) => theme.main.colors.white}; - padding: 0 ${({ theme }) => theme.main.sizes.paddings.sm}; +const EmptyPreview = styled.div` + display: flex; + align-items: center; + justify-content: center; + color: ${({ theme }) => theme.main.colors.grey}; `; const VideoPreview = ({ hasIcon, previewUrl, src }) => { @@ -77,14 +70,9 @@ const VideoPreview = ({ hasIcon, previewUrl, src }) => { if (isError) { return ( -
- - - - - - -
+ + + ); } diff --git a/packages/strapi-plugin-upload/admin/src/components/VideoPreview/tests/VideoPreview.test.js b/packages/strapi-plugin-upload/admin/src/components/VideoPreview/tests/VideoPreview.test.js index acec811ae0..fbea94daa7 100644 --- a/packages/strapi-plugin-upload/admin/src/components/VideoPreview/tests/VideoPreview.test.js +++ b/packages/strapi-plugin-upload/admin/src/components/VideoPreview/tests/VideoPreview.test.js @@ -72,7 +72,6 @@ describe('VideoPreview', () => { fireEvent(container.querySelector('video'), new Event('error')); - expect(screen.getByTitle('upload.list.assets.not-supported-title')).toBeTruthy(); expect(screen.getByText('upload.list.assets.not-supported-content')).toBeVisible(); }); }); diff --git a/packages/strapi-plugin-upload/admin/src/icons/File/index.js b/packages/strapi-plugin-upload/admin/src/icons/File/index.js index 814d59e657..144c66955f 100644 --- a/packages/strapi-plugin-upload/admin/src/icons/File/index.js +++ b/packages/strapi-plugin-upload/admin/src/icons/File/index.js @@ -1,10 +1,8 @@ import React from 'react'; -import PropTypes from 'prop-types'; -const File = ({ title, ...props }) => { +const File = props => { return ( - {title} { ); }; -File.defaultProps = { - title: '', -}; - -File.propTypes = { - title: PropTypes.string, -}; - export default File; diff --git a/packages/strapi-plugin-upload/admin/src/translations/en.json b/packages/strapi-plugin-upload/admin/src/translations/en.json index e41fe6176b..823a9ee394 100644 --- a/packages/strapi-plugin-upload/admin/src/translations/en.json +++ b/packages/strapi-plugin-upload/admin/src/translations/en.json @@ -35,8 +35,7 @@ "list.assets.selected.plural": "{number} assets selected", "list.assets.selected.singular": "{number} asset selected", "list.assets.type-not-allowed": "This type of file is not allowed.", - "list.assets.not-supported-title": "Media not supported", - "list.assets.not-supported-content": "Preview doesn't not support this media content.", + "list.assets.not-supported-content": "No preview available", "list.assets.loading-asset": "Loading the preview for the media: {path}", "list.assets.preview-asset": "Preview for the video at path {path}", "modal.file-details.date": "Date", diff --git a/packages/strapi-plugin-upload/admin/src/translations/fr.json b/packages/strapi-plugin-upload/admin/src/translations/fr.json index 8bd4fbbbf1..536256bd2c 100644 --- a/packages/strapi-plugin-upload/admin/src/translations/fr.json +++ b/packages/strapi-plugin-upload/admin/src/translations/fr.json @@ -35,8 +35,7 @@ "list.assets.selected.plural": "{number} médias sélectionnés", "list.assets.selected.singular": "{number} média sélectionné", "list.assets.type-not-allowed": "Ce type de fichier n'est pas autorisé.", - "list.assets.not-supported-title": "Media non supporté", - "list.assets.not-supported-content": "Ce type de contenu n'est pas supporté par la preview.", + "list.assets.not-supported-content": "Preview non disponible", "list.assets.loading-asset": "Chargement du contenu pour le media {path}", "list.assets.preview-asset": "Preview de la vidéo {path}", "modal.file-details.date": "Date", From 2da67ed76a363793760e433a83f09b73b2cdd016 Mon Sep 17 00:00:00 2001 From: mfrachet Date: Fri, 29 Jan 2021 16:35:09 +0100 Subject: [PATCH 05/11] Modifying font size --- .../admin/src/components/VideoPreview/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/strapi-plugin-upload/admin/src/components/VideoPreview/index.js b/packages/strapi-plugin-upload/admin/src/components/VideoPreview/index.js index 887bc49b06..6f9bf3419c 100644 --- a/packages/strapi-plugin-upload/admin/src/components/VideoPreview/index.js +++ b/packages/strapi-plugin-upload/admin/src/components/VideoPreview/index.js @@ -15,6 +15,7 @@ const EmptyPreview = styled.div` display: flex; align-items: center; justify-content: center; + font-size: ${({ theme }) => theme.main.sizes.fonts.xs}; color: ${({ theme }) => theme.main.colors.grey}; `; From e1b7c8b67cd1545df7a88dd22347a556e1f70dfc Mon Sep 17 00:00:00 2001 From: soupette Date: Fri, 29 Jan 2021 16:58:04 +0100 Subject: [PATCH 06/11] Fixes #9259 Signed-off-by: soupette --- .../admin/src/components/InputUID/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/strapi-plugin-content-manager/admin/src/components/InputUID/index.js b/packages/strapi-plugin-content-manager/admin/src/components/InputUID/index.js index a978c41f62..6d282f64cb 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/InputUID/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/InputUID/index.js @@ -42,6 +42,7 @@ const InputUID = ({ contentTypeUID, description, error: inputError, + label: inputLabel, name, onChange, validations, @@ -217,7 +218,7 @@ const InputUID = ({ return ( - {name} + {inputLabel}