Merge pull request #481 from Rajgupta36/Feature_Video_Autoplay_on_Hover

Added Feature video autoplay on hover #480
code100x · May 12, 2024 · 73563d8 · 73563d8
2 parents 7f93f33 + b771ff8
commit 73563d8
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 5 deletions.
diff --git a/src/actions/videopreview/videoPreview.tsx b/src/actions/videopreview/videoPreview.tsx
@@ -0,0 +1,14 @@
+"use server";
+import db from '@/db';
+
+export default async function VideoPreview({ contentId }: { contentId: number }) {
+    const videoMetadata = await db.videoMetadata.findFirst({
+        where: { contentId },
+        select: { video_360p_1: true }
+    });
+
+    if (videoMetadata) {
+        return videoMetadata.video_360p_1;
+    }
+    return null;
+}
diff --git a/src/components/ContentCard.tsx b/src/components/ContentCard.tsx
@@ -3,8 +3,9 @@ import PercentageComplete from './PercentageComplete';
 import { Bookmark } from '@prisma/client';
 import BookmarkButton from './bookmark/BookmarkButton';
 import { formatTime } from '@/lib/utils';
+import VideoThumbnail from './videothumbnail';
 
-export const ContentCard = ({
+export const  ContentCard = ({
   title,
   onClick,
   markAsCompleted,
@@ -38,7 +39,7 @@ export const ContentCard = ({
   return (
     <div
       onClick={onClick}
-      className={`relative ease-in duration-200 cursor-pointer group${hoverExpand ? ' hover:scale-105' : ''} `}
+      className={`relative ease-in duration-200 cursor-pointer group${hoverExpand ? ' ' : ''} `}
     >
       {percentComplete !== null && percentComplete !== undefined && (
         <PercentageComplete percent={percentComplete} />
@@ -53,7 +54,7 @@ export const ContentCard = ({
           {contentDuration && formatTime(contentDuration)}
         </div>
       )}
-      <div className="relative overflow-hidden rounded-md">
+      {type !=='video' && <div className="relative overflow-hidden rounded-md">
         <img src={image} alt={title} className="" />
         {!!videoProgressPercent && (
           <div className="absolute bottom-0 w-full h-1 bg-[#707071]">
@@ -63,7 +64,11 @@ export const ContentCard = ({
             />
           </div>
         )}
-      </div>
+      </div>}
+      {type ==='video'  && <div className="relative overflow-hidden rounded-md ">   
+         <VideoThumbnail contentId={contentId} imageUrl={"https://d2szwvl7yo497w.cloudfront.net/courseThumbnails/video.png"}  duration={1} />
+      </div>}
+
       {bookmark !== undefined && contentId && (
         <div className="absolute top-2 left-2">
           <BookmarkButton
@@ -76,7 +81,7 @@ export const ContentCard = ({
         </div>
       )}
       <div className="flex justify-between mt-2 text-gray-900 dark:text-white">
-        <div>{title}</div>
+        <div>{title} </div>
       </div>
     </div>
   );

diff --git a/src/components/FolderView.tsx b/src/components/FolderView.tsx
@@ -51,6 +51,7 @@ export const FolderView = ({
           return (
             <ContentCard
               type={content.type}
+              contentId={content.id}
               key={content.id}
               title={content.title}
               image={content.image || ''}

diff --git a/src/components/videothumbnail.tsx b/src/components/videothumbnail.tsx
@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import VideoPreview from '@/actions/videopreview/videoPreview';
+import { useEffect } from 'react';
+
+const VideoThumbnail = ({ imageUrl, contentId }: { imageUrl: string , contentId: number }) => {
+    const [videoUrl, setVideoUrl] = useState<string | null>(null);
+    const [hover,setHover] = useState(false);
+
+    useEffect(() => {
+        async function fetchVideoUrl() {
+            const url = await VideoPreview({ contentId });
+            setVideoUrl(url);
+        }
+        fetchVideoUrl();
+    }, [contentId]);
+    const handleMouseEnter = () => {
+        setHover(true);
+    };
+
+    const handleMouseLeave = () => {
+        setHover(false);
+    };
+    return (
+        <div className="m max-h-[573px] max-w-[1053px]  relative" onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}>
+            <div className=" w-full h-full relative">
+                {hover && videoUrl ? (
+                    <div className='w-full h-full'>
+                    <video muted autoPlay width="100%" height="100%">
+                        <source src={videoUrl} type="video/mp4"/>
+                    </video>
+                    </div>
+                ) : (
+                    <img
+                        src={imageUrl}
+                        alt="Video Thumbnail"
+                        className=" w-full h-full object-cover"
+                    />
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default VideoThumbnail;