From c2eaa726760bcd42aa5f3e5adb4c3a1084845f9f Mon Sep 17 00:00:00 2001
From: Coder-soft <powernplant101@gmail.com>
Date: Tue, 6 Oct 2026 19:22:34 +0500
Subject: [PATCH 1/2] perf: play animation previews on hover instead of
 autoplay

Animation cards previously mounted an autoplaying <video> for every
in-view card, streaming and decoding all of them at once and causing
heavy lag. Add a HoverVideo component that renders the first frame as a
thumbnail (metadata-only load) and only decodes/plays while hovered,
pausing on leave and when the tab is hidden. Apply it to resource
animation cards and showcase grid videos.
---
 src/components/HoverVideo.tsx             | 90 +++++++++++++++++++++++
 src/components/resources/ResourceCard.tsx | 19 ++---
 src/pages/Showcase.tsx                    | 10 +--
 3 files changed, 102 insertions(+), 17 deletions(-)
 create mode 100644 src/components/HoverVideo.tsx

diff --git a/src/components/HoverVideo.tsx b/src/components/HoverVideo.tsx
new file mode 100644
index 0000000..e6700d3
--- /dev/null
+++ b/src/components/HoverVideo.tsx
@@ -0,0 +1,90 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+
+interface HoverVideoProps {
+  src: string;
+  poster?: string;
+  className?: string;
+  /** Frame (in seconds) used as the static thumbnail. */
+  thumbnailTime?: number;
+  ariaLabel?: string;
+}
+
+/**
+ * Displays the first frame of a video as a lightweight thumbnail and only
+ * decodes/plays it while hovered. Avoids the cost of autoplaying every card.
+ */
+const HoverVideo: React.FC<HoverVideoProps> = ({
+  src,
+  poster,
+  className,
+  thumbnailTime = 0.1,
+  ariaLabel,
+}) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [isHovered, setIsHovered] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+  const [hasError, setHasError] = useState(false);
+
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video || hasError) return;
+
+    if (isHovered) {
+      void video.play().catch(() => setHasError(true));
+    } else {
+      video.pause();
+      try {
+        video.currentTime = thumbnailTime;
+      } catch {
+        /* not seekable yet */
+      }
+    }
+  }, [isHovered, hasError, thumbnailTime]);
+
+  useEffect(() => {
+    const onVisibilityChange = () => {
+      if (document.hidden) videoRef.current?.pause();
+    };
+    document.addEventListener("visibilitychange", onVisibilityChange);
+    return () => document.removeEventListener("visibilitychange", onVisibilityChange);
+  }, []);
+
+  const markReady = useCallback(() => setIsReady(true), []);
+
+  if (hasError) return null;
+
+  return (
+    <video
+      ref={videoRef}
+      src={`${src}#t=${thumbnailTime}`}
+      poster={poster}
+      preload="metadata"
+      loop
+      muted
+      playsInline
+      aria-label={ariaLabel}
+      className={cn(
+        "w-full h-full object-cover transition-opacity duration-300",
+        isReady ? "opacity-100" : "opacity-0",
+        className,
+      )}
+      onLoadedData={markReady}
+      onSeeked={markReady}
+      onLoadedMetadata={() => {
+        const video = videoRef.current;
+        if (!video) return;
+        try {
+          video.currentTime = thumbnailTime;
+        } catch {
+          /* ignore */
+        }
+      }}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onError={() => setHasError(true)}
+    />
+  );
+};
+
+export default React.memo(HoverVideo);
diff --git a/src/components/resources/ResourceCard.tsx b/src/components/resources/ResourceCard.tsx
index bea2edb..73e24d4 100644
--- a/src/components/resources/ResourceCard.tsx
+++ b/src/components/resources/ResourceCard.tsx
@@ -11,6 +11,7 @@ import { Resource } from "@/types/resources";
 import { cn } from "@/lib/utils";
 import { useUserFavorites } from "@/hooks/useUserFavorites";
 import AudioPlayer from "@/components/AudioPlayer";
