gdq-archive/frontend/pages/[id]/[vslug].tsx

/**
 * 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 Head from 'next/head';
import Link from 'next/link';
import { useRouter } from 'next/router';

import {
  Breadcrumb, Button, ButtonGroup, Col, Ratio, Row, Tab, Tabs,
} from 'react-bootstrap';

import { useIntl } from 'react-intl';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { GetServerSideProps, GetServerSidePropsResult, InferGetServerSidePropsType } from 'next';
import { VideoEntry } from 'util/datatypes/VideoList';
import { basename } from 'path';
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 VideoPlayer from '../../components/VideoPlayer';
import CopyField from '../../components/CopyField';
import { FormattedMessage } from '../../components/localization';
import sanitizeFileName from '../../util/sanitizeFileName';
import { notFound } from '../../util/status';
import {
  getDownloadURL,
  getIndex,
  getVideos,
  submitPreferences,
} from '../../util/api';
import DownloadButton from '../../components/DownloadButton';

interface VideoPlayerPageParameters extends ParsedUrlQuery {
  id: string,
  vslug: string,
}

interface VideoPlayerPageProps {
  id?: string,
  vslug?: string,
  video?: number | VideoEntry,
  volume?: number,
  redirect?: boolean,
  title?: string,
  hlsServerURL?: string,
  dashServerURL?: string,
  basePath?: string,
  twitchPlayerParentKey?: string,
}

const getProps = withSession(async (req, _res, { id, vslug }: VideoPlayerPageParameters): Promise<GetServerSidePropsResult<VideoPlayerPageProps>> => {
  if (typeof id !== 'string') {
    throw new Error('only expected a single id');
  }

  if (typeof vslug !== 'string') {
    throw new Error('only expected a single vslug');
  }

  // Fetch URL to thumbnails server
  const {
    ids,
    servers: { hls: hlsServerURL, dash: dashServerURL },
  } = await getIndex();

  const vodMeta = ids.find(({
    id: thisID,
  }: {
    id: string
  }) => id === thisID);
  if (!vodMeta) {
    return { props: {} };
  }

  // Fetch list of videos for this VOD ID
  const vodInfo = await getVideos(id);
  let videos;
  if (Array.isArray(vodInfo)) {
    videos = vodInfo;
  } else {
    videos = vodInfo.videos;
  }

  // Check if vslug is actually an index number (old app style)
  /*
  NOTE - parseInt will accept strings CONTAINING numbers.
  This is supposed to reject strings that are not JUST numbers.
  */
  const vindexNum = +vslug;
  if (!Number.isNaN(vindexNum)) {
    // Check if video exists
    if (vindexNum < 0 || vindexNum >= videos.length) {
      return { props: {} };
    }
    const video = videos[vindexNum];
    return {
      props: {
        redirect: true,
        id,
        video,
        vslug: video.slug,
      },
    };
  }

  // Check if vslug is actually point to a file name
  const sanitizedFileName = `${sanitizeFileName(basename(vslug, '.mp4'))}.mp4`;
  const realVIndex = videos.findIndex(
    (video: VideoEntry) => video.downloadFileName === sanitizedFileName,
  );
  if (realVIndex >= 0) {
    const video = videos[realVIndex];
    return {
      props: {
        redirect: true,
        id,
        video: realVIndex,
        vslug: video.slug,
      },
    };
  }

  // Check if we can find any video with matching vslug
  const video = videos.find(({ slug }: VideoEntry) => slug === vslug);
  if (!video) {
    return { props: {} };
  }

  // At this point we found the right video, just get more information at this point
  const { title } = vodMeta;

  // let basePath = null;
  // basePath = `${JSON.stringify(req.toString())}`;
  // TODO - detect HTTPS properly
  // NOTE - req.socket.encrypted fails in TypeScript due to typing
  const basePath = `https://${req.headers.host}`;

  // ask for user's volume preference
  let volume: number = 0.5;
  const volumeSessionValue = req.session.get('volume');
  if (typeof volumeSessionValue === 'string') {
    const parsedNumber = parseFloat(volumeSessionValue);
    if (!Number.isNaN(parsedNumber)) {
      volume = parsedNumber;
    }
  } else if (typeof volumeSessionValue === 'number' && !Number.isNaN(volumeSessionValue)) {
    volume = volumeSessionValue;
  }

  if (!req.headers.host) {
    throw new Error(JSON.stringify(req.headers));
  }

  // Pass data to the page via props
  return {
    props: {
      id,
      vslug,
      video,
      volume,
      title,
      hlsServerURL,
      dashServerURL,
      twitchPlayerParentKey: req.headers.host.split(':')[0],
      basePath,
    },
  };
});

