Fix List playback on Floating Player

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) {

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

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

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 && (
             <div className="draggable content__info">
               <div className="claim-preview__title" title={title || uri}>
-                <Button label={title || uri} navigate={uri} button="link" className="content__floating-link" />
+                <Button
+                  label={title || uri}
+                  navigate={navigateUrl || uri}
+                  button="link"
+                  className="content__floating-link"
+                />
               </div>
               <UriIndicator link uri={uri} />
             </div>

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

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(() => {

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

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