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

310 lines
10 KiB
React
Raw Normal View History

2019-06-11 20:10:58 +02:00
// @flow
import type { Node } from 'react';
import React, { useEffect, forwardRef } from 'react';
import { NavLink, withRouter } from 'react-router-dom';
2019-06-11 20:10:58 +02:00
import classnames from 'classnames';
2019-06-27 08:18:45 +02:00
import { parseURI, convertToShareLink } from 'lbry-redux';
2019-06-11 20:10:58 +02:00
import { openCopyLinkMenu } from 'util/context-menu';
import { formatLbryUrlForWeb } from 'util/url';
2019-08-25 13:42:25 +02:00
import { isEmpty } from 'util/object';
2020-01-06 19:32:35 +01:00
import FileThumbnail from 'component/fileThumbnail';
2019-06-11 20:10:58 +02:00
import UriIndicator from 'component/uriIndicator';
import FileProperties from 'component/fileProperties';
2019-06-19 07:05:43 +02:00
import ClaimTags from 'component/claimTags';
2019-06-11 20:10:58 +02:00
import SubscribeButton from 'component/subscribeButton';
import ChannelThumbnail from 'component/channelThumbnail';
import BlockButton from 'component/blockButton';
2020-02-12 19:59:48 +01:00
import ClaimSupportButton from 'component/claimSupportButton';
import useGetThumbnail from 'effects/use-get-thumbnail';
2020-01-30 23:25:15 +01:00
import ClaimPreviewTitle from 'component/claimPreviewTitle';
2020-01-31 17:12:47 +01:00
import ClaimPreviewSubtitle from 'component/claimPreviewSubtitle';
2020-01-31 17:43:14 +01:00
import ClaimRepostAuthor from 'component/claimRepostAuthor';
2020-02-05 03:54:19 +01:00
import FileDownloadLink from 'component/fileDownloadLink';
import AbandonedChannelPreview from 'component/abandonedChannelPreview';
2019-06-11 20:10:58 +02:00
type Props = {
uri: string,
claim: ?Claim,
obscureNsfw: boolean,
showUserBlocked: boolean,
2019-06-11 20:10:58 +02:00
claimIsMine: boolean,
pending?: boolean,
resolveUri: string => void,
isResolvingUri: boolean,
history: { push: string => void },
thumbnail: string,
title: string,
nsfw: boolean,
2019-07-21 23:31:22 +02:00
placeholder: string,
2019-06-19 07:05:43 +02:00
type: string,
2019-07-11 20:06:25 +02:00
hasVisitedUri: boolean,
blackListedOutpoints: Array<{
txid: string,
nout: number,
}>,
filteredOutpoints: Array<{
txid: string,
nout: number,
}>,
blockedChannelUris: Array<string>,
channelIsBlocked: boolean,
isSubscribed: boolean,
actions: boolean | Node | string | number,
2020-02-11 20:04:51 +01:00
properties: boolean | Node | string | number | (Claim => Node),
onClick?: any => any,
2019-11-22 22:13:00 +01:00
hideBlock?: boolean,
streamingUrl: ?string,
getFile: string => void,
2020-01-08 17:36:49 +01:00
customShouldHide?: Claim => boolean,
2020-02-05 19:01:07 +01:00
showUnresolvedClaim?: boolean,
2020-02-12 19:59:48 +01:00
includeSupportAction?: boolean,
2019-06-11 20:10:58 +02:00
};
2019-08-02 08:28:14 +02:00
const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
2019-06-11 20:10:58 +02:00
const {
obscureNsfw,
claimIsMine,
pending,
history,
uri,
isResolvingUri,
thumbnail,
nsfw,
resolveUri,
claim,
placeholder,
2019-06-19 07:05:43 +02:00
type,
blackListedOutpoints,
filteredOutpoints,
blockedChannelUris,
2019-07-11 20:06:25 +02:00
hasVisitedUri,
showUserBlocked,
channelIsBlocked,
isSubscribed,
actions,
properties,
onClick,
2019-11-22 22:13:00 +01:00
hideBlock,
getFile,
streamingUrl,
2020-01-08 17:36:49 +01:00
customShouldHide,
2020-02-05 19:01:07 +01:00
showUnresolvedClaim,
2020-02-12 19:59:48 +01:00
includeSupportAction,
2019-06-11 20:10:58 +02:00
} = props;
2019-10-03 23:40:54 +02:00
const shouldFetch =
claim === undefined || (claim !== null && claim.value_type === 'channel' && isEmpty(claim.meta) && !pending);
2019-07-21 23:31:22 +02:00
const abandoned = !isResolvingUri && !claim;
2020-02-05 19:01:07 +01:00
const showPublishLink = abandoned && !showUnresolvedClaim && placeholder === 'publish';
2019-07-23 10:05:51 +02:00
const hideActions = type === 'small' || type === 'tooltip';
const canonicalUrl = claim && claim.canonical_url;
2019-07-21 23:31:22 +02:00
let isValid = false;
if (uri) {
try {
parseURI(uri);
isValid = true;
} catch (e) {
isValid = false;
}
2019-07-11 21:03:31 +02:00
}
2019-07-05 20:11:55 +02:00
2019-07-11 21:03:31 +02:00
const isChannel = isValid ? parseURI(uri).isChannel : false;
2019-07-29 16:12:53 +02:00
const signingChannel = claim && claim.signing_channel;
2020-02-05 00:54:49 +01:00
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
2019-10-17 18:58:28 +02:00
let shouldHide =
placeholder !== 'loading' &&
!showUserBlocked &&
2020-02-05 19:01:07 +01:00
((abandoned && !showUnresolvedClaim && !showPublishLink) || (!claimIsMine && obscureNsfw && nsfw));
2019-07-05 20:11:55 +02:00
// 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)
);
2019-07-05 20:11:55 +02:00
}
// 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
2019-08-02 17:11:31 +02:00
// e.g. fetchRecommendedSubscriptions
2019-10-08 18:25:33 +02:00
if (claim && isChannel && !shouldHide && !showUserBlocked && blockedChannelUris.length) {
shouldHide = blockedChannelUris.some(blockedUri => blockedUri === claim.permanent_url);
}
2019-06-11 20:10:58 +02:00
2020-01-08 17:36:49 +01:00
if (!shouldHide && customShouldHide && claim) {
if (customShouldHide(claim)) {
shouldHide = true;
}
}
2020-01-13 20:12:27 +01:00
// 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;
2019-06-11 20:10:58 +02:00
function handleContextMenu(e) {
// @if TARGET='app'
2019-06-11 20:10:58 +02:00
e.preventDefault();
e.stopPropagation();
if (claim) {
2019-11-02 16:03:21 +01:00
openCopyLinkMenu(convertToShareLink(claim.canonical_url || claim.permanent_url), e);
2019-06-11 20:10:58 +02:00
}
// @endif
2019-06-11 20:10:58 +02:00
}
function handleOnClick(e) {
if (onClick) {
onClick(e);
}
if (claim && !pending) {
2020-02-05 00:54:49 +01:00
history.push(navigateUrl);
2019-06-11 20:10:58 +02:00
}
}
useEffect(() => {
2019-08-25 13:42:25 +02:00
if (isValid && !isResolvingUri && shouldFetch && uri) {
2019-06-11 20:10:58 +02:00
resolveUri(uri);
}
2019-08-25 13:42:25 +02:00
}, [isValid, isResolvingUri, uri, resolveUri, shouldFetch]);
2019-06-11 20:10:58 +02:00
if (shouldHide) {
return null;
}
2020-02-05 19:01:07 +01:00
if (placeholder === 'loading' || claim === undefined || (isResolvingUri && !claim)) {
2019-06-11 20:10:58 +02:00
return (
2020-01-31 17:43:14 +01:00
<li
disabled
className={classnames('claim-preview__wrapper', {
'claim-preview__wrapper--channel': isChannel && type !== 'inline',
'claim-preview__wrapper--inline': type === 'inline',
})}
>
<div className={classnames('claim-preview', { 'claim-preview--large': type === 'large' })}>
<div className="placeholder media__thumb" />
<div className="placeholder__wrapper">
<div className="placeholder claim-preview__title" />
<div className="placeholder media__subtitle" />
</div>
2019-06-11 20:10:58 +02:00
</div>
</li>
);
}
2020-02-05 19:01:07 +01:00
if (!shouldFetch && showUnresolvedClaim && !isResolvingUri && claim === null) {
return <AbandonedChannelPreview uri={uri} type />;
}
if (placeholder === 'publish' && !claim && uri.startsWith('lbry://@')) {
return null;
}
2019-06-11 20:10:58 +02:00
return (
<li
2019-08-02 08:28:14 +02:00
ref={ref}
2019-06-11 20:10:58 +02:00
role="link"
onClick={pending || type === 'inline' ? undefined : handleOnClick}
2019-06-11 20:10:58 +02:00
onContextMenu={handleContextMenu}
2020-01-31 17:43:14 +01:00
className={classnames('claim-preview__wrapper', {
'claim-preview__wrapper--channel': isChannel && type !== 'inline',
'claim-preview__wrapper--inline': type === 'inline',
'claim-preview__wrapper--small': type === 'small',
2019-06-11 20:10:58 +02:00
})}
>
<ClaimRepostAuthor uri={uri} />
2019-06-11 20:10:58 +02:00
2020-01-31 17:43:14 +01:00
<div
className={classnames('claim-preview', {
'claim-preview--small': type === 'small' || type === 'tooltip',
'claim-preview--large': type === 'large',
'claim-preview--inline': type === 'inline',
'claim-preview--tooltip': type === 'tooltip',
'claim-preview--channel': isChannel,
'claim-preview--visited': !isChannel && !claimIsMine && hasVisitedUri,
'claim-preview--pending': pending,
})}
>
{isChannel && claim ? (
<UriIndicator uri={uri} link>
<ChannelThumbnail uri={uri} obscure={channelIsBlocked} />
</UriIndicator>
) : (
<NavLink {...navLinkProps}>
2020-02-05 03:54:19 +01:00
<FileThumbnail thumbnail={thumbnailUrl}>
{/* @if TARGET='app' */}
{claim && (
<div className="claim-preview__hover-actions">
<FileDownloadLink uri={canonicalUrl} hideOpenButton hideDownloadStatus />
</div>
)}
2020-02-05 03:54:19 +01:00
{/* @endif */}
</FileThumbnail>
</NavLink>
2020-01-31 17:43:14 +01:00
)}
<div className="claim-preview__text">
<div className="claim-preview-metadata">
<div className="claim-preview-info">
<NavLink {...navLinkProps}>
<ClaimPreviewTitle uri={uri} />
</NavLink>
2020-01-31 17:43:14 +01:00
{!isChannel && <FileProperties uri={uri} />}
</div>
<ClaimPreviewSubtitle uri={uri} type={type} />
</div>
2020-02-11 19:19:09 +01:00
{type !== 'small' && (
<div className="claim-preview__actions">
{!pending && (
<React.Fragment>
{hideActions ? null : actions !== undefined ? (
actions
) : (
<div className="card__actions--inline">
{isChannel && !channelIsBlocked && !claimIsMine && (
<SubscribeButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
)}
{!hideBlock && isChannel && !isSubscribed && !claimIsMine && (
<BlockButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
)}
2020-02-12 19:59:48 +01:00
{includeSupportAction && <ClaimSupportButton uri={uri} />}
2020-02-11 19:19:09 +01:00
</div>
)}
</React.Fragment>
)}
2020-02-11 20:04:51 +01:00
{claim && (
<React.Fragment>
{typeof properties === 'function' ? (
properties(claim)
) : properties !== undefined ? (
properties
) : (
<ClaimTags uri={uri} type={type} />
)}
</React.Fragment>
)}
2020-02-11 19:19:09 +01:00
</div>
)}
2019-06-11 20:10:58 +02:00
</div>
</div>
</li>
);
2019-08-02 08:28:14 +02:00
});
2019-06-11 20:10:58 +02:00
export default withRouter(ClaimPreview);