on Events not working =<<<

[gamestap99]

this is My code

     useEffect(() => {
        console.log('aa')
        if (ref.current?.plyr?.source === null) {
            setHasPlyr(true)
        }
    })

    useEffect(() => {
        console.log('ref', ref.current === null)
        console.log('ref', ref.current?.plyr === null)
        console.log('ref-plyr', ref.current?.plyr)
        console.log('ref-sr', ref.current?.plyr?.source === null)

        if (ref.current?.plyr?.source === null) return;

        const api = ref.current as { plyr: PlyrInstance };


        const onReady:PlyrFCCallback = event => {
            console.log('PlyrFC ready!', event)

        }

        const onEnded = (event: PlyrEvent) => {
            console.log('PlyrFC ended-event!', event)
        }

        // registerEvents()

        api.plyr.on('ready', (event)=>{
            console.log('PlyrFC ready!', event)
        })
        api.plyr.on('ended', onEnded)
        api.plyr.on('timeupdate',(event)=>{
            console.log('timeupdate vip',event)
        })

        return () => {
            api.plyr?.off('ready', onReady)
            api.plyr?.off('ended', onEnded)
            // ref?.current?.plyr?.off('pause', onPause)
            // ref?.current?.plyr?.off('ended', onEnded)
        }

    }, [hasPlyr]);

I fixed it by forking your repository and adding some quick and simple code fixes since I needed it urgently.

In core

/* REACT-APTOR */
const instantiate: Instantiate<
    PlyrJS,
    HTMLVideoElement,
    PlyrConfigurationProps
> = (_, params): PlyrJS => {
    // The node update of ref in react life cycle seems to have issue, used class selector instead

    console.log('params?.options', params?.options)

    const plyr = new PlyrJS(".plyr-react", params?.options ?? {});
    if (params?.source) plyr.source = params?.source;

    plyr.on('ready',(event) => {
        console.log("plyr ready", event);
        if(params?.options?.listeners){
            params?.options?.listeners['ready']?.(event);
        }
    })

    plyr.on('play',(event) => {
        console.log("plyr play", event);
        if(params?.options?.listeners){
            params?.options?.listeners['play']?.(event);
        }
    })

    plyr.on('timeupdate',(event) => {
        console.log("plyr timeupdate", event);
        if(params?.options?.listeners){
            params?.options?.listeners['timeupdate']?.(event);
        }
    })

    return plyr;
};

on Screen

   <PlyrHlsFC
            key={`plyr-video-auto ${elementClassName ? elementClassName : ''}`}
            ref={ref}
            source={{} as PlyrProps["source"]}
            hlsSource={{
                id: hlsData.id,
                name: hlsData.name,
                file: hlsData.file,
            }}
            options={{
                listeners: {
                    'ready': (event) => {
                        console.log('PlyrFC ready!', event)
                    },
                    'timeupdate': (event) => {
                        console.log('PlyrFC timeupdate!', event)
                        if (onTimeUpdate) {
                            onTimeUpdate(event)
                        }
                    },
                    'play': (event) => {
                        console.log('PlyrFC play!', event)
                        if (onPlay) {
                            onPlay(event)
                        }
                    },
                }
            }}
        />

This is not the best way; it's just a quick fix =<<