[Feat]: Add parameter to onFullscreenChange so we know if it's Opening/Closing

Version

1.0.2

Environment that reproduces the issue

Situation: I want the player to open in fullscreen. Skipping an inline version entirely.

Unfortunately, there is no method to open in fullscreen. So my first request is to please add this ability

To work around this, I made it open itself in the onReady method.

I had first tried calling ref.current.requestFullscreen() directly from my handleOpenMediaView function, but if it's fullscreened before it's ready, the player bugs out and never loads the video.

This works and it opens, but there are bugs.

The first is that it will not work the second time

Because it's fired in the onReady, the second time I want to open it, the ApiVideoPlayer component is already in the dom, so onReady doesn't fire on subsequent button presses.

To get around this, I decided to delete it from the dom on close. This way every time it's mounted, onReady fires, and then it goes fullscreen. Thankfully you provided a onFullScreenChange method, but to my dismay, it doesn't give any indication of whether it's opening or closing.

I made a workaround using another piece of state called videoOpenning but it was a pain.

Here is what I had to do to determine if the onFullscreenChange method was firing on open or close:

// the button  that opens the player:
 <TouchableOpacity
                onPress={() => handleOpenMediaView(index, item)}
                style={[shadow.medium, { marginLeft: 10 }]}
              >


  const [showVideoPlayer, setShowVideoPlayer] = useState(null);
  const [videoOpening, setVideoOpening] = useState(false);

// The function fired on button press:
 const handleOpenMediaView = (index, item) => {
    constVideoOpening = true;
    setVideoOpening(true);
    setImageIndex(index);
    if (item.type !== 'video') {
      setShowImageView(true);
    } else {
      setShowVideoPlayer(item);
      if (videoHasBeenOpened) {
        videoPlayerRef.current.requestFullscreen();
      }
    }
  };

// In the jsx.....
           {showVideoPlayer && (
               <ApiVideoPlayer
                ref={videoPlayerRef}
                videoId={showVideoPlayer.videoId}

                onReady={() => {
                  videoPlayerRef.current.requestFullscreen();
                  // This timeout is a workaround to a bug that without it the videoOpening state is set to false before the onFullscreenChange has a chance to fire/execute.
                  setTimeout(() => setVideoOpening(false), 200);
                }}
                onFullScreenChange={() => {
                  console.log('FULL SCREEN CHANGE', videoOpening);
                  if (!videoOpening) {
                    console.log('SETTING VIDEO HIDDEN');
                    setShowVideoPlayer(false);
                  }
                }}
              />
 )}

Use case description

Situation: I want the player to open in fullscreen. Skipping an inline version entirely.

Proposed solution

1) Please add a way to open the player in fullscreen mode from the start without having to call ref.current.requestFullcreen() 2) Please add a parameter returned from the onFullscreenChange method called isOpening. It would be a bool that would be true if entering fullscreen, and false if closing 3) Fix the player so you can fullscreen it before it's fully ready and it will still work after it finishes loading. Right now this doesn't work.

Alternative solutions

No response

apivideo / api.video-reactnative-player