[Fix] linked uris (#959)

* Fix live claim uri being passed

* Refactor show page

* Fix linked comment being erased
This commit is contained in:
saltrafael 2022-02-24 12:20:07 -03:00 committed by GitHub
parent b4b7803684
commit 2152583816
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 100 additions and 87 deletions

View file

@ -74,7 +74,7 @@ export default function LivestreamLayout(props: Props) {
{isMobile && isCurrentClaimLive ? (
<div className={PRIMARY_PLAYER_WRAPPER_CLASS}>
{/* Mobile needs to handle the livestream player like any video player */}
<FileRenderInitiator uri={uri} />
<FileRenderInitiator uri={claim.canonical_url} />
</div>
) : (
<LivestreamIframeRender

View file

@ -1,10 +1,9 @@
import * as PAGES from 'constants/pages';
import { DOMAIN } from 'config';
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import { PAGE_SIZE } from 'constants/claim';
import {
makeSelectClaimForUri,
selectClaimForUri,
selectIsUriResolving,
makeSelectTotalPagesForChannel,
selectTitleForUri,
@ -18,18 +17,19 @@ import {
makeSelectIsResolvingCollectionForId,
} from 'redux/selectors/collections';
import { doResolveUri } from 'redux/actions/claims';
import { doClearPublish, doPrepareEdit } from 'redux/actions/publish';
import { doBeginPublish } from 'redux/actions/publish';
import { doFetchItemsInCollection } from 'redux/actions/collections';
import { normalizeURI } from 'util/lbryURI';
import * as COLLECTIONS_CONSTS from 'constants/collections';
import { push } from 'connected-react-router';
import { selectIsSubscribedForUri } from 'redux/selectors/subscriptions';
import { selectBlacklistedOutpointMap } from 'lbryinc';
import { doAnalyticsView } from 'redux/actions/app';
import ShowPage from './view';
const select = (state, props) => {
const { pathname, hash, search } = props.location;
const { location, history } = props;
const { pathname, hash, search } = location;
const urlPath = pathname + hash;
const urlParams = new URLSearchParams(search);
@ -58,13 +58,14 @@ const select = (state, props) => {
const match = path.match(/[#/:]/);
if (path === '$/') {
props.history.replace(`/`);
history.replace(`/`);
} else if (!path.startsWith('$/') && match && match.index) {
uri = `lbry://${path.slice(0, match.index)}`;
props.history.replace(`/${path.slice(0, match.index)}`);
history.replace(`/${path.slice(0, match.index)}`);
}
}
const claim = makeSelectClaimForUri(uri)(state);
const claim = selectClaimForUri(state, uri);
const collectionId =
urlParams.get(COLLECTIONS_CONSTS.COLLECTION_ID) ||
(claim && claim.value_type === 'collection' && claim.claim_id) ||
@ -82,22 +83,17 @@ const select = (state, props) => {
claimIsPending: makeSelectClaimIsPending(uri)(state),
isLivestream: selectIsStreamPlaceholderForUri(state, uri),
collection: makeSelectCollectionForId(collectionId)(state),
collectionId: collectionId,
collectionId,
collectionUrls: makeSelectUrlsForCollectionId(collectionId)(state),
isResolvingCollection: makeSelectIsResolvingCollectionForId(collectionId)(state),
};
};
const perform = (dispatch) => ({
resolveUri: (uri, returnCached, resolveRepost, options) =>
dispatch(doResolveUri(uri, returnCached, resolveRepost, options)),
beginPublish: (name) => {
dispatch(doClearPublish());
dispatch(doPrepareEdit({ name }));
dispatch(push(`/$/${PAGES.UPLOAD}`));
},
fetchCollectionItems: (claimId) => dispatch(doFetchItemsInCollection({ collectionId: claimId })),
doAnalyticsView: (uri) => dispatch(doAnalyticsView(uri)),
});
const perform = {
doResolveUri,
doBeginPublish,
doFetchItemsInCollection,
doAnalyticsView,
};
export default withRouter(connect(select, perform)(ShowPage));

View file

@ -23,7 +23,6 @@ const isDev = process.env.NODE_ENV !== 'production';
type Props = {
isResolvingUri: boolean,
resolveUri: (string, boolean, boolean, any) => void,
isSubscribed: boolean,
uri: string,
claim: StreamClaim,
@ -33,19 +32,19 @@ type Props = {
claimIsMine: boolean,
claimIsPending: boolean,
isLivestream: boolean,
beginPublish: (?string) => void,
collectionId: string,
collection: Collection,
collectionUrls: Array<string>,
isResolvingCollection: boolean,
fetchCollectionItems: (string) => void,
doAnalyticsView: (string) => void,
doResolveUri: (uri: string, returnCached: boolean, resolveReposts: boolean, options: any) => void,
doBeginPublish: (name: ?string) => void,
doFetchItemsInCollection: ({ collectionId: string }) => void,
doAnalyticsView: (uri: string) => void,
};
function ShowPage(props: Props) {
export default function ShowPage(props: Props) {
const {
isResolvingUri,
resolveUri,
uri,
claim,
blackListedOutpointMap,
@ -54,41 +53,53 @@ function ShowPage(props: Props) {
isSubscribed,
claimIsPending,
isLivestream,
beginPublish,
fetchCollectionItems,
collectionId,
collection,
collectionUrls,
isResolvingCollection,
doResolveUri,
doBeginPublish,
doFetchItemsInCollection,
doAnalyticsView,
} = props;
const { search, pathname } = location;
const { push } = useHistory();
const { search, pathname, hash } = location;
const urlParams = new URLSearchParams(search);
const linkedCommentId = urlParams.get('lc');
const signingChannel = claim && claim.signing_channel;
const canonicalUrl = claim && claim.canonical_url;
const claimExists = claim !== null && claim !== undefined;
const haventFetchedYet = claim === undefined;
const isMine = claim && claim.is_my_output;
const { contentName, isChannel } = parseURI(uri); // deprecated contentName - use streamName and channelName
const { push } = useHistory();
const isCollection = claim && claim.value_type === 'collection';
const resolvedCollection = collection && collection.id; // not null
const showLiveStream = isLivestream && ENABLE_NO_SOURCE_CLAIMS;
const isClaimBlackListed =
claim &&
blackListedOutpointMap &&
Boolean(
(signingChannel && blackListedOutpointMap[`${signingChannel.txid}:${signingChannel.nout}`]) ||
blackListedOutpointMap[`${claim.txid}:${claim.nout}`]
);
// changed this from 'isCollection' to resolve strangers' collections.
React.useEffect(() => {
if (collectionId && !resolvedCollection) {
fetchCollectionItems(collectionId);
doFetchItemsInCollection({ collectionId });
}
}, [isCollection, resolvedCollection, collectionId, fetchCollectionItems]);
}, [isCollection, resolvedCollection, collectionId, doFetchItemsInCollection]);
useEffect(() => {
// @if TARGET='web'
if (canonicalUrl) {
const canonicalUrlPath = '/' + canonicalUrl.replace(/^lbry:\/\//, '').replace(/#/g, ':');
// Only redirect if we are in lbry.tv land
const urlPath = pathname + hash;
const fullParams =
urlPath.indexOf('?') > 0 ? urlPath.substring(urlPath.indexOf('?')) : search.length > 0 ? search : '';
const canonicalUrlPath = '/' + canonicalUrl.replace(/^lbry:\/\//, '').replace(/#/g, ':') + fullParams;
// replaceState will fail if on a different domain (like webcache.googleusercontent.com)
const hostname = isDev ? 'localhost' : DOMAIN;
@ -109,20 +120,19 @@ function ShowPage(props: Props) {
history.replaceState(history.state, '', windowHref.substring(0, windowHref.length - 1));
}
}
// @endif
if (
(resolveUri && !isResolvingUri && uri && haventFetchedYet) ||
(doResolveUri && !isResolvingUri && uri && haventFetchedYet) ||
(claimExists && !claimIsPending && (!canonicalUrl || isMine === undefined))
) {
resolveUri(
doResolveUri(
uri,
false,
true,
isMine === undefined ? { include_is_my_output: true, include_purchase_receipt: true } : {}
);
}
}, [resolveUri, isResolvingUri, canonicalUrl, uri, claimExists, haventFetchedYet, isMine, claimIsPending, search]);
}, [doResolveUri, isResolvingUri, canonicalUrl, uri, claimExists, haventFetchedYet, isMine, claimIsPending, search]);
// Regular claims will call the file/view event when a user actually watches the claim
// This can be removed when we get rid of the livestream iframe
@ -136,34 +146,32 @@ function ShowPage(props: Props) {
// Don't navigate directly to repost urls
// Always redirect to the actual content
// Also need to add repost_url to the Claim type for flow
// $FlowFixMe
if (claim && claim.repost_url === uri) {
const newUrl = formatLbryUrlForWeb(claim.canonical_url);
const newUrl = formatLbryUrlForWeb(canonicalUrl);
return <Redirect to={newUrl} />;
}
let urlForCollectionZero;
if (claim && claim.value_type === 'collection' && collectionUrls && collectionUrls.length) {
if (claim && isCollection && collectionUrls && collectionUrls.length) {
urlForCollectionZero = collectionUrls && collectionUrls[0];
const claimId = claim.claim_id;
const urlParams = new URLSearchParams(search);
urlParams.set(COLLECTIONS_CONSTS.COLLECTION_ID, claimId);
const newUrl = formatLbryUrlForWeb(`${urlForCollectionZero}?${urlParams.toString()}`);
return <Redirect to={newUrl} />;
}
let innerContent = '';
if (!claim || (claim && !claim.name)) {
innerContent = (
if (!claim || !claim.name) {
return (
<Page>
{(claim === undefined ||
{(haventFetchedYet ||
isResolvingUri ||
isResolvingCollection || // added for collection
(claim && claim.value_type === 'collection' && !urlForCollectionZero)) && ( // added for collection - make sure we accept urls = []
(isCollection && !urlForCollectionZero)) && ( // added for collection - make sure we accept urls = []
<div className="main--empty">
<Spinner delayed />
</div>
)}
{!isResolvingUri && !isSubscribed && (
<div className="main--empty">
<Yrbl
@ -176,7 +184,7 @@ function ShowPage(props: Props) {
<Button
button="primary"
label={__('Publish Something')}
onClick={() => beginPublish(contentName)}
onClick={() => doBeginPublish(contentName)}
/>
<Button
button="secondary"
@ -189,47 +197,49 @@ function ShowPage(props: Props) {
/>
</div>
)}
{!isResolvingUri && isSubscribed && claim === null && (
<React.Suspense fallback={null}>
<AbandonedChannelPreview uri={uri} type={'large'} />
<AbandonedChannelPreview uri={uri} type="large" />
</React.Suspense>
)}
</Page>
);
} else if (claim.name.length && claim.name[0] === '@') {
innerContent = <ChannelPage uri={uri} location={location} />;
} else if (claim) {
const isClaimBlackListed =
blackListedOutpointMap &&
Boolean(
(signingChannel && blackListedOutpointMap[`${signingChannel.txid}:${signingChannel.nout}`]) ||
blackListedOutpointMap[`${claim.txid}:${claim.nout}`]
);
if (isClaimBlackListed && !claimIsMine) {
innerContent = (
<Page className="custom-wrapper">
<Card
title={uri}
subtitle={__(
'In response to a complaint we received under the US Digital Millennium Copyright Act, we have blocked access to this content from our applications.'
)}
actions={
<div className="section__actions">
<Button button="link" href="https://odysee.com/@OdyseeHelp:b/copyright:f" label={__('Read More')} />
</div>
}
/>
</Page>
);
} else if (showLiveStream) {
innerContent = <LivestreamPage uri={uri} claim={claim} />;
} else {
innerContent = <FilePage uri={uri} location={location} />;
}
}
return <React.Suspense fallback={null}>{innerContent}</React.Suspense>;
}
if (claim.name.length && claim.name[0] === '@') {
return <ChannelPage uri={uri} location={location} />;
}
export default ShowPage;
if (isClaimBlackListed && !claimIsMine) {
return (
<Page className="custom-wrapper">
<Card
title={uri}
subtitle={__(
'In response to a complaint we received under the US Digital Millennium Copyright Act, we have blocked access to this content from our applications.'
)}
actions={
<div className="section__actions">
<Button button="link" href="https://odysee.com/@OdyseeHelp:b/copyright:f" label={__('Read More')} />
</div>
}
/>
</Page>
);
}
if (showLiveStream) {
return (
<React.Suspense fallback={null}>
<LivestreamPage uri={uri} claim={claim} />
</React.Suspense>
);
}
return (
<React.Suspense fallback={null}>
<FilePage uri={uri} collectionId={collectionId} linkedCommentId={linkedCommentId} />
</React.Suspense>
);
}

View file

@ -394,6 +394,13 @@ export const doResetThumbnailStatus = () => (dispatch: Dispatch) => {
);
};
export const doBeginPublish = (name: string) => (dispatch: Dispatch) => {
dispatch(doClearPublish());
// $FlowFixMe
dispatch(doPrepareEdit({ name }));
dispatch(push(`/$/${PAGES.UPLOAD}`));
};
export const doClearPublish = () => (dispatch: Dispatch) => {
dispatch({ type: ACTIONS.CLEAR_PUBLISH });
return dispatch(doResetThumbnailStatus());