next unplayed

src/ui/component/fileRender/index.js

@@ -7,10 +7,10 @@ import {
   makeSelectMediaTypeForUri,
   makeSelectDownloadPathForUri,
   makeSelectFileNameForUri,
-  makeSelectFirstRecommendedFileForUri,
 } from 'lbry-redux';
 import { THEME, AUTOPLAY } from 'constants/settings';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
+import { makeSelectNextUnplayedRecommended } from 'redux/selectors/content';
 import FileRender from './view';
 
 const select = (state, props) => ({
@@ -22,8 +22,8 @@ const select = (state, props) => ({
   downloadPath: makeSelectDownloadPathForUri(props.uri)(state),
   fileName: makeSelectFileNameForUri(props.uri)(state),
   streamingUrl: makeSelectStreamingUrlForUri(props.uri)(state),
-  nextFileToPlay: makeSelectFirstRecommendedFileForUri(props.uri)(state),
   autoplay: makeSelectClientSetting(AUTOPLAY)(state),
+  nextUnplayed: makeSelectNextUnplayedRecommended(props.uri)(state),
 });
 
 export default connect(select)(FileRender);

src/ui/component/fileRender/view.jsx

@@ -71,6 +71,7 @@ type Props = {
   fileName: string,
   autoplay: boolean,
   nextFileToPlay: string,
+  nextUnplayed: string,
   history: { push: string => void },
 };
 
@@ -105,9 +106,9 @@ class FileRender extends React.PureComponent<Props> {
   }
 
   onEndedCb() {
-    const { autoplay, nextFileToPlay, history } = this.props;
-    if (autoplay && nextFileToPlay) {
-      history.push(formatLbryUriForWeb(nextFileToPlay));
+    const { autoplay, nextUnplayed, history } = this.props;
+    if (autoplay && nextUnplayed) {
+      history.push(formatLbryUriForWeb(nextUnplayed));
     }
   }
 

src/ui/component/viewers/videoViewer/view.jsx

@@ -37,17 +37,28 @@ function VideoViewer(props: Props) {
     const currentVideo: HTMLVideoElement | null = document.querySelector('video');
 
     function doEnded() {
+      // clear position
       setPlayingUri(null);
       onEndedCB();
     }
+    function doPause(e: Event) {
+      // store position e.target.currentTime
+    }
+    function doVolume(e: Event) {
+      // store volume e.target.volume
+    }
 
     if (currentVideo) {
       currentVideo.addEventListener('ended', doEnded);
+      currentVideo.addEventListener('pause', doPause);
+      currentVideo.addEventListener('volumechange', doVolume);
     }
     // cleanup function:
     return () => {
       if (currentVideo) {
         currentVideo.removeEventListener('ended', doEnded);
+        currentVideo.removeEventListener('pause', doPause);
+        currentVideo.removeEventListener('volumechange', doVolume);
       }
     };
   }, []);

src/ui/redux/selectors/content.js

@@ -5,6 +5,7 @@ import {
   selectClaimsByUri,
   makeSelectClaimsInChannelForCurrentPageState,
   makeSelectClaimIsNsfw,
+  makeSelectRecommendedContentForUri,
 } from 'lbry-redux';
 import { selectShowMatureContent } from 'redux/selectors/settings';
 
@@ -76,6 +77,21 @@ export const makeSelectHasVisitedUri = (uri: string) =>
     history => Boolean(history)
   );
 
+export const makeSelectNextUnplayedRecommended = (uri: string) =>
+  createSelector(
+    makeSelectRecommendedContentForUri(uri),
+    selectHistory,
+    (possibleNext, history) => {
+      if (possibleNext) {
+        for (let i = 0; i < possibleNext.length; i++) {
+          if (!history.find(item => item.uri === possibleNext[i])) {
+            return possibleNext[i];
+          }
+        }
+      }
+    }
+  );
+
 export const selectRecentHistory = createSelector(
   selectHistory,
   history => {