react navigation drawer workaround

package-lock.json

@@ -10136,22 +10136,9 @@
             }
         },
         "react-navigation-drawer": {
-            "version": "1.4.0",
-            "resolved": "https://registry.npmjs.org/react-navigation-drawer/-/react-navigation-drawer-1.4.0.tgz",
-            "integrity": "sha512-ZyWBozcjB2aZ7vwCALv90cYA2NpDjM+WALaiYRshvPvue8l7cqynePbHK8GhlMGyJDwZqp4MxQmu8u1XAKp3Bw==",
-            "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"
-                    }
-                }
-            }
+            "version": "2.3.3",
+            "resolved": "https://registry.npmjs.org/react-navigation-drawer/-/react-navigation-drawer-2.3.3.tgz",
+            "integrity": "sha512-d/rA8Slqv7HoMfONKVDBQUrRF7YQH796Gzal/KOhaY4VOwUUqIwfxMRJ3WrsdL2OkDPixtkXJE2Fz6KAj658uA=="
         },
         "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

@@ -869,6 +869,7 @@ class FilePage extends React.PureComponent {
       contentType,
       tab,
       rewardedContentClaimIds,
+      isPlayerVisible,
       isResolvingUri,
       blackListedOutpoints,
       myClaimUris,
@@ -1124,7 +1125,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 => {