From 4b37a24ef786ed68cbea0eccb57747913c6666fa Mon Sep 17 00:00:00 2001
From: Paul Aderoju <paul.adeboye@yahoo.com>
Date: Tue, 6 Oct 2026 14:35:39 +0100
Subject: [PATCH] fix: re-initialize CldVideoPlayer after unmount and remount

The player was never fully disposed on unmount (only the Cloudinary
plugin was), so it stayed registered with video.js. With an `id` prop,
remounting reused that stale player and the new <video> element was
never initialized; without one, every remount leaked a player. Next.js
also doesn't fire onLoad again for a script id it already loaded.

Dispose the player on unmount (skipping React Strict Mode's simulated
unmount, which reuses the same element), add onReady alongside onLoad
so remounts initialize again, and guard initialization with the player
ref instead of possibly stale state.
---
 .../CldVideoPlayer/CldVideoPlayer.tsx         | 26 ++++++++++++-------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.tsx b/next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.tsx
index 9ee710df..d0701dfd 100644
--- a/next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.tsx
+++ b/next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.tsx
@@ -49,6 +49,8 @@ const CldVideoPlayer = (props: CldVideoPlayerProps) => {
   const videoRef = props.videoRef || defaultVideoRef;
   const defaultPlayerRef = useRef<CloudinaryVideoPlayer | null>(null);
   const playerRef = props.playerRef || defaultPlayerRef;
+  // The <video> element the player was created on (video.js keeps using it inside the player)
+  const playerVideoElementRef = useRef<HTMLVideoElement | null>(null);
 
   const playerId = id || `player-${uniqueId.replace(/:/g, '')}`;
   let playerClassName = 'cld-video-player cld-fluid';
@@ -86,8 +88,14 @@ const CldVideoPlayer = (props: CldVideoPlayerProps) => {
    */
 
   const disposePlayer = () => {
-    if (playerRef.current?.videojs?.cloudinary) {
-      playerRef.current.videojs.cloudinary.dispose();
+    // React Strict Mode runs effect cleanups without removing the DOM, then reuses the same
+    // <video> element. Keep the player in that case; dispose() would remove the element.
+    if (playerVideoElementRef.current?.isConnected) return;
+
+    // dispose() on the player instance also removes it from the video.js registry,
+    // so a remount with the same id creates a new player instead of reusing a stale one
+    if (typeof playerRef.current?.dispose === 'function') {
+      playerRef.current.dispose();
     }
     // remove from global instances array
     playerInstances = playerInstances.filter((instanceId) => instanceId !== playerId);
@@ -101,14 +109,12 @@ const CldVideoPlayer = (props: CldVideoPlayerProps) => {
    */
 
   const initializePlayer = () => {
-    if (typeof window !== 'undefined' && 'cloudinary' in window && videoRef.current && !playerInitialized) {
+    // Check the ref, not the playerInitialized state: onLoad and onReady can both call this
+    // during the same render, and the state value seen there may be stale
+    if (typeof window !== 'undefined' && 'cloudinary' in window && videoRef.current && !playerRef.current) {
       cloudinaryRef.current = window.cloudinary;
-      
-      // dispose any existing player instance first to prevent conflicts
-      if (playerRef.current) {
-        disposePlayer();
-      }
-      
+
+      playerVideoElementRef.current = videoRef.current;
       playerRef.current = cloudinaryRef.current.videoPlayer(videoRef.current, playerOptions);
       setPlayerInitialized(true);
 
@@ -180,6 +186,8 @@ const CldVideoPlayer = (props: CldVideoPlayerProps) => {
           id={`cloudinary-videoplayer-${playerId}`}
           src={`https://unpkg.com/cloudinary-video-player@${PLAYER_VERSION}/dist/cld-video-player.min.js`}
           onLoad={handleOnLoad}
+          // onReady also runs on later mounts with the same script id, where onLoad doesn't fire again
+          onReady={handleOnLoad}
           onError={(e) => console.error(`Failed to load Cloudinary Video Player: ${e.message}`)}
         />
       </div>