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

Embed twitch player and default to it.

master
Icedream 2021-01-03 20:23:58 +01:00
parent f46a48c49c
commit 1d0a6df848
1 changed files with 53 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,7 @@ import Link from 'next/link';
import { useRouter } from 'next/router';
import {
Breadcrumb, Button, ButtonGroup, Col, Row,
Breadcrumb, Button, ButtonGroup, Col, ResponsiveEmbed, Row, Tab, Tabs,
} from 'react-bootstrap';
import { useIntl } from 'react-intl';
@ -129,6 +129,10 @@ const getProps = withSession(async (req, _res, { id, vslug }: { id: string, vslu
volume = volumeSessionValue;
}
if (!req.headers.host) {
throw new Error(JSON.stringify(req.headers))
}
// Pass data to the page via props
return {
props: {
@ -139,19 +143,7 @@ const getProps = withSession(async (req, _res, { id, vslug }: { id: string, vslu
title,
hlsServerURL,
dashServerURL,
// extra: ((o) => Object
// .keys(o)
// .map((k) => {
// if (k === undefined || k === null) {
// return JSON.stringify(k);
// }
// if (k.toString) {
// return k.toString();
// }
// return '<something>';
// }).join('\n'))(req.socket),
twitchPlayerParentKey: req.headers.host.split(':')[0],
basePath,
},
};
@ -174,6 +166,7 @@ export default function VideoPlayerPage({
hlsServerURL,
dashServerURL,
basePath,
twitchPlayerParentKey,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
if (redirect) {
const router = useRouter();
@ -226,6 +219,11 @@ export default function VideoPlayerPage({
}
}
const twitchEmbedURL = new URL("https://player.twitch.tv");
twitchEmbedURL.searchParams.append('video', sourceVideoURL.split('/').pop());
twitchEmbedURL.searchParams.append('parent', twitchPlayerParentKey);
twitchEmbedURL.searchParams.append('t', `${Math.floor(sourceVideoStart / 60)}m${sourceVideoStart % 60}s`)
return (
<div>
<Head>
@ -247,12 +245,6 @@ export default function VideoPlayerPage({
<link rel="icon" href="/favicon.ico" />
</Head>
{/* <pre>
<code>
{extra}
</code>
</pre> */}
<Breadcrumb>
<Link passHref href="/">
<Breadcrumb.Item>
@ -271,6 +263,20 @@ export default function VideoPlayerPage({
</Link>
</Breadcrumb>
<Tabs
defaultActiveKey="twitch-player"
unmountOnExit={true}
>
<Tab eventKey="twitch-player" title="Twitch player">
<ResponsiveEmbed aspectRatio="16by9">
<iframe
src={twitchEmbedURL.toString()}
frameBorder={0}
allowFullScreen>
</iframe>
</ResponsiveEmbed>
</Tab>
<Tab eventKey="direct-player" title="Mirror player">
<VideoPlayer
ref={playerRef}
autoplay
@ -296,6 +302,8 @@ export default function VideoPlayerPage({
aspectRatio="16:9"
fill
/>
</Tab>
</Tabs>
<h1 className="mb-3 mt-3">
{title}