Skip to content

Commit

Permalink
Removed JS fullscreening for Android
Browse files Browse the repository at this point in the history
  • Loading branch information
@jenshandersson
jenshandersson committed May 19, 2020
1 parent c9096d1 commit ca7bba7
Show file tree
Hide file tree
Showing 6 changed files with 4 additions and 121 deletions.
4 changes: 1 addition & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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
Expand Down
50 changes: 2 additions & 48 deletions Video.js
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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) {
Expand Down Expand Up @@ -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);
}
Expand All @@ -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);
}
Expand Down Expand Up @@ -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}
Expand Down
55 changes: 1 addition & 54 deletions android-exoplayer/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
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;
Expand All @@ -15,7 +14,6 @@
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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -182,7 +179,6 @@ public double getPositionInFirstPeriodMsForCurrentWindow(long currentPosition) {
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();
Expand Down Expand Up @@ -335,16 +331,6 @@ public void onClick(View v) {
}
});

//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
Expand Down Expand Up @@ -373,33 +359,6 @@ private void addPlayerControl() {
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
Expand Down Expand Up @@ -625,13 +584,10 @@ private void stopPlayback() {

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() {
Expand Down Expand Up @@ -730,7 +686,6 @@ public void onPlayerStateChanged(boolean playWhenReady, int playbackState) {
if (playerControlView != null) {
playerControlView.show();
}
enableFullScreenButton(true);
break;
case Player.STATE_ENDED:
text += "ended";
Expand Down Expand Up @@ -1249,8 +1204,6 @@ public void setFullscreen(boolean fullscreen) {
if (fullscreen == isFullscreen) {
return; // Avoid generating events when nothing is changing
}

updateFullScreenIcon(fullscreen);
isFullscreen = fullscreen;

Activity activity = themedReactContext.getCurrentActivity();
Expand All @@ -1269,17 +1222,11 @@ public void setFullscreen(boolean fullscreen) {
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();
Expand Down
Binary file removed android-exoplayer/src/main/res/drawable/fullscreen_expand.png
View file
Binary file not shown.
Binary file removed android-exoplayer/src/main/res/drawable/fullscreen_shrink.png
View file
Binary file not shown.
16 changes: 0 additions & 16 deletions android-exoplayer/src/main/res/layout/exo_player_control_view.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

0 comments on commit ca7bba7

Please sign in to comment.