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

Work in progress.

new-frontend
Icedream 2023-01-08 11:07:44 +01:00
parent 3eee711838
commit dd773852f9
Signed by: icedream
GPG Key ID: 468BBEEBB9EC6AEA
34 changed files with 6955 additions and 5712 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
configs/nginx/default.conf
View File

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

40
frontend/components/CopyField.tsx
View File

@ -59,32 +59,28 @@ const CopyField = ({
{ {
icon icon
? ( ? (
<InputGroup.Prepend> <InputGroup.Text>
<InputGroup.Text> <FontAwesomeIcon icon="share" />
<FontAwesomeIcon icon="share" /> </InputGroup.Text>
</InputGroup.Text>
</InputGroup.Prepend>
) )
: '' : ''
} }
<FormControl ref={textbox} readOnly value={children} /> <FormControl ref={textbox} readOnly value={children} />
<InputGroup.Append> <Button ref={target} onClick={doCopy}>
<Button ref={target} onClick={doCopy}> <FontAwesomeIcon icon={copyIcon} />
<FontAwesomeIcon icon={copyIcon} /> <Overlay target={target.current} show={show} placement="top">
<Overlay target={target.current} show={show} placement="top"> {(props) => (
{(props) => ( // eslint-disable-next-line react/jsx-props-no-spreading
// eslint-disable-next-line react/jsx-props-no-spreading <Tooltip id="overlay-copy" {...props}>
<Tooltip id="overlay-copy" {...props}> <FormattedMessage
<FormattedMessage id="CopyField.copied"
id="CopyField.copied" defaultMessage="Copied!"
defaultMessage="Copied!" description="Tooltip shown when user clicks the Copy button."
description="Tooltip shown when user clicks the Copy button." />
/> </Tooltip>
</Tooltip> )}
)} </Overlay>
</Overlay> </Button>
</Button>
</InputGroup.Append>
</InputGroup> </InputGroup>
); );
}; };

2
frontend/components/LocaleSwitcher.tsx
View File

