I am using ReactPlayer to play videos from different sources like Youtube and Vimeo.

I want to implement a custom play/pause button along with a custom Slider to show player progress.

I am currently using React.useState to track play/pause status and player progress, however, whenever I click on the play/pause button, the Player is re-rendering, making it load again and start from beginning.

Is there any other way to do it and prevent player from re-rendering?

Here’s the player code

<ReactPlayer ref={playerRef} url={source.url} controls={true} width='100%' height={smallScreen ? '420px' : '100%'} playing={playing} onProgress={player.progress} />

<Button startIcon={playing ? <PauseRounded /> : <PlayArrowRounded />} onClick={player.togglePlay}>{smallScreen ? '' : playing ? 'Pause' : 'Play'}</Button>

<Slider size='small' min={0} max={100} value={playerProgress} color='inherit' sx={{ ml: 1, mr: 2 }} />

Here’s the player controls code

const [playing, setPlaying] = React.useState(false);

const [playerProgress, setPlayerProgress] = React.useState(0);

const player = {
    togglePlay: React.useMemo(() => () => {
        setPlaying(!playing);
    }, [playing]),
    progress: (state) => {
        // console.log(playerRef.current);
        setPlayerProgress(state.played * 100);
    },
};

Thank you.

I’ve tried using Native React Components, but it seems complicated as I am using Meteor Framework and have a few subscriptions that I need to make which I am unable to figure out how to use with Native React.