142 lines
3.4 KiB
TypeScript
142 lines
3.4 KiB
TypeScript
import * as React from 'react';
|
||
|
||
import { Breadcrumb } from 'react-bootstrap';
|
||
|
||
import Head from 'next/head';
|
||
import Link from 'next/link';
|
||
|
||
import { useIntl } from 'react-intl';
|
||
import { FormattedMessage } from '../components/localization';
|
||
|
||
import RelativeTime from '../components/RelativeTime';
|
||
import VideoList from '../components/VideoList';
|
||
|
||
import { notFound } from '../util/status';
|
||
import { getIndex, getVideos } from '../util/api';
|
||
import { VideoEntry } from '../util/datatypes/VideoList';
|
||
|
||
export async function getServerSideProps({ params: { id } }: { params: { id: string } }) {
|
||
// Fetch URL to thumbnails server
|
||
const {
|
||
ids,
|
||
servers: { thumbnails: thumbnailServerURL },
|
||
} = await getIndex();
|
||
|
||
const vodMeta = ids.find(({
|
||
id: thisID,
|
||
}: {
|
||
id: string
|
||
}) => id === thisID);
|
||
|
||
if (!vodMeta) {
|
||
return {
|
||
props: {},
|
||
};
|
||
}
|
||
|
||
const { title } = vodMeta;
|
||
|
||
// Fetch list of videos for this VOD ID
|
||
const vodInfo = await getVideos(id);
|
||
const { videos } = vodInfo;
|
||
let lastUpdatedAt = null;
|
||
lastUpdatedAt = vodInfo.lastUpdatedAt;
|
||
const finalVideos = videos
|
||
.map((video: VideoEntry) => ({
|
||
...video,
|
||
duration: typeof video.duration === 'string' ? parseFloat(video.duration) : video.duration || null,
|
||
sourceVideoStart: typeof video.sourceVideoStart === 'string' ? parseFloat(video.sourceVideoStart) : video.sourceVideoStart || null,
|
||
sourceVideoEnd: typeof video.sourceVideoEnd === 'string' ? parseFloat(video.sourceVideoEnd) : video.sourceVideoEnd || null,
|
||
}));
|
||
|
||
// Pass data to the page via props
|
||
return {
|
||
props: {
|
||
id,
|
||
thumbnailServerURL,
|
||
title,
|
||
videos: finalVideos,
|
||
lastUpdatedAt,
|
||
},
|
||
};
|
||
}
|
||
|
||
export default function VideoListPage({
|
||
id,
|
||
lastUpdatedAt,
|
||
thumbnailServerURL,
|
||
title,
|
||
videos,
|
||
}: {
|
||
id: string,
|
||
lastUpdatedAt: string,
|
||
thumbnailServerURL: string,
|
||
title: string,
|
||
videos: Array<VideoEntry>
|
||
}) {
|
||
if (!id) {
|
||
return notFound();
|
||
}
|
||
|
||
let lastUpdatedDate = null;
|
||
if (typeof (lastUpdatedAt) === 'string') {
|
||
lastUpdatedDate = new Date(lastUpdatedAt);
|
||
}
|
||
|
||
const intl = useIntl();
|
||
|
||
return (
|
||
<div>
|
||
<Head>
|
||
<title>
|
||
{title}
|
||
{' '}
|
||
–
|
||
{' '}
|
||
{intl.formatMessage({
|
||
id: 'App.title',
|
||
description: 'The full title of the website',
|
||
defaultMessage: 'Games Done Quick Instant Archive',
|
||
})}
|
||
</title>
|
||
<link rel="icon" href="/favicon.ico" />
|
||
</Head>
|
||
|
||
<Breadcrumb>
|
||
<Link passHref href="/">
|
||
<Breadcrumb.Item>
|
||
<FormattedMessage
|
||
id="Breadcrumb.homeTitle"
|
||
defaultMessage="GDQ Instant Archive"
|
||
description="Root node text in breadcrumb"
|
||
/>
|
||
</Breadcrumb.Item>
|
||
</Link>
|
||
<Link passHref href="/[id]" as={`/${id}`}>
|
||
<Breadcrumb.Item active>
|
||
{title}
|
||
</Breadcrumb.Item>
|
||
</Link>
|
||
</Breadcrumb>
|
||
|
||
<VideoList
|
||
id={id}
|
||
thumbnailServerURL={thumbnailServerURL}
|
||
videos={videos}
|
||
/>
|
||
|
||
{
|
||
lastUpdatedDate
|
||
? (
|
||
<footer className="pt-4 my-md-5 pt-md-5 border-top">
|
||
Last updated
|
||
{' '}
|
||
<RelativeTime>{lastUpdatedDate}</RelativeTime>
|
||
</footer>
|
||
)
|
||
: ''
|
||
}
|
||
</div>
|
||
);
|
||
}
|