feat: add full screen support based on expo-av implementation #2763

wood1986 · 2022-07-13T18:52:28Z

I saw #2688. Based on the description, it seems the implementation affected the stability of v6. I have an implementation which touches the minimal code. My implementation is based on expo-av implementation and use Dialog to do full screen.

wood1986 · 2022-07-14T18:13:43Z

Here is the sample code from expo-av https://github.com/expo/expo/blob/main/packages/expo-av/android/src/main/java/expo/modules/av/video/FullscreenVideoPlayer.java

reinismu · 2022-07-21T08:55:48Z

Nice nice :)

Tried it out in my application. It goes fullscreen fine, but when I go back video doesn't work anymore (Audio still is fine). After that if I go back to fullscreen video still works there.

Could be emulator issue. Or something else on my end. Haven't investigated too much yet.

I wonder if it could bypass portrait lock in android and go forced landscape

React Native: 0.66.3
React Native Video: 5.2.0

wood1986 · 2022-07-21T16:10:02Z

Can you try using the built in control?

reinismu · 2022-07-21T18:16:31Z

Tested on a real device now. Same thing. Using built-in controls doesn't work.
I have a minimized feature for video. When I use it fixes the issue. Seems like any style change brings video back.
Or if I change the style in my component and react native hot reload kicks in.

Video style

    video: (floatingPlayer) => {
        const baseStyles = {
            width: '100%',
            aspectRatio: 16 / 9,
        };
        if (floatingPlayer) {
            return {
                ...baseStyles,
                borderTopLeftRadius: 3,
                borderTopRightRadius: 3,
                borderWidth: 3,
                borderBottomWidth: 0,
                borderColor: colors.videoTimerBackground,
            };
        }
        return {
            ...baseStyles,
        };
    },

I added

const baseStyles = {
            width: '100%',
            height: '100%',
            aspectRatio: 16 / 9,
        };

And now it works. Tho video now takes all the screen. Seems like when it goes back to the screen it can't guess the right height.

reinismu · 2022-07-21T18:27:30Z

Maybe I figured it out. When it puts view back in the parent it breaks my overlay controls. It puts video not under the controls, but below. I will check if I see a way to fix it

Seems like another issue is if I use the back button while in fullscreen I can't open fullscreen again.

lewatt23 · 2022-08-08T23:51:24Z

Hello everyone,
Justed the PR but am unable to get the fullscreen working, also the fullscreen button doesn't even show on my side. Is there any special configuration to be done for the button to display? or am i testing the PR wrongly ? ^^!.

<Video
      source={{
        uri: url,
      }}
      ref={(ref: any) => (videoPlayer = ref)}
      onLoad={onLoad}
      controls
      onBuffer={() => {}} // Callback when remote video is buffering
      onError={() => {}}
      style={{
        width: '100%',
        aspectRatio: 16 / 9,
      }}

    />

React Native: 0.68.2
Android version : 12,
Device : Redmi Note 10

FILE.2022-08-09.00.44.19.mp4

wood1986 · 2022-08-09T07:03:41Z

@lewatt23 did you include exo_player_control_view.xml? If yes, try clean build

lewatt23 · 2022-08-09T14:18:38Z

@wood1986 no i have not, please can you expain to me how i can include it? thanks.

wood1986 · 2022-08-09T20:01:51Z

How did you pick my change and then apply to your branch?

lewatt23 · 2022-08-09T21:04:35Z

I did clone your branch and added it to my project using yarn, not sure if its the correct way ^^!.

wood1986 · 2022-08-10T07:21:44Z

Check this example https://github.com/wood1986/react-native-fullscreen-example.git

lewatt23 · 2022-08-11T13:19:20Z

@wood1986 thanks i was able to test it, it works perfectly :)

rafaelbrun · 2022-08-11T14:29:37Z

Great work, tested in my project and it's working just fine.
Just a question, you got a WIP commit on the PR, is that still a wip?

android/src/main/java/com/brentvatne/exoplayer/FullScreenPlayerView.java

wood1986 · 2022-08-12T02:04:10Z

You can ignore my comment. it is done

reinismu · 2022-08-12T06:31:55Z

If I use the back button while in fullscreen I can't open fullscreen again
It seems that putting the video back in its view loses previous style

wood1986 · 2022-08-12T06:38:41Z

Please take a small video

wood1986 · 2022-08-18T08:10:26Z

I think the back button issue is fixed. Please try the latest commit

reinismu · 2022-08-23T21:00:20Z

Noticed reLayout(playerControlView); and tried PR again, but video still doesn't appear after exiting fullscreen :/
Will try to find time and open PR to reproduce this bug here https://github.com/wood1986/react-native-fullscreen-example.git

wood1986 · 2022-08-23T21:46:12Z

I have not update my branch to use latest commit. But I cannot reproduce

