Work in progress.
parent
3eee711838
commit
dd773852f9
GPG Key ID:
468BBEEBB9EC6AEA
|
|
@ -67,7 +67,12 @@ server {
|
|||
root /htdocs;
|
||||
|
||||
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;
|
||||
access_log off;
|
||||
|
|
|
|||
|
|
@ -59,16 +59,13 @@ const CopyField = ({
|
|||
{
|
||||
icon
|
||||
? (
|
||||
<InputGroup.Prepend>
|
||||
<InputGroup.Text>
|
||||
<FontAwesomeIcon icon="share" />
|
||||
</InputGroup.Text>
|
||||
</InputGroup.Prepend>
|
||||
)
|
||||
: ''
|
||||
}
|
||||
<FormControl ref={textbox} readOnly value={children} />
|
||||
<InputGroup.Append>
|
||||
<Button ref={target} onClick={doCopy}>
|
||||
<FontAwesomeIcon icon={copyIcon} />
|
||||
<Overlay target={target.current} show={show} placement="top">
|
||||
|
|
@ -84,7 +81,6 @@ const CopyField = ({
|
|||
)}
|
||||
</Overlay>
|
||||
</Button>
|
||||
</InputGroup.Append>
|
||||
</InputGroup>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export default function LocaleSwitcher({
|
|||
disabled={showLoading || disabled}
|
||||
as={ButtonGroup}
|
||||
variant="outline-secondary"
|
||||
alignRight
|
||||
align="end"
|
||||
id="dropdown-locale"
|
||||
title={(
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -23,6 +23,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 VideoListItem from './VideoListItem';
|
||||
import Filter from './Filter';
|
||||
import { VideoEntry } from '../util/datatypes/VideoList';
|
||||
|
|
@ -32,6 +33,7 @@ interface VideoListProps {
|
|||
id: string,
|
||||
thumbnailServerURL: string,
|
||||
videos: Array<VideoEntry>,
|
||||
runners: RunnerList,
|
||||
}
|
||||
|
||||
interface VideoListState {
|
||||
|
|
@ -62,15 +64,14 @@ class VideoList extends React.Component<VideoListProps, VideoListState> {
|
|||
id,
|
||||
thumbnailServerURL,
|
||||
videos,
|
||||
runners,
|
||||
} = this.props;
|
||||
return (
|
||||
<div>
|
||||
<InputGroup>
|
||||
<InputGroup.Prepend>
|
||||
<InputGroup.Text id="search-prepend">
|
||||
<FontAwesomeIcon icon="search" />
|
||||
</InputGroup.Text>
|
||||
</InputGroup.Prepend>
|
||||
<FormControl
|
||||
placeholder={intl.formatMessage({ id: 'VideoList.Search.Placeholder', defaultMessage: 'Type something to search here…' })}
|
||||
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(({
|
||||
item: {
|
||||
duration,
|
||||
fileName,
|
||||
downloadFileName: fileName,
|
||||
title,
|
||||
run,
|
||||
slug,
|
||||
sourceVideoStart,
|
||||
sourceVideoEnd,
|
||||
thumbnails,
|
||||
},
|
||||
refIndex: index,
|
||||
}) => (
|
||||
<VideoListItem
|
||||
key={index}
|
||||
runData={run}
|
||||
runners={runners.filter((r) => run?.runners?.includes(r.pk))}
|
||||
duration={duration}
|
||||
id={id}
|
||||
thumbnailServerURL={thumbnailServerURL}
|
||||
|
|
@ -105,6 +110,7 @@ class VideoList extends React.Component<VideoListProps, VideoListState> {
|
|||
title={title}
|
||||
sourceVideoStart={sourceVideoStart}
|
||||
sourceVideoEnd={sourceVideoEnd}
|
||||
thumbnails={thumbnails}
|
||||
/>
|
||||
))}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -18,10 +18,11 @@
|
|||
@import "~bootstrap/scss/functions";
|
||||
@import "~bootstrap/scss/variables";
|
||||
@import "~bootstrap/scss/mixins";
|
||||
// @use "~bootstrap/scss/type";
|
||||
|
||||
.thumbnail {
|
||||
flex-grow: 0;
|
||||
width: 96px;
|
||||
position: relative;
|
||||
@include media-breakpoint-up(md) {
|
||||
width: 160px;
|
||||
}
|
||||
|
|
@ -29,3 +30,27 @@
|
|||
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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,43 +15,49 @@
|
|||
* 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 ListGroup from 'react-bootstrap/ListGroup';
|
||||
import Media from 'react-bootstrap/Media';
|
||||
import Image from 'react-bootstrap/Image';
|
||||
|
||||
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 style from './VideoListItem.module.scss';
|
||||
import sanitizeTitle from '../util/sanitizeTitle';
|
||||
|
||||
import hourglassImage from '../images/hourglass.svg';
|
||||
import Runner from './Runner';
|
||||
|
||||
export default function VideoListItem({
|
||||
thumbnailServerURL,
|
||||
duration,
|
||||
id,
|
||||
fileName,
|
||||
slug,
|
||||
title,
|
||||
sourceVideoStart,
|
||||
sourceVideoEnd,
|
||||
runData,
|
||||
runners,
|
||||
thumbnails,
|
||||
}: {
|
||||
thumbnailServerURL: string,
|
||||
duration: number | string,
|
||||
id: string,
|
||||
fileName: string,
|
||||
slug: string,
|
||||
title: string,
|
||||
sourceVideoStart: number | string,
|
||||
sourceVideoEnd: number | string,
|
||||
runData: RunInformation,
|
||||
runners: RunnerList,
|
||||
thumbnails: Thumbnails,
|
||||
}) {
|
||||
let displayDuration = null;
|
||||
if (duration !== null) {
|
||||
|
|
@ -80,42 +86,67 @@ export default function VideoListItem({
|
|||
displayDuration = videoEnd - videoStart;
|
||||
}
|
||||
const listGroupItem = (
|
||||
<ListGroup.Item action>
|
||||
<Media>
|
||||
<ListGroup.Item>
|
||||
<Row>
|
||||
<Col sm={3} xs={3}>
|
||||
<Link passHref href="/[id]/[vslug]" as={`/${id}/${slug}`}>
|
||||
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
||||
<a>
|
||||
<Image
|
||||
className={['mr-3', style.thumbnail].join(' ')}
|
||||
className={style.thumbnail}
|
||||
src={
|
||||
fileName
|
||||
? getThumbnailURL(thumbnailServerURL, id, fileName, 90 * 1000, {
|
||||
width: 96,
|
||||
})
|
||||
thumbnails.length > 0
|
||||
? getThumbnailURL(thumbnailServerURL, id, thumbnails[0].fileName)
|
||||
: hourglassImage
|
||||
}
|
||||
srcSet={[96, 96 * 2, 96 * 3]
|
||||
.map((width) => [
|
||||
fileName
|
||||
? getThumbnailURL(thumbnailServerURL, id, fileName, 90 * 1000, {
|
||||
width,
|
||||
})
|
||||
srcSet={
|
||||
Array.isArray(thumbnails) && thumbnails.length > 0
|
||||
? thumbnails
|
||||
.map(({
|
||||
sourceSize,
|
||||
fileName,
|
||||
}) => (
|
||||
[
|
||||
thumbnails.length > 0
|
||||
? getThumbnailURL(thumbnailServerURL, id, fileName)
|
||||
: hourglassImage,
|
||||
`${width}w`,
|
||||
])
|
||||
sourceSize,
|
||||
]
|
||||
))
|
||||
.map((item) => item.join(' '))
|
||||
.join(', ')}
|
||||
.join(', ')
|
||||
: ''
|
||||
}
|
||||
alt={title}
|
||||
/>
|
||||
<Media.Body>
|
||||
<h5 className="mt-0 mb-3">{title}</h5>
|
||||
<p>
|
||||
{!fileName ? (
|
||||
<span>
|
||||
<FontAwesomeIcon icon="hourglass" />
|
||||
</a>
|
||||
</Link>
|
||||
</Col>
|
||||
<Col sm={4} xs={9}>
|
||||
<Link href="/[id]/[vslug]" as={`/${id}/${slug}`}>
|
||||
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
||||
<a className="text-reset text-decoration-none">
|
||||
<div>
|
||||
<div className={style['run-name']}>{title}</div>
|
||||
<div className={[style['run-category'], 'mt-0'].join(' ')}>{runData?.category}</div>
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
</Col>
|
||||
<Col sm={5} xs={12}>
|
||||
{runners && runners.length > 0 ? (
|
||||
<div className="mr-2">
|
||||
<FontAwesomeIcon icon="running" />
|
||||
{' '}
|
||||
Coming up
|
||||
</span>
|
||||
{runners.reduce((all: Array<ReactElement>, runner: RunnerData) => [
|
||||
...all,
|
||||
all.length > 0 ? ' / ' : null,
|
||||
<Runner key={runner.fields.name} runner={runner.fields} />,
|
||||
], [])}
|
||||
</div>
|
||||
) : ''}
|
||||
{displayDuration !== null ? (
|
||||
<span>
|
||||
<span className="mr-2 text-nowrap">
|
||||
<FontAwesomeIcon icon="clock" />
|
||||
{' '}
|
||||
<FormattedDuration
|
||||
|
|
@ -124,18 +155,16 @@ export default function VideoListItem({
|
|||
unitDisplay="short"
|
||||
/>
|
||||
</span>
|
||||
) : ''}
|
||||
</p>
|
||||
</Media.Body>
|
||||
</Media>
|
||||
) : (
|
||||
<span className="mr-2 text-nowrap">
|
||||
<FontAwesomeIcon icon="hourglass" />
|
||||
{' '}
|
||||
Coming up
|
||||
</span>
|
||||
)}
|
||||
</Col>
|
||||
</Row>
|
||||
</ListGroup.Item>
|
||||
);
|
||||
if (fileName) {
|
||||
return (
|
||||
<Link passHref href="/[id]/[vslug]" as={`/${id}/${slug}`}>
|
||||
{listGroupItem}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
return listGroupItem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +1,5 @@
|
|||
/// <reference types="next" />
|
||||
/// <reference types="next/types/global" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/**
|
||||
* 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
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
|
|
@ -15,15 +15,25 @@
|
|||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
const withPlugins = require('next-compose-plugins');
|
||||
const optimizedImages = require('next-optimized-images');
|
||||
const withPlugins = require("next-compose-plugins");
|
||||
const optimizedImages = require("next-optimized-images");
|
||||
|
||||
module.exports = withPlugins([
|
||||
[optimizedImages, {
|
||||
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,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
{
|
||||
"name": "gdq-archive-frontend",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "run-s i18n:build dev:next",
|
||||
|
|
@ -15,67 +14,68 @@
|
|||
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
|
||||
},
|
||||
"dependencies": {
|
||||
"@forevolve/bootstrap-dark": "^1.0.0-alpha.1091",
|
||||
"@formatjs/intl-numberformat": "^5.5.4",
|
||||
"@formatjs/intl-utils": "^3.8.3",
|
||||
"@fortawesome/fontawesome-free": "^5.14.0",
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.30",
|
||||
"@fortawesome/free-brands-svg-icons": "^5.14.0",
|
||||
"@fortawesome/free-regular-svg-icons": "^5.14.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.14.0",
|
||||
"@fortawesome/react-fontawesome": "^0.1.11",
|
||||
"bootstrap": "^4.5.2",
|
||||
"cssnano": "^4.1.10",
|
||||
"file-loader": "^6.0.0",
|
||||
"fuse.js": "^6.4.1",
|
||||
"imagemin-optipng": "^8.0.0",
|
||||
"imagemin-svgo": "^8.0.0",
|
||||
"intl-messageformat": ">= 5.1",
|
||||
"intl-messageformat-parser": "^6.0.1",
|
||||
"jquery": "~3",
|
||||
"@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",
|
||||
"@popperjs/core": "^2.9.2",
|
||||
"bootstrap": "5.1.x",
|
||||
"bootstrap-dark-5": "1.1.0",
|
||||
"cssnano": "^5.0.6",
|
||||
"file-loader": "^6.2.0",
|
||||
"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": "9.5.2",
|
||||
"next-compose-plugins": "^2.2.0",
|
||||
"next-iron-session": "^4.1.8",
|
||||
"next-optimized-images": "^2.6.2",
|
||||
"next": "^11.1.3",
|
||||
"next-compose-plugins": "^2.2.1",
|
||||
"next-iron-session": "^4.2.0",
|
||||
"next-optimized-images": "^1.4.2",
|
||||
"nprogress": "^0.2.0",
|
||||
"popper.js": "^1.16.1",
|
||||
"raw-loader": "^4.0.1",
|
||||
"react": "16.13.1",
|
||||
"react-bootstrap": "^1.3.0",
|
||||
"react-dom": "16.13.1",
|
||||
"react-intl": "^5.6.3",
|
||||
"raw-loader": "^4.0.2",
|
||||
"react": "17.0.2",
|
||||
"react-bootstrap": "^2.4.0",
|
||||
"react-dom": "17.0.2",
|
||||
"react-intl": "^5.20.4",
|
||||
"react-intl-formatted-duration": "^4.0.0",
|
||||
"sass": "^1.26.10",
|
||||
"shaka-player": "^3.0.3",
|
||||
"shaka-player-react": "^1.0.1",
|
||||
"swr": "^0.3.0",
|
||||
"url-loader": "^4.1.0",
|
||||
"url-slug": "^2.3.2",
|
||||
"video.js": "^7.8.4",
|
||||
"videojs-contrib-dash": "^2.11.0",
|
||||
"videojs-errors": "^4.3.2",
|
||||
"webpack": "^4.0.0",
|
||||
"xmlbuilder2": "^2.3.1"
|
||||
"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",
|
||||
"url-slug": "^3.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": {
|
||||
"@formatjs/cli": "^2.7.5",
|
||||
"@types/node": "^14.6.0",
|
||||
"@formatjs/cli": "^4.2.27",
|
||||
"@types/node": "^16.3.1",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
"@types/react": "^16.9.46",
|
||||
"@typescript-eslint/eslint-plugin": "^3.9.1",
|
||||
"@typescript-eslint/parser": "^3.9.1",
|
||||
"eslint": "^7.7.0",
|
||||
"eslint-config-airbnb-typescript": "^9.0.0",
|
||||
"eslint-plugin-import": "2.21.2",
|
||||
"eslint-plugin-jsx-a11y": "6.3.0",
|
||||
"eslint-plugin-react": "7.20.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",
|
||||
"lint-staged": "^10.2.11",
|
||||
"lint-staged": "^11.0.0",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss-flexbugs-fixes": "^4.2.1",
|
||||
"postcss-preset-env": "^6.7.0",
|
||||
"typescript": "^4.0.2"
|
||||
"postcss": "^8.2.15",
|
||||
"postcss-flexbugs-fixes": "^5.0.2",
|
||||
"postcss-preset-env": "^7.2.0",
|
||||
"typescript": "^4.3.5"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -23,15 +23,16 @@ import Head from 'next/head';
|
|||
import Link from 'next/link';
|
||||
|
||||
import { useIntl } from 'react-intl';
|
||||
import { GetServerSideProps, NextPage } from 'next';
|
||||
import { RunnerList } from 'util/datatypes/RunnerList';
|
||||
import { FormattedMessage } from '../components/localization';
|
||||
|
||||
import RelativeTime from '../components/RelativeTime';
|
||||
import VideoList from '../components/VideoList';
|
||||
|
||||
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 { GetServerSideProps, NextPage } from 'next';
|
||||
|
||||
interface VideoListPageProps {
|
||||
id?: string,
|
||||
|
|
@ -39,7 +40,8 @@ interface VideoListPageProps {
|
|||
thumbnailServerURL?: string,
|
||||
title?: string,
|
||||
videos?: Array<VideoEntry>,
|
||||
};
|
||||
runners?: RunnerList,
|
||||
}
|
||||
|
||||
export const getServerSideProps: GetServerSideProps<VideoListPageProps> = async ({ params: { id } }) => {
|
||||
// Fetch URL to thumbnails server
|
||||
|
|
@ -48,6 +50,8 @@ export const getServerSideProps: GetServerSideProps<VideoListPageProps> = async
|
|||
servers: { thumbnails: thumbnailServerURL },
|
||||
} = await getIndex();
|
||||
|
||||
const runners = await getRunners();
|
||||
|
||||
const vodMeta = ids.find(({
|
||||
id: thisID,
|
||||
}: {
|
||||
|
|
@ -85,9 +89,10 @@ export const getServerSideProps: GetServerSideProps<VideoListPageProps> = async
|
|||
title,
|
||||
videos: finalVideos,
|
||||
lastUpdatedAt,
|
||||
runners,
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const VideoListPage: NextPage<VideoListPageProps> = ({
|
||||
id,
|
||||
|
|
@ -95,6 +100,7 @@ const VideoListPage: NextPage<VideoListPageProps> = ({
|
|||
thumbnailServerURL,
|
||||
title,
|
||||
videos,
|
||||
runners,
|
||||
}) => {
|
||||
if (!id) {
|
||||
return notFound();
|
||||
|
|
@ -143,6 +149,7 @@ const VideoListPage: NextPage<VideoListPageProps> = ({
|
|||
|
||||
<VideoList
|
||||
id={id}
|
||||
runners={runners}
|
||||
thumbnailServerURL={thumbnailServerURL}
|
||||
videos={videos}
|
||||
/>
|
||||
|
|
@ -169,6 +176,6 @@ const VideoListPage: NextPage<VideoListPageProps> = ({
|
|||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default VideoListPage;
|
||||
|
|
|
|||
|
|
@ -22,23 +22,23 @@ import Link from 'next/link';
|
|||
import { useRouter } from 'next/router';
|
||||
|
||||
import {
|
||||
Breadcrumb, Button, ButtonGroup, Col, ResponsiveEmbed, Row, Tab, Tabs,
|
||||
Breadcrumb, Button, ButtonGroup, Col, Ratio, Row, Tab, Tabs,
|
||||
} from 'react-bootstrap';
|
||||
|
||||
import { useIntl } from 'react-intl';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { GetServerSideProps, GetServerSidePropsResult, InferGetServerSidePropsType } from 'next';
|
||||
import { VideoEntry } from 'util/datatypes/VideoList';
|
||||
import DownloadButton from 'components/DownloadButton';
|
||||
import { basename } from 'path';
|
||||
import withSession from 'util/session';
|
||||
import { ParsedUrlQuery } from 'querystring';
|
||||
import YouTubePlayer from 'react-youtube';
|
||||
import { getDASHManifestURL, getHLSMasterURL } from '../../util';
|
||||
|
||||
import VideoPlayer from '../../components/VideoPlayer';
|
||||
import CopyField from '../../components/CopyField';
|
||||
import { FormattedMessage } from '../../components/localization';
|
||||
import sanitizeFileName from '../../util/sanitizeFileName';
|
||||
import sanitizeTitle from '../../util/sanitizeTitle';
|
||||
import { notFound } from '../../util/status';
|
||||
import {
|
||||
getDownloadURL,
|
||||
|
|
@ -46,8 +46,9 @@ import {
|
|||
getVideos,
|
||||
submitPreferences,
|
||||
} from '../../util/api';
|
||||
import DownloadButton from '../../components/DownloadButton';
|
||||
|
||||
interface VideoPlayerPageParameters {
|
||||
interface VideoPlayerPageParameters extends ParsedUrlQuery {
|
||||
id: string,
|
||||
vslug: string,
|
||||
}
|
||||
|
|
@ -55,7 +56,7 @@ interface VideoPlayerPageParameters {
|
|||
interface VideoPlayerPageProps {
|
||||
id?: string,
|
||||
vslug?: string,
|
||||
video?: number,
|
||||
video?: number | VideoEntry,
|
||||
volume?: number,
|
||||
redirect?: boolean,
|
||||
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
|
||||
const sanitizedFileName = `${sanitizeFileName(basename(vslug, '.mp4'))}.mp4`;
|
||||
const realVIndex = videos.findIndex(
|
||||
(video: VideoEntry) => video.fileName === sanitizedFileName,
|
||||
(video: VideoEntry) => video.downloadFileName === sanitizedFileName,
|
||||
);
|
||||
if (realVIndex >= 0) {
|
||||
const video = videos[realVIndex];
|
||||
|
|
@ -165,7 +166,7 @@ const getProps = withSession(async (req, _res, { id, vslug }: VideoPlayerPagePar
|
|||
}
|
||||
|
||||
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
|
||||
|
|
@ -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,
|
||||
res,
|
||||
params,
|
||||
|
|
@ -230,13 +231,28 @@ export default function VideoPlayerPage({
|
|||
|
||||
const playerRef = React.useRef<VideoPlayer>();
|
||||
|
||||
if (typeof video === 'number') {
|
||||
throw new Error('Logic error - video should not be a number');
|
||||
}
|
||||
|
||||
const {
|
||||
fileName,
|
||||
downloadFileName,
|
||||
title: videoTitle,
|
||||
sourceVideoID,
|
||||
sourceVideoURL,
|
||||
sourceVideoStart,
|
||||
sourceVideoStart: sourceVideoStartStr,
|
||||
run,
|
||||
youtubeVideoID,
|
||||
} = 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;
|
||||
const [currentVolume, trackCurrentVolume] = React.useState(volume);
|
||||
async function onVolumeChange() {
|
||||
|
|
@ -254,10 +270,147 @@ export default function VideoPlayerPage({
|
|||
}
|
||||
}
|
||||
|
||||
const twitchEmbedURL = new URL("https://player.twitch.tv");
|
||||
twitchEmbedURL.searchParams.append('video', sourceVideoURL.split('/').pop());
|
||||
const tabs: Array<React.ReactElement<typeof Tab>> = [];
|
||||
let defaultTab = 'mirror-player';
|
||||
const downloadButtons: Array<React.ReactElement> = [];
|
||||
|
||||
// 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`)
|
||||
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 (
|
||||
<div>
|
||||
|
|
@ -299,97 +452,27 @@ export default function VideoPlayerPage({
|
|||
</Breadcrumb>
|
||||
|
||||
<Tabs
|
||||
defaultActiveKey="twitch-player"
|
||||
unmountOnExit={true}
|
||||
defaultActiveKey={defaultTab}
|
||||
unmountOnExit
|
||||
>
|
||||
<Tab
|
||||
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}
|
||||
:
|
||||
{' '}
|
||||
{videoTitle}
|
||||
</h1>
|
||||
|
||||
<h3 className="mb-3">
|
||||
{run?.category}
|
||||
</h3>
|
||||
|
||||
<Row className="mb-3">
|
||||
<Col sm={12} md={7}>
|
||||
<ButtonGroup>
|
||||
{/* <DownloadButton id={id} fileName={fileName} /> */}
|
||||
{
|
||||
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>
|
||||
)
|
||||
: (
|
||||
''
|
||||
)
|
||||
}
|
||||
{downloadButtons}
|
||||
</ButtonGroup>
|
||||
</Col>
|
||||
<Col sm={12} md={5}>
|
||||
|
|
@ -398,6 +481,6 @@ export default function VideoPlayerPage({
|
|||
</CopyField>
|
||||
</Col>
|
||||
</Row>
|
||||
</div >
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,11 +28,17 @@ import {
|
|||
faHourglass,
|
||||
faLanguage,
|
||||
faLightbulb,
|
||||
faRunning,
|
||||
faSearch,
|
||||
faShare,
|
||||
} from '@fortawesome/free-solid-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 Container from 'react-bootstrap/Container';
|
||||
|
|
@ -52,7 +58,7 @@ import 'nprogress/nprogress.css';
|
|||
import '../styles/main.scss';
|
||||
import Image from 'react-bootstrap/Image';
|
||||
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 HomeStyle from '../styles/Home.module.css';
|
||||
import DarkToggler from '../components/DarkToggler';
|
||||
|
|
@ -68,7 +74,10 @@ import withSession from '../util/session';
|
|||
fontawesomeSvgCoreConfig.autoAddCss = false;
|
||||
|
||||
library.add(
|
||||
fabFacebook,
|
||||
fabTwitch,
|
||||
fabTwitter,
|
||||
fabYoutube,
|
||||
faClock,
|
||||
faCopy,
|
||||
faDownload,
|
||||
|
|
@ -76,6 +85,7 @@ library.add(
|
|||
faLanguage,
|
||||
faLightbulb,
|
||||
farLightbulb,
|
||||
faRunning,
|
||||
faSearch,
|
||||
faShare,
|
||||
);
|
||||
|
|
@ -219,9 +229,9 @@ function GDQArchiveApp({
|
|||
|
||||
React.useEffect(() => {
|
||||
if (enableDarkMode) {
|
||||
document.documentElement.setAttribute('data-enable-dark', 'true');
|
||||
document.documentElement.setAttribute('data-bs-color-scheme', 'dark');
|
||||
} else {
|
||||
document.documentElement.removeAttribute('data-enable-dark');
|
||||
document.documentElement.removeAttribute('data-bs-color-scheme');
|
||||
}
|
||||
document.documentElement.setAttribute('lang', currentLocale);
|
||||
});
|
||||
|
|
@ -240,25 +250,46 @@ function GDQArchiveApp({
|
|||
locale={currentLocale}
|
||||
defaultLocale={defaultLocale}
|
||||
>
|
||||
<Navbar bg="dark" variant="dark">
|
||||
<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,
|
||||
// HomeStyle.logo,
|
||||
'd-inline-block',
|
||||
'align-middle',
|
||||
// 'align-middle',
|
||||
'align-top',
|
||||
].join(' ')}
|
||||
/>
|
||||
{' '}
|
||||
<FormattedMessage
|
||||
/>{' '}<FormattedMessage
|
||||
id="Navbar.brandText"
|
||||
defaultMessage="Instant Archive"
|
||||
/>
|
||||
</Navbar.Brand>
|
||||
</Link>
|
||||
{/* <Navbar.Text>
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item>
|
||||
<Link passHref href="/">
|
||||
<FormattedMessage
|
||||
id="Breadcrumb.homeTitle"
|
||||
defaultMessage="GDQ Instant Archive"
|
||||
description="Root node text in breadcrumb"
|
||||
/>
|
||||
</Link>
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>
|
||||
<FormattedMessage
|
||||
id="Breadcrumb.homeTitle"
|
||||
defaultMessage="GDQ Instant Archive"
|
||||
description="Root node text in breadcrumb"
|
||||
/>
|
||||
</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
</Navbar.Text> */}
|
||||
<Navbar.Toggle aria-controls="basic-navbar-nav" />
|
||||
<Navbar.Collapse
|
||||
id="basic-navbar-nav"
|
||||
|
|
@ -279,11 +310,12 @@ function GDQArchiveApp({
|
|||
/>
|
||||
</ButtonGroup>
|
||||
</Navbar.Collapse>
|
||||
</Container>
|
||||
</Navbar>
|
||||
<Head>
|
||||
<link rel="icon" type="image/svg+xml" href={favicon} />
|
||||
</Head>
|
||||
<Container>
|
||||
<Container className="mt-3">
|
||||
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
|
||||
<Component {...pageProps} />
|
||||
</Container>
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ class GDQArchiveDocument extends Document<{
|
|||
}}
|
||||
>
|
||||
<IntlProvider messages={messages} locale={locale} defaultLocale={defaultLocale}>
|
||||
<Html lang={locale} data-enable-dark={enableDark}>
|
||||
<Html lang={locale} data-bs-color-scheme={enableDark}>
|
||||
<Head />
|
||||
<body>
|
||||
<Main />
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -21,26 +21,22 @@ import Head from 'next/head';
|
|||
import Link from 'next/link';
|
||||
|
||||
import ListGroup from 'react-bootstrap/ListGroup';
|
||||
import { Breadcrumb } from 'react-bootstrap';
|
||||
import { useIntl } from 'react-intl';
|
||||
import { GetServerSideProps, NextPage } from 'next';
|
||||
import { FormattedMessage } from '../components/localization';
|
||||
import { VideoOnDemandIndex } from '../util/datatypes/VideoOnDemandIdentifier';
|
||||
import { getIndex } from '../util/api';
|
||||
import { GetServerSideProps, NextPage } from 'next';
|
||||
|
||||
interface HomeProps {
|
||||
index: VideoOnDemandIndex
|
||||
}
|
||||
|
||||
export const getServerSideProps: GetServerSideProps<HomeProps> = async () => {
|
||||
// Fetch VOD IDs and announcements
|
||||
return {
|
||||
export const getServerSideProps: GetServerSideProps<HomeProps> = async () => ({
|
||||
props: {
|
||||
// Fetch VOD IDs and announcements
|
||||
index: await getIndex(),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
const Home: NextPage<HomeProps> = ({ index: { announcements, ids } }) => {
|
||||
const intl = useIntl();
|
||||
return (
|
||||
|
|
@ -54,9 +50,10 @@ const Home: NextPage<HomeProps> = ({ index: { announcements, ids } }) => {
|
|||
})}
|
||||
</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="color-scheme" content="light dark" />
|
||||
</Head>
|
||||
|
||||
<Breadcrumb>
|
||||
{/* <Breadcrumb>
|
||||
<Link passHref href="/">
|
||||
<Breadcrumb.Item active>
|
||||
<FormattedMessage
|
||||
|
|
@ -66,7 +63,7 @@ const Home: NextPage<HomeProps> = ({ index: { announcements, ids } }) => {
|
|||
/>
|
||||
</Breadcrumb.Item>
|
||||
</Link>
|
||||
</Breadcrumb>
|
||||
</Breadcrumb> */}
|
||||
|
||||
<h1>
|
||||
<FormattedMessage
|
||||
|
|
@ -84,23 +81,26 @@ const Home: NextPage<HomeProps> = ({ index: { announcements, ids } }) => {
|
|||
|
||||
{
|
||||
announcements.map((text, id) => (
|
||||
// eslint-disable-next-line react/no-array-index-key
|
||||
<p key={id}>
|
||||
<b>Announcement:</b> {text}
|
||||
<b>Announcement:</b>
|
||||
{' '}
|
||||
{text}
|
||||
</p>
|
||||
))
|
||||
}
|
||||
|
||||
<ListGroup>
|
||||
{ids.map(({ id, title }) => (
|
||||
{ids.map(({ id, longTitle }) => (
|
||||
<Link key={id} passHref href="/[id]" as={`/${id}`}>
|
||||
<ListGroup.Item action>
|
||||
<h5>{title}</h5>
|
||||
<h5>{longTitle}</h5>
|
||||
</ListGroup.Item>
|
||||
</Link>
|
||||
))}
|
||||
</ListGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default Home;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -21,91 +21,103 @@
|
|||
|
||||
@import "~bootstrap/scss/functions";
|
||||
@import "~bootstrap/scss/variables";
|
||||
@import "~bootstrap-dark-5/scss/variables-alt";
|
||||
@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"]) {
|
||||
@import "~bootstrap/scss/root";
|
||||
@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';
|
||||
:root {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
// 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
|
||||
*/
|
||||
|
||||
html[data-enable-dark="true"] {
|
||||
@import "~@forevolve/bootstrap-dark/scss/dark-variables";
|
||||
@import "~bootstrap/scss/root";
|
||||
@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 '~@forevolve/bootstrap-dark/scss/dark-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 "~@forevolve/bootstrap-dark/scss/dark-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';
|
||||
@import "~@forevolve/bootstrap-dark/scss/dark-styles";
|
||||
@include color-scheme-alt('[data-bs-color-scheme="dark"]') {
|
||||
@import "~bootstrap-dark-5/scss/dark/root";
|
||||
@import "~bootstrap-dark-5/scss/dark/reboot";
|
||||
@import "~bootstrap-dark-5/scss/dark/type";
|
||||
@import "~bootstrap-dark-5/scss/dark/images";
|
||||
// no colors in containers
|
||||
// no colors in grid
|
||||
// @import '~bootstrap-dark-5/scss/dark/tables';
|
||||
@import "~bootstrap-dark-5/scss/dark/forms";
|
||||
@import "~bootstrap-dark-5/scss/dark/buttons";
|
||||
// no colors in transitions
|
||||
@import "~bootstrap-dark-5/scss/dark/dropdown";
|
||||
@import "~bootstrap-dark-5/scss/dark/button-group";
|
||||
@import "~bootstrap-dark-5/scss/dark/nav";
|
||||
@import "~bootstrap-dark-5/scss/dark/navbar";
|
||||
// @import '~bootstrap-dark-5/scss/dark/card';
|
||||
// @import '~bootstrap-dark-5/scss/dark/accordion';
|
||||
@import "~bootstrap-dark-5/scss/dark/breadcrumb";
|
||||
// @import '~bootstrap-dark-5/scss/dark/pagination';
|
||||
// @import '~bootstrap-dark-5/scss/dark/badge';
|
||||
// @import '~bootstrap-dark-5/scss/dark/alert';
|
||||
// @import '~bootstrap-dark-5/scss/dark/progress';
|
||||
@import "~bootstrap-dark-5/scss/dark/list-group";
|
||||
@import "~bootstrap-dark-5/scss/dark/close";
|
||||
// @import '~bootstrap-dark-5/scss/dark/toasts';
|
||||
// @import '~bootstrap-dark-5/scss/dark/modal';
|
||||
@import "~bootstrap-dark-5/scss/dark/tooltip";
|
||||
@import "~bootstrap-dark-5/scss/dark/popover";
|
||||
// @import '~bootstrap-dark-5/scss/dark/carousel';
|
||||
@import "~bootstrap-dark-5/scss/dark/offcanvas";
|
||||
@import "~bootstrap-dark-5/scss/dark/placeholders";
|
||||
@import "~bootstrap-dark-5/scss/dark/helpers";
|
||||
@import "~bootstrap-dark-5/scss/dark/utilities/api";
|
||||
@import "~bootstrap-dark-5/scss/dark/dark";
|
||||
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
border-top: 0 !important;
|
||||
// HACK - fix use of unset variables
|
||||
:root {
|
||||
--bs-body-bg-alt: #{$body-bg-alt};
|
||||
--bs-body-color-alt: #{$body-color-alt};
|
||||
}
|
||||
|
||||
@import "~bootstrap-dark-5/scss/dark/utilities/api-all";
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
|
||||
@import "~video.js/src/css/video-js";
|
||||
@import "bootstrap";
|
||||
@import "variables";
|
||||
|
||||
$colorTransitionFunction: ease-out;
|
||||
$colorTransitionDuration: 1s;
|
||||
|
|
@ -28,8 +29,6 @@ html[data-toggled-dark="true"] * {
|
|||
}
|
||||
|
||||
html {
|
||||
$twitch-color: rgb(145, 71, 255);
|
||||
|
||||
.btn {
|
||||
&.btn-twitch {
|
||||
@include button-variant($twitch-color, $twitch-color);
|
||||
|
|
@ -38,5 +37,13 @@ html {
|
|||
&.btn-outline-twitch {
|
||||
@include button-outline-variant($twitch-color);
|
||||
}
|
||||
|
||||
&.btn-youtube {
|
||||
@include button-variant($youtube-color, $youtube-color);
|
||||
}
|
||||
|
||||
&.btn-outline-youtube {
|
||||
@include button-outline-variant($youtube-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,9 @@
|
|||
* 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 { VideoOnDemandIndex } from './datatypes/VideoOnDemandIdentifier';
|
||||
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 apiDirectURL = process.env.API_DIRECT_URL || `${upstreamDirectURL}/api`;
|
||||
|
||||
// TODO - where did the hourglass image go?
|
||||
const hourglassImage: string = null;
|
||||
|
||||
export class HTTPError extends Error {
|
||||
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) {
|
||||
return fetchJson(`${apiDirectURL}/${relativeURL}`);
|
||||
}
|
||||
|
|
@ -73,6 +108,10 @@ export async function getIndex(): Promise<VideoOnDemandIndex> {
|
|||
return getDirect('index.json');
|
||||
}
|
||||
|
||||
export async function getRunners(): Promise<RunnerList> {
|
||||
return getDirect('runners.json');
|
||||
}
|
||||
|
||||
export async function getVideos(id: string): Promise<VideoList> {
|
||||
const result: VideoList = await getDirect(`videos/${id}.json`);
|
||||
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
|
||||
: sanitizeTitle(title + (
|
||||
all.find(v => v.title === title)
|
||||
? ` ${all.filter(v => v.title === title).length + 1}`
|
||||
all.find((v) => v.title === title)
|
||||
? ` ${all.filter((v) => v.title === title).length + 1}`
|
||||
: ''
|
||||
)),
|
||||
},
|
||||
], [])
|
||||
], []);
|
||||
return result;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>;
|
||||
|
|
@ -15,17 +15,49 @@
|
|||
* 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 {
|
||||
fileName:string
|
||||
title: string
|
||||
downloadFileName: string,
|
||||
title: string,
|
||||
run?: RunInformation,
|
||||
runners?: Array<string>,
|
||||
hosts?: Array<string>,
|
||||
duration?: number | string,
|
||||
slug: string,
|
||||
sourceVideoURL: string
|
||||
sourceVideoStart: number | string
|
||||
sourceVideoEnd: number | string
|
||||
sourceVideoID: string,
|
||||
sourceVideoURL: string,
|
||||
sourceVideoStart: number | string,
|
||||
sourceVideoEnd: number | string,
|
||||
youtubeVideoID?: string,
|
||||
thumbnails: Thumbnails,
|
||||
youtubeVideoURL?: string,
|
||||
}
|
||||
|
||||
export interface VideoList {
|
||||
lastUpdatedAt: string
|
||||
lastUpdatedAt: string,
|
||||
videos: Array<VideoEntry>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,8 +16,9 @@
|
|||
*/
|
||||
|
||||
export interface VideoOnDemandIdentifier {
|
||||
id: string
|
||||
title: string
|
||||
id: string;
|
||||
title: string;
|
||||
longTitle: string;
|
||||
}
|
||||
|
||||
export interface VideoOnDemandIndex {
|
||||
|
|
|
|||
|
|
@ -15,43 +15,6 @@
|
|||
* 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(
|
||||
hlsServerURL: string,
|
||||
id: string,
|
||||
|
|
@ -86,3 +49,4 @@ export * as api from './api';
|
|||
export * as localization from './localization';
|
||||
export * as session from './session';
|
||||
export * as status from './status';
|
||||
export * as thumbnail from './thumbnail';
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
* 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()) {
|
||||
case '':
|
||||
case '0':
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
11240
frontend/yarn.lock
11240
frontend/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue