Add missing rewritten next config.

ResponsiveEmbed was renamed to Ratio and now behaves slightly different
compared to old Bootstrap 4.

frontend/components/CopyField.tsx

@@ -23,6 +23,7 @@ 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';
 
 function CopyField({
@@ -60,7 +61,7 @@ function CopyField({
         icon
           ? (
             <InputGroup.Text>
-              <FontAwesomeIcon icon="share" />
+              <FontAwesomeIcon icon={faShare} />
             </InputGroup.Text>
           )
           : ''
@@ -86,7 +87,7 @@ function CopyField({
 }
 
 CopyField.defaultProps = {
-  copyIcon: 'copy',
+  copyIcon: faCopy,
   icon: null,
 };
 

frontend/components/DarkToggler.tsx

@@ -22,6 +22,7 @@ import {
   Button,
   // Spinner
 } from 'react-bootstrap';
+import { faLightbulb } from '@fortawesome/free-solid-svg-icons';
 import { FormattedMessage } from './localization';
 
 export default function DarkToggler({
@@ -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"

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';
@@ -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"
@@ -44,5 +46,5 @@ export default function DownloadButton({
 }
 
 DownloadButton.defaultProps = {
-  icon: 'download',
+  icon: faDownload,
 };

frontend/components/LocaleSwitcher.tsx

@@ -20,6 +20,7 @@ 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';
 
@@ -43,7 +44,7 @@ export default function LocaleSwitcher({
       id="dropdown-locale"
       title={(
         <>
-          <FontAwesomeIcon icon="language" />
+          <FontAwesomeIcon icon={faLanguage} />
           <span className="sr-only">
             <FormattedMessage
               id="LocaleSwitcher.screenReaderText"

frontend/components/Runner.tsx

@@ -1,3 +1,6 @@
+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';
@@ -9,22 +12,32 @@ export default function Runner({ runner }: { runner: RunnerInformation }) {
     <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}>
+        {runner.platform === 'TWITCH' && runner.stream.length > 0 ? (
-          <FontAwesomeIcon icon={["fab", "twitch"]} className={['mr-1', style.twitch].join(' ')} />
+          <a href={runner.stream}>
-        </a> : ''}
+            <FontAwesomeIcon icon={faTwitch} className={['mr-1', style.twitch].join(' ')} />
-        {runner.platform === 'FACEBOOK' && runner.stream.length > 0 ? <a href={runner.stream}>
+          </a>
-          <FontAwesomeIcon icon={["fab", "facebook"]} className={['mr-1', style.facebook].join(' ')} />
+        ) : ''}
-        </a> : ''}
+        {runner.platform === 'FACEBOOK' && runner.stream.length > 0 ? (
-        {runner.platform === 'YOUTUBE' && runner.stream.length > 0 ? <a href={runner.stream}>
+          <a href={runner.stream}>
-          <FontAwesomeIcon icon={["fab", "youtube"]} className={['mr-1', style.youtube].join(' ')} />
+            <FontAwesomeIcon icon={faFacebook} className={['mr-1', style.facebook].join(' ')} />
-        </a> : ''}
+          </a>
-        {runner.twitter && runner.twitter.length > 0 ? <a href={`https://twitter.com/${runner.twitter}`}>
+        ) : ''}
-          <FontAwesomeIcon icon={["fab", "twitter"]} className={['mr-1', style.twitter].join(' ')} />
+        {runner.platform === 'YOUTUBE' && runner.stream.length > 0 ? (
-        </a> : ''}
+          <a href={runner.stream}>
-        {runner.youtube && runner.youtube.length > 0 ? <a href={`https://youtube.com/${runner.youtube}`}>
+            <FontAwesomeIcon icon={faYoutube} className={['mr-1', style.youtube].join(' ')} />
-          <FontAwesomeIcon icon={["fab", "youtube"]} className={['mr-1', style.youtube].join(' ')} />
+          </a>
-        </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>
-  )
+  );
 }

frontend/components/VideoList.tsx

@@ -24,6 +24,7 @@ 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';
@@ -70,7 +71,7 @@ class VideoList extends React.Component<VideoListProps, VideoListState> {
       <div>
         <InputGroup>
           <InputGroup.Text id="search-prepend">
-            <FontAwesomeIcon icon="search" />
+            <FontAwesomeIcon icon={faSearch} />
           </InputGroup.Text>
           <FormControl
             placeholder={intl.formatMessage({ id: 'VideoList.Search.Placeholder', defaultMessage: 'Type something to search here…' })}

frontend/components/VideoListItem.tsx

@@ -27,6 +27,7 @@ import Link from 'next/link';
 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';
@@ -89,54 +90,50 @@ export default function VideoListItem({
     <ListGroup.Item>
       <Row>
         <Col sm={3} xs={3}>
-          <Link passHref href="/[id]/[vslug]" as={`/${id}/${slug}`}>
+          <Link href="/[id]/[vslug]" as={`/${id}/${slug}`}>
             {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-            <a>
+            <Image
-              <Image
+              className={style.thumbnail}
-                className={style.thumbnail}
+              src={
-                src={
+                thumbnails.length > 0
-                  thumbnails.length > 0
+                  ? getThumbnailURL(thumbnailServerURL, id, thumbnails[0].fileName)
-                    ? getThumbnailURL(thumbnailServerURL, id, thumbnails[0].fileName)
+                  : hourglassImage
-                    : hourglassImage
+              }
-                }
+              srcSet={
-                srcSet={
+                Array.isArray(thumbnails) && thumbnails.length > 0
-                  Array.isArray(thumbnails) && thumbnails.length > 0
+                  ? thumbnails
-                    ? thumbnails
+                    .map(({
-                      .map(({
+                      sourceSize,
+                      fileName,
+                    }) => (
+                      [
+                        thumbnails.length > 0
+                          ? getThumbnailURL(thumbnailServerURL, id, fileName)
+                          : hourglassImage,
                         sourceSize,
-                        fileName,
+                      ]
-                      }) => (
+                    ))
-                        [
+                    .map((item) => item.join(' '))
-                          thumbnails.length > 0
+                    .join(', ')
-                            ? getThumbnailURL(thumbnailServerURL, id, fileName)
+                  : ''
-                            : hourglassImage,
+              }
-                          sourceSize,
+              alt={title}
-                        ]
+            />
-                      ))
-                      .map((item) => item.join(' '))
-                      .join(', ')
-                    : ''
-                }
-                alt={title}
-              />
-            </a>
           </Link>
         </Col>
         <Col sm={4} xs={9}>
-          <Link href="/[id]/[vslug]" as={`/${id}/${slug}`}>
+          <Link href="/[id]/[vslug]" as={`/${id}/${slug}`} className="text-reset text-decoration-none">
             {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-            <a className="text-reset text-decoration-none">
+            <div>
-              <div>
+              <div className={style['run-name']}>{title}</div>
-                <div className={style['run-name']}>{title}</div>
+              <div className={[style['run-category'], 'mt-0'].join(' ')}>{runData?.category}</div>
-                <div className={[style['run-category'], 'mt-0'].join(' ')}>{runData?.category}</div>
+            </div>
-              </div>
-            </a>
           </Link>
         </Col>
         <Col sm={5} xs={12}>
           {runners && runners.length > 0 ? (
             <div className="mr-2">
-              <FontAwesomeIcon icon="running" />
+              <FontAwesomeIcon icon={faRunning} />
               {' '}
               {runners.reduce((all: Array<ReactElement>, runner: RunnerData) => [
                 ...all,
@@ -147,7 +144,7 @@ export default function VideoListItem({
           ) : ''}
           {displayDuration !== null ? (
             <span className="mr-2 text-nowrap">
-              <FontAwesomeIcon icon="clock" />
+              <FontAwesomeIcon icon={faClock} />
               {' '}
               <FormattedDuration
                 seconds={displayDuration}
@@ -157,7 +154,7 @@ export default function VideoListItem({
             </span>
           ) : (
             <span className="mr-2 text-nowrap">
-              <FontAwesomeIcon icon="hourglass" />
+              <FontAwesomeIcon icon={faHourglass} />
               {' '}
               Coming up
             </span>

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,44 +64,40 @@ export default class VideoPlayer extends React.Component<{
       ...videoJsOptions
     } = this.props;
     return (
-      <ResponsiveEmbed aspectRatio="16by9">
+      <Ratio aspectRatio="16by9" data-vjs-player>
-        <div>
+        {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
-          <div data-vjs-player>
+        <video
-            {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
+          ref={(node) => { this.videoNode = node; }}
-            <video
+          className="video-js"
-              ref={(node) => { this.videoNode = node; }}
+          data-setup={
-              className="video-js"
+            JSON.stringify({
-              data-setup={
+              autoplay,
-                JSON.stringify({
+              controls,
-                  autoplay,
+              ...videoJsOptions,
-                  controls,
+            })
-                  ...videoJsOptions,
+          }
-                })
+          controls={controls}
-              }
+          autoPlay={!!(autoplay === 'true' || autoplay === true)}
-              controls={controls}
+        >
-              autoPlay={!!(autoplay === 'true' || autoplay === true)}
+          {sources.map(
-            >
+            ({ src, type }) => (
-              {sources.map(
+              <source
-                ({ src, type }) => (
+                key={`${JSON.stringify({ src, type })}`}
-                  <source
+                src={src}
-                    key={`${JSON.stringify({ src, type })}`}
+                type={type}
-                    src={src}
+              />
-                    type={type}
+            ),
-                  />
+          )}
-                ),
+          <p className="vjs-no-js">
-              )}
+            {/* TODO - localize */}
-              <p className="vjs-no-js">
+            To view this video please enable JavaScript, and consider upgrading to a
-                {/* TODO - localize */}
+            web browser that
-                To view this video please enable JavaScript, and consider upgrading to a
+            <a href="https://videojs.com/html5-video-support/" target="_blank" rel="noreferrer">
-                web browser that
+              supports HTML5 video
-                <a href="https://videojs.com/html5-video-support/" target="_blank" rel="noreferrer">
+            </a>
-                  supports HTML5 video
+          </p>
-                </a>
+        </video>
-              </p>
+      </Ratio>
-            </video>
-          </div>
-        </div>
-      </ResponsiveEmbed>
     );
   }
 }

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>
-    </>
-  );
-}

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

frontend/custom.d.ts

@@ -1,16 +1,16 @@
 /**
  * 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/>.
  */

frontend/next-env.d.ts

@@ -1,5 +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.

frontend/next.config.js

@@ -1,39 +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/>.
- */
-
-const withPlugins = require("next-compose-plugins");
-const optimizedImages = require("next-optimized-images");
-
-module.exports = 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,
-    },
-  }
-);

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;

frontend/package.json

@@ -16,45 +16,40 @@
   "dependencies": {
     "@formatjs/intl-numberformat": "^7.1.5",
     "@formatjs/intl-utils": "^3.8.4",
-    "@fortawesome/fontawesome-free": "^5.15.3",
+    "@fortawesome/fontawesome-free": "^6.2.1",
-    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/fontawesome-svg-core": "^6.2.1",
-    "@fortawesome/free-brands-svg-icons": "^5.15.3",
+    "@fortawesome/free-brands-svg-icons": "^6.2.1",
-    "@fortawesome/free-regular-svg-icons": "^5.15.3",
+    "@fortawesome/free-regular-svg-icons": "^6.2.1",
-    "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@fortawesome/free-solid-svg-icons": "^6.2.1",
-    "@fortawesome/react-fontawesome": "^0.1.14",
+    "@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",
-    "file-loader": "^6.2.0",
+    "eslint-config-next": "^13.1.1",
     "fuse.js": "^6.4.6",
-    "imagemin-optipng": "^0.1.0",
     "imagemin-svgo": "^9.0.0",
     "intl-messageformat": ">= 2.0",
-    "native-url": "^0.3.4",
+    "next": "^13.1.1",
-    "next": "^11.1.3",
     "next-compose-plugins": "^2.2.1",
     "next-iron-session": "^4.2.0",
-    "next-optimized-images": "^1.4.2",
     "nprogress": "^0.2.0",
     "popper.js": "^1.16.1",
-    "raw-loader": "^4.0.2",
+    "react": "^18.2.0",
-    "react": "17.0.2",
     "react-bootstrap": "^2.4.0",
-    "react-dom": "17.0.2",
+    "react-dom": "^18.2.0",
     "react-intl": "^5.20.4",
     "react-intl-formatted-duration": "^4.0.0",
     "react-youtube": "^9.0.2",
     "sass": "^1.53.0",
     "shaka-player": "^3.1.1",
-    "shaka-player-react": "^1.1.2",
+    "shaka-player-react": "^1.1.5",
-    "swr": "^0.5.6",
+    "swr": "^2.0.0",
-    "url-loader": "^4.1.1",
     "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",
-    "webpack": "^5.73.0",
     "xmlbuilder2": "^2.4.1"
   },
   "devDependencies": {
@@ -62,14 +57,16 @@
     "@types/node": "^16.3.1",
     "@types/nprogress": "^0.2.0",
     "@types/react": "^17.0.14",
-    "@typescript-eslint/eslint-plugin": "^4.28.2",
+    "@types/util-deprecate": "^1.0.0",
-    "@typescript-eslint/parser": "^4.28.2",
+    "@typescript-eslint/eslint-plugin": "^5.13.0",
-    "eslint": "^7.30.0",
+    "@typescript-eslint/parser": "^5.0.0",
-    "eslint-config-airbnb-typescript": "^12.3.1",
+    "eslint": "^7.32.0 || ^8.2.0",
-    "eslint-plugin-import": "2.23.4",
+    "eslint-config-airbnb": "^19.0.4",
-    "eslint-plugin-jsx-a11y": "6.4.1",
+    "eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-plugin-react": "7.24.0",
+    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-react-hooks": "4",
+    "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": "^8.2.15",
@@ -93,6 +90,7 @@
       "es2020": true
     },
     "extends": [
+      "airbnb",
       "airbnb-typescript"
     ],
     "parserOptions": {

frontend/pages/404.tsx

@@ -16,9 +16,9 @@
  */
 
 import * as React from 'react';
-import Error from "./_error";
+import Error from './_error';
 
-const Error404Page = () => (
+function Error404Page() {
-  <Error statusCode={404} />
+  return <Error statusCode={404} />;
-)
+}
 export default Error404Page;

frontend/pages/[id].tsx

@@ -43,7 +43,9 @@ interface VideoListPageProps {
   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,
@@ -94,14 +96,14 @@ export const getServerSideProps: GetServerSideProps<VideoListPageProps> = async
   };
 };
 
-const VideoListPage: NextPage<VideoListPageProps> = ({
+const VideoListPage: NextPage<VideoListPageProps> = function VideoListPage({
   id,
   lastUpdatedAt,
   thumbnailServerURL,
   title,
   videos,
   runners,
-}) => {
+}) {
   if (!id) {
     return notFound();
   }
@@ -117,21 +119,16 @@ const VideoListPage: NextPage<VideoListPageProps> = ({
     <div>
       <Head>
         <title>
-          {title}
+          {`${title} – ${intl.formatMessage({
-          {' '}
-          –
-          {' '}
-          {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"
@@ -140,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>

frontend/pages/[id]/[vslug].tsx

@@ -33,6 +33,7 @@ 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';
@@ -301,6 +302,7 @@ export default function VideoPlayerPage({
             1.75,
             2,
           ]}
+          // eslint-disable-next-line react/jsx-no-bind
           onVolumeChange={onVolumeChange}
           sources={[
             { src: getHLSMasterURL(hlsServerURL, id, downloadFileName), type: 'application/x-mpegURL' },
@@ -312,7 +314,10 @@ export default function VideoPlayerPage({
         />
       </Tab>,
     );
-    downloadButtons.push(<DownloadButton id={id} fileName={downloadFileName} />);
+    downloadButtons.push(<DownloadButton
+      id={id}
+      fileName={getDownloadURL(id, downloadFileName)}
+    />);
   }
 
   // Twitch tab
@@ -351,7 +356,8 @@ export default function VideoPlayerPage({
         variant="twitch"
         key="watchOnTwitch"
       >
-        <FontAwesomeIcon icon={['fab', 'twitch']} className="mr-2" />
+        <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."
@@ -402,7 +408,8 @@ export default function VideoPlayerPage({
         variant="youtube"
         key="watchOnYouTube"
       >
-        <FontAwesomeIcon icon={['fab', 'youtube']} className="mr-2" />
+        <FontAwesomeIcon icon={faYoutube} className="mr-2" />
+        {' '}
         <FormattedMessage
           id="VideoPlayerPage.watchOnYouTube"
           description="Button below video that links user to the YouTube upload of the VOD."
@@ -416,25 +423,16 @@ export default function VideoPlayerPage({
     <div>
       <Head>
         <title>
-          {videoTitle}
+          {`${videoTitle} – ${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"
@@ -443,10 +441,10 @@ export default function VideoPlayerPage({
             />
           </Breadcrumb.Item>
         </Link>
-        <Link passHref href="/[id]" as={`/${id}`}>
+        <Link legacyBehavior passHref href="/[id]" as={`/${id}`}>
           <Breadcrumb.Item>{title}</Breadcrumb.Item>
         </Link>
-        <Link passHref href="/[id]/[vslug]" as={`/${id}/${vslug}`}>
+        <Link legacyBehavior passHref href="/[id]/[vslug]" as={`/${id}/${vslug}`}>
           <Breadcrumb.Item active>{videoTitle}</Breadcrumb.Item>
         </Link>
       </Breadcrumb>

frontend/pages/_app.tsx

@@ -43,12 +43,13 @@ 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';
 
@@ -58,9 +59,9 @@ import 'nprogress/nprogress.css';
 import '../styles/main.scss';
 import Image from 'react-bootstrap/Image';
 import Head from 'next/head';
-import { Breadcrumb, ButtonGroup, Nav, Stack } from 'react-bootstrap';
+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';
@@ -113,10 +114,7 @@ function GDQArchiveApp({
     initialMessages,
     ...pageProps
   },
-}: {
+}: AppProps<GDQArchiveAppPageProps>) {
-  Component: React.ElementType<Record<string, any>>,
-  pageProps: GDQArchiveAppPageProps,
-}) {
   /* Component state */
 
   const [currentMessages, setMessages] = React.useState(initialMessages);
@@ -139,7 +137,7 @@ function GDQArchiveApp({
     mutate,
   } = useSWR('/api/user', {
     fetcher: fetchJson,
-    initialData: {
+    fallbackData: {
       locale: initialLocale,
       enableDark: initialEnableDark,
     },
@@ -205,8 +203,8 @@ function GDQArchiveApp({
   }
 
   /**
- * @param {bool} value
+* @param {bool} value
- */
+*/
   async function onChangeDarkMode(value: boolean) {
     setIsChangingDarkMode(true);
 
@@ -237,43 +235,46 @@ function GDQArchiveApp({
   });
 
   return (
-    <SWRConfig
+    <SSRProvider>
-      value={{
+      <SWRConfig
-        fetcher: fetchJson,
+        value={{
-        onError(err) {
+          fetcher: fetchJson,
-          console.error(err);
+          onError(err) {
-        },
+            console.error(err);
-      }}
+          },
-    >
+        }}
-      <IntlProvider
-        messages={currentMessages}
-        locale={currentLocale}
-        defaultLocale={defaultLocale}
       >
-        <Navbar bg="dark" expand="md" variant="dark">
+        <IntlProvider
-          <Container fluid>
+          messages={currentMessages}
-            <Link passHref href="/">
+          locale={currentLocale}
-              <Navbar.Brand>
+          defaultLocale={defaultLocale}
-                <Image
+        >
-                  src={gdqLogo}
+          <Navbar bg="dark" expand="md" variant="dark">
-                  alt="Games Done Quick"
+            <Container fluid>
-                  height={30}
+              <Link legacyBehavior passHref href="/">
-                  className={[
+                <Navbar.Brand>
-                    // HomeStyle.logo,
+                  <Image
-                    'd-inline-block',
+                    src={typeof gdqLogo === 'string' ? gdqLogo : gdqLogo.src}
-                    // 'align-middle',
+                    alt="Games Done Quick"
-                    'align-top',
+                    height={30}
-                  ].join(' ')}
+                    className={[
-                />{' '}<FormattedMessage
+                      // HomeStyle.logo,
-                  id="Navbar.brandText"
+                      'd-inline-block',
-                  defaultMessage="Instant Archive"
+                      // 'align-middle',
-                />
+                      'align-top',
-              </Navbar.Brand>
+                    ].join(' ')}
-            </Link>
+                  />
-            {/* <Navbar.Text>
+                  {' '}
+                  <FormattedMessage
+                    id="Navbar.brandText"
+                    defaultMessage="Instant Archive"
+                  />
+                </Navbar.Brand>
+              </Link>
+              {/* <Navbar.Text>
               <Breadcrumb>
                 <Breadcrumb.Item>
-                  <Link passHref href="/">
+                  <Link legacyBehavior passHref href="/">
                     <FormattedMessage
                       id="Breadcrumb.homeTitle"
                       defaultMessage="GDQ Instant Archive"
@@ -290,37 +291,43 @@ function GDQArchiveApp({
                 </Breadcrumb.Item>
               </Breadcrumb>
             </Navbar.Text> */}
-            <Navbar.Toggle aria-controls="basic-navbar-nav" />
+              <Navbar.Toggle aria-controls="basic-navbar-nav" />
-            <Navbar.Collapse
+              <Navbar.Collapse
-              id="basic-navbar-nav"
+                id="basic-navbar-nav"
-              className="justify-content-end"
+                className="justify-content-end"
-            >
+              >
-              <ButtonGroup>
+                <ButtonGroup>
-                <LocaleSwitcher
+                  <LocaleSwitcher
-                  locale={currentLocale}
+                    locale={currentLocale}
-                  onChangeLocale={onChangeLocale}
+                    // eslint-disable-next-line react/jsx-no-bind
-                  disabled={isChangingLocale || isValidating}
+                    onChangeLocale={onChangeLocale}
-                  showLoading={isChangingLocale}
+                    disabled={isChangingLocale || isValidating}
-                />
+                    showLoading={isChangingLocale}
-                <DarkToggler
+                  />
-                  isDarkEnabled={enableDarkMode}
+                  <DarkToggler
-                  onChangeDarkMode={onChangeDarkMode}
+                    isDarkEnabled={enableDarkMode}
-                  disabled={isChangingDarkMode || isValidating}
+                    // eslint-disable-next-line react/jsx-no-bind
-                  showLoading={isChangingDarkMode}
+                    onChangeDarkMode={onChangeDarkMode}
-                />
+                    disabled={isChangingDarkMode || isValidating}
-              </ButtonGroup>
+                    showLoading={isChangingDarkMode}
-            </Navbar.Collapse>
+                  />
+                </ButtonGroup>
+              </Navbar.Collapse>
+            </Container>
+          </Navbar>
+          <Head>
+            <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 className="mt-3">
+            {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+            <Component {...pageProps} />
           </Container>
-        </Navbar>
+        </IntlProvider>
-        <Head>
+      </SWRConfig>
-          <link rel="icon" type="image/svg+xml" href={favicon} />
+    </SSRProvider>
-        </Head>
-        <Container className="mt-3">
-          {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-          <Component {...pageProps} />
-        </Container>
-      </IntlProvider>
-    </SWRConfig>
   );
 }
 

frontend/pages/_error.tsx

@@ -21,39 +21,40 @@ import Head from 'next/head';
 import * as React from 'react';
 import { useIntl } from 'react-intl';
 
-const Error: NextPage<ErrorProps> = ({
+const Error: NextPage<ErrorProps> = function Error({
   statusCode,
   title,
-}) => {
+}) {
   const intl = useIntl();
   return (
     <div>
       <Head>
         <title>
-          {title}
+          {`${title} – ${intl.formatMessage({
-          {' '}
-          –
-          {' '}
-          {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>
       <p>
-        <h1>{statusCode} {title}</h1>
+        <h1>
+          {statusCode}
+          {' '}
+          {title}
+        </h1>
       </p>
     </div>
-  )
+  );
-}
+};
 
 Error.getInitialProps = (ctx) => {
   const { res, err } = ctx;
-  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";
+  const statusCode = res ? res.statusCode : (err ? err.statusCode : 404);
-  return { statusCode, title }
+  // eslint-disable-next-line no-nested-ternary
-}
+  const title = res ? res.statusMessage : (err ? err.message : 'Page not found');
+  return { statusCode, title };
+};
 
-export default Error
+export default Error;

frontend/pages/api/changePreferences.ts

@@ -1,16 +1,16 @@
 /**
  * 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/>.
  */

frontend/pages/api/user.ts

@@ -1,16 +1,16 @@
 /**
  * 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/>.
  */

frontend/pages/index.tsx

@@ -37,7 +37,7 @@ export const getServerSideProps: GetServerSideProps<HomeProps> = async () => ({
     index: await getIndex(),
   },
 });
-const Home: NextPage<HomeProps> = ({ index: { announcements, ids } }) => {
+const Home: NextPage<HomeProps> = function Home({ index: { announcements, ids } }) {
   const intl = useIntl();
   return (
     <div>
@@ -49,12 +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="/">
+        <Link legacyBehavior passHref href="/">
           <Breadcrumb.Item active>
             <FormattedMessage
               id="Breadcrumb.homeTitle"
@@ -92,7 +91,7 @@ const Home: NextPage<HomeProps> = ({ index: { announcements, ids } }) => {
 
       <ListGroup>
         {ids.map(({ id, longTitle }) => (
-          <Link key={id} passHref href="/[id]" as={`/${id}`}>
+          <Link legacyBehavior key={id} passHref href="/[id]" as={`/${id}`}>
             <ListGroup.Item action>
               <h5>{longTitle}</h5>
             </ListGroup.Item>

frontend/pages/robots.txt.ts

@@ -1,16 +1,16 @@
 /**
  * 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/>.
  */

frontend/pages/sitemap.xml.ts

@@ -1,16 +1,16 @@
 /**
  * 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/>.
  */

frontend/tsconfig.json

@@ -33,7 +33,8 @@
       "video.js": [
         "typings/video.js"
       ]
-    }
+    },
+    "incremental": true
   },
   "include": [
     "next-env.d.ts",

frontend/typings/url-slug/index.d.ts

@@ -5,12 +5,12 @@ export type UrlSlugTransformer = (
   separator: UrlSlugSeparator
 ) => string;
 
-export type UrlSlugSeparator = '-'|'.'|'_'|'~'|'';
+export type UrlSlugSeparator = '-' | '.' | '_' | '~' | '';
 
 export interface UrlSlugOptions {
   camelCase?: boolean = true;
   separator?: UrlSlugSeparator = '-';
-  transformer: false|UrlSlugTransformer = false;
+  transformer: false | UrlSlugTransformer = false;
 }
 
 declare function urlSlug(

frontend/util/api.ts

@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { deprecate } from 'util';
+import deprecate from 'util-deprecate';
 import { getThumbnailURL } from './thumbnail';
 import { RunnerList } from './datatypes/RunnerList';
 import { VideoEntry, VideoList } from './datatypes/VideoList';

frontend/util/types.ts

@@ -15,4 +15,4 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-export type UnboxPromise<T extends Promise<any>> = T extends Promise<infer U> ? U: never;
+export type UnboxPromise<T extends Promise<any>> = T extends Promise<infer U> ? U : never;