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, }, });