CODEWITHSUNDEEP
cssreactjsreact-player
AlwaysLearning
AlwaysLearning

Reputation: 8011

Keeping react-player full-screen mode between videos

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

Upvotes: 7

Views: 12904

Answers (2)

AlwaysLearning
AlwaysLearning

Reputation: 8011

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} />);
   );
}

Upvotes: 4

the Hutt
the Hutt

Reputation: 18408

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'
  ]}
/>

Upvotes: 5

Related Questions