fix: bytes thumbnail (#597)

* fix: bytes thumbnail * chore: cleanup
tapexyz · Feb 9, 2023 · df14cad · df14cad · vercel · Feb 9, 2023
1 parent 338a9b2
commit df14cad
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 16 deletions.
diff --git a/apps/web/src/components/Channel/BasicInfo/index.tsx b/apps/web/src/components/Channel/BasicInfo/index.tsx
@@ -27,14 +27,13 @@ const BasicInfo: FC<Props> = ({ channel }) => {
 
   const isOwnChannel = channel?.id === selectedChannel?.id
   const subscribeType = channel?.followModule?.__typename
+  const coverImage = imageCdn(sanitizeIpfsUrl(getChannelCoverPicture(channel)))
 
   return (
     <>
       <div
         style={{
-          backgroundImage: `url(${imageCdn(
-            sanitizeIpfsUrl(getChannelCoverPicture(channel))
-          )})`
+          backgroundImage: `url(${coverImage})`
         }}
         className="ultrawide:h-[35vh] relative h-44 w-full bg-white bg-cover bg-center bg-no-repeat dark:bg-gray-900 md:h-[20vw]"
       >

diff --git a/apps/web/src/components/Common/VideoCard/QueuedVideo.tsx b/apps/web/src/components/Common/VideoCard/QueuedVideo.tsx
@@ -17,6 +17,7 @@ import { STATIC_ASSETS } from 'utils'
 import getProfilePicture from 'utils/functions/getProfilePicture'
 import imageCdn from 'utils/functions/imageCdn'
 import sanitizeIpfsUrl from 'utils/functions/sanitizeIpfsUrl'
+import useAverageColor from 'utils/hooks/useAverageColor'
 
 import IsVerified from '../IsVerified'
 
@@ -41,6 +42,10 @@ const QueuedVideo: FC<Props> = ({ queuedVideo }) => {
       : sanitizeIpfsUrl(queuedVideo.thumbnailUrl),
     uploadedVideo.isByteVideo ? 'thumbnail_v' : 'thumbnail'
   )
+  const { color: backgroundColor } = useAverageColor(
+    thumbnailUrl,
+    uploadedVideo.isByteVideo
+  )
 
   const removeFromQueue = () => {
     setUploadedVideo(UPLOADED_VIDEO_FORM_DEFAULTS)
@@ -114,17 +119,22 @@ const QueuedVideo: FC<Props> = ({ queuedVideo }) => {
 
   return (
     <div className="cursor-wait">
-      <div className="aspect-w-16 aspect-h-9 relative overflow-hidden">
-        <img
-          src={thumbnailUrl}
-          draggable={false}
-          className={clsx(
-            'h-full w-full bg-gray-100 object-center dark:bg-gray-900 md:rounded-xl lg:h-full lg:w-full',
-            uploadedVideo.isByteVideo ? 'object-contain' : 'object-cover'
-          )}
-          alt="thumbnail"
-        />
-      </div>
+      <Tooltip content="Indexing, please wait..." placement="top">
+        <div className="aspect-w-16 aspect-h-9 relative overflow-hidden">
+          <img
+            src={thumbnailUrl}
+            className={clsx(
+              'h-full w-full bg-gray-100 object-center dark:bg-gray-900 md:rounded-xl lg:h-full lg:w-full',
+              uploadedVideo.isByteVideo ? 'object-contain' : 'object-cover'
+            )}
+            style={{
+              backgroundColor: backgroundColor && `${backgroundColor}95`
+            }}
+            alt="thumbnail"
+            draggable={false}
+          />
+        </div>
+      </Tooltip>
       <div className="py-2">
         <div className="flex items-start space-x-2.5">
           <img

diff --git a/apps/web/src/components/Upload/ChooseThumbnail.tsx b/apps/web/src/components/Upload/ChooseThumbnail.tsx
@@ -199,7 +199,7 @@ const ChooseThumbnail: FC<Props> = ({ label, afterUpload, file }) => {
                 selectedThumbnailIndex === idx && (
                   <div className="absolute top-1 right-1">
                     <span>
-                      <Loader size="sm" className="!text-white" />
+                      <Loader size="sm" />
                     </span>
                   </div>
                 )}

diff --git a/packages/utils/functions/uploadToIPFS.ts b/packages/utils/functions/uploadToIPFS.ts
@@ -28,7 +28,7 @@ export const everland = async (
         secretAccessKey: token.data?.secretAccessKey,
         sessionToken: token.data?.sessionToken
       },
-      maxAttempts: 3
+      maxAttempts: 5
     })
     const fileKey = uuidv4()
     const params = {