diff --git a/frontend/public/default_thumbnail.png b/frontend/public/default_thumbnail.png new file mode 100644 index 0000000..81eb652 Binary files /dev/null and b/frontend/public/default_thumbnail.png differ 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 ( - +
{title}
{formatTime(duration)}