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 { useRouter } from 'next/router';
import { import {
Breadcrumb, Button, ButtonGroup, Col, Row, Breadcrumb, Button, ButtonGroup, Col, ResponsiveEmbed, Row, Tab, Tabs,
} from 'react-bootstrap'; } from 'react-bootstrap';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
@ -129,6 +129,10 @@ const getProps = withSession(async (req, _res, { id, vslug }: { id: string, vslu
volume = volumeSessionValue; volume = volumeSessionValue;
} }
if (!req.headers.host) {
throw new Error(JSON.stringify(req.headers))
}
// Pass data to the page via props // Pass data to the page via props
return { return {
props: { props: {
@ -139,19 +143,7 @@ const getProps = withSession(async (req, _res, { id, vslug }: { id: string, vslu
title, title,
hlsServerURL, hlsServerURL,
dashServerURL, dashServerURL,
twitchPlayerParentKey: req.headers.host.split(':')[0],
// 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),
basePath, basePath,
}, },
}; };
@ -174,6 +166,7 @@ export default function VideoPlayerPage({
hlsServerURL, hlsServerURL,
dashServerURL, dashServerURL,
basePath, basePath,
twitchPlayerParentKey,
}: InferGetServerSidePropsType<typeof getServerSideProps>) { }: InferGetServerSidePropsType<typeof getServerSideProps>) {
if (redirect) { if (redirect) {
const router = useRouter(); 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 ( return (
<div> <div>
<Head> <Head>
@ -247,12 +245,6 @@ export default function VideoPlayerPage({
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
{/* <pre>
<code>
{extra}
</code>
</pre> */}
<Breadcrumb> <Breadcrumb>
<Link passHref href="/"> <Link passHref href="/">
<Breadcrumb.Item> <Breadcrumb.Item>
@ -271,6 +263,20 @@ export default function VideoPlayerPage({
</Link> </Link>
</Breadcrumb> </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 <VideoPlayer
ref={playerRef} ref={playerRef}
autoplay autoplay
@ -296,6 +302,8 @@ export default function VideoPlayerPage({
aspectRatio="16:9" aspectRatio="16:9"
fill fill
/> />
</Tab>
</Tabs>
<h1 className="mb-3 mt-3"> <h1 className="mb-3 mt-3">
{title} {title}