Compare commits

..

10 Commits

Author SHA1 Message Date
Icedream 6f91f41103
Add missing rewritten next config. 2023-01-09 04:03:52 +01:00
Icedream 4f49e08179
Fix video player responsive embed.
ResponsiveEmbed was renamed to Ratio and now behaves slightly different
compared to old Bootstrap 4.
2023-01-09 04:03:18 +01:00
Icedream dc95cad8c8
Fix download URL. 2023-01-09 04:02:46 +01:00
Icedream 20faae338c
Remove lint warning on method made to be used as hook. 2023-01-09 04:02:37 +01:00
Icedream bff84738f2
Fix icons. 2023-01-09 04:02:23 +01:00
Icedream d41809eafa
Update next, react, font-awesome and eslint packages. 2023-01-09 02:35:54 +01:00
Icedream 21244c267f
Remove unused old LocaleSwitcher component. 2023-01-09 02:35:22 +01:00
Icedream 014a2d392d
Fix title tag. 2023-01-09 02:35:10 +01:00
Icedream c8289dc5c5
Fix extra favicon. 2023-01-09 02:34:43 +01:00
Icedream eb34381d2f
Fix a few linter warnings. 2023-01-09 02:33:50 +01:00
30 changed files with 957 additions and 6362 deletions

View File

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

View File

@ -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"

View File

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

View File

@ -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"

View File

@ -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}>
<FontAwesomeIcon icon={["fab", "twitch"]} className={['mr-1', style.twitch].join(' ')} />
</a> : ''}
{runner.platform === 'FACEBOOK' && runner.stream.length > 0 ? <a href={runner.stream}>
<FontAwesomeIcon icon={["fab", "facebook"]} className={['mr-1', style.facebook].join(' ')} />
</a> : ''}
{runner.platform === 'YOUTUBE' && runner.stream.length > 0 ? <a href={runner.stream}>
<FontAwesomeIcon icon={["fab", "youtube"]} className={['mr-1', style.youtube].join(' ')} />
</a> : ''}
{runner.twitter && runner.twitter.length > 0 ? <a href={`https://twitter.com/${runner.twitter}`}>
<FontAwesomeIcon icon={["fab", "twitter"]} className={['mr-1', style.twitter].join(' ')} />
</a> : ''}
{runner.youtube && runner.youtube.length > 0 ? <a href={`https://youtube.com/${runner.youtube}`}>
<FontAwesomeIcon icon={["fab", "youtube"]} className={['mr-1', style.youtube].join(' ')} />
</a> : ''}
{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>
)
);
}

View File

@ -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…' })}

View File

@ -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
className={style.thumbnail}
src={
thumbnails.length > 0
? getThumbnailURL(thumbnailServerURL, id, thumbnails[0].fileName)
: hourglassImage
}
srcSet={
Array.isArray(thumbnails) && thumbnails.length > 0
? thumbnails
.map(({
<Image
className={style.thumbnail}
src={
thumbnails.length > 0
? getThumbnailURL(thumbnailServerURL, id, thumbnails[0].fileName)
: hourglassImage
}
srcSet={
Array.isArray(thumbnails) && thumbnails.length > 0
? thumbnails
.map(({
sourceSize,
fileName,
}) => (
[
thumbnails.length > 0
? getThumbnailURL(thumbnailServerURL, id, fileName)
: hourglassImage,
sourceSize,
fileName,
}) => (
[
thumbnails.length > 0
? getThumbnailURL(thumbnailServerURL, id, fileName)
: hourglassImage,
sourceSize,
]
))
.map((item) => item.join(' '))
.join(', ')
: ''
}
alt={title}
/>
</a>
]
))
.map((item) => item.join(' '))
.join(', ')
: ''
}
alt={title}
/>
</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>
<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="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>

View File

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

View File

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

View File

@ -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

View File

@ -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/>.
*/

View File

@ -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.

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

53
frontend/next.config.mjs Normal file
View File

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

View File

