From 16781aec04c41528155587a6543c5681063dda93 Mon Sep 17 00:00:00 2001
From: ThisBirchWood <dylanseandefaoite@gmail.com>
Date: Wed, 9 Jul 2025 23:12:12 +0200
Subject: [PATCH] ADD fallback thumbnail

---
 frontend/public/default_thumbnail.png       | Bin 0 -> 1791 bytes
 frontend/src/components/video/VideoCard.tsx |  31 ++++++++++++++------
 frontend/src/pages/MyClips.tsx              |   2 +-
 3 files changed, 23 insertions(+), 10 deletions(-)
 create mode 100644 frontend/public/default_thumbnail.png

diff --git a/frontend/public/default_thumbnail.png b/frontend/public/default_thumbnail.png
new file mode 100644
index 0000000000000000000000000000000000000000..81eb65297e6016ecc61bcca98d0bce1e999f76cb
GIT binary patch
literal 1791
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

literal 0
HcmV?d00001

diff --git a/frontend/src/components/video/VideoCard.tsx b/frontend/src/components/video/VideoCard.tsx
index 4bc544b..fd90eff 100644
--- a/frontend/src/components/video/VideoCard.tsx
+++ b/frontend/src/components/video/VideoCard.tsx
@@ -1,36 +1,49 @@
 import clsx from "clsx";
 import { formatTime } from "../../utils/utils.ts";
-import {Link} from "react-router-dom";
+import { Link } from "react-router-dom";
+import { useState } from "react";
 
 type VideoCardProps = {
     title: string,
     duration: number,
-    thumbnailPath: string,
+    thumbnailPath: string | null,
     videoPath: string,
     className?: string
 }
 
+const fallbackThumbnail = "../../../public/default_thumbnail.png";
+
 const VideoCard = ({
                        title,
                        duration,
                        thumbnailPath,
                        videoPath,
-                       className}: VideoCardProps) => {
+                       className
+                   }: VideoCardProps) => {
+
+    const initialSrc = thumbnailPath && thumbnailPath.trim() !== "" ? thumbnailPath : fallbackThumbnail;
+    const [imgSrc, setImgSrc] = useState(initialSrc);
+
     return (
-        <Link
-        to={videoPath}
-        >
+        <Link to={videoPath}>
             <div className={clsx("flex flex-col", className)}>
-                <img src={thumbnailPath} alt="Video Thumbnail" />
+                <img
+                    src={imgSrc}
+                    alt="Video Thumbnail"
+                    onError={() => {
+                        if (imgSrc !== fallbackThumbnail) {
+                            setImgSrc(fallbackThumbnail);
+                        }
+                    }}
+                />
 
                 <div className={"flex flex-row justify-between items-center p-2"}>
                     <p>{title}</p>
                     <p>{formatTime(duration)}</p>
                 </div>
-
             </div>
         </Link>
     );
 }
 
-export default VideoCard;
\ No newline at end of file
+export default VideoCard;
diff --git a/frontend/src/pages/MyClips.tsx b/frontend/src/pages/MyClips.tsx
index d03e343..f5c1e57 100644
--- a/frontend/src/pages/MyClips.tsx
+++ b/frontend/src/pages/MyClips.tsx
@@ -20,7 +20,7 @@ const MyClips = () => {
                     duration={clip.duration}
                     thumbnailPath={clip.thumbnailPath}
                     videoPath={clip.videoPath}
-                    className={"w-30 p-5"}
+                    className={"w-40 p-5"}
                 />
             ))}