From 49a2fe0c26fb2d70e73e998918e38aec03446d59 Mon Sep 17 00:00:00 2001
From: Sahil Silare <sahilsilare@gmail.com>
Date: Thu, 3 Oct 2024 23:26:43 +0530
Subject: [PATCH 1/2] feat: added unique id generation using React's `useId()`
 hook

---
 .../src/components/CldVideoPlayer/CldVideoPlayer.tsx       | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.tsx b/next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.tsx
index 8f7f0870..49c12965 100644
--- a/next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.tsx
+++ b/next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.tsx
@@ -1,4 +1,4 @@
-import React, {useRef, MutableRefObject, useEffect} from 'react';
+import React, {useRef, MutableRefObject, useEffect, useId} from 'react';
 import Script from 'next/script';
 import Head from 'next/head';
 import { CloudinaryVideoPlayer } from '@cloudinary-util/types';
@@ -28,6 +28,7 @@ const CldVideoPlayer = (props: CldVideoPlayerProps) => {
     width,
   } = props as CldVideoPlayerProps;
 
+  const uniqueId = useId();
 
   const cloudinaryConfig = getCloudinaryConfig(config);
   const playerOptions = getVideoPlayerOptions(props, cloudinaryConfig);
@@ -46,7 +47,7 @@ const CldVideoPlayer = (props: CldVideoPlayerProps) => {
   const defaultPlayerRef = useRef()as MutableRefObject<CloudinaryVideoPlayer | null>;
   const playerRef = props.playerRef || defaultPlayerRef;
 
-  const playerId = id || `player-${publicId.replace('/', '-')}`;
+  const playerId = id || `player-${uniqueId}`;
   let playerClassName = 'cld-video-player cld-fluid';
 
   if ( className ) {
@@ -137,7 +138,7 @@ const CldVideoPlayer = (props: CldVideoPlayerProps) => {
           height={height}
         />
         <Script
-          id={`cloudinary-videoplayer-${playerId}-${Math.floor(Math.random() * 100)}`}
+          id={`cloudinary-videoplayer-${playerId}`}
           src={`https://unpkg.com/cloudinary-video-player@${PLAYER_VERSION}/dist/cld-video-player.min.js`}
           onLoad={handleOnLoad}
           onError={(e) => console.error(`Failed to load Cloudinary Video Player: ${e.message}`)}

From 31d43403884ecfe86e735d1a50b66ebd3eea4ad4 Mon Sep 17 00:00:00 2001
From: Sahil Silare <sahilsilare@gmail.com>
Date: Fri, 4 Oct 2024 00:12:03 +0530
Subject: [PATCH 2/2] chore: fixed validation

---
 .../src/components/CldVideoPlayer/CldVideoPlayer.tsx           | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.tsx b/next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.tsx
index 49c12965..e13815f4 100644
--- a/next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.tsx
+++ b/next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.tsx
@@ -33,7 +33,6 @@ const CldVideoPlayer = (props: CldVideoPlayerProps) => {
   const cloudinaryConfig = getCloudinaryConfig(config);
   const playerOptions = getVideoPlayerOptions(props, cloudinaryConfig);
   const { publicId } = playerOptions;
-
   if ( typeof publicId === 'undefined' ) {
     throw new Error('Video Player requires a Public ID or Cloudinary URL - please specify a src prop');
   }
@@ -47,7 +46,7 @@ const CldVideoPlayer = (props: CldVideoPlayerProps) => {
   const defaultPlayerRef = useRef()as MutableRefObject<CloudinaryVideoPlayer | null>;
   const playerRef = props.playerRef || defaultPlayerRef;
 
-  const playerId = id || `player-${uniqueId}`;
+  const playerId = id || `player-${uniqueId.replace(/:/g, '')}`;
   let playerClassName = 'cld-video-player cld-fluid';
 
   if ( className ) {