[Fix] linked uris (#959)

* Fix live claim uri being passed

* Refactor show page

* Fix linked comment being erased

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

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) => ({
+const perform = {
-  resolveUri: (uri, returnCached, resolveRepost, options) =>
+  doResolveUri,
-    dispatch(doResolveUri(uri, returnCached, resolveRepost, options)),
+  doBeginPublish,
-  beginPublish: (name) => {
+  doFetchItemsInCollection,
-    dispatch(doClearPublish());
+  doAnalyticsView,
-    dispatch(doPrepareEdit({ name }));
+};
-    dispatch(push(`/$/${PAGES.UPLOAD}`));
-  },
-  fetchCollectionItems: (claimId) => dispatch(doFetchItemsInCollection({ collectionId: claimId })),
-  doAnalyticsView: (uri) => dispatch(doAnalyticsView(uri)),
-});
 
 export default withRouter(connect(select, perform)(ShowPage));

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,
+  doResolveUri: (uri: string, returnCached: boolean, resolveReposts: boolean, options: any) => void,
-  doAnalyticsView: (string) => 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, ':');
+      const urlPath = pathname + hash;
-      // Only redirect if we are in lbry.tv land
+      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.name) {
-  if (!claim || (claim && !claim.name)) {
+    return (
-    innerContent = (
       <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>
+  );
+}

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());