Clear player position if on playlist. (#6943)

ui/component/autoplayCountdown/index.js

@@ -3,7 +3,7 @@ import { makeSelectClaimForUri, SETTINGS, COLLECTIONS_CONSTS, makeSelectNextUrlF
 import { withRouter } from 'react-router';
 import { makeSelectIsPlayerFloating, makeSelectNextUnplayedRecommended } from 'redux/selectors/content';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
-import { doSetPlayingUri, doPlayUri } from 'redux/actions/content';
+import { doSetPlayingUri, doPlayUri, clearPosition } from 'redux/actions/content';
 import AutoplayCountdown from './view';
 import { selectModal } from 'redux/selectors/app';
 
@@ -38,5 +38,6 @@ export default withRouter(
   connect(select, {
     doSetPlayingUri,
     doPlayUri,
+    clearPosition,
   })(AutoplayCountdown)
 );

ui/component/autoplayCountdown/view.jsx

@@ -19,6 +19,7 @@ type Props = {
   doPlayUri: (string) => void,
   modal: { id: string, modalProps: {} },
   collectionId?: string,
+  clearPosition: (string) => void,
 };
 
 function AutoplayCountdown(props: Props) {
@@ -31,6 +32,7 @@ function AutoplayCountdown(props: Props) {
     history: { push },
     modal,
     collectionId,
+    clearPosition,
   } = props;
   const nextTitle = nextRecommendedClaim && nextRecommendedClaim.value && nextRecommendedClaim.value.title;
 
@@ -53,20 +55,29 @@ function AutoplayCountdown(props: Props) {
     }
   }
 
+  const doPlay = useCallback(
+    (uri) => {
+      if (collectionId) {
+        clearPosition(uri);
+      }
+      doSetPlayingUri({ uri });
+      doPlayUri(uri);
+    },
+    [clearPosition, doSetPlayingUri, doPlayUri]
+  );
+
   const doNavigate = useCallback(() => {
     if (!isFloating) {
       if (navigateUrl) {
         push(navigateUrl);
-        doSetPlayingUri({ uri: nextRecommendedUri });
-        doPlayUri(nextRecommendedUri);
+        doPlay(nextRecommendedUri);
       }
     } else {
       if (nextRecommendedUri) {
-        doSetPlayingUri({ uri: nextRecommendedUri });
-        doPlayUri(nextRecommendedUri);
+        doPlay(nextRecommendedUri);
       }
     }
-  }, [navigateUrl, nextRecommendedUri, isFloating, doSetPlayingUri, doPlayUri, push]);
+  }, [navigateUrl, nextRecommendedUri, isFloating, doPlay, push]);
 
   function shouldPauseAutoplay() {
     const elm = document.querySelector(`.${CLASSNAME_AUTOPLAY_COUNTDOWN}`);

ui/page/file/index.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { doSetContentHistoryItem, doSetPrimaryUri } from 'redux/actions/content';
+import { doSetContentHistoryItem, doSetPrimaryUri, clearPosition } from 'redux/actions/content';
 import { withRouter } from 'react-router-dom';
 import {
   doFetchFileInfo,
@@ -45,6 +45,7 @@ const perform = (dispatch) => ({
   fetchCostInfo: (uri) => dispatch(doFetchCostInfoForUri(uri)),
   setViewed: (uri) => dispatch(doSetContentHistoryItem(uri)),
   setPrimaryUri: (uri) => dispatch(doSetPrimaryUri(uri)),
+  clearPosition: (uri) => dispatch(clearPosition(uri)),
 });
 
 export default withRouter(connect(select, perform)(FilePage));

ui/page/file/view.jsx

@@ -38,6 +38,7 @@ type Props = {
   claimIsMine: boolean,
   commentsDisabled: boolean,
   isLivestream: boolean,
+  clearPosition: (string) => void,
 };
 
 function FilePage(props: Props) {
@@ -60,6 +61,7 @@ function FilePage(props: Props) {
     collection,
     collectionId,
     isLivestream,
+    clearPosition,
   } = props;
   const cost = costInfo ? costInfo.cost : null;
   const hasFileInfo = fileInfo !== undefined;
@@ -74,6 +76,10 @@ function FilePage(props: Props) {
     }
     // @endif
 
+    if (collectionId) {
+      clearPosition(uri);
+    }
+
     // See https://github.com/lbryio/lbry-desktop/pull/1563 for discussion
     fetchCostInfo(uri);
     setViewed(uri);
@@ -82,7 +88,7 @@ function FilePage(props: Props) {
     return () => {
       setPrimaryUri(null);
     };
-  }, [uri, hasFileInfo, fetchFileInfo, fetchCostInfo, setViewed, setPrimaryUri]);
+  }, [uri, hasFileInfo, fetchFileInfo, collectionId, clearPosition, fetchCostInfo, setViewed, setPrimaryUri]);
 
   function renderFilePageLayout() {
     if (RENDER_MODES.FLOATING_MODES.includes(renderMode)) {