+import HoverVideo from "@/components/HoverVideo";
 import { getCategoryIcon, getCategoryColor } from "@/utils/resourceCategories";
 
 interface ResourceCardProps {
@@ -242,19 +243,15 @@ const ResourceCard = ({ resource, onClick, onMusicLink }: ResourceCardProps) =>
             onClick={handlePreviewClick}
             className="relative aspect-video bg-muted/20 rounded-md overflow-hidden mb-3 cursor-default"
           >
-            {isInView ? (
-              <video
+            <div className="absolute inset-0 flex items-center justify-center bg-muted/10">
+              <IconVideo className="h-8 w-8 text-muted-foreground/30" />
+            </div>
+            {isInView && (
+              <HoverVideo
                 src={previewUrl}
-                autoPlay
-                loop
-                muted
-                playsInline
-                className="w-full h-full object-cover"
+                ariaLabel={`Preview of ${resource.title}`}
+                className="absolute inset-0"
               />
-            ) : (
-              <div className="absolute inset-0 flex items-center justify-center bg-muted/10">
-                <IconVideo className="h-8 w-8 text-muted-foreground/30" />
-              </div>
             )}
           </div>
         );
diff --git a/src/pages/Showcase.tsx b/src/pages/Showcase.tsx
index 4e7f7ec..3e66ae4 100644
--- a/src/pages/Showcase.tsx
+++ b/src/pages/Showcase.tsx
@@ -23,6 +23,7 @@ import Footer from "@/components/Footer";
 import AuthDialog from "@/components/auth/AuthDialog";
 import AudioPlayer from "@/components/AudioPlayer";
 import VideoPlayer from "@/components/VideoPlayer";
+import HoverVideo from "@/components/HoverVideo";
 
 
 
@@ -55,15 +56,12 @@ const ShowcaseCard: React.FC<{ item: ShowcaseWithAssets }> = ({ item }) => {
     if (isVideo) {
       return (
         <div className="w-full h-full bg-black relative group/vid">
-          <video
+          <HoverVideo
             src={url}
-            muted
-            loop
-            autoPlay
-            playsInline
+            ariaLabel="Showcase video preview"
             className="w-full h-full object-cover"
           />
-          <div className="absolute inset-0 bg-black/20 group-hover/vid:bg-transparent transition-colors" />
+          <div className="absolute inset-0 bg-black/20 group-hover/vid:bg-transparent transition-colors pointer-events-none" />
         </div>
       );
     }

From e06a964e682f9a093f5002688551201a3a3404cd Mon Sep 17 00:00:00 2001
From: Coder-soft <powernplant101@gmail.com>
Date: Tue, 6 Oct 2026 19:32:23 +0500
Subject: [PATCH 2/2] fix: address review feedback on hover video previews

- ignore play() AbortError so quick hover in/out no longer blanks the preview
- support pointer enter/leave (mouse + pen), focus/blur for keyboard, and
  tap-to-play for touch on animation cards
- reset ready/error state when src changes
- debounce preview mount (150ms) to avoid a burst of range requests while
  scrolling
- drop unused VideoPlayer import in Showcase and wire poster
---
 src/components/HoverVideo.tsx             | 75 +++++++++++++++--------
 src/components/resources/ResourceCard.tsx | 17 ++++-
 src/pages/Showcase.tsx                    |  1 -
 3 files changed, 67 insertions(+), 26 deletions(-)

diff --git a/src/components/HoverVideo.tsx b/src/components/HoverVideo.tsx
index e6700d3..93390a5 100644
--- a/src/components/HoverVideo.tsx
+++ b/src/components/HoverVideo.tsx
@@ -8,11 +8,16 @@ interface HoverVideoProps {
   /** Frame (in seconds) used as the static thumbnail. */
   thumbnailTime?: number;
   ariaLabel?: string;
+  /** Play when the video receives keyboard focus (adds it to the tab order). */
+  focusable?: boolean;
+  /** Allow touch users to toggle playback by tapping the preview. */
+  tapToPlay?: boolean;
 }
 
 /**
- * Displays the first frame of a video as a lightweight thumbnail and only
- * decodes/plays it while hovered. Avoids the cost of autoplaying every card.
+ * Displays the first frame of a video as a lightweight thumbnail
+ * (`preload="metadata"` + a `#t=` fragment) and only decodes/plays it while
+ * hovered, focused, or tapped. Avoids autoplaying every card at once.
  */
 const HoverVideo: React.FC<HoverVideoProps> = ({
   src,
@@ -20,27 +25,46 @@ const HoverVideo: React.FC<HoverVideoProps> = ({
   className,
   thumbnailTime = 0.1,
   ariaLabel,
+  focusable = false,
+  tapToPlay = false,
 }) => {
   const videoRef = useRef<HTMLVideoElement>(null);
-  const [isHovered, setIsHovered] = useState(false);
+  const [isActive, setIsActive] = useState(false);
   const [isReady, setIsReady] = useState(false);
   const [hasError, setHasError] = useState(false);
 
+  const seekToThumbnail = useCallback(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    try {
+      video.currentTime = thumbnailTime;
+    } catch {
+      /* not seekable yet */
+    }
+  }, [thumbnailTime]);
+
+  // Reset transient state when the source changes (memoized component reuses state).
+  useEffect(() => {
+    setIsActive(false);
+    setIsReady(false);
+    setHasError(false);
+  }, [src]);
+
   useEffect(() => {
     const video = videoRef.current;
     if (!video || hasError) return;
 
-    if (isHovered) {
-      void video.play().catch(() => setHasError(true));
+    if (isActive) {
+      void video.play().catch((err: DOMException) => {
+        // A pending play() rejects with AbortError when interrupted by pause()
+        // (e.g. a quick hover in/out). That is not a real failure.
+        if (err.name !== "AbortError") setHasError(true);
+      });
     } else {
       video.pause();
-      try {
-        video.currentTime = thumbnailTime;
-      } catch {
-        /* not seekable yet */
-      }
+      seekToThumbnail();
     }
-  }, [isHovered, hasError, thumbnailTime]);
+  }, [isActive, hasError, seekToThumbnail]);
 
   useEffect(() => {
     const onVisibilityChange = () => {
@@ -50,8 +74,6 @@ const HoverVideo: React.FC<HoverVideoProps> = ({
     return () => document.removeEventListener("visibilitychange", onVisibilityChange);
   }, []);
 
-  const markReady = useCallback(() => setIsReady(true), []);
-
   if (hasError) return null;
 
   return (
@@ -64,24 +86,29 @@ const HoverVideo: React.FC<HoverVideoProps> = ({
       muted
       playsInline
       aria-label={ariaLabel}
+      tabIndex={focusable ? 0 : undefined}
       className={cn(
         "w-full h-full object-cover transition-opacity duration-300",
         isReady ? "opacity-100" : "opacity-0",
         className,
       )}
-      onLoadedData={markReady}
-      onSeeked={markReady}
-      onLoadedMetadata={() => {
-        const video = videoRef.current;
-        if (!video) return;
-        try {
-          video.currentTime = thumbnailTime;
-        } catch {
-          /* ignore */
+      onLoadedData={() => setIsReady(true)}
+      onSeeked={() => setIsReady(true)}
+      onLoadedMetadata={seekToThumbnail}
+      onPointerEnter={(e) => {
+        if (e.pointerType !== "touch") setIsActive(true);
+      }}
+      onPointerLeave={(e) => {
+        if (e.pointerType !== "touch") setIsActive(false);
+      }}
+      onPointerDown={(e) => {
+        if (tapToPlay && e.pointerType === "touch") {
+          e.stopPropagation();
+          setIsActive((active) => !active);
         }
       }}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
+      onFocus={() => setIsActive(true)}
+      onBlur={() => setIsActive(false)}
       onError={() => setHasError(true)}
     />
   );
diff --git a/src/components/resources/ResourceCard.tsx b/src/components/resources/ResourceCard.tsx
index 73e24d4..c446774 100644
--- a/src/components/resources/ResourceCard.tsx
+++ b/src/components/resources/ResourceCard.tsx
@@ -42,10 +42,22 @@ const ResourceCard = ({ resource, onClick, onMusicLink }: ResourceCardProps) =>
   const isFavorite = isFavorited(String(resource.id));
 
   const [isInView, setIsInView] = useState(false);
+  const [isPreviewReady, setIsPreviewReady] = useState(false);
   const [isFontLoaded, setIsFontLoaded] = useState(false);
   const [isLinkHovered, setIsLinkHovered] = useState(false);
   const cardRef = useRef<HTMLDivElement>(null);
 
+  // Debounce preview loading so fast scrolling doesn't fire a burst of
+  // media requests for every card that briefly crosses the viewport.
+  useEffect(() => {
+    if (!isInView) {
+      setIsPreviewReady(false);
+      return;
+    }
+    const timer = setTimeout(() => setIsPreviewReady(true), 150);
+    return () => clearTimeout(timer);
+  }, [isInView]);
+
   useEffect(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
@@ -246,11 +258,14 @@ const ResourceCard = ({ resource, onClick, onMusicLink }: ResourceCardProps) =>
             <div className="absolute inset-0 flex items-center justify-center bg-muted/10">
               <IconVideo className="h-8 w-8 text-muted-foreground/30" />
             </div>
-            {isInView && (
+            {isInView && isPreviewReady && (
               <HoverVideo
                 src={previewUrl}
+                poster={resource.image_url}
                 ariaLabel={`Preview of ${resource.title}`}
                 className="absolute inset-0"
+                focusable
+                tapToPlay
               />
             )}
           </div>
diff --git a/src/pages/Showcase.tsx b/src/pages/Showcase.tsx
index 3e66ae4..749da29 100644
--- a/src/pages/Showcase.tsx
+++ b/src/pages/Showcase.tsx
@@ -22,7 +22,6 @@ import { supabase } from "@/integrations/supabase/client";
 import Footer from "@/components/Footer";
 import AuthDialog from "@/components/auth/AuthDialog";
 import AudioPlayer from "@/components/AudioPlayer";
-import VideoPlayer from "@/components/VideoPlayer";
 import HoverVideo from "@/components/HoverVideo";