tweaks to media display in landscape mode (#197)

* tweaks to media display in landscape mode
This commit is contained in:
Akinwale Ariwodola 2018-07-17 17:59:58 +01:00 committed by GitHub
parent 541f824909
commit b8e52e2117
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 72 additions and 12 deletions

View file

@ -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}

View file

@ -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 ?
filePageStyle.fullscreenPlayer : filePageStyle.containedPlayer];
const playerStyle = [filePageStyle.player,
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>
);
}

View file

@ -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: {

View file

@ -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);
}
}
}