// @flow import type { Node } from 'react'; import React, { Fragment, useEffect, forwardRef } from 'react'; import classnames from 'classnames'; import { parseURI, convertToShareLink } from 'lbry-redux'; import { withRouter } from 'react-router-dom'; import { openCopyLinkMenu } from 'util/context-menu'; import { formatLbryUriForWeb } from 'util/uri'; import { isEmpty } from 'util/object'; import CardMedia from 'component/cardMedia'; import UriIndicator from 'component/uriIndicator'; import TruncatedText from 'component/common/truncated-text'; import DateTime from 'component/dateTime'; import FileProperties from 'component/fileProperties'; import ClaimTags from 'component/claimTags'; import SubscribeButton from 'component/subscribeButton'; import ChannelThumbnail from 'component/channelThumbnail'; import BlockButton from 'component/blockButton'; import Button from 'component/button'; type Props = { uri: string, claim: ?Claim, obscureNsfw: boolean, showUserBlocked: boolean, claimIsMine: boolean, pending?: boolean, resolveUri: string => void, isResolvingUri: boolean, history: { push: string => void }, thumbnail: string, title: string, nsfw: boolean, placeholder: string, type: string, hasVisitedUri: boolean, blackListedOutpoints: Array<{ txid: string, nout: number, }>, filteredOutpoints: Array<{ txid: string, nout: number, }>, blockedChannelUris: Array, channelIsBlocked: boolean, isSubscribed: boolean, beginPublish: string => void, actions: boolean | Node | string | number, properties: boolean | Node | string | number, onClick?: any => any, }; const ClaimPreview = forwardRef((props: Props, ref: any) => { const { obscureNsfw, claimIsMine, pending, history, uri, isResolvingUri, thumbnail, title, nsfw, resolveUri, claim, placeholder, type, blackListedOutpoints, filteredOutpoints, blockedChannelUris, hasVisitedUri, showUserBlocked, channelIsBlocked, isSubscribed, beginPublish, actions, properties, onClick, } = props; const shouldFetch = claim === undefined || (claim !== null && claim.value_type === 'channel' && isEmpty(claim.meta) && !pending); const abandoned = !isResolvingUri && !claim; const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0; const showPublishLink = abandoned && placeholder === 'publish'; const hideActions = type === 'small' || type === 'tooltip'; let name; let isValid = false; if (uri) { try { ({ streamName: name } = parseURI(uri)); isValid = true; } catch (e) { isValid = false; } } const isChannel = isValid ? parseURI(uri).isChannel : false; const includeChannelTooltip = type !== 'inline' && type !== 'tooltip' && !isChannel; const signingChannel = claim && claim.signing_channel; // do not block abandoned and nsfw claims if showUserBlocked is passed let shouldHide = placeholder !== 'loading' && !showUserBlocked && ((abandoned && !showPublishLink) || (!claimIsMine && obscureNsfw && nsfw)); // This will be replaced once blocking is done at the wallet server level if (claim && !shouldHide && blackListedOutpoints) { shouldHide = blackListedOutpoints.some( outpoint => (signingChannel && outpoint.txid === signingChannel.txid && outpoint.nout === signingChannel.nout) || (outpoint.txid === claim.txid && outpoint.nout === claim.nout) ); } // We're checking to see if the stream outpoint // or signing channel outpoint is in the filter list if (claim && !shouldHide && filteredOutpoints) { shouldHide = filteredOutpoints.some( outpoint => (signingChannel && outpoint.txid === signingChannel.txid && outpoint.nout === signingChannel.nout) || (outpoint.txid === claim.txid && outpoint.nout === claim.nout) ); } // block stream claims if (claim && !shouldHide && !showUserBlocked && blockedChannelUris.length && signingChannel) { shouldHide = blockedChannelUris.some(blockedUri => blockedUri === signingChannel.permanent_url); } // block channel claims if we can't control for them in claim search // e.g. fetchRecommendedSubscriptions if (claim && isChannel && !shouldHide && !showUserBlocked && blockedChannelUris.length) { shouldHide = blockedChannelUris.some(blockedUri => blockedUri === claim.permanent_url); } function handleContextMenu(e) { // @if TARGET='app' e.preventDefault(); e.stopPropagation(); if (claim) { openCopyLinkMenu(convertToShareLink(claim.canonical_url || claim.permanent_url), e); } // @endif } function handleOnClick(e) { if (onClick) { onClick(e); } else if ((isChannel || title) && !pending) { history.push(formatLbryUriForWeb(claim && claim.canonical_url ? claim.canonical_url : uri)); } } useEffect(() => { if (isValid && !isResolvingUri && shouldFetch && uri) { resolveUri(uri); } }, [isValid, isResolvingUri, uri, resolveUri, shouldFetch]); if (shouldHide) { return null; } if (placeholder === 'loading' || (isResolvingUri && !claim)) { return (
  • ); } return (
  • {isChannel ? : }
    {claim ? : {__('Nothing here')}}
    {!pending && ( {hideActions ? null : actions !== undefined ? ( actions ) : (
    {isChannel && !channelIsBlocked && !claimIsMine && ( )} {isChannel && !isSubscribed && !claimIsMine && ( )} {!isChannel && claim && }
    )}
    )}
    {!isResolvingUri && (
    {claim ? ( ) : (
    {__('Publish something and claim this spot!')}
    )}
    {pending ? (
    Pending...
    ) : ( claim && (isChannel ? ( type !== 'inline' && `${claimsInChannel} ${__('publishes')}` ) : ( )) )}
    )}
    {properties !== undefined ? properties : }
  • ); }); export default withRouter(ClaimPreview);