[Q] How to add the full screen function?

[anniewey]

I've tried the below approach. On iOS, a modal is expanded when press on full screen button. But after exiting the full screen with running video, the video got paused but the button is showing pause button (the play/pause btn isn't in sync). And I couldn't find a way to play/resume the video programatically (unless i manually tap on the play/pause btn twice).

As for Android, not a major concern just that the full screen button remain in expand icon in both fullscreen and non fullscreen state.

const renderPlayer = () => {
    return (
      <VideoPlayer
        fullscreen={isFullScreen}
        allowsExternalPlayback={false}
        disableBack={true}
        paused={isPause}
        source={{ uri: dummyVideoUrl }}
        onEnterFullscreen={() => setFullScreen(true)}
        onExitFullscreen={() => {
          setFullScreen(false);
          setTimeout(()=>setPause(false), 1000); //tried using paused props but no avail
        }}
        onPause={() => setPause(true)}
        onPlay={() => setPause(false)}
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          bottom: 0,
          right: 0,
          borderWidth: 1,
          borderColor: 'red',
        }}
      />
    );
  };

[anniewey]

@LunatiqueCoder can u help with above issue?

[LunatiqueCoder]

Hello @anniewey

It really depends on your setup and what you want to achieve with full screen. I could tell even for me it was pretty hard. i'm trying to see if I can put together an example, however this will not be easy and I'm not sure how much time I have this week :(

Meanwhile i would suggest you to try to use the alpha version from react-native-video They fixed a lot of things with that version, except for the subtitles. They are still work in progress.

[anniewey]

Hi thanks for the quick reply! Actually the full screen is able to execute correctly.

My question is when exiting the full screen mode, the playback button is shown wrongly -> showing pause button. Meaning I have to press the button twice to resume the video. Refer to this sample video

Due to this problem, I'm trying to auto play the video in onExitFullscreen so user wont notice the problem.
But I have no idea how to make it happen. I have tried to use the paused props as mentioned above but not working.

So looking for ur help to pointing me the way;
either fix the playback button or autoplay the video.

 <VideoPlayer
        fullscreen={isFullScreen}
        disableBack={true}
        videoRef={playerRef}
        source={{ uri: navData.link }}
        onLoad={onVideoLoad}
        onError={onVideoError}
        onEnd={onVideoEnd}
        onEnterFullscreen={() => setFullScreen(true)}
        onExitFullscreen={() => {
          //auto play
          setFullScreen(false);
        }}
        style={styles.video}
      />

[LunatiqueCoder]

@anniewey This looks like a bug and it shouldn't happen with the videoplayer 🤔 I am not able to reproduce this with the alpha version of react-native-video. Can you try [email protected] and see if the bug still reproduces?

As I said, at media-console, we're pretty much supporting only the alpha version of react-native-video. Perhaps we should mention this in the docs 😅

[anniewey]

Hm i tried the same code on [email protected] but the full screen button doesnt work as previous one "react-native-video": "^5.2.1". so couldn't test it out

the onEnterFullscreen callback is triggered but no full screen activity is performed. and i noticed in the docs mentioning v6 only supports RN >= 0.68.2 which is higher than my project ver.

update:
checking back on v5.2.1, realised i should use onFullscreenPlayerDidDismiss instead of onExitFullscreen when closing from ios native full screen modal top left btn (x). managed to use the paused in this callback