lbry-desktop/ui/page/livestreamSetup/view.jsx

// @flow
import * as PAGES from 'constants/pages';
import * as ICONS from 'constants/icons';
import * as PUBLISH_MODES from 'constants/publish_types';
import I18nMessage from 'component/i18nMessage';
import React from 'react';
import Page from 'component/page';
import Spinner from 'component/spinner';
import Button from 'component/button';
import ChannelSelector from 'component/channelSelector';
import Yrbl from 'component/yrbl';
import Lbry from 'lbry';
import { toHex } from 'util/hex';
import { FormField } from 'component/common/form';
import CopyableText from 'component/copyableText';
import Card from 'component/common/card';
import ClaimList from 'component/claimList';
import usePersistedState from 'effects/use-persisted-state';
import { LIVESTREAM_RTMP_URL } from 'constants/livestream';
import { ENABLE_NO_SOURCE_CLAIMS, CHANNEL_STAKED_LEVEL_LIVESTREAM } from 'config';

type Props = {
  hasChannels: boolean,
  fetchingChannels: boolean,
  activeChannelClaim: ?ChannelClaim,
  pendingClaims: Array<Claim>,
  doNewLivestream: (string) => void,
  fetchNoSourceClaims: (string) => void,
  myLivestreamClaims: Array<StreamClaim>,
  fetchingLivestreams: boolean,
  channelId: ?string,
  channelName: ?string,
  user: ?User,
  activeChannelStakedLevel: number,
  odyseeMembership: string,
};

