diff --git a/ui/component/autoplayCountdown/index.js b/ui/component/autoplayCountdown/index.js
index 9bbb22de6..1bdfaab38 100644
--- a/ui/component/autoplayCountdown/index.js
+++ b/ui/component/autoplayCountdown/index.js
@@ -4,6 +4,7 @@ import { withRouter } from 'react-router';
import {
makeSelectIsPlayerFloating,
makeSelectNextUnplayedRecommended,
+ selectPlayingUri,
} from 'redux/selectors/content';
import { makeSelectClientSetting } from 'redux/selectors/settings';
import { doSetPlayingUri, doPlayUri } from 'redux/actions/content';
@@ -18,7 +19,8 @@ const select = (state, props) => {
const { location } = props;
const { search } = location;
const urlParams = new URLSearchParams(search);
- const collectionId = urlParams.get(COLLECTIONS_CONSTS.COLLECTION_ID);
+ const playingUri = selectPlayingUri(state);
+ const collectionId = urlParams.get(COLLECTIONS_CONSTS.COLLECTION_ID) || (playingUri && playingUri.collectionId);
let nextRecommendedUri;
if (collectionId) {
diff --git a/ui/component/autoplayCountdown/view.jsx b/ui/component/autoplayCountdown/view.jsx
index 9be2a80f3..49c9596be 100644
--- a/ui/component/autoplayCountdown/view.jsx
+++ b/ui/component/autoplayCountdown/view.jsx
@@ -17,7 +17,7 @@ type Props = {
nextRecommendedClaim: ?StreamClaim,
nextRecommendedUri: string,
isFloating: boolean,
- doSetPlayingUri: ({ uri: ?string }) => void,
+ doSetPlayingUri: ({ uri: ?string, collectionId: ?string }) => void,
doPlayUri: (string) => void,
modal: { id: string, modalProps: {} },
collectionId?: string,
@@ -58,19 +58,14 @@ function AutoplayCountdown(props: Props) {
}
const doNavigate = useCallback(() => {
- if (!isFloating) {
- if (navigateUrl) {
- push(navigateUrl);
- doSetPlayingUri({ uri: nextRecommendedUri });
- doPlayUri(nextRecommendedUri);
- }
- } else {
- if (nextRecommendedUri) {
- doSetPlayingUri({ uri: nextRecommendedUri });
- doPlayUri(nextRecommendedUri);
- }
+ if (!isFloating && navigateUrl) {
+ push(navigateUrl);
}
- }, [navigateUrl, nextRecommendedUri, isFloating, doSetPlayingUri, doPlayUri, push]);
+ if (nextRecommendedUri) {
+ doSetPlayingUri({ uri: nextRecommendedUri, collectionId });
+ doPlayUri(nextRecommendedUri);
+ }
+ }, [isFloating, navigateUrl, nextRecommendedUri, push, doSetPlayingUri, collectionId, doPlayUri]);
function shouldPauseAutoplay() {
const elm = document.querySelector(`.${CLASSNAME_AUTOPLAY_COUNTDOWN}`);
diff --git a/ui/component/fileRenderFloating/index.js b/ui/component/fileRenderFloating/index.js
index 106a369af..024872f99 100644
--- a/ui/component/fileRenderFloating/index.js
+++ b/ui/component/fileRenderFloating/index.js
@@ -22,6 +22,7 @@ const select = (state, props) => {
const playingUri = selectPlayingUri(state);
const primaryUri = selectPrimaryUri(state);
const uri = playingUri && playingUri.uri;
+ const collectionId = playingUri && playingUri.collectionId;
return {
uri,
@@ -35,6 +36,7 @@ const select = (state, props) => {
floatingPlayerEnabled: makeSelectClientSetting(SETTINGS.FLOATING_PLAYER)(state),
renderMode: makeSelectFileRenderModeForUri(uri)(state),
videoTheaterMode: makeSelectClientSetting(SETTINGS.VIDEO_THEATER_MODE)(state),
+ collectionId,
};
};
diff --git a/ui/component/fileRenderFloating/view.jsx b/ui/component/fileRenderFloating/view.jsx
index bde9849ec..516a3f694 100644
--- a/ui/component/fileRenderFloating/view.jsx
+++ b/ui/component/fileRenderFloating/view.jsx
@@ -14,7 +14,7 @@ import { onFullscreenChange } from 'util/full-screen';
import { useIsMobile } from 'effects/use-screensize';
import debounce from 'util/debounce';
import { useHistory } from 'react-router';
-import { isURIEqual } from 'lbry-redux';
+import { isURIEqual, COLLECTIONS_CONSTS } from 'lbry-redux';
const IS_DESKTOP_MAC = typeof process === 'object' ? process.platform === 'darwin' : false;
const DEBOUNCE_WINDOW_RESIZE_HANDLER_MS = 60;
@@ -34,6 +34,7 @@ type Props = {
primaryUri: ?string,
videoTheaterMode: boolean,
doFetchRecommendedContent: (string, boolean) => void,
+ collectionId: string,
};
export default function FileRenderFloating(props: Props) {
@@ -51,6 +52,7 @@ export default function FileRenderFloating(props: Props) {
primaryUri,
videoTheaterMode,
doFetchRecommendedContent,
+ collectionId,
} = props;
const {
location: { pathname },
@@ -69,6 +71,13 @@ export default function FileRenderFloating(props: Props) {
y: 0,
});
+ let navigateUrl;
+ if (collectionId) {
+ const collectionParams = new URLSearchParams();
+ collectionParams.set(COLLECTIONS_CONSTS.COLLECTION_ID, collectionId);
+ navigateUrl = uri + `?` + collectionParams.toString();
+ }
+
const playingUriSource = playingUri && playingUri.source;
const isPlayable = RENDER_MODES.FLOATING_MODES.includes(renderMode);
const isReadyToPlay = isPlayable && (streamingUrl || (fileInfo && fileInfo.completed));
@@ -303,7 +312,12 @@ export default function FileRenderFloating(props: Props) {
{isFloating && (
diff --git a/ui/component/fileRenderInitiator/index.js b/ui/component/fileRenderInitiator/index.js
index ad57e20e8..b82786c48 100644
--- a/ui/component/fileRenderInitiator/index.js
+++ b/ui/component/fileRenderInitiator/index.js
@@ -7,6 +7,7 @@ import {
makeSelectStreamingUrlForUri,
makeSelectClaimWasPurchased,
SETTINGS,
+ COLLECTIONS_CONSTS,
} from 'lbry-redux';
import { makeSelectCostInfoForUri } from 'lbryinc';
import { selectUserVerifiedEmail } from 'redux/selectors/user';
@@ -22,27 +23,34 @@ import {
import FileRenderInitiator from './view';
import { doAnaltyicsPurchaseEvent } from 'redux/actions/app';
-const select = (state, props) => ({
- claimThumbnail: makeSelectThumbnailForUri(props.uri)(state),
- fileInfo: makeSelectFileInfoForUri(props.uri)(state),
- obscurePreview: makeSelectShouldObscurePreview(props.uri)(state),
- isPlaying: makeSelectIsPlaying(props.uri)(state),
- playingUri: selectPlayingUri(state),
- insufficientCredits: makeSelectInsufficientCreditsForUri(props.uri)(state),
- streamingUrl: makeSelectStreamingUrlForUri(props.uri)(state),
- autoplay: makeSelectClientSetting(SETTINGS.AUTOPLAY)(state),
- hasCostInfo: Boolean(makeSelectCostInfoForUri(props.uri)(state)),
- costInfo: makeSelectCostInfoForUri(props.uri)(state),
- renderMode: makeSelectFileRenderModeForUri(props.uri)(state),
- claim: makeSelectClaimForUri(props.uri)(state),
- claimWasPurchased: makeSelectClaimWasPurchased(props.uri)(state),
- authenticated: selectUserVerifiedEmail(state),
-});
+const select = (state, props) => {
+ const { search } = props.location;
+ const urlParams = new URLSearchParams(search);
+ const collectionId = urlParams.get(COLLECTIONS_CONSTS.COLLECTION_ID);
+
+ return {
+ claimThumbnail: makeSelectThumbnailForUri(props.uri)(state),
+ fileInfo: makeSelectFileInfoForUri(props.uri)(state),
+ obscurePreview: makeSelectShouldObscurePreview(props.uri)(state),
+ isPlaying: makeSelectIsPlaying(props.uri)(state),
+ playingUri: selectPlayingUri(state),
+ insufficientCredits: makeSelectInsufficientCreditsForUri(props.uri)(state),
+ streamingUrl: makeSelectStreamingUrlForUri(props.uri)(state),
+ autoplay: makeSelectClientSetting(SETTINGS.AUTOPLAY)(state),
+ hasCostInfo: Boolean(makeSelectCostInfoForUri(props.uri)(state)),
+ costInfo: makeSelectCostInfoForUri(props.uri)(state),
+ renderMode: makeSelectFileRenderModeForUri(props.uri)(state),
+ claim: makeSelectClaimForUri(props.uri)(state),
+ claimWasPurchased: makeSelectClaimWasPurchased(props.uri)(state),
+ authenticated: selectUserVerifiedEmail(state),
+ collectionId,
+ };
+};
const perform = (dispatch) => ({
- play: (uri) => {
+ play: (uri, collectionId) => {
dispatch(doSetPrimaryUri(uri));
- dispatch(doSetPlayingUri({ uri }));
+ dispatch(doSetPlayingUri({ uri, collectionId }));
dispatch(doPlayUri(uri, undefined, undefined, (fileInfo) => dispatch(doAnaltyicsPurchaseEvent(fileInfo))));
},
});
diff --git a/ui/component/fileRenderInitiator/view.jsx b/ui/component/fileRenderInitiator/view.jsx
index 732e83125..a98676ba1 100644
--- a/ui/component/fileRenderInitiator/view.jsx
+++ b/ui/component/fileRenderInitiator/view.jsx
@@ -17,7 +17,7 @@ import FileRenderPlaceholder from 'static/img/fileRenderPlaceholder.png';
const SPACE_BAR_KEYCODE = 32;
type Props = {
- play: (string) => void,
+ play: (string, string) => void,
isLoading: boolean,
isPlaying: boolean,
fileInfo: FileListItem,
@@ -36,6 +36,7 @@ type Props = {
claimWasPurchased: boolean,
authenticated: boolean,
videoTheaterMode: boolean,
+ collectionId: string,
};
export default function FileRenderInitiator(props: Props) {
@@ -55,6 +56,7 @@ export default function FileRenderInitiator(props: Props) {
claimWasPurchased,
authenticated,
videoTheaterMode,
+ collectionId,
} = props;
// force autoplay if a timestamp is present
@@ -109,9 +111,9 @@ export default function FileRenderInitiator(props: Props) {
e.stopPropagation();
}
- play(uri);
+ play(uri, collectionId);
},
- [play, uri]
+ [play, uri, collectionId]
);
useEffect(() => {
diff --git a/ui/redux/actions/content.js b/ui/redux/actions/content.js
index 7c8f54589..302632b8e 100644
--- a/ui/redux/actions/content.js
+++ b/ui/redux/actions/content.js
@@ -112,16 +112,18 @@ export function doSetPlayingUri({
source,
pathname,
commentId,
+ collectionId,
}: {
uri: ?string,
source?: string,
commentId?: string,
pathname: string,
+ collectionId: string,
}) {
return (dispatch: Dispatch) => {
dispatch({
type: ACTIONS.SET_PLAYING_URI,
- data: { uri, source, pathname, commentId },
+ data: { uri, source, pathname, commentId, collectionId },
});
};
}
diff --git a/ui/redux/reducers/content.js b/ui/redux/reducers/content.js
index 12371f528..b7580d92c 100644
--- a/ui/redux/reducers/content.js
+++ b/ui/redux/reducers/content.js
@@ -25,6 +25,7 @@ reducers[ACTIONS.SET_PLAYING_URI] = (state, action) =>
source: action.data.source,
pathname: action.data.pathname,
commentId: action.data.commentId,
+ collectionId: action.data.collectionId,
primaryUri: state.primaryUri,
},
});