fix: hide broken poster images

This commit is contained in:
2024-05-15 15:10:00 +01:00
parent b1d1fb5d82
commit 19f5a84ba6

View File

@ -12,6 +12,7 @@ import Pill from "./pill";
import classNames from "classnames"; import classNames from "classnames";
import Logo from "./logo"; import Logo from "./logo";
import { useContentWarning } from "./nsfw"; import { useContentWarning } from "./nsfw";
import { useState } from "react";
export function VideoTile({ export function VideoTile({
ev, ev,
@ -27,7 +28,7 @@ export function VideoTile({
const isGrownUp = useContentWarning(); const isGrownUp = useContentWarning();
const link = NostrLink.fromEvent(ev); const link = NostrLink.fromEvent(ev);
const hasImg = (image?.length ?? 0) > 0; const [hasImg, setHasImage] = useState((image?.length ?? 0) > 0);
return ( return (
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Link <Link
@ -42,7 +43,9 @@ export function VideoTile({
state={ev}> state={ev}>
<div className="relative mb-2 aspect-video"> <div className="relative mb-2 aspect-video">
{hasImg ? ( {hasImg ? (
<img loading="lazy" className="aspect-video object-cover rounded-xl" src={image} /> <img loading="lazy" className="aspect-video object-cover rounded-xl" src={image} onError={() => {
setHasImage(false);
}} />
) : ( ) : (
<Logo className="text-white aspect-video" /> <Logo className="text-white aspect-video" />
)} )}