@ -39,7 +39,7 @@ export default function LocaleSwitcher({
disabled={showLoading || disabled} disabled={showLoading || disabled}
as={ButtonGroup} as={ButtonGroup}
variant="outline-secondary" variant="outline-secondary"
alignRight align="end"
id="dropdown-locale" id="dropdown-locale"
title={( title={(
<> <>

43
frontend/components/Runner.module.scss Normal file
View File

@ -0,0 +1,43 @@
/**
* Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
@import "../styles/variables";
.facebook {
color: $facebook-color;
&:hover {
color: lighten($facebook-color, 15%);
}
}
.twitch {
color: $twitch-color;
&:hover {
color: lighten($twitch-color, 15%);
}
}
.twitter {
color: $twitter-color;
&:hover {
color: lighten($twitter-color, 15%);
}
}
.youtube {
color: $youtube-color;
&:hover {
color: lighten($youtube-color, 15%);
}
}

30
frontend/components/Runner.tsx Normal file
View File

@ -0,0 +1,30 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import * as React from 'react';
import { RunnerInformation } from 'util/datatypes/RunnerList';
import style from './Runner.module.scss';
export default function Runner({ runner }: { runner: RunnerInformation }) {
return (
<span className="mr-3 text-nowrap">
<span className="mr-1">{runner.name}</span>
<sup>
{runner.platform === 'TWITCH' && runner.stream.length > 0 ? <a href={runner.stream}>
<FontAwesomeIcon icon={["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> : ''}
</sup>
</span>
)
}

18
frontend/components/VideoList.tsx
View File

@ -23,6 +23,7 @@ import ListGroup from 'react-bootstrap/ListGroup';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { injectIntl, IntlShape } from 'react-intl'; import { injectIntl, IntlShape } from 'react-intl';
import { RunnerList } from 'util/datatypes/RunnerList';
import VideoListItem from './VideoListItem'; import VideoListItem from './VideoListItem';
import Filter from './Filter'; import Filter from './Filter';
import { VideoEntry } from '../util/datatypes/VideoList'; import { VideoEntry } from '../util/datatypes/VideoList';
@ -32,6 +33,7 @@ interface VideoListProps {
id: string, id: string,
thumbnailServerURL: string, thumbnailServerURL: string,
videos: Array<VideoEntry>, videos: Array<VideoEntry>,
runners: RunnerList,
} }
interface VideoListState { interface VideoListState {
@ -62,15 +64,14 @@ class VideoList extends React.Component<VideoListProps, VideoListState> {
id, id,
thumbnailServerURL, thumbnailServerURL,
videos, videos,
runners,
} = this.props; } = this.props;
return ( return (
<div> <div>
<InputGroup> <InputGroup>
<InputGroup.Prepend> <InputGroup.Text id="search-prepend">
<InputGroup.Text id="search-prepend"> <FontAwesomeIcon icon="search" />
<FontAwesomeIcon icon="search" /> </InputGroup.Text>
</InputGroup.Text>
</InputGroup.Prepend>
<FormControl <FormControl
placeholder={intl.formatMessage({ id: 'VideoList.Search.Placeholder', defaultMessage: 'Type something to search here…' })} placeholder={intl.formatMessage({ id: 'VideoList.Search.Placeholder', defaultMessage: 'Type something to search here…' })}
aria-label={intl.formatMessage({ id: 'VideoList.Search.Label', defaultMessage: 'Search' })} aria-label={intl.formatMessage({ id: 'VideoList.Search.Label', defaultMessage: 'Search' })}
@ -87,16 +88,20 @@ class VideoList extends React.Component<VideoListProps, VideoListState> {
output={(filteredVideos) => filteredVideos.map(({ output={(filteredVideos) => filteredVideos.map(({
item: { item: {
duration, duration,
fileName, downloadFileName: fileName,
title, title,
run,
slug, slug,
sourceVideoStart, sourceVideoStart,
sourceVideoEnd, sourceVideoEnd,
thumbnails,
}, },
refIndex: index, refIndex: index,
}) => ( }) => (
<VideoListItem <VideoListItem
key={index} key={index}
runData={run}
runners={runners.filter((r) => run?.runners?.includes(r.pk))}
duration={duration} duration={duration}
id={id} id={id}
thumbnailServerURL={thumbnailServerURL} thumbnailServerURL={thumbnailServerURL}
@ -105,6 +110,7 @@ class VideoList extends React.Component<VideoListProps, VideoListState> {
title={title} title={title}
sourceVideoStart={sourceVideoStart} sourceVideoStart={sourceVideoStart}
sourceVideoEnd={sourceVideoEnd} sourceVideoEnd={sourceVideoEnd}
thumbnails={thumbnails}
/> />
))} ))}
/> />

27
frontend/components/VideoListItem.module.scss
View File

@ -18,10 +18,11 @@
@import "~bootstrap/scss/functions"; @import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables"; @import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins"; @import "~bootstrap/scss/mixins";
// @use "~bootstrap/scss/type";
.thumbnail { .thumbnail {
flex-grow: 0;
width: 96px; width: 96px;
position: relative;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
width: 160px; width: 160px;
} }
@ -29,3 +30,27 @@
width: 256px; width: 256px;
} }
} }
.run-name {
// @extend %heading;
@include font-size($h5-font-size);
}
.run-category {
// @extend %heading;
@include font-size($h6-font-size);
}
.run {
text-decoration: none;
}
@include media-breakpoint-up(lg) {
.run-name {
@include font-size($h4-font-size);
}
.run-category {
@include font-size($h5-font-size);
}
}

151
frontend/components/VideoListItem.tsx
View File

@ -15,43 +15,49 @@
* 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 React from 'react'; import React, { ReactElement } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import ListGroup from 'react-bootstrap/ListGroup'; import ListGroup from 'react-bootstrap/ListGroup';
import Media from 'react-bootstrap/Media';
import Image from 'react-bootstrap/Image'; import Image from 'react-bootstrap/Image';
import Link from 'next/link'; import Link from 'next/link';
import { getThumbnailURL } from '../util'; import { RunInformation, Thumbnails } from 'util/datatypes/VideoList';
import { Runner as RunnerData, RunnerList } from 'util/datatypes/RunnerList';
import { Col, Row } from 'react-bootstrap';
import { getThumbnailURL } from '../util/thumbnail';
import FormattedDuration from './localization/FormattedDuration'; import FormattedDuration from './localization/FormattedDuration';
import style from './VideoListItem.module.scss'; import style from './VideoListItem.module.scss';
import sanitizeTitle from '../util/sanitizeTitle';
import hourglassImage from '../images/hourglass.svg'; import hourglassImage from '../images/hourglass.svg';
import Runner from './Runner';
export default function VideoListItem({ export default function VideoListItem({
thumbnailServerURL, thumbnailServerURL,
duration, duration,
id, id,
fileName,
slug, slug,
title, title,
sourceVideoStart, sourceVideoStart,
sourceVideoEnd, sourceVideoEnd,
runData,
runners,
thumbnails,
}: { }: {
thumbnailServerURL: string, thumbnailServerURL: string,
duration: number | string, duration: number | string,
id: string, id: string,
fileName: string,
slug: string, slug: string,
title: string, title: string,
sourceVideoStart: number | string, sourceVideoStart: number | string,
sourceVideoEnd: number | string, sourceVideoEnd: number | string,
runData: RunInformation,
runners: RunnerList,
thumbnails: Thumbnails,
}) { }) {
let displayDuration = null; let displayDuration = null;
if (duration !== null) { if (duration !== null) {
@ -80,62 +86,85 @@ export default function VideoListItem({
displayDuration = videoEnd - videoStart; displayDuration = videoEnd - videoStart;
} }
const listGroupItem = ( const listGroupItem = (
<ListGroup.Item action> <ListGroup.Item>
<Media> <Row>
<Image <Col sm={3} xs={3}>
className={['mr-3', style.thumbnail].join(' ')} <Link passHref href="/[id]/[vslug]" as={`/${id}/${slug}`}>
src={ {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
fileName <a>
? getThumbnailURL(thumbnailServerURL, id, fileName, 90 * 1000, { <Image
width: 96, className={style.thumbnail}
}) src={
: hourglassImage thumbnails.length > 0
} ? getThumbnailURL(thumbnailServerURL, id, thumbnails[0].fileName)
srcSet={[96, 96 * 2, 96 * 3] : hourglassImage
.map((width) => [ }
fileName srcSet={
? getThumbnailURL(thumbnailServerURL, id, fileName, 90 * 1000, { Array.isArray(thumbnails) && thumbnails.length > 0
width, ? thumbnails
}) .map(({
: hourglassImage, sourceSize,
`${width}w`, fileName,
]) }) => (
.map((item) => item.join(' ')) [
.join(', ')} thumbnails.length > 0
alt={title} ? getThumbnailURL(thumbnailServerURL, id, fileName)
/> : hourglassImage,
<Media.Body> sourceSize,
<h5 className="mt-0 mb-3">{title}</h5> ]
<p> ))
{!fileName ? ( .map((item) => item.join(' '))
<span> .join(', ')
<FontAwesomeIcon icon="hourglass" /> : ''
{' '} }
Coming up alt={title}
</span> />
) : ''} </a>
{displayDuration !== null ? ( </Link>
<span> </Col>
<FontAwesomeIcon icon="clock" /> <Col sm={4} xs={9}>
{' '} <Link href="/[id]/[vslug]" as={`/${id}/${slug}`}>
<FormattedDuration {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
seconds={displayDuration} <a className="text-reset text-decoration-none">
format="{hours} {minutes} {seconds}" <div>
unitDisplay="short" <div className={style['run-name']}>{title}</div>
/> <div className={[style['run-category'], 'mt-0'].join(' ')}>{runData?.category}</div>
</span> </div>
) : ''} </a>
</p> </Link>
</Media.Body> </Col>
</Media> <Col sm={5} xs={12}>
{runners && runners.length > 0 ? (
<div className="mr-2">
<FontAwesomeIcon icon="running" />
{' '}
{runners.reduce((all: Array<ReactElement>, runner: RunnerData) => [
...all,
all.length > 0 ? ' / ' : null,
<Runner key={runner.fields.name} runner={runner.fields} />,
], [])}
</div>
) : ''}
{displayDuration !== null ? (
<span className="mr-2 text-nowrap">
<FontAwesomeIcon icon="clock" />
{' '}
<FormattedDuration
seconds={displayDuration}
format="{hours} {minutes} {seconds}"
unitDisplay="short"
/>
</span>
) : (
<span className="mr-2 text-nowrap">
<FontAwesomeIcon icon="hourglass" />
{' '}
Coming up
</span>
)}
</Col>
</Row>
</ListGroup.Item> </ListGroup.Item>
); );
if (fileName) {
return (
<Link passHref href="/[id]/[vslug]" as={`/${id}/${slug}`}>
{listGroupItem}
</Link>
);
}
return listGroupItem; return listGroupItem;
} }

0
frontend/components/LocaleSwitcher.jsx → frontend/components/___LocaleSwitcher.jsx
View File

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

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

38
frontend/next.config.js
View File

@ -1,29 +1,39 @@
/** /**
* Copyright (C) 2019-2021 Carl Kittelberger <c.kittelberger@seidemann-web.com> * Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw>
* *
* This program is free software: you can redistribute it and/or modify * This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as * it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the * published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version. * License, or (at your option) any later version.
* *
* This program is distributed in the hope that it will be useful, * This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of * but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details. * GNU Affero General Public License for more details.
* *
* You should have received a copy of the GNU Affero General Public License * 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/>. * along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
const withPlugins = require('next-compose-plugins'); const withPlugins = require("next-compose-plugins");
const optimizedImages = require('next-optimized-images'); const optimizedImages = require("next-optimized-images");
module.exports = withPlugins([ module.exports = withPlugins(
[optimizedImages, { [
/* config for next-optimized-images */ [
inlineImageLimit: -1, optimizedImages,
}], {
/* config for next-optimized-images */
inlineImageLimit: -1,
},
],
// your other plugins here // 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,
},
}
);

106
frontend/package.json
View File

@ -1,6 +1,5 @@
{ {
"name": "gdq-archive-frontend", "name": "gdq-archive-frontend",
"version": "0.1.0",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "run-s i18n:build dev:next", "dev": "run-s i18n:build dev:next",
@ -15,67 +14,68 @@
"lint": "eslint . --ext .js,.jsx,.ts,.tsx" "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
}, },
"dependencies": { "dependencies": {
"@forevolve/bootstrap-dark": "^1.0.0-alpha.1091", "@formatjs/intl-numberformat": "^7.1.5",
"@formatjs/intl-numberformat": "^5.5.4", "@formatjs/intl-utils": "^3.8.4",
"@formatjs/intl-utils": "^3.8.3", "@fortawesome/fontawesome-free": "^5.15.3",
"@fortawesome/fontawesome-free": "^5.14.0", "@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/fontawesome-svg-core": "^1.2.30", "@fortawesome/free-brands-svg-icons": "^5.15.3",
"@fortawesome/free-brands-svg-icons": "^5.14.0", "@fortawesome/free-regular-svg-icons": "^5.15.3",
"@fortawesome/free-regular-svg-icons": "^5.14.0", "@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.14.0", "@fortawesome/react-fontawesome": "^0.1.14",
"@fortawesome/react-fontawesome": "^0.1.11", "@popperjs/core": "^2.9.2",
"bootstrap": "^4.5.2", "bootstrap": "5.1.x",
"cssnano": "^4.1.10", "bootstrap-dark-5": "1.1.0",
"file-loader": "^6.0.0", "cssnano": "^5.0.6",
"fuse.js": "^6.4.1", "file-loader": "^6.2.0",
"imagemin-optipng": "^8.0.0", "fuse.js": "^6.4.6",
"imagemin-svgo": "^8.0.0", "imagemin-optipng": "^0.1.0",
"intl-messageformat": ">= 5.1", "imagemin-svgo": "^9.0.0",
"intl-messageformat-parser": "^6.0.1", "intl-messageformat": ">= 2.0",
"jquery": "~3",
"native-url": "^0.3.4", "native-url": "^0.3.4",
"next": "9.5.2", "next": "^11.1.3",
"next-compose-plugins": "^2.2.0", "next-compose-plugins": "^2.2.1",
"next-iron-session": "^4.1.8", "next-iron-session": "^4.2.0",
"next-optimized-images": "^2.6.2", "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.1", "raw-loader": "^4.0.2",
"react": "16.13.1", "react": "17.0.2",
"react-bootstrap": "^1.3.0", "react-bootstrap": "^2.4.0",
"react-dom": "16.13.1", "react-dom": "17.0.2",
"react-intl": "^5.6.3", "react-intl": "^5.20.4",
"react-intl-formatted-duration": "^4.0.0", "react-intl-formatted-duration": "^4.0.0",
"sass": "^1.26.10", "react-youtube": "^9.0.2",
"shaka-player": "^3.0.3", "sass": "^1.53.0",
"shaka-player-react": "^1.0.1", "shaka-player": "^3.1.1",
"swr": "^0.3.0", "shaka-player-react": "^1.1.2",
"url-loader": "^4.1.0", "swr": "^0.5.6",
"url-slug": "^2.3.2", "url-loader": "^4.1.1",
"video.js": "^7.8.4", "url-slug": "^3.0.2",
"videojs-contrib-dash": "^2.11.0", "video.js": "^7.13.3",
"videojs-errors": "^4.3.2", "videojs-contrib-dash": "^5.0.0",
"webpack": "^4.0.0", "videojs-errors": "^4.5.0",
"xmlbuilder2": "^2.3.1" "webpack": "^5.73.0",
"xmlbuilder2": "^2.4.1"
}, },
"devDependencies": { "devDependencies": {
"@formatjs/cli": "^2.7.5", "@formatjs/cli": "^4.2.27",
"@types/node": "^14.6.0", "@types/node": "^16.3.1",
"@types/nprogress": "^0.2.0", "@types/nprogress": "^0.2.0",
"@types/react": "^16.9.46", "@types/react": "^17.0.14",
"@typescript-eslint/eslint-plugin": "^3.9.1", "@typescript-eslint/eslint-plugin": "^4.28.2",
"@typescript-eslint/parser": "^3.9.1", "@typescript-eslint/parser": "^4.28.2",
"eslint": "^7.7.0", "eslint": "^7.30.0",
"eslint-config-airbnb-typescript": "^9.0.0", "eslint-config-airbnb-typescript": "^12.3.1",
"eslint-plugin-import": "2.21.2", "eslint-plugin-import": "2.23.4",
"eslint-plugin-jsx-a11y": "6.3.0", "eslint-plugin-jsx-a11y": "6.4.1",
"eslint-plugin-react": "7.20.0", "eslint-plugin-react": "7.24.0",
"eslint-plugin-react-hooks": "4", "eslint-plugin-react-hooks": "4",
"lint-staged": "^10.2.11", "lint-staged": "^11.0.0",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"postcss-flexbugs-fixes": "^4.2.1", "postcss": "^8.2.15",
"postcss-preset-env": "^6.7.0", "postcss-flexbugs-fixes": "^5.0.2",
"typescript": "^4.0.2" "postcss-preset-env": "^7.2.0",
"typescript": "^4.3.5"
}, },
"husky": { "husky": {
"hooks": { "hooks": {

24
frontend/pages/404.tsx Normal file
View File

@ -0,0 +1,24 @@
/**
* 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 * as React from 'react';
import Error from "./_error";
const Error404Page = () => (
<Error statusCode={404} />
)
export default Error404Page;

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

@ -23,15 +23,16 @@ import Head from 'next/head';
import Link from 'next/link'; import Link from 'next/link';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
import { GetServerSideProps, NextPage } from 'next';
import { RunnerList } from 'util/datatypes/RunnerList';
import { FormattedMessage } from '../components/localization'; import { FormattedMessage } from '../components/localization';
import RelativeTime from '../components/RelativeTime'; import RelativeTime from '../components/RelativeTime';
import VideoList from '../components/VideoList'; import VideoList from '../components/VideoList';
import { notFound } from '../util/status'; import { notFound } from '../util/status';
import { getIndex, getVideos } from '../util/api'; import { getIndex, getRunners, getVideos } from '../util/api';
import { VideoEntry } from '../util/datatypes/VideoList'; import { VideoEntry } from '../util/datatypes/VideoList';
import { GetServerSideProps, NextPage } from 'next';
interface VideoListPageProps { interface VideoListPageProps {
id?: string, id?: string,
@ -39,7 +40,8 @@ interface VideoListPageProps {
thumbnailServerURL?: string, thumbnailServerURL?: string,
title?: string, title?: string,
videos?: Array<VideoEntry>, videos?: Array<VideoEntry>,
}; runners?: RunnerList,
}
export const getServerSideProps: GetServerSideProps<VideoListPageProps> = async ({ params: { id } }) => { export const getServerSideProps: GetServerSideProps<VideoListPageProps> = async ({ params: { id } }) => {
// Fetch URL to thumbnails server // Fetch URL to thumbnails server
@ -48,6 +50,8 @@ export const getServerSideProps: GetServerSideProps<VideoListPageProps> = async
servers: { thumbnails: thumbnailServerURL }, servers: { thumbnails: thumbnailServerURL },
} = await getIndex(); } = await getIndex();
const runners = await getRunners();
const vodMeta = ids.find(({ const vodMeta = ids.find(({
id: thisID, id: thisID,
}: { }: {
@ -85,9 +89,10 @@ export const getServerSideProps: GetServerSideProps<VideoListPageProps> = async
title, title,
videos: finalVideos, videos: finalVideos,
lastUpdatedAt, lastUpdatedAt,
runners,
}, },
}; };
} };
const VideoListPage: NextPage<VideoListPageProps> = ({ const VideoListPage: NextPage<VideoListPageProps> = ({
id, id,
@ -95,6 +100,7 @@ const VideoListPage: NextPage<VideoListPageProps> = ({
thumbnailServerURL, thumbnailServerURL,
title, title,
videos, videos,
runners,
}) => { }) => {
if (!id) { if (!id) {
return notFound(); return notFound();
@ -113,8 +119,8 @@ const VideoListPage: NextPage<VideoListPageProps> = ({
<title> <title>
{title} {title}
{' '} {' '}
– –
{' '} {' '}
{intl.formatMessage({ {intl.formatMessage({
id: 'App.title', id: 'App.title',
description: 'The full title of the website', description: 'The full title of the website',
@ -143,6 +149,7 @@ const VideoListPage: NextPage<VideoListPageProps> = ({
<VideoList <VideoList
id={id} id={id}
runners={runners}
thumbnailServerURL={thumbnailServerURL} thumbnailServerURL={thumbnailServerURL}
videos={videos} videos={videos}
/> />
@ -169,6 +176,6 @@ const VideoListPage: NextPage<VideoListPageProps> = ({
} }
</div> </div>
); );
} };
export default VideoListPage; export default VideoListPage;

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

@ -22,23 +22,23 @@ import Link from 'next/link';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { import {
Breadcrumb, Button, ButtonGroup, Col, ResponsiveEmbed, Row, Tab, Tabs, Breadcrumb, Button, ButtonGroup, Col, Ratio, Row, Tab, Tabs,
} from 'react-bootstrap'; } from 'react-bootstrap';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { GetServerSideProps, GetServerSidePropsResult, InferGetServerSidePropsType } from 'next'; import { GetServerSideProps, GetServerSidePropsResult, InferGetServerSidePropsType } from 'next';
import { VideoEntry } from 'util/datatypes/VideoList'; import { VideoEntry } from 'util/datatypes/VideoList';
import DownloadButton from 'components/DownloadButton';
import { basename } from 'path'; import { basename } from 'path';
import withSession from 'util/session'; import withSession from 'util/session';
import { ParsedUrlQuery } from 'querystring';
import YouTubePlayer from 'react-youtube';
import { getDASHManifestURL, getHLSMasterURL } from '../../util'; import { getDASHManifestURL, getHLSMasterURL } from '../../util';
import VideoPlayer from '../../components/VideoPlayer'; import VideoPlayer from '../../components/VideoPlayer';
import CopyField from '../../components/CopyField'; import CopyField from '../../components/CopyField';
import { FormattedMessage } from '../../components/localization'; import { FormattedMessage } from '../../components/localization';
import sanitizeFileName from '../../util/sanitizeFileName'; import sanitizeFileName from '../../util/sanitizeFileName';
import sanitizeTitle from '../../util/sanitizeTitle';
import { notFound } from '../../util/status'; import { notFound } from '../../util/status';
import { import {
getDownloadURL, getDownloadURL,
@ -46,8 +46,9 @@ import {
getVideos, getVideos,
submitPreferences, submitPreferences,
} from '../../util/api'; } from '../../util/api';
import DownloadButton from '../../components/DownloadButton';
interface VideoPlayerPageParameters { interface VideoPlayerPageParameters extends ParsedUrlQuery {
id: string, id: string,
vslug: string, vslug: string,
} }
@ -55,7 +56,7 @@ interface VideoPlayerPageParameters {
interface VideoPlayerPageProps { interface VideoPlayerPageProps {
id?: string, id?: string,
vslug?: string, vslug?: string,
video?: number, video?: number | VideoEntry,
volume?: number, volume?: number,
redirect?: boolean, redirect?: boolean,
title?: string, title?: string,
@ -123,7 +124,7 @@ const getProps = withSession(async (req, _res, { id, vslug }: VideoPlayerPagePar
// Check if vslug is actually point to a file name // Check if vslug is actually point to a file name
const sanitizedFileName = `${sanitizeFileName(basename(vslug, '.mp4'))}.mp4`; const sanitizedFileName = `${sanitizeFileName(basename(vslug, '.mp4'))}.mp4`;
const realVIndex = videos.findIndex( const realVIndex = videos.findIndex(
(video: VideoEntry) => video.fileName === sanitizedFileName, (video: VideoEntry) => video.downloadFileName === sanitizedFileName,
); );
if (realVIndex >= 0) { if (realVIndex >= 0) {
const video = videos[realVIndex]; const video = videos[realVIndex];
@ -165,7 +166,7 @@ const getProps = withSession(async (req, _res, { id, vslug }: VideoPlayerPagePar
} }
if (!req.headers.host) { if (!req.headers.host) {
throw new Error(JSON.stringify(req.headers)) throw new Error(JSON.stringify(req.headers));
} }
// Pass data to the page via props // Pass data to the page via props
@ -184,7 +185,7 @@ const getProps = withSession(async (req, _res, { id, vslug }: VideoPlayerPagePar
}; };
}); });
export const getServerSideProps: GetServerSideProps = async ({ export const getServerSideProps: GetServerSideProps<VideoPlayerPageProps, VideoPlayerPageParameters> = async ({
req, req,
res, res,
params, params,
@ -230,13 +231,28 @@ export default function VideoPlayerPage({
const playerRef = React.useRef<VideoPlayer>(); const playerRef = React.useRef<VideoPlayer>();
if (typeof video === 'number') {
throw new Error('Logic error - video should not be a number');
}
const { const {
fileName, downloadFileName,
title: videoTitle, title: videoTitle,
sourceVideoID,
sourceVideoURL, sourceVideoURL,
sourceVideoStart, sourceVideoStart: sourceVideoStartStr,
run,
youtubeVideoID,
} = video; } = video;
// convert possibly-string sourceVideoStart field to actual number
let sourceVideoStart: number;
if (typeof sourceVideoStartStr === 'string') {
sourceVideoStart = parseInt(sourceVideoStartStr, 10);
} else {
sourceVideoStart = sourceVideoStartStr;
}
let volumeChangeDebounceTimer: NodeJS.Timeout = null; let volumeChangeDebounceTimer: NodeJS.Timeout = null;
const [currentVolume, trackCurrentVolume] = React.useState(volume); const [currentVolume, trackCurrentVolume] = React.useState(volume);
async function onVolumeChange() { async function onVolumeChange() {
@ -254,10 +270,147 @@ export default function VideoPlayerPage({
} }
} }
const twitchEmbedURL = new URL("https://player.twitch.tv"); const tabs: Array<React.ReactElement<typeof Tab>> = [];
twitchEmbedURL.searchParams.append('video', sourceVideoURL.split('/').pop()); let defaultTab = 'mirror-player';
twitchEmbedURL.searchParams.append('parent', twitchPlayerParentKey); const downloadButtons: Array<React.ReactElement> = [];
twitchEmbedURL.searchParams.append('t', `${Math.floor(sourceVideoStart / 60)}m${sourceVideoStart % 60}s`)
// Mirror player tab
if (typeof downloadFileName === 'string' && downloadFileName.length > 0) {
tabs.push(
<Tab
eventKey="mirror-player"
title={intl.formatMessage({
id: 'VideoPlayerPage.tab.mirrorPlayer',
description: 'Title for mirror player tab',
defaultMessage: 'Mirror player',
})}
>
<VideoPlayer
ref={playerRef}
autoplay
controls
defaultVolume={volume}
language="en"
playbackRates={[
0.25,
0.5,
0.75,
1,
1.25,
1.5,
1.75,
2,
]}
onVolumeChange={onVolumeChange}
sources={[
{ src: getHLSMasterURL(hlsServerURL, id, downloadFileName), type: 'application/x-mpegURL' },
{ src: getDASHManifestURL(dashServerURL, id, downloadFileName), type: 'application/dash+xml' },
{ src: getDownloadURL(id, downloadFileName), type: 'video/mp4' },
]}
aspectRatio="16:9"
fill
/>
</Tab>,
);
downloadButtons.push(<DownloadButton id={id} fileName={downloadFileName} />);
}
// Twitch tab
if (sourceVideoID) {
const twitchEmbedURL = new URL('https://player.twitch.tv');
twitchEmbedURL.searchParams.append('video', sourceVideoID);
twitchEmbedURL.searchParams.append('parent', twitchPlayerParentKey);
twitchEmbedURL.searchParams.append('t', `${Math.floor(sourceVideoStart / 60)}m${sourceVideoStart % 60}s`);
tabs.unshift(
<Tab
key="twitch-player"
eventKey="twitch-player"
title={intl.formatMessage({
id: 'VideoPlayerPage.tab.twitchPlayer',
description: 'Title for Twitch player tab',
defaultMessage: 'Twitch player',
})}
>
<Ratio aspectRatio="16x9">
<iframe
src={twitchEmbedURL.toString()}
title="Twitch embed"
frameBorder={0}
allowFullScreen
/>
</Ratio>
</Tab>,
);
defaultTab = 'twitch-player';
const twitchWatchURL = new URL(sourceVideoURL);
twitchWatchURL.searchParams.append('t', `${Math.floor(sourceVideoStart / 60)}m${sourceVideoStart % 60}s`);
downloadButtons.push(
<Button
href={twitchWatchURL.toString()}
target="blank"
variant="twitch"
key="watchOnTwitch"
>
<FontAwesomeIcon icon={['fab', 'twitch']} className="mr-2" />
<FormattedMessage
id="VideoPlayerPage.watchOnTwitch"
description="Button below video that links to the exact position in the archived stream to watch it there."
defaultMessage="Watch on Twitch"
/>
</Button>,
);
}
// YouTube tab
if (youtubeVideoID) {
const youtubeURL = new URL(youtubeVideoID, 'https://youtu.be/');
tabs.unshift(
<Tab
key="youtube-player"
eventKey="youtube-player"
title={intl.formatMessage({
id: 'VideoPlayerPage.tab.youtubePlayer',
description: 'Title for YouTube player tab',
defaultMessage: 'YouTube player',
})}
>
<YouTubePlayer
className={[
'ratio',
'ratio-16by9',
'ratio-16x9',
].join(' ')}
videoId={youtubeVideoID}
opts={{
playerVars: {
// https://developers.google.com/youtube/player_parameters
autoplay: 1,
color: 'white',
start: youtubeURL.searchParams.has('t')
? parseInt(youtubeURL.searchParams.get('t').toString(), 10)
: 0,
},
}}
/>
</Tab>,
);
defaultTab = 'youtube-player';
downloadButtons.push(
<Button
href={youtubeURL.toString()}
target="blank"
variant="youtube"
key="watchOnYouTube"
>
<FontAwesomeIcon icon={['fab', 'youtube']} className="mr-2" />
<FormattedMessage
id="VideoPlayerPage.watchOnYouTube"
description="Button below video that links user to the YouTube upload of the VOD."
defaultMessage="Watch on YouTube"
/>
</Button>,
);
}
return ( return (
<div> <div>
@ -299,97 +452,27 @@ export default function VideoPlayerPage({
</Breadcrumb> </Breadcrumb>
<Tabs <Tabs
defaultActiveKey="twitch-player" defaultActiveKey={defaultTab}
unmountOnExit={true} unmountOnExit
> >
<Tab {tabs}
eventKey="twitch-player"
title={intl.formatMessage({
id: 'VideoPlayerPage.tab.twitchPlayer',
description: 'Title for Twitch player tab',
defaultMessage: 'Twitch player',
})}
>
<ResponsiveEmbed aspectRatio="16by9">
<iframe
src={twitchEmbedURL.toString()}
frameBorder={0}
allowFullScreen>
</iframe>
</ResponsiveEmbed>
</Tab>
<Tab
eventKey="mirror-player"
title={intl.formatMessage({
id: 'VideoPlayerPage.tab.mirrorPlayer',
description: 'Title for mirror player tab',
defaultMessage: 'Mirror player',
})}
>
<VideoPlayer
ref={playerRef}
autoplay
controls
defaultVolume={volume}
language="en"
playbackRates={[
0.25,
0.5,
0.75,
1,
1.25,
1.5,
1.75,
2,
]}
onVolumeChange={onVolumeChange}
sources={[
{ src: getHLSMasterURL(hlsServerURL, id, fileName), type: 'application/x-mpegURL' },
{ src: getDASHManifestURL(dashServerURL, id, fileName), type: 'application/dash+xml' },
{ src: getDownloadURL(id, fileName), type: 'video/mp4' },
]}
aspectRatio="16:9"
fill
/>
</Tab>
</Tabs> </Tabs>
<h1 className="mb-3 mt-3"> <h1 className="mt-3">
{title} {title}
: :
{' '} {' '}
{videoTitle} {videoTitle}
</h1> </h1>
<h3 className="mb-3">
{run?.category}
</h3>
<Row className="mb-3"> <Row className="mb-3">
<Col sm={12} md={7}> <Col sm={12} md={7}>
<ButtonGroup> <ButtonGroup>
{/* <DownloadButton id={id} fileName={fileName} /> */} {downloadButtons}
{
sourceVideoURL
? (
<Button
href={
sourceVideoStart
? `${sourceVideoURL}?t=${Math.floor(sourceVideoStart / 60)}m${sourceVideoStart % 60
}s`
: sourceVideoURL
}
target="blank"
variant="twitch"
>
<FontAwesomeIcon icon={['fab', 'twitch']} className="mr-2" />
<FormattedMessage
id="VideoPlayerPage.watchOnTwitch"
description="Button below video that links to the exact position in the archived stream to watch it there."
defaultMessage="Watch on Twitch"
/>
</Button>
)
: (
''
)
}
</ButtonGroup> </ButtonGroup>
</Col> </Col>
<Col sm={12} md={5}> <Col sm={12} md={5}>
@ -398,6 +481,6 @@ export default function VideoPlayerPage({
</CopyField> </CopyField>
</Col> </Col>
</Row> </Row>
</div > </div>
); );
} }

120
frontend/pages/_app.tsx
View File

@ -28,11 +28,17 @@ import {
faHourglass, faHourglass,
faLanguage, faLanguage,
faLightbulb, faLightbulb,
faRunning,
faSearch, faSearch,
faShare, faShare,
} from '@fortawesome/free-solid-svg-icons'; } from '@fortawesome/free-solid-svg-icons';
import { faLightbulb as farLightbulb } from '@fortawesome/free-regular-svg-icons'; import { faLightbulb as farLightbulb } from '@fortawesome/free-regular-svg-icons';
import { faTwitch as fabTwitch } from '@fortawesome/free-brands-svg-icons'; import {
faFacebook as fabFacebook,
faTwitch as fabTwitch,
faTwitter as fabTwitter,
faYoutube as fabYoutube,
} from '@fortawesome/free-brands-svg-icons';
import '@fortawesome/fontawesome-svg-core/styles.css'; import '@fortawesome/fontawesome-svg-core/styles.css';
import Container from 'react-bootstrap/Container'; import Container from 'react-bootstrap/Container';
@ -52,7 +58,7 @@ 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 { ButtonGroup } from 'react-bootstrap'; import { Breadcrumb, ButtonGroup, Nav, Stack } 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 HomeStyle from '../styles/Home.module.css';
import DarkToggler from '../components/DarkToggler'; import DarkToggler from '../components/DarkToggler';
@ -68,7 +74,10 @@ import withSession from '../util/session';
fontawesomeSvgCoreConfig.autoAddCss = false; fontawesomeSvgCoreConfig.autoAddCss = false;
library.add( library.add(
fabFacebook,
fabTwitch, fabTwitch,
fabTwitter,
fabYoutube,
faClock, faClock,
faCopy, faCopy,
faDownload, faDownload,
@ -76,6 +85,7 @@ library.add(
faLanguage, faLanguage,
faLightbulb, faLightbulb,
farLightbulb, farLightbulb,
faRunning,
faSearch, faSearch,
faShare, faShare,
); );
@ -219,9 +229,9 @@ function GDQArchiveApp({
React.useEffect(() => { React.useEffect(() => {
if (enableDarkMode) { if (enableDarkMode) {
document.documentElement.setAttribute('data-enable-dark', 'true'); document.documentElement.setAttribute('data-bs-color-scheme', 'dark');
} else { } else {
document.documentElement.removeAttribute('data-enable-dark'); document.documentElement.removeAttribute('data-bs-color-scheme');
} }
document.documentElement.setAttribute('lang', currentLocale); document.documentElement.setAttribute('lang', currentLocale);
}); });
@ -240,50 +250,72 @@ function GDQArchiveApp({
locale={currentLocale} locale={currentLocale}
defaultLocale={defaultLocale} defaultLocale={defaultLocale}
> >
<Navbar bg="dark" variant="dark"> <Navbar bg="dark" expand="md" variant="dark">
<Link passHref href="/"> <Container fluid>
<Navbar.Brand> <Link passHref href="/">
<Image <Navbar.Brand>
src={gdqLogo} <Image
alt="Games Done Quick" src={gdqLogo}
className={[ alt="Games Done Quick"
HomeStyle.logo, height={30}
'd-inline-block', className={[
'align-middle', // HomeStyle.logo,
].join(' ')} 'd-inline-block',
/> // 'align-middle',
{' '} 'align-top',
<FormattedMessage ].join(' ')}
id="Navbar.brandText" />{' '}<FormattedMessage
defaultMessage="Instant Archive" id="Navbar.brandText"
/> defaultMessage="Instant Archive"
</Navbar.Brand> />
</Link> </Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" /> </Link>
<Navbar.Collapse {/* <Navbar.Text>
id="basic-navbar-nav" <Breadcrumb>
className="justify-content-end" <Breadcrumb.Item>
> <Link passHref href="/">
<ButtonGroup> <FormattedMessage
<LocaleSwitcher id="Breadcrumb.homeTitle"
locale={currentLocale} defaultMessage="GDQ Instant Archive"
onChangeLocale={onChangeLocale} description="Root node text in breadcrumb"
disabled={isChangingLocale || isValidating} />
showLoading={isChangingLocale} </Link>
/> </Breadcrumb.Item>
<DarkToggler <Breadcrumb.Item>
isDarkEnabled={enableDarkMode} <FormattedMessage
onChangeDarkMode={onChangeDarkMode} id="Breadcrumb.homeTitle"
disabled={isChangingDarkMode || isValidating} defaultMessage="GDQ Instant Archive"
showLoading={isChangingDarkMode} description="Root node text in breadcrumb"
/> />
</ButtonGroup> </Breadcrumb.Item>
</Navbar.Collapse> </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>
</Container>
</Navbar> </Navbar>
<Head> <Head>
<link rel="icon" type="image/svg+xml" href={favicon} /> <link rel="icon" type="image/svg+xml" href={favicon} />
</Head> </Head>
<Container> <Container className="mt-3">
{/* eslint-disable-next-line react/jsx-props-no-spreading */} {/* eslint-disable-next-line react/jsx-props-no-spreading */}
<Component {...pageProps} /> <Component {...pageProps} />
</Container> </Container>

2
frontend/pages/_document.tsx
View File

@ -67,7 +67,7 @@ class GDQArchiveDocument extends Document<{
}} }}
> >
<IntlProvider messages={messages} locale={locale} defaultLocale={defaultLocale}> <IntlProvider messages={messages} locale={locale} defaultLocale={defaultLocale}>
<Html lang={locale} data-enable-dark={enableDark}> <Html lang={locale} data-bs-color-scheme={enableDark}>
<Head /> <Head />
<body> <body>
<Main /> <Main />

59
frontend/pages/_error.tsx Normal file
View File

@ -0,0 +1,59 @@
/**
* Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { NextPage } from 'next';
import { ErrorProps } from 'next/error';
import Head from 'next/head';
import * as React from 'react';
import { useIntl } from 'react-intl';
const Error: NextPage<ErrorProps> = ({
statusCode,
title,
}) => {
const intl = useIntl();
return (
<div>
<Head>
<title>
{title}
{' '}
–
{' '}
{intl.formatMessage({
id: 'App.title',
description: 'The full title of the website',
defaultMessage: 'Games Done Quick Instant Archive',
})}
</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<p>
<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 }
}
export default Error

34
frontend/pages/index.tsx
View File

@ -21,26 +21,22 @@ import Head from 'next/head';
import Link from 'next/link'; import Link from 'next/link';
import ListGroup from 'react-bootstrap/ListGroup'; import ListGroup from 'react-bootstrap/ListGroup';
import { Breadcrumb } from 'react-bootstrap';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
import { GetServerSideProps, NextPage } from 'next';
import { FormattedMessage } from '../components/localization'; import { FormattedMessage } from '../components/localization';
import { VideoOnDemandIndex } from '../util/datatypes/VideoOnDemandIdentifier'; import { VideoOnDemandIndex } from '../util/datatypes/VideoOnDemandIdentifier';
import { getIndex } from '../util/api'; import { getIndex } from '../util/api';
import { GetServerSideProps, NextPage } from 'next';
interface HomeProps { interface HomeProps {
index: VideoOnDemandIndex index: VideoOnDemandIndex
} }
export const getServerSideProps: GetServerSideProps<HomeProps> = async () => { export const getServerSideProps: GetServerSideProps<HomeProps> = async () => ({
// Fetch VOD IDs and announcements props: {
return { // Fetch VOD IDs and announcements
props: { index: await getIndex(),
index: await getIndex(), },
}, });
};
}
const Home: NextPage<HomeProps> = ({ index: { announcements, ids } }) => { const Home: NextPage<HomeProps> = ({ index: { announcements, ids } }) => {
const intl = useIntl(); const intl = useIntl();
return ( return (
@ -54,9 +50,10 @@ const Home: NextPage<HomeProps> = ({ index: { announcements, ids } }) => {
})} })}
</title> </title>
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="color-scheme" content="light dark" />
</Head> </Head>
<Breadcrumb> {/* <Breadcrumb>
<Link passHref href="/"> <Link passHref href="/">
<Breadcrumb.Item active> <Breadcrumb.Item active>
<FormattedMessage <FormattedMessage
@ -66,7 +63,7 @@ const Home: NextPage<HomeProps> = ({ index: { announcements, ids } }) => {
/> />
</Breadcrumb.Item> </Breadcrumb.Item>
</Link> </Link>
</Breadcrumb> </Breadcrumb> */}
<h1> <h1>
<FormattedMessage <FormattedMessage
@ -84,23 +81,26 @@ const Home: NextPage<HomeProps> = ({ index: { announcements, ids } }) => {
{ {
announcements.map((text, id) => ( announcements.map((text, id) => (
// eslint-disable-next-line react/no-array-index-key
<p key={id}> <p key={id}>
<b>Announcement:</b> {text} <b>Announcement:</b>
{' '}
{text}
</p> </p>
)) ))
} }
<ListGroup> <ListGroup>
{ids.map(({ id, title }) => ( {ids.map(({ id, longTitle }) => (
<Link key={id} passHref href="/[id]" as={`/${id}`}> <Link key={id} passHref href="/[id]" as={`/${id}`}>
<ListGroup.Item action> <ListGroup.Item action>
<h5>{title}</h5> <h5>{longTitle}</h5>
</ListGroup.Item> </ListGroup.Item>
</Link> </Link>
))} ))}
</ListGroup> </ListGroup>
</div> </div>
); );
} };
export default Home; export default Home;