export const getServerSideProps: GetServerSideProps<VideoPlayerPageProps, VideoPlayerPageParameters> = async ({
  req,
  res,
  params,
}) => getProps(req, res, params);

export default function VideoPlayerPage({
  id,
  vslug,
  video,
  volume,
  // extra,
  redirect,
  title,
  hlsServerURL,
  dashServerURL,
  basePath,
  twitchPlayerParentKey,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  if (redirect) {
    const router = useRouter();

    React.useEffect(() => {
      router.push(`/${id}/${vslug}`);
    });

    return (
      <p>
        You will be redirected
        {' '}
        <Link href="/[id]/[vslug]" as={`/${id}/${vslug}`}>
          <span>here</span>
        </Link>
        …
      </p>
    );
  }

  if (!video) {
    return notFound();
  }

  const intl = useIntl();

  const playerRef = React.useRef<VideoPlayer>();

  if (typeof video === 'number') {
    throw new Error('Logic error - video should not be a number');
  }

  const {
    downloadFileName,
    title: videoTitle,
    sourceVideoID,
    sourceVideoURL,
    sourceVideoStart: sourceVideoStartStr,
    run,
    youtubeVideoID,
  } = video;

  // convert possibly-string sourceVideoStart field to actual number
  let sourceVideoStart: number;
  if (typeof sourceVideoStartStr === 'string') {
    sourceVideoStart = parseInt(sourceVideoStartStr, 10);
  } else {
    sourceVideoStart = sourceVideoStartStr;
  }

  let volumeChangeDebounceTimer: NodeJS.Timeout = null;
  const [currentVolume, trackCurrentVolume] = React.useState(volume);
  async function onVolumeChange() {
    const newVolume = playerRef.current.player.volume();
    if (Math.abs(newVolume - currentVolume) > 0.05) {
      if (volumeChangeDebounceTimer !== null) {
        clearTimeout(volumeChangeDebounceTimer);
      }
      volumeChangeDebounceTimer = setTimeout(() => {
        submitPreferences({
          volume: newVolume,
        });
        trackCurrentVolume(newVolume);
      }, 1000);
    }
  }

  const tabs: Array<React.ReactElement<typeof Tab>> = [];
  let defaultTab = 'mirror-player';
  const downloadButtons: Array<React.ReactElement> = [];

  // Mirror player tab
  if (typeof downloadFileName === 'string' && downloadFileName.length > 0) {
    tabs.push(
      <Tab
        eventKey="mirror-player"
        title={intl.formatMessage({
          id: 'VideoPlayerPage.tab.mirrorPlayer',
          description: 'Title for mirror player tab',
          defaultMessage: 'Mirror player',
        })}
      >
        <VideoPlayer
          ref={playerRef}
          autoplay
          controls
          defaultVolume={volume}
          language="en"
          playbackRates={[
            0.25,
            0.5,
            0.75,
            1,
            1.25,
            1.5,
            1.75,
            2,
          ]}
          // 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
      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 (
    <div>
      <Head>
        <title>
          {`${videoTitle} – ${title} – ${intl.formatMessage({
            id: 'App.title',
            description: 'The full title of the website',
            defaultMessage: 'Games Done Quick Instant Archive',
          })}`}
        </title>
      </Head>

      <Breadcrumb>
        <Link legacyBehavior passHref href="/">
          <Breadcrumb.Item>
            <FormattedMessage
              id="Breadcrumb.homeTitle"
              defaultMessage="GDQ Instant Archive"
              description="Root node text in breadcrumb"
            />
          </Breadcrumb.Item>
        </Link>
        <Link legacyBehavior passHref href="/[id]" as={`/${id}`}>
          <Breadcrumb.Item>{title}</Breadcrumb.Item>
        </Link>
        <Link legacyBehavior passHref href="/[id]/[vslug]" as={`/${id}/${vslug}`}>
          <Breadcrumb.Item active>{videoTitle}</Breadcrumb.Item>
        </Link>
      </Breadcrumb>

      <Tabs
        defaultActiveKey={defaultTab}
        unmountOnExit
      >
        {tabs}
      </Tabs>

      <h1 className="mt-3">
        {title}
        :
        {' '}
        {videoTitle}
      </h1>

      <h3 className="mb-3">
        {run?.category}
      </h3>

      <Row className="mb-3">
        <Col sm={12} md={7}>
          <ButtonGroup>
            {downloadButtons}
          </ButtonGroup>
        </Col>
        <Col sm={12} md={5}>
          <CopyField icon="share">
            {[basePath, id, vslug].join('/')}
          </CopyField>
        </Col>
      </Row>
    </div>
  );
}