PreviewCell video support + props refactor

packages/core/upload/admin/src/components/TableList/CellContent.js

@@ -8,30 +8,13 @@ import { Typography } from '@strapi/design-system/Typography';
 import { PreviewCell } from './PreviewCell';
 import { formatBytes } from '../../utils';
 
-export const CellContent = ({
-  alternativeText,
-  content,
-  cellType,
-  elementType,
-  mime,
-  fileExtension,
-  thumbnailURL,
-  url,
-}) => {
+export const CellContent = ({ content, cellType, elementType, element }) => {
   const { formatDate, formatMessage } = useIntl();
 
   switch (cellType) {
     case 'image':
-      return (
-        <PreviewCell
-          alternativeText={alternativeText}
-          fileExtension={fileExtension}
-          mime={mime}
-          type={elementType}
-          thumbnailURL={thumbnailURL}
-          url={url}
-        />
-      );
+      return <PreviewCell type={elementType} element={element} />;
+
     case 'date':
       return <Typography>{formatDate(parseISO(content), { dateStyle: 'full' })}</Typography>;
 
@@ -83,21 +66,22 @@ export const CellContent = ({
 };
 
 CellContent.defaultProps = {
-  alternativeText: null,
   content: '',
-  fileExtension: '',
-  mime: '',
-  thumbnailURL: null,
-  url: null,
 };
 
 CellContent.propTypes = {
-  alternativeText: PropTypes.string,
   content: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  fileExtension: PropTypes.string,
-  mime: PropTypes.string,
-  thumbnailURL: PropTypes.string,
   cellType: PropTypes.string.isRequired,
   elementType: PropTypes.string.isRequired,
-  url: PropTypes.string,
+  element: PropTypes.shape({
+    alternativeText: PropTypes.string,
+    ext: PropTypes.string,
+    formats: PropTypes.shape({
+      thumbnail: PropTypes.shape({
+        url: PropTypes.string,
+      }),
+    }),
+    mime: PropTypes.string,
+    url: PropTypes.string,
+  }).isRequired,
 };

packages/core/upload/admin/src/components/TableList/PreviewCell.js

@@ -1,13 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { prefixFileUrlWithBackendUrl, pxToRem } from '@strapi/helper-plugin';
+import { getFileExtension, prefixFileUrlWithBackendUrl, pxToRem } from '@strapi/helper-plugin';
 import { Avatar } from '@strapi/design-system/Avatar';
 import { Flex } from '@strapi/design-system/Flex';
+import { Box } from '@strapi/design-system/Box';
 import { Typography } from '@strapi/design-system/Typography';
 import { Icon } from '@strapi/design-system/Icon';
 import Folder from '@strapi/icons/Folder';
 
+import { AssetType } from '../../constants';
+import { createAssetUrl } from '../../utils';
+import { VideoPreview } from '../AssetCard/VideoPreview';
+
 const GenericAssetWrapper = styled(Flex)`
   span {
     /* The smallest fontSize in the DS is not small enough in this case */
@@ -15,7 +20,23 @@ const GenericAssetWrapper = styled(Flex)`
   }
 `;
 
-export const PreviewCell = ({ alternativeText, fileExtension, mime, thumbnailURL, type, url }) => {
+// Temp: Avatar should support video preview
+const VideoPreviewWrapper = styled(Box)`
+  figure {
+    width: 26px;
+    height: 26px;
+  }
+
+  canvas,
+  video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 50%;
+  }
+`;
+
+export const PreviewCell = ({ type, element }) => {
   if (type === 'folder') {
     return (
       <Flex
@@ -30,12 +51,28 @@ export const PreviewCell = ({ alternativeText, fileExtension, mime, thumbnailURL
     );
   }
 
-  if (mime.includes('image')) {
-    const mediaURL = prefixFileUrlWithBackendUrl(thumbnailURL) ?? prefixFileUrlWithBackendUrl(url);
+  const { alternativeText, ext, formats, mime, url } = element;
+
+  if (mime.includes(AssetType.Image)) {
+    const mediaURL =
+      prefixFileUrlWithBackendUrl(formats?.thumbnail?.url) ?? prefixFileUrlWithBackendUrl(url);
 
     return <Avatar src={mediaURL} alt={alternativeText} preview />;
   }
 
+  if (mime.includes(AssetType.Video)) {
+    return (
+      <VideoPreviewWrapper>
+        <VideoPreview
+          url={createAssetUrl(element, true)}
+          mime={mime}
+          onLoadDuration={() => {}}
+          alt={alternativeText}
+        />
+      </VideoPreviewWrapper>
+    );
+  }
+
   return (
     <GenericAssetWrapper
       background="secondary100"
@@ -45,25 +82,23 @@ export const PreviewCell = ({ alternativeText, fileExtension, mime, thumbnailURL
       borderRadius="50%"
     >
       <Typography variant="sigma" textColor="secondary600">
-        {fileExtension}
+        {getFileExtension(ext)}
       </Typography>
     </GenericAssetWrapper>
   );
 };
 
-PreviewCell.defaultProps = {
-  alternativeText: null,
-  fileExtension: '',
-  mime: '',
-  thumbnailURL: null,
-  url: null,
-};
-
 PreviewCell.propTypes = {
-  alternativeText: PropTypes.string,
-  fileExtension: PropTypes.string,
-  mime: PropTypes.string,
-  thumbnailURL: PropTypes.string,
+  element: PropTypes.shape({
+    alternativeText: PropTypes.string,
+    ext: PropTypes.string,
+    formats: PropTypes.shape({
+      thumbnail: PropTypes.shape({
+        url: PropTypes.string,
+      }),
+    }),
+    mime: PropTypes.string,
+    url: PropTypes.string,
+  }).isRequired,
   type: PropTypes.string.isRequired,
-  url: PropTypes.string,
 };

packages/core/upload/admin/src/components/TableList/TableRows.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
-import { getFileExtension, onRowClick, stopPropagation } from '@strapi/helper-plugin';
+import { onRowClick, stopPropagation } from '@strapi/helper-plugin';
 import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
 import { Flex } from '@strapi/design-system/Flex';
 import { IconButton } from '@strapi/design-system/IconButton';
@@ -35,18 +35,7 @@ export const TableRows = ({
   return (
     <Tbody>
       {rows.map((element) => {
-        const {
-          alternativeText,
-          id,
-          isSelectable,
-          name,
-          ext,
-          url,
-          mime,
-          folderURL,
-          formats,
-          type: elementType,
-        } = element;
+        const { id, isSelectable, name, folderURL, type: elementType } = element;
 
         const isSelected = !!selected.find((currentRow) => currentRow.id === id);
 
@@ -76,14 +65,10 @@ export const TableRows = ({
               return (
                 <Td key={name}>
                   <CellContent
-                    alternativeText={alternativeText}
                     content={element[name]}
-                    fileExtension={getFileExtension(ext)}
-                    mime={mime}
                     cellType={cellType}
                     elementType={elementType}
-                    thumbnailURL={formats?.thumbnail?.url}
-                    url={url}
+                    element={element}
                   />
                 </Td>
               );

packages/core/upload/admin/src/components/TableList/tests/CellContent.test.js

@@ -6,14 +6,20 @@ import { ThemeProvider, lightTheme } from '@strapi/design-system';
 import { CellContent } from '../CellContent';
 
 const PROPS_FIXTURE = {
-  alternativeText: 'alternative alt',
   cellType: 'image',
   elementType: 'asset',
   content: 'michka-picture-url-default.jpeg',
-  fileExtension: '.jpeg',
-  mime: 'image/jpeg',
-  thumbnailURL: 'michka-picture-url-thumbnail.jpeg',
-  url: 'michka-picture-url-default.jpeg',
+  element: {
+    alternativeText: 'alternative alt',
+    ext: 'jpeg',
+    formats: {
+      thumbnail: {
+        url: 'michka-picture-url-thumbnail.jpeg',
+      },
+    },
+    mime: 'image/jpeg',
+    url: 'michka-picture-url-default.jpeg',
+  },
 };
 
 const ComponentFixture = (props) => {
@@ -42,7 +48,9 @@ describe('TableList | CellContent', () => {
   });
 
   it('should render image cell type when element type is asset and mime does not include image', () => {
-    const { container, getByText } = setup({ mime: 'application/pdf', fileExtension: 'pdf' });
+    const { container, getByText } = setup({
+      element: { ...PROPS_FIXTURE.element, mime: 'application/pdf', ext: 'pdf' },
+    });
 
     expect(getByText('pdf')).toBeInTheDocument();
     expect(container).toMatchSnapshot();

packages/core/upload/admin/src/components/TableList/tests/PreviewCell.test.js

@@ -5,12 +5,17 @@ import { ThemeProvider, lightTheme } from '@strapi/design-system';
 import { PreviewCell } from '../PreviewCell';
 
 const PROPS_FIXTURE = {
-  alternativeText: 'alternative alt',
-  fileExtension: 'jpeg',
-  mime: 'image/jpeg',
-  name: 'michka',
-  thumbnailURL: 'michka-picture-url-thumbnail.jpeg',
-  url: 'michka-picture-url-default.jpeg',
+  element: {
+    alternativeText: 'alternative alt',
+    ext: 'jpeg',
+    formats: {
+      thumbnail: {
+        url: 'michka-picture-url-thumbnail.jpeg',
+      },
+    },
+    mime: 'image/jpeg',
+    url: 'michka-picture-url-default.jpeg',
+  },
   type: 'asset',
 };
 
@@ -41,7 +46,7 @@ describe('TableList | PreviewCell', () => {
     });
 
     it('should render an image with default url if thumbnail is not available', () => {
-      const { getByRole } = setup({ thumbnailURL: undefined });
+      const { getByRole } = setup({ element: { ...PROPS_FIXTURE.element, formats: undefined } });
 
       expect(getByRole('img', { name: 'alternative alt' })).toHaveAttribute(
         'src',
@@ -59,7 +64,9 @@ describe('TableList | PreviewCell', () => {
 
   describe('rendering files', () => {
     it('should render a file with fileExtension', () => {
-      const { getByText } = setup({ mime: 'application/pdf', fileExtension: 'pdf' });
+      const { getByText } = setup({
+        element: { ...PROPS_FIXTURE.element, mime: 'application/pdf', ext: 'pdf' },
+      });
 
       expect(getByText('pdf')).toBeInTheDocument();
     });