71 lines
2.5 KiB
TypeScript
71 lines
2.5 KiB
TypeScript
import Link from "next/link";
|
|
import { getSafeDate } from '@/app/lib/dates';
|
|
import { IVtuber } from '@futureporn/types';
|
|
import Image from "next/legacy/image"
|
|
import { LocalizedDate } from '@/app/components/localized-date'
|
|
import Skeleton from "react-loading-skeleton";
|
|
|
|
interface IVodCardProps {
|
|
id: number;
|
|
title: string;
|
|
date: string;
|
|
muxAsset: string | undefined;
|
|
thumbnail: string | undefined;
|
|
vtuber: IVtuber;
|
|
}
|
|
|
|
|
|
export default function VodCard({ id, title, date, muxAsset, thumbnail = 'https://futureporn-b2.b-cdn.net/default-thumbnail.webp', vtuber }: IVodCardProps) {
|
|
|
|
|
|
// return (<p>@todo W VodCard</p>)
|
|
|
|
if (!vtuber?.slug) return (
|
|
<div key={id} className="column is-full-mobile is-one-third-tablet is-one-fourth-desktop is-one-fifth-fullhd">
|
|
<div className="card">
|
|
<div className="card-content">
|
|
<article className="is-danger notification">VOD {id} is missing VTuber.slug</article>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
|
|
return (
|
|
<div key={id} className="column is-full-mobile is-one-third-tablet is-one-fourth-desktop is-one-fifth-fullhd">
|
|
<div className="card">
|
|
<Link href={`/vt/${vtuber.slug}/vod/${getSafeDate(date)}`}>
|
|
<div className="card-image">
|
|
{thumbnail &&
|
|
<figure className="image is-16by9">
|
|
<Image
|
|
src={thumbnail}
|
|
alt={title}
|
|
placeholder="blur"
|
|
blurDataURL={vtuber?.image_blur || 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABmJLR0QA/wD/AP+gvaeTAAAADUlEQVQImWOIUT7wHwAEXQI/2aBnMAAAAABJRU5ErkJggg=='}
|
|
layout="fill"
|
|
style={{
|
|
objectFit: 'cover',
|
|
}}
|
|
/>
|
|
</figure>
|
|
}
|
|
{!thumbnail && <p>missing thumbnail</p>}
|
|
</div>
|
|
<div className="card-content">
|
|
<p className="subtitle">{vtuber.display_name}</p>
|
|
<LocalizedDate date={new Date(date)} />
|
|
<p className="">{title}</p>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
)
|
|
}
|
|
|
|
|
|
|
|
|
|
|