4
frontend/styles/_variables.scss Normal file
View File

@ -0,0 +1,4 @@
$twitch-color: rgb(145, 71, 255);
$twitter-color: rgb(29, 161, 242);
$youtube-color: rgb(255, 0, 0);
$facebook-color: rgb(66, 103, 178);

166
frontend/styles/bootstrap.scss
View File

@ -21,91 +21,103 @@
@import "~bootstrap/scss/functions"; @import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables"; @import "~bootstrap/scss/variables";
@import "~bootstrap-dark-5/scss/variables-alt";
@import "~bootstrap/scss/mixins"; @import "~bootstrap/scss/mixins";
@import "~@forevolve/bootstrap-dark/scss/dark-mixins"; @import "~bootstrap-dark-5/scss/dark/mixins";
@import "~bootstrap/scss/utilities";
@import "~bootstrap-dark-5/scss/dark/utilities";
@import "~bootstrap-dark-5/scss/dark/patch";
html:not([data-enable-dark="true"]) { :root {
@import "~bootstrap/scss/root"; color-scheme: light;
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
// @import '~bootstrap/scss/code';
@import "~bootstrap/scss/grid";
// @import '~bootstrap/scss/tables';
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/button-group";
@import "~bootstrap/scss/input-group";
// @import '~bootstrap/scss/custom-forms';
@import "~bootstrap/scss/nav";
@import "~bootstrap/scss/navbar";
// @import '~bootstrap/scss/card';
@import "~bootstrap/scss/breadcrumb";
// @import '~bootstrap/scss/pagination';
// @import '~bootstrap/scss/badge';
// @import '~bootstrap/scss/jumbotron';
// @import '~bootstrap/scss/alert';
// @import '~bootstrap/scss/progress';
@import "~bootstrap/scss/media";
@import "~bootstrap/scss/list-group";
@import "~bootstrap/scss/close";
// @import '~bootstrap/scss/toasts';
// @import '~bootstrap/scss/modal';
@import "~bootstrap/scss/tooltip";
@import "~bootstrap/scss/popover";
// @import '~bootstrap/scss/carousel';
@import "~bootstrap/scss/spinners";
@import "~bootstrap/scss/utilities";
// @import '~bootstrap/scss/print';
} }
// Layout & components
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/containers";
@import "~bootstrap/scss/grid";
// @import '~bootstrap/scss/tables';
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/button-group";
@import "~bootstrap/scss/nav";
@import "~bootstrap/scss/navbar";
// @import '~bootstrap/scss/card';
// @import '~bootstrap/scss/accordion';
@import "~bootstrap/scss/breadcrumb";
// @import '~bootstrap/scss/pagination';
// @import '~bootstrap/scss/badge';
// @import '~bootstrap/scss/alert';
// @import '~bootstrap/scss/progress';
@import "~bootstrap/scss/list-group";
@import "~bootstrap/scss/close";
// @import '~bootstrap/scss/toasts';
// @import '~bootstrap/scss/modal';
@import "~bootstrap/scss/tooltip";
@import "~bootstrap/scss/popover";
// @import '~bootstrap/scss/carousel';
@import "~bootstrap/scss/spinners";
@import "~bootstrap/scss/offcanvas";
// Helpers
@import "~bootstrap/scss/helpers";
// Utilities
@import "~bootstrap/scss/utilities/api";
/** /**
* BOOTSTRAP DARK * BOOTSTRAP DARK
*/ */
html[data-enable-dark="true"] { @include color-scheme-alt('[data-bs-color-scheme="dark"]') {
@import "~@forevolve/bootstrap-dark/scss/dark-variables"; @import "~bootstrap-dark-5/scss/dark/root";
@import "~bootstrap/scss/root"; @import "~bootstrap-dark-5/scss/dark/reboot";
@import "~bootstrap/scss/reboot"; @import "~bootstrap-dark-5/scss/dark/type";
@import "~bootstrap/scss/type"; @import "~bootstrap-dark-5/scss/dark/images";
@import "~bootstrap/scss/images"; // no colors in containers
// @import '~bootstrap/scss/code'; // no colors in grid
@import "~bootstrap/scss/grid"; // @import '~bootstrap-dark-5/scss/dark/tables';
// @import '~bootstrap/scss/tables'; @import "~bootstrap-dark-5/scss/dark/forms";
// @import '~@forevolve/bootstrap-dark/scss/dark-tables'; @import "~bootstrap-dark-5/scss/dark/buttons";
@import "~bootstrap/scss/forms"; // no colors in transitions
@import "~bootstrap/scss/buttons"; @import "~bootstrap-dark-5/scss/dark/dropdown";
@import "~bootstrap/scss/transitions"; @import "~bootstrap-dark-5/scss/dark/button-group";
@import "~bootstrap/scss/dropdown"; @import "~bootstrap-dark-5/scss/dark/nav";
@import "~bootstrap/scss/button-group"; @import "~bootstrap-dark-5/scss/dark/navbar";
@import "~bootstrap/scss/input-group"; // @import '~bootstrap-dark-5/scss/dark/card';
@import "~@forevolve/bootstrap-dark/scss/dark-input-group"; // @import '~bootstrap-dark-5/scss/dark/accordion';
// @import '~bootstrap/scss/custom-forms'; @import "~bootstrap-dark-5/scss/dark/breadcrumb";
@import "~bootstrap/scss/nav"; // @import '~bootstrap-dark-5/scss/dark/pagination';
@import "~bootstrap/scss/navbar"; // @import '~bootstrap-dark-5/scss/dark/badge';
// @import '~bootstrap/scss/card'; // @import '~bootstrap-dark-5/scss/dark/alert';
@import "~bootstrap/scss/breadcrumb"; // @import '~bootstrap-dark-5/scss/dark/progress';
// @import '~bootstrap/scss/pagination'; @import "~bootstrap-dark-5/scss/dark/list-group";
// @import '~bootstrap/scss/badge'; @import "~bootstrap-dark-5/scss/dark/close";
// @import '~bootstrap/scss/jumbotron'; // @import '~bootstrap-dark-5/scss/dark/toasts';
// @import '~bootstrap/scss/alert'; // @import '~bootstrap-dark-5/scss/dark/modal';
// @import '~bootstrap/scss/progress'; @import "~bootstrap-dark-5/scss/dark/tooltip";
@import "~bootstrap/scss/media"; @import "~bootstrap-dark-5/scss/dark/popover";
@import "~bootstrap/scss/list-group"; // @import '~bootstrap-dark-5/scss/dark/carousel';
@import "~bootstrap/scss/close"; @import "~bootstrap-dark-5/scss/dark/offcanvas";
// @import '~bootstrap/scss/toasts'; @import "~bootstrap-dark-5/scss/dark/placeholders";
// @import '~bootstrap/scss/modal'; @import "~bootstrap-dark-5/scss/dark/helpers";
@import "~bootstrap/scss/tooltip"; @import "~bootstrap-dark-5/scss/dark/utilities/api";
@import "~bootstrap/scss/popover"; @import "~bootstrap-dark-5/scss/dark/dark";
// @import '~bootstrap/scss/carousel';
@import "~bootstrap/scss/spinners"; :root {
@import "~bootstrap/scss/utilities"; color-scheme: dark;
// @import '~bootstrap/scss/print'; }
@import "~@forevolve/bootstrap-dark/scss/dark-styles";
} }
.breadcrumb { // HACK - fix use of unset variables
border-top: 0 !important; :root {
--bs-body-bg-alt: #{$body-bg-alt};
--bs-body-color-alt: #{$body-color-alt};
} }
@import "~bootstrap-dark-5/scss/dark/utilities/api-all";

11
frontend/styles/main.scss
View File

@ -17,6 +17,7 @@
@import "~video.js/src/css/video-js"; @import "~video.js/src/css/video-js";
@import "bootstrap"; @import "bootstrap";
@import "variables";
$colorTransitionFunction: ease-out; $colorTransitionFunction: ease-out;
$colorTransitionDuration: 1s; $colorTransitionDuration: 1s;
@ -28,8 +29,6 @@ html[data-toggled-dark="true"] * {
} }
html { html {
$twitch-color: rgb(145, 71, 255);
.btn { .btn {
&.btn-twitch { &.btn-twitch {
@include button-variant($twitch-color, $twitch-color); @include button-variant($twitch-color, $twitch-color);
@ -38,5 +37,13 @@ html {
&.btn-outline-twitch { &.btn-outline-twitch {
@include button-outline-variant($twitch-color); @include button-outline-variant($twitch-color);
} }
&.btn-youtube {
@include button-variant($youtube-color, $youtube-color);
}
&.btn-outline-youtube {
@include button-outline-variant($youtube-color);
}
} }
} }

51
frontend/util/api.ts
View File

@ -1,20 +1,23 @@
/** /**
* Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw> * Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw>
* *
* This program is free software: you can redistribute it and/or modify * This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as * it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the * published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version. * License, or (at your option) any later version.
* *
* This program is distributed in the hope that it will be useful, * This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of * but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details. * GNU Affero General Public License for more details.
* *
* You should have received a copy of the GNU Affero General Public License * 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/>. * along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
import { deprecate } from 'util';
import { getThumbnailURL } from './thumbnail';
import { RunnerList } from './datatypes/RunnerList';
import { VideoEntry, VideoList } from './datatypes/VideoList'; import { VideoEntry, VideoList } from './datatypes/VideoList';
import { VideoOnDemandIndex } from './datatypes/VideoOnDemandIdentifier'; import { VideoOnDemandIndex } from './datatypes/VideoOnDemandIdentifier';
import sanitizeTitle from './sanitizeTitle'; import sanitizeTitle from './sanitizeTitle';
@ -24,6 +27,9 @@ const upstreamDirectURL = process.env.UPSTREAM_DIRECT_URL || upstreamURL;
// const apiURL = process.env.API_URL || `${upstreamURL}/api`; // const apiURL = process.env.API_URL || `${upstreamURL}/api`;
const apiDirectURL = process.env.API_DIRECT_URL || `${upstreamDirectURL}/api`; const apiDirectURL = process.env.API_DIRECT_URL || `${upstreamDirectURL}/api`;
// TODO - where did the hourglass image go?
const hourglassImage: string = null;
export class HTTPError extends Error { export class HTTPError extends Error {
response: Response; response: Response;
@ -61,6 +67,35 @@ export async function fetchJson(
} }
} }
export function makeThumbnailURLSet(
thumbnailServerURL: string,
id: string,
{
downloadFileName,
thumbnails,
}: VideoEntry,
): { [srcSetSpec: string]: URL } {
// let relativePaths;
// If thumbnails were presented by the JSON API, use those
if (thumbnails) {
return thumbnails
.reduce((all, { sourceSize, fileName }) => ({
...all,
[sourceSize]: new URL(fileName, thumbnailServerURL),
}), {});
}
// Generate default set of URLs based on MP4s on the upstream server
return [96, 96 * 2, 96 * 3]
.reduce((all, width) => ({
[`${width}w`]: downloadFileName
? getThumbnailURL(thumbnailServerURL, id, downloadFileName)
: hourglassImage,
}), {});
}
deprecate(makeThumbnailURLSet, 'makeThumbnailURLSet() is deprecated.');
async function getDirect(relativeURL: string) { async function getDirect(relativeURL: string) {
return fetchJson(`${apiDirectURL}/${relativeURL}`); return fetchJson(`${apiDirectURL}/${relativeURL}`);
} }
@ -73,6 +108,10 @@ export async function getIndex(): Promise<VideoOnDemandIndex> {
return getDirect('index.json'); return getDirect('index.json');
} }
export async function getRunners(): Promise<RunnerList> {
return getDirect('runners.json');
}
export async function getVideos(id: string): Promise<VideoList> { export async function getVideos(id: string): Promise<VideoList> {
const result: VideoList = await getDirect(`videos/${id}.json`); const result: VideoList = await getDirect(`videos/${id}.json`);
result.videos = result.videos.reduce((all: Array<VideoEntry>, { result.videos = result.videos.reduce((all: Array<VideoEntry>, {
@ -87,12 +126,12 @@ export async function getVideos(id: string): Promise<VideoList> {
slug: typeof slug === 'string' slug: typeof slug === 'string'
? slug ? slug
: sanitizeTitle(title + ( : sanitizeTitle(title + (
all.find(v => v.title === title) all.find((v) => v.title === title)
? ` ${all.filter(v => v.title === title).length + 1}` ? ` ${all.filter((v) => v.title === title).length + 1}`
: '' : ''
)), )),
}, },
], []) ], []);
return result; return result;
} }

36
frontend/util/datatypes/RunnerList.ts Normal file
View File

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

50
frontend/util/datatypes/VideoList.ts
View File

@ -1,31 +1,63 @@
/** /**
* Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw> * Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw>
* *
* This program is free software: you can redistribute it and/or modify * This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as * it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the * published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version. * License, or (at your option) any later version.
* *
* This program is distributed in the hope that it will be useful, * This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of * but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details. * GNU Affero General Public License for more details.
* *
* You should have received a copy of the GNU Affero General Public License * 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/>. * along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
export interface RunInformation {
name: string,
displayName: string,
twitchName: string,
console: string,
commentators: string,
description: string,
startTime: string,
endTime: string,
runTime: string,
setupTime: string,
coop: boolean,
category: string,
releaseYear: number,
runners: Array<number>,
canonicalURL: string,
}
export type Thumbnails = Thumbnail[];
export interface Thumbnail {
sourceSize: string;
fileName: string;
}
export interface VideoEntry { export interface VideoEntry {
fileName:string downloadFileName: string,
title: string title: string,
run?: RunInformation,
runners?: Array<string>,
hosts?: Array<string>,
duration?: number | string, duration?: number | string,
slug: string, slug: string,
sourceVideoURL: string sourceVideoID: string,
sourceVideoStart: number | string sourceVideoURL: string,
sourceVideoEnd: number | string sourceVideoStart: number | string,
sourceVideoEnd: number | string,
youtubeVideoID?: string,
thumbnails: Thumbnails,
youtubeVideoURL?: string,
} }
export interface VideoList { export interface VideoList {
lastUpdatedAt: string lastUpdatedAt: string,
videos: Array<VideoEntry> videos: Array<VideoEntry>
} }

11
frontend/util/datatypes/VideoOnDemandIdentifier.ts
View File

@ -1,23 +1,24 @@
/** /**
* Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw> * Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw>
* *
* This program is free software: you can redistribute it and/or modify * This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as * it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the * published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version. * License, or (at your option) any later version.
* *
* This program is distributed in the hope that it will be useful, * This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of * but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details. * GNU Affero General Public License for more details.
* *
* You should have received a copy of the GNU Affero General Public License * 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/>. * along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
export interface VideoOnDemandIdentifier { export interface VideoOnDemandIdentifier {
id: string id: string;
title: string title: string;
longTitle: string;
} }
export interface VideoOnDemandIndex { export interface VideoOnDemandIndex {

44
frontend/util/index.ts
View File

@ -1,57 +1,20 @@
/** /**
* Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw> * Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw>
* *
* This program is free software: you can redistribute it and/or modify * This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as * it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the * published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version. * License, or (at your option) any later version.
* *
* This program is distributed in the hope that it will be useful, * This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of * but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details. * GNU Affero General Public License for more details.
* *
* You should have received a copy of the GNU Affero General Public License * 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/>. * along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
export function getThumbnailURL(
thumbnailServerURL: string,
id: string,
fileName: string,
offset: number|string,
resizeparams: {
width?: number,
height?: number,
} = {},
) {
// Example: https://thumb-gdq-a.edge.streaminginter.net/agdq2020vods/000.%20Pre%2dpreshow.mp4/thumb-90000-w240.jpg
// thumb-<offset>[<resizeparams>].jpg
const resizeparamsStr = Object.entries(resizeparams)
.map(([key, value]) => {
switch (key) {
case 'width':
return `w${value}`;
case 'height':
return `h${value}`;
default:
throw new Error(`unsupported resizeparam: ${key}`);
}
})
.filter((v) => !!v)
.join('-');
return `${thumbnailServerURL}/${[
id,
fileName,
`thumb-${offset}${resizeparamsStr.length > 0 ? `-${resizeparamsStr}` : ''}.jpg`,
]
.map(encodeURIComponent)
.join('/')}`;
}
export function getHLSMasterURL( export function getHLSMasterURL(
hlsServerURL: string, hlsServerURL: string,
id: string, id: string,
@ -86,3 +49,4 @@ export * as api from './api';
export * as localization from './localization'; export * as localization from './localization';
export * as session from './session'; export * as session from './session';
export * as status from './status'; export * as status from './status';
export * as thumbnail from './thumbnail';

6
frontend/util/localization.ts
View File

@ -1,16 +1,16 @@
/** /**
* Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw> * Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw>
* *
* This program is free software: you can redistribute it and/or modify * This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as * it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the * published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version. * License, or (at your option) any later version.
* *
* This program is distributed in the hope that it will be useful, * This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of * but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details. * GNU Affero General Public License for more details.
* *
* You should have received a copy of the GNU Affero General Public License * 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/>. * along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */

8
frontend/util/parseBool.ts
View File

@ -1,21 +1,21 @@
/** /**
* Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw> * Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw>
* *
* This program is free software: you can redistribute it and/or modify * This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as * it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the * published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version. * License, or (at your option) any later version.
* *
* This program is distributed in the hope that it will be useful, * This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of * but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details. * GNU Affero General Public License for more details.
* *
* You should have received a copy of the GNU Affero General Public License * 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/>. * along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
export default function parseBool(value: string|number) { export default function parseBool(value: string | number) {
switch (value.toString().toLowerCase()) { switch (value.toString().toLowerCase()) {
case '': case '':
case '0': case '0':

6
frontend/util/sanitizeFileName.ts
View File

@ -1,16 +1,16 @@
/** /**
* Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw> * Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw>
* *
* This program is free software: you can redistribute it and/or modify * This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as * it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the * published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version. * License, or (at your option) any later version.
* *
* This program is distributed in the hope that it will be useful, * This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of * but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details. * GNU Affero General Public License for more details.
* *
* You should have received a copy of the GNU Affero General Public License * 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/>. * along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */

6
frontend/util/sanitizeTitle.ts
View File

@ -1,16 +1,16 @@
/** /**
* Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw> * Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw>
* *
* This program is free software: you can redistribute it and/or modify * This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as * it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the * published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version. * License, or (at your option) any later version.
* *
* This program is distributed in the hope that it will be useful, * This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of * but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details. * GNU Affero General Public License for more details.
* *
* You should have received a copy of the GNU Affero General Public License * 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/>. * along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */

26
frontend/util/thumbnail.ts Normal file
View File

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

6
frontend/util/types.ts
View File

@ -1,16 +1,16 @@
/** /**
* Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw> * Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw>
* *
* This program is free software: you can redistribute it and/or modify * This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as * it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the * published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version. * License, or (at your option) any later version.
* *
* This program is distributed in the hope that it will be useful, * This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of * but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details. * GNU Affero General Public License for more details.
* *
* You should have received a copy of the GNU Affero General Public License * 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/>. * along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */

11240
frontend/yarn.lock
View File

File diff suppressed because it is too large Load Diff