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

// @flow
import * as MODALS from 'constants/modal_types';
import * as icons from 'constants/icons';
import * as React from 'react';
import { buildURI, normalizeURI } from 'lbry-redux';
import FileViewerInitiator from 'component/fileViewerInitiator';
import FilePrice from 'component/filePrice';
import FileDetails from 'component/fileDetails';
import FileActions from 'component/fileActions';
import DateTime from 'component/dateTime';
import Button from 'component/button';
import Page from 'component/page';
import FileDownloadLink from 'component/fileDownloadLink';
import RecommendedContent from 'component/recommendedContent';
import ClaimTags from 'component/claimTags';
import CommentsList from 'component/commentsList';
import CommentCreate from 'component/commentCreate';
import ClaimUri from 'component/claimUri';
import ClaimPreview from 'component/claimPreview';
import HelpLink from 'component/common/help-link';
import I18nMessage from 'component/i18nMessage/view';

export const FILE_WRAPPER_CLASS = 'grid-area--content';

type Props = {
  claim: StreamClaim,
  fileInfo: FileListItem,
  contentType: string,
  uri: string,
  claimIsMine: boolean,
  costInfo: ?{ cost: number },
  fetchFileInfo: string => void,
  fetchCostInfo: string => void,
  setViewed: string => void,
  isSubscribed: ?string,
  isSubscribed: boolean,
  channelUri: string,
  viewCount: number,
  prepareEdit: ({}, string, {}) => void,
  openModal: (id: string, { uri: string, claimIsMine?: boolean, isSupport?: boolean }) => void,
  markSubscriptionRead: (string, string) => void,
  fetchViewCount: string => void,
  balance: number,
  title: string,
  nsfw: boolean,
  supportOption: boolean,
};

class FilePage extends React.Component<Props> {
  componentDidMount() {
    const { uri, claim, fetchFileInfo, fetchCostInfo, setViewed, isSubscribed, fetchViewCount } = this.props;

    if (isSubscribed) {
      this.removeFromSubscriptionNotifications();
    }

    fetchViewCount(claim.claim_id);

    // always refresh file info when entering file page to see if we have the file
    // @if TARGET='app'
    fetchFileInfo(uri);
    // @endif

    // See https://github.com/lbryio/lbry-desktop/pull/1563 for discussion
    fetchCostInfo(uri);
    setViewed(uri);
  }

  componentDidUpdate(prevProps: Props) {
    const { isSubscribed, claim, uri, fileInfo, setViewed, fetchViewCount, fetchFileInfo } = this.props;

    if (!prevProps.isSubscribed && isSubscribed) {
      this.removeFromSubscriptionNotifications();
    }

    if (prevProps.uri !== uri) {
      fetchViewCount(claim.claim_id);
    }

    if (prevProps.uri !== uri) {
      setViewed(uri);
    }

    // @if TARGET='app'
    if (fileInfo === undefined) {
      fetchFileInfo(uri);
    }
    // @endif
  }

  removeFromSubscriptionNotifications() {
    // Always try to remove
    // If it doesn't exist, nothing will happen
    const { markSubscriptionRead, uri, channelUri } = this.props;
    markSubscriptionRead(channelUri, uri);
  }