wood1986 · 2022-08-23T21:48:40Z

android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java

freeboub · 2022-09-07T21:25:00Z

Just tested on sample , It doesn't build (just a matter of depenency I think):
/home/olivier/work/repo/workspace/lib/react-native-video_official/react-native-video/examples/basic/node_modules/react-native-video/android/src/main/java/com/brentvatne/exoplayer/FullScreenPlayerView.java:9: error: package androidx.activity does not exist
import androidx.activity.OnBackPressedCallback;
^
/home/olivier/work/repo/workspace/lib/react-native-video_official/react-native-video/examples/basic/node_modules/react-native-video/android/src/main/java/com/brentvatne/exoplayer/FullScreenPlayerView.java:18: error: cannot find symbol
private final OnBackPressedCallback onBackPressedCallback;
^
symbol: class OnBackPressedCallback
location: class FullScreenPlayerView
/home/olivier/work/repo/workspace/lib/react-native-video_official/react-native-video/examples/basic/node_modules/react-native-video/android/src/main/java/com/brentvatne/exoplayer/FullScreenPlayerView.java:20: error: cannot find symbol
public FullScreenPlayerView(Context context, ExoPlayerView exoPlayerView, PlayerControlView playerControlView, OnBackPressedCallback onBackPressedCallback) {
^
symbol: class OnBackPressedCallback
location: class FullScreenPlayerView
/home/olivier/work/repo/workspace/lib/react-native-video_official/react-native-video/examples/basic/node_modules/react-native-video/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java:20: error: package androidx.activity does not exist
import androidx.activity.OnBackPressedCallback;
^
/home/olivier/work/repo/workspace/lib/react-native-video_official/react-native-video/examples/basic/node_modules/react-native-video/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java:674: error: cannot find symbol
fullScreenPlayerView = new FullScreenPlayerView(getContext(), exoPlayerView, playerControlView, new OnBackPressedCallback(true) {
^
symbol: class OnBackPressedCallback
location: class ReactExoplayerView
/home/olivier/work/repo/workspace/lib/react-native-video_official/react-native-video/examples/basic/node_modules/react-native-video/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java:675: error: method does not override or implement a method from a supertype
@OverRide
^

can you either add the dependancy in sample & in doc
Or add the dependency in main package ?

freeboub · 2022-09-07T21:25:15Z

Please also add a line in README.md

wood1986 · 2022-09-07T21:46:57Z

What information do I need to add to README.md?

wood1986 · 2022-09-07T21:53:29Z

@freeboub I updated the dependency. I should run now. You can also check https://github.com/wood1986/react-native-fullscreen-example.git to test it

freeboub · 2022-09-10T21:59:41Z

Tested on Android TV emulator with the sample.
I think you need to add this ! :)

diff --git a/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java b/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java
index 7e087bb8..dec0dbef 100644
--- a/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java
+++ b/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java
@@ -1811,6 +1811,7 @@ class ReactExoplayerView extends FrameLayout implements
                 if (controls) {
                     fullScreenPlayerView.dismiss();
+                     reLayout(exoPlayerView);
                 }
                 eventEmitter.fullscreenDidDismiss();
             });
         }

I add control support in the sample in another PR

wood1986 · 2022-09-10T22:08:32Z

added

evoactivity · 2022-09-11T14:53:54Z

@freeboub this needs an entry in the changelog and updating the documentation about android fullscreen

freeboub · 2022-09-11T15:14:31Z

Thank you @evoactivity, I pushed a PR to update the basic sample to make controls testable here : #2852
Regarding to the documentation, I think controls are not documentated at all.
Let's open a ticket to follow this.
Thank you

wood1986 · 2022-09-11T17:16:40Z

Finally!! Thanks for the merge

wood1986 · 2022-09-11T17:21:29Z

BTW, when will you publish the alpha or beta or final to npm?

freeboub · 2022-09-11T18:17:10Z

@wood1986 I should sync up on Monday for this. There are some ios blocking issues with build which makes me threaten ...

KestasVenslauskas · 2022-09-20T14:06:30Z

Why full screen works only while using default controls but settings 'fullscreen' prop just hides status bar?

wood1986 · 2022-09-20T15:55:07Z

Because people may have their own full screen implementation which is before my full screen work. One of the example is the player is not inside the scroll view.

KestasVenslauskas · 2022-10-26T19:56:50Z

@wood1986 So there is no way of having fullscreen player popup with custom controls?

wood1986 · 2022-10-26T21:15:58Z

are you asking the controls inside fullscreen or the control for opening fullscreen?

KestasVenslauskas · 2022-10-26T22:03:58Z

Controls opening fullscreen. Because calling player.presentFullScreen() is not working

oferRounds · 2022-10-27T08:27:23Z

