Fix missing and broken "Follow" button on reposts (#7056)

## Issue
6776 Missing follow button on channel reposts

- Missing:
    - Fix: For reposts, `parseURI` will fail to determine if it's a channel because the URL doesn't have enough info. Determine from the claim object instead.
- Not working in Channel Page:
    - Fix: The repost uri doesn't link back to the source channel, so we'll need to handle it.
This commit is contained in:
infinite-persistence 2021-09-10 23:01:12 +08:00 committed by GitHub
parent 8afab7dbba
commit bc0a4bdeea
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 3 deletions

View file

@ -195,8 +195,12 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
claim.value.stream_type &&
// $FlowFixMe
(claim.value.stream_type === 'audio' || claim.value.stream_type === 'video');
const isChannelUri = isValid ? parseURI(uri).isChannel : false;
const isChannelUri = claim ? claim.value_type === 'channel' : false;
const signingChannel = claim && claim.signing_channel;
const repostedChannelUri =
claim && claim.repost_channel_url && claim.value_type === 'channel'
? claim.permanent_url || claim.canonical_url
: undefined;
// Get channel title ( use name as fallback )
let channelTitle = null;
@ -478,7 +482,9 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
)}
{isChannelUri && !channelIsBlocked && !claimIsMine && (
<SubscribeButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
<SubscribeButton
uri={repostedChannelUri || (uri.startsWith('lbry://') ? uri : `lbry://${uri}`)}
/>
)}
{includeSupportAction && <ClaimSupportButton uri={uri} />}

View file

@ -97,6 +97,7 @@ function ClaimPreviewTile(props: Props) {
const shouldFetch = claim === undefined;
const thumbnailUrl = useGetThumbnail(uri, claim, streamingUrl, getFile, placeholder) || thumbnail;
const canonicalUrl = claim && claim.canonical_url;
const permanentUrl = claim && claim.permanent_url;
let navigateUrl = formatLbryUrlForWeb(canonicalUrl || uri || '/');
const listId = collectionId || collectionClaimId;
if (listId) {
@ -123,6 +124,7 @@ function ClaimPreviewTile(props: Props) {
const isChannel = claim && claim.value_type === 'channel';
const channelUri = !isChannel ? signingChannel && signingChannel.permanent_url : claim && claim.permanent_url;
const channelTitle = signingChannel && ((signingChannel.value && signingChannel.value.title) || signingChannel.name);
const repostedChannelUri = isRepost && isChannel ? permanentUrl || canonicalUrl : undefined;
// Aria-label value for claim preview
let ariaLabelData = isChannel ? title : formatClaimPreviewTitle(title, channelTitle, date, mediaDuration);
@ -250,7 +252,7 @@ function ClaimPreviewTile(props: Props) {
<div className="claim-tile__info">
{isChannel ? (
<div className="claim-tile__about--channel">
<SubscribeButton uri={uri} />
<SubscribeButton uri={repostedChannelUri || uri} />
</div>
) : (
<React.Fragment>