// @flow import type { Node } from 'react'; import React, { useEffect, forwardRef } from 'react'; import { NavLink, withRouter } from 'react-router-dom'; import classnames from 'classnames'; import { parseURI, convertToShareLink } from 'lbry-redux'; import { openCopyLinkMenu } from 'util/context-menu'; import { formatLbryUrlForWeb } from 'util/url'; import { isEmpty } from 'util/object'; import FileThumbnail from 'component/fileThumbnail'; import UriIndicator from 'component/uriIndicator'; 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 ClaimSupportButton from 'component/claimSupportButton'; import useGetThumbnail from 'effects/use-get-thumbnail'; import ClaimPreviewTitle from 'component/claimPreviewTitle'; import ClaimPreviewSubtitle from 'component/claimPreviewSubtitle'; import ClaimRepostAuthor from 'component/claimRepostAuthor'; import FileDownloadLink from 'component/fileDownloadLink'; import AbandonedChannelPreview from 'component/abandonedChannelPreview'; 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, actions: boolean | Node | string | number, properties: boolean | Node | string | number | (Claim => Node), onClick?: any => any, hideBlock?: boolean, streamingUrl: ?string, getFile: string => void, customShouldHide?: Claim => boolean, showUnresolvedClaim?: boolean, includeSupportAction?: boolean, }; const ClaimPreview = forwardRef((props: Props, ref: any) => { const { obscureNsfw, claimIsMine, pending, history, uri, isResolvingUri, thumbnail, nsfw, resolveUri, claim, placeholder, type, blackListedOutpoints, filteredOutpoints, blockedChannelUris, hasVisitedUri, showUserBlocked, channelIsBlocked, isSubscribed, actions, properties, onClick, hideBlock, getFile, streamingUrl, customShouldHide, showUnresolvedClaim, includeSupportAction, } = props; const shouldFetch = claim === undefined || (claim !== null && claim.value_type === 'channel' && isEmpty(claim.meta) && !pending); const abandoned = !isResolvingUri && !claim; const showPublishLink = abandoned && !showUnresolvedClaim && placeholder === 'publish'; const hideActions = type === 'small' || type === 'tooltip'; const canonicalUrl = claim && claim.canonical_url; let isValid = false; if (uri) { try { parseURI(uri); isValid = true; } catch (e) { isValid = false; } } const isChannel = isValid ? parseURI(uri).isChannel : false; const signingChannel = claim && claim.signing_channel; const navigateUrl = formatLbryUrlForWeb((claim && claim.canonical_url) || uri || '/'); const navLinkProps = { to: navigateUrl, onClick: e => e.stopPropagation(), }; // do not block abandoned and nsfw claims if showUserBlocked is passed let shouldHide = placeholder !== 'loading' && !showUserBlocked && ((abandoned && !showUnresolvedClaim && !showPublishLink) || (!claimIsMine && obscureNsfw && nsfw)); // This will be replaced once blocking is done at the wallet server level if (claim && !claimIsMine && !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 && !claimIsMine && !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); } if (!shouldHide && customShouldHide && claim) { if (customShouldHide(claim)) { shouldHide = true; } } // Weird placement warning // Make sure this happens after we figure out if this claim needs to be hidden const thumbnailUrl = useGetThumbnail(uri, claim, streamingUrl, getFile, shouldHide) || thumbnail; 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); } if (claim && !pending) { history.push(navigateUrl); } } useEffect(() => { if (isValid && !isResolvingUri && shouldFetch && uri) { resolveUri(uri); } }, [isValid, isResolvingUri, uri, resolveUri, shouldFetch]); if (shouldHide) { return null; } if (placeholder === 'loading' || claim === undefined || (isResolvingUri && !claim)) { return (
  • ); } if (!shouldFetch && showUnresolvedClaim && !isResolvingUri && claim === null) { return ; } if (placeholder === 'publish' && !claim && uri.startsWith('lbry://@')) { return null; } return (
  • {isChannel && claim ? ( ) : ( {/* @if TARGET='app' */} {claim && (
    )} {/* @endif */}
    )}
    {!isChannel && }
    {type !== 'small' && (
    {!pending && ( {hideActions ? null : actions !== undefined ? ( actions ) : (
    {isChannel && !channelIsBlocked && !claimIsMine && ( )} {!hideBlock && isChannel && !isSubscribed && !claimIsMine && ( )} {includeSupportAction && }
    )}
    )} {claim && ( {typeof properties === 'function' ? ( properties(claim) ) : properties !== undefined ? ( properties ) : ( )} )}
    )}
  • ); }); export default withRouter(ClaimPreview);