@ -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-svg-core": "^1.2.35",
"@fortawesome/free-brands-svg-icons": "^5.15.3",
"@fortawesome/free-regular-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.14",
"@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",
"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": "^11.1.3",
"next": "^13.1.1",
"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": "17.0.2",
"react": "^18.2.0",
"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",
"swr": "^0.5.6",
"url-loader": "^4.1.1",
"shaka-player-react": "^1.1.5",
"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",
"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",
"@typescript-eslint/parser": "^4.28.2",
"eslint": "^7.30.0",
"eslint-config-airbnb-typescript": "^12.3.1",
"eslint-plugin-import": "2.23.4",
"eslint-plugin-jsx-a11y": "6.4.1",
"eslint-plugin-react": "7.24.0",
"eslint-plugin-react-hooks": "4",
"@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": "^8.2.15",
@ -93,6 +90,7 @@
"es2020": true
},
"extends": [
"airbnb",
"airbnb-typescript"
],
"parserOptions": {

View File

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

View File

@ -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}
{' '}
{' '}
{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"
@ -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>

View File

@ -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}
{' '}
{' '}
{title}
{' '}
{' '}
{intl.formatMessage({
{`${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="/">
<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>

View File

@ -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
},
}: {
Component: React.ElementType<Record<string, any>>,
pageProps: GDQArchiveAppPageProps,
}) {
}: AppProps<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
value={{
fetcher: fetchJson,
onError(err) {
console.error(err);
},
}}
>
<IntlProvider
messages={currentMessages}
locale={currentLocale}
defaultLocale={defaultLocale}
<SSRProvider>
<SWRConfig
value={{
fetcher: fetchJson,
onError(err) {
console.error(err);
},
}}
>
<Navbar bg="dark" expand="md" variant="dark">
<Container fluid>
<Link passHref href="/">
<Navbar.Brand>
<Image
src={gdqLogo}
alt="Games Done Quick"
height={30}
className={[
// HomeStyle.logo,
'd-inline-block',
// 'align-middle',
'align-top',
].join(' ')}
/>{' '}<FormattedMessage
id="Navbar.brandText"
defaultMessage="Instant Archive"
/>
</Navbar.Brand>
</Link>
{/* <Navbar.Text>
<IntlProvider
messages={currentMessages}
locale={currentLocale}
defaultLocale={defaultLocale}
>
<Navbar bg="dark" expand="md" variant="dark">
<Container fluid>
<Link legacyBehavior passHref href="/">
<Navbar.Brand>
<Image
src={typeof gdqLogo === 'string' ? gdqLogo : gdqLogo.src}
alt="Games Done Quick"
height={30}
className={[
// HomeStyle.logo,
'd-inline-block',
// 'align-middle',
'align-top',
].join(' ')}
/>
{' '}
<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.Collapse
id="basic-navbar-nav"
className="justify-content-end"
>
<ButtonGroup>
<LocaleSwitcher
locale={currentLocale}
onChangeLocale={onChangeLocale}
disabled={isChangingLocale || isValidating}
showLoading={isChangingLocale}
/>
<DarkToggler
isDarkEnabled={enableDarkMode}
onChangeDarkMode={onChangeDarkMode}
disabled={isChangingDarkMode || isValidating}
showLoading={isChangingDarkMode}
/>
</ButtonGroup>
</Navbar.Collapse>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse
id="basic-navbar-nav"
className="justify-content-end"
>
<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>
<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>
<Head>
<link rel="icon" type="image/svg+xml" href={favicon} />
</Head>
<Container className="mt-3">
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
<Component {...pageProps} />
</Container>
</IntlProvider>
</SWRConfig>
</IntlProvider>
</SWRConfig>
</SSRProvider>
);
}

View File

@ -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}
{' '}
{' '}
{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>
<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;
const title = res ? res.statusMessage : err ? err.message : "Page not found";
return { statusCode, title }
}
// 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
export default Error;

View File

@ -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/>.
*/

View File

@ -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/>.
*/

View File

@ -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>

View File

@ -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/>.
*/

View File

@ -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/>.
*/

View File

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

View File

@ -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(

View File

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

View File

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

File diff suppressed because it is too large Load Diff