From 066919259cafcdf2866b493dd763283a28aea225 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Thu, 16 Aug 2018 17:50:59 +0100
Subject: [PATCH] better media aspect ratio handling

---
 app/src/component/mediaPlayer/view.js |  3 +--
 app/src/styles/filePage.js            | 10 ++++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/app/src/component/mediaPlayer/view.js b/app/src/component/mediaPlayer/view.js
index 3e92c943..c17b0392 100644
--- a/app/src/component/mediaPlayer/view.js
+++ b/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);
       }
diff --git a/app/src/styles/filePage.js b/app/src/styles/filePage.js
index a1d32fb8..3bdef210 100644
--- a/app/src/styles/filePage.js
+++ b/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%',