added video thumbnails

src/components/dom/common/Carousel/Carousel.tsx

@@ -36,9 +36,7 @@ const Carousel: React.FC = () => {
               )}
               key={index}
             >
-              {media.type === 'video' && (
-                <Video src={media.src} autoplay loop controls={false} poster={placeholderImage.src} />
-              )}
+              {media.type === 'video' && <Video src={media.src} autoplay loop controls={false} poster={media.poster} />}
               {media.type === 'img' && <Image src={media.src} alt={media.alt} fill className='h-full object-cover' />}
             </div>
           ))}

src/core/data/projects.ts

@@ -4,6 +4,7 @@ export type TMedia = {
   src: string
   alt: string
   type: 'img' | 'video'
+  poster: string
 }
 
 export interface IProject {
@@ -39,8 +40,13 @@ export const projects: Record<string, IProject> = {
     twFade: 'from-[#bb63c7]',
     twBg: 'bg-indigo-400 bg-opacity-70',
     media: [
-      { src: '/video/triptych-video.mp4', alt: 'triptych-1', type: 'video' },
-      { src: '/video/triptych-video-2.mp4', alt: 'triptych-2', type: 'video' },
+      { src: '/video/triptych-video.mp4', alt: 'triptych-1', type: 'video', poster: '/img/thumbnails/triptych-1.png' },
+      {
+        src: '/video/triptych-video-2.mp4',
+        alt: 'triptych-2',
+        type: 'video',
+        poster: '/img/thumbnails/triptych-2.png',
+      },
     ],
   },
   'robin-knows': {
@@ -68,8 +74,18 @@ export const projects: Record<string, IProject> = {
     href: 'https://www.robinknows.app',
     twColor: 'group-hover:text-[#FE906A]',
     media: [
-      { src: '/video/robin-video.mp4', alt: 'robin-knows-1', type: 'video' },
-      { src: '/video/robin-video-2.mp4', alt: 'robin-knows-2', type: 'video' },
+      {
+        src: '/video/robin-video.mp4',
+        alt: 'robin-knows-1',
+        type: 'video',
+        poster: '/img/thumbnails/robinknows-1.png',
+      },
+      {
+        src: '/video/robin-video-2.mp4',
+        alt: 'robin-knows-2',
+        type: 'video',
+        poster: '/img/thumbnails/robinknows-2.png',
+      },
     ],
   },
   fbi: {
@@ -88,8 +104,8 @@ export const projects: Record<string, IProject> = {
     twFade: 'from-cyan-500',
     twBg: 'bg-cyan-500 bg-opacity-50',
     media: [
-      { src: '/video/fbi-video.mp4', alt: 'fbi-1', type: 'video' },
-      { src: '/video/fbi-video-2.mp4', alt: 'fbi-2', type: 'video' },
+      { src: '/video/fbi-video.mp4', alt: 'fbi-1', type: 'video', poster: '/img/thumbnails/fbi-1.png' },
+      { src: '/video/fbi-video-2.mp4', alt: 'fbi-2', type: 'video', poster: '/img/thumbnails/fbi-2.png' },
     ],
   },
   meta: {
@@ -108,8 +124,8 @@ export const projects: Record<string, IProject> = {
     twFade: 'from-sky-600',
     twBg: 'bg-sky-300 bg-opacity-50',
     media: [
-      { src: '/video/meta-video.mp4', alt: 'meta-1', type: 'video' },
-      { src: '/video/meta-video-2.mp4', alt: 'meta-2', type: 'video' },
+      { src: '/video/meta-video.mp4', alt: 'meta-1', type: 'video', poster: '/img/thumbnails/meta-1.png' },
+      { src: '/video/meta-video-2.mp4', alt: 'meta-2', type: 'video', poster: '/img/thumbnails/meta-2.png' },
     ],
   },
   northface: {
@@ -128,8 +144,8 @@ export const projects: Record<string, IProject> = {
     twFade: 'from-zinc-300',
     twBg: 'bg-amber-500 bg-opacity-50',
     media: [
-      { src: '/video/nf1.mp4', alt: 'northface-1', type: 'video' },
-      { src: '/video/nf2.mp4', alt: 'northface-2', type: 'video' },
+      { src: '/video/nf1.mp4', alt: 'northface-1', type: 'video', poster: '/img/thumbnails/nf-1.png' },
+      { src: '/video/nf2.mp4', alt: 'northface-2', type: 'video', poster: '/img/thumbnails/nf-2.png' },
     ],
   },
   sanctavia: {
@@ -147,8 +163,18 @@ export const projects: Record<string, IProject> = {
     twColor: 'group-hover:text-orange-500',
     twFade: 'from-[#f2b366]',
     media: [
-      { src: '/video/sanctavia-video-2.mp4', alt: 'sanctavia-1', type: 'video' },
-      { src: '/video/sanctavia-video.mp4', alt: 'sanctavia-2', type: 'video' },
+      {
+        src: '/video/sanctavia-video-2.mp4',
+        alt: 'sanctavia-1',
+        type: 'video',
+        poster: '/img/thumbnails/sanctavia-1.png',
+      },
+      {
+        src: '/video/sanctavia-video.mp4',
+        alt: 'sanctavia-2',
+        type: 'video',
+        poster: '/img/thumbnails/sanctavia-2.png',
+      },
     ],
   },
   'wind-river': {
@@ -166,8 +192,18 @@ export const projects: Record<string, IProject> = {
     twColor: 'group-hover:text-green-500',
     twFade: 'from-[#aed494]',
     media: [
-      { src: '/video/windriver-video.mp4', alt: 'wind-river-1', type: 'video' },
-      { src: '/video/windriver-video-2.mp4', alt: 'wind-river-2', type: 'video' },
+      {
+        src: '/video/windriver-video.mp4',
+        alt: 'wind-river-1',
+        type: 'video',
+        poster: '/img/thumbnails/windriver-1.png',
+      },
+      {
+        src: '/video/windriver-video-2.mp4',
+        alt: 'wind-river-2',
+        type: 'video',
+        poster: '/img/thumbnails/windriver-2.png',
+      },
     ],
   },
 
@@ -186,8 +222,18 @@ export const projects: Record<string, IProject> = {
     twColor: 'group-hover:text-red-500',
     twFade: 'from-[#d98f52]',
     media: [
-      { src: '/video/mastercard-video.mp4', alt: 'mastercard-1', type: 'video' },
-      { src: '/video/mastercard-video-2.mp4', alt: 'mastercard-2', type: 'video' },
+      {
+        src: '/video/mastercard-video.mp4',
+        alt: 'mastercard-1',
+        type: 'video',
+        poster: '/img/thumbnails/mastercard-1.png',
+      },
+      {
+        src: '/video/mastercard-video-2.mp4',
+        alt: 'mastercard-2',
+        type: 'video',
+        poster: '/img/thumbnails/mastercard-2.png',
+      },
     ],
   },
   'lumber-marketplace': {
@@ -209,11 +255,13 @@ export const projects: Record<string, IProject> = {
         src: '/video/lm-video-2.mp4',
         alt: 'lm-1',
         type: 'video',
+        poster: '/img/thumbnails/lm-1.png',
       },
       {
         src: '/video/lm-video.mp4',
         alt: 'lm-2',
         type: 'video',
+        poster: '/img/thumbnails/lm-2.png',
       },
     ],
   },
@@ -230,7 +278,7 @@ export const projects: Record<string, IProject> = {
     uri: 'panasonic',
     twColor: 'group-hover:text-blue-500',
     twFade: 'from-[#6994b8]',
-    media: [{ src: '/video/ult.mp4', alt: 'panasonic-1', type: 'video' }],
+    media: [{ src: '/video/ult.mp4', alt: 'panasonic-1', type: 'video', poster: '/img/thumbnails/ult.png' }],
   },
   epb: {
     title: 'EPB',
@@ -260,7 +308,7 @@ export const projects: Record<string, IProject> = {
     uri: 'spare-teeth',
     href: 'https://store.steampowered.com/app/1028340/Spare_Teeth_VR/',
     twColor: 'group-hover:text-cyan-500',
-    media: [{ src: '/video/st.mp4', alt: 'spare-teeth-1', type: 'video' }],
+    media: [{ src: '/video/st.mp4', alt: 'spare-teeth-1', type: 'video', poster: '/img/thumbnails/st.png' }],
   },
   // volkswagen: {
   //   title: 'Volkswagen',