Fullscreen mode only?

[ncavallini]

Hi all, first of all, thank you for the great work!

Quick question: does this player work in "fullscreen" mode only? I can't find neither a prop nor a UI element to enable/disable fullscreen. Would be nice to have one :).

Thank you for your attention. Regards.

[lewhunt]

Hey,

Thanks for the message.

The player is currently designed to span the full width and height, typical of a player screen in a TV app.

There are width and height props you can override, plus the ability to add custom buttons. So a custom toggle button could switch to/from fullscreen and update the width/height accordingly.

The type of player UI and video orientation to display with full-screen disabled is the tricky one to answer, this will often vary from app to app...

It might be wise to just have a disableUI prop so the app can then control what to display in non-fullscreen mode, or do you have more specific thoughts on what the non-fullscreen mode of the player should be like? I'd be interested to get your thoughts.

Cheers Lewis

[ncavallini]

Hi @lewhunt , thank you for your quick answer. I tried this the first option (width/height props) in the following React FC:

import { useState } from "react";
import { TVPlayer } from "react-tv-player";

function LiveTV() {
   const url = "https://SOME_MPD_URL";
    const [fullScreen, setFullScreen] = useState(false);

    if(fullScreen) {
        return <TVPlayer
            url={url}
            playing={true}
        />;
    }
    else {
        return <>

            <TVPlayer
                url={url}
                playing={true}
                width={800}
                height={600}
            />
            <button onClick={() => setFullScreen(true)} className={"btn btn-primary"}>Fullscreen</button>

        </>
    }

}

export default LiveTV;

but the problem is that when React-TV-Player is NOT full-screen, no vertical progress bar is shown, and vertical scrolling is not possible (the button is possibly hidden), because the generated div.tv-player takes up all the space. The div's height can be overridden with CSS, but I do not know what to do to make vertical scrolling work again.

Obviously I should try to implement the full screen button as a player control. But anyway, what if I want to display something under the player (e.g., some EPG info)?

Please note that I'm a beginner with React, so please excuse me if I asked a stupid question.

Regards. NC

[lewhunt]

Hi NC,

I've taken a quick look at your code.

I'm not sure fullscreen state is the issue here.

The progress bar won't appear regardless of width/height settings until you provide it with a real url stream (e.g. url = "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd"). Under the hood it needs to read the duration before showing the progress bar.

However, if you provide it with a LIVE url stream (e.g. https://livesim.dashif.org/livesim/ato_10/testpic_2s/Manifest.mpd) it's possible the progress bar won't show. This is by design and is often the case in many players, because it's difficult to accurately calculate the duration and current position when it's a live stream.

Thanks, Lewis

[ncavallini]

Hi Lewis, thank you. I think you misunderstood. With "scrollbar" I do not mean the player horizontal bar (which would be infeasible for live streams, as you said) but the vertical scrollbar from the browser that let you scroll the page up and down.

Thanks. Niccolò

[lewhunt]

Ah ok sorry, when you said vertical progress bar I got confused :-)

Because the component is currently set up for full screen use, it sets the css body overflow to hidden.

So to resolve it your app needs to update the body overflow property to auto or unset, in your css file:

body { overflow: unset !important; }

[ncavallini]

Oh sorry for the confusion. Should've re-read the comment before posting :) Thank you for your suggestion! Regards.

[lewhunt]

No problem, you may need to give it an !important rule if it's not overriding the component settings.

[ncavallini]

Sure, I'll give it a try and write here the solutions for others to see!

[lewhunt]

to make it more dynamic you could add a useEffect: useEffect(() => { document.body.style.overflow = fullScreen ? "hidden" : "unset"; }, [fullScreen]);

I'll also see if I can incorporate something in the component with a fullscreenDisabled prop.

[ncavallini]

I'll also see if I can incorporate something in the component with a fullscreenDisabled prop.

That'll be great and ease usage in a more general case!

[ncavallini]

Sure, I'll give it a try and write here the solutions for others to see!

Works perfectly with the above-mentioned useEffect solution:

useEffect(() => { document.body.style.overflow = fullScreen ? "hidden" : "unset"; }, [fullScreen]);

[lewhunt]

Hi,

A new disableFullscreen prop has now been added, plus a fullscreen custom toggle button.

Check out the demo to see it in action.

Let me know if you spot any issues.

Thanks for the feedback, Lewis

[ncavallini]

Wow, you were fast! This works perfectly. I would have done a pull request tonight, but you don't need it anymore :)

Thank you and keep up the good work! Regards.

[lewhunt]

cheers, you'll just need to npm install the latest v1.1.1 to get a fullscreen button showing by default, if you've added the disableFullscreen prop.