Update next, react, font-awesome and eslint packages.

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/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/VideoListItem.tsx

@@ -89,9 +89,8 @@ 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
               className={style.thumbnail}
               src={
@@ -119,18 +118,15 @@ export default function VideoListItem({
               }
               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 className={style['run-name']}>{title}</div>
               <div className={[style['run-category'], 'mt-0'].join(' ')}>{runData?.category}</div>
             </div>
-            </a>
           </Link>
         </Col>
         <Col sm={5} xs={12}>

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/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/[id].tsx

@@ -128,7 +128,7 @@ const VideoListPage: NextPage<VideoListPageProps> = function VideoListPage({
       </Head>
 
       <Breadcrumb>
-        <Link passHref href="/">
+        <Link legacyBehavior passHref href="/">
           <Breadcrumb.Item>
             <FormattedMessage
               id="Breadcrumb.homeTitle"
@@ -137,7 +137,7 @@ const VideoListPage: NextPage<VideoListPageProps> = function VideoListPage({
             />
           </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

@@ -425,7 +425,7 @@ export default function VideoPlayerPage({
       </Head>
 
       <Breadcrumb>
-        <Link passHref href="/">
+        <Link legacyBehavior passHref href="/">
           <Breadcrumb.Item>
             <FormattedMessage
               id="Breadcrumb.homeTitle"
@@ -434,10 +434,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,6 +235,7 @@ function GDQArchiveApp({
   });
 
   return (
+    <SSRProvider>
       <SWRConfig
         value={{
           fetcher: fetchJson,
@@ -252,10 +251,10 @@ function GDQArchiveApp({
         >
           <Navbar bg="dark" expand="md" variant="dark">
             <Container fluid>
-            <Link passHref href="/">
+              <Link legacyBehavior passHref href="/">
                 <Navbar.Brand>
                   <Image
-                  src={gdqLogo}
+                    src={typeof gdqLogo === 'string' ? gdqLogo : gdqLogo.src}
                     alt="Games Done Quick"
                     height={30}
                     className={[
@@ -264,7 +263,9 @@ function GDQArchiveApp({
                       // 'align-middle',
                       'align-top',
                     ].join(' ')}
-                />{' '}<FormattedMessage
+                  />
+                  {' '}
+                  <FormattedMessage
                     id="Navbar.brandText"
                     defaultMessage="Instant Archive"
                   />
@@ -273,7 +274,7 @@ function GDQArchiveApp({
               {/* <Navbar.Text>
               <Breadcrumb>
                 <Breadcrumb.Item>
-                  <Link passHref href="/">
+                  <Link legacyBehavior passHref href="/">
                     <FormattedMessage
                       id="Breadcrumb.homeTitle"
                       defaultMessage="GDQ Instant Archive"
@@ -298,12 +299,14 @@ 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}
@@ -313,7 +316,10 @@ function GDQArchiveApp({
             </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 className="mt-3">
             {/* eslint-disable-next-line react/jsx-props-no-spreading */}
@@ -321,6 +327,7 @@ function GDQArchiveApp({
           </Container>
         </IntlProvider>
       </SWRConfig>
+    </SSRProvider>
   );
 }
 

frontend/pages/index.tsx

@@ -53,7 +53,7 @@ const Home: NextPage<HomeProps> = function Home({ index: { announcements, ids }
       </Head>
 
       {/* <Breadcrumb>
-        <Link passHref href="/">
+        <Link legacyBehavior passHref href="/">
           <Breadcrumb.Item active>
             <FormattedMessage
               id="Breadcrumb.homeTitle"
@@ -91,7 +91,7 @@ const Home: NextPage<HomeProps> = function Home({ 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/tsconfig.json

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

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';