From 931912868d142848190f75da7ddcd1e0adfd1e24 Mon Sep 17 00:00:00 2001
From: willferreiras <willferreiras1993@gmail.com>
Date: Tue, 19 Oct 2021 17:46:30 -0300
Subject: [PATCH] refactor: add automatically generated thumb on aws server to
 video

---
 packages/web/components/Form/FileDrop.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/web/components/Form/FileDrop.tsx b/packages/web/components/Form/FileDrop.tsx
index fed6510..8dd3066 100644
--- a/packages/web/components/Form/FileDrop.tsx
+++ b/packages/web/components/Form/FileDrop.tsx
@@ -85,6 +85,9 @@ const ThumbImage = styled.img`
 `;
 
 const VideoThumb = styled(PlayArrow)`
+  position: absolute;
+  z-index: 2;
+  elevation: 2;
   width: 50%;
   height: 50%;
   cursor: pointer;
@@ -275,6 +278,10 @@ export default function FileDrop({
     setSelectedVideo(file);
   }
 
+  const getVideoThumbnailURL = useCallback((file: any) => {
+    return `${file?.url?.substr(0, file?.url?.lastIndexOf('.'))}-thumbnail-0.jpg` || file?.url;
+  }, []);
+
   const FileThumb = ({ file }: { file: MediaFile }) => {
     switch (file?.type?.substr(0,5)) {
       case 'image':
@@ -283,7 +290,12 @@ export default function FileDrop({
           src={file?.url}
         />;
       case 'video':
-        return <VideoThumb onClick={() => handleClickVideo(file)} />;
+        return <>
+          <ThumbImage
+            alt={file?.name}
+            src={getVideoThumbnailURL(file)} />
+          <VideoThumb onClick={() => handleClickVideo(file)} />
+        </>
       default:
         return <InsertDriveFile style={{ width: '50%', height: '50%' }} />;
     }