export default function LivestreamSetupPage(props: Props) {
  const LIVESTREAM_CLAIM_POLL_IN_MS = 60000;
  const {
    hasChannels,
    fetchingChannels,
    activeChannelClaim,
    pendingClaims,
    doNewLivestream,
    fetchNoSourceClaims,
    myLivestreamClaims,
    fetchingLivestreams,
    channelId,
    channelName,
    user,
    odyseeMembership,
    activeChannelStakedLevel,
  } = props;

  const [sigData, setSigData] = React.useState({ signature: undefined, signing_ts: undefined });
  const [showHelp, setShowHelp] = usePersistedState('livestream-help-seen', true);

  const hasLivestreamClaims = Boolean(myLivestreamClaims.length || pendingClaims.length);

  const hasEnoughLBCToStream = activeChannelStakedLevel >= CHANNEL_STAKED_LEVEL_LIVESTREAM;
  const { odysee_live_disabled: liveDisabled, odysee_live_enabled: liveEnabled } = user || {};

  const livestreamEnabled = Boolean(
    ENABLE_NO_SOURCE_CLAIMS && user && !liveDisabled && (liveEnabled || odyseeMembership || hasEnoughLBCToStream)
  );

  let reasonAllowedToStream = '';
  if (odyseeMembership) {
    reasonAllowedToStream = 'you purchased Odysee Premium';
  } else if (liveEnabled) {
    reasonAllowedToStream = 'your livestreaming was turned on manually';
  } else if (hasEnoughLBCToStream) {
    reasonAllowedToStream = 'you have enough staked LBC';
  }

  function createStreamKey() {
    if (!channelId || !channelName || !sigData.signature || !sigData.signing_ts) return null;
    return `${channelId}?d=${toHex(channelName)}&s=${sigData.signature}&t=${sigData.signing_ts}`;
  }

  const streamKey = createStreamKey();

  const pendingLength = pendingClaims.length;
  const totalLivestreamClaims = pendingClaims.concat(myLivestreamClaims);
  const helpText = (
    <div className="section__subtitle">
      <p>
        {__(
          `Create a Livestream by first submitting your livestream details and waiting for approval confirmation. This can be done well in advance and will take a few minutes.`
        )}{' '}
        {__(
          `Scheduled livestreams will appear at the top of your channel page and for your followers. Regular livestreams will only appear once you are actually live.`
        )}{' '}
        {__(
          `Once the your livestream is confirmed, configure your streaming software (OBS, Restream, etc) and input the server URL along with the stream key in it.`
        )}
      </p>
      <p>{__(`To ensure the best streaming experience with OBS, open settings -> output`)}</p>
      <p>{__(`Select advanced mode from the dropdown at the top.`)}</p>
      <p>{__(`Ensure the following settings are selected under the streaming tab:`)}</p>
      <ul>
        <li>{__(`Bitrate: 1000 to 2500 kbps`)}</li>
        <li>{__(`Keyframes: 1`)}</li>
        <li>{__(`Profile: High`)}</li>
        <li>{__(`Tune: Zerolatency`)}</li>
      </ul>
      <p>
        {__(`If using other streaming software, make sure the bitrate is below 4500 kbps or the stream will not work.`)}
      </p>
      <p>{__(`For streaming from your mobile device, we recommend PRISM Live Studio from the app store.`)}</p>
      <p>
        {__(
          `After your stream:\nClick the Update button on the content page. This will allow you to select a replay or upload your own edited MP4. Replays are limited to 4 hours and may take a few minutes to show (use the Check For Replays button).`
        )}
      </p>
      <p>{__(`Click Save, then confirm, and you are done!`)}</p>
      <p>
        {__(
          `Note: If you don't plan on publishing your replay, you'll want to delete your livestream and then start with a fresh one next time.`
        )}
      </p>
    </div>
  );

  React.useEffect(() => {
    // ensure we have a channel
    if (channelId && channelName) {
      Lbry.channel_sign({
        channel_id: channelId,
        hexdata: toHex(channelName),
      })
        .then((data) => {
          setSigData(data);
        })
        .catch((error) => {
          setSigData({ signature: null, signing_ts: null });
        });
    }
  }, [channelName, channelId, setSigData]);

  React.useEffect(() => {
    let checkClaimsInterval;
    if (!channelId) return;

    if (!checkClaimsInterval) {
      fetchNoSourceClaims(channelId);
      checkClaimsInterval = setInterval(() => fetchNoSourceClaims(channelId), LIVESTREAM_CLAIM_POLL_IN_MS);
    }
    return () => {
      if (checkClaimsInterval) {
        clearInterval(checkClaimsInterval);
      }
    };
  }, [channelId, pendingLength, fetchNoSourceClaims]);

  const filterPending = (claims: Array<StreamClaim>) => {
    return claims.filter((claim) => {
      return !pendingClaims.some((pending) => pending.permanent_url === claim.permanent_url);
    });
  };

  const upcomingStreams = filterPending(myLivestreamClaims).filter((claim) => {
    return Number(claim.value.release_time) * 1000 > Date.now();
  });

  const pastStreams = filterPending(myLivestreamClaims).filter((claim) => {
    return Number(claim.value.release_time) * 1000 <= Date.now();
  });

  type HeaderProps = {
    title: string,
    hideBtn?: boolean,
  };

  const ListHeader = (props: HeaderProps) => {
    const { title, hideBtn = false } = props;
    return (
      <div className={'w-full flex items-center justify-between'}>
        <span>{title}</span>
        {!hideBtn && (
          <Button
            button="primary"
            iconRight={ICONS.ADD}
            onClick={() => doNewLivestream(`/$/${PAGES.UPLOAD}?type=${PUBLISH_MODES.LIVESTREAM.toLowerCase()}`)}
            label={__('Create or Schedule a New Stream')}
          />
        )}
      </div>
    );
  };

  return (
    <Page>
      {/* channel selector */}
      {!fetchingChannels && (
        <>
          <div className="section__actions--between">
            <ChannelSelector hideAnon />
          </div>
        </>
      )}

      {/* no livestreaming privs because no premium membership */}
      {!livestreamEnabled && !odyseeMembership && (
        <div style={{ marginTop: '11px' }}>
          <h2 style={{ marginBottom: '15px' }}>
            {__('To stream on Odysee, please join Odysee Premium or have 50 Credits as support on your channel')}
          </h2>

          <Button
            button="primary"
            label={__('Join Odysee Premium')}
            icon={ICONS.FINANCE}
            navigate={`/$/${PAGES.ODYSEE_MEMBERSHIP}`}
            className="membership_button"
            style={{ maxWidth: '238px' }}
          />
        </div>
      )}

      {/* show livestreaming frontend */}
      {livestreamEnabled && (
        <div className="card-stack">
          {/* getting channel data */}
          {fetchingChannels && (
            <div className="main--empty">
              <Spinner delayed />
            </div>
          )}

          {/* no channels yet */}
          {!fetchingChannels && !hasChannels && (
            <Yrbl
              type="happy"
              title={__("You haven't created a channel yet, let's fix that!")}
              actions={
                <div className="section__actions">
                  <Button button="primary" navigate={`/$/${PAGES.CHANNEL_NEW}`} label={__('Create A Channel')} />
                </div>
              }
            />
          )}

          {/* getting livestreams */}
          {fetchingLivestreams && !fetchingChannels && !hasLivestreamClaims && (
            <div className="main--empty">
              <Spinner delayed />
            </div>
          )}

          {!fetchingChannels && channelId && (
            <>
              <Card
                titleActions={
                  <Button
                    button="close"
                    icon={showHelp ? ICONS.UP : ICONS.DOWN}
                    onClick={() => setShowHelp(!showHelp)}
                  />
                }
                title={__('Go Live on Odysee')}
                subtitle={
                  <>{__(`Congratulations, you have access to livestreaming because ${reasonAllowedToStream}!`)} </>
                }
                actions={showHelp && helpText}
              />
              {streamKey && totalLivestreamClaims.length > 0 && (
                <Card
                  className="section"
                  title={__('Your stream key')}
                  actions={
                    <>
                      <CopyableText
                        primaryButton
                        name="stream-server"
                        label={__('Stream server')}
                        copyable={LIVESTREAM_RTMP_URL}
                        snackMessage={__('Copied stream server URL.')}
                      />
                      <CopyableText
                        primaryButton
                        enableInputMask
                        name="livestream-key"
                        label={__('Stream key (can be reused)')}
                        copyable={streamKey}
                        snackMessage={__('Copied stream key.')}
                      />
                    </>
                  }
                />
              )}

              {totalLivestreamClaims.length > 0 ? (
                <>
                  {Boolean(pendingClaims.length) && (
                    <div className="section">
                      <ClaimList
                        header={__('Your pending livestreams uploads')}
                        uris={pendingClaims.map((claim) => claim.permanent_url)}
                      />
                    </div>
                  )}
                  {Boolean(myLivestreamClaims.length) && (
                    <>
                      {Boolean(upcomingStreams.length) && (
                        <div className="section">
                          <ClaimList
                            header={<ListHeader title={__('Your Scheduled Livestreams')} />}
                            uris={upcomingStreams.map((claim) => claim.permanent_url)}
                          />
                        </div>
                      )}
                      <div className="section">
                        <ClaimList
                          header={
                            <ListHeader title={__('Your Past Livestreams')} hideBtn={Boolean(upcomingStreams.length)} />
                          }
                          empty={
                            <I18nMessage
                              tokens={{
                                check_again: (
                                  <Button
                                    button="link"
                                    onClick={() => fetchNoSourceClaims(channelId)}
                                    label={__('Check again')}
                                  />
                                ),
                              }}
                            >
                              Nothing here yet. %check_again%
                            </I18nMessage>
                          }
                          uris={pastStreams.map((claim) => claim.permanent_url)}
                        />
                      </div>
                    </>
                  )}
                </>
              ) : (
                <Yrbl
                  className="livestream__publish-intro"
                  title={__('No livestream publishes found')}
                  subtitle={__(
                    'You need to upload your livestream details before you can go live. Please note: Replays must be published manually after your stream via the Update button on the livestream.'
                  )}
                  actions={
                    <div className="section__actions">
                      <Button
                        button="primary"
                        onClick={() =>
                          doNewLivestream(`/$/${PAGES.UPLOAD}?type=${PUBLISH_MODES.LIVESTREAM.toLowerCase()}`)
                        }
                        label={__('Create A Livestream')}
                      />
                      <Button
                        button="alt"
                        onClick={() => {
                          fetchNoSourceClaims(channelId);
                        }}
                        label={__('Check again...')}
                      />
                    </div>
                  }
                />
              )}

              {/* Debug Stuff */}
              {streamKey && false && activeChannelClaim && (
                <div style={{ marginTop: 'var(--spacing-l)' }}>
                  <h3>Debug Info</h3>

                  {/* Channel ID */}
                  <FormField
                    name={'channelId'}
                    label={'Channel ID'}
                    type={'text'}
                    defaultValue={activeChannelClaim.claim_id}
                    readOnly
                  />

                  {/* Signature */}
                  <FormField
                    name={'signature'}
                    label={'Signature'}
                    type={'text'}
                    defaultValue={sigData.signature}
                    readOnly
                  />

                  {/* Signature TS */}
                  <FormField
                    name={'signaturets'}
                    label={'Signature Timestamp'}
                    type={'text'}
                    defaultValue={sigData.signing_ts}
                    readOnly
                  />

                  {/* Hex Data */}
                  <FormField
                    name={'datahex'}
                    label={'Hex Data'}
                    type={'text'}
                    defaultValue={toHex(activeChannelClaim.name)}
                    readOnly
                  />

                  {/* Channel Public Key */}
                  <FormField
                    name={'channelpublickey'}
                    label={'Public Key'}
                    type={'text'}
                    defaultValue={activeChannelClaim.value.public_key}
                    readOnly
                  />
                </div>
              )}
            </>
          )}
        </div>
      )}
    </Page>
  );
}