Fix and improve code

ui/component/claimMenuList/index.js

@@ -31,14 +31,13 @@ import { doChannelSubscribe, doChannelUnsubscribe } from 'redux/actions/subscrip
 import { makeSelectIsSubscribed } from 'redux/selectors/subscriptions';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import { selectListShuffle } from 'redux/selectors/content';
-import { doSetPlayingUri, doToggleShuffleList } from 'redux/actions/content';
+import { doToggleLoopList, doToggleShuffleList } from 'redux/actions/content';
 import ClaimPreview from './view';
 import fs from 'fs';
 
 const select = (state, props) => {
   const claim = makeSelectClaimForUri(props.uri, false)(state);
   const collectionId = props.collectionId;
-  const resolvedList = makeSelectUrlsForCollectionId(collectionId)(state);
   const repostedClaim = claim && claim.reposted_claim;
   const contentClaim = repostedClaim || claim;
   const contentSigningChannel = contentClaim && contentClaim.signing_channel;
@@ -73,7 +72,7 @@ const select = (state, props) => {
     isMyCollection: makeSelectCollectionIsMine(collectionId)(state),
     editedCollection: makeSelectEditedCollectionForId(collectionId)(state),
     isAuthenticated: Boolean(selectUserVerifiedEmail(state)),
-    resolvedList,
+    resolvedList: makeSelectUrlsForCollectionId(collectionId)(state),
     playNextUri,
   };
 };
@@ -102,8 +101,10 @@ const perform = (dispatch) => ({
   doChannelUnsubscribe: (subscription) => dispatch(doChannelUnsubscribe(subscription)),
   doCollectionEdit: (collection, props) => dispatch(doCollectionEdit(collection, props)),
   fetchCollectionItems: (collectionId) => dispatch(doFetchItemsInCollection({ collectionId })),
-  doSetPlayingUri: (uri) => dispatch(doSetPlayingUri({ uri })),
-  doToggleShuffleList: (collectionId) => dispatch(doToggleShuffleList(undefined, collectionId, true, true)),
+  doToggleShuffleList: (collectionId) => {
+    dispatch(doToggleLoopList(collectionId, false));
+    dispatch(doToggleShuffleList(undefined, collectionId, true, true));
+  },
 });
 
 export default connect(select, perform)(ClaimPreview);

ui/component/claimMenuList/view.jsx

@@ -7,7 +7,13 @@ import React from 'react';
 import classnames from 'classnames';
 import { Menu, MenuButton, MenuList, MenuItem } from '@reach/menu-button';
 import Icon from 'component/common/icon';
-import { generateShareUrl, generateRssUrl, generateLbryContentUrl, formatLbryUrlForWeb } from 'util/url';
+import {
+  generateShareUrl,
+  generateRssUrl,
+  generateLbryContentUrl,
+  formatLbryUrlForWeb,
+  generateListSearchUrl,
+} from 'util/url';
 import { useHistory } from 'react-router';
 import { buildURI, parseURI, COLLECTIONS_CONSTS } from 'lbry-redux';
 
@@ -59,7 +65,6 @@ type Props = {
   playNextUri: string,
   resolvedList: boolean,
   fetchCollectionItems: (string) => void,
-  doSetPlayingUri: (string) => void,
   doToggleShuffleList: (string) => void,
 };
 
@@ -101,7 +106,6 @@ function ClaimMenuList(props: Props) {
     playNextUri,
     resolvedList,
     fetchCollectionItems,
-    doSetPlayingUri,
     doToggleShuffleList,
   } = props;
   const [doShuffle, setDoShuffle] = React.useState(false);
