icedream
/
gdq-archive
1
0
Fork 0
Code Issues Pull Requests 2 Releases Activity

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

new-frontend
Icedream 2023-01-09 02:35:54 +01:00
parent 21244c267f
commit d41809eafa
Signed by: icedream
GPG Key ID: 468BBEEBB9EC6AEA
13 changed files with 767 additions and 6127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/components/DarkToggler.tsx
View File

@ -22,6 +22,7 @@ import {
Button, Button,
// Spinner // Spinner
} from 'react-bootstrap'; } from 'react-bootstrap';
import { faLightbulb } from '@fortawesome/free-solid-svg-icons';
import { FormattedMessage } from './localization'; import { FormattedMessage } from './localization';
export default function DarkToggler({ export default function DarkToggler({
@ -44,7 +45,7 @@ export default function DarkToggler({
variant="outline-secondary" variant="outline-secondary"
active={!isDarkEnabled} active={!isDarkEnabled}
> >
<FontAwesomeIcon icon={[isDarkEnabled ? 'far' : 'fas', 'lightbulb']} /> <FontAwesomeIcon icon={faLightbulb} />
<span className="sr-only"> <span className="sr-only">
<FormattedMessage <FormattedMessage
id="DarkToggler.screenReaderText" id="DarkToggler.screenReaderText"

3
frontend/components/LocaleSwitcher.tsx
View File

@ -20,6 +20,7 @@ import React from 'react';
import { import {
ButtonGroup, Dropdown, DropdownButton, ButtonGroup, Dropdown, DropdownButton,
} from 'react-bootstrap'; } from 'react-bootstrap';
import { faLanguage } from '@fortawesome/free-solid-svg-icons';
import { FormattedMessage } from './localization'; import { FormattedMessage } from './localization';
import { availableLocales, defaultLocale, localeDescriptions } from '../util/localization'; import { availableLocales, defaultLocale, localeDescriptions } from '../util/localization';
@ -43,7 +44,7 @@ export default function LocaleSwitcher({
id="dropdown-locale" id="dropdown-locale"
title={( title={(
<> <>
<FontAwesomeIcon icon="language" /> <FontAwesomeIcon icon={faLanguage} />
<span className="sr-only"> <span className="sr-only">
<FormattedMessage <FormattedMessage
id="LocaleSwitcher.screenReaderText" id="LocaleSwitcher.screenReaderText"

68
frontend/components/VideoListItem.tsx
View File

@ -89,48 +89,44 @@ export default function VideoListItem({
<ListGroup.Item> <ListGroup.Item>
<Row> <Row>
<Col sm={3} xs={3}> <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 */} {/* 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, 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> </Link>
</Col> </Col>
<Col sm={4} xs={9}> <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 */} {/* 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> </Link>
</Col> </Col>
<Col sm={5} xs={12}> <Col sm={5} xs={12}>

2
frontend/next-env.d.ts vendored
View File

@ -1,5 +1,5 @@
/// <reference types="next" /> /// <reference types="next" />
/// <reference types="next/types/global" /> /// <reference types="next/image-types/global" />
// NOTE: This file should not be edited // NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information. // see https://nextjs.org/docs/basic-features/typescript for more information.

39
frontend/next.config.js
View File

@ -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,
},
}
);

50
frontend/package.json
View File

@ -16,45 +16,40 @@
"dependencies": { "dependencies": {
"@formatjs/intl-numberformat": "^7.1.5", "@formatjs/intl-numberformat": "^7.1.5",
"@formatjs/intl-utils": "^3.8.4", "@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", "@popperjs/core": "^2.9.2",
"bootstrap": "5.1.x", "bootstrap": "5.1.x",
"bootstrap-dark-5": "1.1.0", "bootstrap-dark-5": "1.1.0",
"cssnano": "^5.0.6", "cssnano": "^5.0.6",
"file-loader": "^6.2.0", "eslint-config-next": "^13.1.1",
"fuse.js": "^6.4.6", "fuse.js": "^6.4.6",
"imagemin-optipng": "^0.1.0",
"imagemin-svgo": "^9.0.0", "imagemin-svgo": "^9.0.0",
"intl-messageformat": ">= 2.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-compose-plugins": "^2.2.1",
"next-iron-session": "^4.2.0", "next-iron-session": "^4.2.0",
"next-optimized-images": "^1.4.2",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"popper.js": "^1.16.1", "popper.js": "^1.16.1",
"raw-loader": "^4.0.2", "react": "^18.2.0",
"react": "17.0.2",
"react-bootstrap": "^2.4.0", "react-bootstrap": "^2.4.0",
"react-dom": "17.0.2", "react-dom": "^18.2.0",
"react-intl": "^5.20.4", "react-intl": "^5.20.4",
"react-intl-formatted-duration": "^4.0.0", "react-intl-formatted-duration": "^4.0.0",
"react-youtube": "^9.0.2", "react-youtube": "^9.0.2",
"sass": "^1.53.0", "sass": "^1.53.0",
"shaka-player": "^3.1.1", "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", "url-slug": "^3.0.2",
"util-deprecate": "^1.0.2",
"video.js": "^7.13.3", "video.js": "^7.13.3",
"videojs-contrib-dash": "^5.0.0", "videojs-contrib-dash": "^5.0.0",
"videojs-errors": "^4.5.0", "videojs-errors": "^4.5.0",
"webpack": "^5.73.0",
"xmlbuilder2": "^2.4.1" "xmlbuilder2": "^2.4.1"
}, },
"devDependencies": { "devDependencies": {
@ -62,14 +57,16 @@
"@types/node": "^16.3.1", "@types/node": "^16.3.1",
"@types/nprogress": "^0.2.0", "@types/nprogress": "^0.2.0",
"@types/react": "^17.0.14", "@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", "lint-staged": "^11.0.0",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"postcss": "^8.2.15", "postcss": "^8.2.15",
@ -93,6 +90,7 @@
"es2020": true "es2020": true
}, },
"extends": [ "extends": [
"airbnb",
"airbnb-typescript" "airbnb-typescript"
], ],
"parserOptions": { "parserOptions": {

4
frontend/pages/[id].tsx
View File

@ -128,7 +128,7 @@ const VideoListPage: NextPage<VideoListPageProps> = function VideoListPage({
</Head> </Head>
<Breadcrumb> <Breadcrumb>
<Link passHref href="/"> <Link legacyBehavior passHref href="/">
<Breadcrumb.Item> <Breadcrumb.Item>
<FormattedMessage <FormattedMessage
id="Breadcrumb.homeTitle" id="Breadcrumb.homeTitle"
@ -137,7 +137,7 @@ const VideoListPage: NextPage<VideoListPageProps> = function VideoListPage({
/> />
</Breadcrumb.Item> </Breadcrumb.Item>
</Link> </Link>
<Link passHref href="/[id]" as={`/${id}`}> <Link legacyBehavior passHref href="/[id]" as={`/${id}`}>
<Breadcrumb.Item active> <Breadcrumb.Item active>
{title} {title}
</Breadcrumb.Item> </Breadcrumb.Item>

6
frontend/pages/[id]/[vslug].tsx
View File

@ -425,7 +425,7 @@ export default function VideoPlayerPage({
</Head> </Head>
<Breadcrumb> <Breadcrumb>
<Link passHref href="/"> <Link legacyBehavior passHref href="/">
<Breadcrumb.Item> <Breadcrumb.Item>
<FormattedMessage <FormattedMessage
id="Breadcrumb.homeTitle" id="Breadcrumb.homeTitle"
@ -434,10 +434,10 @@ export default function VideoPlayerPage({
/> />
</Breadcrumb.Item> </Breadcrumb.Item>
</Link> </Link>
<Link passHref href="/[id]" as={`/${id}`}> <Link legacyBehavior passHref href="/[id]" as={`/${id}`}>
<Breadcrumb.Item>{title}</Breadcrumb.Item> <Breadcrumb.Item>{title}</Breadcrumb.Item>
</Link> </Link>
<Link passHref href="/[id]/[vslug]" as={`/${id}/${vslug}`}> <Link legacyBehavior passHref href="/[id]/[vslug]" as={`/${id}/${vslug}`}>
<Breadcrumb.Item active>{videoTitle}</Breadcrumb.Item> <Breadcrumb.Item active>{videoTitle}</Breadcrumb.Item>
</Link> </Link>
</Breadcrumb> </Breadcrumb>

155
frontend/pages/_app.tsx
View File

@ -43,12 +43,13 @@ import '@fortawesome/fontawesome-svg-core/styles.css';
import Container from 'react-bootstrap/Container'; import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar'; import Navbar from 'react-bootstrap/Navbar';
import SSRProvider from 'react-bootstrap/SSRProvider';
import { IntlProvider, FormattedMessage } from 'react-intl'; import { IntlProvider, FormattedMessage } from 'react-intl';
import Link from 'next/link'; import Link from 'next/link';
import Router from 'next/router'; import Router from 'next/router';
import App, { AppContext } from 'next/app'; import App, { AppContext, AppProps } from 'next/app';
import useSWR, { SWRConfig } from 'swr'; import useSWR, { SWRConfig } from 'swr';
@ -58,9 +59,9 @@ import 'nprogress/nprogress.css';
import '../styles/main.scss'; import '../styles/main.scss';
import Image from 'react-bootstrap/Image'; import Image from 'react-bootstrap/Image';
import Head from 'next/head'; 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 { 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 DarkToggler from '../components/DarkToggler';
import { fetchJson } from '../util/api'; import { fetchJson } from '../util/api';
@ -113,10 +114,7 @@ function GDQArchiveApp({
initialMessages, initialMessages,
...pageProps ...pageProps
}, },
}: { }: AppProps<GDQArchiveAppPageProps>) {
Component: React.ElementType<Record<string, any>>,
pageProps: GDQArchiveAppPageProps,
}) {
/* Component state */ /* Component state */
const [currentMessages, setMessages] = React.useState(initialMessages); const [currentMessages, setMessages] = React.useState(initialMessages);
@ -139,7 +137,7 @@ function GDQArchiveApp({
mutate, mutate,
} = useSWR('/api/user', { } = useSWR('/api/user', {
fetcher: fetchJson, fetcher: fetchJson,
initialData: { fallbackData: {
locale: initialLocale, locale: initialLocale,
enableDark: initialEnableDark, enableDark: initialEnableDark,
}, },
@ -205,8 +203,8 @@ function GDQArchiveApp({
} }
/** /**
* @param {bool} value * @param {bool} value
*/ */
async function onChangeDarkMode(value: boolean) { async function onChangeDarkMode(value: boolean) {
setIsChangingDarkMode(true); setIsChangingDarkMode(true);
@ -237,43 +235,46 @@ function GDQArchiveApp({
}); });
return ( 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>
<Breadcrumb.Item> <Breadcrumb.Item>
<Link passHref href="/"> <Link legacyBehavior passHref href="/">
<FormattedMessage <FormattedMessage
id="Breadcrumb.homeTitle" id="Breadcrumb.homeTitle"
defaultMessage="GDQ Instant Archive" defaultMessage="GDQ Instant Archive"
@ -290,37 +291,43 @@ function GDQArchiveApp({
</Breadcrumb.Item> </Breadcrumb.Item>
</Breadcrumb> </Breadcrumb>
</Navbar.Text> */} </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> </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>
); );
} }

4
frontend/pages/index.tsx
View File

@ -53,7 +53,7 @@ const Home: NextPage<HomeProps> = function Home({ index: { announcements, ids }
</Head> </Head>
{/* <Breadcrumb> {/* <Breadcrumb>
<Link passHref href="/"> <Link legacyBehavior passHref href="/">
<Breadcrumb.Item active> <Breadcrumb.Item active>
<FormattedMessage <FormattedMessage
id="Breadcrumb.homeTitle" id="Breadcrumb.homeTitle"
@ -91,7 +91,7 @@ const Home: NextPage<HomeProps> = function Home({ index: { announcements, ids }
<ListGroup> <ListGroup>
{ids.map(({ id, longTitle }) => ( {ids.map(({ id, longTitle }) => (
<Link key={id} passHref href="/[id]" as={`/${id}`}> <Link legacyBehavior key={id} passHref href="/[id]" as={`/${id}`}>
<ListGroup.Item action> <ListGroup.Item action>
<h5>{longTitle}</h5> <h5>{longTitle}</h5>
</ListGroup.Item> </ListGroup.Item>

3
frontend/tsconfig.json
View File

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

2
frontend/util/api.ts
View File

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

6555
frontend/yarn.lock
View File

File diff suppressed because it is too large Load Diff