listview video preview ip

Signed-off-by: Virginie Ky <virginie.ky@gmail.com>

packages/strapi-plugin-upload/admin/src/components/CardPreview/index.js

@@ -5,11 +5,13 @@ import { getExtension, getType } from '../../utils';
 
 import BrokenFile from '../../icons/BrokenFile';
 import FileIcon from '../FileIcon';
+import VideoPreview from '../VideoPreview';
 import Wrapper from './Wrapper';
 import Image from './Image';
 
 const CardPreview = ({ hasError, url, type }) => {
   const isFile = getType(type) === 'file';
+  const isVideo = getType(type) === 'video';
 
   if (hasError) {
     return (
@@ -19,9 +21,27 @@ const CardPreview = ({ hasError, url, type }) => {
     );
   }
 
+  if (isFile) {
+    return (
+      <Wrapper isFile>
+        <FileIcon ext={getExtension(type)} />
+      </Wrapper>
+    );
+  }
+
   return (
-    <Wrapper isFile={isFile}>
-      {isFile ? <FileIcon ext={getExtension(type)} /> : <Image src={url} />}
+    <Wrapper>
+      {isVideo ? (
+        <VideoPreview
+          src={url}
+          thumebnailHandler={thumbnail => console.log(thumbnail)}
+          // width={120}
+          // height={80}
+          snapshotAtTime={0}
+        />
+      ) : (
+        <Image src={url} />
+      )}
     </Wrapper>
   );
 };

packages/strapi-plugin-upload/admin/src/components/InfiniteLoadingIndicator/Container.js

@@ -1,11 +1,12 @@
 import styled from 'styled-components';
 
 const Container = styled.div`
-  width: 44%;
-  text-align: center;
+  width: 100%;
   display: flex;
-  flex-direction: column;
   margin: auto;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 32px;
 `;
 
 export default Container;

packages/strapi-plugin-upload/admin/src/components/InfiniteLoadingIndicator/index.js

@@ -2,17 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ClearIcon } from 'strapi-helper-plugin';
 
+import LoadingIndicator from '../LoadingIndicator';
 import IntlText from '../IntlText';
 import Button from './Button';
 import Container from './Container';
-import Indicator from './Indicator';
 import Wrapper from './Wrapper';
 
 const InfiniteLoadingIndicator = ({ onClick }) => {
   return (
     <Wrapper>
       <Container>
-        <Indicator />
+        <LoadingIndicator />
         <Button type="button" onClick={onClick}>
           <IntlText
             as="span"

packages/strapi-plugin-upload/admin/src/components/LoadingIndicator/index.js

@@ -22,14 +22,13 @@ to {
 }
 `;
 
-const Indicator = styled.div`
+const LoadingIndicator = styled.div`
   position: relative;
-  width: 100%;
+  width: 44%;
   height: 4px;
   overflow: hidden;
   background-color: #515764;
   border-radius: 2px;
-  margin-top: 32px;
   &:before {
     content: '';
     display: block;
@@ -42,4 +41,4 @@ const Indicator = styled.div`
   }
 `;
 
-export default Indicator;
+export default LoadingIndicator;

packages/strapi-plugin-upload/admin/src/components/UploadList/Container.js

@@ -7,12 +7,7 @@ const Container = styled(ContainerFluid)`
   max-height: 339px;
   overflow: auto;
   overflow-x: hidden;
-  .col-xl-3 {
-    padding-right: 6px;
-    &:last-of-type {
-      padding-right: 15px;
-    }
-  }
+  padding-right: 6px;
 `;
 
 export default Container;

packages/strapi-plugin-upload/admin/src/components/VideoPreview/Wrapper.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export default Wrapper;

packages/strapi-plugin-upload/admin/src/components/VideoPreview/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import LoadingIndicator from '../LoadingIndicator';
+
+import Wrapper from './Wrapper';
+
+const VideoPreview = ({ url }) => {
+  return (
+    <Wrapper>
+      <LoadingIndicator />
+      {url}
+    </Wrapper>
+  );
+};
+
+VideoPreview.defaultProps = {
+  url: null,
+};
+
+VideoPreview.propTypes = {
+  url: PropTypes.string,
+};
+
+export default VideoPreview;