diff --git a/ui/component/claimPreviewTile/view.jsx b/ui/component/claimPreviewTile/view.jsx
index 21a88e6bc..871a9ef32 100644
--- a/ui/component/claimPreviewTile/view.jsx
+++ b/ui/component/claimPreviewTile/view.jsx
@@ -10,9 +10,9 @@ import ChannelThumbnail from 'component/channelThumbnail';
import FileViewCountInline from 'component/fileViewCountInline';
import SubscribeButton from 'component/subscribeButton';
import useGetThumbnail from 'effects/use-get-thumbnail';
-import { formatLbryUrlForWeb } from 'util/url';
+import { formatLbryUrlForWeb, generateListSearchUrlParams } 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';
@@ -98,13 +98,9 @@ function ClaimPreviewTile(props: Props) {
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) {
- const collectionParams = new URLSearchParams();
- collectionParams.set(COLLECTIONS_CONSTS.COLLECTION_ID, listId);
- navigateUrl = navigateUrl + `?` + collectionParams.toString();
- }
+ const navigateUrl =
+ formatLbryUrlForWeb(canonicalUrl || uri || '/') + (listId ? generateListSearchUrlParams(listId) : '');
const navLinkProps = {
to: navigateUrl,
onClick: (e) => e.stopPropagation(),
diff --git a/ui/component/collectionActions/index.js b/ui/component/collectionActions/index.js
index 7d9c09863..3c916441a 100644
--- a/ui/component/collectionActions/index.js
+++ b/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, true));
+ dispatch(doToggleShuffleList(undefined, collectionId, shuffle, true));
+ },
});
export default connect(select, perform)(CollectionActions);
diff --git a/ui/component/collectionActions/view.jsx b/ui/component/collectionActions/view.jsx
index e99cc717b..1186d9dfc 100644
--- a/ui/component/collectionActions/view.jsx
+++ b/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, generateListSearchUrlParams } from 'util/url';
type Props = {
uri: string,
claim: StreamClaim,
- openModal: (id: string, { uri: string, claimIsMine?: boolean, isSupport?: boolean }) => void,
- myChannels: ?Array
,
- 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: generateListSearchUrlParams(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);
}}
/>
diff --git a/ui/component/collectionMenuList/index.js b/ui/component/collectionMenuList/index.js
index e96768e36..dc687b444 100644
--- a/ui/component/collectionMenuList/index.js
+++ b/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, true));
+ dispatch(doToggleShuffleList(undefined, collectionId, true, true));
+ },
+});
+
+export default connect(select, perform)(CollectionMenuList);
diff --git a/ui/component/collectionMenuList/view.jsx b/ui/component/collectionMenuList/view.jsx
index 17b9c1cca..8607a22dc 100644
--- a/ui/component/collectionMenuList/view.jsx
+++ b/ui/component/collectionMenuList/view.jsx
@@ -7,8 +7,7 @@ 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, generateListSearchUrlParams } from 'util/url';
type Props = {
inline?: boolean,
@@ -16,34 +15,26 @@ type Props = {
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: generateListSearchUrlParams(collectionId),
+ state: { forceAutoplay: true },
+ });
}
- }, [push, doSetPlayingUri, collectionId, playNextUri, doShuffle]);
+ }, [collectionId, doShuffle, playNextUri, push]);
return (