Merge pull request #237 from lbryio/video-aspect-ratio-tweak

better media aspect ratio handling

app/src/component/mediaPlayer/view.js

@@ -32,7 +32,7 @@ class MediaPlayer extends React.PureComponent {
       rate: 1,
       volume: 1,
       muted: false,
-      resizeMode: 'stretch',
+      resizeMode: 'contain',
       duration: 0.0,
       currentTime: 0.0,
       paused: !props.autoPlay,
@@ -131,7 +131,6 @@ class MediaPlayer extends React.PureComponent {
     this.showPlayerControls();
     const { onFullscreenToggled } = this.props;
     this.setState({ fullscreenMode: !this.state.fullscreenMode }, () => {
-      this.setState({ resizeMode: this.state.fullscreenMode ? 'contain' : 'stretch' });
       if (onFullscreenToggled) {
         onFullscreenToggled(this.state.fullscreenMode);
       }

app/src/styles/filePage.js

@@ -3,6 +3,8 @@ import Colors from './colors';
 
 const screenDimension = Dimensions.get('window');
 const screenWidth = screenDimension.width;
+const containedMediaHeight = ((screenWidth * 9) / 16); // 16:9 display ratio
+const containedMediaHeightWithControls = containedMediaHeight + 17;
 
 const filePageStyle = StyleSheet.create({
   container: {
@@ -30,7 +32,7 @@ const filePageStyle = StyleSheet.create({
   mediaContainer: {
     alignItems: 'center',
     width: screenWidth,
-    height: 240
+    height: containedMediaHeightWithControls
   },
   emptyClaimText: {
     fontFamily: 'Metropolis-Regular',
@@ -75,7 +77,7 @@ const filePageStyle = StyleSheet.create({
   },
   thumbnail: {
     width: screenWidth,
-    height: 224,
+    height: containedMediaHeight,
     justifyContent: 'center',
     alignItems: 'center'
   },
@@ -92,7 +94,7 @@ const filePageStyle = StyleSheet.create({
   },
   containedPlayer: {
     width: '100%',
-    height: 240,
+    height: containedMediaHeightWithControls,
   },
   containedPlayerLandscape: {
     width: '100%',
@@ -114,7 +116,7 @@ const filePageStyle = StyleSheet.create({
   },
   containedPlayerBackground: {
     width: '100%',
-    height: 206,
+    height: containedMediaHeight,
   },
   fullscreenPlayerBackground: {
     width: '100%',