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.

ui/component/fileRenderMobile/index.js

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

ui/component/fileRenderMobile/view.jsx

@@ -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;

ui/page/file/index.js

@@ -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 {
+import { makeSelectFileRenderModeForUri, makeSelectContentPositionForUri } from 'redux/selectors/content';
-  makeSelectFileRenderModeForUri,
-  makeSelectContentPositionForUri,
-  makeSelectIsUriCurrentlyPlaying,
-} 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));

ui/page/file/view.jsx

@@ -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 (