Question: we’re using react-native-version 0.67.4, and thus can not yet upgrade to the latest react-native-video version who includes the feature
My question: how easy would it be to create fork/patch with this change applied to the 5.2.0 version?

ahmettopal · 2022-12-02T12:45:14Z

ı compare my library with yours everythinks are same but full screen button still not showing. what ım missing

wood1986 force-pushed the feat/expo-fullscreen branch from 899ee77 to 640baeb Compare July 14, 2022 18:05

hueniverse added Platform: Android 2 labels Jul 14, 2022

wood1986 force-pushed the feat/expo-fullscreen branch from 640baeb to f08ab91 Compare July 14, 2022 18:10

freeboub mentioned this pull request Aug 6, 2022

Full screen button is missing, paused property does not stop the video, and "Unrecognized media format" error in android exoplayer. #2745

Closed

rafaelbrun reviewed Aug 11, 2022

View reviewed changes

android/src/main/java/com/brentvatne/exoplayer/FullScreenPlayerView.java Outdated Show resolved Hide resolved

wood1986 force-pushed the feat/expo-fullscreen branch from e717393 to d54cba2 Compare August 18, 2022 08:12

rafaelbrun approved these changes Aug 18, 2022

View reviewed changes

wood1986 added 2 commits August 23, 2022 17:31

feat: add full screen support based on expo-av implementation

b144a50

WIP

470ca7b

wood1986 force-pushed the feat/expo-fullscreen branch from a92ba2a to a79c30e Compare August 24, 2022 00:31

freeboub reviewed Sep 7, 2022

View reviewed changes

android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java Show resolved Hide resolved

freeboub requested changes Sep 7, 2022

View reviewed changes

android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java Show resolved Hide resolved

freeboub mentioned this pull request Sep 7, 2022

Full screen button not showing in Android #2637

Closed

fix: add the missing dependency

40e8d94

wood1986 added 3 commits September 8, 2022 00:31

fix: handle the initial fullscreen props

5203fa6

Merge branch 'react-native-video:master' into feat/expo-fullscreen

3e4e4e6

fix: fix the default behaviour

f0c40f9

fix: add relayout when fullscreenview dismiss

5b2a474

freeboub approved these changes Sep 11, 2022

View reviewed changes

freeboub merged commit c8b54f3 into TheWidlarzGroup:master Sep 11, 2022

bulkinav mentioned this pull request Sep 22, 2022

[Android] with 'fullscreen' property playback controls are missing #2864

Closed

feat: add full screen support based on expo-av implementation #2763

feat: add full screen support based on expo-av implementation #2763

Conversation

wood1986 commented Jul 13, 2022

wood1986 commented Jul 14, 2022

reinismu commented Jul 21, 2022 • edited Loading

wood1986 commented Jul 21, 2022

reinismu commented Jul 21, 2022 • edited Loading

reinismu commented Jul 21, 2022 • edited Loading

lewatt23 commented Aug 8, 2022

wood1986 commented Aug 9, 2022

lewatt23 commented Aug 9, 2022

wood1986 commented Aug 9, 2022

lewatt23 commented Aug 9, 2022

wood1986 commented Aug 10, 2022

lewatt23 commented Aug 11, 2022

rafaelbrun commented Aug 11, 2022

wood1986 commented Aug 12, 2022 • edited Loading

reinismu commented Aug 12, 2022

wood1986 commented Aug 12, 2022

wood1986 commented Aug 18, 2022 • edited Loading

reinismu commented Aug 23, 2022

wood1986 commented Aug 23, 2022

wood1986 commented Aug 23, 2022

freeboub commented Sep 7, 2022

freeboub commented Sep 7, 2022

wood1986 commented Sep 7, 2022

wood1986 commented Sep 7, 2022

freeboub commented Sep 10, 2022

wood1986 commented Sep 10, 2022

evoactivity commented Sep 11, 2022

freeboub commented Sep 11, 2022

wood1986 commented Sep 11, 2022

wood1986 commented Sep 11, 2022

freeboub commented Sep 11, 2022 • edited Loading

KestasVenslauskas commented Sep 20, 2022

wood1986 commented Sep 20, 2022

KestasVenslauskas commented Oct 26, 2022

wood1986 commented Oct 26, 2022

KestasVenslauskas commented Oct 26, 2022

oferRounds commented Oct 27, 2022

ahmettopal commented Dec 2, 2022 • edited Loading

reinismu commented Jul 21, 2022 •

edited

Loading

reinismu commented Jul 21, 2022 •

edited

Loading

reinismu commented Jul 21, 2022 •

edited

Loading

wood1986 commented Aug 12, 2022 •

edited

Loading

wood1986 commented Aug 18, 2022 •

edited

Loading

freeboub commented Sep 11, 2022 •

edited

Loading

ahmettopal commented Dec 2, 2022 •

edited

Loading