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

98
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,31 +263,47 @@ export default function VideoPlayerPage({
</Link> </Link>
</Breadcrumb> </Breadcrumb>
<VideoPlayer <Tabs
ref={playerRef} defaultActiveKey="twitch-player"
autoplay unmountOnExit={true}
controls >
defaultVolume={volume} <Tab eventKey="twitch-player" title="Twitch player">
language="en" <ResponsiveEmbed aspectRatio="16by9">
playbackRates={[ <iframe
0.25, src={twitchEmbedURL.toString()}
0.5, frameBorder={0}
0.75, allowFullScreen>
1, </iframe>
1.25, </ResponsiveEmbed>
1.5, </Tab>
1.75, <Tab eventKey="direct-player" title="Mirror player">
2, <VideoPlayer
]} ref={playerRef}
onVolumeChange={onVolumeChange} autoplay
sources={[ controls
{ src: getHLSMasterURL(hlsServerURL, id, fileName), type: 'application/x-mpegURL' }, defaultVolume={volume}
{ src: getDASHManifestURL(dashServerURL, id, fileName), type: 'application/dash+xml' }, language="en"
{ src: getDownloadURL(id, fileName), type: 'video/mp4' }, playbackRates={[
]} 0.25,
aspectRatio="16:9" 0.5,
fill 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>
<h1 className="mb-3 mt-3"> <h1 className="mb-3 mt-3">
{title} {title}