Save media position (#489)

app/package-lock.json

@@ -4060,8 +4060,8 @@
             }
         },
         "lbry-redux": {
-            "version": "github:lbryio/lbry-redux#b9554f9fbe2c8ecf29d63ed07e5d5d93aeb4d141",
-            "from": "github:lbryio/lbry-redux#old-search",
+            "version": "github:lbryio/lbry-redux#29865c07763b3cf75e821b9972ed473b2fdbec61",
+            "from": "github:lbryio/lbry-redux#save-media-position",
             "requires": {
                 "proxy-polyfill": "0.1.6",
                 "reselect": "^3.0.0",

app/package.json

@@ -8,7 +8,7 @@
     "dependencies": {
         "base-64": "^0.1.0",
         "@expo/vector-icons": "^8.1.0",
-        "lbry-redux": "lbryio/lbry-redux#old-search",
+        "lbry-redux": "lbryio/lbry-redux#save-media-position",
         "lbryinc": "lbryio/lbryinc",
         "lodash": ">=4.17.11",
         "merge": ">=1.2.1",

app/src/component/mediaPlayer/index.js

@@ -1,10 +1,14 @@
 import { connect } from 'react-redux';
-import { SETTINGS } from 'lbry-redux';
+import { SETTINGS, savePosition } from 'lbry-redux';
 import { makeSelectClientSetting } from '../../redux/selectors/settings';
 import MediaPlayer from './view';
 
 const select = state => ({
-    backgroundPlayEnabled: makeSelectClientSetting(SETTINGS.BACKGROUND_PLAY_ENABLED)(state),
+  backgroundPlayEnabled: makeSelectClientSetting(SETTINGS.BACKGROUND_PLAY_ENABLED)(state),
 });
 
-export default connect(select, null)(MediaPlayer);
+const perform = dispatch => ({
+  savePosition: (claimId, outpoint, position) => dispatch(savePosition(claimId, outpoint, position)),
+});
+
+export default connect(select, perform)(MediaPlayer);

app/src/component/mediaPlayer/view.js

@@ -81,13 +81,22 @@ class MediaPlayer extends React.PureComponent {
     this.setState({
       duration: data.duration
     });
+
+    const { position } = this.props;
+    if (!isNaN(parseFloat(position)) && position > 0) {
+      this.video.seek(position);
+    }
+
     if (this.props.onMediaLoaded) {
       this.props.onMediaLoaded();
     }
   }
 
   onProgress = (data) => {
-    this.setState({ currentTime: data.currentTime });
+    const { savePosition, fileInfo } = this.props;
+
+
+    this.setState({ currentTime: data.currentTime }, () => savePosition(fileInfo.claim_id, fileInfo.outpoint, data.currentTime));
 
     if (!this.state.seeking) {
       this.setSeekerPosition(this.calculateSeekerPosition());
@@ -98,6 +107,7 @@ class MediaPlayer extends React.PureComponent {
         this.props.onPlaybackStarted();
       }
       this.setState({ firstPlay: false });
+
       this.hidePlayerControls();
     }
   }

app/src/index.js

@@ -13,6 +13,7 @@ import {
   Lbry,
   blacklistReducer,
   claimsReducer,
+  contentReducer,
   costInfoReducer,
   fileInfoReducer,
   notificationsReducer,
@@ -81,6 +82,7 @@ const reducers = combineReducers({
   auth: authReducer,
   blacklist: blacklistReducer,
   claims: claimsReducer,
+  content: contentReducer,
   costInfo: costInfoReducer,
   drawer: drawerReducer,
   fileInfo: fileInfoReducer,
@@ -113,13 +115,14 @@ window.store = store;
 
 const compressor = createCompressor();
 const authFilter = createFilter('auth', ['authToken']);
+const contentFilter = createFilter('content', ['positions']);
 const saveClaimsFilter = createFilter('claims', ['byId', 'claimsByUri']);
 const subscriptionsFilter = createFilter('subscriptions', ['enabledChannelNotifications', 'subscriptions']);
 const settingsFilter = createFilter('settings', ['clientSettings']);
 const walletFilter = createFilter('wallet', ['receiveAddress']);
 
 const persistOptions = {
-  whitelist: ['auth', 'claims', 'subscriptions', 'settings', 'wallet'],
+  whitelist: ['auth', 'claims', 'content', 'subscriptions', 'settings', 'wallet'],
   // Order is important. Needs to be compressed last or other transforms can't
   // read the data
   transforms: [authFilter, saveClaimsFilter, subscriptionsFilter, settingsFilter, walletFilter, compressor],

app/src/page/file/index.js

@@ -10,6 +10,7 @@ import {
   makeSelectFileInfoForUri,
   makeSelectChannelForClaimUri,
   makeSelectClaimForUri,
+  makeSelectContentPositionForUri,
   makeSelectContentTypeForUri,
   makeSelectMetadataForUri,
   selectBalance,
@@ -34,6 +35,7 @@ const select = (state, props) => {
     fileInfo: makeSelectFileInfoForUri(selectProps.uri)(state),
     rewardedContentClaimIds: selectRewardContentClaimIds(state, selectProps),
     channelUri: makeSelectChannelForClaimUri(selectProps.uri, true)(state),
+    position: makeSelectContentPositionForUri(selectProps.uri)(state)
   };
 };
 

app/src/page/file/view.js

@@ -368,6 +368,7 @@ class FilePage extends React.PureComponent {
       isResolvingUri,
       blackListedOutpoints,
       navigation,
+      position,
       purchaseUri
     } = this.props;
     const { uri, autoplay } = navigation.state.params;
@@ -536,6 +537,7 @@ class FilePage extends React.PureComponent {
                     onPlaybackStarted={this.onPlaybackStarted}
                     onPlaybackFinished={this.onPlaybackFinished}
                     thumbnail={metadata.thumbnail}
+                    position={position}
                    />}
 
                 {showActions &&