6

I am building an online course website. When the user watches a lesson in full-screen mode, I want to remember that, so as to use full-screen mode when I mount react-player with the next lesson. I hoped there would be an onFullscreenMode callback, but the documentation does not list anything of the kind. How can I achieve this?

Edit 1: Based on the reply of @onkarruikar, I tried using screenfull. First, I was surprised that it was not installed although real-player was supposed to use it to enter full-screen mode. After installing the package and importing it, I get the compilation error:

.../node_modules/screenfull/index.js 11:44
Module parse failed: Unexpected token (11:44)
File was processed with these loaders:
.../node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
|   for (const methodList of methodMap) {
>     const exitFullscreenMethod = methodList?.[1];
| 
|     if (exitFullscreenMethod in document) {

Edit 2: I also don't get it why the demo uses a custom button for switching to full-screen mode, whereas I see a button (enter image description here) on the player itself:

enter image description here

AlwaysLearning
  • 7,257
  • 4
  • 33
  • 68
  • I have opened an issue about this: https://github.com/cookpete/react-player/issues/1352 – AlwaysLearning Nov 10 '21 at 22:21
  • 1
    You probably want to refer to their [demo code](https://github.com/cookpete/react-player/blob/060c328f16194fe6b9072855c8749ee7eb8d456a/src/demo/App.js#L135) as they have a custom fullscreen click handler. – Scratch'N'Purr Dec 02 '21 at 13:40
  • It does play playlists staying in fullscreen mode for youtube, vidyard etc. https://cookpete.com/react-player/ On which platform are you going host videos? Are you going to use `file` player? – the Hutt Dec 02 '21 at 14:20
  • @Scratch'N'Purr I had seen this. It looks to me that they added a custom button (line 197). I want to let the user enter full-screen mode using the standard button in the player. – AlwaysLearning Dec 02 '21 at 16:01
  • @onkarruikar Vimeo. – AlwaysLearning Dec 02 '21 at 16:03
  • The react player uses player provided by the hosting site and the CDN provided player may not expose all controls to external apis. Vimeo player doesn't provide access to fullscreen. You can see [here in their discussion](https://github.com/vimeo/player.js/issues/52#issuecomment-247462574) they are suggesting the same WebApis as I mentioned. – the Hutt Dec 02 '21 at 18:32
  • Vimeo has it's own Player API https://player.vimeo.com/api/demo And the [documentation](https://github.com/vimeo/player.js/#create-a-player). I think react-player is easy to use. – the Hutt Dec 02 '21 at 18:51

2 Answers2

3

The player doesn't have fullscreen inbuilt. It uses screenfull to go full-screen. As per their demo https://cookpete.com/react-player/ full-screen is handled externally by the component users.
You can use following screenfull features directly on your website:

screenfull.isFullscreen   //<-- is the browser in fullscreen
screenfull.isEnabled      //<-- is the facility available to use
screenfull.request(element);
screenfull.toggle(element);
etc.

Or you can use standard web apis like:

if(document.fullscreenElement) {  //<-- is the browser in fullscreen
...
}

document.fullscreenEnabled //<-- is the facility available to use

Document.fullscreenElement / ShadowRoot.fullscreenElement
The fullscreenElement property tells you the Element that's currently being displayed in full-screen mode on the DOM (or shadow DOM). If this is null, the document (or shadow DOM) is not in full-screen mode. ref

These apis should work even if you go fullscreen using controls inside player.

Here is a demo website using react: https://gizcx.csb.app/
Corresponding codesandbox code

Also, if you are not playing videos one by one then you can pass full course playlist to the player at once:

<ReactPlayer
  url={[
    'https://www.youtube.com/watch?v=oUFJJNQGwhk',
    'https://www.youtube.com/watch?v=jNgP6d9HraI'
  ]}
/>
the Hutt
  • 16,980
  • 2
  • 14
  • 44
  • I tried using `screenfull` without success so far. See the edit in the question. – AlwaysLearning Dec 02 '21 at 17:27
  • I also output `document.fullscreenEnabled` in my handler of `onEnd` and it prints `true` even though the player is not maximized. – AlwaysLearning Dec 02 '21 at 17:33
  • No! `document.fullscreenEnabled` is to check if the facility available to use. You need to use `document.fullscreenElement` if it returns the element object then browser is in fullscreen. If `fullscreenElement` returns null then browser is not in fullscreen. Also the function is named `onEnded` – the Hutt Dec 02 '21 at 18:05
  • For more detail https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API – the Hutt Dec 02 '21 at 18:11
  • In any case, Fullscreen API is not supported widely enough (https://caniuse.com/?search=fullscreen). Do you know why I am getting an error for `screenfull` and how to fix it? – AlwaysLearning Dec 02 '21 at 18:27
  • It is supported check https://caniuse.com/?search=fullscreenElement It has been suggested on vimeo bug discussion https://github.com/vimeo/player.js/issues/52#issuecomment-247462574 – the Hutt Dec 02 '21 at 18:35
2

For the benefit of others, this is how it is achieved:

import { findDOMNode } from 'react-dom'
import { toast } from 'react-toastify';

const PlayerComponent = () => {
    const [fullscreenMode, setFullscreenMode] = useState(false)
    let player = null;
    const ref = (p) => {player = p;}
    
    const onStart = () => {
        if (fullscreenMode)
            findDOMNode(player).requestFullscreen().catch(
                (err) => 
                {toast.error("Could not activate full-screen mode :(")}
            );
    }

    const onEnded = () => {
        setFullscreenMode(document.fullscreenElement !== null);
    }

    return (
        <ReactPlayer
            ref={ref}
            url="whatever url" 
            onStart={onStart}
            onEnded={onEnded} />);
   );
}
AlwaysLearning
  • 7,257
  • 4
  • 33
  • 68