package-lock.json

@@ -10136,22 +10136,9 @@
             }
         },
         "react-navigation-drawer": {
-            "version": "1.4.0",
+            "version": "2.3.3",
-            "resolved": "https://registry.npmjs.org/react-navigation-drawer/-/react-navigation-drawer-1.4.0.tgz",
+            "resolved": "https://registry.npmjs.org/react-navigation-drawer/-/react-navigation-drawer-2.3.3.tgz",
-            "integrity": "sha512-ZyWBozcjB2aZ7vwCALv90cYA2NpDjM+WALaiYRshvPvue8l7cqynePbHK8GhlMGyJDwZqp4MxQmu8u1XAKp3Bw==",
+            "integrity": "sha512-d/rA8Slqv7HoMfONKVDBQUrRF7YQH796Gzal/KOhaY4VOwUUqIwfxMRJ3WrsdL2OkDPixtkXJE2Fz6KAj658uA=="
-            "requires": {
-                "react-native-tab-view": "^1.2.0"
-            },
-            "dependencies": {
-                "react-native-tab-view": {
-                    "version": "1.4.1",
-                    "resolved": "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-1.4.1.tgz",
-                    "integrity": "sha512-Bke8KkDcDhvB/z0AS7MnQKMD2p6Kwfc1rSKlMOvg9CC5CnClQ2QEnhPSbwegKDYhUkBI92iH/BYy7hNSm5kbUQ==",
-                    "requires": {
-                        "prop-types": "^15.6.1"
-                    }
-                }
-            }
         },
         "react-navigation-redux-helpers": {
             "version": "3.0.2",

package.json

@@ -38,7 +38,7 @@
         "react-native-video": "lbryio/react-native-video#7992ff945872f9bd00a3736d9ff1318f343abf47",
         "react-native-webview": "^8.0.2",
         "react-navigation": "^4.0.10",
-        "react-navigation-drawer": "^1.4.0",
+        "react-navigation-drawer": "^2.3.3",
         "react-navigation-redux-helpers": "^3.0.2",
         "react-navigation-tabs": "^2.7.0",
         "react-navigation-stack": "^1.10.3",

src/component/AppNavigator.js

@@ -225,7 +225,7 @@ const drawer = createDrawerNavigator(
     },
   },
   {
-    drawerWidth: 300,
+    drawerWidth: 299,
     drawerBackgroundColor: 'transparent',
     headerMode: 'none',
     backBehavior: 'none',

src/component/mediaPlayer/view.js

@@ -421,7 +421,7 @@ class MediaPlayer extends React.PureComponent {
     const seekerCircleStyle = [this.state.seeking ? mediaPlayerStyle.bigSeekerCircle : mediaPlayerStyle.seekerCircle];
     if (!this.state.seeking) {
       seekerCircleStyle.push(
-        this.state.fullscreenMode ? mediaPlayerStyle.seekerCircleTopFs : mediaPlayerStyle.seekerCircleTop
+        this.state.fullscreenMode ? mediaPlayerStyle.seekerCircleTopFs : mediaPlayerStyle.seekerCircleTop,
       );
     }
 
@@ -440,6 +440,7 @@ class MediaPlayer extends React.PureComponent {
           }}
           resizeMode={this.state.resizeMode}
           playInBackground={this.state.backgroundPlayEnabled}
+          playWhenInactive={this.state.backgroundPlayEnabled}
           style={mediaPlayerStyle.player}
           rate={this.state.rate}
           volume={this.state.volume}

src/page/file/index.js

@@ -41,7 +41,7 @@ import {
 import { doDeleteFile, doStopDownloadingFile } from 'redux/actions/file';
 import { doPushDrawerStack, doPopDrawerStack, doSetPlayerVisible } from 'redux/actions/drawer';
 import { doToggleFullscreenMode } from 'redux/actions/settings';
-import { selectDrawerStack } from 'redux/selectors/drawer';
+import { selectDrawerStack, selectIsPlayerVisible } from 'redux/selectors/drawer';
 import FilePage from './view';
 
 const select = (state, props) => {
@@ -61,6 +61,7 @@ const select = (state, props) => {
     fileInfo: makeSelectFileInfoForUri(contentUri)(state),
     rewardedContentClaimIds: selectRewardContentClaimIds(state, selectProps),
     channelUri: makeSelectChannelForClaimUri(contentUri, true)(state),
+    isPlayerVisible: selectIsPlayerVisible(state),
     position: makeSelectContentPositionForUri(contentUri)(state),
     purchasedUris: selectPurchasedUris(state),
     failedPurchaseUris: selectFailedPurchaseUris(state),

src/page/file/view.js

@@ -681,13 +681,16 @@ class FilePage extends React.PureComponent {
 
   getPurchaseUrl = () => {
     const { claim, navigation } = this.props;
-    const { permanent_url: permanentUrl } = claim;
+    const permanentUrl = claim ? claim.permanent_url : null;
 
     let purchaseUrl;
     if (navigation.state.params) {
       const { uri, fullUri } = navigation.state.params;
       purchaseUrl = fullUri || uri || permanentUrl;
     }
+    if (!purchaseUrl && permanentUrl) {
+      purchaseUrl = permanentUrl;
+    }
 
     return purchaseUrl;
   };
@@ -876,6 +879,7 @@ class FilePage extends React.PureComponent {
       contentType,
       tab,
       rewardedContentClaimIds,
+      isPlayerVisible,
       isResolvingUri,
       blackListedOutpoints,
       myClaimUris,
@@ -1131,7 +1135,9 @@ class FilePage extends React.PureComponent {
             {!innerContent &&
               (this.state.streamingMode || (canLoadMedia && fileInfo && isPlayable)) &&
               this.state.fullscreenMode && <View style={fsPlayerBgStyle} />}
-            {!innerContent && (this.state.streamingMode || (canLoadMedia && fileInfo && isPlayable)) && (
+            {isPlayerVisible &&
+              !innerContent &&
+              (this.state.streamingMode || (canLoadMedia && fileInfo && isPlayable)) && (
               <MediaPlayer
                 claim={claim}
                 assignPlayer={ref => {

src/utils/helper.js

@@ -64,14 +64,14 @@ export function dispatchNavigateToUri(dispatch, nav, uri, isNavigatingBack, full
       const fileRoute = discoverRoute.routes[discoverRoute.index];
       // Currently on a file page, so we can ignore (if the URI is the same) or replace (different URIs)
       if (uri !== fileRoute.params.uri) {
-        const stackAction = StackActions.replace({ routeName: 'File', newKey: uri, params });
+        const stackAction = StackActions.replace({ routeName: 'File', newKey: 'file', params });
         dispatch(stackAction);
         return;
       }
     }
   }
 
-  const navigateAction = NavigationActions.navigate({ routeName: 'File', key: uri, params });
+  const navigateAction = NavigationActions.navigate({ routeName: 'File', key: 'file', params });
   dispatch(navigateAction);
 }
 
@@ -138,7 +138,7 @@ export function navigateToUri(navigation, uri, additionalParams, isNavigatingBac
   const { store } = window;
   const params = Object.assign({ uri, uriVars, fullUri: fullUri }, additionalParams);
   if (navigation.state.routeName === 'File') {
-    const stackAction = StackActions.replace({ routeName: 'File', newKey: uri, params });
+    const stackAction = StackActions.replace({ routeName: 'File', newKey: 'file', params });
     navigation.dispatch(stackAction);
     if (store && store.dispatch && !isNavigatingBack) {
       store.dispatch(doPushDrawerStack(uri));
@@ -147,7 +147,7 @@ export function navigateToUri(navigation, uri, additionalParams, isNavigatingBac
     return;
   }
 
-  navigation.navigate({ routeName: 'File', key: uri, params });
+  navigation.navigate({ routeName: 'File', key: 'file', params });
   if (store && store.dispatch && !isNavigatingBack) {
     store.dispatch(doPushDrawerStack(uri));
     store.dispatch(doSetPlayerVisible(true));