fix: hide broken poster images
This commit is contained in:
@ -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" />
|
||||||
)}
|
)}
|
||||||
|
Reference in New Issue
Block a user