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

import { getUrl, getNextVod, getPreviousVod, getLocalizedDate } from '@/app/lib/vods';
import { IVod } from '@/app/lib/vods';
import Link from 'next/link';
import { VideoInteractive } from './video-interactive';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronLeft, faChevronRight, faGlobe, faImage, faLink } from "@fortawesome/free-solid-svg-icons";
import { notFound } from 'next/navigation';
import { IpfsCid } from './ipfs-cid';
import LinkableHeading from './linkable-heading';
import Image from "next/legacy/image";
import Thumbnail from './thumbnail';

export function getVodTitle(vod: IVod): string {
    // console.log('lets getVodTitle, ey?')
    // console.log(JSON.stringify(vod, null, 2))
    return vod.title || vod.announce_title || `VOD ${vod.id}`
    // return vod.title || vod.announceTitle || (vod?.date2 && vod?.vtuber?.display_name) ? `${vod.vtuber.display_name} ${vod.date_2}` : `VOD ${vod.id}`;
}

export function buildMuxUrl(playbackId: string, token: string) {
    return `https://stream.mux.com/${playbackId}.m3u8?token=${token}`
}

export function buildMuxSignedPlaybackId(playbackId: string, token: string) {
    return `${playbackId}?token=${token}`
}

export function buildMuxThumbnailUrl(playbackId: string, token: string) {
    return `https://image.mux.com/${playbackId}/storyboard.vtt?token=${token}`
}


export default async function VodPage({vod}: { vod: IVod }) {

    if (!vod) notFound();
    if (!vod.vtuber) {
        throw new Error(`vod.vtuber was falsy.`)
    }
    const slug = vod.vtuber.slug;
    const previousVod = await getPreviousVod(vod);
    const nextVod = await getNextVod(vod);

    // return <pre><code>{JSON.stringify(previousVod, null, 2)}</code></pre>
    // return <p>{slug} VOD @todo previousVod={previousVod.title} nextVod={nextVod?.title}</p>
    return (

        <div className="container">
            <div className="section pt-0">
                        <VideoInteractive vod={vod}></VideoInteractive>
                        {/* <pre><code>{JSON.stringify(vod, null, 2)}</code></pre> */}

                        {(vod.thumbnail) && (<div className='mb-5'>
                            <LinkableHeading text="Thumbnail Image" slug="thumb" icon={faImage}></LinkableHeading>
                            <Thumbnail url={vod.thumbnail.cdn_url}></Thumbnail>
                        </div>)}

                        {(vod.ipfs_cid) && (
                            <>
                                <LinkableHeading text="IPFS Content IDs" slug="ipfs" icon={faGlobe}></LinkableHeading>
                                {vod.ipfs_cid && (
                                    <IpfsCid label="Source" cid={vod.ipfs_cid}></IpfsCid>
                                )}
                            </>
                        )}


                    <nav className="level mt-5">
                        <div className='level-left'>
                            <div className='level-item'>
                                {!!previousVod && (
                                    <Link className='button' href={getUrl(previousVod, slug, previousVod.date_2)}>
                                        <FontAwesomeIcon
                                            icon={faChevronLeft}
                                            className='fas faChevronLeft'
                                        ></FontAwesomeIcon>
                                        <span className="ml-2">Prev VOD {getLocalizedDate(previousVod)}</span>
                                    </Link>
                                )}
                            </div>
                        </div>
                        <div className='level-center'>
                            <div className='level-item'>
                                {/* <p className='has-text-grey-darker'>UUID {vod.uuid}</p> UUID is too long for this space! */}
                                <p className='has-text-grey-darker'>ID {vod.id}</p>
                            </div>
                        </div>
                        <div className='level-right'>
                            <div className='level-item'>
                                {!!nextVod && (
                                    <Link className='button' href={getUrl(nextVod, slug, nextVod.date_2)}>
                                        <span className="mr-2">Next VOD {getLocalizedDate(nextVod)}</span>
                                        <FontAwesomeIcon
                                            icon={faChevronRight}
                                            className='fas faChevronRight'
                                        ></FontAwesomeIcon>
                                    </Link>
                                )}
                            </div>
                        </div>
                    </nav>


                </div>
        </div>
    );
}