@@ -129,15 +133,15 @@ function ClaimMenuList(props: Props) {
     if (doShuffle && resolvedList) {
       doToggleShuffleList(collectionId);
       if (playNextUri) {
-        const collectionParams = new URLSearchParams();
-        collectionParams.set(COLLECTIONS_CONSTS.COLLECTION_ID, collectionId);
-        const navigateUrl = formatLbryUrlForWeb(playNextUri) + `?` + collectionParams.toString();
-        setDoShuffle(false);
-        doSetPlayingUri(playNextUri);
-        push(navigateUrl);
+        const navigateUrl = formatLbryUrlForWeb(playNextUri);
+        push({
+          pathname: navigateUrl,
+          search: generateListSearchUrl(collectionId),
+          state: { collectionId, forceAutoplay: true },
+        });
       }
     }
-  }, [collectionId, doSetPlayingUri, doShuffle, doToggleShuffleList, playNextUri, push, resolvedList]);
+  }, [collectionId, doShuffle, doToggleShuffleList, playNextUri, push, resolvedList]);
 
   if (!claim) {
     return null;

ui/component/claimPreviewTile/view.jsx

@@ -9,9 +9,9 @@ import DateTime from 'component/dateTime';
 import ChannelThumbnail from 'component/channelThumbnail';
 import SubscribeButton from 'component/subscribeButton';
 import useGetThumbnail from 'effects/use-get-thumbnail';
-import { formatLbryUrlForWeb } from 'util/url';
+import { formatLbryUrlForWeb, generateListSearchUrl } from 'util/url';
 import { formatClaimPreviewTitle } from 'util/formatAriaLabel';
-import { parseURI, COLLECTIONS_CONSTS, isURIEqual } from 'lbry-redux';
+import { parseURI, isURIEqual } from 'lbry-redux';
 import PreviewOverlayProperties from 'component/previewOverlayProperties';
 import FileDownloadLink from 'component/fileDownloadLink';
 import FileWatchLaterLink from 'component/fileWatchLaterLink';
@@ -96,13 +96,8 @@ function ClaimPreviewTile(props: Props) {
   const shouldFetch = claim === undefined;
   const thumbnailUrl = useGetThumbnail(uri, claim, streamingUrl, getFile, placeholder) || thumbnail;
   const canonicalUrl = claim && claim.canonical_url;
-  let navigateUrl = formatLbryUrlForWeb(canonicalUrl || uri || '/');
   const listId = collectionId || collectionClaimId;
-  if (listId) {
-    const collectionParams = new URLSearchParams();
-    collectionParams.set(COLLECTIONS_CONSTS.COLLECTION_ID, listId);
-    navigateUrl = navigateUrl + `?` + collectionParams.toString();
-  }
+  const navigateUrl = formatLbryUrlForWeb(canonicalUrl || uri || '/') + (listId ? generateListSearchUrl(listId) : '');
   const navLinkProps = {
     to: navigateUrl,
     onClick: (e) => e.stopPropagation(),
@@ -210,23 +205,18 @@ function ClaimPreviewTile(props: Props) {
           {!isChannel && (
             <React.Fragment>
               <div className="claim-preview__hover-actions">
-                {isPlayable && (
-                  <FileWatchLaterLink focusable={false} uri={uri} />
-                )}
+                {isPlayable && <FileWatchLaterLink focusable={false} uri={uri} />}
               </div>
               {/* @if TARGET='app' */}
               <div className="claim-preview__hover-actions">
-                {isStream && (
-                  <FileDownloadLink focusable={false} uri={canonicalUrl} hideOpenButton />
-                )}
+                {isStream && <FileDownloadLink focusable={false} uri={canonicalUrl} hideOpenButton />}
               </div>
               {/* @endif */}
 
               <div className="claim-preview__file-property-overlay">
                 <PreviewOverlayProperties uri={uri} properties={liveProperty || properties} />
               </div>
             </React.Fragment>
-
           )}
           {isCollection && (
             <React.Fragment>

ui/component/collectionActions/index.js

@@ -1,17 +1,13 @@
 import { connect } from 'react-redux';
 import {
-  makeSelectClaimIsMine,
   makeSelectClaimForUri,
-  selectMyChannelClaims,
   makeSelectClaimIsPending,
   makeSelectCollectionIsMine,
   makeSelectEditedCollectionForId,
 } from 'lbry-redux';
-import { makeSelectCostInfoForUri } from 'lbryinc';
-import { doToast } from 'redux/actions/notifications';
 import { doOpenModal } from 'redux/actions/app';
 import { selectListShuffle } from 'redux/selectors/content';
-import { doPlayUri, doSetPlayingUri, doToggleShuffleList, doToggleLoopList } from 'redux/actions/content';
+import { doToggleShuffleList, doToggleLoopList } from 'redux/actions/content';
 import CollectionActions from './view';
 
 const select = (state, props) => {
@@ -31,29 +27,23 @@ const select = (state, props) => {
   const shuffleList = selectListShuffle(state);
   const shuffle = shuffleList && shuffleList.collectionId === collectionId && shuffleList.newUrls;
   const playNextUri = shuffle && shuffle[0];
-  const playNextClaim = makeSelectClaimForUri(playNextUri)(state);
 
   return {
     claim: makeSelectClaimForUri(props.uri)(state),
-    claimIsMine: makeSelectClaimIsMine(props.uri)(state),
-    costInfo: makeSelectCostInfoForUri(props.uri)(state),
-    myChannels: selectMyChannelClaims(state),
     claimIsPending: makeSelectClaimIsPending(props.uri)(state),
     isMyCollection: makeSelectCollectionIsMine(collectionId)(state),
     collectionHasEdits: Boolean(makeSelectEditedCollectionForId(collectionId)(state)),
     firstItem,
     playNextUri,
-    playNextClaim,
   };
 };
 
 const perform = (dispatch) => ({
   openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
-  doToast: (options) => dispatch(doToast(options)),
-  doPlayUri: (uri) => dispatch(doPlayUri(uri)),
-  doSetPlayingUri: (uri) => dispatch(doSetPlayingUri({ uri })),
-  doToggleShuffleList: (collectionId, shuffle) => dispatch(doToggleShuffleList(undefined, collectionId, shuffle, true)),
-  doToggleLoopList: (collectionId, loop) => dispatch(doToggleLoopList(collectionId, loop)),
+  doToggleShuffleList: (collectionId, shuffle) => {
+    dispatch(doToggleLoopList(collectionId, false));
+    dispatch(doToggleShuffleList(undefined, collectionId, shuffle, true));
+  },
 });
 
 export default connect(select, perform)(CollectionActions);

ui/component/collectionActions/view.jsx

@@ -11,15 +11,12 @@ import { useHistory } from 'react-router';
 import { EDIT_PAGE, PAGE_VIEW_QUERY } from 'page/collection/view';
 import classnames from 'classnames';
 import { ENABLE_FILE_REACTIONS } from 'config';
-import { COLLECTIONS_CONSTS } from 'lbry-redux';
-import { formatLbryUrlForWeb } from 'util/url';
+import { formatLbryUrlForWeb, generateListSearchUrl } from 'util/url';
 
 type Props = {
   uri: string,
   claim: StreamClaim,
-  openModal: (id: string, { uri: string, claimIsMine?: boolean, isSupport?: boolean }) => void,
-  myChannels: ?Array<ChannelClaim>,
-  doToast: ({ message: string }) => void,
+  openModal: (id: string, {}) => void,
   claimIsPending: boolean,
   isMyCollection: boolean,
   collectionId: string,
@@ -28,11 +25,7 @@ type Props = {
   collectionHasEdits: boolean,
   isBuiltin: boolean,
   doToggleShuffleList: (string, boolean) => void,
-  doToggleLoopList: (string, boolean) => void,
   playNextUri: string,
-  playNextClaim: StreamClaim,
-  doPlayUri: (string) => void,
-  doSetPlayingUri: (string) => void,
   firstItem: string,
 };
 
@@ -49,11 +42,7 @@ function CollectionActions(props: Props) {
     collectionHasEdits,
     isBuiltin,
     doToggleShuffleList,
-    doToggleLoopList,
     playNextUri,
-    playNextClaim,
-    doPlayUri,
-    doSetPlayingUri,
     firstItem,
   } = props;
   const [doShuffle, setDoShuffle] = React.useState(false);
@@ -63,23 +52,23 @@ function CollectionActions(props: Props) {
   const webShareable = true; // collections have cost?
 
   const doPlay = React.useCallback(
-    (uri) => {
-      const collectionParams = new URLSearchParams();
-      collectionParams.set(COLLECTIONS_CONSTS.COLLECTION_ID, collectionId);
-      const navigateUrl = formatLbryUrlForWeb(uri) + `?` + collectionParams.toString();
-      push(navigateUrl);
-      doSetPlayingUri(uri);
-      doPlayUri(uri);
+    (playUri) => {
+      const navigateUrl = formatLbryUrlForWeb(playUri);
+      push({
+        pathname: navigateUrl,
+        search: generateListSearchUrl(collectionId),
+        state: { forceAutoplay: true },
+      });
     },
-    [collectionId, push, doSetPlayingUri, doPlayUri]
+    [collectionId, push]
   );
 
   React.useEffect(() => {
-    if (playNextClaim && doShuffle) {
+    if (playNextUri && doShuffle) {
       setDoShuffle(false);
       doPlay(playNextUri);
     }
-  }, [doPlay, doShuffle, playNextClaim, playNextUri]);
+  }, [doPlay, doShuffle, playNextUri]);
 
   const lhsSection = (
     <>
@@ -90,7 +79,6 @@ function CollectionActions(props: Props) {
         title={__('Play')}
         onClick={() => {
           doToggleShuffleList(collectionId, false);
-          doToggleLoopList(collectionId, false);
           doPlay(firstItem);
         }}
       />

ui/component/collectionMenuList/index.js

@@ -1,8 +1,8 @@
 import { connect } from 'react-redux';
-import { doCollectionEdit, makeSelectNameForCollectionId, doCollectionDelete } from 'lbry-redux';
+import { makeSelectNameForCollectionId } from 'lbry-redux';
 import { doOpenModal } from 'redux/actions/app';
 import { selectListShuffle } from 'redux/selectors/content';
-import { doSetPlayingUri, doToggleShuffleList } from 'redux/actions/content';
+import { doToggleLoopList, doToggleShuffleList } from 'redux/actions/content';
 import CollectionMenuList from './view';
 
 const select = (state, props) => {
@@ -17,10 +17,12 @@ const select = (state, props) => {
   };
 };
 
-export default connect(select, {
-  doCollectionEdit,
-  doOpenModal,
-  doCollectionDelete,
-  doSetPlayingUri,
-  doToggleShuffleList,
-})(CollectionMenuList);
+const perform = (dispatch) => ({
+  openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
+  doToggleShuffleList: (collectionId) => {
+    dispatch(doToggleLoopList(collectionId, false));
+    dispatch(doToggleShuffleList(undefined, collectionId, true, true));
+  },
+});
+
+export default connect(select, perform)(CollectionMenuList);

ui/component/collectionMenuList/view.jsx

@@ -7,43 +7,34 @@ import { Menu, MenuButton, MenuList, MenuItem } from '@reach/menu-button';
 import Icon from 'component/common/icon';
 import * as PAGES from 'constants/pages';
 import { useHistory } from 'react-router';
-import { formatLbryUrlForWeb } from 'util/url';
-import { COLLECTIONS_CONSTS } from 'lbry-redux';
+import { formatLbryUrlForWeb, generateListSearchUrl } from 'util/url';
 
 type Props = {
   inline?: boolean,
   doOpenModal: (string, {}) => void,
   collectionName?: string,
   collectionId: string,
   playNextUri: string,
-  doSetPlayingUri: ({ uri: ?string }) => void,
-  doToggleShuffleList: (string, string, boolean, boolean) => void,
+  doToggleShuffleList: (string) => void,
 };
 
 function CollectionMenuList(props: Props) {
-  const {
-    inline = false,
-    collectionId,
-    collectionName,
-    doOpenModal,
-    playNextUri,
-    doSetPlayingUri,
-    doToggleShuffleList,
-  } = props;
+  const { inline = false, collectionId, collectionName, doOpenModal, playNextUri, doToggleShuffleList } = props;
   const [doShuffle, setDoShuffle] = React.useState(false);
 
   const { push } = useHistory();
 
   React.useEffect(() => {
     if (playNextUri && doShuffle) {
-      const collectionParams = new URLSearchParams();
-      collectionParams.set(COLLECTIONS_CONSTS.COLLECTION_ID, collectionId);
-      const navigateUrl = formatLbryUrlForWeb(playNextUri) + `?` + collectionParams.toString();
       setDoShuffle(false);
-      doSetPlayingUri({ uri: playNextUri });
-      push(navigateUrl);
+      const navigateUrl = formatLbryUrlForWeb(playNextUri);
+      push({
+        pathname: navigateUrl,
+        search: generateListSearchUrl(collectionId),
+        state: { forceAutoplay: true },
+      });
     }
-  }, [push, doSetPlayingUri, collectionId, playNextUri, doShuffle]);
+  }, [collectionId, doShuffle, playNextUri, push]);
 
   return (
     <Menu>
@@ -68,7 +59,7 @@ function CollectionMenuList(props: Props) {
             <MenuItem
               className="comment__menu-option"
               onSelect={() => {
-                doToggleShuffleList('', collectionId, true, true);
+                doToggleShuffleList(collectionId);
                 setDoShuffle(true);
               }}
             >