Fix autoplay-next not working on mobile

## Why
The playing URI was being cleared every time we leave the File Page, I believe to prevent the floating from continue playing outside of the File Page.

## Approach
Close FileRenderMobile by checking playingUri/primaryURI instead.
For the case of livestreams, just display it.
This commit is contained in:
infinite-persistence 2022-02-17 17:19:22 +08:00
parent cb441ef5f4
commit 95f90d8a84
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
4 changed files with 8 additions and 20 deletions

View file

@ -5,7 +5,7 @@ import {
makeSelectNextUrlForCollectionAndUrl,
makeSelectPreviousUrlForCollectionAndUrl,
} from 'redux/selectors/collections';
import { selectPlayingUri, makeSelectFileRenderModeForUri } from 'redux/selectors/content';
import { selectPlayingUri, makeSelectFileRenderModeForUri, selectPrimaryUri } from 'redux/selectors/content';
import { selectCostInfoForUri } from 'lbryinc';
import { doPlayUri } from 'redux/actions/content';
import { doSetMobilePlayerDimensions } from 'redux/actions/app';
@ -17,6 +17,7 @@ import { selectMobilePlayerDimensions } from 'redux/selectors/app';
const select = (state, props) => {
const playingUri = selectPlayingUri(state);
const primaryUri = selectPrimaryUri(state);
const uri = playingUri && playingUri.uri;
const collectionId = playingUri && playingUri.collectionId;
@ -37,6 +38,7 @@ const select = (state, props) => {
claimId,
channelClaimId,
mobilePlayerDimensions: selectMobilePlayerDimensions(state),
primaryUri,
playingUri,
};
};

View file

@ -29,6 +29,7 @@ type Props = {
activeLivestreamForChannel?: any,
channelClaimId?: any,
playingUri?: PlayingUri,
primaryUri: ?string,
mobilePlayerDimensions?: any,
doPlayUri: (string) => void,
doSetMobilePlayerDimensions: (height: number, width: number) => void,
@ -48,6 +49,7 @@ export default function FileRenderMobile(props: Props) {
activeLivestreamForChannel,
channelClaimId,
playingUri,
primaryUri,
mobilePlayerDimensions,
doPlayUri,
doSetMobilePlayerDimensions,
@ -145,6 +147,7 @@ export default function FileRenderMobile(props: Props) {
!isPlayable ||
!uri ||
countdownCanceled ||
(!isCurrentClaimLive && primaryUri !== playingUri?.uri) || // No floating player on mobile as of now
(collectionId && !canViewFile && !nextListUri)
) {
return null;

View file

@ -1,5 +1,5 @@
import { connect } from 'react-redux';
import { doSetContentHistoryItem, doSetPrimaryUri, clearPosition, doClearPlayingUri } from 'redux/actions/content';
import { doSetContentHistoryItem, doSetPrimaryUri, clearPosition } from 'redux/actions/content';
import { withRouter } from 'react-router-dom';
import {
selectClaimIsNsfwForUri,
@ -13,11 +13,7 @@ import * as COLLECTIONS_CONSTS from 'constants/collections';
import * as SETTINGS from 'constants/settings';
import { selectCostInfoForUri, doFetchCostInfoForUri } from 'lbryinc';
import { selectShowMatureContent, selectClientSetting } from 'redux/selectors/settings';
import {
makeSelectFileRenderModeForUri,
makeSelectContentPositionForUri,
makeSelectIsUriCurrentlyPlaying,
} from 'redux/selectors/content';
import { makeSelectFileRenderModeForUri, makeSelectContentPositionForUri } from 'redux/selectors/content';
import { makeSelectCommentsListTitleForUri, selectSettingsByChannelId } from 'redux/selectors/comments';
import { DISABLE_COMMENTS_TAG } from 'constants/tags';
import { doSetMobilePlayerDimensions } from 'redux/actions/app';
@ -49,7 +45,6 @@ const select = (state, props) => {
collectionId,
position: makeSelectContentPositionForUri(uri)(state),
commentsListTitle: makeSelectCommentsListTitleForUri(uri)(state),
isPlaying: makeSelectIsUriCurrentlyPlaying(uri)(state),
};
};
@ -59,7 +54,6 @@ const perform = {
doSetPrimaryUri,
clearPosition,
doSetMobilePlayerDimensions,
doClearPlayingUri,
};
export default withRouter(connect(select, perform)(FilePage));

View file

@ -70,12 +70,10 @@ export default function FilePage(props: Props) {
position,
commentsListTitle,
settingsByChannelId,
isPlaying,
doFetchCostInfoForUri,
doSetContentHistoryItem,
doSetPrimaryUri,
clearPosition,
doClearPlayingUri,
} = props;
const isMobile = useIsMobile();
@ -126,15 +124,6 @@ export default function FilePage(props: Props) {
doSetPrimaryUri,
]);
React.useEffect(() => {
// No floating player on mobile as of now, so clear the playing uri
return () => {
if (isMobile && isPlaying && RENDER_MODES.FLOATING_MODES.includes(renderMode)) {
doClearPlayingUri();
}
};
}, [doClearPlayingUri, isMobile, isPlaying, renderMode]);
function renderFilePageLayout() {
if (RENDER_MODES.FLOATING_MODES.includes(renderMode)) {
return (