diff --git a/app/src/component/mediaPlayer/view.js b/app/src/component/mediaPlayer/view.js index 3e92c94..c17b039 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 a1d32fb..3bdef21 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%',