Ref???

[poinch]

Hi there,

im trying to access the ref of the player instance and by using the onReady and setting it to a state im able to get the ref and use it but i'm getting a warning in the console. I've already tried to move the player in its own component and forward a ref but isn't working at all.
Does anyone know how to fix this problem?

import JWPlayer from '@jwplayer/jwplayer-react';
import React, { useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useLocation } from 'react-router-dom';
import { StreamingPlayerConfigs } from '../../jw-player-configs/StreamingPlayerConfigs.ts';
import { StatusMessages } from '../../model/enums/statusEnums.ts';

interface StreamingPlayerProps {
    liveEvent: any;
    isVideoHtml?: boolean;
}

const StreamingPlayer: React.FC<StreamingPlayerProps> = ({ liveEvent, isVideoHtml }) => {
    const location = useLocation();
    const [player, setPlayer] = useState<any>(null);
    const playerRef = useRef<any>(null);

    const { i18n } = useTranslation();

    useEffect(() => {
        const handleCaptionsList = () => {
            if (player && player.getCaptionsList().length) {
                const captionsList = player.getCaptionsList();
                const eventLanguage = i18n.language.split('-')[0];
                const captionIndex = captionsList.findIndex((caption: any) => {
                    if (eventLanguage && caption.language) {
                        return caption.language.split('-')[0] === eventLanguage;
                    }
                });
                player.setCurrentCaptions(captionIndex);
            }
        };

        if (player) {
            player.on('captionsList', handleCaptionsList);

            return () => {
                player.off('captionsList', handleCaptionsList);
            };
        }
    }, [player, i18n.language]);

    const isOnDemand = liveEvent.status !== StatusMessages.LIVE;
    const isStreaming = liveEvent.status === StatusMessages.LIVE || location.pathname.split('/')[2] === 'moderator';

    return (
        <>
            {liveEvent.eventId && (
                <div className='h-full w-full'>
                    {isOnDemand ? (
                        isVideoHtml ? (
                            <video
                                src={liveEvent.config.default?.videoSponsorURL}
                                autoPlay={true}
                                loop
                                muted
                                controls
                                controlsList='nofullscreen nodownload'
                                disablePictureInPicture
                                playsInline
                                onContextMenu={(event) => event.preventDefault()}
                            />
                        ) : (
                            <JWPlayer config={StreamingPlayerConfigs.onDemand} library='' file={liveEvent.config.default?.videoSponsorURL} />
                        )
                    ) : (
                        isStreaming && (
                            <JWPlayer
                                ref={playerRef}
                                onReady={() => setPlayer(playerRef.current.player)}
                                config={StreamingPlayerConfigs.streaming}
                                library=''
                                playlist={[
                                    {
                                        file: liveEvent.config.default?.videoStreamingURL,
                                        type: liveEvent.config.default?.videoStreamingType,
                                    },
                                ]}
                            />
                        )
                    )}
                </div>
            )}
        </>
    );
};

export default StreamingPlayer;