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

98 lines
2.5 KiB
React
Raw Permalink Normal View History

2019-06-09 08:57:51 +02:00
// @flow
import { INLINE_PLAYER_WRAPPER_CLASS } from 'component/fileRenderFloating/view';
2019-06-09 08:57:51 +02:00
import * as React from 'react';
import Button from 'component/button';
import classnames from 'classnames';
import EmbedPlayButton from 'component/embedPlayButton';
2020-11-12 19:46:40 +01:00
import UriIndicator from 'component/uriIndicator';
2019-06-09 08:57:51 +02:00
type Props = {
uri: string,
fullUri: string,
2019-06-09 08:57:51 +02:00
claim: StreamClaim,
children: React.Node,
description: ?string,
isResolvingUri: boolean,
doResolveUri: (string) => void,
playingUri: ?PlayingUri,
parentCommentId?: string,
isMarkdownPost?: boolean,
allowPreview: boolean,
2019-06-09 08:57:51 +02:00
};
2019-06-20 22:59:01 +02:00
class ClaimLink extends React.Component<Props> {
2019-06-09 08:57:51 +02:00
static defaultProps = {
href: null,
2019-06-21 03:00:52 +02:00
link: false,
thumbnail: null,
description: null,
isResolvingUri: false,
allowPreview: false,
};
componentDidMount() {
this.resolve(this.props);
}
componentDidUpdate() {
this.resolve(this.props);
}
resolve = (props: Props) => {
const { isResolvingUri, doResolveUri, claim, uri } = props;
2019-06-09 08:57:51 +02:00
if (!isResolvingUri && claim === undefined && uri) {
doResolveUri(uri);
2019-06-09 08:57:51 +02:00
}
};
2019-06-09 08:57:51 +02:00
render() {
const {
uri,
fullUri,
claim,
children,
isResolvingUri,
playingUri,
parentCommentId,
isMarkdownPost,
allowPreview,
} = this.props;
const isUnresolved = (!isResolvingUri && !claim) || !claim;
const isPlayingInline =
playingUri &&
playingUri.uri === uri &&
((playingUri.source === 'comment' && parentCommentId === playingUri.commentId) ||
playingUri.source === 'markdown');
if (isUnresolved) {
return <span>{children}</span>;
}
const { value_type: valueType } = claim;
2019-10-15 01:05:19 +02:00
const isChannel = valueType === 'channel';
2019-06-20 22:59:01 +02:00
return isChannel ? (
<>
<UriIndicator uri={uri} link />
<span>{fullUri.length > uri.length ? fullUri.substring(uri.length, fullUri.length) : ''}</span>
</>
) : allowPreview ? (
<div className={classnames('claim-link')}>
<div
className={classnames({
[INLINE_PLAYER_WRAPPER_CLASS]: isPlayingInline,
})}
>
<EmbedPlayButton uri={uri} parentCommentId={parentCommentId} isMarkdownPost={isMarkdownPost} />
</div>
<Button button="link" className="preview-link__url" label={uri} navigate={uri} />
</div>
) : (
2021-10-19 01:37:58 +02:00
<Button button="link" title={children} label={children} className="button--external-link" navigate={uri} />
);
2019-06-09 08:57:51 +02:00
}
}
export default ClaimLink;