'use client'; import { IStream } from "@/lib/streams"; import NotFound from "app/streams/[cuid]/not-found"; import { IVod } from "@/lib/vods"; import Link from "next/link"; import Image from "next/image"; import { LocalizedDate } from "./localized-date"; import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome"; import { faTriangleExclamation, faCircleInfo, faThumbsUp, IconDefinition, faO, faX, faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons"; import { Hemisphere, Moon } from "lunarphase-js"; import { useEffect, useState } from "react"; import { faXTwitter } from "@fortawesome/free-brands-svg-icons"; export interface IStreamProps { stream: IStream; } type Status = 'missing' | 'issue' | 'good'; interface StyleDef { heading: string; icon: IconDefinition; desc1: string; desc2: string; } function capitalizeFirstLetter(string: string): string { return string.charAt(0).toUpperCase() + string.slice(1); } function hasNote(vod: IVod) { if (!!vod?.attributes?.note) return true; else return false; } function determineStatus(stream: IStream): Status { if (stream.attributes.vods.data.length < 1) { return 'missing' } else { if (stream.attributes.vods.data.some(vod => !hasNote(vod))) { return 'good'; } else { return 'issue'; } } } export default function StreamPage({ stream }: IStreamProps) { const displayName = stream.attributes.vtuber.data.attributes.displayName; const date = new Date(stream.attributes.date); const [hemisphere, setHemisphere] = useState(Hemisphere.NORTHERN); const [selectedStatus, setSelectedStatus] = useState(determineStatus(stream)); const styleMap: Record = { 'missing': { heading: 'is-danger', icon: faTriangleExclamation, desc1: "We don't have a VOD for this stream.", desc2: 'Know someone who does?' }, 'issue': { heading: 'is-warning', icon: faCircleInfo, desc1: "We have a VOD for this stream, but it's not full quality.", desc2: 'Have a better copy?' }, 'good': { heading: 'is-success', icon: faThumbsUp, desc1: "We have a VOD for this stream, and we think it's the best quality possible.", desc2: "Have one that's even better?" } }; const { heading, icon, desc1, desc2 } = styleMap[selectedStatus] || {}; useEffect(() => { const randomHemisphere = (Math.random() < 0.5 ? 0 : 1) ? Hemisphere.NORTHERN : Hemisphere.SOUTHERN; setHemisphere(randomHemisphere); }, []); if (!stream) return // return

//

    //         
    //             {JSON.stringify(stream, null, 2)}

    //         
    //     
//

// const platformsList = '???'; const { isChaturbateInvite, isFanslyInvite } = stream.attributes.tweet.data.attributes; const platformsArray = [ isChaturbateInvite ? 'Chaturbate' : null, isFanslyInvite ? 'Fansly' : null ].filter(Boolean); const platformsList = platformsArray.length > 0 ? platformsArray.join(', ') : 'None'; return ( <>

{displayName} Stream Archive

Details

Announcement 

Platform {platformsList}

UTC Datetime 

Local Datetime {date.toLocaleDateString()} {date.toLocaleTimeString()}

Lunar Phase {Moon.lunarPhase(date)} {Moon.lunarPhaseEmoji(date, { hemisphere })}



{/* */}
VOD {capitalizeFirstLetter(selectedStatus)}

{desc1}

{desc2}
Upload it here.

VODs

{/* */} {stream.attributes.vods.data.map((vod: IVod) => ( {/*

{JSON.stringify(vod, null, 2)}

*/} {/* */} ))}
ID Upload DateThumbnail DurationTags Timestamps Note
{vod.attributes.cuid} {vod.attributes.publishedAt}{(!!vod?.attributes?.thumbnail?.data?.attributes?.cdnUrl) ? : } {(!!vod?.attributes?.duration) ? vod.attributes.duration : }{vod.attributes.tagVodRelations.data.length} {vod.attributes.timestamps.data.length} {(!!vod.attributes.note) ? : }
) }