railbird/react-native-video
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Removed JS fullscreening for Android (#2013)

Browse Source
This commit is contained in:
Jens Andersson 2020-06-11 16:44:13 +02:00 committed by GitHub
parent 7c8c613a65
commit f395bd1d3d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 5 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -9,6 +9,7 @@
- Added `preferredForwardBufferDuration` (iOS) - the duration the player should buffer media from the network ahead of the playhead to guard against playback disruption. (#1944)
- Added `currentPlaybackTime` (Android ExoPlayer, iOS) - when playing an HLS live stream with a `EXT-X-PROGRAM-DATE-TIME` tag configured, then this property will contain the epoch value in msec. (#1944)
- Added `trackId` (Android ExoPlayer) - Configure an identifier for the video stream to link the playback context to the events emitted. (#1944)
- Reverted the JS fullscreening for Android. [#2013](https://github.com/react-native-community/react-native-video/pull/2013)
### Version 5.1.0-alpha5

4
README.md
View File

@ -455,7 +455,7 @@ Controls whether the player enters fullscreen on play.
* **false (default)** - Don't display the video in fullscreen
* **true** - Display the video in fullscreen
Platforms: iOS, Android Exoplayer
Platforms: iOS
#### fullscreenAutorotate
If a preferred [fullscreenOrientation](#fullscreenorientation) is set, causes the video to rotate to that orientation but permits rotation of the screen to orientation held by user. Defaults to TRUE.
@ -468,8 +468,6 @@ Platforms: iOS
* **landscape**
* **portrait**
Note on Android ExoPlayer, the full-screen mode by default goes into landscape mode. Exiting from the full-screen mode will display the video in Initial orientation.
Platforms: iOS
#### headers

50
Video.js
View File

@ -1,6 +1,6 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { StyleSheet, requireNativeComponent, NativeModules, View, ViewPropTypes, Image, Platform, UIManager, findNodeHandle, Dimensions } from 'react-native';
import { StyleSheet, requireNativeComponent, NativeModules, View, ViewPropTypes, Image, Platform, findNodeHandle } from 'react-native';
import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
import TextTrackType from './TextTrackType';
import FilterType from './FilterType';
@ -21,34 +21,7 @@ export default class Video extends Component {
this.state = {
showPoster: !!props.poster,
androidFullScreen: false,
videoContainerLayout_x: 0,
videoContainerLayout_y: 0,
};
this.getDimension();
}
/**
* @description this is will set the width and height needs to be considered for full screen
*/
getDimension() {
if (Dimensions.get('window').width < Dimensions.get('window').height) {
this.width = Math.round(Dimensions.get('window').height);
this.height = Math.round(Dimensions.get('window').width);
}
else {
this.width = Math.round(Dimensions.get('window').width);
this.height = Math.round(Dimensions.get('window').height);
}
}
componentDidMount() {
UIManager.measure(findNodeHandle(this._videoContainer), (x, y) => {
this.setState({
videoContainerLayout_x: x,
videoContainerLayout_y: y,
});
});
}
setNativeProps(nativeProps) {
@ -172,7 +145,6 @@ export default class Video extends Component {
};
_onFullscreenPlayerWillPresent = (event) => {
Platform.OS === 'android' && this.setState({ androidFullScreen: true });
if (this.props.onFullscreenPlayerWillPresent) {
this.props.onFullscreenPlayerWillPresent(event.nativeEvent);
}
@ -185,7 +157,6 @@ export default class Video extends Component {
};
_onFullscreenPlayerWillDismiss = (event) => {
Platform.OS === 'android' && this.setState({ androidFullScreen: false });
if (this.props.onFullscreenPlayerWillDismiss) {
this.props.onFullscreenPlayerWillDismiss(event.nativeEvent);
}
@ -342,25 +313,8 @@ export default class Video extends Component {
resizeMode: this.props.posterResizeMode || 'contain',
};
//androidFullScreen property will only impact on android. It will be always false for iOS.
const videoStyle = this.state.androidFullScreen ? {
position: 'absolute',
top: 0,
left: 0,
width: this.width,
height: this.height,
backgroundColor: '#ffffff',
justifyContent: 'center',
zIndex: 99999,
marginTop: -1 * (this.state.videoContainerLayout_y ? parseFloat(this.state.videoContainerLayout_y) : 0), //margin: 0 - is not working properly. So, updated all the margin individually with 0.
marginLeft: -1 * (this.state.videoContainerLayout_x ? parseFloat(this.state.videoContainerLayout_x) : 0),
} : {};
return (
<View ref={(videoContainer) => {
this._videoContainer = videoContainer;
return videoContainer;
}} style={[nativeProps.style, videoStyle]}>
<View style={nativeProps.style}>
<RCTVideo
ref={this._assignRoot}
{...nativeProps}

55
android-exoplayer/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java
View File

@ -3,7 +3,6 @@ package com.brentvatne.exoplayer;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.content.pm.ActivityInfo;
import android.media.AudioManager;
import android.net.Uri;
import android.os.Handler;
@ -15,7 +14,6 @@ import android.view.Window;
import android.view.accessibility.CaptioningManager;
import android.widget.FrameLayout;
import android.widget.ImageButton;
import android.widget.ImageView;
import com.brentvatne.react.R;
import com.brentvatne.receiver.AudioBecomingNoisyReceiver;
@ -101,7 +99,6 @@ class ReactExoplayerView extends FrameLayout implements
private Player.EventListener eventListener;
private ExoPlayerView exoPlayerView;
private int initialOrientation;
private DataSource.Factory mediaDataSourceFactory;
private SimpleExoPlayer player;
@ -182,7 +179,6 @@ class ReactExoplayerView extends FrameLayout implements
public ReactExoplayerView(ThemedReactContext context, ReactExoplayerConfig config) {
super(context);
this.themedReactContext = context;
this.initialOrientation = getResources().getConfiguration().orientation;
this.eventEmitter = new VideoEventEmitter(context);
this.config = config;
this.bandwidthMeter = config.getBandwidthMeter();
@ -335,16 +331,6 @@ class ReactExoplayerView extends FrameLayout implements
}
});
//Handling the fullScreenButton click event
FrameLayout fullScreenButton = playerControlView.findViewById(R.id.exo_fullscreen_button);
fullScreenButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
setFullscreen(!isFullscreen);
}
});
updateFullScreenIcon(isFullscreen);
// Invoking onPlayerStateChanged event for Player
eventListener = new Player.EventListener() {
@Override
@ -373,33 +359,6 @@ class ReactExoplayerView extends FrameLayout implements
addView(playerControlView, 1, layoutParams);
}
/**
* Update fullscreen icon
*/
private void updateFullScreenIcon(Boolean fullScreen) {
if(playerControlView != null && player != null) {
//Play the video whenever the user clicks minimize or maximise button. In order to enable the controls
player.setPlayWhenReady(!isPaused);
ImageView fullScreenIcon = playerControlView.findViewById(R.id.exo_fullscreen_icon);
if (fullScreen) {
fullScreenIcon.setImageResource(R.drawable.fullscreen_shrink);
} else {
fullScreenIcon.setImageResource(R.drawable.fullscreen_expand);
}
}
}
/**
* Enable or Disable fullscreen button
*/
private void enableFullScreenButton(Boolean enable) {
if(playerControlView != null) {
FrameLayout fullScreenButton = playerControlView.findViewById(R.id.exo_fullscreen_button);
fullScreenButton.setAlpha(enable ? 1.0f : 0.5f);
fullScreenButton.setEnabled(enable);
}
}
/**
* Update the layout
* @param view view needs to update layout
@ -625,13 +584,10 @@ class ReactExoplayerView extends FrameLayout implements
private void onStopPlayback() {
if (isFullscreen) {
//When the video stopPlayback.
//If the video is in fullscreen, then we will update the video to normal mode.
setFullscreen(!isFullscreen);
setFullscreen(false);
}
setKeepScreenOn(false);
audioManager.abandonAudioFocus(this);
enableFullScreenButton(false);
}
private void updateResumePosition() {
@ -730,7 +686,6 @@ class ReactExoplayerView extends FrameLayout implements
if (playerControlView != null) {
playerControlView.show();
}
enableFullScreenButton(true);
break;
case Player.STATE_ENDED:
text += "ended";
@ -1249,8 +1204,6 @@ class ReactExoplayerView extends FrameLayout implements
if (fullscreen == isFullscreen) {
return; // Avoid generating events when nothing is changing
}
updateFullScreenIcon(fullscreen);
isFullscreen = fullscreen;
Activity activity = themedReactContext.getCurrentActivity();
@ -1269,17 +1222,11 @@ class ReactExoplayerView extends FrameLayout implements
uiOptions = SYSTEM_UI_FLAG_HIDE_NAVIGATION
| SYSTEM_UI_FLAG_FULLSCREEN;
}
activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR_LANDSCAPE);
eventEmitter.fullscreenWillPresent();
decorView.setSystemUiVisibility(uiOptions);
eventEmitter.fullscreenDidPresent();
} else {
uiOptions = View.SYSTEM_UI_FLAG_VISIBLE;
//orientation, 1 is for Portrait and 2 for Landscape.
if(this.initialOrientation == 1)
activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
else
activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
eventEmitter.fullscreenWillDismiss();
decorView.setSystemUiVisibility(uiOptions);
eventEmitter.fullscreenDidDismiss();

BIN
android-exoplayer/src/main/res/drawable/fullscreen_expand.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 365 B

BIN
android-exoplayer/src/main/res/drawable/fullscreen_shrink.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 358 B

16
android-exoplayer/src/main/res/layout/exo_player_control_view.xml
View File

@ -71,22 +71,6 @@
android:paddingRight="4dp"
android:includeFontPadding="false"
android:textColor="#FFBEBEBE"/>
<FrameLayout
android:id="@+id/exo_fullscreen_button"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_gravity="right">
<ImageView
android:id="@+id/exo_fullscreen_icon"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="@drawable/fullscreen_expand"/>
</FrameLayout>
</LinearLayout>
</LinearLayout>