tweaks to media display in landscape mode (#197)

* tweaks to media display in landscape mode

app/src/component/mediaPlayer/view.js

@@ -266,7 +266,7 @@ class MediaPlayer extends React.PureComponent {
   }
 
   render() {
-    const { backgroundPlayEnabled, fileInfo, thumbnail, style } = this.props;
+    const { backgroundPlayEnabled, fileInfo, thumbnail, onLayout, style } = this.props;
     const flexCompleted = this.getCurrentTimePercentage() * 100;
     const flexRemaining = (1 - this.getCurrentTimePercentage()) * 100;
     let styles = [this.state.fullscreenMode ? mediaPlayerStyle.fullscreenContainer : mediaPlayerStyle.container];
@@ -282,7 +282,7 @@ class MediaPlayer extends React.PureComponent {
       mediaPlayerStyle.fullscreenTrackingControls : mediaPlayerStyle.containedTrackingControls];
 
     return (
-      <View style={styles}>
+      <View style={styles} onLayout={onLayout}>
         <Video source={{ uri: 'file:///' + fileInfo.download_path }}
                ref={(ref: Video) => { this.video = ref }}
                resizeMode={this.state.resizeMode}

app/src/page/file/view.js

@@ -4,6 +4,7 @@ import {
   ActivityIndicator,
   Alert,
   Button,
+  Dimensions,
   NativeModules,
   ScrollView,
   StatusBar,
@@ -25,12 +26,17 @@ import MediaPlayer from '../../component/mediaPlayer';
 import UriBar from '../../component/uriBar';
 import Video from 'react-native-video';
 import filePageStyle from '../../styles/filePage';
+import uriBarStyle from '../../styles/uriBar';
 
 class FilePage extends React.PureComponent {
   static navigationOptions = {
     title: ''
   };
 
+  playerBackground = null;
+
+  player = null;
+
   constructor(props) {
     super(props);
     this.state = {
@@ -39,7 +45,10 @@ class FilePage extends React.PureComponent {
       fullscreenMode: false,
       showImageViewer: false,
       showWebView: false,
-      imageUrls: null
+      imageUrls: null,
+      playerBgHeight: 0,
+      playerHeight: 0,
+      isLandscape: false,
     };
   }
 
@@ -88,7 +97,8 @@ class FilePage extends React.PureComponent {
         // fullscreen, so change orientation to landscape mode
         NativeModules.ScreenOrientation.lockOrientationLandscape();
       } else {
-        NativeModules.ScreenOrientation.unlockOrientation();
+        // Switch back to portrait mode when the media is not fullscreen
+        NativeModules.ScreenOrientation.lockOrientationPortrait();
       }
     }
   }
@@ -164,6 +174,24 @@ class FilePage extends React.PureComponent {
     return linkifiedContent;
   }
 
+  checkOrientation = () => {
+    if (this.state.fullscreenMode) {
+      return;
+    }
+
+    const screenDimension = Dimensions.get('window');
+    const screenWidth = screenDimension.width;
+    const screenHeight = screenDimension.height;
+    const isLandscape = screenWidth > screenHeight;
+    this.setState({ isLandscape });
+
+    if (isLandscape) {
+      this.playerBackground.setNativeProps({ height: screenHeight - StyleSheet.flatten(uriBarStyle.uriContainer).height });
+    } else if (this.state.playerBgHeight > 0) {
+      this.playerBackground.setNativeProps({ height: this.state.playerBgHeight });
+    }
+  }
+
   render() {
     const {
       claim,
@@ -212,8 +240,9 @@ class FilePage extends React.PureComponent {
       const channelClaimId =
         value && value.publisherSignature && value.publisherSignature.certificateId;
 
-      const playerStyle = [filePageStyle.player, this.state.fullscreenMode ?
+      const playerStyle = [filePageStyle.player,
-        filePageStyle.fullscreenPlayer : filePageStyle.containedPlayer];
+        this.state.isLandscape ? filePageStyle.containedPlayerLandscape :
+        (this.state.fullscreenMode ? filePageStyle.fullscreenPlayer : filePageStyle.containedPlayer)];
       const playerBgStyle = [filePageStyle.playerBackground, this.state.fullscreenMode ?
         filePageStyle.fullscreenPlayerBackground : filePageStyle.containedPlayerBackground];
       // at least 2MB (or the full download) before media can be loaded
@@ -251,7 +280,8 @@ class FilePage extends React.PureComponent {
                                                       renderIndicator={() => null} />}
 
           {!this.state.showWebView && (
-            <View style={filePageStyle.innerPageContainer}>
+            <View style={this.state.fullscreenMode ? filePageStyle.innerPageContainerFsMode : filePageStyle.innerPageContainer}
+                  onLayout={this.checkOrientation}>
               <View style={filePageStyle.mediaContainer}>
                 {(canOpen || (!fileInfo || (isPlayable && !canLoadMedia))) &&
                   <FileItemMedia style={filePageStyle.thumbnail} title={title} thumbnail={metadata.thumbnail} />}
@@ -264,13 +294,25 @@ class FilePage extends React.PureComponent {
                                       onPlay={() => this.setState({ autoPlayMedia: true })} />}
                 {!fileInfo && <FilePrice uri={uri} style={filePageStyle.filePriceContainer} textStyle={filePageStyle.filePriceText} />}
               </View>
-              {canLoadMedia && <View style={playerBgStyle} />}
+              {canLoadMedia && <View style={playerBgStyle} ref={(ref) => { this.playerBackground = ref; }}
+                                     onLayout={(evt) => {
+                                       if (!this.state.playerBgHeight) {
+                                         this.setState({ playerBgHeight: evt.nativeEvent.layout.height });
+                                       }
+                                     }} />}
               {canLoadMedia && <MediaPlayer fileInfo={fileInfo}
+                                            ref={(ref) => { this.player = ref; }}
                                             uri={uri}
                                             style={playerStyle}
                                             autoPlay={this.state.autoPlayMedia}
                                             onFullscreenToggled={this.handleFullscreenToggle}
-                                            onMediaLoaded={() => { this.setState({ mediaLoaded: true }); }}/>}
+                                            onMediaLoaded={() => { this.setState({ mediaLoaded: true }); }}
+                                            onLayout={(evt) => {
+                                              if (!this.state.playerHeight) {
+                                                this.setState({ playerHeight: evt.nativeEvent.layout.height });
+                                              }
+                                            }}
+                                            />}
 
               { showActions &&
               <View style={filePageStyle.actions}>
@@ -293,7 +335,7 @@ class FilePage extends React.PureComponent {
             </View>
           )}
 
-          <UriBar value={uri} navigation={navigation} />
+          {!this.state.fullscreenMode && <UriBar value={uri} navigation={navigation} />}
         </View>
       );
     }

app/src/styles/filePage.js

@@ -16,6 +16,10 @@ const filePageStyle = StyleSheet.create({
     flex: 1,
     marginBottom: 60
   },
+  innerPageContainerFsMode: {
+    flex: 1,
+    marginBottom: 0
+  },
   mediaContainer: {
     alignItems: 'center',
     width: screenWidth,
@@ -76,12 +80,17 @@ const filePageStyle = StyleSheet.create({
     position: 'absolute',
     left: 0,
     top: 0,
-    zIndex: 101
+    zIndex: 301,
+    elevation: 21
   },
   containedPlayer: {
     width: '100%',
     height: 220,
   },
+  containedPlayerLandscape: {
+    width: '100%',
+    height: '100%'
+  },
   fullscreenPlayer: {
     width: '100%',
     height: '100%',
@@ -92,7 +101,8 @@ const filePageStyle = StyleSheet.create({
     position: 'absolute',
     left: 0,
     top: 0,
-    zIndex: 100,
+    zIndex: 300,
+    elevation: 20,
     backgroundColor: Colors.Black
   },
   containedPlayerBackground: {

src/main/java/io/lbry/browser/reactmodules/ScreenOrientationModule.java

@@ -36,4 +36,12 @@ public class ScreenOrientationModule extends ReactContextBaseJavaModule {
             activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
         }
     }
+
+    @ReactMethod
+    public void lockOrientationPortrait() {
+        Activity activity = getCurrentActivity();
+        if (activity != null) {
+            activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
+        }
+    }
 }