Playlist fall out fixes (#7032)

* Add snack bar notification

* Fix and improve code

* Better handle paid content on playlists

* Fix menu options that show for unauth users

ui/component/autoplayCountdown/view.jsx

@@ -15,8 +15,11 @@ type Props = {
   nextRecommendedClaim: ?StreamClaim,
   nextRecommendedUri: string,
   modal: { id: string, modalProps: {} },
+  skipPaid: boolean,
   doNavigate: () => void,
   doReplay: () => void,
+  doPrevious: () => void,
+  onCanceled: () => void,
 };
 
 function AutoplayCountdown(props: Props) {
@@ -25,8 +28,11 @@ function AutoplayCountdown(props: Props) {
     nextRecommendedClaim,
     history: { push },
     modal,
+    skipPaid,
     doNavigate,
     doReplay,
+    doPrevious,
+    onCanceled,
   } = props;
   const nextTitle = nextRecommendedClaim && nextRecommendedClaim.value && nextRecommendedClaim.value.title;
 
@@ -68,6 +74,7 @@ function AutoplayCountdown(props: Props) {
         interval = setInterval(() => {
           const newTime = timer - 1;
           if (newTime === 0) {
+            if (skipPaid) setTimer(countdownTime);
             doNavigate();
           } else {
             setTimer(timer - 1);
@@ -78,7 +85,7 @@ function AutoplayCountdown(props: Props) {
     return () => {
       clearInterval(interval);
     };
-  }, [timer, doNavigate, push, timerCanceled, isTimerPaused, nextRecommendedUri]);
+  }, [timer, doNavigate, push, timerCanceled, isTimerPaused, nextRecommendedUri, skipPaid]);
 
   if (timerCanceled || !nextRecommendedUri) {
     return null;
@@ -105,14 +112,35 @@ function AutoplayCountdown(props: Props) {
           )}
           {!isTimerPaused && (
             <div className="file-viewer__overlay-secondary autoplay-countdown__counter">
-              {__('Playing in %seconds_left% seconds...', { seconds_left: timer })}{' '}
+              {__('Playing %message% in %seconds_left% seconds...', {
-              <Button label={__('Cancel')} button="link" onClick={() => setTimerCanceled(true)} />
+                message: skipPaid ? __('next free content') : __(''),
+                seconds_left: timer,
+              })}{' '}
+              <Button
+                label={__('Cancel')}
+                button="link"
+                onClick={() => {
+                  setTimerCanceled(true);
+                  if (onCanceled) onCanceled();
+                }}
+              />
             </div>
           )}
+          {skipPaid && doPrevious && (
+            <div>
               <Button
-            label={__('Replay?')}
+                label={__('Play Previous')}
                 button="link"
-            iconRight={ICONS.REPLAY}
+                icon={ICONS.PLAY_PREVIOUS}
+                onClick={() => doPrevious()}
+              />
+            </div>
+          )}
+          <div>
+            <Button
+              label={skipPaid ? __('Purchase?') : __('Replay?')}
+              button="link"
+              iconRight={skipPaid ? ICONS.WALLET : ICONS.REPLAY}
               onClick={() => {
                 setTimerCanceled(true);
                 doReplay();
@@ -121,6 +149,7 @@ function AutoplayCountdown(props: Props) {
           </div>
         </div>
       </div>
+    </div>
   );
 }
 

ui/component/claimMenuList/index.js

@@ -31,14 +31,13 @@ import { doChannelSubscribe, doChannelUnsubscribe } from 'redux/actions/subscrip
 import { makeSelectIsSubscribed } from 'redux/selectors/subscriptions';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import { selectListShuffle } from 'redux/selectors/content';
-import { doSetPlayingUri, doToggleShuffleList } from 'redux/actions/content';
+import { doToggleLoopList, doToggleShuffleList } from 'redux/actions/content';
 import ClaimPreview from './view';
 import fs from 'fs';
 
 const select = (state, props) => {
   const claim = makeSelectClaimForUri(props.uri, false)(state);
   const collectionId = props.collectionId;
-  const resolvedList = makeSelectUrlsForCollectionId(collectionId)(state);
   const repostedClaim = claim && claim.reposted_claim;
   const contentClaim = repostedClaim || claim;
   const contentSigningChannel = contentClaim && contentClaim.signing_channel;
@@ -73,7 +72,7 @@ const select = (state, props) => {
     isMyCollection: makeSelectCollectionIsMine(collectionId)(state),
     editedCollection: makeSelectEditedCollectionForId(collectionId)(state),
     isAuthenticated: Boolean(selectUserVerifiedEmail(state)),
-    resolvedList,
+    resolvedList: makeSelectUrlsForCollectionId(collectionId)(state),
     playNextUri,
   };
 };
@@ -102,8 +101,10 @@ const perform = (dispatch) => ({
   doChannelUnsubscribe: (subscription) => dispatch(doChannelUnsubscribe(subscription)),
   doCollectionEdit: (collection, props) => dispatch(doCollectionEdit(collection, props)),
   fetchCollectionItems: (collectionId) => dispatch(doFetchItemsInCollection({ collectionId })),
-  doSetPlayingUri: (uri) => dispatch(doSetPlayingUri({ uri })),
+  doToggleShuffleList: (collectionId) => {
-  doToggleShuffleList: (collectionId) => dispatch(doToggleShuffleList(undefined, collectionId, true, true)),
+    dispatch(doToggleLoopList(collectionId, false, true));
+    dispatch(doToggleShuffleList(undefined, collectionId, true, true));
+  },
 });
 
 export default connect(select, perform)(ClaimPreview);

ui/component/claimMenuList/view.jsx

@@ -7,7 +7,13 @@ import React from 'react';
 import classnames from 'classnames';
 import { Menu, MenuButton, MenuList, MenuItem } from '@reach/menu-button';
 import Icon from 'component/common/icon';
-import { generateShareUrl, generateRssUrl, generateLbryContentUrl, formatLbryUrlForWeb } from 'util/url';
+import {
+  generateShareUrl,
+  generateRssUrl,
+  generateLbryContentUrl,
+  formatLbryUrlForWeb,
+  generateListSearchUrlParams,
+} from 'util/url';
 import { useHistory } from 'react-router';
 import { buildURI, parseURI, COLLECTIONS_CONSTS } from 'lbry-redux';
 
@@ -59,7 +65,6 @@ type Props = {
   playNextUri: string,
   resolvedList: boolean,
   fetchCollectionItems: (string) => void,
-  doSetPlayingUri: (string) => void,
   doToggleShuffleList: (string) => void,
 };
 
@@ -101,7 +106,6 @@ function ClaimMenuList(props: Props) {
     playNextUri,
     resolvedList,
     fetchCollectionItems,
-    doSetPlayingUri,
     doToggleShuffleList,
   } = props;
   const [doShuffle, setDoShuffle] = React.useState(false);
@@ -129,15 +133,15 @@ function ClaimMenuList(props: Props) {
     if (doShuffle && resolvedList) {
       doToggleShuffleList(collectionId);
       if (playNextUri) {
-        const collectionParams = new URLSearchParams();
+        const navigateUrl = formatLbryUrlForWeb(playNextUri);
-        collectionParams.set(COLLECTIONS_CONSTS.COLLECTION_ID, collectionId);
+        push({
-        const navigateUrl = formatLbryUrlForWeb(playNextUri) + `?` + collectionParams.toString();
+          pathname: navigateUrl,
-        setDoShuffle(false);
+          search: generateListSearchUrlParams(collectionId),
-        doSetPlayingUri(playNextUri);
+          state: { collectionId, forceAutoplay: true },
-        push(navigateUrl);
+        });
       }
     }
-  }, [collectionId, doSetPlayingUri, doShuffle, doToggleShuffleList, playNextUri, push, resolvedList]);
+  }, [collectionId, doShuffle, doToggleShuffleList, playNextUri, push, resolvedList]);
 
   if (!claim) {
     return null;
@@ -259,6 +263,7 @@ function ClaimMenuList(props: Props) {
     push(`/$/${PAGES.REPORT_CONTENT}?claimId=${contentClaim && contentClaim.claim_id}`);
   }
 
+  const shouldShow = !IS_WEB || (IS_WEB && isAuthenticated);
   return (
     <Menu>
       <MenuButton
@@ -271,8 +276,6 @@ function ClaimMenuList(props: Props) {
         <Icon size={20} icon={ICONS.MORE_VERTICAL} />
       </MenuButton>
       <MenuList className="menu__list">
-        {(!IS_WEB || (IS_WEB && isAuthenticated)) && (
-          <>
         <>
           {/* COLLECTION OPERATIONS */}
           {collectionId && isCollectionClaim ? (
@@ -319,14 +322,13 @@ function ClaimMenuList(props: Props) {
               )}
             </>
           ) : (
+            shouldShow &&
             isPlayable && (
               <>
                 {/* WATCH LATER */}
                 <MenuItem
                   className="comment__menu-option"
-                      onSelect={() =>
+                  onSelect={() => handleAdd(hasClaimInWatchLater, __('Watch Later'), COLLECTIONS_CONSTS.WATCH_LATER_ID)}
-                        handleAdd(hasClaimInWatchLater, __('Watch Later'), COLLECTIONS_CONSTS.WATCH_LATER_ID)
-                      }
                 >
                   <div className="menu__link">
                     <Icon aria-hidden icon={hasClaimInWatchLater ? ICONS.DELETE : ICONS.TIME} />
@@ -359,6 +361,8 @@ function ClaimMenuList(props: Props) {
           )}
         </>
 
+        {shouldShow && (
+          <>
             {!isChannelPage && (
               <>
                 <MenuItem className="comment__menu-option" onSelect={handleSupport}>
@@ -435,9 +439,9 @@ function ClaimMenuList(props: Props) {
                 )}
               </>
             )}
+            <hr className="menu__separator" />
           </>
         )}
-        <hr className="menu__separator" />
 
         <MenuItem className="comment__menu-option" onSelect={handleCopyLink}>
           <div className="menu__link">

ui/component/claimPreviewTile/view.jsx

@@ -10,9 +10,9 @@ import ChannelThumbnail from 'component/channelThumbnail';
 import FileViewCountInline from 'component/fileViewCountInline';
 import SubscribeButton from 'component/subscribeButton';
 import useGetThumbnail from 'effects/use-get-thumbnail';
-import { formatLbryUrlForWeb } from 'util/url';
+import { formatLbryUrlForWeb, generateListSearchUrlParams } from 'util/url';
 import { formatClaimPreviewTitle } from 'util/formatAriaLabel';
-import { parseURI, COLLECTIONS_CONSTS, isURIEqual } from 'lbry-redux';
+import { parseURI, isURIEqual } from 'lbry-redux';
 import PreviewOverlayProperties from 'component/previewOverlayProperties';
 import FileDownloadLink from 'component/fileDownloadLink';
 import FileWatchLaterLink from 'component/fileWatchLaterLink';
@@ -98,13 +98,9 @@ function ClaimPreviewTile(props: Props) {
   const thumbnailUrl = useGetThumbnail(uri, claim, streamingUrl, getFile, placeholder) || thumbnail;
   const canonicalUrl = claim && claim.canonical_url;
   const permanentUrl = claim && claim.permanent_url;
-  let navigateUrl = formatLbryUrlForWeb(canonicalUrl || uri || '/');
   const listId = collectionId || collectionClaimId;
-  if (listId) {
+  const navigateUrl =
-    const collectionParams = new URLSearchParams();
+    formatLbryUrlForWeb(canonicalUrl || uri || '/') + (listId ? generateListSearchUrlParams(listId) : '');
-    collectionParams.set(COLLECTIONS_CONSTS.COLLECTION_ID, listId);
-    navigateUrl = navigateUrl + `?` + collectionParams.toString();
-  }
   const navLinkProps = {
     to: navigateUrl,
     onClick: (e) => e.stopPropagation(),

ui/component/collectionActions/index.js

@@ -1,17 +1,13 @@
 import { connect } from 'react-redux';
 import {
-  makeSelectClaimIsMine,
   makeSelectClaimForUri,
-  selectMyChannelClaims,
   makeSelectClaimIsPending,
   makeSelectCollectionIsMine,
   makeSelectEditedCollectionForId,
 } from 'lbry-redux';
-import { makeSelectCostInfoForUri } from 'lbryinc';
-import { doToast } from 'redux/actions/notifications';
 import { doOpenModal } from 'redux/actions/app';
 import { selectListShuffle } from 'redux/selectors/content';
-import { doPlayUri, doSetPlayingUri, doToggleShuffleList, doToggleLoopList } from 'redux/actions/content';
+import { doToggleShuffleList, doToggleLoopList } from 'redux/actions/content';
 import CollectionActions from './view';
 
 const select = (state, props) => {
@@ -31,29 +27,23 @@ const select = (state, props) => {
   const shuffleList = selectListShuffle(state);
   const shuffle = shuffleList && shuffleList.collectionId === collectionId && shuffleList.newUrls;
   const playNextUri = shuffle && shuffle[0];
-  const playNextClaim = makeSelectClaimForUri(playNextUri)(state);
 
   return {
     claim: makeSelectClaimForUri(props.uri)(state),
-    claimIsMine: makeSelectClaimIsMine(props.uri)(state),
-    costInfo: makeSelectCostInfoForUri(props.uri)(state),
-    myChannels: selectMyChannelClaims(state),
     claimIsPending: makeSelectClaimIsPending(props.uri)(state),
     isMyCollection: makeSelectCollectionIsMine(collectionId)(state),
     collectionHasEdits: Boolean(makeSelectEditedCollectionForId(collectionId)(state)),
     firstItem,
     playNextUri,
-    playNextClaim,
   };
 };
 
 const perform = (dispatch) => ({
   openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
-  doToast: (options) => dispatch(doToast(options)),
+  doToggleShuffleList: (collectionId, shuffle) => {
-  doPlayUri: (uri) => dispatch(doPlayUri(uri)),
+    dispatch(doToggleLoopList(collectionId, false, true));
-  doSetPlayingUri: (uri) => dispatch(doSetPlayingUri({ uri })),
+    dispatch(doToggleShuffleList(undefined, collectionId, shuffle, true));
-  doToggleShuffleList: (collectionId, shuffle) => dispatch(doToggleShuffleList(undefined, collectionId, shuffle, true)),
+  },
-  doToggleLoopList: (collectionId, loop) => dispatch(doToggleLoopList(collectionId, loop)),
 });
 
 export default connect(select, perform)(CollectionActions);

ui/component/collectionActions/view.jsx

@@ -11,15 +11,12 @@ import { useHistory } from 'react-router';
 import { EDIT_PAGE, PAGE_VIEW_QUERY } from 'page/collection/view';
 import classnames from 'classnames';
 import { ENABLE_FILE_REACTIONS } from 'config';
-import { COLLECTIONS_CONSTS } from 'lbry-redux';
+import { formatLbryUrlForWeb, generateListSearchUrlParams } from 'util/url';
-import { formatLbryUrlForWeb } from 'util/url';
 
 type Props = {
   uri: string,
   claim: StreamClaim,
-  openModal: (id: string, { uri: string, claimIsMine?: boolean, isSupport?: boolean }) => void,
+  openModal: (id: string, {}) => void,
-  myChannels: ?Array<ChannelClaim>,
-  doToast: ({ message: string }) => void,
   claimIsPending: boolean,
   isMyCollection: boolean,
   collectionId: string,
@@ -28,11 +25,7 @@ type Props = {
   collectionHasEdits: boolean,
   isBuiltin: boolean,
   doToggleShuffleList: (string, boolean) => void,
-  doToggleLoopList: (string, boolean) => void,
   playNextUri: string,
-  playNextClaim: StreamClaim,
-  doPlayUri: (string) => void,
-  doSetPlayingUri: (string) => void,
   firstItem: string,
 };
 
@@ -49,11 +42,7 @@ function CollectionActions(props: Props) {
     collectionHasEdits,
     isBuiltin,
     doToggleShuffleList,
-    doToggleLoopList,
     playNextUri,
-    playNextClaim,
-    doPlayUri,
-    doSetPlayingUri,
     firstItem,
   } = props;
   const [doShuffle, setDoShuffle] = React.useState(false);
@@ -63,23 +52,23 @@ function CollectionActions(props: Props) {
   const webShareable = true; // collections have cost?
 
   const doPlay = React.useCallback(
-    (uri) => {
+    (playUri) => {
-      const collectionParams = new URLSearchParams();
+      const navigateUrl = formatLbryUrlForWeb(playUri);
-      collectionParams.set(COLLECTIONS_CONSTS.COLLECTION_ID, collectionId);
+      push({
-      const navigateUrl = formatLbryUrlForWeb(uri) + `?` + collectionParams.toString();
+        pathname: navigateUrl,
-      push(navigateUrl);
+        search: generateListSearchUrlParams(collectionId),
-      doSetPlayingUri(uri);
+        state: { forceAutoplay: true },
-      doPlayUri(uri);
+      });
     },
-    [collectionId, push, doSetPlayingUri, doPlayUri]
+    [collectionId, push]
   );
 
   React.useEffect(() => {
-    if (playNextClaim && doShuffle) {
+    if (playNextUri && doShuffle) {
       setDoShuffle(false);
       doPlay(playNextUri);
     }
-  }, [doPlay, doShuffle, playNextClaim, playNextUri]);
+  }, [doPlay, doShuffle, playNextUri]);
 
   const lhsSection = (
     <>
@@ -90,7 +79,6 @@ function CollectionActions(props: Props) {
         title={__('Play')}
         onClick={() => {
           doToggleShuffleList(collectionId, false);
-          doToggleLoopList(collectionId, false);
           doPlay(firstItem);
         }}
       />

ui/component/collectionMenuList/index.js

@@ -1,8 +1,8 @@
 import { connect } from 'react-redux';
-import { doCollectionEdit, makeSelectNameForCollectionId, doCollectionDelete } from 'lbry-redux';
+import { makeSelectNameForCollectionId } from 'lbry-redux';
 import { doOpenModal } from 'redux/actions/app';
 import { selectListShuffle } from 'redux/selectors/content';
-import { doSetPlayingUri, doToggleShuffleList } from 'redux/actions/content';
+import { doToggleLoopList, doToggleShuffleList } from 'redux/actions/content';
 import CollectionMenuList from './view';
 
 const select = (state, props) => {
@@ -17,10 +17,12 @@ const select = (state, props) => {
   };
 };
 
-export default connect(select, {
+const perform = (dispatch) => ({
-  doCollectionEdit,
+  openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
-  doOpenModal,
+  doToggleShuffleList: (collectionId) => {
-  doCollectionDelete,
+    dispatch(doToggleLoopList(collectionId, false, true));
-  doSetPlayingUri,
+    dispatch(doToggleShuffleList(undefined, collectionId, true, true));
-  doToggleShuffleList,
+  },
-})(CollectionMenuList);
+});
+
+export default connect(select, perform)(CollectionMenuList);

ui/component/collectionMenuList/view.jsx

@@ -7,8 +7,7 @@ import { Menu, MenuButton, MenuList, MenuItem } from '@reach/menu-button';
 import Icon from 'component/common/icon';
 import * as PAGES from 'constants/pages';
 import { useHistory } from 'react-router';
-import { formatLbryUrlForWeb } from 'util/url';
+import { formatLbryUrlForWeb, generateListSearchUrlParams } from 'util/url';
-import { COLLECTIONS_CONSTS } from 'lbry-redux';
 
 type Props = {
   inline?: boolean,
@@ -16,34 +15,26 @@ type Props = {
   collectionName?: string,
   collectionId: string,
   playNextUri: string,
-  doSetPlayingUri: ({ uri: ?string }) => void,
+  doToggleShuffleList: (string) => void,
-  doToggleShuffleList: (string, string, boolean, boolean) => void,
 };
 
 function CollectionMenuList(props: Props) {
-  const {
+  const { inline = false, collectionId, collectionName, doOpenModal, playNextUri, doToggleShuffleList } = props;
-    inline = false,
-    collectionId,
-    collectionName,
-    doOpenModal,
-    playNextUri,
-    doSetPlayingUri,
-    doToggleShuffleList,
-  } = props;
   const [doShuffle, setDoShuffle] = React.useState(false);
 
   const { push } = useHistory();
 
   React.useEffect(() => {
     if (playNextUri && doShuffle) {
-      const collectionParams = new URLSearchParams();
-      collectionParams.set(COLLECTIONS_CONSTS.COLLECTION_ID, collectionId);
-      const navigateUrl = formatLbryUrlForWeb(playNextUri) + `?` + collectionParams.toString();
       setDoShuffle(false);
-      doSetPlayingUri({ uri: playNextUri });
+      const navigateUrl = formatLbryUrlForWeb(playNextUri);
-      push(navigateUrl);
+      push({
+        pathname: navigateUrl,
+        search: generateListSearchUrlParams(collectionId),
+        state: { forceAutoplay: true },
+      });
     }
-  }, [push, doSetPlayingUri, collectionId, playNextUri, doShuffle]);
+  }, [collectionId, doShuffle, playNextUri, push]);
 
   return (
     <Menu>
@@ -68,7 +59,7 @@ function CollectionMenuList(props: Props) {
             <MenuItem
               className="comment__menu-option"
               onSelect={() => {
-                doToggleShuffleList('', collectionId, true, true);
+                doToggleShuffleList(collectionId);
                 setDoShuffle(true);
               }}
             >

ui/component/collectionPreviewTile/view.jsx

@@ -7,8 +7,7 @@ import TruncatedText from 'component/common/truncated-text';
 import CollectionCount from './collectionCount';
 import CollectionPrivate from './collectionPrivate';
 import CollectionMenuList from 'component/collectionMenuList';
-import { formatLbryUrlForWeb } from 'util/url';
+import { formatLbryUrlForWeb, generateListSearchUrlParams } from 'util/url';
-import { COLLECTIONS_CONSTS } from 'lbry-redux';
 import FileThumbnail from 'component/fileThumbnail';
 
 type Props = {
@@ -62,16 +61,12 @@ function CollectionPreviewTile(props: Props) {
     if (collectionId && hasClaim && resolveCollectionItems) {
       resolveCollectionItems({ collectionId, page_size: 5 });
     }
-  }, [collectionId, hasClaim]);
+  }, [collectionId, hasClaim, resolveCollectionItems]);
 
   // const signingChannel = claim && claim.signing_channel;
 
-  let navigateUrl = formatLbryUrlForWeb(collectionItemUrls[0] || '/');
+  const navigateUrl =
-  if (collectionId) {
+    formatLbryUrlForWeb(collectionItemUrls[0] || '/') + (collectionId ? generateListSearchUrlParams(collectionId) : '');
-    const collectionParams = new URLSearchParams();
-    collectionParams.set(COLLECTIONS_CONSTS.COLLECTION_ID, collectionId);
-    navigateUrl = navigateUrl + `?` + collectionParams.toString();
-  }
 
   function handleClick(e) {
     if (navigateUrl) {

ui/component/common/icon-custom.jsx

@@ -2440,6 +2440,12 @@ export const icons = {
     </svg>
   ),
   [ICONS.PLAY]: buildIcon(<polygon points="5 3 19 12 5 21 5 3" />),
+  [ICONS.PLAY_PREVIOUS]: buildIcon(
+    <g>
+      <polygon points="19 20 9 12 19 4 19 20" />
+      <line x1="5" y1="19" x2="5" y2="5" />
+    </g>
+  ),
   [ICONS.REPLAY]: buildIcon(
     <g>
       <polyline points="1 4 1 10 7 10" />

ui/component/fileRenderFloating/index.js

@@ -4,6 +4,9 @@ import {
   makeSelectTitleForUri,
   makeSelectStreamingUrlForUri,
   makeSelectClaimIsNsfw,
+  makeSelectClaimWasPurchased,
+  makeSelectNextUrlForCollectionAndUrl,
+  makeSelectPreviousUrlForCollectionAndUrl,
   SETTINGS,
 } from 'lbry-redux';
 import {
@@ -13,8 +16,10 @@ import {
   makeSelectFileRenderModeForUri,
 } from 'redux/selectors/content';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
-import { doSetPlayingUri } from 'redux/actions/content';
+import { makeSelectCostInfoForUri } from 'lbryinc';
+import { doPlayUri, doSetPlayingUri } from 'redux/actions/content';
 import { doFetchRecommendedContent } from 'redux/actions/search';
+import { doAnaltyicsPurchaseEvent } from 'redux/actions/app';
 import { withRouter } from 'react-router';
 import FileRenderFloating from './view';
 
@@ -30,12 +35,16 @@ const select = (state, props) => {
     playingUri,
     title: makeSelectTitleForUri(uri)(state),
     fileInfo: makeSelectFileInfoForUri(uri)(state),
-    mature: makeSelectClaimIsNsfw(props.uri)(state),
+    mature: makeSelectClaimIsNsfw(uri)(state),
     isFloating: makeSelectIsPlayerFloating(props.location)(state),
     streamingUrl: makeSelectStreamingUrlForUri(uri)(state),
     floatingPlayerEnabled: makeSelectClientSetting(SETTINGS.FLOATING_PLAYER)(state),
     renderMode: makeSelectFileRenderModeForUri(uri)(state),
     videoTheaterMode: makeSelectClientSetting(SETTINGS.VIDEO_THEATER_MODE)(state),
+    costInfo: makeSelectCostInfoForUri(uri)(state),
+    claimWasPurchased: makeSelectClaimWasPurchased(uri)(state),
+    nextListUri: collectionId && makeSelectNextUrlForCollectionAndUrl(collectionId, uri)(state),
+    previousListUri: collectionId && makeSelectPreviousUrlForCollectionAndUrl(collectionId, uri)(state),
     collectionId,
   };
 };
@@ -43,6 +52,19 @@ const select = (state, props) => {
 const perform = (dispatch) => ({
   closeFloatingPlayer: () => dispatch(doSetPlayingUri({ uri: null })),
   doFetchRecommendedContent: (uri, mature) => dispatch(doFetchRecommendedContent(uri, mature)),
+  doPlayUri: (uri, collectionId, hideFailModal) =>
+    dispatch(
+      doPlayUri(
+        uri,
+        false,
+        false,
+        (fileInfo) => {
+          dispatch(doAnaltyicsPurchaseEvent(fileInfo));
+        },
+        hideFailModal
+      ),
+      dispatch(doSetPlayingUri({ uri, collectionId }))
+    ),
 });
 
 export default withRouter(connect(select, perform)(FileRenderFloating));

ui/component/fileRenderFloating/view.jsx

@@ -11,10 +11,12 @@ import usePersistedState from 'effects/use-persisted-state';
 import { PRIMARY_PLAYER_WRAPPER_CLASS } from 'page/file/view';
 import Draggable from 'react-draggable';
 import { onFullscreenChange } from 'util/full-screen';
+import { generateListSearchUrlParams, formatLbryUrlForWeb } from 'util/url';
 import { useIsMobile } from 'effects/use-screensize';
 import debounce from 'util/debounce';
 import { useHistory } from 'react-router';
-import { isURIEqual, COLLECTIONS_CONSTS } from 'lbry-redux';
+import { isURIEqual } from 'lbry-redux';
+import AutoplayCountdown from 'component/autoplayCountdown';
 
 const IS_DESKTOP_MAC = typeof process === 'object' ? process.platform === 'darwin' : false;
 const DEBOUNCE_WINDOW_RESIZE_HANDLER_MS = 60;
@@ -34,7 +36,12 @@ type Props = {
   primaryUri: ?string,
   videoTheaterMode: boolean,
   doFetchRecommendedContent: (string, boolean) => void,
+  doPlayUri: (string, string, boolean) => void,
   collectionId: string,
+  costInfo: any,
+  claimWasPurchased: boolean,
+  nextListUri: string,
+  previousListUri: string,
 };
 
 export default function FileRenderFloating(props: Props) {
@@ -52,16 +59,23 @@ export default function FileRenderFloating(props: Props) {
     primaryUri,
     videoTheaterMode,
     doFetchRecommendedContent,
+    doPlayUri,
     collectionId,
+    costInfo,
+    claimWasPurchased,
+    nextListUri,
+    previousListUri,
   } = props;
-  const {
+  const { location, push } = useHistory();
-    location: { pathname },
+  const hideFloatingPlayer = location.state && location.state.hideFloatingPlayer;
-  } = useHistory();
   const isMobile = useIsMobile();
   const mainFilePlaying = playingUri && isURIEqual(playingUri.uri, primaryUri);
   const [fileViewerRect, setFileViewerRect] = useState();
   const [desktopPlayStartTime, setDesktopPlayStartTime] = useState();
   const [wasDragging, setWasDragging] = useState(false);
+  const [doNavigate, setDoNavigate] = useState(false);
+  const [playNextUrl, setPlayNextUrl] = useState(true);
+  const [countdownCanceled, setCountdownCanceled] = useState(false);
   const [position, setPosition] = usePersistedState('floating-file-viewer:position', {
     x: -25,
     y: window.innerHeight - 400,
@@ -71,13 +85,10 @@ export default function FileRenderFloating(props: Props) {
     y: 0,
   });
 
-  let navigateUrl;
+  const navigateUrl = uri + (collectionId ? generateListSearchUrlParams(collectionId) : '');
-  if (collectionId) {
-    const collectionParams = new URLSearchParams();
-    collectionParams.set(COLLECTIONS_CONSTS.COLLECTION_ID, collectionId);
-    navigateUrl = uri + `?` + collectionParams.toString();
-  }
 
+  const isFree = costInfo && costInfo.cost === 0;
+  const canViewFile = isFree || claimWasPurchased;
   const playingUriSource = playingUri && playingUri.source;
   const isPlayable = RENDER_MODES.FLOATING_MODES.includes(renderMode);
   const isReadyToPlay = isPlayable && (streamingUrl || (fileInfo && fileInfo.completed));
@@ -102,7 +113,7 @@ export default function FileRenderFloating(props: Props) {
     }
   }
 
-  function clampToScreen(pos) {
+  const clampToScreen = React.useCallback((pos) => {
     const ESTIMATED_SCROLL_BAR_PX = 50;
     const FLOATING_PLAYER_CLASS = 'content__viewer--floating';
     const fpPlayerElem = document.querySelector(`.${FLOATING_PLAYER_CLASS}`);
@@ -115,7 +126,7 @@ export default function FileRenderFloating(props: Props) {
         pos.y = getScreenHeight() - fpPlayerElem.getBoundingClientRect().height;
       }
     }
-  }
+  }, []);
 
   // Updated 'relativePos' based on persisted 'position':
   const stringifiedPosition = JSON.stringify(position);
@@ -139,7 +150,7 @@ export default function FileRenderFloating(props: Props) {
         setPosition({ x: pos.x, y: pos.y });
       }
     }
-  }, [isFloating, stringifiedPosition]);
+  }, [clampToScreen, isFloating, position.x, position.y, setPosition, stringifiedPosition]);
 
   // Listen to main-window resizing and adjust the fp position accordingly:
   useEffect(() => {
@@ -157,9 +168,9 @@ export default function FileRenderFloating(props: Props) {
 
     // 'relativePos' is needed in the dependency list to avoid stale closure.
     // Otherwise, this could just be changed to a one-time effect.
-  }, [relativePos]);
+  }, [clampToScreen, relativePos.x, relativePos.y, setPosition]);
 
-  function handleResize() {
+  const handleResize = React.useCallback(() => {
     const element = mainFilePlaying
       ? document.querySelector(`.${PRIMARY_PLAYER_WRAPPER_CLASS}`)
       : document.querySelector(`.${INLINE_PLAYER_WRAPPER_CLASS}`);
@@ -184,13 +195,14 @@ export default function FileRenderFloating(props: Props) {
 
     // $FlowFixMe
     setFileViewerRect({ ...objectRect, windowOffset: window.pageYOffset });
-  }
+  }, [mainFilePlaying]);
 
   useEffect(() => {
     if (streamingUrl) {
       handleResize();
+      setCountdownCanceled(false);
     }
-  }, [streamingUrl, pathname, playingUriSource, isFloating, mainFilePlaying]);
+  }, [handleResize, streamingUrl, videoTheaterMode]);
 
   useEffect(() => {
     handleResize();
@@ -201,7 +213,7 @@ export default function FileRenderFloating(props: Props) {
       window.removeEventListener('resize', handleResize);
       onFullscreenChange(window, 'remove', handleResize);
     };
-  }, [setFileViewerRect, isFloating, playingUriSource, mainFilePlaying, videoTheaterMode]);
+  }, [handleResize]);
 
   useEffect(() => {
     // @if TARGET='app'
@@ -219,9 +231,42 @@ export default function FileRenderFloating(props: Props) {
     if (isFloating) {
       doFetchRecommendedContent(uri, mature);
     }
-  }, [uri, mature, isFloating]);
+  }, [doFetchRecommendedContent, isFloating, mature, uri]);
 
-  if (!isPlayable || !uri || (isFloating && (isMobile || !floatingPlayerEnabled))) {
+  const doPlay = React.useCallback(
+    (playUri) => {
+      setDoNavigate(false);
+      if (!isFloating) {
+        const navigateUrl = formatLbryUrlForWeb(playUri);
+        push({
+          pathname: navigateUrl,
+          search: collectionId && generateListSearchUrlParams(collectionId),
+          state: { collectionId, forceAutoplay: true, hideFloatingPlayer: true },
+        });
+      } else {
+        doPlayUri(playUri, collectionId, true);
+      }
+    },
+    [collectionId, doPlayUri, isFloating, push]
+  );
+
+  useEffect(() => {
+    if (!doNavigate) return;
+
+    if (playNextUrl && nextListUri) {
+      doPlay(nextListUri);
+    } else if (previousListUri) {
+      doPlay(previousListUri);
+    }
+    setPlayNextUrl(true);
+  }, [doNavigate, doPlay, nextListUri, playNextUrl, previousListUri]);
+
+  if (
+    !isPlayable ||
+    !uri ||
+    (isFloating && (isMobile || !floatingPlayerEnabled || hideFloatingPlayer)) ||
+    (collectionId && !isFloating && ((!canViewFile && !nextListUri) || countdownCanceled))
+  ) {
     return null;
   }
 
@@ -306,18 +351,31 @@ export default function FileRenderFloating(props: Props) {
               desktopPlayStartTime={desktopPlayStartTime}
               // @endif
             />
+          ) : (
+            <>
+              {collectionId && !canViewFile ? (
+                <div className="content__loading">
+                  <AutoplayCountdown
+                    nextRecommendedUri={nextListUri}
+                    doNavigate={() => setDoNavigate(true)}
+                    doReplay={() => doPlayUri(uri, collectionId, false)}
+                    doPrevious={() => {
+                      setPlayNextUrl(false);
+                      setDoNavigate(true);
+                    }}
+                    onCanceled={() => setCountdownCanceled(true)}
+                    skipPaid
+                  />
+                </div>
               ) : (
                 <LoadingScreen status={loadingMessage} />
               )}
+            </>
+          )}
           {isFloating && (
             <div className="draggable content__info">
               <div className="claim-preview__title" title={title || uri}>
-                <Button
+                <Button label={title || uri} navigate={navigateUrl} button="link" className="content__floating-link" />
-                  label={title || uri}
-                  navigate={navigateUrl || uri}
-                  button="link"
-                  className="content__floating-link"
-                />
               </div>
               <UriIndicator link uri={uri} />
             </div>

ui/component/fileRenderInitiator/index.js

@@ -37,7 +37,6 @@ const select = (state, props) => {
     insufficientCredits: makeSelectInsufficientCreditsForUri(props.uri)(state),
     streamingUrl: makeSelectStreamingUrlForUri(props.uri)(state),
     autoplay: makeSelectClientSetting(SETTINGS.AUTOPLAY_MEDIA)(state),
-    hasCostInfo: Boolean(makeSelectCostInfoForUri(props.uri)(state)),
     costInfo: makeSelectCostInfoForUri(props.uri)(state),
     renderMode: makeSelectFileRenderModeForUri(props.uri)(state),
     claim: makeSelectClaimForUri(props.uri)(state),

ui/component/fileRenderInitiator/view.jsx

@@ -22,12 +22,11 @@ type Props = {
   fileInfo: FileListItem,
   uri: string,
   history: { push: (string) => void },
-  location: { search: ?string, pathname: string },
+  location: { search: ?string, pathname: string, href: string, state: { forceAutoplay: boolean } },
   obscurePreview: boolean,
   insufficientCredits: boolean,
   claimThumbnail?: string,
   autoplay: boolean,
-  hasCostInfo: boolean,
   costInfo: any,
   inline: boolean,
   renderMode: string,
@@ -50,7 +49,6 @@ export default function FileRenderInitiator(props: Props) {
     location,
     claimThumbnail,
     renderMode,
-    hasCostInfo,
     costInfo,
     claimWasPurchased,
     authenticated,
@@ -58,24 +56,20 @@ export default function FileRenderInitiator(props: Props) {
     collectionId,
   } = props;
 
-  // force autoplay if a timestamp is present
+  // check if there is a time or autoplay parameter, if so force autoplay
-  let autoplay = props.autoplay;
+  const urlTimeParam = location && location.href && location.href.indexOf('t=') > -1;
-  // get current url
+  const forceAutoplayParam = location && location.state && location.state.forceAutoplay;
-  const url = window.location.href;
+  const autoplay = forceAutoplayParam || urlTimeParam || props.autoplay;
-  // check if there is a time parameter, if so force autoplay
-  if (url.indexOf('t=') > -1) {
-    autoplay = true;
-  }
 
-  const cost = costInfo && costInfo.cost;
+  const isFree = costInfo && costInfo.cost === 0;
-  const isFree = hasCostInfo && cost === 0;
+  const canViewFile = isFree || claimWasPurchased;
   const fileStatus = fileInfo && fileInfo.status;
   const isPlayable = RENDER_MODES.FLOATING_MODES.includes(renderMode);
   const isText = RENDER_MODES.TEXT_MODES.includes(renderMode);
   const [thumbnail, setThumbnail] = React.useState(FileRenderPlaceholder);
   const containerRef = React.useRef<any>();
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (claimThumbnail) {
       setTimeout(() => {
         let newThumbnail = claimThumbnail;
@@ -96,7 +90,7 @@ export default function FileRenderInitiator(props: Props) {
         }
       }, 200);
     }
-  }, [claimThumbnail]);
+  }, [claimThumbnail, thumbnail]);
 
   function doAuthRedirect() {
     history.push(`/$/${PAGES.AUTH}?redirect=${encodeURIComponent(location.pathname)}`);
@@ -137,19 +131,20 @@ export default function FileRenderInitiator(props: Props) {
   useEffect(() => {
     const videoOnPage = document.querySelector('video');
     if (
-      (isFree || claimWasPurchased) &&
+      (canViewFile || forceAutoplayParam) &&
-      ((autoplay && !videoOnPage && isPlayable) || RENDER_MODES.AUTO_RENDER_MODES.includes(renderMode))
+      ((autoplay && (!videoOnPage || forceAutoplayParam) && isPlayable) ||
+        RENDER_MODES.AUTO_RENDER_MODES.includes(renderMode))
     ) {
       viewFile();
     }
-  }, [autoplay, viewFile, isFree, renderMode, isPlayable, claimWasPurchased]);
+  }, [autoplay, canViewFile, forceAutoplayParam, isPlayable, renderMode, viewFile]);
 
   /*
   once content is playing, let the appropriate <FileRender> take care of it...
   but for playables, always render so area can be used to fill with floating player
    */
   if (isPlaying && !isPlayable) {
-    if (isFree || claimWasPurchased) {
+    if (canViewFile && !collectionId) {
       return null;
     }
   }

ui/component/uriIndicator/view.jsx

@@ -57,8 +57,8 @@ class UriIndicator extends React.PureComponent<Props> {
     }
 
     const isChannelClaim = claim.value_type === 'channel';
-
+    const signingChannel = claim.signing_channel && claim.signing_channel.amount;
-    if (!claim.signing_channel && !isChannelClaim) {
+    if (!signingChannel && !isChannelClaim) {
       if (hideAnonymous) {
         return null;
       }

ui/component/viewers/videoViewer/index.js

@@ -8,7 +8,13 @@ import {
   makeSelectNextUrlForCollectionAndUrl,
   makeSelectPreviousUrlForCollectionAndUrl,
 } from 'lbry-redux';
-import { doChangeVolume, doChangeMute, doAnalyticsView, doAnalyticsBuffer } from 'redux/actions/app';
+import {
+  doChangeVolume,
+  doChangeMute,
+  doAnalyticsView,
+  doAnalyticsBuffer,
+  doAnaltyicsPurchaseEvent,
+} from 'redux/actions/app';
 import { selectVolume, selectMute } from 'redux/selectors/app';
 import { savePosition, clearPosition, doPlayUri, doSetPlayingUri } from 'redux/actions/content';
 import {
@@ -78,8 +84,19 @@ const perform = (dispatch) => ({
   toggleVideoTheaterMode: () => dispatch(toggleVideoTheaterMode()),
   toggleAutoplayNext: () => dispatch(toggleAutoplayNext()),
   setVideoPlaybackRate: (rate) => dispatch(doSetClientSetting(SETTINGS.VIDEO_PLAYBACK_RATE, rate)),
-  doPlayUri: (uri) => dispatch(doPlayUri(uri)),
+  doPlayUri: (uri, collectionId) =>
-  doSetPlayingUri: (uri, collectionId) => dispatch(doSetPlayingUri({ uri, collectionId })),
+    dispatch(
+      doPlayUri(
+        uri,
+        false,
+        false,
+        (fileInfo) => {
+          dispatch(doAnaltyicsPurchaseEvent(fileInfo));
+        },
+        true
+      ),
+      dispatch(doSetPlayingUri({ uri, collectionId }))
+    ),
 });
 
 export default withRouter(connect(select, perform)(VideoViewer));

ui/component/viewers/videoViewer/view.jsx

@@ -25,8 +25,7 @@ import I18nMessage from 'component/i18nMessage';
 import { useHistory } from 'react-router';
 import { getAllIds } from 'util/buildHomepage';
 import type { HomepageCat } from 'util/buildHomepage';
-import { formatLbryUrlForWeb } from 'util/url';
+import { formatLbryUrlForWeb, generateListSearchUrlParams } from 'util/url';
-import { COLLECTIONS_CONSTS } from 'lbry-redux';
 
 const PLAY_TIMEOUT_ERROR = 'play_timeout_error';
 const PLAY_TIMEOUT_LIMIT = 2000;
@@ -60,8 +59,7 @@ type Props = {
   homepageData?: { [string]: HomepageCat },
   shareTelemetry: boolean,
   isFloating: boolean,
-  doPlayUri: (string) => void,
+  doPlayUri: (string, string) => void,
-  doSetPlayingUri: (string, string) => void,
   collectionId: string,
   nextRecommendedUri: string,
   previousListUri: string,
@@ -104,7 +102,6 @@ function VideoViewer(props: Props) {
     shareTelemetry,
     isFloating,
     doPlayUri,
-    doSetPlayingUri,
     collectionId,
     nextRecommendedUri,
     previousListUri,
@@ -183,28 +180,29 @@ function VideoViewer(props: Props) {
 
   const doPlay = useCallback(
     (playUri) => {
-      let navigateUrl = formatLbryUrlForWeb(playUri);
-      if (collectionId) {
-        const collectionParams = new URLSearchParams();
-        collectionParams.set(COLLECTIONS_CONSTS.COLLECTION_ID, collectionId);
-        navigateUrl = navigateUrl + `?` + collectionParams.toString();
-        clearPosition(playUri);
-      }
-      if (!isFloating) {
-        push(navigateUrl);
-      }
-      doPlayUri(playUri);
-      doSetPlayingUri(playUri, collectionId);
       setDoNavigate(false);
+      if (!isFloating) {
+        const navigateUrl = formatLbryUrlForWeb(playUri);
+        push({
+          pathname: navigateUrl,
+          search: collectionId && generateListSearchUrlParams(collectionId),
+          state: { collectionId, forceAutoplay: true, hideFloatingPlayer: true },
+        });
+      } else {
+        doPlayUri(playUri, collectionId);
+      }
     },
-    [clearPosition, collectionId, doPlayUri, doSetPlayingUri, isFloating, push]
+    [collectionId, doPlayUri, isFloating, push]
   );
 
   useEffect(() => {
     if (doNavigate) {
       if (playNextUrl) {
         if (permanentUrl !== nextRecommendedUri) {
-          if (nextRecommendedUri) doPlay(nextRecommendedUri);
+          if (nextRecommendedUri) {
+            if (collectionId) clearPosition(permanentUrl);
+            doPlay(nextRecommendedUri);
+          }
         } else {
           setReplay(true);
         }
@@ -224,7 +222,18 @@ function VideoViewer(props: Props) {
       setEnded(false);
       setPlayNextUrl(true);
     }
-  }, [doNavigate, doPlay, ended, nextRecommendedUri, permanentUrl, playNextUrl, previousListUri, videoNode]);
+  }, [
+    clearPosition,
+    collectionId,
+    doNavigate,
+    doPlay,
+    ended,
+    nextRecommendedUri,
+    permanentUrl,
+    playNextUrl,
+    previousListUri,
+    videoNode,
+  ]);
 
   React.useEffect(() => {
     if (ended) {
@@ -298,12 +307,12 @@ function VideoViewer(props: Props) {
 
   const doPlayNext = () => {
     setPlayNextUrl(true);
-    setDoNavigate(true);
+    setEnded(true);
   };
 
   const doPlayPrevious = () => {
     setPlayNextUrl(false);
-    setDoNavigate(true);
+    setEnded(true);
   };
 
   const onPlayerReady = useCallback((player: Player, videoNode: any) => {
@@ -397,7 +406,6 @@ function VideoViewer(props: Props) {
     >
       {showAutoplayCountdown && (
         <AutoplayCountdown
-          uri={uri}
           nextRecommendedUri={nextRecommendedUri}
           doNavigate={() => setDoNavigate(true)}
           doReplay={() => setReplay(true)}

ui/constants/icons.js

@@ -45,6 +45,7 @@ export const WEB = 'Globe';
 export const SHARE = 'Share2';
 export const EXTERNAL = 'ExternalLink';
 export const PLAY = 'Play';
+export const PLAY_PREVIOUS = 'Play Previous';
 export const FACEBOOK = 'Facebook';
 export const TWITTER = 'Twitter';
 export const TELEGRAM = 'Telegram';

ui/redux/actions/content.js

@@ -148,7 +148,8 @@ export function doPlayUri(
   uri: string,
   skipCostCheck: boolean = false,
   saveFileOverride: boolean = false,
-  cb?: () => void
+  cb?: () => void,
+  hideFailModal: boolean = false
 ) {
   return (dispatch: Dispatch, getState: () => any) => {
     const state = getState();
@@ -183,7 +184,7 @@ export function doPlayUri(
         !claimWasPurchased &&
         (!instantPurchaseMax || !instantPurchaseEnabled || cost > instantPurchaseMax)
       ) {
-        dispatch(doOpenModal(MODALS.AFFIRM_PURCHASE, { uri }));
+        if (!hideFailModal) dispatch(doOpenModal(MODALS.AFFIRM_PURCHASE, { uri }));
       } else {
         beginGetFile();
       }
@@ -290,10 +291,10 @@ export function doToggleLoopList(collectionId: string, loop: boolean, hideToast:
       type: ACTIONS.TOGGLE_LOOP_LIST,
       data: { collectionId, loop },
     });
-    if (loop && !hideToast) {
+    if (!hideToast) {
       dispatch(
         doToast({
-          message: __('Loop is on.'),
+          message: loop ? __('Loop is on.') : __('Loop is off.'),
         })
       );
     }
@@ -323,18 +324,18 @@ export function doToggleShuffleList(currentUri: string, collectionId: string, sh
         type: ACTIONS.TOGGLE_SHUFFLE_LIST,
         data: { collectionId, newUrls },
       });
-      if (!hideToast) {
-        dispatch(
-          doToast({
-            message: __('Shuffle is on.'),
-          })
-        );
-      }
     } else {
       dispatch({
         type: ACTIONS.TOGGLE_SHUFFLE_LIST,
         data: { collectionId, newUrls: false },
       });
     }
+    if (!hideToast) {
+      dispatch(
+        doToast({
+          message: shuffle ? __('Shuffle is on.') : __('Shuffle is off.'),
+        })
+      );
+    }
   };
 }

ui/redux/actions/settings.js

@@ -432,5 +432,11 @@ export function toggleAutoplayNext() {
     const autoplayNext = makeSelectClientSetting(SETTINGS.AUTOPLAY_NEXT)(state);
 
     dispatch(doSetClientSetting(SETTINGS.AUTOPLAY_NEXT, !autoplayNext, ready));
+
+    dispatch(
+      doToast({
+        message: autoplayNext ? __('Autoplay Next is off.') : __('Autoplay Next is on.'),
+      })
+    );
   };
 }

ui/util/url.js

@@ -156,3 +156,9 @@ export const generateRssUrl = (domain, channelClaim) => {
   const url = `${domain}/$/rss/${channelClaim.canonical_url.replace('lbry://', '').replace('#', ':')}`;
   return url;
 };
+
+export const generateListSearchUrlParams = (collectionId) => {
+  const urlParams = new URLSearchParams();
+  urlParams.set(COLLECTIONS_CONSTS.COLLECTION_ID, collectionId);
+  return `?` + urlParams.toString();
+};