49 changed files with 4526 additions and 8419 deletions
--- a/configs/nginx/default.conf
+++ b/configs/nginx/default.conf
@ -67,7 +67,12 @@ server {
 	root /htdocs;

 	location / {
-		vod thumb;
+		# https://thumb-gdq-a.edge.streaminginter.net/agdq2022vods/073_GeoGuessr.mp4/thumb-90000-w288.jpg
+		# => https://gdq-a.upstream.streaminginter.net/agdq2022vods/073_GeoGuessr_288w.jpg
+		root /htdocs;
+		rewrite ^(.+)\.mp4/thumb-\d+-w(\d+)\.jpg$ /$1_$2w.jpg break; 
+
+		#vod thumb;

 		expires 2d;
 		access_log off;
--- a/frontend/components/CopyField.tsx
+++ b/frontend/components/CopyField.tsx
@ -23,23 +23,24 @@ import Button from 'react-bootstrap/Button';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Overlay, Tooltip } from 'react-bootstrap';
 import type { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { faCopy, faShare } from '@fortawesome/free-solid-svg-icons';
 import { FormattedMessage } from './localization';

-const CopyField = ({
+function CopyField({
  children,
-  copyIcon = 'copy',
-  icon = null,
+  copyIcon,
+  icon,
 }: {
  children: string,
  copyIcon?: IconProp,
  icon?: IconProp,
-}) => {
+}) {
  const [show, setShow] = useState(false);
  const target = useRef(null);
  const textbox = useRef(null);
  let timer: NodeJS.Timeout = null;

-  function doCopy() {
+  const doCopy = () => {
    if (timer !== null) {
      clearTimeout(timer);
    }
@ -52,23 +53,20 @@ const CopyField = ({
      setShow(false);
    }, 3000);
    return false;
-  }
+  };

  return (
    <InputGroup>
      {
        icon
          ? (
-            <InputGroup.Prepend>
            <InputGroup.Text>
-                <FontAwesomeIcon icon="share" />
+              <FontAwesomeIcon icon={faShare} />
            </InputGroup.Text>
-            </InputGroup.Prepend>
          )
          : ''
      }
      <FormControl ref={textbox} readOnly value={children} />
-      <InputGroup.Append>
      <Button ref={target} onClick={doCopy}>
        <FontAwesomeIcon icon={copyIcon} />
        <Overlay target={target.current} show={show} placement="top">
@ -84,9 +82,13 @@ const CopyField = ({
          )}
        </Overlay>
      </Button>
-      </InputGroup.Append>
    </InputGroup>
  );
+}
+
+CopyField.defaultProps = {
+  copyIcon: faCopy,
+  icon: null,
 };

 export default CopyField;
--- a/frontend/components/DarkToggler.tsx
+++ b/frontend/components/DarkToggler.tsx
@ -22,13 +22,14 @@ import {
  Button,
  // Spinner
 } from 'react-bootstrap';
+import { faLightbulb } from '@fortawesome/free-solid-svg-icons';
 import { FormattedMessage } from './localization';

 export default function DarkToggler({
-  isDarkEnabled = false,
-  onChangeDarkMode = null,
-  disabled = false,
-  showLoading = false,
+  isDarkEnabled,
+  onChangeDarkMode,
+  disabled,
+  showLoading,
 }: {
  isDarkEnabled?: boolean,
  onChangeDarkMode?: (value: boolean) => void,
@ -44,7 +45,7 @@ export default function DarkToggler({
      variant="outline-secondary"
      active={!isDarkEnabled}
    >
-      <FontAwesomeIcon icon={[isDarkEnabled ? 'far' : 'fas', 'lightbulb']} />
+      <FontAwesomeIcon icon={faLightbulb} />
      <span className="sr-only">
        <FormattedMessage
          id="DarkToggler.screenReaderText"
@ -55,3 +56,10 @@ export default function DarkToggler({
    </Button>
  );
 }
+
+DarkToggler.defaultProps = {
+  isDarkEnabled: false,
+  onChangeDarkMode: null,
+  disabled: false,
+  showLoading: false,
+};
--- a/frontend/components/DownloadButton.tsx
+++ b/frontend/components/DownloadButton.tsx
@ -16,6 +16,7 @@
 */

 import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { faDownload } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 import { Button } from 'react-bootstrap';
@ -23,7 +24,7 @@ import { getDownloadURL } from 'util/api';
 import { FormattedMessage } from './localization';

 export default function DownloadButton({
-  icon = 'download',
+  icon,
  id,
  fileName,
 }: {
@ -34,6 +35,7 @@ export default function DownloadButton({
  return (
    <Button variant="success" href={getDownloadURL(id, fileName)}>
      <FontAwesomeIcon icon={icon} className="mr-2" />
+      {' '}
      <FormattedMessage
        id="DownloadButton.download"
        defaultMessage="Download"
@ -42,3 +44,7 @@ export default function DownloadButton({
    </Button>
  );
 }
+
+DownloadButton.defaultProps = {
+  icon: faDownload,
+};
--- a/frontend/components/Filter.tsx
+++ b/frontend/components/Filter.tsx
@ -21,7 +21,7 @@ import React from 'react';
 export default function Filter<T, U extends React.ReactNode>({
  items,
  query = '',
-  isCaseSensitive = false,
+  isCaseSensitive,
  keys,
  output,
 }: {
@ -50,3 +50,7 @@ export default function Filter<T, U extends React.ReactNode>({
    </>
  );
 }
+
+Filter.defaultProps = {
+  isCaseSensitive: false,
+};
--- a/frontend/components/LocaleSwitcher.jsx
+++ b/frontend/components/LocaleSwitcher.jsx
@ -1,107 +0,0 @@
-/**
- * Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw>
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import React, { useEffect } from 'react';
-// import useSWR from 'swr';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import {
-  Button,
-  // Spinner
-} from 'react-bootstrap';
-import useSWR from 'swr';
-import { FormattedMessage } from 'react-intl';
-import { fetchJson } from '../util/api';
-
-let darkToggleAnimationTimer = null;
-
-function triggerDarkToggleAnimation() {
-  document.documentElement.setAttribute('data-toggled-dark', 'true');
-  if (darkToggleAnimationTimer !== null) {
-    clearTimeout(darkToggleAnimationTimer);
-  }
-  darkToggleAnimationTimer = setTimeout(() => {
-    document.documentElement.removeAttribute('data-toggled-dark');
-  }, 1200);
-}
-
-export default function DarkToggler() {
-  const {
-    data, error, isValidating, mutate,
-  } = useSWR('/api/user');
-
-  let enableDark = false;
-  let isLoading = false;
-
-  if (isValidating || !data) {
-    isLoading = true;
-  }
-  if (error) {
-    console.warn(error);
-    isLoading = false;
-  } else if (data) {
-    enableDark = data.enableDark;
-  }
-
-  useEffect(() => {
-    if (!isLoading) {
-      console.info('enable dark:', enableDark);
-      if (enableDark) {
-        document.documentElement.setAttribute('data-enable-dark', 'true');
-      } else {
-        document.documentElement.removeAttribute('data-enable-dark');
-      }
-    }
-  });
-
-  return (
-    <>
-      <Button
-        onClick={async () => {
-          const { enableDark: newEnableDark } = await fetchJson('/api/toggleDark');
-          triggerDarkToggleAnimation();
-          mutate({ enableDark: newEnableDark }, true);
-        }}
-        disabled={isLoading}
-        variant="outline-secondary"
-        active={!enableDark}
-      >
-        {/*
-         isLoading
-           ? (
-             <Spinner animation="border" role="status" size="sm">
-               <span className="sr-only">
-                 <FormattedMessage
-                   id="DarkToggler.loading"
-                   defaultMessage="Loading…"
-                 />
-               </span>
-             </Spinner>
-           )
-           : ''
-        */}
-        <FontAwesomeIcon icon={[enableDark ? 'far' : 'fa', 'lightbulb']} />
-        <span className="sr-only">
-          <FormattedMessage
-            id="DarkToggler.screenReaderText"
-            defaultMessage="Toggle dark mode"
-            description="Screen reader description of the dark mode toggle button"
-          />
-        </span>
-      </Button>
-    </>
-  );
-}
--- a/frontend/components/LocaleSwitcher.tsx
+++ b/frontend/components/LocaleSwitcher.tsx
@ -20,14 +20,15 @@ import React from 'react';
 import {
  ButtonGroup, Dropdown, DropdownButton,
 } from 'react-bootstrap';
+import { faLanguage } from '@fortawesome/free-solid-svg-icons';
 import { FormattedMessage } from './localization';
 import { availableLocales, defaultLocale, localeDescriptions } from '../util/localization';

 export default function LocaleSwitcher({
-  locale = defaultLocale,
-  onChangeLocale = null,
-  disabled = false,
-  showLoading = false,
+  locale,
+  onChangeLocale,
+  disabled,
+  showLoading,
 }: {
  locale?: string,
  onChangeLocale?: (value: string) => void,
@ -39,11 +40,11 @@ export default function LocaleSwitcher({
      disabled={showLoading || disabled}
      as={ButtonGroup}
      variant="outline-secondary"
-      alignRight
+      align="end"
      id="dropdown-locale"
      title={(
        <>
-          <FontAwesomeIcon icon="language" />
+          <FontAwesomeIcon icon={faLanguage} />
          <span className="sr-only">
            <FormattedMessage
              id="LocaleSwitcher.screenReaderText"
@ -76,3 +77,10 @@ export default function LocaleSwitcher({
    </DropdownButton>
  );
 }
+
+LocaleSwitcher.defaultProps = {
+  locale: defaultLocale,
+  onChangeLocale: null,
+  disabled: false,
+  showLoading: false,
+};
--- a/frontend/components/Runner.module.scss
+++ b/frontend/components/Runner.module.scss
@ -0,0 +1,43 @@
+/**
+ * Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+@import "../styles/variables";
+
+.facebook {
+  color: $facebook-color;
+  &:hover {
+    color: lighten($facebook-color, 15%);
+  }
+}
+.twitch {
+  color: $twitch-color;
+  &:hover {
+    color: lighten($twitch-color, 15%);
+  }
+}
+.twitter {
+  color: $twitter-color;
+  &:hover {
+    color: lighten($twitter-color, 15%);
+  }
+}
+.youtube {
+  color: $youtube-color;
+  &:hover {
+    color: lighten($youtube-color, 15%);
+  }
+}
--- a/frontend/components/Runner.tsx
+++ b/frontend/components/Runner.tsx
@ -0,0 +1,43 @@
+import {
+  faFacebook, faTwitch, faTwitter, faYoutube,
+} from '@fortawesome/free-brands-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import * as React from 'react';
+import { RunnerInformation } from 'util/datatypes/RunnerList';
+
+import style from './Runner.module.scss';
+
+export default function Runner({ runner }: { runner: RunnerInformation }) {
+  return (
+    <span className="mr-3 text-nowrap">
+      <span className="mr-1">{runner.name}</span>
+      <sup>
+        {runner.platform === 'TWITCH' && runner.stream.length > 0 ? (
+          <a href={runner.stream}>
+            <FontAwesomeIcon icon={faTwitch} className={['mr-1', style.twitch].join(' ')} />
+          </a>
+        ) : ''}
+        {runner.platform === 'FACEBOOK' && runner.stream.length > 0 ? (
+          <a href={runner.stream}>
+            <FontAwesomeIcon icon={faFacebook} className={['mr-1', style.facebook].join(' ')} />
+          </a>
+        ) : ''}
+        {runner.platform === 'YOUTUBE' && runner.stream.length > 0 ? (
+          <a href={runner.stream}>
+            <FontAwesomeIcon icon={faYoutube} className={['mr-1', style.youtube].join(' ')} />
+          </a>
+        ) : ''}
+        {runner.twitter && runner.twitter.length > 0 ? (
+          <a href={`https://twitter.com/${runner.twitter}`}>
+            <FontAwesomeIcon icon={faTwitter} className={['mr-1', style.twitter].join(' ')} />
+          </a>
+        ) : ''}
+        {runner.youtube && runner.youtube.length > 0 ? (
+          <a href={`https://youtube.com/${runner.youtube}`}>
+            <FontAwesomeIcon icon={faYoutube} className={['mr-1', style.youtube].join(' ')} />
+          </a>
+        ) : ''}
+      </sup>
+    </span>
+  );
+}
--- a/frontend/components/VideoList.tsx
+++ b/frontend/components/VideoList.tsx
@ -23,6 +23,8 @@ import ListGroup from 'react-bootstrap/ListGroup';

 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { injectIntl, IntlShape } from 'react-intl';
+import { RunnerList } from 'util/datatypes/RunnerList';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import VideoListItem from './VideoListItem';
 import Filter from './Filter';
 import { VideoEntry } from '../util/datatypes/VideoList';
@ -32,6 +34,7 @@ interface VideoListProps {
  id: string,
  thumbnailServerURL: string,
  videos: Array<VideoEntry>,
+  runners: RunnerList,
 }

 interface VideoListState {
@ -62,15 +65,14 @@ class VideoList extends React.Component<VideoListProps, VideoListState> {
      id,
      thumbnailServerURL,
      videos,
+      runners,
    } = this.props;
    return (
      <div>
        <InputGroup>
-          <InputGroup.Prepend>
          <InputGroup.Text id="search-prepend">
-              <FontAwesomeIcon icon="search" />
+            <FontAwesomeIcon icon={faSearch} />
          </InputGroup.Text>
-          </InputGroup.Prepend>
          <FormControl
            placeholder={intl.formatMessage({ id: 'VideoList.Search.Placeholder', defaultMessage: 'Type something to search here…' })}
            aria-label={intl.formatMessage({ id: 'VideoList.Search.Label', defaultMessage: 'Search' })}
@ -83,28 +85,31 @@ class VideoList extends React.Component<VideoListProps, VideoListState> {
          <Filter
            items={videos}
            query={query}
-            keys={['title', 'fileName']}
+            keys={['title']}
            output={(filteredVideos) => filteredVideos.map(({
              item: {
                duration,
-                fileName,
                title,
+                run,
                slug,
                sourceVideoStart,
                sourceVideoEnd,
+                thumbnails,
              },
              refIndex: index,
            }) => (
              <VideoListItem
                key={index}
+                runData={run}
+                runners={runners.filter((r) => run?.runners?.includes(r.pk))}
                duration={duration}
                id={id}
                thumbnailServerURL={thumbnailServerURL}
-                fileName={fileName}
                slug={slug}
                title={title}
                sourceVideoStart={sourceVideoStart}
                sourceVideoEnd={sourceVideoEnd}
+                thumbnails={thumbnails}
              />
            ))}
          />
--- a/frontend/components/VideoListItem.module.scss
+++ b/frontend/components/VideoListItem.module.scss
@ -18,10 +18,11 @@
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
+// @use "~bootstrap/scss/type";

 .thumbnail {
-  flex-grow: 0;
  width: 96px;
+  position: relative;
  @include media-breakpoint-up(md) {
    width: 160px;
  }
@ -29,3 +30,27 @@
    width: 256px;
  }
 }
+
+.run-name {
+  // @extend %heading;
+  @include font-size($h5-font-size);
+}
+
+.run-category {
+  // @extend %heading;
+  @include font-size($h6-font-size);
+}
+
+.run {
+  text-decoration: none;
+}
+
+@include media-breakpoint-up(lg) {
+  .run-name {
+    @include font-size($h4-font-size);
+  }
+
+  .run-category {
+    @include font-size($h5-font-size);
+  }
+}
--- a/frontend/components/VideoListItem.tsx
+++ b/frontend/components/VideoListItem.tsx
@ -15,43 +15,50 @@
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

-import React from 'react';
+import React, { ReactElement } from 'react';

 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

 import ListGroup from 'react-bootstrap/ListGroup';
-import Media from 'react-bootstrap/Media';
 import Image from 'react-bootstrap/Image';

 import Link from 'next/link';

-import { getThumbnailURL } from '../util';
+import { RunInformation, Thumbnails } from 'util/datatypes/VideoList';
+import { Runner as RunnerData, RunnerList } from 'util/datatypes/RunnerList';
+import { Col, Row } from 'react-bootstrap';
+import { faClock, faHourglass, faRunning } from '@fortawesome/free-solid-svg-icons';
+import { getThumbnailURL } from '../util/thumbnail';

 import FormattedDuration from './localization/FormattedDuration';

 import style from './VideoListItem.module.scss';
-import sanitizeTitle from '../util/sanitizeTitle';

 import hourglassImage from '../images/hourglass.svg';
+import Runner from './Runner';

 export default function VideoListItem({
  thumbnailServerURL,
  duration,
  id,
-  fileName,
  slug,
  title,
  sourceVideoStart,
  sourceVideoEnd,
+  runData,
+  runners,
+  thumbnails,
 }: {
  thumbnailServerURL: string,
  duration: number | string,
  id: string,
-  fileName: string,
  slug: string,
  title: string,
  sourceVideoStart: number | string,
  sourceVideoEnd: number | string,
+  runData: RunInformation,
+  runners: RunnerList,
+  thumbnails: Thumbnails,
 }) {
  let displayDuration = null;
  if (duration !== null) {
@ -80,43 +87,64 @@ export default function VideoListItem({
    displayDuration = videoEnd - videoStart;
  }
  const listGroupItem = (
-    <ListGroup.Item action>
-      <Media>
+    <ListGroup.Item>
+      <Row>
+        <Col sm={3} xs={3}>
+          <Link href="/[id]/[vslug]" as={`/${id}/${slug}`}>
+            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
            <Image
-          className={['mr-3', style.thumbnail].join(' ')}
+              className={style.thumbnail}
              src={
-            fileName
-              ? getThumbnailURL(thumbnailServerURL, id, fileName, 90 * 1000, {
-                width: 96,
-              })
+                thumbnails.length > 0
+                  ? getThumbnailURL(thumbnailServerURL, id, thumbnails[0].fileName)
                  : hourglassImage
              }
-          srcSet={[96, 96 * 2, 96 * 3]
-            .map((width) => [
-              fileName
-                ? getThumbnailURL(thumbnailServerURL, id, fileName, 90 * 1000, {
-                  width,
-                })
+              srcSet={
+                Array.isArray(thumbnails) && thumbnails.length > 0
+                  ? thumbnails
+                    .map(({
+                      sourceSize,
+                      fileName,
+                    }) => (
+                      [
+                        thumbnails.length > 0
+                          ? getThumbnailURL(thumbnailServerURL, id, fileName)
                          : hourglassImage,
-              `${width}w`,
-            ])
+                        sourceSize,
+                      ]
+                    ))
                    .map((item) => item.join(' '))
-            .join(', ')}
+                    .join(', ')
+                  : ''
+              }
              alt={title}
            />
-        <Media.Body>
-          <h5 className="mt-0 mb-3">{title}</h5>
-          <p>
-            {!fileName ? (
-              <span>
-                <FontAwesomeIcon icon="hourglass" />
+          </Link>
+        </Col>
+        <Col sm={4} xs={9}>
+          <Link href="/[id]/[vslug]" as={`/${id}/${slug}`} className="text-reset text-decoration-none">
+            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+            <div>
+              <div className={style['run-name']}>{title}</div>
+              <div className={[style['run-category'], 'mt-0'].join(' ')}>{runData?.category}</div>
+            </div>
+          </Link>
+        </Col>
+        <Col sm={5} xs={12}>
+          {runners && runners.length > 0 ? (
+            <div className="mr-2">
+              <FontAwesomeIcon icon={faRunning} />
              {' '}
-                Coming up
-              </span>
+              {runners.reduce((all: Array<ReactElement>, runner: RunnerData) => [
+                ...all,
+                all.length > 0 ? ' / ' : null,
+                <Runner key={runner.fields.name} runner={runner.fields} />,
+              ], [])}
+            </div>
          ) : ''}
          {displayDuration !== null ? (
-              <span>
-                <FontAwesomeIcon icon="clock" />
+            <span className="mr-2 text-nowrap">
+              <FontAwesomeIcon icon={faClock} />
              {' '}
              <FormattedDuration
                seconds={displayDuration}
@ -124,18 +152,16 @@ export default function VideoListItem({
                unitDisplay="short"
              />
            </span>
-            ) : ''}
-          </p>
-        </Media.Body>
-      </Media>
+          ) : (
+            <span className="mr-2 text-nowrap">
+              <FontAwesomeIcon icon={faHourglass} />
+              {' '}
+              Coming up
+            </span>
+          )}
+        </Col>
+      </Row>
    </ListGroup.Item>
  );
-  if (fileName) {
-    return (
-      <Link passHref href="/[id]/[vslug]" as={`/${id}/${slug}`}>
-        {listGroupItem}
-      </Link>
-    );
-  }
  return listGroupItem;
 }
--- a/frontend/components/VideoPlayer.tsx
+++ b/frontend/components/VideoPlayer.tsx
@ -16,13 +16,13 @@
 */

 import * as React from 'react';
+import { Ratio } from 'react-bootstrap';
 import videojs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js';
 import 'videojs-errors';
 // TODO - localization
 // import 'videojs-errors/dist/lang/de';
 // import 'videojs-errors/dist/lang/en';
 // import 'videojs-contrib-dash';
-import { ResponsiveEmbed } from 'react-bootstrap';

 export default class VideoPlayer extends React.Component<{
  onReady?: () => void,
@ -64,9 +64,7 @@ export default class VideoPlayer extends React.Component<{
      ...videoJsOptions
    } = this.props;
    return (
-      <ResponsiveEmbed aspectRatio="16by9">
-        <div>
-          <div data-vjs-player>
+      <Ratio aspectRatio="16by9" data-vjs-player>
        {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
        <video
          ref={(node) => { this.videoNode = node; }}
@ -99,9 +97,7 @@ export default class VideoPlayer extends React.Component<{
            </a>
          </p>
        </video>
-          </div>
-        </div>
-      </ResponsiveEmbed>
+      </Ratio>
    );
  }
 }
--- a/frontend/components/localization/FormattedMessage.tsx
+++ b/frontend/components/localization/FormattedMessage.tsx
@ -15,8 +15,6 @@
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

-import React from 'react';
-import { Spinner } from 'react-bootstrap';
 import { FormattedMessage } from 'react-intl';
 import WrapReactIntl from './WrapReactIntl';

--- a/frontend/components/localization/WrapReactIntl.tsx
+++ b/frontend/components/localization/WrapReactIntl.tsx
@ -20,7 +20,7 @@ import { Spinner } from 'react-bootstrap';
 import { isPolyfillPhaseDone } from 'util/localization';

 export default function WrapReactIntl<P>(Component: React.ComponentType<P>) {
-  return (props: P) => {
+  return function (props: P) {
    if (!isPolyfillPhaseDone()) {
      return (
        <Spinner
--- a/frontend/next-env.d.ts
+++ b/frontend/next-env.d.ts
@ -1,2 +1,5 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
--- a/frontend/next.config.mjs
+++ b/frontend/next.config.mjs
@ -0,0 +1,53 @@
+// @ts-check
+
+/**
+ * Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import withPlugins from 'next-compose-plugins';
+// import optimizedImages from 'next-optimized-images';
+
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  reactStrictMode: false,
+  compiler: {
+    styledComponents: true,
+  },
+};
+
+// const nextConfig = withPlugins(
+//   [
+//     /*[
+//       optimizedImages,
+//       {
+//         // config for next-optimized-images
+//         inlineImageLimit: -1,
+//       },
+//     ],*/
+
+//     // your other plugins here
+//   ],
+//   {
+//     /*images: {
+//       // This is set due to next-optimized-images, see // See https://github.com/cyrilwanner/next-optimized-images/issues/251#issuecomment-867250968
+//       disableStaticImages: true,
+//     },*/
+//   }
+// );
+
+export default nextConfig;
--- a/frontend/package.json
+++ b/frontend/package.json
@ -1,6 +1,5 @@
 {
  "name": "gdq-archive-frontend",
-  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "run-s i18n:build dev:next",
@ -15,67 +14,67 @@
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },
  "dependencies": {
-    "@forevolve/bootstrap-dark": "^1.0.0-alpha.1091",
-    "@formatjs/intl-numberformat": "^5.5.4",
-    "@formatjs/intl-utils": "^3.8.3",
-    "@fortawesome/fontawesome-free": "^5.14.0",
-    "@fortawesome/fontawesome-svg-core": "^1.2.30",
-    "@fortawesome/free-brands-svg-icons": "^5.14.0",
-    "@fortawesome/free-regular-svg-icons": "^5.14.0",
-    "@fortawesome/free-solid-svg-icons": "^5.14.0",
-    "@fortawesome/react-fontawesome": "^0.1.11",
-    "bootstrap": "^4.5.2",
-    "cssnano": "^4.1.10",
-    "file-loader": "^6.0.0",
-    "fuse.js": "^6.4.1",
-    "imagemin-optipng": "^8.0.0",
-    "imagemin-svgo": "^8.0.0",
-    "intl-messageformat": ">= 5.1",
-    "intl-messageformat-parser": "^6.0.1",
-    "jquery": "~3",
-    "native-url": "^0.3.4",
-    "next": "9.5.2",
-    "next-compose-plugins": "^2.2.0",
-    "next-iron-session": "^4.1.8",
-    "next-optimized-images": "^2.6.2",
+    "@formatjs/intl-numberformat": "^7.1.5",
+    "@formatjs/intl-utils": "^3.8.4",
+    "@fortawesome/fontawesome-free": "^6.2.1",
+    "@fortawesome/fontawesome-svg-core": "^6.2.1",
+    "@fortawesome/free-brands-svg-icons": "^6.2.1",
+    "@fortawesome/free-regular-svg-icons": "^6.2.1",
+    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@popperjs/core": "^2.9.2",
+    "bootstrap": "5.1.x",
+    "bootstrap-dark-5": "1.1.0",
+    "cssnano": "^5.0.6",
+    "eslint-config-next": "^13.1.1",
+    "fuse.js": "^6.4.6",
+    "imagemin-svgo": "^9.0.0",
+    "intl-messageformat": ">= 2.0",
+    "next": "^13.1.1",
+    "next-compose-plugins": "^2.2.1",
+    "next-iron-session": "^4.2.0",
    "nprogress": "^0.2.0",
    "popper.js": "^1.16.1",
-    "raw-loader": "^4.0.1",
-    "react": "16.13.1",
-    "react-bootstrap": "^1.3.0",
-    "react-dom": "16.13.1",
-    "react-intl": "^5.6.3",
+    "react": "^18.2.0",
+    "react-bootstrap": "^2.4.0",
+    "react-dom": "^18.2.0",
+    "react-intl": "^6.2.5",
    "react-intl-formatted-duration": "^4.0.0",
-    "sass": "^1.26.10",
-    "shaka-player": "^3.0.3",
-    "shaka-player-react": "^1.0.1",
-    "swr": "^0.3.0",
-    "url-loader": "^4.1.0",
-    "url-slug": "^2.3.2",
-    "video.js": "^7.8.4",
-    "videojs-contrib-dash": "^2.11.0",
-    "videojs-errors": "^4.3.2",
-    "webpack": "^4.0.0",
-    "xmlbuilder2": "^2.3.1"
+    "react-youtube": "^9.0.2",
+    "sass": "^1.53.0",
+    "shaka-player": "^3.1.1",
+    "shaka-player-react": "^1.1.5",
+    "sharp": "^0.31.3",
+    "swr": "^2.0.0",
+    "url-slug": "^3.0.2",
+    "util-deprecate": "^1.0.2",
+    "video.js": "^7.13.3",
+    "videojs-contrib-dash": "^5.0.0",
+    "videojs-errors": "^4.5.0",
+    "xmlbuilder2": "^2.4.1"
  },
  "devDependencies": {
-    "@formatjs/cli": "^2.7.5",
-    "@types/node": "^14.6.0",
+    "@formatjs/cli": "^4.2.27",
+    "@types/node": "^16.3.1",
    "@types/nprogress": "^0.2.0",
-    "@types/react": "^16.9.46",
-    "@typescript-eslint/eslint-plugin": "^3.9.1",
-    "@typescript-eslint/parser": "^3.9.1",
-    "eslint": "^7.7.0",
-    "eslint-config-airbnb-typescript": "^9.0.0",
-    "eslint-plugin-import": "2.21.2",
-    "eslint-plugin-jsx-a11y": "6.3.0",
-    "eslint-plugin-react": "7.20.0",
-    "eslint-plugin-react-hooks": "4",
-    "lint-staged": "^10.2.11",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "@types/util-deprecate": "^1.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.13.0",
+    "@typescript-eslint/parser": "^5.0.0",
+    "eslint": "^7.32.0 || ^8.2.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "lint-staged": "^11.0.0",
    "npm-run-all": "^4.1.5",
-    "postcss-flexbugs-fixes": "^4.2.1",
-    "postcss-preset-env": "^6.7.0",
-    "typescript": "^4.0.2"
+    "postcss": "^8.2.15",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-preset-env": "^7.2.0",
+    "typescript": "^4.3.5"
  },
  "husky": {
    "hooks": {
@ -93,6 +92,8 @@
      "es2020": true
    },
    "extends": [
+      "plugin:@next/next/recommended",
+      "airbnb",
      "airbnb-typescript"
    ],
    "parserOptions": {
--- a/frontend/next.config.js
+++ b/frontend/next.config.js
@ -1,5 +1,5 @@
 /**
- * Copyright (C) 2019-2021 Carl Kittelberger <c.kittelberger@seidemann-web.com>
+ * Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw>
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
@ -15,15 +15,10 @@
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

-const withPlugins = require('next-compose-plugins');
-const optimizedImages = require('next-optimized-images');
+import * as React from 'react';
+import Error from './_error';

-module.exports = withPlugins([
-  [optimizedImages, {
-    /* config for next-optimized-images */
-    inlineImageLimit: -1,
-  }],
-
-  // your other plugins here
-
-]);
+function Error404Page() {
+  return <Error statusCode={404} />;
+}
+export default Error404Page;
--- a/frontend/pages/[id].tsx
+++ b/frontend/pages/[id].tsx
@ -23,15 +23,16 @@ import Head from 'next/head';
 import Link from 'next/link';

 import { useIntl } from 'react-intl';
+import { GetServerSideProps, NextPage } from 'next';
+import { RunnerList } from 'util/datatypes/RunnerList';
 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 { getIndex, getRunners, getVideos } from '../util/api';
 import { VideoEntry } from '../util/datatypes/VideoList';
-import { GetServerSideProps, NextPage } from 'next';

 interface VideoListPageProps {
  id?: string,
@ -39,15 +40,20 @@ interface VideoListPageProps {
  thumbnailServerURL?: string,
  title?: string,
  videos?: Array<VideoEntry>,
-};
+  runners?: RunnerList,
+}

-export const getServerSideProps: GetServerSideProps<VideoListPageProps> = async ({ params: { id } }) => {
+export const getServerSideProps: GetServerSideProps<VideoListPageProps> = async ({
+  params: { id },
+}) => {
  // Fetch URL to thumbnails server
  const {
    ids,
    servers: { thumbnails: thumbnailServerURL },
  } = await getIndex();

+  const runners = await getRunners();
+
  const vodMeta = ids.find(({
    id: thisID,
  }: {
@ -85,17 +91,19 @@ export const getServerSideProps: GetServerSideProps<VideoListPageProps> = async
      title,
      videos: finalVideos,
      lastUpdatedAt,
+      runners,
    },
  };
-}
+};

-const VideoListPage: NextPage<VideoListPageProps> = ({
+const VideoListPage: NextPage<VideoListPageProps> = function VideoListPage({
  id,
  lastUpdatedAt,
  thumbnailServerURL,
  title,
  videos,
-}) => {
+  runners,
+}) {
  if (!id) {
    return notFound();
  }
@ -111,21 +119,16 @@ const VideoListPage: NextPage<VideoListPageProps> = ({
    <div>
      <Head>
        <title>
-          {title}
-          {' '}
-        –
-        {' '}
-          {intl.formatMessage({
+          {`${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="/">
+        <Link legacyBehavior passHref href="/">
          <Breadcrumb.Item>
            <FormattedMessage
              id="Breadcrumb.homeTitle"
@ -134,7 +137,7 @@ const VideoListPage: NextPage<VideoListPageProps> = ({
            />
          </Breadcrumb.Item>
        </Link>
-        <Link passHref href="/[id]" as={`/${id}`}>
+        <Link legacyBehavior passHref href="/[id]" as={`/${id}`}>
          <Breadcrumb.Item active>
            {title}
          </Breadcrumb.Item>
@ -143,6 +146,7 @@ const VideoListPage: NextPage<VideoListPageProps> = ({

      <VideoList
        id={id}
+        runners={runners}
        thumbnailServerURL={thumbnailServerURL}
        videos={videos}
      />
@ -169,6 +173,6 @@ const VideoListPage: NextPage<VideoListPageProps> = ({
      }
    </div>
  );
-}
+};

 export default VideoListPage;
--- a/frontend/pages/[id]/[vslug].tsx
+++ b/frontend/pages/[id]/[vslug].tsx
@ -22,23 +22,24 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';

 import {
-  Breadcrumb, Button, ButtonGroup, Col, ResponsiveEmbed, Row, Tab, Tabs,
+  Breadcrumb, Button, ButtonGroup, Col, Ratio, Row, Tab, Tabs,
 } from 'react-bootstrap';

 import { useIntl } from 'react-intl';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { GetServerSideProps, GetServerSidePropsResult, InferGetServerSidePropsType } from 'next';
 import { VideoEntry } from 'util/datatypes/VideoList';
-import DownloadButton from 'components/DownloadButton';
 import { basename } from 'path';
 import withSession from 'util/session';
+import { ParsedUrlQuery } from 'querystring';
+import YouTubePlayer from 'react-youtube';
+import { faTwitch, faYoutube } from '@fortawesome/free-brands-svg-icons';
 import { getDASHManifestURL, getHLSMasterURL } from '../../util';

 import VideoPlayer from '../../components/VideoPlayer';
 import CopyField from '../../components/CopyField';
 import { FormattedMessage } from '../../components/localization';
 import sanitizeFileName from '../../util/sanitizeFileName';
-import sanitizeTitle from '../../util/sanitizeTitle';
 import { notFound } from '../../util/status';
 import {
  getDownloadURL,
@ -46,8 +47,9 @@ import {
  getVideos,
  submitPreferences,
 } from '../../util/api';
+import DownloadButton from '../../components/DownloadButton';

-interface VideoPlayerPageParameters {
+interface VideoPlayerPageParameters extends ParsedUrlQuery {
  id: string,
  vslug: string,
 }
@ -55,7 +57,7 @@ interface VideoPlayerPageParameters {
 interface VideoPlayerPageProps {
  id?: string,
  vslug?: string,
-  video?: number,
+  video?: number | VideoEntry,
  volume?: number,
  redirect?: boolean,
  title?: string,
@ -65,7 +67,14 @@ interface VideoPlayerPageProps {
  twitchPlayerParentKey?: string,
 }

-const getProps = withSession(async (req, _res, { id, vslug }: VideoPlayerPageParameters): Promise<GetServerSidePropsResult<VideoPlayerPageProps>> => {
+const getProps = withSession(async (
+  req,
+  _res,
+  {
+    id,
+    vslug,
+  }: VideoPlayerPageParameters,
+): Promise<GetServerSidePropsResult<VideoPlayerPageProps>> => {
  if (typeof id !== 'string') {
    throw new Error('only expected a single id');
  }
@ -123,7 +132,7 @@ const getProps = withSession(async (req, _res, { id, vslug }: VideoPlayerPagePar
  // Check if vslug is actually point to a file name
  const sanitizedFileName = `${sanitizeFileName(basename(vslug, '.mp4'))}.mp4`;
  const realVIndex = videos.findIndex(
-    (video: VideoEntry) => video.fileName === sanitizedFileName,
+    (video: VideoEntry) => video.downloadFileName === sanitizedFileName,
  );
  if (realVIndex >= 0) {
    const video = videos[realVIndex];
@ -165,7 +174,7 @@ const getProps = withSession(async (req, _res, { id, vslug }: VideoPlayerPagePar
  }

  if (!req.headers.host) {
-    throw new Error(JSON.stringify(req.headers))
+    throw new Error(JSON.stringify(req.headers));
  }

  // Pass data to the page via props
@ -184,7 +193,9 @@ const getProps = withSession(async (req, _res, { id, vslug }: VideoPlayerPagePar
  };
 });

-export const getServerSideProps: GetServerSideProps = async ({
+type ServerSideProps = GetServerSideProps<VideoPlayerPageProps, VideoPlayerPageParameters>;
+
+export const getServerSideProps: ServerSideProps = async ({
  req,
  res,
  params,
@ -230,13 +241,28 @@ export default function VideoPlayerPage({

  const playerRef = React.useRef<VideoPlayer>();

+  if (typeof video === 'number') {
+    throw new Error('Logic error - video should not be a number');
+  }
+
  const {
-    fileName,
+    downloadFileName,
    title: videoTitle,
+    sourceVideoID,
    sourceVideoURL,
-    sourceVideoStart,
+    sourceVideoStart: sourceVideoStartStr,
+    run,
+    youtubeVideoID,
  } = video;

+  // convert possibly-string sourceVideoStart field to actual number
+  let sourceVideoStart: number;
+  if (typeof sourceVideoStartStr === 'string') {
+    sourceVideoStart = parseInt(sourceVideoStartStr, 10);
+  } else {
+    sourceVideoStart = sourceVideoStartStr;
+  }
+
  let volumeChangeDebounceTimer: NodeJS.Timeout = null;
  const [currentVolume, trackCurrentVolume] = React.useState(volume);
  async function onVolumeChange() {
@ -254,71 +280,15 @@ export default function VideoPlayerPage({
    }
  }

-  const twitchEmbedURL = new URL("https://player.twitch.tv");
-  twitchEmbedURL.searchParams.append('video', sourceVideoURL.split('/').pop());
-  twitchEmbedURL.searchParams.append('parent', twitchPlayerParentKey);
-  twitchEmbedURL.searchParams.append('t', `${Math.floor(sourceVideoStart / 60)}m${sourceVideoStart % 60}s`)
+  const tabs: Array<React.ReactElement<typeof Tab>> = [];
+  let defaultTab = 'mirror-player';
+  const downloadButtons: Array<React.ReactElement> = [];

-  return (
-    <div>
-      <Head>
-        <title>
-          {videoTitle}
-          {' '}
-          –
-          {' '}
-          {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>{title}</Breadcrumb.Item>
-        </Link>
-        <Link passHref href="/[id]/[vslug]" as={`/${id}/${vslug}`}>
-          <Breadcrumb.Item active>{videoTitle}</Breadcrumb.Item>
-        </Link>
-      </Breadcrumb>
-
-      <Tabs
-        defaultActiveKey="twitch-player"
-        unmountOnExit={true}
-      >
-        <Tab
-          eventKey="twitch-player"
-          title={intl.formatMessage({
-            id: 'VideoPlayerPage.tab.twitchPlayer',
-            description: 'Title for Twitch player tab',
-            defaultMessage: 'Twitch player',
-          })}
-        >
-          <ResponsiveEmbed aspectRatio="16by9">
-            <iframe
-              src={twitchEmbedURL.toString()}
-              frameBorder={0}
-              allowFullScreen>
-            </iframe>
-          </ResponsiveEmbed>
-        </Tab>
+  // Mirror player tab
+  if (typeof downloadFileName === 'string' && downloadFileName.length > 0) {
+    tabs.push(
      <Tab
+        key="mirror-player"
        eventKey="mirror-player"
        title={intl.formatMessage({
          id: 'VideoPlayerPage.tab.mirrorPlayer',
@ -342,54 +312,176 @@ export default function VideoPlayerPage({
            1.75,
            2,
          ]}
+          // eslint-disable-next-line react/jsx-no-bind
          onVolumeChange={onVolumeChange}
          sources={[
-              { src: getHLSMasterURL(hlsServerURL, id, fileName), type: 'application/x-mpegURL' },
-              { src: getDASHManifestURL(dashServerURL, id, fileName), type: 'application/dash+xml' },
-              { src: getDownloadURL(id, fileName), type: 'video/mp4' },
+            { src: getHLSMasterURL(hlsServerURL, id, downloadFileName), type: 'application/x-mpegURL' },
+            { src: getDASHManifestURL(dashServerURL, id, downloadFileName), type: 'application/dash+xml' },
+            { src: getDownloadURL(id, downloadFileName), type: 'video/mp4' },
          ]}
          aspectRatio="16:9"
          fill
        />
-        </Tab>
+      </Tab>,
+    );
+    downloadButtons.push(<DownloadButton
+      key="download"
+      id={id}
+      fileName={getDownloadURL(id, downloadFileName)}
+    />);
+  }
+
+  // Twitch tab
+  if (sourceVideoID) {
+    const twitchEmbedURL = new URL('https://player.twitch.tv');
+    twitchEmbedURL.searchParams.append('video', sourceVideoID);
+    twitchEmbedURL.searchParams.append('parent', twitchPlayerParentKey);
+    twitchEmbedURL.searchParams.append('t', `${Math.floor(sourceVideoStart / 60)}m${sourceVideoStart % 60}s`);
+    tabs.unshift(
+      <Tab
+        key="twitch-player"
+        eventKey="twitch-player"
+        title={intl.formatMessage({
+          id: 'VideoPlayerPage.tab.twitchPlayer',
+          description: 'Title for Twitch player tab',
+          defaultMessage: 'Twitch player',
+        })}
+      >
+        <Ratio aspectRatio="16x9">
+          <iframe
+            src={twitchEmbedURL.toString()}
+            title="Twitch embed"
+            frameBorder={0}
+            allowFullScreen
+          />
+        </Ratio>
+      </Tab>,
+    );
+    defaultTab = 'twitch-player';
+    const twitchWatchURL = new URL(sourceVideoURL);
+    twitchWatchURL.searchParams.append('t', `${Math.floor(sourceVideoStart / 60)}m${sourceVideoStart % 60}s`);
+    downloadButtons.push(
+      <Button
+        href={twitchWatchURL.toString()}
+        target="blank"
+        variant="twitch"
+        key="watchOnTwitch"
+      >
+        <FontAwesomeIcon icon={faTwitch} className="mr-2" />
+        {' '}
+        <FormattedMessage
+          id="VideoPlayerPage.watchOnTwitch"
+          description="Button below video that links to the exact position in the archived stream to watch it there."
+          defaultMessage="Watch on Twitch"
+        />
+      </Button>,
+    );
+  }
+
+  // YouTube tab
+  if (youtubeVideoID) {
+    const youtubeURL = new URL(youtubeVideoID, 'https://youtu.be/');
+    tabs.unshift(
+      <Tab
+        key="youtube-player"
+        eventKey="youtube-player"
+        title={intl.formatMessage({
+          id: 'VideoPlayerPage.tab.youtubePlayer',
+          description: 'Title for YouTube player tab',
+          defaultMessage: 'YouTube player',
+        })}
+      >
+        <YouTubePlayer
+          className={[
+            'ratio',
+            'ratio-16by9',
+            'ratio-16x9',
+          ].join(' ')}
+          videoId={youtubeVideoID}
+          opts={{
+            playerVars: {
+              // https://developers.google.com/youtube/player_parameters
+              autoplay: 1,
+              color: 'white',
+              start: youtubeURL.searchParams.has('t')
+                ? parseInt(youtubeURL.searchParams.get('t').toString(), 10)
+                : 0,
+            },
+          }}
+        />
+      </Tab>,
+    );
+    defaultTab = 'youtube-player';
+    downloadButtons.push(
+      <Button
+        href={youtubeURL.toString()}
+        target="blank"
+        variant="youtube"
+        key="watchOnYouTube"
+      >
+        <FontAwesomeIcon icon={faYoutube} className="mr-2" />
+        {' '}
+        <FormattedMessage
+          id="VideoPlayerPage.watchOnYouTube"
+          description="Button below video that links user to the YouTube upload of the VOD."
+          defaultMessage="Watch on YouTube"
+        />
+      </Button>,
+    );
+  }
+
+  return (
+    <div>
+      <Head>
+        <title>
+          {`${videoTitle} – ${title} – ${intl.formatMessage({
+            id: 'App.title',
+            description: 'The full title of the website',
+            defaultMessage: 'Games Done Quick Instant Archive',
+          })}`}
+        </title>
+      </Head>
+
+      <Breadcrumb>
+        <Link legacyBehavior passHref href="/">
+          <Breadcrumb.Item>
+            <FormattedMessage
+              id="Breadcrumb.homeTitle"
+              defaultMessage="GDQ Instant Archive"
+              description="Root node text in breadcrumb"
+            />
+          </Breadcrumb.Item>
+        </Link>
+        <Link legacyBehavior passHref href="/[id]" as={`/${id}`}>
+          <Breadcrumb.Item>{title}</Breadcrumb.Item>
+        </Link>
+        <Link legacyBehavior passHref href="/[id]/[vslug]" as={`/${id}/${vslug}`}>
+          <Breadcrumb.Item active>{videoTitle}</Breadcrumb.Item>
+        </Link>
+      </Breadcrumb>
+
+      <Tabs
+        defaultActiveKey={defaultTab}
+        unmountOnExit
+      >
+        {tabs}
      </Tabs>

-      <h1 className="mb-3 mt-3">
+      <h1 className="mt-3">
        {title}
        :
        {' '}
        {videoTitle}
      </h1>

+      <h3 className="mb-3">
+        {run?.category}
+      </h3>
+
      <Row className="mb-3">
        <Col sm={12} md={7}>
          <ButtonGroup>
-            {/* <DownloadButton id={id} fileName={fileName} /> */}
-            {
-              sourceVideoURL
-                ? (
-                  <Button
-                    href={
-                      sourceVideoStart
-                        ? `${sourceVideoURL}?t=${Math.floor(sourceVideoStart / 60)}m${sourceVideoStart % 60
-                        }s`
-                        : sourceVideoURL
-                    }
-                    target="blank"
-                    variant="twitch"
-                  >
-                    <FontAwesomeIcon icon={['fab', 'twitch']} className="mr-2" />
-                    <FormattedMessage
-                      id="VideoPlayerPage.watchOnTwitch"
-                      description="Button below video that links to the exact position in the archived stream to watch it there."
-                      defaultMessage="Watch on Twitch"
-                    />
-                  </Button>
-                )
-                : (
-                  ''
-                )
-            }
+            {downloadButtons}
          </ButtonGroup>
        </Col>
        <Col sm={12} md={5}>
--- a/frontend/pages/_app.tsx
+++ b/frontend/pages/_app.tsx
@ -28,21 +28,28 @@ import {
  faHourglass,
  faLanguage,
  faLightbulb,
+  faRunning,
  faSearch,
  faShare,
 } from '@fortawesome/free-solid-svg-icons';
 import { faLightbulb as farLightbulb } from '@fortawesome/free-regular-svg-icons';
-import { faTwitch as fabTwitch } from '@fortawesome/free-brands-svg-icons';
+import {
+  faFacebook as fabFacebook,
+  faTwitch as fabTwitch,
+  faTwitter as fabTwitter,
+  faYoutube as fabYoutube,
+} from '@fortawesome/free-brands-svg-icons';
 import '@fortawesome/fontawesome-svg-core/styles.css';

 import Container from 'react-bootstrap/Container';
 import Navbar from 'react-bootstrap/Navbar';
+import SSRProvider from 'react-bootstrap/SSRProvider';

 import { IntlProvider, FormattedMessage } from 'react-intl';

 import Link from 'next/link';
 import Router from 'next/router';
-import App, { AppContext } from 'next/app';
+import App, { AppContext, AppProps } from 'next/app';

 import useSWR, { SWRConfig } from 'swr';

@ -54,7 +61,7 @@ import Image from 'react-bootstrap/Image';
 import Head from 'next/head';
 import { ButtonGroup } from 'react-bootstrap';
 import { shouldPolyfill } from '@formatjs/intl-numberformat/should-polyfill';
-import HomeStyle from '../styles/Home.module.css';
+import '../styles/Home.module.css';
 import DarkToggler from '../components/DarkToggler';

 import { fetchJson } from '../util/api';
@ -68,7 +75,10 @@ import withSession from '../util/session';
 fontawesomeSvgCoreConfig.autoAddCss = false;

 library.add(
+  fabFacebook,
  fabTwitch,
+  fabTwitter,
+  fabYoutube,
  faClock,
  faCopy,
  faDownload,
@ -76,6 +86,7 @@ library.add(
  faLanguage,
  faLightbulb,
  farLightbulb,
+  faRunning,
  faSearch,
  faShare,
 );
@ -103,10 +114,7 @@ function GDQArchiveApp({
    initialMessages,
    ...pageProps
  },
-}: {
-  Component: React.ElementType<Record<string, any>>,
-  pageProps: GDQArchiveAppPageProps,
-}) {
+}: AppProps<GDQArchiveAppPageProps>) {
  /* Component state */

  const [currentMessages, setMessages] = React.useState(initialMessages);
@ -129,7 +137,7 @@ function GDQArchiveApp({
    mutate,
  } = useSWR('/api/user', {
    fetcher: fetchJson,
-    initialData: {
+    fallbackData: {
      locale: initialLocale,
      enableDark: initialEnableDark,
    },
@ -219,14 +227,15 @@ function GDQArchiveApp({

  React.useEffect(() => {
    if (enableDarkMode) {
-      document.documentElement.setAttribute('data-enable-dark', 'true');
+      document.documentElement.setAttribute('data-bs-color-scheme', 'dark');
    } else {
-      document.documentElement.removeAttribute('data-enable-dark');
+      document.documentElement.removeAttribute('data-bs-color-scheme');
    }
    document.documentElement.setAttribute('lang', currentLocale);
  });

  return (
+    <SSRProvider>
      <SWRConfig
        value={{
          fetcher: fetchJson,
@ -240,16 +249,19 @@ function GDQArchiveApp({
          locale={currentLocale}
          defaultLocale={defaultLocale}
        >
-        <Navbar bg="dark" variant="dark">
-          <Link passHref href="/">
+          <Navbar bg="dark" expand="md" variant="dark">
+            <Container fluid>
+              <Link legacyBehavior passHref href="/">
                <Navbar.Brand>
                  <Image
-                src={gdqLogo}
+                    src={typeof gdqLogo === 'string' ? gdqLogo : gdqLogo.src}
                    alt="Games Done Quick"
+                    height={30}
                    className={[
-                  HomeStyle.logo,
+                      // HomeStyle.logo,
                      'd-inline-block',
-                  'align-middle',
+                      // 'align-middle',
+                      'align-top',
                    ].join(' ')}
                  />
                  {' '}
@ -259,6 +271,26 @@ function GDQArchiveApp({
                  />
                </Navbar.Brand>
              </Link>
+              {/* <Navbar.Text>
+              <Breadcrumb>
+                <Breadcrumb.Item>
+                  <Link legacyBehavior passHref href="/">
+                    <FormattedMessage
+                      id="Breadcrumb.homeTitle"
+                      defaultMessage="GDQ Instant Archive"
+                      description="Root node text in breadcrumb"
+                    />
+                  </Link>
+                </Breadcrumb.Item>
+                <Breadcrumb.Item>
+                  <FormattedMessage
+                    id="Breadcrumb.homeTitle"
+                    defaultMessage="GDQ Instant Archive"
+                    description="Root node text in breadcrumb"
+                  />
+                </Breadcrumb.Item>
+              </Breadcrumb>
+            </Navbar.Text> */}
              <Navbar.Toggle aria-controls="basic-navbar-nav" />
              <Navbar.Collapse
                id="basic-navbar-nav"
@ -267,28 +299,35 @@ function GDQArchiveApp({
                <ButtonGroup>
                  <LocaleSwitcher
                    locale={currentLocale}
+                    // eslint-disable-next-line react/jsx-no-bind
                    onChangeLocale={onChangeLocale}
                    disabled={isChangingLocale || isValidating}
                    showLoading={isChangingLocale}
                  />
                  <DarkToggler
                    isDarkEnabled={enableDarkMode}
+                    // eslint-disable-next-line react/jsx-no-bind
                    onChangeDarkMode={onChangeDarkMode}
                    disabled={isChangingDarkMode || isValidating}
                    showLoading={isChangingDarkMode}
                  />
                </ButtonGroup>
              </Navbar.Collapse>
+            </Container>
          </Navbar>
          <Head>
-          <link rel="icon" type="image/svg+xml" href={favicon} />
+            <meta name="color-scheme" content="light dark" />
+            <meta name="theme-color" content="rgb(33, 37, 41)" />
+            <meta name="keywords" content="gdq,games done quick,gaming,games,speedrun,speedrunning,vod,vods,video on demand,twitch,youtube,replay,archive,video,videos" />
+            <link rel="icon" type="image/svg+xml" href={typeof favicon === 'string' ? favicon : favicon.src} />
          </Head>
-        <Container>
+          <Container className="mt-3">
            {/* eslint-disable-next-line react/jsx-props-no-spreading */}
            <Component {...pageProps} />
          </Container>
        </IntlProvider>
      </SWRConfig>
+    </SSRProvider>
  );
 }

--- a/frontend/pages/_document.tsx
+++ b/frontend/pages/_document.tsx
@ -67,7 +67,7 @@ class GDQArchiveDocument extends Document<{
        }}
      >
        <IntlProvider messages={messages} locale={locale} defaultLocale={defaultLocale}>
-          <Html lang={locale} data-enable-dark={enableDark}>
+          <Html lang={locale} data-bs-color-scheme={enableDark}>
            <Head />
            <body>
              <Main />
--- a/frontend/pages/_error.tsx
+++ b/frontend/pages/_error.tsx
@ -0,0 +1,60 @@
+/**
+ * Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { NextPage } from 'next';
+import { ErrorProps } from 'next/error';
+import Head from 'next/head';
+import * as React from 'react';
+import { useIntl } from 'react-intl';
+
+const Error: NextPage<ErrorProps> = function Error({
+  statusCode,
+  title,
+}) {
+  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>
+      </Head>
+      <p>
+        <h1>
+          {statusCode}
+          {' '}
+          {title}
+        </h1>
+      </p>
+    </div>
+  );
+};
+
+Error.getInitialProps = (ctx) => {
+  const { res, err } = ctx;
+  // eslint-disable-next-line no-nested-ternary
+  const statusCode = res ? res.statusCode : (err ? err.statusCode : 404);
+  // eslint-disable-next-line no-nested-ternary
+  const title = res ? res.statusMessage : (err ? err.message : 'Page not found');
+  return { statusCode, title };
+};
+
+export default Error;
--- a/frontend/pages/index.tsx
+++ b/frontend/pages/index.tsx
@ -21,27 +21,23 @@ import Head from 'next/head';
 import Link from 'next/link';

 import ListGroup from 'react-bootstrap/ListGroup';
-import { Breadcrumb } from 'react-bootstrap';
 import { useIntl } from 'react-intl';
+import { GetServerSideProps, NextPage } from 'next';
 import { FormattedMessage } from '../components/localization';
 import { VideoOnDemandIndex } from '../util/datatypes/VideoOnDemandIdentifier';
 import { getIndex } from '../util/api';
-import { GetServerSideProps, NextPage } from 'next';

 interface HomeProps {
  index: VideoOnDemandIndex
 }

-export const getServerSideProps: GetServerSideProps<HomeProps> = async () => {
-  // Fetch VOD IDs and announcements
-  return {
+export const getServerSideProps: GetServerSideProps<HomeProps> = async () => ({
  props: {
+    // Fetch VOD IDs and announcements
    index: await getIndex(),
  },
-  };
-}
-
-const Home: NextPage<HomeProps> = ({ index: { announcements, ids } }) => {
+});
+const Home: NextPage<HomeProps> = function Home({ index: { announcements, ids } }) {
  const intl = useIntl();
  return (
    <div>
@ -53,11 +49,11 @@ const Home: NextPage<HomeProps> = ({ index: { announcements, ids } }) => {
            defaultMessage: 'Games Done Quick Instant Archive',
          })}
        </title>
-        <link rel="icon" href="/favicon.ico" />
+        <meta name="color-scheme" content="light dark" />
      </Head>

-      <Breadcrumb>
-        <Link passHref href="/">
+      {/* <Breadcrumb>
+        <Link legacyBehavior passHref href="/">
          <Breadcrumb.Item active>
            <FormattedMessage
              id="Breadcrumb.homeTitle"
@ -66,7 +62,7 @@ const Home: NextPage<HomeProps> = ({ index: { announcements, ids } }) => {
            />
          </Breadcrumb.Item>
        </Link>
-      </Breadcrumb>
+      </Breadcrumb> */}

      <h1>
        <FormattedMessage
@ -84,23 +80,26 @@ const Home: NextPage<HomeProps> = ({ index: { announcements, ids } }) => {

      {
        announcements.map((text, id) => (
+          // eslint-disable-next-line react/no-array-index-key
          <p key={id}>
-            <b>Announcement:</b> {text}
+            <b>Announcement:</b>
+            {' '}
+            {text}
          </p>
        ))
      }

      <ListGroup>
-        {ids.map(({ id, title }) => (
-          <Link key={id} passHref href="/[id]" as={`/${id}`}>
+        {ids.map(({ id, longTitle }) => (
+          <Link legacyBehavior key={id} passHref href="/[id]" as={`/${id}`}>
            <ListGroup.Item action>
-              <h5>{title}</h5>
+              <h5>{longTitle}</h5>
            </ListGroup.Item>
          </Link>
        ))}
      </ListGroup>
    </div>
  );
-}
+};

 export default Home;
--- a/frontend/styles/_variables.scss
+++ b/frontend/styles/_variables.scss
@ -0,0 +1,4 @@
+$twitch-color: rgb(145, 71, 255);
+$twitter-color: rgb(29, 161, 242);
+$youtube-color: rgb(255, 0, 0);
+$facebook-color: rgb(66, 103, 178);
--- a/frontend/styles/bootstrap.scss
+++ b/frontend/styles/bootstrap.scss
@ -21,15 +21,23 @@

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
+@import "~bootstrap-dark-5/scss/variables-alt";
@import "~bootstrap/scss/mixins";
-@import "~@forevolve/bootstrap-dark/scss/dark-mixins";
+@import "~bootstrap-dark-5/scss/dark/mixins";
+@import "~bootstrap/scss/utilities";
+@import "~bootstrap-dark-5/scss/dark/utilities";
+@import "~bootstrap-dark-5/scss/dark/patch";

-html:not([data-enable-dark="true"]) {
+:root {
+  color-scheme: light;
+}
+
+// Layout & components
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
-  // @import '~bootstrap/scss/code';
+@import "~bootstrap/scss/containers";
@import "~bootstrap/scss/grid";
 // @import '~bootstrap/scss/tables';
@import "~bootstrap/scss/forms";
@ -37,18 +45,15 @@ html:not([data-enable-dark="true"]) {
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/button-group";
-  @import "~bootstrap/scss/input-group";
-  // @import '~bootstrap/scss/custom-forms';
@import "~bootstrap/scss/nav";
@import "~bootstrap/scss/navbar";
 // @import '~bootstrap/scss/card';
+// @import '~bootstrap/scss/accordion';
@import "~bootstrap/scss/breadcrumb";
 // @import '~bootstrap/scss/pagination';
 // @import '~bootstrap/scss/badge';
-  // @import '~bootstrap/scss/jumbotron';
 // @import '~bootstrap/scss/alert';
 // @import '~bootstrap/scss/progress';
-  @import "~bootstrap/scss/media";
@import "~bootstrap/scss/list-group";
@import "~bootstrap/scss/close";
 // @import '~bootstrap/scss/toasts';
@ -57,55 +62,62 @@ html:not([data-enable-dark="true"]) {
@import "~bootstrap/scss/popover";
 // @import '~bootstrap/scss/carousel';
@import "~bootstrap/scss/spinners";
-  @import "~bootstrap/scss/utilities";
-  // @import '~bootstrap/scss/print';
-}
+@import "~bootstrap/scss/offcanvas";
+
+// Helpers
+@import "~bootstrap/scss/helpers";
+
+// Utilities
+@import "~bootstrap/scss/utilities/api";

 /**
 * BOOTSTRAP DARK
 */

-html[data-enable-dark="true"] {
-  @import "~@forevolve/bootstrap-dark/scss/dark-variables";
-  @import "~bootstrap/scss/root";
-  @import "~bootstrap/scss/reboot";
-  @import "~bootstrap/scss/type";
-  @import "~bootstrap/scss/images";
-  // @import '~bootstrap/scss/code';
-  @import "~bootstrap/scss/grid";
-  // @import '~bootstrap/scss/tables';
-  // @import '~@forevolve/bootstrap-dark/scss/dark-tables';
-  @import "~bootstrap/scss/forms";
-  @import "~bootstrap/scss/buttons";
-  @import "~bootstrap/scss/transitions";
-  @import "~bootstrap/scss/dropdown";
-  @import "~bootstrap/scss/button-group";
-  @import "~bootstrap/scss/input-group";
-  @import "~@forevolve/bootstrap-dark/scss/dark-input-group";
-  // @import '~bootstrap/scss/custom-forms';
-  @import "~bootstrap/scss/nav";
-  @import "~bootstrap/scss/navbar";
-  // @import '~bootstrap/scss/card';
-  @import "~bootstrap/scss/breadcrumb";
-  // @import '~bootstrap/scss/pagination';
-  // @import '~bootstrap/scss/badge';
-  // @import '~bootstrap/scss/jumbotron';
-  // @import '~bootstrap/scss/alert';
-  // @import '~bootstrap/scss/progress';
-  @import "~bootstrap/scss/media";
-  @import "~bootstrap/scss/list-group";
-  @import "~bootstrap/scss/close";
-  // @import '~bootstrap/scss/toasts';
-  // @import '~bootstrap/scss/modal';
-  @import "~bootstrap/scss/tooltip";
-  @import "~bootstrap/scss/popover";
-  // @import '~bootstrap/scss/carousel';
-  @import "~bootstrap/scss/spinners";
-  @import "~bootstrap/scss/utilities";
-  // @import '~bootstrap/scss/print';
-  @import "~@forevolve/bootstrap-dark/scss/dark-styles";
+@include color-scheme-alt('[data-bs-color-scheme="dark"]') {
+  @import "~bootstrap-dark-5/scss/dark/root";
+  @import "~bootstrap-dark-5/scss/dark/reboot";
+  @import "~bootstrap-dark-5/scss/dark/type";
+  @import "~bootstrap-dark-5/scss/dark/images";
+  // no colors in containers
+  // no colors in grid
+  // @import '~bootstrap-dark-5/scss/dark/tables';
+  @import "~bootstrap-dark-5/scss/dark/forms";
+  @import "~bootstrap-dark-5/scss/dark/buttons";
+  // no colors in transitions
+  @import "~bootstrap-dark-5/scss/dark/dropdown";
+  @import "~bootstrap-dark-5/scss/dark/button-group";
+  @import "~bootstrap-dark-5/scss/dark/nav";
+  @import "~bootstrap-dark-5/scss/dark/navbar";
+  // @import '~bootstrap-dark-5/scss/dark/card';
+  // @import '~bootstrap-dark-5/scss/dark/accordion';
+  @import "~bootstrap-dark-5/scss/dark/breadcrumb";
+  // @import '~bootstrap-dark-5/scss/dark/pagination';
+  // @import '~bootstrap-dark-5/scss/dark/badge';
+  // @import '~bootstrap-dark-5/scss/dark/alert';
+  // @import '~bootstrap-dark-5/scss/dark/progress';
+  @import "~bootstrap-dark-5/scss/dark/list-group";
+  @import "~bootstrap-dark-5/scss/dark/close";
+  // @import '~bootstrap-dark-5/scss/dark/toasts';
+  // @import '~bootstrap-dark-5/scss/dark/modal';
+  @import "~bootstrap-dark-5/scss/dark/tooltip";
+  @import "~bootstrap-dark-5/scss/dark/popover";
+  // @import '~bootstrap-dark-5/scss/dark/carousel';
+  @import "~bootstrap-dark-5/scss/dark/offcanvas";
+  @import "~bootstrap-dark-5/scss/dark/placeholders";
+  @import "~bootstrap-dark-5/scss/dark/helpers";
+  @import "~bootstrap-dark-5/scss/dark/utilities/api";
+  @import "~bootstrap-dark-5/scss/dark/dark";
+
+  :root {
+    color-scheme: dark;
+  }
 }

-.breadcrumb {
-  border-top: 0 !important;
+// HACK - fix use of unset variables
+:root {
+  --bs-body-bg-alt: #{$body-bg-alt};
+  --bs-body-color-alt: #{$body-color-alt};
 }
+
+@import "~bootstrap-dark-5/scss/dark/utilities/api-all";
--- a/frontend/styles/main.scss
+++ b/frontend/styles/main.scss
@ -17,6 +17,7 @@

@import "~video.js/src/css/video-js";
@import "bootstrap";
+@import "variables";

 $colorTransitionFunction: ease-out;
 $colorTransitionDuration: 1s;
@ -28,8 +29,6 @@ html[data-toggled-dark="true"] * {
 }

 html {
-  $twitch-color: rgb(145, 71, 255);
-
  .btn {
    &.btn-twitch {
      @include button-variant($twitch-color, $twitch-color);
@ -38,5 +37,13 @@ html {
    &.btn-outline-twitch {
      @include button-outline-variant($twitch-color);
    }
+
+    &.btn-youtube {
+      @include button-variant($youtube-color, $youtube-color);
+    }
+
+    &.btn-outline-youtube {
+      @include button-outline-variant($youtube-color);
+    }
  }
 }
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@ -33,7 +33,8 @@
      "video.js": [
        "typings/video.js"
      ]
-    }
+    },
+    "incremental": true
  },
  "include": [
    "next-env.d.ts",
--- a/frontend/util/api.ts
+++ b/frontend/util/api.ts
@ -15,6 +15,9 @@
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

+import deprecate from 'util-deprecate';
+import { getThumbnailURL } from './thumbnail';
+import { RunnerList } from './datatypes/RunnerList';
 import { VideoEntry, VideoList } from './datatypes/VideoList';
 import { VideoOnDemandIndex } from './datatypes/VideoOnDemandIdentifier';
 import sanitizeTitle from './sanitizeTitle';
@ -24,6 +27,9 @@ const upstreamDirectURL = process.env.UPSTREAM_DIRECT_URL || upstreamURL;
 // const apiURL = process.env.API_URL || `${upstreamURL}/api`;
 const apiDirectURL = process.env.API_DIRECT_URL || `${upstreamDirectURL}/api`;

+// TODO - where did the hourglass image go?
+const hourglassImage: string = null;
+
 export class HTTPError extends Error {
  response: Response;

@ -61,6 +67,35 @@ export async function fetchJson(
  }
 }

+function legacyMakeThumbnailURLSet(
+  thumbnailServerURL: string,
+  id: string,
+  {
+    downloadFileName,
+    thumbnails,
+  }: VideoEntry,
+): { [srcSetSpec: string]: URL } {
+  // let relativePaths;
+
+  // If thumbnails were presented by the JSON API, use those
+  if (thumbnails) {
+    return thumbnails
+      .reduce((all, { sourceSize, fileName }) => ({
+        ...all,
+        [sourceSize]: new URL(fileName, thumbnailServerURL),
+      }), {});
+  }
+
+  // Generate default set of URLs based on MP4s on the upstream server
+  return [96, 96 * 2, 96 * 3]
+    .reduce((all, width) => ({
+      [`${width}w`]: downloadFileName
+        ? getThumbnailURL(thumbnailServerURL, id, downloadFileName)
+        : hourglassImage,
+    }), {});
+}
+export const makeThumbnailURLSet = deprecate(legacyMakeThumbnailURLSet, 'makeThumbnailURLSet() is deprecated.');
+
 async function getDirect(relativeURL: string) {
  return fetchJson(`${apiDirectURL}/${relativeURL}`);
 }
@ -73,6 +108,10 @@ export async function getIndex(): Promise<VideoOnDemandIndex> {
  return getDirect('index.json');
 }

+export async function getRunners(): Promise<RunnerList> {
+  return getDirect('runners.json');
+}
+
 export async function getVideos(id: string): Promise<VideoList> {
  const result: VideoList = await getDirect(`videos/${id}.json`);
  result.videos = result.videos.reduce((all: Array<VideoEntry>, {
@ -87,12 +126,12 @@ export async function getVideos(id: string): Promise<VideoList> {
      slug: typeof slug === 'string'
        ? slug
        : sanitizeTitle(title + (
-          all.find(v => v.title === title)
-            ? ` ${all.filter(v => v.title === title).length + 1}`
+          all.find((v) => v.title === title)
+            ? ` ${all.filter((v) => v.title === title).length + 1}`
            : ''
        )),
    },
-  ], [])
+  ], []);
  return result;
 }

--- a/frontend/util/datatypes/RunnerList.ts
+++ b/frontend/util/datatypes/RunnerList.ts
@ -0,0 +1,36 @@
+/**
+ * Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+// ref possible platforms: https://github.com/GamesDoneQuick/donation-tracker/blob/1fcc4d58193b6e62cf315f5757c5782e790a6818/tracker/models/event.py#L506-L511
+
+export interface RunnerInformation {
+  name: string,
+  stream?: string,
+  twitter?: string,
+  youtube?: string,
+  platform: 'TWITCH' | 'FACEBOOK' | 'YOUTUBE',
+  pronouns?: string,
+  donor?: any,
+  public?: string,
+}
+
+export interface Runner {
+  pk: number,
+  fields: RunnerInformation
+}
+
+export type RunnerList = Array<Runner>;
--- a/frontend/util/datatypes/VideoList.ts
+++ b/frontend/util/datatypes/VideoList.ts
@ -15,17 +15,49 @@
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

+export interface RunInformation {
+  name: string,
+  displayName: string,
+  twitchName: string,
+  console: string,
+  commentators: string,
+  description: string,
+  startTime: string,
+  endTime: string,
+  runTime: string,
+  setupTime: string,
+  coop: boolean,
+  category: string,
+  releaseYear: number,
+  runners: Array<number>,
+  canonicalURL: string,
+}
+
+export type Thumbnails = Thumbnail[];
+
+export interface Thumbnail {
+  sourceSize: string;
+  fileName: string;
+}
+
 export interface VideoEntry {
-  fileName:string
-  title: string
+  downloadFileName: string,
+  title: string,
+  run?: RunInformation,
+  runners?: Array<string>,
+  hosts?: Array<string>,
  duration?: number | string,
  slug: string,
-  sourceVideoURL: string
-  sourceVideoStart: number | string
-  sourceVideoEnd: number | string
+  sourceVideoID: string,
+  sourceVideoURL: string,
+  sourceVideoStart: number | string,
+  sourceVideoEnd: number | string,
+  youtubeVideoID?: string,
+  thumbnails: Thumbnails,
+  youtubeVideoURL?: string,
 }

 export interface VideoList {
-  lastUpdatedAt: string
+  lastUpdatedAt: string,
  videos: Array<VideoEntry>
 }
--- a/frontend/util/datatypes/VideoOnDemandIdentifier.ts
+++ b/frontend/util/datatypes/VideoOnDemandIdentifier.ts
@ -16,8 +16,9 @@
 */

 export interface VideoOnDemandIdentifier {
-  id: string
-  title: string
+  id: string;
+  title: string;
+  longTitle: string;
 }

 export interface VideoOnDemandIndex {
--- a/frontend/util/index.ts
+++ b/frontend/util/index.ts
@ -15,43 +15,6 @@
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

-export function getThumbnailURL(
-  thumbnailServerURL: string,
-  id: string,
-  fileName: string,
-  offset: number|string,
-  resizeparams: {
-    width?: number,
-    height?: number,
-  } = {},
-) {
-  // Example: https://thumb-gdq-a.edge.streaminginter.net/agdq2020vods/000.%20Pre%2dpreshow.mp4/thumb-90000-w240.jpg
-
-  // thumb-<offset>[<resizeparams>].jpg
-
-  const resizeparamsStr = Object.entries(resizeparams)
-    .map(([key, value]) => {
-      switch (key) {
-        case 'width':
-          return `w${value}`;
-        case 'height':
-          return `h${value}`;
-        default:
-          throw new Error(`unsupported resizeparam: ${key}`);
-      }
-    })
-    .filter((v) => !!v)
-    .join('-');
-
-  return `${thumbnailServerURL}/${[
-    id,
-    fileName,
-    `thumb-${offset}${resizeparamsStr.length > 0 ? `-${resizeparamsStr}` : ''}.jpg`,
-  ]
-    .map(encodeURIComponent)
-    .join('/')}`;
-}
-
 export function getHLSMasterURL(
  hlsServerURL: string,
  id: string,
@ -86,3 +49,4 @@ export * as api from './api';
 export * as localization from './localization';
 export * as session from './session';
 export * as status from './status';
+export * as thumbnail from './thumbnail';
--- a/frontend/util/session.ts
+++ b/frontend/util/session.ts
@ -17,7 +17,7 @@

 import { withIronSession } from 'next-iron-session';
 import type { Session } from 'next-iron-session';
-import { IncomingMessage, ServerResponse } from 'http';
+import { IncomingMessage } from 'http';
 import { NextApiResponse, NextPageContext } from 'next';
 import { DocumentContext } from 'next/document';

--- a/frontend/util/thumbnail.ts
+++ b/frontend/util/thumbnail.ts
@ -0,0 +1,26 @@
+/**
+ * Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export function getThumbnailURL(
+  thumbnailServerURL: string,
+  id: string,
+  thumbnailFilePath: string,
+) {
+  return `${thumbnailServerURL}/${encodeURIComponent(id)}/${thumbnailFilePath}`;
+}
+
+export default undefined;
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
--- a/streamserver/Dockerfile
+++ b/streamserver/Dockerfile
@ -1,5 +1,7 @@
 ARG NGINX_VERSION=1.20.1

+# FIXME - 1.20.1 uses an Alpine version that ships a _pre version of gcc/libc, that confuses the icedream/nginx module build script. Has to be fixed in that repo instead.
+
 FROM icedream/nginx as icedream-nginx

 FROM nginx:${NGINX_VERSION}-alpine AS ffmpeg-build