  render() {
    const {
      claim,
      contentType,
      uri,
      openModal,
      claimIsMine,
      prepareEdit,
      costInfo,
      fileInfo,
      channelUri,
      viewCount,
      balance,
      title,
      nsfw,
      supportOption,
    } = this.props;
    // File info
    const { signing_channel: signingChannel } = claim;
    const channelName = signingChannel && signingChannel.name;
    const webShareable =
      costInfo && costInfo.cost === 0 && contentType && ['video', 'image', 'audio'].includes(contentType.split('/')[0]);
    // We want to use the short form uri for editing
    // This is what the user is used to seeing, they don't care about the claim id
    // We will select the claim id before they publish
    let editUri;
    if (claimIsMine) {
      const uriObject: { streamName: string, streamClaimId: string, channelName?: string } = {
        streamName: claim.name,
        streamClaimId: claim.claim_id,
      };
      if (channelName) {
        uriObject.channelName = channelName;
      }

      editUri = buildURI(uriObject);
    }

    const insufficientCredits = !claimIsMine && costInfo && costInfo.cost > balance;

    return (
      <Page className="main--file-page">
        <div className={`card ${FILE_WRAPPER_CLASS}`}>
          {!fileInfo && insufficientCredits && (
            <div className="media__insufficient-credits help--warning">
              <I18nMessage
                tokens={{
                  reward_link: <Button button="link" navigate="/$/rewards" label={__('Rewards')} />,
                }}
              >
                The publisher has chosen to charge LBC to view this content. Your balance is currently too low to view
                it. Check out %reward_link% for free LBC or send more LBC to your wallet.
              </I18nMessage>
            </div>
          )}
          <FileViewerInitiator uri={uri} insufficientCredits={insufficientCredits} />
        </div>

        <div className="columns">
          <div className="grid-area--info">
            <h1 className="media__title media__title--large">{title}</h1>

            <div className="media__subtitle">
              <div className="media__actions media__actions--between">
                <DateTime uri={uri} show={DateTime.SHOW_DATE} />
                <span>
                  {viewCount} {viewCount !== 1 ? __('Views') : __('View')}
                  <HelpLink href="https://lbry.com/faq/views" />
                </span>
              </div>

              <div className="media__actions media__actions--between">
                <div className="media__action-group--large">
                  {claimIsMine && (
                    <Button
                      button="primary"
                      icon={icons.EDIT}
                      label={__('Edit')}
                      navigate="/$/publish"
                      onClick={() => {
                        prepareEdit(claim, editUri, fileInfo);
                      }}
                    />
                  )}
                  {!claimIsMine && (
                    <Button
                      button="alt"
                      icon={icons.TIP}
                      label={__('Tip')}
                      requiresAuth={IS_WEB}
                      title={__('Send a tip to this creator')}
                      onClick={() => openModal(MODALS.SEND_TIP, { uri, claimIsMine, isSupport: false })}
                    />
                  )}
                  {(claimIsMine || (!claimIsMine && supportOption)) && (
                    <Button
                      button="alt"
                      icon={icons.SUPPORT}
                      label={__('Support')}
                      requiresAuth={IS_WEB}
                      title={__('Support this claim')}
                      onClick={() => openModal(MODALS.SEND_TIP, { uri, claimIsMine, isSupport: true })}
                    />
                  )}
                  <Button
                    button="alt"
                    icon={icons.SHARE}
                    label={__('Share')}
                    onClick={() => openModal(MODALS.SOCIAL_SHARE, { uri, webShareable })}
                  />
                </div>

                <div className="media__action-group--large">
                  {/* @if TARGET='app' */}
                  <FileDownloadLink uri={uri} />
                  {/* @endif */}
                  <FileActions uri={uri} claimId={claim.claim_id} />
                </div>
              </div>
            </div>

            <hr />

            {channelUri ? (
              <ClaimPreview uri={channelUri} type="inline" properties={false} />
            ) : (
              <div className="claim-preview--inline claim-preview-title">{__('Anonymous')}</div>
            )}

            <div className="media__info--large">
              <FileDetails uri={uri} />
              <ClaimTags uri={uri} type="large" />
            </div>
            <div className="media__info-title">{__('Comments')}</div>
            <section className="section">
              <CommentCreate uri={uri} />
            </section>
            <section className="section">
              <CommentsList uri={uri} />
            </section>
          </div>
          <div className="grid-area--related">
            <div className="media__actions media__actions--between media__actions--nowrap">
              <ClaimUri uri={uri} />
              <div className="file-properties">
                {nsfw && <div className="badge badge--mature">{__('Mature')}</div>}
                <FilePrice badge uri={normalizeURI(uri)} />
              </div>
            </div>
            <RecommendedContent uri={uri} />
          </div>
        </div>
      </Page>
    );
  }
}

export default FilePage;