fp/services/next/app/components/vod-nav.tsx

92 lines
4.4 KiB
TypeScript

'use client';
import { faVideo, faExternalLinkAlt, faShareAlt } from "@fortawesome/free-solid-svg-icons";
import { faXTwitter } from '@fortawesome/free-brands-svg-icons';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Image from "next/legacy/image";
import Link from 'next/link';
import { IVod } from '@/app/lib/vods';
import { buildIpfsUrl } from '@/app/lib/ipfs';
import { getSafeDate } from "@/app/lib/dates";
import { StreamButton } from '@/app/components/stream-button';
import VtuberButton from "./vtuber-button";
import { LocalizedDate } from "./localized-date";
export function getDownloadLink(cid: string, safeDate: string, slug: string, quality: string) {
return buildIpfsUrl(`${cid}?filename=${slug}-${safeDate}-${quality}.mp4`)
}
export interface IVodNavProps {
vod: IVod;
}
export default function VodNav ({ vod }: IVodNavProps) {
const safeDate = getSafeDate(vod.attributes.date2);
return (
<nav className='level'>
<div className='level-left'>
<div className="level-item">
<Link href={`/vt/${vod.attributes.vtuber.data.attributes.slug}`}>
<VtuberButton
size="medium"
image={vod.attributes.vtuber.data.attributes.image}
displayName={vod.attributes.vtuber.data.attributes.displayName}
></VtuberButton>
</Link>
</div>
<div className="level-item">
{/* <StreamButton stream={vod.attributes.stream.data} /> */}
{vod.attributes.date2}
</div>
</div>
<div className='level-right'>
{vod.attributes.videoSrcHash && (
<>
<div className='level-item'>
<Link
download={getDownloadLink(vod.attributes.videoSrcHash, safeDate, vod.attributes.vtuber.data.attributes.slug, 'source')}
className='button is-info is-small'
target="_blank"
prefetch={false}
href={getDownloadLink(vod.attributes.videoSrcHash, safeDate, vod.attributes.vtuber.data.attributes.slug, 'source')}
>
<FontAwesomeIcon icon={faVideo} className="fas fa-download mr-1" />
<span className='mr-1'>Source</span>
<FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" />
</Link>
</div>
</>
)}
{vod.attributes.video240Hash && (
<div className='level-item'>
<span>
<Link
download={getDownloadLink(vod.attributes.video240Hash, safeDate, vod.attributes.vtuber.data.attributes.slug, '240p')}
className='button is-info is-small'
target="_blank"
prefetch={false}
href={getDownloadLink(vod.attributes.video240Hash, safeDate, vod.attributes.vtuber.data.attributes.slug, '240p')}
>
<FontAwesomeIcon icon={faVideo} className="fas fa-download mr-1" />
<span className='mr-1'>240p</span>
<FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" />
</Link>
</span>
</div>
)}
{vod.attributes.announceUrl && (
<div className='level-item'>
<Link
target="_blank"
href={vod.attributes.announceUrl}
className="button is-small"
>
<span className="mr-2"><FontAwesomeIcon icon={faXTwitter} className="fab fa-x-twitter" /></span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
</Link>
</div>
)}
</div>
</nav>
)
}