I have react component as follows:
import React, { Fragment, useEffect, useRef, useState } from 'react';import { hasWindow } from '../utils.js';import { Helmet } from 'react-helmet';const PLATFORMS = { YOUTUBE: 'platform', BUNNY: 'bunny', VIMEO: 'vimeo'};const VideoExternal = ({ video, isOnScreen, item, context }) => { const [isPlaying, setIsPlaying] = useState(video.autoplay); const [isPaused, setIsPaused] = useState(false); const [isMuted, setIsMuted] = useState(video.autoplay); const [isVideoLoaded, setIsVideoLoaded] = useState(false); const [isVideoHovered, setIsVideoHovered] = useState(false); const [showLastImage, setShowLastImage] = useState(false); const iframeId = `iframe-${video.url}-${video.externalUrl}`; const iframeRef = useRef(null); const playerRef = useRef(null); const getPlatform = (url) => { if (url.includes('youtube') || url.includes('youtu')) return PLATFORMS.YOUTUBE; if (url.includes('b-cdn') || url.includes('mediadelivery')) return PLATFORMS.BUNNY; if (url.includes('vimeo')) return PLATFORMS.VIMEO; return null; }; const getBaseUrl = (url) => { const urlObj = new URL(url); return `${urlObj.origin}${urlObj.pathname}`; }; const addQueryParams = (url, platform, autoplay, loop) => { const urlObj = new URL(url); switch (platform) { case PLATFORMS.YOUTUBE: if (autoplay) urlObj.searchParams.set('autoplay', '1'); if (loop) urlObj.searchParams.set('loop', '1'); isMuted ? urlObj.searchParams.set('mute', '1') : urlObj.searchParams.set('mute', '0'); urlObj.searchParams.set('controls', '0'); urlObj.searchParams.set('enablejsapi', '1'); break; case PLATFORMS.VIMEO: if (autoplay) urlObj.searchParams.set('autoplay', '1'); if (loop) urlObj.searchParams.set('loop', '1'); isMuted ? urlObj.searchParams.set('muted', '1') : urlObj.searchParams.set('muted', '0'); urlObj.searchParams.set('controls', '0'); break; case PLATFORMS.BUNNY: if (autoplay) urlObj.searchParams.set('autoplay', 'true'); if (loop) urlObj.searchParams.set('loop', 'true'); urlObj.searchParams.set('mute', `${isMuted} ? 'true' : 'false'`); urlObj.searchParams.set('controls', 'false'); break; default: break; } return urlObj.toString(); }; const platform = getPlatform(video.externalUrl); const baseUrl = getBaseUrl(video.externalUrl, platform); const iframeUrl = addQueryParams(baseUrl, platform, video.autoplay, video.loop); const initializePlayer = (iframe) => { if (!iframe) return null; if (platform === PLATFORMS.YOUTUBE) { playerRef.current = new YT.Player(iframeId, { events: { onReady: () => { console.log('onReady'); }, onStateChange: event => { if (!video.loop && event.data === YT.PlayerState.ENDED) { setIsPlaying(false); setIsMuted(true); setShowLastImage(true); console.log('Video ended.'); } } } }); } else if (platform === PLATFORMS.VIMEO) { playerRef.current = new Vimeo.Player(iframe); } }; useEffect(() => { if (isOnScreen && isVideoLoaded) { const iframe = iframeRef?.current; // Create new player instance initializePlayer(iframe); } }, [isVideoLoaded, isOnScreen]); // Effect to reset playing and showing the last image on slide change useEffect(() => { setIsPlaying(video.autoplay); setIsMuted(video.autoplay); setShowLastImage(false); }, [isOnScreen]); // Effect to check when video is ended useEffect(() => { if (isOnScreen && isVideoLoaded && hasWindow()) { const iframe = iframeRef?.current; if (platform === PLATFORMS.YOUTUBE) { } else if (platform === PLATFORMS.VIMEO) { playerRef?.current?.on('finish', function () { if (!video.loop) { setIsPlaying(false); setIsMuted(true); setShowLastImage(true); } }); } else if (platform === PLATFORMS.BUNNY) { } } }, [video.loop, isOnScreen, isVideoLoaded]); const handlePlayClick = () => { const iframe = iframeRef?.current; const iframeWindow = iframe?.contentWindow; if (iframe && isVideoLoaded) { if (platform === PLATFORMS.YOUTUBE) playerRef?.current?.playVideo(); } else if (platform === PLATFORMS.VIMEO) { playerRef?.current?.play(); } else if (platform === PLATFORMS.BUNNY && iframeWindow) { iframeWindow?.postMessage('{"event":"command","func":"play"}', '*'); } setIsPaused(false); setIsPlaying(true); setIsMuted(false); setShowLastImage(false); } }; const isFirstImageVisible = !isPlaying && !isPaused && !showLastImage && video.firstImage !== ''; const isLastImageVisible = !isPlaying && !isPaused && showLastImage && video.lastImage !== ''; const isPlayButtonVisible = !isPlaying && video.playButtonVisible; const renderFirstImage = () => { return <img src={video.firstImage} alt='Start of Video' className='rounded-16 h-full w-full absolute inset-0 object-cover' />; }; const renderLastImage = () => { return <img src={video.lastImage} alt='End of Video' className='rounded-16 h-full w-full absolute inset-0 object-cover' />; }; const renderPlayButton = () => { return <i className='fad fa-play-circle text-4xl md:text-6xl text-gray-200 hover:text-gray-100 cursor-pointer absolute z-1' onClick={handlePlayClick} />; }; const handleIframeLoad = () => { setIsVideoLoaded(true); }; return (<Fragment><Helmet><script src='https://player.vimeo.com/api/player.js'></script><script src='https://www.youtube.com/iframe_api'></script></Helmet><div className='rounded-16 h-full w-full relative flex items-center justify-center' onMouseEnter={() => setIsVideoHovered(true)} onMouseLeave={() => setIsVideoHovered(false)}> {isFirstImageVisible && renderFirstImage()}<iframe id={iframeId} ref={iframeRef} src={iframeUrl} allow='autoplay; fullscreen; picture-in-picture' title='Video' className='h-full w-full rounded-16' onLoad={handleIframeLoad}></iframe> {isPlayButtonVisible && renderPlayButton()} {isLastImageVisible && renderLastImage()}</div></Fragment> );};export default VideoExternal;When the component loads the video starts playing (video.autoplay is true), and when video is ended I see console.log('Video ended.');
When I then click on play button and (executes handlePlayClick function) and thus playerRef?.current?.playVideo(); is executed, the video starts playing, but when it ends I do not see console.log('isEnded: ', true).
Any idea why? Do I need to reinitialize the iframe or is there something else that I'm missing?
Thanks.