[Fix] linked uris (#959)

* Fix live claim uri being passed * Refactor show page * Fix linked comment being erased
2022-02-24 12:20:07 -03:00 · 2022-02-24 12:20:07 -03:00 · 2152583816
commit 2152583816
parent b4b7803684
4 changed files with 100 additions and 87 deletions
--- a/ui/component/livestreamLayout/view.jsx
+++ b/ui/component/livestreamLayout/view.jsx
@ -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
--- a/ui/page/show/index.js
+++ b/ui/page/show/index.js
@ -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));
--- a/ui/page/show/view.jsx
+++ b/ui/page/show/view.jsx
@ -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,25 +197,22 @@ 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 (claim.name.length && claim.name[0] === '@') {
+    return <ChannelPage uri={uri} location={location} />;
+  }

  if (isClaimBlackListed && !claimIsMine) {
-      innerContent = (
+    return (
      <Page className="custom-wrapper">
        <Card
          title={uri}
@ -222,14 +227,19 @@ function ShowPage(props: Props) {
        />
      </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 (showLiveStream) {
+    return (
+      <React.Suspense fallback={null}>
+        <LivestreamPage uri={uri} claim={claim} />
+      </React.Suspense>
+    );
  }

-export default ShowPage;
+  return (
+    <React.Suspense fallback={null}>
+      <FilePage uri={uri} collectionId={collectionId} linkedCommentId={linkedCommentId} />
+    </React.Suspense>
+  );
+}
--- a/ui/redux/actions/publish.js
+++ b/ui/redux/actions/publish.js
@ -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());