lbry-desktop/ui/component/fileActions/view.jsx

// @flow
import * as MODALS from 'constants/modal_types';
import * as ICONS from 'constants/icons';
import React, { Fragment } from 'react';
import Button from 'component/button';
import FileDownloadLink from 'component/fileDownloadLink';
import { buildURI } from 'lbry-redux';
import * as PAGES from '../../constants/pages';
import * as CS from '../../constants/claim_search';

type Props = {
  uri: string,
  claim: StreamClaim,
  openModal: (id: string, { uri: string, claimIsMine?: boolean, isSupport?: boolean }) => void,
  prepareEdit: ({}, string, {}) => void,
  claimIsMine: boolean,
  fileInfo: FileListItem,
  costInfo: ?{ cost: number },
  contentType: string,
  supportOption: boolean,
};

function FileActions(props: Props) {
  const { fileInfo, uri, openModal, claimIsMine, claim, costInfo, contentType, supportOption, prepareEdit } = props;
  const webShareable =
    costInfo && costInfo.cost === 0 && contentType && ['video', 'image', 'audio'].includes(contentType.split('/')[0]);
  const showDelete = claimIsMine || (fileInfo && (fileInfo.written_bytes > 0 || fileInfo.blobs_completed > 0));
  const claimId = claim && claim.claim_id;
  const { signing_channel: signingChannel } = claim;
  const channelName = signingChannel && signingChannel.name;
  // 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);
  }

  let repostLabel = <span>{__('Repost')}</span>;
  if (claim.meta.reposted > 0) {
    repostLabel = (
      <Fragment>
        {repostLabel}{' '}
        <Button
          button="alt"
          label={__('(%count%)', { count: claim.meta.reposted })}
          navigate={`/$/${PAGES.DISCOVER}?${CS.REPOSTED_URI_KEY}=${encodeURIComponent(uri)}`}
        />
      </Fragment>
    );
  }

  return (
    <div className="media__actions">
      <div className="section__actions">
        <Button
          button="alt"
          icon={ICONS.SHARE}
          label={__('Share')}
          onClick={() => openModal(MODALS.SOCIAL_SHARE, { uri, webShareable })}
        />
        <Button
          button="alt"
          icon={ICONS.REPOST}
          label={repostLabel}
          requiresAuth={IS_WEB}
          onClick={() => openModal(MODALS.REPOST, { uri })}
        />

        {!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 })}
          />
        )}
      </div>

      <div className="section__actions">
        <FileDownloadLink uri={uri} />

        {claimIsMine && (
          <Button
            button="alt"
            icon={ICONS.EDIT}
            label={__('Edit')}
            navigate="/$/publish"
            onClick={() => {
              prepareEdit(claim, editUri, fileInfo);
            }}
          />
        )}

        {showDelete && (
          <Button
            title={__('Remove from your library')}
            button="alt"
            icon={ICONS.DELETE}
            description={__('Delete')}
            onClick={() => openModal(MODALS.CONFIRM_FILE_REMOVE, { uri })}
          />
        )}
        {!claimIsMine && (
          <Button
            title={__('Report content')}
            button="alt"
            icon={ICONS.REPORT}
            href={`https://lbry.com/dmca/${claimId}`}
          />
        )}
      </div>
    </div>
  );
}

export default FileActions;