Compare commits
1 Commits
new-fronte
...
master
| Author | SHA1 | Date |
|---|---|---|
 Icedream
|
c3fd2735da
|
|
|
@ -67,12 +67,7 @@ server {
|
||||||
root /htdocs;
|
root /htdocs;
|
||||||
|
|
||||||
location / {
|
location / {
|
||||||
# https://thumb-gdq-a.edge.streaminginter.net/agdq2022vods/073_GeoGuessr.mp4/thumb-90000-w288.jpg
|
vod thumb;
|
||||||
# => 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;
|
||||||
|
|
|
||||||
|
|
@ -23,24 +23,23 @@ import Button from 'react-bootstrap/Button';
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||||
import { Overlay, Tooltip } from 'react-bootstrap';
|
import { Overlay, Tooltip } from 'react-bootstrap';
|
||||||
import type { IconProp } from '@fortawesome/fontawesome-svg-core';
|
import type { IconProp } from '@fortawesome/fontawesome-svg-core';
|
||||||
import { faCopy, faShare } from '@fortawesome/free-solid-svg-icons';
|
|
||||||
import { FormattedMessage } from './localization';
|
import { FormattedMessage } from './localization';
|
||||||
|
|
||||||
function CopyField({
|
const CopyField = ({
|
||||||
children,
|
children,
|
||||||
copyIcon,
|
copyIcon = 'copy',
|
||||||
icon,
|
icon = null,
|
||||||
}: {
|
}: {
|
||||||
children: string,
|
children: string,
|
||||||
copyIcon?: IconProp,
|
copyIcon?: IconProp,
|
||||||
icon?: IconProp,
|
icon?: IconProp,
|
||||||
}) {
|
}) => {
|
||||||
const [show, setShow] = useState(false);
|
const [show, setShow] = useState(false);
|
||||||
const target = useRef(null);
|
const target = useRef(null);
|
||||||
const textbox = useRef(null);
|
const textbox = useRef(null);
|
||||||
let timer: NodeJS.Timeout = null;
|
let timer: NodeJS.Timeout = null;
|
||||||
|
|
||||||
const doCopy = () => {
|
function doCopy() {
|
||||||
if (timer !== null) {
|
if (timer !== null) {
|
||||||
clearTimeout(timer);
|
clearTimeout(timer);
|
||||||
}
|
}
|
||||||
|
|
@ -53,42 +52,41 @@ function CopyField({
|
||||||
setShow(false);
|
setShow(false);
|
||||||
}, 3000);
|
}, 3000);
|
||||||
return false;
|
return false;
|
||||||
};
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<InputGroup>
|
<InputGroup>
|
||||||
{
|
{
|
||||||
icon
|
icon
|
||||||
? (
|
? (
|
||||||
<InputGroup.Text>
|
<InputGroup.Prepend>
|
||||||
<FontAwesomeIcon icon={faShare} />
|
<InputGroup.Text>
|
||||||
</InputGroup.Text>
|
<FontAwesomeIcon icon="share" />
|
||||||
|
</InputGroup.Text>
|
||||||
|
</InputGroup.Prepend>
|
||||||
)
|
)
|
||||||
: ''
|
: ''
|
||||||
}
|
}
|
||||||
<FormControl ref={textbox} readOnly value={children} />
|
<FormControl ref={textbox} readOnly value={children} />
|
||||||
<Button ref={target} onClick={doCopy}>
|
<InputGroup.Append>
|
||||||
<FontAwesomeIcon icon={copyIcon} />
|
<Button ref={target} onClick={doCopy}>
|
||||||
<Overlay target={target.current} show={show} placement="top">
|
<FontAwesomeIcon icon={copyIcon} />
|
||||||
{(props) => (
|
<Overlay target={target.current} show={show} placement="top">
|
||||||
// eslint-disable-next-line react/jsx-props-no-spreading
|
{(props) => (
|
||||||
<Tooltip id="overlay-copy" {...props}>
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
||||||
<FormattedMessage
|
<Tooltip id="overlay-copy" {...props}>
|
||||||
id="CopyField.copied"
|
<FormattedMessage
|
||||||
defaultMessage="Copied!"
|
id="CopyField.copied"
|
||||||
description="Tooltip shown when user clicks the Copy button."
|
defaultMessage="Copied!"
|
||||||
/>
|
description="Tooltip shown when user clicks the Copy button."
|
||||||
</Tooltip>
|
/>
|
||||||
)}
|
</Tooltip>
|
||||||
</Overlay>
|
)}
|
||||||
</Button>
|
</Overlay>
|
||||||
|
</Button>
|
||||||
|
</InputGroup.Append>
|
||||||
</InputGroup>
|
</InputGroup>
|
||||||
);
|
);
|
||||||
}
|
|
||||||
|
|
||||||
CopyField.defaultProps = {
|
|
||||||
copyIcon: faCopy,
|
|
||||||
icon: null,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default CopyField;
|
export default CopyField;
|
||||||
|
|
|
||||||
|
|
@ -22,14 +22,13 @@ import {
|
||||||
Button,
|
Button,
|
||||||
// Spinner
|
// Spinner
|
||||||
} from 'react-bootstrap';
|
} from 'react-bootstrap';
|
||||||
import { faLightbulb } from '@fortawesome/free-solid-svg-icons';
|
|
||||||
import { FormattedMessage } from './localization';
|
import { FormattedMessage } from './localization';
|
||||||
|
|
||||||
export default function DarkToggler({
|
export default function DarkToggler({
|
||||||
isDarkEnabled,
|
isDarkEnabled = false,
|
||||||
onChangeDarkMode,
|
onChangeDarkMode = null,
|
||||||
disabled,
|
disabled = false,
|
||||||
showLoading,
|
showLoading = false,
|
||||||
}: {
|
}: {
|
||||||
isDarkEnabled?: boolean,
|
isDarkEnabled?: boolean,
|
||||||
onChangeDarkMode?: (value: boolean) => void,
|
onChangeDarkMode?: (value: boolean) => void,
|
||||||
|
|
@ -45,7 +44,7 @@ export default function DarkToggler({
|
||||||
variant="outline-secondary"
|
variant="outline-secondary"
|
||||||
active={!isDarkEnabled}
|
active={!isDarkEnabled}
|
||||||
>
|
>
|
||||||
<FontAwesomeIcon icon={faLightbulb} />
|
<FontAwesomeIcon icon={[isDarkEnabled ? 'far' : 'fas', 'lightbulb']} />
|
||||||
<span className="sr-only">
|
<span className="sr-only">
|
||||||
<FormattedMessage
|
<FormattedMessage
|
||||||
id="DarkToggler.screenReaderText"
|
id="DarkToggler.screenReaderText"
|
||||||
|
|
@ -56,10 +55,3 @@ export default function DarkToggler({
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
DarkToggler.defaultProps = {
|
|
||||||
isDarkEnabled: false,
|
|
||||||
onChangeDarkMode: null,
|
|
||||||
disabled: false,
|
|
||||||
showLoading: false,
|
|
||||||
};
|
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,6 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { IconProp } from '@fortawesome/fontawesome-svg-core';
|
import { IconProp } from '@fortawesome/fontawesome-svg-core';
|
||||||
import { faDownload } from '@fortawesome/free-solid-svg-icons';
|
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Button } from 'react-bootstrap';
|
import { Button } from 'react-bootstrap';
|
||||||
|
|
@ -24,7 +23,7 @@ import { getDownloadURL } from 'util/api';
|
||||||
import { FormattedMessage } from './localization';
|
import { FormattedMessage } from './localization';
|
||||||
|
|
||||||
export default function DownloadButton({
|
export default function DownloadButton({
|
||||||
icon,
|
icon = 'download',
|
||||||
id,
|
id,
|
||||||
fileName,
|
fileName,
|
||||||
}: {
|
}: {
|
||||||
|
|
@ -35,7 +34,6 @@ export default function DownloadButton({
|
||||||
return (
|
return (
|
||||||
<Button variant="success" href={getDownloadURL(id, fileName)}>
|
<Button variant="success" href={getDownloadURL(id, fileName)}>
|
||||||
<FontAwesomeIcon icon={icon} className="mr-2" />
|
<FontAwesomeIcon icon={icon} className="mr-2" />
|
||||||
{' '}
|
|
||||||
<FormattedMessage
|
<FormattedMessage
|
||||||
id="DownloadButton.download"
|
id="DownloadButton.download"
|
||||||
defaultMessage="Download"
|
defaultMessage="Download"
|
||||||
|
|
@ -44,7 +42,3 @@ export default function DownloadButton({
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
DownloadButton.defaultProps = {
|
|
||||||
icon: faDownload,
|
|
||||||
};
|
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,7 @@ import React from 'react';
|
||||||
export default function Filter<T, U extends React.ReactNode>({
|
export default function Filter<T, U extends React.ReactNode>({
|
||||||
items,
|
items,
|
||||||
query = '',
|
query = '',
|
||||||
isCaseSensitive,
|
isCaseSensitive = false,
|
||||||
keys,
|
keys,
|
||||||
output,
|
output,
|
||||||
}: {
|
}: {
|
||||||
|
|
@ -50,7 +50,3 @@ export default function Filter<T, U extends React.ReactNode>({
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
Filter.defaultProps = {
|
|
||||||
isCaseSensitive: false,
|
|
||||||
};
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,107 @@
|
||||||
|
/**
|
||||||
|
* Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw>
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU Affero General Public License as
|
||||||
|
* published by the Free Software Foundation, either version 3 of the
|
||||||
|
* License, or (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU Affero General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU Affero General Public License
|
||||||
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, { useEffect } from 'react';
|
||||||
|
// import useSWR from 'swr';
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
// Spinner
|
||||||
|
} from 'react-bootstrap';
|
||||||
|
import useSWR from 'swr';
|
||||||
|
import { FormattedMessage } from 'react-intl';
|
||||||
|
import { fetchJson } from '../util/api';
|
||||||
|
|
||||||
|
let darkToggleAnimationTimer = null;
|
||||||
|
|
||||||
|
function triggerDarkToggleAnimation() {
|
||||||
|
document.documentElement.setAttribute('data-toggled-dark', 'true');
|
||||||
|
if (darkToggleAnimationTimer !== null) {
|
||||||
|
clearTimeout(darkToggleAnimationTimer);
|
||||||
|
}
|
||||||
|
darkToggleAnimationTimer = setTimeout(() => {
|
||||||
|
document.documentElement.removeAttribute('data-toggled-dark');
|
||||||
|
}, 1200);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function DarkToggler() {
|
||||||
|
const {
|
||||||
|
data, error, isValidating, mutate,
|
||||||
|
} = useSWR('/api/user');
|
||||||
|
|
||||||
|
let enableDark = false;
|
||||||
|
let isLoading = false;
|
||||||
|
|
||||||
|
if (isValidating || !data) {
|
||||||
|
isLoading = true;
|
||||||
|
}
|
||||||
|
if (error) {
|
||||||
|
console.warn(error);
|
||||||
|
isLoading = false;
|
||||||
|
} else if (data) {
|
||||||
|
enableDark = data.enableDark;
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isLoading) {
|
||||||
|
console.info('enable dark:', enableDark);
|
||||||
|
if (enableDark) {
|
||||||
|
document.documentElement.setAttribute('data-enable-dark', 'true');
|
||||||
|
} else {
|
||||||
|
document.documentElement.removeAttribute('data-enable-dark');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
onClick={async () => {
|
||||||
|
const { enableDark: newEnableDark } = await fetchJson('/api/toggleDark');
|
||||||
|
triggerDarkToggleAnimation();
|
||||||
|
mutate({ enableDark: newEnableDark }, true);
|
||||||
|
}}
|
||||||
|
disabled={isLoading}
|
||||||
|
variant="outline-secondary"
|
||||||
|
active={!enableDark}
|
||||||
|
>
|
||||||
|
{/*
|
||||||
|
isLoading
|
||||||
|
? (
|
||||||
|
<Spinner animation="border" role="status" size="sm">
|
||||||
|
<span className="sr-only">
|
||||||
|
<FormattedMessage
|
||||||
|
id="DarkToggler.loading"
|
||||||
|
defaultMessage="Loading…"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</Spinner>
|
||||||
|
)
|
||||||
|
: ''
|
||||||
|
*/}
|
||||||
|
<FontAwesomeIcon icon={[enableDark ? 'far' : 'fa', 'lightbulb']} />
|
||||||
|
<span className="sr-only">
|
||||||
|
<FormattedMessage
|
||||||
|
id="DarkToggler.screenReaderText"
|
||||||
|
defaultMessage="Toggle dark mode"
|
||||||
|
description="Screen reader description of the dark mode toggle button"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -20,15 +20,14 @@ import React from 'react';
|
||||||
import {
|
import {
|
||||||
ButtonGroup, Dropdown, DropdownButton,
|
ButtonGroup, Dropdown, DropdownButton,
|
||||||
} from 'react-bootstrap';
|
} from 'react-bootstrap';
|
||||||
import { faLanguage } from '@fortawesome/free-solid-svg-icons';
|
|
||||||
import { FormattedMessage } from './localization';
|
import { FormattedMessage } from './localization';
|
||||||
import { availableLocales, defaultLocale, localeDescriptions } from '../util/localization';
|
import { availableLocales, defaultLocale, localeDescriptions } from '../util/localization';
|
||||||
|
|
||||||
export default function LocaleSwitcher({
|
export default function LocaleSwitcher({
|
||||||
locale,
|
locale = defaultLocale,
|
||||||
onChangeLocale,
|
onChangeLocale = null,
|
||||||
disabled,
|
disabled = false,
|
||||||
showLoading,
|
showLoading = false,
|
||||||
}: {
|
}: {
|
||||||
locale?: string,
|
locale?: string,
|
||||||
onChangeLocale?: (value: string) => void,
|
onChangeLocale?: (value: string) => void,
|
||||||
|
|
@ -40,11 +39,11 @@ export default function LocaleSwitcher({
|
||||||
disabled={showLoading || disabled}
|
disabled={showLoading || disabled}
|
||||||
as={ButtonGroup}
|
as={ButtonGroup}
|
||||||
variant="outline-secondary"
|
variant="outline-secondary"
|
||||||
align="end"
|
alignRight
|
||||||
id="dropdown-locale"
|
id="dropdown-locale"
|
||||||
title={(
|
title={(
|
||||||
<>
|
<>
|
||||||
<FontAwesomeIcon icon={faLanguage} />
|
<FontAwesomeIcon icon="language" />
|
||||||
<span className="sr-only">
|
<span className="sr-only">
|
||||||
<FormattedMessage
|
<FormattedMessage
|
||||||
id="LocaleSwitcher.screenReaderText"
|
id="LocaleSwitcher.screenReaderText"
|
||||||
|
|
@ -77,10 +76,3 @@ export default function LocaleSwitcher({
|
||||||
</DropdownButton>
|
</DropdownButton>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
LocaleSwitcher.defaultProps = {
|
|
||||||
locale: defaultLocale,
|
|
||||||
onChangeLocale: null,
|
|
||||||
disabled: false,
|
|
||||||
showLoading: false,
|
|
||||||
};
|
|
||||||
|
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
/**
|
|
||||||
* Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw>
|
|
||||||
*
|
|
||||||
* This program is free software: you can redistribute it and/or modify
|
|
||||||
* it under the terms of the GNU Affero General Public License as
|
|
||||||
* published by the Free Software Foundation, either version 3 of the
|
|
||||||
* License, or (at your option) any later version.
|
|
||||||
*
|
|
||||||
* This program is distributed in the hope that it will be useful,
|
|
||||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
||||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
||||||
* GNU Affero General Public License for more details.
|
|
||||||
*
|
|
||||||
* You should have received a copy of the GNU Affero General Public License
|
|
||||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
||||||
*/
|
|
||||||
|
|
||||||
@import "../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%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
import {
|
|
||||||
faFacebook, faTwitch, faTwitter, faYoutube,
|
|
||||||
} from '@fortawesome/free-brands-svg-icons';
|
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
||||||
import * as React from 'react';
|
|
||||||
import { RunnerInformation } from 'util/datatypes/RunnerList';
|
|
||||||
|
|
||||||
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={faTwitch} className={['mr-1', style.twitch].join(' ')} />
|
|
||||||
</a>
|
|
||||||
) : ''}
|
|
||||||
{runner.platform === 'FACEBOOK' && runner.stream.length > 0 ? (
|
|
||||||
<a href={runner.stream}>
|
|
||||||
<FontAwesomeIcon icon={faFacebook} className={['mr-1', style.facebook].join(' ')} />
|
|
||||||
</a>
|
|
||||||
) : ''}
|
|
||||||
{runner.platform === 'YOUTUBE' && runner.stream.length > 0 ? (
|
|
||||||
<a href={runner.stream}>
|
|
||||||
<FontAwesomeIcon icon={faYoutube} className={['mr-1', style.youtube].join(' ')} />
|
|
||||||
</a>
|
|
||||||
) : ''}
|
|
||||||
{runner.twitter && runner.twitter.length > 0 ? (
|
|
||||||
<a href={`https://twitter.com/${runner.twitter}`}>
|
|
||||||
<FontAwesomeIcon icon={faTwitter} className={['mr-1', style.twitter].join(' ')} />
|
|
||||||
</a>
|
|
||||||
) : ''}
|
|
||||||
{runner.youtube && runner.youtube.length > 0 ? (
|
|
||||||
<a href={`https://youtube.com/${runner.youtube}`}>
|
|
||||||
<FontAwesomeIcon icon={faYoutube} className={['mr-1', style.youtube].join(' ')} />
|
|
||||||
</a>
|
|
||||||
) : ''}
|
|
||||||
</sup>
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -23,8 +23,6 @@ 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 { faSearch } from '@fortawesome/free-solid-svg-icons';
|
|
||||||
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';
|
||||||
|
|
@ -34,7 +32,6 @@ interface VideoListProps {
|
||||||
id: string,
|
id: string,
|
||||||
thumbnailServerURL: string,
|
thumbnailServerURL: string,
|
||||||
videos: Array<VideoEntry>,
|
videos: Array<VideoEntry>,
|
||||||
runners: RunnerList,
|
|
||||||
}
|
}
|
||||||
|
|
||||||
interface VideoListState {
|
interface VideoListState {
|
||||||
|
|
@ -65,14 +62,15 @@ 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.Text id="search-prepend">
|
<InputGroup.Prepend>
|
||||||
<FontAwesomeIcon icon={faSearch} />
|
<InputGroup.Text id="search-prepend">
|
||||||
</InputGroup.Text>
|
<FontAwesomeIcon icon="search" />
|
||||||
|
</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' })}
|
||||||
|
|
@ -85,31 +83,28 @@ class VideoList extends React.Component<VideoListProps, VideoListState> {
|
||||||
<Filter
|
<Filter
|
||||||
items={videos}
|
items={videos}
|
||||||
query={query}
|
query={query}
|
||||||
keys={['title']}
|
keys={['title', 'fileName']}
|
||||||
output={(filteredVideos) => filteredVideos.map(({
|
output={(filteredVideos) => filteredVideos.map(({
|
||||||
item: {
|
item: {
|
||||||
duration,
|
duration,
|
||||||
|
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}
|
||||||
|
fileName={fileName}
|
||||||
slug={slug}
|
slug={slug}
|
||||||
title={title}
|
title={title}
|
||||||
sourceVideoStart={sourceVideoStart}
|
sourceVideoStart={sourceVideoStart}
|
||||||
sourceVideoEnd={sourceVideoEnd}
|
sourceVideoEnd={sourceVideoEnd}
|
||||||
thumbnails={thumbnails}
|
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -18,11 +18,10 @@
|
||||||
@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;
|
||||||
}
|
}
|
||||||
|
|
@ -30,27 +29,3 @@
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -15,50 +15,43 @@
|
||||||
* 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, { ReactElement } from 'react';
|
import React 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 { RunInformation, Thumbnails } from 'util/datatypes/VideoList';
|
import { getThumbnailURL } from '../util';
|
||||||
import { Runner as RunnerData, RunnerList } from 'util/datatypes/RunnerList';
|
|
||||||
import { Col, Row } from 'react-bootstrap';
|
|
||||||
import { faClock, faHourglass, faRunning } from '@fortawesome/free-solid-svg-icons';
|
|
||||||
import { getThumbnailURL } from '../util/thumbnail';
|
|
||||||
|
|
||||||
import FormattedDuration from './localization/FormattedDuration';
|
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) {
|
||||||
|
|
@ -87,81 +80,62 @@ export default function VideoListItem({
|
||||||
displayDuration = videoEnd - videoStart;
|
displayDuration = videoEnd - videoStart;
|
||||||
}
|
}
|
||||||
const listGroupItem = (
|
const listGroupItem = (
|
||||||
<ListGroup.Item>
|
<ListGroup.Item action>
|
||||||
<Row>
|
<Media>
|
||||||
<Col sm={3} xs={3}>
|
<Image
|
||||||
<Link href="/[id]/[vslug]" as={`/${id}/${slug}`}>
|
className={['mr-3', style.thumbnail].join(' ')}
|
||||||
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
src={
|
||||||
<Image
|
fileName
|
||||||
className={style.thumbnail}
|
? getThumbnailURL(thumbnailServerURL, id, fileName, 90 * 1000, {
|
||||||
src={
|
width: 96,
|
||||||
thumbnails.length > 0
|
})
|
||||||
? getThumbnailURL(thumbnailServerURL, id, thumbnails[0].fileName)
|
: hourglassImage
|
||||||
: hourglassImage
|
}
|
||||||
}
|
srcSet={[96, 96 * 2, 96 * 3]
|
||||||
srcSet={
|
.map((width) => [
|
||||||
Array.isArray(thumbnails) && thumbnails.length > 0
|
fileName
|
||||||
? thumbnails
|
? getThumbnailURL(thumbnailServerURL, id, fileName, 90 * 1000, {
|
||||||
.map(({
|
width,
|
||||||
sourceSize,
|
})
|
||||||
fileName,
|
: hourglassImage,
|
||||||
}) => (
|
`${width}w`,
|
||||||
[
|
])
|
||||||
thumbnails.length > 0
|
.map((item) => item.join(' '))
|
||||||
? getThumbnailURL(thumbnailServerURL, id, fileName)
|
.join(', ')}
|
||||||
: hourglassImage,
|
alt={title}
|
||||||
sourceSize,
|
/>
|
||||||
]
|
<Media.Body>
|
||||||
))
|
<h5 className="mt-0 mb-3">{title}</h5>
|
||||||
.map((item) => item.join(' '))
|
<p>
|
||||||
.join(', ')
|
{!fileName ? (
|
||||||
: ''
|
<span>
|
||||||
}
|
<FontAwesomeIcon icon="hourglass" />
|
||||||
alt={title}
|
{' '}
|
||||||
/>
|
Coming up
|
||||||
</Link>
|
</span>
|
||||||
</Col>
|
) : ''}
|
||||||
<Col sm={4} xs={9}>
|
{displayDuration !== null ? (
|
||||||
<Link href="/[id]/[vslug]" as={`/${id}/${slug}`} className="text-reset text-decoration-none">
|
<span>
|
||||||
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
<FontAwesomeIcon icon="clock" />
|
||||||
<div>
|
{' '}
|
||||||
<div className={style['run-name']}>{title}</div>
|
<FormattedDuration
|
||||||
<div className={[style['run-category'], 'mt-0'].join(' ')}>{runData?.category}</div>
|
seconds={displayDuration}
|
||||||
</div>
|
format="{hours} {minutes} {seconds}"
|
||||||
</Link>
|
unitDisplay="short"
|
||||||
</Col>
|
/>
|
||||||
<Col sm={5} xs={12}>
|
</span>
|
||||||
{runners && runners.length > 0 ? (
|
) : ''}
|
||||||
<div className="mr-2">
|
</p>
|
||||||
<FontAwesomeIcon icon={faRunning} />
|
</Media.Body>
|
||||||
{' '}
|
</Media>
|
||||||
{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={faClock} />
|
|
||||||
{' '}
|
|
||||||
<FormattedDuration
|
|
||||||
seconds={displayDuration}
|
|
||||||
format="{hours} {minutes} {seconds}"
|
|
||||||
unitDisplay="short"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<span className="mr-2 text-nowrap">
|
|
||||||
<FontAwesomeIcon icon={faHourglass} />
|
|
||||||
{' '}
|
|
||||||
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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -16,13 +16,13 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { Ratio } from 'react-bootstrap';
|
|
||||||
import videojs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js';
|
import videojs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js';
|
||||||
import 'videojs-errors';
|
import 'videojs-errors';
|
||||||
// TODO - localization
|
// TODO - localization
|
||||||
// import 'videojs-errors/dist/lang/de';
|
// import 'videojs-errors/dist/lang/de';
|
||||||
// import 'videojs-errors/dist/lang/en';
|
// import 'videojs-errors/dist/lang/en';
|
||||||
// import 'videojs-contrib-dash';
|
// import 'videojs-contrib-dash';
|
||||||
|
import { ResponsiveEmbed } from 'react-bootstrap';
|
||||||
|
|
||||||
export default class VideoPlayer extends React.Component<{
|
export default class VideoPlayer extends React.Component<{
|
||||||
onReady?: () => void,
|
onReady?: () => void,
|
||||||
|
|
@ -64,40 +64,44 @@ export default class VideoPlayer extends React.Component<{
|
||||||
...videoJsOptions
|
...videoJsOptions
|
||||||
} = this.props;
|
} = this.props;
|
||||||
return (
|
return (
|
||||||
<Ratio aspectRatio="16by9" data-vjs-player>
|
<ResponsiveEmbed aspectRatio="16by9">
|
||||||
{/* eslint-disable-next-line jsx-a11y/media-has-caption */}
|
<div>
|
||||||
<video
|
<div data-vjs-player>
|
||||||
ref={(node) => { this.videoNode = node; }}
|
{/* eslint-disable-next-line jsx-a11y/media-has-caption */}
|
||||||
className="video-js"
|
<video
|
||||||
data-setup={
|
ref={(node) => { this.videoNode = node; }}
|
||||||
JSON.stringify({
|
className="video-js"
|
||||||
autoplay,
|
data-setup={
|
||||||
controls,
|
JSON.stringify({
|
||||||
...videoJsOptions,
|
autoplay,
|
||||||
})
|
controls,
|
||||||
}
|
...videoJsOptions,
|
||||||
controls={controls}
|
})
|
||||||
autoPlay={!!(autoplay === 'true' || autoplay === true)}
|
}
|
||||||
>
|
controls={controls}
|
||||||
{sources.map(
|
autoPlay={!!(autoplay === 'true' || autoplay === true)}
|
||||||
({ src, type }) => (
|
>
|
||||||
<source
|
{sources.map(
|
||||||
key={`${JSON.stringify({ src, type })}`}
|
({ src, type }) => (
|
||||||
src={src}
|
<source
|
||||||
type={type}
|
key={`${JSON.stringify({ src, type })}`}
|
||||||
/>
|
src={src}
|
||||||
),
|
type={type}
|
||||||
)}
|
/>
|
||||||
<p className="vjs-no-js">
|
),
|
||||||
{/* TODO - localize */}
|
)}
|
||||||
To view this video please enable JavaScript, and consider upgrading to a
|
<p className="vjs-no-js">
|
||||||
web browser that
|
{/* TODO - localize */}
|
||||||
<a href="https://videojs.com/html5-video-support/" target="_blank" rel="noreferrer">
|
To view this video please enable JavaScript, and consider upgrading to a
|
||||||
supports HTML5 video
|
web browser that
|
||||||
</a>
|
<a href="https://videojs.com/html5-video-support/" target="_blank" rel="noreferrer">
|
||||||
</p>
|
supports HTML5 video
|
||||||
</video>
|
</a>
|
||||||
</Ratio>
|
</p>
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ResponsiveEmbed>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,8 @@
|
||||||
* 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 { Spinner } from 'react-bootstrap';
|
||||||
import { FormattedMessage } from 'react-intl';
|
import { FormattedMessage } from 'react-intl';
|
||||||
import WrapReactIntl from './WrapReactIntl';
|
import WrapReactIntl from './WrapReactIntl';
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,7 @@ import { Spinner } from 'react-bootstrap';
|
||||||
import { isPolyfillPhaseDone } from 'util/localization';
|
import { isPolyfillPhaseDone } from 'util/localization';
|
||||||
|
|
||||||
export default function WrapReactIntl<P>(Component: React.ComponentType<P>) {
|
export default function WrapReactIntl<P>(Component: React.ComponentType<P>) {
|
||||||
return function (props: P) {
|
return (props: P) => {
|
||||||
if (!isPolyfillPhaseDone()) {
|
if (!isPolyfillPhaseDone()) {
|
||||||
return (
|
return (
|
||||||
<Spinner
|
<Spinner
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,2 @@
|
||||||
/// <reference types="next" />
|
/// <reference types="next" />
|
||||||
/// <reference types="next/image-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.
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
/**
|
/**
|
||||||
* Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw>
|
* Copyright (C) 2019-2021 Carl Kittelberger <c.kittelberger@seidemann-web.com>
|
||||||
*
|
*
|
||||||
* 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
|
||||||
|
|
@ -15,12 +15,15 @@
|
||||||
* 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(
|
const withPlugins = require('next-compose-plugins');
|
||||||
thumbnailServerURL: string,
|
const optimizedImages = require('next-optimized-images');
|
||||||
id: string,
|
|
||||||
thumbnailFilePath: string,
|
|
||||||
) {
|
|
||||||
return `${thumbnailServerURL}/${encodeURIComponent(id)}/${thumbnailFilePath}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default undefined;
|
module.exports = withPlugins([
|
||||||
|
[optimizedImages, {
|
||||||
|
/* config for next-optimized-images */
|
||||||
|
inlineImageLimit: -1,
|
||||||
|
}],
|
||||||
|
|
||||||
|
// your other plugins here
|
||||||
|
|
||||||
|
]);
|
||||||
|
|
@ -1,53 +0,0 @@
|
||||||
// @ts-check
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw>
|
|
||||||
*
|
|
||||||
* This program is free software: you can redistribute it and/or modify
|
|
||||||
* it under the terms of the GNU Affero General Public License as
|
|
||||||
* published by the Free Software Foundation, either version 3 of the
|
|
||||||
* License, or (at your option) any later version.
|
|
||||||
*
|
|
||||||
* This program is distributed in the hope that it will be useful,
|
|
||||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
||||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
||||||
* GNU Affero General Public License for more details.
|
|
||||||
*
|
|
||||||
* You should have received a copy of the GNU Affero General Public License
|
|
||||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import withPlugins from 'next-compose-plugins';
|
|
||||||
// import optimizedImages from 'next-optimized-images';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @type {import('next').NextConfig}
|
|
||||||
*/
|
|
||||||
const nextConfig = {
|
|
||||||
reactStrictMode: false,
|
|
||||||
compiler: {
|
|
||||||
styledComponents: true,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
// const nextConfig = withPlugins(
|
|
||||||
// [
|
|
||||||
// /*[
|
|
||||||
// optimizedImages,
|
|
||||||
// {
|
|
||||||
// // config for next-optimized-images
|
|
||||||
// inlineImageLimit: -1,
|
|
||||||
// },
|
|
||||||
// ],*/
|
|
||||||
|
|
||||||
// // your other plugins here
|
|
||||||
// ],
|
|
||||||
// {
|
|
||||||
// /*images: {
|
|
||||||
// // This is set due to next-optimized-images, see // See https://github.com/cyrilwanner/next-optimized-images/issues/251#issuecomment-867250968
|
|
||||||
// disableStaticImages: true,
|
|
||||||
// },*/
|
|
||||||
// }
|
|
||||||
// );
|
|
||||||
|
|
||||||
export default nextConfig;
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
{
|
{
|
||||||
"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",
|
||||||
|
|
@ -14,67 +15,67 @@
|
||||||
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
|
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@formatjs/intl-numberformat": "^7.1.5",
|
"@forevolve/bootstrap-dark": "^1.0.0-alpha.1091",
|
||||||
"@formatjs/intl-utils": "^3.8.4",
|
"@formatjs/intl-numberformat": "^5.5.4",
|
||||||
"@fortawesome/fontawesome-free": "^6.2.1",
|
"@formatjs/intl-utils": "^3.8.3",
|
||||||
"@fortawesome/fontawesome-svg-core": "^6.2.1",
|
"@fortawesome/fontawesome-free": "^5.14.0",
|
||||||
"@fortawesome/free-brands-svg-icons": "^6.2.1",
|
"@fortawesome/fontawesome-svg-core": "^1.2.30",
|
||||||
"@fortawesome/free-regular-svg-icons": "^6.2.1",
|
"@fortawesome/free-brands-svg-icons": "^5.14.0",
|
||||||
"@fortawesome/free-solid-svg-icons": "^6.2.1",
|
"@fortawesome/free-regular-svg-icons": "^5.14.0",
|
||||||
"@fortawesome/react-fontawesome": "^0.2.0",
|
"@fortawesome/free-solid-svg-icons": "^5.14.0",
|
||||||
"@popperjs/core": "^2.9.2",
|
"@fortawesome/react-fontawesome": "^0.1.11",
|
||||||
"bootstrap": "5.1.x",
|
"bootstrap": "^4.5.2",
|
||||||
"bootstrap-dark-5": "1.1.0",
|
"cssnano": "^4.1.10",
|
||||||
"cssnano": "^5.0.6",
|
"file-loader": "^6.0.0",
|
||||||
"eslint-config-next": "^13.1.1",
|
"fuse.js": "^6.4.1",
|
||||||
"fuse.js": "^6.4.6",
|
"imagemin-optipng": "^8.0.0",
|
||||||
"imagemin-svgo": "^9.0.0",
|
"imagemin-svgo": "^8.0.0",
|
||||||
"intl-messageformat": ">= 2.0",
|
"intl-messageformat": ">= 5.1",
|
||||||
"next": "^13.1.1",
|
"intl-messageformat-parser": "^6.0.1",
|
||||||
"next-compose-plugins": "^2.2.1",
|
"jquery": "~3",
|
||||||
"next-iron-session": "^4.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",
|
||||||
"nprogress": "^0.2.0",
|
"nprogress": "^0.2.0",
|
||||||
"popper.js": "^1.16.1",
|
"popper.js": "^1.16.1",
|
||||||
"react": "^18.2.0",
|
"raw-loader": "^4.0.1",
|
||||||
"react-bootstrap": "^2.4.0",
|
"react": "16.13.1",
|
||||||
"react-dom": "^18.2.0",
|
"react-bootstrap": "^1.3.0",
|
||||||
"react-intl": "^6.2.5",
|
"react-dom": "16.13.1",
|
||||||
|
"react-intl": "^5.6.3",
|
||||||
"react-intl-formatted-duration": "^4.0.0",
|
"react-intl-formatted-duration": "^4.0.0",
|
||||||
"react-youtube": "^9.0.2",
|
"sass": "^1.26.10",
|
||||||
"sass": "^1.53.0",
|
"shaka-player": "^3.0.3",
|
||||||
"shaka-player": "^3.1.1",
|
"shaka-player-react": "^1.0.1",
|
||||||
"shaka-player-react": "^1.1.5",
|
"swr": "^0.3.0",
|
||||||
"sharp": "^0.31.3",
|
"url-loader": "^4.1.0",
|
||||||
"swr": "^2.0.0",
|
"url-slug": "^2.3.2",
|
||||||
"url-slug": "^3.0.2",
|
"video.js": "^7.8.4",
|
||||||
"util-deprecate": "^1.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"
|
||||||
"xmlbuilder2": "^2.4.1"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@formatjs/cli": "^4.2.27",
|
"@formatjs/cli": "^2.7.5",
|
||||||
"@types/node": "^16.3.1",
|
"@types/node": "^14.6.0",
|
||||||
"@types/nprogress": "^0.2.0",
|
"@types/nprogress": "^0.2.0",
|
||||||
"@types/react": "^18.0.26",
|
"@types/react": "^16.9.46",
|
||||||
"@types/react-dom": "^18.0.10",
|
"@typescript-eslint/eslint-plugin": "^3.9.1",
|
||||||
"@types/util-deprecate": "^1.0.0",
|
"@typescript-eslint/parser": "^3.9.1",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.13.0",
|
"eslint": "^7.7.0",
|
||||||
"@typescript-eslint/parser": "^5.0.0",
|
"eslint-config-airbnb-typescript": "^9.0.0",
|
||||||
"eslint": "^7.32.0 || ^8.2.0",
|
"eslint-plugin-import": "2.21.2",
|
||||||
"eslint-config-airbnb": "^19.0.4",
|
"eslint-plugin-jsx-a11y": "6.3.0",
|
||||||
"eslint-config-airbnb-typescript": "^17.0.0",
|
"eslint-plugin-react": "7.20.0",
|
||||||
"eslint-plugin-import": "^2.25.3",
|
"eslint-plugin-react-hooks": "4",
|
||||||
"eslint-plugin-jsx-a11y": "^6.5.1",
|
"lint-staged": "^10.2.11",
|
||||||
"eslint-plugin-react": "^7.28.0",
|
|
||||||
"eslint-plugin-react-hooks": "^4.3.0",
|
|
||||||
"lint-staged": "^11.0.0",
|
|
||||||
"npm-run-all": "^4.1.5",
|
"npm-run-all": "^4.1.5",
|
||||||
"postcss": "^8.2.15",
|
"postcss-flexbugs-fixes": "^4.2.1",
|
||||||
"postcss-flexbugs-fixes": "^5.0.2",
|
"postcss-preset-env": "^6.7.0",
|
||||||
"postcss-preset-env": "^7.2.0",
|
"typescript": "^4.0.2"
|
||||||
"typescript": "^4.3.5"
|
|
||||||
},
|
},
|
||||||
"husky": {
|
"husky": {
|
||||||
"hooks": {
|
"hooks": {
|
||||||
|
|
@ -92,8 +93,6 @@
|
||||||
"es2020": true
|
"es2020": true
|
||||||
},
|
},
|
||||||
"extends": [
|
"extends": [
|
||||||
"plugin:@next/next/recommended",
|
|
||||||
"airbnb",
|
|
||||||
"airbnb-typescript"
|
"airbnb-typescript"
|
||||||
],
|
],
|
||||||
"parserOptions": {
|
"parserOptions": {
|
||||||
|
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
/**
|
|
||||||
* Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw>
|
|
||||||
*
|
|
||||||
* This program is free software: you can redistribute it and/or modify
|
|
||||||
* it under the terms of the GNU Affero General Public License as
|
|
||||||
* published by the Free Software Foundation, either version 3 of the
|
|
||||||
* License, or (at your option) any later version.
|
|
||||||
*
|
|
||||||
* This program is distributed in the hope that it will be useful,
|
|
||||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
||||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
||||||
* GNU Affero General Public License for more details.
|
|
||||||
*
|
|
||||||
* You should have received a copy of the GNU Affero General Public License
|
|
||||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import * as React from 'react';
|
|
||||||
import Error from './_error';
|
|
||||||
|
|
||||||
function Error404Page() {
|
|
||||||
return <Error statusCode={404} />;
|
|
||||||
}
|
|
||||||
export default Error404Page;
|
|
||||||
|
|
@ -23,16 +23,15 @@ 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, getRunners, getVideos } from '../util/api';
|
import { getIndex, 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,
|
||||||
|
|
@ -40,20 +39,15 @@ interface VideoListPageProps {
|
||||||
thumbnailServerURL?: string,
|
thumbnailServerURL?: string,
|
||||||
title?: string,
|
title?: string,
|
||||||
videos?: Array<VideoEntry>,
|
videos?: Array<VideoEntry>,
|
||||||
runners?: RunnerList,
|
};
|
||||||
}
|
|
||||||
|
|
||||||
export const getServerSideProps: GetServerSideProps<VideoListPageProps> = async ({
|
export const getServerSideProps: GetServerSideProps<VideoListPageProps> = async ({ params: { id } }) => {
|
||||||
params: { id },
|
|
||||||
}) => {
|
|
||||||
// Fetch URL to thumbnails server
|
// Fetch URL to thumbnails server
|
||||||
const {
|
const {
|
||||||
ids,
|
ids,
|
||||||
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,
|
||||||
}: {
|
}: {
|
||||||
|
|
@ -91,19 +85,17 @@ export const getServerSideProps: GetServerSideProps<VideoListPageProps> = async
|
||||||
title,
|
title,
|
||||||
videos: finalVideos,
|
videos: finalVideos,
|
||||||
lastUpdatedAt,
|
lastUpdatedAt,
|
||||||
runners,
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
};
|
}
|
||||||
|
|
||||||
const VideoListPage: NextPage<VideoListPageProps> = function VideoListPage({
|
const VideoListPage: NextPage<VideoListPageProps> = ({
|
||||||
id,
|
id,
|
||||||
lastUpdatedAt,
|
lastUpdatedAt,
|
||||||
thumbnailServerURL,
|
thumbnailServerURL,
|
||||||
title,
|
title,
|
||||||
videos,
|
videos,
|
||||||
runners,
|
}) => {
|
||||||
}) {
|
|
||||||
if (!id) {
|
if (!id) {
|
||||||
return notFound();
|
return notFound();
|
||||||
}
|
}
|
||||||
|
|
@ -119,16 +111,21 @@ const VideoListPage: NextPage<VideoListPageProps> = function VideoListPage({
|
||||||
<div>
|
<div>
|
||||||
<Head>
|
<Head>
|
||||||
<title>
|
<title>
|
||||||
{`${title} – ${intl.formatMessage({
|
{title}
|
||||||
|
{' '}
|
||||||
|
–
|
||||||
|
{' '}
|
||||||
|
{intl.formatMessage({
|
||||||
id: 'App.title',
|
id: 'App.title',
|
||||||
description: 'The full title of the website',
|
description: 'The full title of the website',
|
||||||
defaultMessage: 'Games Done Quick Instant Archive',
|
defaultMessage: 'Games Done Quick Instant Archive',
|
||||||
})}`}
|
})}
|
||||||
</title>
|
</title>
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<Breadcrumb>
|
<Breadcrumb>
|
||||||
<Link legacyBehavior passHref href="/">
|
<Link passHref href="/">
|
||||||
<Breadcrumb.Item>
|
<Breadcrumb.Item>
|
||||||
<FormattedMessage
|
<FormattedMessage
|
||||||
id="Breadcrumb.homeTitle"
|
id="Breadcrumb.homeTitle"
|
||||||
|
|
@ -137,7 +134,7 @@ const VideoListPage: NextPage<VideoListPageProps> = function VideoListPage({
|
||||||
/>
|
/>
|
||||||
</Breadcrumb.Item>
|
</Breadcrumb.Item>
|
||||||
</Link>
|
</Link>
|
||||||
<Link legacyBehavior passHref href="/[id]" as={`/${id}`}>
|
<Link passHref href="/[id]" as={`/${id}`}>
|
||||||
<Breadcrumb.Item active>
|
<Breadcrumb.Item active>
|
||||||
{title}
|
{title}
|
||||||
</Breadcrumb.Item>
|
</Breadcrumb.Item>
|
||||||
|
|
@ -146,7 +143,6 @@ const VideoListPage: NextPage<VideoListPageProps> = function VideoListPage({
|
||||||
|
|
||||||
<VideoList
|
<VideoList
|
||||||
id={id}
|
id={id}
|
||||||
runners={runners}
|
|
||||||
thumbnailServerURL={thumbnailServerURL}
|
thumbnailServerURL={thumbnailServerURL}
|
||||||
videos={videos}
|
videos={videos}
|
||||||
/>
|
/>
|
||||||
|
|
@ -173,6 +169,6 @@ const VideoListPage: NextPage<VideoListPageProps> = function VideoListPage({
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
}
|
||||||
|
|
||||||
export default VideoListPage;
|
export default VideoListPage;
|
||||||
|
|
|
||||||
|
|
@ -22,24 +22,23 @@ import Link from 'next/link';
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
Breadcrumb, Button, ButtonGroup, Col, Ratio, Row, Tab, Tabs,
|
Breadcrumb, Button, ButtonGroup, Col, ResponsiveEmbed, 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 { faTwitch, faYoutube } from '@fortawesome/free-brands-svg-icons';
|
|
||||||
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,
|
||||||
|
|
@ -47,9 +46,8 @@ import {
|
||||||
getVideos,
|
getVideos,
|
||||||
submitPreferences,
|
submitPreferences,
|
||||||
} from '../../util/api';
|
} from '../../util/api';
|
||||||
import DownloadButton from '../../components/DownloadButton';
|
|
||||||
|
|
||||||
interface VideoPlayerPageParameters extends ParsedUrlQuery {
|
interface VideoPlayerPageParameters {
|
||||||
id: string,
|
id: string,
|
||||||
vslug: string,
|
vslug: string,
|
||||||
}
|
}
|
||||||
|
|
@ -57,7 +55,7 @@ interface VideoPlayerPageParameters extends ParsedUrlQuery {
|
||||||
interface VideoPlayerPageProps {
|
interface VideoPlayerPageProps {
|
||||||
id?: string,
|
id?: string,
|
||||||
vslug?: string,
|
vslug?: string,
|
||||||
video?: number | VideoEntry,
|
video?: number,
|
||||||
volume?: number,
|
volume?: number,
|
||||||
redirect?: boolean,
|
redirect?: boolean,
|
||||||
title?: string,
|
title?: string,
|
||||||
|
|
@ -67,14 +65,7 @@ interface VideoPlayerPageProps {
|
||||||
twitchPlayerParentKey?: string,
|
twitchPlayerParentKey?: string,
|
||||||
}
|
}
|
||||||
|
|
||||||
const getProps = withSession(async (
|
const getProps = withSession(async (req, _res, { id, vslug }: VideoPlayerPageParameters): Promise<GetServerSidePropsResult<VideoPlayerPageProps>> => {
|
||||||
req,
|
|
||||||
_res,
|
|
||||||
{
|
|
||||||
id,
|
|
||||||
vslug,
|
|
||||||
}: VideoPlayerPageParameters,
|
|
||||||
): Promise<GetServerSidePropsResult<VideoPlayerPageProps>> => {
|
|
||||||
if (typeof id !== 'string') {
|
if (typeof id !== 'string') {
|
||||||
throw new Error('only expected a single id');
|
throw new Error('only expected a single id');
|
||||||
}
|
}
|
||||||
|
|
@ -132,7 +123,7 @@ const getProps = withSession(async (
|
||||||
// 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.downloadFileName === sanitizedFileName,
|
(video: VideoEntry) => video.fileName === sanitizedFileName,
|
||||||
);
|
);
|
||||||
if (realVIndex >= 0) {
|
if (realVIndex >= 0) {
|
||||||
const video = videos[realVIndex];
|
const video = videos[realVIndex];
|
||||||
|
|
@ -174,7 +165,7 @@ const getProps = withSession(async (
|
||||||
}
|
}
|
||||||
|
|
||||||
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
|
||||||
|
|
@ -193,9 +184,7 @@ const getProps = withSession(async (
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
type ServerSideProps = GetServerSideProps<VideoPlayerPageProps, VideoPlayerPageParameters>;
|
export const getServerSideProps: GetServerSideProps = async ({
|
||||||
|
|
||||||
export const getServerSideProps: ServerSideProps = async ({
|
|
||||||
req,
|
req,
|
||||||
res,
|
res,
|
||||||
params,
|
params,
|
||||||
|
|
@ -241,28 +230,13 @@ 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 {
|
||||||
downloadFileName,
|
fileName,
|
||||||
title: videoTitle,
|
title: videoTitle,
|
||||||
sourceVideoID,
|
|
||||||
sourceVideoURL,
|
sourceVideoURL,
|
||||||
sourceVideoStart: sourceVideoStartStr,
|
sourceVideoStart,
|
||||||
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() {
|
||||||
|
|
@ -280,170 +254,34 @@ export default function VideoPlayerPage({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const tabs: Array<React.ReactElement<typeof Tab>> = [];
|
const twitchEmbedURL = new URL("https://player.twitch.tv");
|
||||||
let defaultTab = 'mirror-player';
|
twitchEmbedURL.searchParams.append('video', sourceVideoURL.split('/').pop());
|
||||||
const downloadButtons: Array<React.ReactElement> = [];
|
twitchEmbedURL.searchParams.append('parent', twitchPlayerParentKey);
|
||||||
|
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
|
|
||||||
key="mirror-player"
|
|
||||||
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,
|
|
||||||
]}
|
|
||||||
// eslint-disable-next-line react/jsx-no-bind
|
|
||||||
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
|
|
||||||
key="download"
|
|
||||||
id={id}
|
|
||||||
fileName={getDownloadURL(id, 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={faTwitch} className="mr-2" />
|
|
||||||
{' '}
|
|
||||||
<FormattedMessage
|
|
||||||
id="VideoPlayerPage.watchOnTwitch"
|
|
||||||
description="Button below video that links to the exact position in the archived stream to watch it there."
|
|
||||||
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={faYoutube} 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>
|
||||||
<Head>
|
<Head>
|
||||||
<title>
|
<title>
|
||||||
{`${videoTitle} – ${title} – ${intl.formatMessage({
|
{videoTitle}
|
||||||
|
{' '}
|
||||||
|
–
|
||||||
|
{' '}
|
||||||
|
{title}
|
||||||
|
{' '}
|
||||||
|
–
|
||||||
|
{' '}
|
||||||
|
{intl.formatMessage({
|
||||||
id: 'App.title',
|
id: 'App.title',
|
||||||
description: 'The full title of the website',
|
description: 'The full title of the website',
|
||||||
defaultMessage: 'Games Done Quick Instant Archive',
|
defaultMessage: 'Games Done Quick Instant Archive',
|
||||||
})}`}
|
})}
|
||||||
</title>
|
</title>
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<Breadcrumb>
|
<Breadcrumb>
|
||||||
<Link legacyBehavior passHref href="/">
|
<Link passHref href="/">
|
||||||
<Breadcrumb.Item>
|
<Breadcrumb.Item>
|
||||||
<FormattedMessage
|
<FormattedMessage
|
||||||
id="Breadcrumb.homeTitle"
|
id="Breadcrumb.homeTitle"
|
||||||
|
|
@ -452,36 +290,106 @@ export default function VideoPlayerPage({
|
||||||
/>
|
/>
|
||||||
</Breadcrumb.Item>
|
</Breadcrumb.Item>
|
||||||
</Link>
|
</Link>
|
||||||
<Link legacyBehavior passHref href="/[id]" as={`/${id}`}>
|
<Link passHref href="/[id]" as={`/${id}`}>
|
||||||
<Breadcrumb.Item>{title}</Breadcrumb.Item>
|
<Breadcrumb.Item>{title}</Breadcrumb.Item>
|
||||||
</Link>
|
</Link>
|
||||||
<Link legacyBehavior passHref href="/[id]/[vslug]" as={`/${id}/${vslug}`}>
|
<Link passHref href="/[id]/[vslug]" as={`/${id}/${vslug}`}>
|
||||||
<Breadcrumb.Item active>{videoTitle}</Breadcrumb.Item>
|
<Breadcrumb.Item active>{videoTitle}</Breadcrumb.Item>
|
||||||
</Link>
|
</Link>
|
||||||
</Breadcrumb>
|
</Breadcrumb>
|
||||||
|
|
||||||
<Tabs
|
<Tabs
|
||||||
defaultActiveKey={defaultTab}
|
defaultActiveKey="twitch-player"
|
||||||
unmountOnExit
|
unmountOnExit={true}
|
||||||
>
|
>
|
||||||
{tabs}
|
<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="mt-3">
|
<h1 className="mb-3 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>
|
||||||
{downloadButtons}
|
{/* <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>
|
||||||
|
)
|
||||||
|
: (
|
||||||
|
''
|
||||||
|
)
|
||||||
|
}
|
||||||
</ButtonGroup>
|
</ButtonGroup>
|
||||||
</Col>
|
</Col>
|
||||||
<Col sm={12} md={5}>
|
<Col sm={12} md={5}>
|
||||||
|
|
@ -490,6 +398,6 @@ export default function VideoPlayerPage({
|
||||||
</CopyField>
|
</CopyField>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
</div>
|
</div >
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -28,28 +28,21 @@ 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 {
|
import { faTwitch as fabTwitch } from '@fortawesome/free-brands-svg-icons';
|
||||||
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';
|
||||||
import Navbar from 'react-bootstrap/Navbar';
|
import Navbar from 'react-bootstrap/Navbar';
|
||||||
import SSRProvider from 'react-bootstrap/SSRProvider';
|
|
||||||
|
|
||||||
import { IntlProvider, FormattedMessage } from 'react-intl';
|
import { IntlProvider, FormattedMessage } from 'react-intl';
|
||||||
|
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import Router from 'next/router';
|
import Router from 'next/router';
|
||||||
import App, { AppContext, AppProps } from 'next/app';
|
import App, { AppContext } from 'next/app';
|
||||||
|
|
||||||
import useSWR, { SWRConfig } from 'swr';
|
import useSWR, { SWRConfig } from 'swr';
|
||||||
|
|
||||||
|
|
@ -61,7 +54,7 @@ import Image from 'react-bootstrap/Image';
|
||||||
import Head from 'next/head';
|
import Head from 'next/head';
|
||||||
import { ButtonGroup } from 'react-bootstrap';
|
import { ButtonGroup } from 'react-bootstrap';
|
||||||
import { shouldPolyfill } from '@formatjs/intl-numberformat/should-polyfill';
|
import { shouldPolyfill } from '@formatjs/intl-numberformat/should-polyfill';
|
||||||
import '../styles/Home.module.css';
|
import HomeStyle from '../styles/Home.module.css';
|
||||||
import DarkToggler from '../components/DarkToggler';
|
import DarkToggler from '../components/DarkToggler';
|
||||||
|
|
||||||
import { fetchJson } from '../util/api';
|
import { fetchJson } from '../util/api';
|
||||||
|
|
@ -75,10 +68,7 @@ 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,
|
||||||
|
|
@ -86,7 +76,6 @@ library.add(
|
||||||
faLanguage,
|
faLanguage,
|
||||||
faLightbulb,
|
faLightbulb,
|
||||||
farLightbulb,
|
farLightbulb,
|
||||||
faRunning,
|
|
||||||
faSearch,
|
faSearch,
|
||||||
faShare,
|
faShare,
|
||||||
);
|
);
|
||||||
|
|
@ -114,7 +103,10 @@ function GDQArchiveApp({
|
||||||
initialMessages,
|
initialMessages,
|
||||||
...pageProps
|
...pageProps
|
||||||
},
|
},
|
||||||
}: AppProps<GDQArchiveAppPageProps>) {
|
}: {
|
||||||
|
Component: React.ElementType<Record<string, any>>,
|
||||||
|
pageProps: GDQArchiveAppPageProps,
|
||||||
|
}) {
|
||||||
/* Component state */
|
/* Component state */
|
||||||
|
|
||||||
const [currentMessages, setMessages] = React.useState(initialMessages);
|
const [currentMessages, setMessages] = React.useState(initialMessages);
|
||||||
|
|
@ -137,7 +129,7 @@ function GDQArchiveApp({
|
||||||
mutate,
|
mutate,
|
||||||
} = useSWR('/api/user', {
|
} = useSWR('/api/user', {
|
||||||
fetcher: fetchJson,
|
fetcher: fetchJson,
|
||||||
fallbackData: {
|
initialData: {
|
||||||
locale: initialLocale,
|
locale: initialLocale,
|
||||||
enableDark: initialEnableDark,
|
enableDark: initialEnableDark,
|
||||||
},
|
},
|
||||||
|
|
@ -203,8 +195,8 @@ function GDQArchiveApp({
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {bool} value
|
* @param {bool} value
|
||||||
*/
|
*/
|
||||||
async function onChangeDarkMode(value: boolean) {
|
async function onChangeDarkMode(value: boolean) {
|
||||||
setIsChangingDarkMode(true);
|
setIsChangingDarkMode(true);
|
||||||
|
|
||||||
|
|
@ -227,107 +219,76 @@ function GDQArchiveApp({
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
if (enableDarkMode) {
|
if (enableDarkMode) {
|
||||||
document.documentElement.setAttribute('data-bs-color-scheme', 'dark');
|
document.documentElement.setAttribute('data-enable-dark', 'true');
|
||||||
} else {
|
} else {
|
||||||
document.documentElement.removeAttribute('data-bs-color-scheme');
|
document.documentElement.removeAttribute('data-enable-dark');
|
||||||
}
|
}
|
||||||
document.documentElement.setAttribute('lang', currentLocale);
|
document.documentElement.setAttribute('lang', currentLocale);
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SSRProvider>
|
<SWRConfig
|
||||||
<SWRConfig
|
value={{
|
||||||
value={{
|
fetcher: fetchJson,
|
||||||
fetcher: fetchJson,
|
onError(err) {
|
||||||
onError(err) {
|
console.error(err);
|
||||||
console.error(err);
|
},
|
||||||
},
|
}}
|
||||||
}}
|
>
|
||||||
|
<IntlProvider
|
||||||
|
messages={currentMessages}
|
||||||
|
locale={currentLocale}
|
||||||
|
defaultLocale={defaultLocale}
|
||||||
>
|
>
|
||||||
<IntlProvider
|
<Navbar bg="dark" variant="dark">
|
||||||
messages={currentMessages}
|
<Link passHref href="/">
|
||||||
locale={currentLocale}
|
<Navbar.Brand>
|
||||||
defaultLocale={defaultLocale}
|
<Image
|
||||||
>
|
src={gdqLogo}
|
||||||
<Navbar bg="dark" expand="md" variant="dark">
|
alt="Games Done Quick"
|
||||||
<Container fluid>
|
className={[
|
||||||
<Link legacyBehavior passHref href="/">
|
HomeStyle.logo,
|
||||||
<Navbar.Brand>
|
'd-inline-block',
|
||||||
<Image
|
'align-middle',
|
||||||
src={typeof gdqLogo === 'string' ? gdqLogo : gdqLogo.src}
|
].join(' ')}
|
||||||
alt="Games Done Quick"
|
/>
|
||||||
height={30}
|
{' '}
|
||||||
className={[
|
<FormattedMessage
|
||||||
// HomeStyle.logo,
|
id="Navbar.brandText"
|
||||||
'd-inline-block',
|
defaultMessage="Instant Archive"
|
||||||
// 'align-middle',
|
/>
|
||||||
'align-top',
|
</Navbar.Brand>
|
||||||
].join(' ')}
|
</Link>
|
||||||
/>
|
<Navbar.Toggle aria-controls="basic-navbar-nav" />
|
||||||
{' '}
|
<Navbar.Collapse
|
||||||
<FormattedMessage
|
id="basic-navbar-nav"
|
||||||
id="Navbar.brandText"
|
className="justify-content-end"
|
||||||
defaultMessage="Instant Archive"
|
>
|
||||||
/>
|
<ButtonGroup>
|
||||||
</Navbar.Brand>
|
<LocaleSwitcher
|
||||||
</Link>
|
locale={currentLocale}
|
||||||
{/* <Navbar.Text>
|
onChangeLocale={onChangeLocale}
|
||||||
<Breadcrumb>
|
disabled={isChangingLocale || isValidating}
|
||||||
<Breadcrumb.Item>
|
showLoading={isChangingLocale}
|
||||||
<Link legacyBehavior passHref href="/">
|
/>
|
||||||
<FormattedMessage
|
<DarkToggler
|
||||||
id="Breadcrumb.homeTitle"
|
isDarkEnabled={enableDarkMode}
|
||||||
defaultMessage="GDQ Instant Archive"
|
onChangeDarkMode={onChangeDarkMode}
|
||||||
description="Root node text in breadcrumb"
|
disabled={isChangingDarkMode || isValidating}
|
||||||
/>
|
showLoading={isChangingDarkMode}
|
||||||
</Link>
|
/>
|
||||||
</Breadcrumb.Item>
|
</ButtonGroup>
|
||||||
<Breadcrumb.Item>
|
</Navbar.Collapse>
|
||||||
<FormattedMessage
|
</Navbar>
|
||||||
id="Breadcrumb.homeTitle"
|
<Head>
|
||||||
defaultMessage="GDQ Instant Archive"
|
<link rel="icon" type="image/svg+xml" href={favicon} />
|
||||||
description="Root node text in breadcrumb"
|
</Head>
|
||||||
/>
|
<Container>
|
||||||
</Breadcrumb.Item>
|
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
|
||||||
</Breadcrumb>
|
<Component {...pageProps} />
|
||||||
</Navbar.Text> */}
|
</Container>
|
||||||
<Navbar.Toggle aria-controls="basic-navbar-nav" />
|
</IntlProvider>
|
||||||
<Navbar.Collapse
|
</SWRConfig>
|
||||||
id="basic-navbar-nav"
|
|
||||||
className="justify-content-end"
|
|
||||||
>
|
|
||||||
<ButtonGroup>
|
|
||||||
<LocaleSwitcher
|
|
||||||
locale={currentLocale}
|
|
||||||
// eslint-disable-next-line react/jsx-no-bind
|
|
||||||
onChangeLocale={onChangeLocale}
|
|
||||||
disabled={isChangingLocale || isValidating}
|
|
||||||
showLoading={isChangingLocale}
|
|
||||||
/>
|
|
||||||
<DarkToggler
|
|
||||||
isDarkEnabled={enableDarkMode}
|
|
||||||
// eslint-disable-next-line react/jsx-no-bind
|
|
||||||
onChangeDarkMode={onChangeDarkMode}
|
|
||||||
disabled={isChangingDarkMode || isValidating}
|
|
||||||
showLoading={isChangingDarkMode}
|
|
||||||
/>
|
|
||||||
</ButtonGroup>
|
|
||||||
</Navbar.Collapse>
|
|
||||||
</Container>
|
|
||||||
</Navbar>
|
|
||||||
<Head>
|
|
||||||
<meta name="color-scheme" content="light dark" />
|
|
||||||
<meta name="theme-color" content="rgb(33, 37, 41)" />
|
|
||||||
<meta name="keywords" content="gdq,games done quick,gaming,games,speedrun,speedrunning,vod,vods,video on demand,twitch,youtube,replay,archive,video,videos" />
|
|
||||||
<link rel="icon" type="image/svg+xml" href={typeof favicon === 'string' ? favicon : favicon.src} />
|
|
||||||
</Head>
|
|
||||||
<Container className="mt-3">
|
|
||||||
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
|
|
||||||
<Component {...pageProps} />
|
|
||||||
</Container>
|
|
||||||
</IntlProvider>
|
|
||||||
</SWRConfig>
|
|
||||||
</SSRProvider>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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-bs-color-scheme={enableDark}>
|
<Html lang={locale} data-enable-dark={enableDark}>
|
||||||
<Head />
|
<Head />
|
||||||
<body>
|
<body>
|
||||||
<Main />
|
<Main />
|
||||||
|
|
|
||||||
|
|
@ -1,60 +0,0 @@
|
||||||
/**
|
|
||||||
* Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw>
|
|
||||||
*
|
|
||||||
* This program is free software: you can redistribute it and/or modify
|
|
||||||
* it under the terms of the GNU Affero General Public License as
|
|
||||||
* published by the Free Software Foundation, either version 3 of the
|
|
||||||
* License, or (at your option) any later version.
|
|
||||||
*
|
|
||||||
* This program is distributed in the hope that it will be useful,
|
|
||||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
||||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
||||||
* GNU Affero General Public License for more details.
|
|
||||||
*
|
|
||||||
* You should have received a copy of the GNU Affero General Public License
|
|
||||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { 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> = function Error({
|
|
||||||
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>
|
|
||||||
</Head>
|
|
||||||
<p>
|
|
||||||
<h1>
|
|
||||||
{statusCode}
|
|
||||||
{' '}
|
|
||||||
{title}
|
|
||||||
</h1>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
Error.getInitialProps = (ctx) => {
|
|
||||||
const { res, err } = ctx;
|
|
||||||
// eslint-disable-next-line no-nested-ternary
|
|
||||||
const statusCode = res ? res.statusCode : (err ? err.statusCode : 404);
|
|
||||||
// eslint-disable-next-line no-nested-ternary
|
|
||||||
const title = res ? res.statusMessage : (err ? err.message : 'Page not found');
|
|
||||||
return { statusCode, title };
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Error;
|
|
||||||
|
|
@ -21,23 +21,27 @@ 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 () => {
|
||||||
props: {
|
// Fetch VOD IDs and announcements
|
||||||
// Fetch VOD IDs and announcements
|
return {
|
||||||
index: await getIndex(),
|
props: {
|
||||||
},
|
index: await getIndex(),
|
||||||
});
|
},
|
||||||
const Home: NextPage<HomeProps> = function Home({ index: { announcements, ids } }) {
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const Home: NextPage<HomeProps> = ({ index: { announcements, ids } }) => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -49,11 +53,11 @@ const Home: NextPage<HomeProps> = function Home({ index: { announcements, ids }
|
||||||
defaultMessage: 'Games Done Quick Instant Archive',
|
defaultMessage: 'Games Done Quick Instant Archive',
|
||||||
})}
|
})}
|
||||||
</title>
|
</title>
|
||||||
<meta name="color-scheme" content="light dark" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
{/* <Breadcrumb>
|
<Breadcrumb>
|
||||||
<Link legacyBehavior passHref href="/">
|
<Link passHref href="/">
|
||||||
<Breadcrumb.Item active>
|
<Breadcrumb.Item active>
|
||||||
<FormattedMessage
|
<FormattedMessage
|
||||||
id="Breadcrumb.homeTitle"
|
id="Breadcrumb.homeTitle"
|
||||||
|
|
@ -62,7 +66,7 @@ const Home: NextPage<HomeProps> = function Home({ index: { announcements, ids }
|
||||||
/>
|
/>
|
||||||
</Breadcrumb.Item>
|
</Breadcrumb.Item>
|
||||||
</Link>
|
</Link>
|
||||||
</Breadcrumb> */}
|
</Breadcrumb>
|
||||||
|
|
||||||
<h1>
|
<h1>
|
||||||
<FormattedMessage
|
<FormattedMessage
|
||||||
|
|
@ -80,26 +84,23 @@ const Home: NextPage<HomeProps> = function Home({ 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>
|
<b>Announcement:</b> {text}
|
||||||
{' '}
|
|
||||||
{text}
|
|
||||||
</p>
|
</p>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
|
|
||||||
<ListGroup>
|
<ListGroup>
|
||||||
{ids.map(({ id, longTitle }) => (
|
{ids.map(({ id, title }) => (
|
||||||
<Link legacyBehavior key={id} passHref href="/[id]" as={`/${id}`}>
|
<Link key={id} passHref href="/[id]" as={`/${id}`}>
|
||||||
<ListGroup.Item action>
|
<ListGroup.Item action>
|
||||||
<h5>{longTitle}</h5>
|
<h5>{title}</h5>
|
||||||
</ListGroup.Item>
|
</ListGroup.Item>
|
||||||
</Link>
|
</Link>
|
||||||
))}
|
))}
|
||||||
</ListGroup>
|
</ListGroup>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
}
|
||||||
|
|
||||||
export default Home;
|
export default Home;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
$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,103 +21,91 @@
|
||||||
|
|
||||||
@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 "~bootstrap-dark-5/scss/dark/mixins";
|
@import "~@forevolve/bootstrap-dark/scss/dark-mixins";
|
||||||
@import "~bootstrap/scss/utilities";
|
|
||||||
@import "~bootstrap-dark-5/scss/dark/utilities";
|
|
||||||
@import "~bootstrap-dark-5/scss/dark/patch";
|
|
||||||
|
|
||||||
:root {
|
html:not([data-enable-dark="true"]) {
|
||||||
color-scheme: light;
|
@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';
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@include color-scheme-alt('[data-bs-color-scheme="dark"]') {
|
html[data-enable-dark="true"] {
|
||||||
@import "~bootstrap-dark-5/scss/dark/root";
|
@import "~@forevolve/bootstrap-dark/scss/dark-variables";
|
||||||
@import "~bootstrap-dark-5/scss/dark/reboot";
|
@import "~bootstrap/scss/root";
|
||||||
@import "~bootstrap-dark-5/scss/dark/type";
|
@import "~bootstrap/scss/reboot";
|
||||||
@import "~bootstrap-dark-5/scss/dark/images";
|
@import "~bootstrap/scss/type";
|
||||||
// no colors in containers
|
@import "~bootstrap/scss/images";
|
||||||
// no colors in grid
|
// @import '~bootstrap/scss/code';
|
||||||
// @import '~bootstrap-dark-5/scss/dark/tables';
|
@import "~bootstrap/scss/grid";
|
||||||
@import "~bootstrap-dark-5/scss/dark/forms";
|
// @import '~bootstrap/scss/tables';
|
||||||
@import "~bootstrap-dark-5/scss/dark/buttons";
|
// @import '~@forevolve/bootstrap-dark/scss/dark-tables';
|
||||||
// no colors in transitions
|
@import "~bootstrap/scss/forms";
|
||||||
@import "~bootstrap-dark-5/scss/dark/dropdown";
|
@import "~bootstrap/scss/buttons";
|
||||||
@import "~bootstrap-dark-5/scss/dark/button-group";
|
@import "~bootstrap/scss/transitions";
|
||||||
@import "~bootstrap-dark-5/scss/dark/nav";
|
@import "~bootstrap/scss/dropdown";
|
||||||
@import "~bootstrap-dark-5/scss/dark/navbar";
|
@import "~bootstrap/scss/button-group";
|
||||||
// @import '~bootstrap-dark-5/scss/dark/card';
|
@import "~bootstrap/scss/input-group";
|
||||||
// @import '~bootstrap-dark-5/scss/dark/accordion';
|
@import "~@forevolve/bootstrap-dark/scss/dark-input-group";
|
||||||
@import "~bootstrap-dark-5/scss/dark/breadcrumb";
|
// @import '~bootstrap/scss/custom-forms';
|
||||||
// @import '~bootstrap-dark-5/scss/dark/pagination';
|
@import "~bootstrap/scss/nav";
|
||||||
// @import '~bootstrap-dark-5/scss/dark/badge';
|
@import "~bootstrap/scss/navbar";
|
||||||
// @import '~bootstrap-dark-5/scss/dark/alert';
|
// @import '~bootstrap/scss/card';
|
||||||
// @import '~bootstrap-dark-5/scss/dark/progress';
|
@import "~bootstrap/scss/breadcrumb";
|
||||||
@import "~bootstrap-dark-5/scss/dark/list-group";
|
// @import '~bootstrap/scss/pagination';
|
||||||
@import "~bootstrap-dark-5/scss/dark/close";
|
// @import '~bootstrap/scss/badge';
|
||||||
// @import '~bootstrap-dark-5/scss/dark/toasts';
|
// @import '~bootstrap/scss/jumbotron';
|
||||||
// @import '~bootstrap-dark-5/scss/dark/modal';
|
// @import '~bootstrap/scss/alert';
|
||||||
@import "~bootstrap-dark-5/scss/dark/tooltip";
|
// @import '~bootstrap/scss/progress';
|
||||||
@import "~bootstrap-dark-5/scss/dark/popover";
|
@import "~bootstrap/scss/media";
|
||||||
// @import '~bootstrap-dark-5/scss/dark/carousel';
|
@import "~bootstrap/scss/list-group";
|
||||||
@import "~bootstrap-dark-5/scss/dark/offcanvas";
|
@import "~bootstrap/scss/close";
|
||||||
@import "~bootstrap-dark-5/scss/dark/placeholders";
|
// @import '~bootstrap/scss/toasts';
|
||||||
@import "~bootstrap-dark-5/scss/dark/helpers";
|
// @import '~bootstrap/scss/modal';
|
||||||
@import "~bootstrap-dark-5/scss/dark/utilities/api";
|
@import "~bootstrap/scss/tooltip";
|
||||||
@import "~bootstrap-dark-5/scss/dark/dark";
|
@import "~bootstrap/scss/popover";
|
||||||
|
// @import '~bootstrap/scss/carousel';
|
||||||
:root {
|
@import "~bootstrap/scss/spinners";
|
||||||
color-scheme: dark;
|
@import "~bootstrap/scss/utilities";
|
||||||
}
|
// @import '~bootstrap/scss/print';
|
||||||
|
@import "~@forevolve/bootstrap-dark/scss/dark-styles";
|
||||||
}
|
}
|
||||||
|
|
||||||
// HACK - fix use of unset variables
|
.breadcrumb {
|
||||||
:root {
|
border-top: 0 !important;
|
||||||
--bs-body-bg-alt: #{$body-bg-alt};
|
|
||||||
--bs-body-color-alt: #{$body-color-alt};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@import "~bootstrap-dark-5/scss/dark/utilities/api-all";
|
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,6 @@
|
||||||
|
|
||||||
@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;
|
||||||
|
|
@ -29,6 +28,8 @@ 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);
|
||||||
|
|
@ -37,13 +38,5 @@ 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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -33,8 +33,7 @@
|
||||||
"video.js": [
|
"video.js": [
|
||||||
"typings/video.js"
|
"typings/video.js"
|
||||||
]
|
]
|
||||||
},
|
}
|
||||||
"incremental": true
|
|
||||||
},
|
},
|
||||||
"include": [
|
"include": [
|
||||||
"next-env.d.ts",
|
"next-env.d.ts",
|
||||||
|
|
|
||||||
|
|
@ -5,12 +5,12 @@ export type UrlSlugTransformer = (
|
||||||
separator: UrlSlugSeparator
|
separator: UrlSlugSeparator
|
||||||
) => string;
|
) => string;
|
||||||
|
|
||||||
export type UrlSlugSeparator = '-' | '.' | '_' | '~' | '';
|
export type UrlSlugSeparator = '-'|'.'|'_'|'~'|'';
|
||||||
|
|
||||||
export interface UrlSlugOptions {
|
export interface UrlSlugOptions {
|
||||||
camelCase?: boolean = true;
|
camelCase?: boolean = true;
|
||||||
separator?: UrlSlugSeparator = '-';
|
separator?: UrlSlugSeparator = '-';
|
||||||
transformer: false | UrlSlugTransformer = false;
|
transformer: false|UrlSlugTransformer = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
declare function urlSlug(
|
declare function urlSlug(
|
||||||
|
|
|
||||||
|
|
@ -15,9 +15,6 @@
|
||||||
* 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-deprecate';
|
|
||||||
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';
|
||||||
|
|
@ -27,9 +24,6 @@ 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;
|
||||||
|
|
||||||
|
|
@ -67,35 +61,6 @@ export async function fetchJson(
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function legacyMakeThumbnailURLSet(
|
|
||||||
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,
|
|
||||||
}), {});
|
|
||||||
}
|
|
||||||
export const makeThumbnailURLSet = deprecate(legacyMakeThumbnailURLSet, 'makeThumbnailURLSet() is deprecated.');
|
|
||||||
|
|
||||||
async function getDirect(relativeURL: string) {
|
async function getDirect(relativeURL: string) {
|
||||||
return fetchJson(`${apiDirectURL}/${relativeURL}`);
|
return fetchJson(`${apiDirectURL}/${relativeURL}`);
|
||||||
}
|
}
|
||||||
|
|
@ -108,10 +73,6 @@ 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>, {
|
||||||
|
|
@ -126,12 +87,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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,36 +0,0 @@
|
||||||
/**
|
|
||||||
* Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw>
|
|
||||||
*
|
|
||||||
* This program is free software: you can redistribute it and/or modify
|
|
||||||
* it under the terms of the GNU Affero General Public License as
|
|
||||||
* published by the Free Software Foundation, either version 3 of the
|
|
||||||
* License, or (at your option) any later version.
|
|
||||||
*
|
|
||||||
* This program is distributed in the hope that it will be useful,
|
|
||||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
||||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
||||||
* GNU Affero General Public License for more details.
|
|
||||||
*
|
|
||||||
* You should have received a copy of the GNU Affero General Public License
|
|
||||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
||||||
*/
|
|
||||||
|
|
||||||
// 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,49 +15,17 @@
|
||||||
* 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 {
|
||||||
downloadFileName: string,
|
fileName:string
|
||||||
title: string,
|
title: string
|
||||||
run?: RunInformation,
|
|
||||||
runners?: Array<string>,
|
|
||||||
hosts?: Array<string>,
|
|
||||||
duration?: number | string,
|
duration?: number | string,
|
||||||
slug: string,
|
slug: string,
|
||||||
sourceVideoID: string,
|
sourceVideoURL: string
|
||||||
sourceVideoURL: string,
|
sourceVideoStart: number | string
|
||||||
sourceVideoStart: number | string,
|
sourceVideoEnd: 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>
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -16,9 +16,8 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export interface VideoOnDemandIdentifier {
|
export interface VideoOnDemandIdentifier {
|
||||||
id: string;
|
id: string
|
||||||
title: string;
|
title: string
|
||||||
longTitle: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface VideoOnDemandIndex {
|
export interface VideoOnDemandIndex {
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,43 @@
|
||||||
* 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,
|
||||||
|
|
@ -49,4 +86,3 @@ 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';
|
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@
|
||||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
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':
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,7 @@
|
||||||
|
|
||||||
import { withIronSession } from 'next-iron-session';
|
import { withIronSession } from 'next-iron-session';
|
||||||
import type { Session } from 'next-iron-session';
|
import type { Session } from 'next-iron-session';
|
||||||
import { IncomingMessage } from 'http';
|
import { IncomingMessage, ServerResponse } from 'http';
|
||||||
import { NextApiResponse, NextPageContext } from 'next';
|
import { NextApiResponse, NextPageContext } from 'next';
|
||||||
import { DocumentContext } from 'next/document';
|
import { DocumentContext } from 'next/document';
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -15,4 +15,4 @@
|
||||||
* 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 type UnboxPromise<T extends Promise<any>> = T extends Promise<infer U> ? U : never;
|
export type UnboxPromise<T extends Promise<any>> = T extends Promise<infer U> ? U: never;
|
||||||
|
|
|
||||||
11095
frontend/yarn.lock
11095
frontend/yarn.lock
File diff suppressed because it is too large
Load Diff
|
|
@ -1,6 +1,5 @@
|
||||||
ARG NGINX_VERSION=1.20.1
|
#ARG NGINX_VERSION=1.23.3
|
||||||
|
ARG NGINX_VERSION=1.25.0
|
||||||
# FIXME - 1.20.1 uses an Alpine version that ships a _pre version of gcc/libc, that confuses the icedream/nginx module build script. Has to be fixed in that repo instead.
|
|
||||||
|
|
||||||
FROM icedream/nginx as icedream-nginx
|
FROM icedream/nginx as icedream-nginx
|
||||||
|
|
||||||
|
|
@ -22,11 +21,12 @@ RUN yes "" | abuild-keygen -a -i
|
||||||
# Check out aports
|
# Check out aports
|
||||||
RUN git config --global user.name Docker
|
RUN git config --global user.name Docker
|
||||||
RUN git config --global user.email "$(whoami)@localhost"
|
RUN git config --global user.email "$(whoami)@localhost"
|
||||||
RUN git clone --depth=1 -b 3.12-stable git://git.alpinelinux.org/aports
|
# alpine docker image for nginx 1.25.0 uses alpine 3.17.3
|
||||||
|
RUN git clone --depth=1 -b 3.17-stable git://git.alpinelinux.org/aports
|
||||||
WORKDIR /usr/src/aports
|
WORKDIR /usr/src/aports
|
||||||
|
|
||||||
# Apply package changes
|
# Apply package changes
|
||||||
COPY patches/aports /patches/
|
COPY patches/aports-3.17 /patches/
|
||||||
RUN git am /patches/*.patch
|
RUN git am /patches/*.patch
|
||||||
|
|
||||||
WORKDIR /usr/src/aports/community/ffmpeg-serverkomplex
|
WORKDIR /usr/src/aports/community/ffmpeg-serverkomplex
|
||||||
|
|
@ -46,7 +46,11 @@ RUN git clone --depth=1 --recursive https://github.com/kaltura/nginx-vod-module.
|
||||||
|
|
||||||
###
|
###
|
||||||
|
|
||||||
FROM nginx:${NGINX_VERSION}-alpine
|
# This is the final image but with added fdk-aac support. We currently don't use
|
||||||
|
# it and the patch for the ffmpeg package is currently broken so it gets
|
||||||
|
# skipped.
|
||||||
|
|
||||||
|
FROM nginx:${NGINX_VERSION}-alpine AS final-patched
|
||||||
RUN \
|
RUN \
|
||||||
export DEBIAN_FRONTEND=noninteractive &&\
|
export DEBIAN_FRONTEND=noninteractive &&\
|
||||||
if command -v apk >/dev/null 2>/dev/null; then apk add --no-cache gnupg; else apt-get update && apt-get install -y gnupg wget ca-certificates && apt-get clean; fi
|
if command -v apk >/dev/null 2>/dev/null; then apk add --no-cache gnupg; else apt-get update && apt-get install -y gnupg wget ca-certificates && apt-get clean; fi
|
||||||
|
|
@ -67,3 +71,22 @@ RUN \
|
||||||
rm -rf /packages
|
rm -rf /packages
|
||||||
RUN sed -i '1s#^#load_module modules/ngx_http_vod_module.so;\n#' /etc/nginx/nginx.conf
|
RUN sed -i '1s#^#load_module modules/ngx_http_vod_module.so;\n#' /etc/nginx/nginx.conf
|
||||||
|
|
||||||
|
|
||||||
|
###
|
||||||
|
|
||||||
|
FROM nginx:${NGINX_VERSION}-alpine AS final
|
||||||
|
RUN \
|
||||||
|
export DEBIAN_FRONTEND=noninteractive &&\
|
||||||
|
if command -v apk >/dev/null 2>/dev/null; then apk add --no-cache gnupg; else apt-get update && apt-get install -y gnupg wget ca-certificates && apt-get clean; fi
|
||||||
|
COPY --from=icedream-nginx /usr/local/bin/docker-* /usr/local/bin/
|
||||||
|
|
||||||
|
COPY --from=module-source /usr/src/ /usr/src/nginx-modules/
|
||||||
|
RUN apk update
|
||||||
|
RUN apk add ffmpeg ffmpeg-dev openssl openssl-dev
|
||||||
|
RUN \
|
||||||
|
docker-nginx-download-source &&\
|
||||||
|
docker-nginx-build \
|
||||||
|
--add-dynamic-module=../nginx-modules/nginx-vod-module --with-file-aio &&\
|
||||||
|
rm -rf /packages
|
||||||
|
RUN sed -i '1s#^#load_module modules/ngx_http_vod_module.so;\n#' /etc/nginx/nginx.conf
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,112 @@
|
||||||
|
From 3f7a41c28220ae6aa0ade50873399c94dd1a97c0 Mon Sep 17 00:00:00 2001
|
||||||
|
From: Carl Kittelberger <icedream@icedream.pw>
|
||||||
|
Date: Tue, 10 Jan 2023 09:27:50 +0100
|
||||||
|
Subject: [PATCH] Build non-free binary with fdk-aac support.
|
||||||
|
|
||||||
|
---
|
||||||
|
...01-ffbuild-libversion.sh-add-shebang.patch | 0
|
||||||
|
...util-clean-up-unused-FF_SYMVER-macro.patch | 0
|
||||||
|
.../{ffmpeg => ffmpeg-serverkomplex}/APKBUILD | 20 ++++++++++++++++---
|
||||||
|
...av_stream_get_first_dts-for-chromium.patch | 0
|
||||||
|
.../flto-auto.patch | 0
|
||||||
|
5 files changed, 17 insertions(+), 3 deletions(-)
|
||||||
|
rename community/{ffmpeg => ffmpeg-serverkomplex}/0001-ffbuild-libversion.sh-add-shebang.patch (100%)
|
||||||
|
rename community/{ffmpeg => ffmpeg-serverkomplex}/0001-libavutil-clean-up-unused-FF_SYMVER-macro.patch (100%)
|
||||||
|
rename community/{ffmpeg => ffmpeg-serverkomplex}/APKBUILD (94%)
|
||||||
|
rename community/{ffmpeg => ffmpeg-serverkomplex}/add-av_stream_get_first_dts-for-chromium.patch (100%)
|
||||||
|
rename community/{ffmpeg => ffmpeg-serverkomplex}/flto-auto.patch (100%)
|
||||||
|
|
||||||
|
diff --git a/community/ffmpeg/0001-ffbuild-libversion.sh-add-shebang.patch b/community/ffmpeg-serverkomplex/0001-ffbuild-libversion.sh-add-shebang.patch
|
||||||
|
similarity index 100%
|
||||||
|
rename from community/ffmpeg/0001-ffbuild-libversion.sh-add-shebang.patch
|
||||||
|
rename to community/ffmpeg-serverkomplex/0001-ffbuild-libversion.sh-add-shebang.patch
|
||||||
|
diff --git a/community/ffmpeg/0001-libavutil-clean-up-unused-FF_SYMVER-macro.patch b/community/ffmpeg-serverkomplex/0001-libavutil-clean-up-unused-FF_SYMVER-macro.patch
|
||||||
|
similarity index 100%
|
||||||
|
rename from community/ffmpeg/0001-libavutil-clean-up-unused-FF_SYMVER-macro.patch
|
||||||
|
rename to community/ffmpeg-serverkomplex/0001-libavutil-clean-up-unused-FF_SYMVER-macro.patch
|
||||||
|
diff --git a/community/ffmpeg/APKBUILD b/community/ffmpeg-serverkomplex/APKBUILD
|
||||||
|
similarity index 94%
|
||||||
|
rename from community/ffmpeg/APKBUILD
|
||||||
|
rename to community/ffmpeg-serverkomplex/APKBUILD
|
||||||
|
index d45301c1ef..068ed06ad9 100644
|
||||||
|
--- a/community/ffmpeg/APKBUILD
|
||||||
|
+++ b/community/ffmpeg-serverkomplex/APKBUILD
|
||||||
|
@@ -2,13 +2,13 @@
|
||||||
|
# Contributor: Łukasz Jendrysik <scadu@yandex.com>
|
||||||
|
# Contributor: Jakub Skrzypnik <j.skrzypnik@openmailbox.org>
|
||||||
|
# Maintainer: Natanael Copa <ncopa@alpinelinux.org>
|
||||||
|
-pkgname=ffmpeg
|
||||||
|
+pkgname=ffmpeg-serverkomplex
|
||||||
|
pkgver=5.1.2
|
||||||
|
pkgrel=1
|
||||||
|
pkgdesc="Complete and free Internet live audio and video broadcasting solution for Linux/Unix"
|
||||||
|
url="https://ffmpeg.org/"
|
||||||
|
arch="all"
|
||||||
|
-license="GPL-2.0-or-later AND LGPL-2.1-or-later"
|
||||||
|
+license="GPL-2.0-or-later AND LGPL-2.1-or-later AND non-free"
|
||||||
|
options="!check" # tests/data/hls-lists.append.m3u8 fails
|
||||||
|
subpackages="$pkgname-dev $pkgname-doc $pkgname-libs"
|
||||||
|
makedepends="
|
||||||
|
@@ -17,6 +17,7 @@ makedepends="
|
||||||
|
bzip2-dev
|
||||||
|
coreutils
|
||||||
|
dav1d-dev
|
||||||
|
+ fdk-aac-dev
|
||||||
|
fontconfig-dev
|
||||||
|
freetype-dev
|
||||||
|
fribidi-dev
|
||||||
|
@@ -179,7 +180,9 @@ build() {
|
||||||
|
--enable-libfribidi \
|
||||||
|
--enable-gnutls \
|
||||||
|
--enable-gpl \
|
||||||
|
+ --enable-nonfree \
|
||||||
|
--enable-libass \
|
||||||
|
+ --enable-libfdk-aac\
|
||||||
|
--enable-libmp3lame \
|
||||||
|
--enable-libpulse \
|
||||||
|
--enable-libvorbis \
|
||||||
|
@@ -219,6 +222,15 @@ build() {
|
||||||
|
${CC:-gcc} -o tools/qt-faststart $CFLAGS tools/qt-faststart.c
|
||||||
|
}
|
||||||
|
|
||||||
|
+prepare() {
|
||||||
|
+ mv ffmpeg-*/ "${builddir}"
|
||||||
|
+}
|
||||||
|
+
|
||||||
|
+dev() {
|
||||||
|
+ provides="ffmpeg-dev"
|
||||||
|
+ default_dev
|
||||||
|
+}
|
||||||
|
+
|
||||||
|
# https://ffmpeg.org/fate.html
|
||||||
|
check() {
|
||||||
|
./configure \
|
||||||
|
@@ -229,6 +241,7 @@ check() {
|
||||||
|
}
|
||||||
|
|
||||||
|
package() {
|
||||||
|
+ provides="ffmpeg"
|
||||||
|
make DESTDIR="$pkgdir" install install-man
|
||||||
|
install -D -m755 tools/qt-faststart "$pkgdir/usr/bin/qt-faststart"
|
||||||
|
# strip --strip-debug "$pkgdir"/usr/lib/*.a
|
||||||
|
@@ -236,7 +249,8 @@ package() {
|
||||||
|
|
||||||
|
libs() {
|
||||||
|
pkgdesc="Libraries for ffmpeg"
|
||||||
|
- replaces="ffmpeg"
|
||||||
|
+ replaces="ffmpeg-serverkomplex"
|
||||||
|
+ provides="ffmpeg-libs"
|
||||||
|
mkdir -p "$subpkgdir"/usr
|
||||||
|
mv "$pkgdir"/usr/lib "$subpkgdir"/usr
|
||||||
|
}
|
||||||
|
diff --git a/community/ffmpeg/add-av_stream_get_first_dts-for-chromium.patch b/community/ffmpeg-serverkomplex/add-av_stream_get_first_dts-for-chromium.patch
|
||||||
|
similarity index 100%
|
||||||
|
rename from community/ffmpeg/add-av_stream_get_first_dts-for-chromium.patch
|
||||||
|
rename to community/ffmpeg-serverkomplex/add-av_stream_get_first_dts-for-chromium.patch
|
||||||
|
diff --git a/community/ffmpeg/flto-auto.patch b/community/ffmpeg-serverkomplex/flto-auto.patch
|
||||||
|
similarity index 100%
|
||||||
|
rename from community/ffmpeg/flto-auto.patch
|
||||||
|
rename to community/ffmpeg-serverkomplex/flto-auto.patch
|
||||||
|
--
|
||||||
|
2.38.1
|
||||||
|
|
||||||
Loading…
Reference in New Issue