next-cloudinary 7.0.0-beta.8 → 7.0.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Colby Fayock
+Copyright (c) 2023 Cloudinary
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -11,10 +11,6 @@
 
 # Next Cloudinary
 
-<!-- doc-gen PKGJSON optionOne="hey" -->
-undefined
-<!-- end-doc-gen -->
-
 High-performance image delivery and uploading at scale in Next.js powered by Cloudinary.
 
 <a href="#-features">Features</a> • <a href="#-getting-started">Getting Started</a> • <a href="#%EF%B8%8F-community--support">Community & Support</a> • <a href="#-contributing">Contributing</a>
@@ -79,7 +75,7 @@ import { CldImage } from 'next-cloudinary';
 ## ❤️ Community & Support
 
 * [GitHub: Create an Issue](https://github.com/cloudinary-community/next-cloudinary/issues)
-* [Twitter: @colbyfayock](https://twitter.com/colbyfayock)
+* [Twitter: @cloudinary](https://twitter.com/cloudinary)
 
 ## 🛠 Contributing
 
@@ -203,10 +199,26 @@ pnpm test
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/mr-loop-1"><img src="https://avatars.githubusercontent.com/u/62374784?v=4?s=100" width="100px;" alt="Abdul Samad"/><br /><sub><b>Abdul Samad</b></sub></a><br /><a href="https://github.com/cloudinary-community/next-cloudinary/commits?author=mr-loop-1" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/DevRish"><img src="https://avatars.githubusercontent.com/u/78094670?v=4?s=100" width="100px;" alt="Rishav Chattopadhyay"/><br /><sub><b>Rishav Chattopadhyay</b></sub></a><br /><a href="https://github.com/cloudinary-community/next-cloudinary/commits?author=DevRish" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/Prathamesh010"><img src="https://avatars.githubusercontent.com/u/41731424?v=4?s=100" width="100px;" alt="Prathamesh Gawas"/><br /><sub><b>Prathamesh Gawas</b></sub></a><br /><a href="https://github.com/cloudinary-community/next-cloudinary/commits?author=Prathamesh010" title="Documentation">📖</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://victory-nwani.dev"><img src="https://avatars.githubusercontent.com/u/29664439?v=4?s=100" width="100px;" alt="Nwani Victory"/><br /><sub><b>Nwani Victory</b></sub></a><br /><a href="https://github.com/cloudinary-community/next-cloudinary/commits?author=vickywane" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://victory-nwani.dev"><img src="https://avatars.githubusercontent.com/u/29664439?v=4?s=100" width="100px;" alt="Nwani Victory"/><br /><sub><b>Nwani Victory</b></sub></a><br /><a href="https://github.com/cloudinary-community/next-cloudinary/commits?author=vickywane" title="Documentation">📖</a> <a href="https://github.com/cloudinary-community/next-cloudinary/commits?author=vickywane" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://neilblaze.live"><img src="https://avatars.githubusercontent.com/u/48355572?v=4?s=100" width="100px;" alt="Pratyay Banerjee"/><br /><sub><b>Pratyay Banerjee</b></sub></a><br /><a href="https://github.com/cloudinary-community/next-cloudinary/commits?author=Neilblaze" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/saai-syvendra"><img src="https://avatars.githubusercontent.com/u/157691467?v=4?s=100" width="100px;" alt="Saai Syvendra"/><br /><sub><b>Saai Syvendra</b></sub></a><br /><a href="https://github.com/cloudinary-community/next-cloudinary/commits?author=saai-syvendra" title="Documentation">📖</a></td>
     </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Zaki-Mohd"><img src="https://avatars.githubusercontent.com/u/181067270?v=4?s=100" width="100px;" alt="Mohammad Zaki"/><br /><sub><b>Mohammad Zaki</b></sub></a><br /><a href="https://github.com/cloudinary-community/next-cloudinary/commits?author=Zaki-Mohd" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/thinkverse"><img src="https://avatars.githubusercontent.com/u/2221746?v=4?s=100" width="100px;" alt="Kim Hallberg"/><br /><sub><b>Kim Hallberg</b></sub></a><br /><a href="https://github.com/cloudinary-community/next-cloudinary/commits?author=thinkverse" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Waqibsk"><img src="https://avatars.githubusercontent.com/u/162541991?v=4?s=100" width="100px;" alt="Md Waqib Sk"/><br /><sub><b>Md Waqib Sk</b></sub></a><br /><a href="https://github.com/cloudinary-community/next-cloudinary/commits?author=Waqibsk" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://arjuncodess.is-a.dev/"><img src="https://avatars.githubusercontent.com/u/137415649?v=4?s=100" width="100px;" alt="Arjun Vijay Prakash"/><br /><sub><b>Arjun Vijay Prakash</b></sub></a><br /><a href="https://github.com/cloudinary-community/next-cloudinary/commits?author=ArjunCodess" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://musaddiq625.carrd.co"><img src="https://avatars.githubusercontent.com/u/37911054?v=4?s=100" width="100px;" alt="Musaddiq Ahmed Khan"/><br /><sub><b>Musaddiq Ahmed Khan</b></sub></a><br /><a href="https://github.com/cloudinary-community/next-cloudinary/commits?author=Musaddiq625" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/SarthakJain29"><img src="https://avatars.githubusercontent.com/u/93116216?v=4?s=100" width="100px;" alt="Sarthak Jain"/><br /><sub><b>Sarthak Jain</b></sub></a><br /><a href="https://github.com/cloudinary-community/next-cloudinary/commits?author=SarthakJain29" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/HRIDYANSHU054"><img src="https://avatars.githubusercontent.com/u/124202756?v=4?s=100" width="100px;" alt="Hridyanshu"/><br /><sub><b>Hridyanshu</b></sub></a><br /><a href="https://github.com/cloudinary-community/next-cloudinary/commits?author=HRIDYANSHU054" title="Documentation">📖</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://anurag2787.vercel.app/"><img src="https://avatars.githubusercontent.com/u/143180737?v=4?s=100" width="100px;" alt="Anurag Yadav"/><br /><sub><b>Anurag Yadav</b></sub></a><br /><a href="https://github.com/cloudinary-community/next-cloudinary/commits?author=anurag2787" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/error9098x"><img src="https://avatars.githubusercontent.com/u/43810146?v=4?s=100" width="100px;" alt="ProCodec"/><br /><sub><b>ProCodec</b></sub></a><br /><a href="https://github.com/cloudinary-community/next-cloudinary/commits?author=error9098x" title="Code">💻</a> <a href="https://github.com/cloudinary-community/next-cloudinary/commits?author=error9098x" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/chawdamrunal"><img src="https://avatars.githubusercontent.com/u/32319538?v=4?s=100" width="100px;" alt="chawda mrunal"/><br /><sub><b>chawda mrunal</b></sub></a><br /><a href="https://github.com/cloudinary-community/next-cloudinary/commits?author=chawdamrunal" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/dharamghevariya"><img src="https://avatars.githubusercontent.com/u/144807441?v=4?s=100" width="100px;" alt="Dharam Ghevariya"/><br /><sub><b>Dharam Ghevariya</b></sub></a><br /><a href="https://github.com/cloudinary-community/next-cloudinary/commits?author=dharamghevariya" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Meghana-2124"><img src="https://avatars.githubusercontent.com/u/204466699?v=4?s=100" width="100px;" alt="Meghana"/><br /><sub><b>Meghana</b></sub></a><br /><a href="https://github.com/cloudinary-community/next-cloudinary/commits?author=Meghana-2124" title="Documentation">📖</a></td>
+    </tr>
   </tbody>
 </table>
 

package/dist/{CldImage-88363cf7.esm.js → CldImage-07dde903.esm.js}

@@ -3,9 +3,9 @@ import { forwardRef, useState, useCallback } from 'react';
 import Image from 'next/image';
 import { pollForProcessingImage } from '@cloudinary-util/util';
 import { cloudinaryPluginKeys } from '@cloudinary-util/url-loader';
-import { g as getCldImageUrl, c as cloudinaryLoader } from './cloudinary-loader-4ccbec73.esm.js';
+import { g as getCldImageUrl, c as cloudinaryLoader } from './cloudinary-loader-3f16f899.esm.js';
 import { jsx } from 'react/jsx-runtime';
-import './cloudinary-bd3de558.esm.js';
+import './cloudinary-ef6def0a.esm.js';
 import 'next/package.json';
 
 const CldImage = /*#__PURE__*/forwardRef(function CldImage(props, ref) {

package/dist/{CldImage-04771bcb.cjs.js → CldImage-31b93c94.cjs.js}

@@ -3,20 +3,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var react = require('react');
+var React = require('react');
 var Image = require('next/image');
 var util = require('@cloudinary-util/util');
 var urlLoader = require('@cloudinary-util/url-loader');
-var cloudinaryLoader = require('./cloudinary-loader-7bbd42f3.cjs.js');
+var cloudinaryLoader = require('./cloudinary-loader-837b1bbc.cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
-require('./cloudinary-b3d74a97.cjs.js');
+require('./cloudinary-ed5f879f.cjs.js');
 require('next/package.json');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
 var Image__default = /*#__PURE__*/_interopDefault(Image);
 
-const CldImage = /*#__PURE__*/react.forwardRef(function CldImage(props, ref) {
+const CldImage = /*#__PURE__*/React.forwardRef(function CldImage(props, ref) {
   let hasThrownError = false;
 
   // Add props here that are intended to only be used for
@@ -35,7 +35,7 @@ const CldImage = /*#__PURE__*/react.forwardRef(function CldImage(props, ref) {
   };
   Object.keys(props).filter(key => typeof key === 'string' && !CLD_OPTIONS.includes(key)).forEach(key => imageProps[key] = props[key]);
   const defaultImgKey = Object.keys(imageProps).map(key => `${key}:${imageProps[key]}`).join(';');
-  const [imgKey, setImgKey] = react.useState(defaultImgKey);
+  const [imgKey, setImgKey] = React.useState(defaultImgKey);
 
   // The unoptimized flag is intended to remove all optimizations including quality, format, and sizing
   // via responsive sizing. When passing this in, it also prevents the `loader` from running, thus
@@ -95,7 +95,7 @@ const CldImage = /*#__PURE__*/react.forwardRef(function CldImage(props, ref) {
       setImgKey(`${defaultImgKey};${Date.now()}`);
     }
   }
-  const handleOnError = react.useCallback(onError, [util.pollForProcessingImage, defaultImgKey]);
+  const handleOnError = React.useCallback(onError, [util.pollForProcessingImage, defaultImgKey]);
 
   // Copypasta from https://github.com/prismicio/prismic-next/pull/79/files
   // Thanks Angelo!

package/dist/{CldUploadButton-db9b095b.cjs.js → CldUploadButton-7867eb66.cjs.js}

@@ -4,7 +4,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('react');
-var CldUploadWidget = require('./CldUploadWidget-552ed202.cjs.js');
+var CldUploadWidget = require('./CldUploadWidget-a1e60409.cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -17,7 +17,6 @@ const CldUploadButton = ({
   onClick,
   onError,
   onOpen,
-  onUpload,
   onAbort,
   onBatchCancelled,
   onClose,
@@ -53,7 +52,6 @@ const CldUploadButton = ({
     children: /*#__PURE__*/jsxRuntime.jsx(CldUploadWidget__default["default"], {
       onError: onError,
       onOpen: onOpen,
-      onUpload: onUpload,
       onAbort: onAbort,
       onBatchCancelled: onBatchCancelled,
       onClose: onClose,

package/dist/{CldUploadButton-196b419b.esm.js → CldUploadButton-8cb106b1.esm.js}

@@ -1,6 +1,6 @@
 'use client';
 import 'react';
-import CldUploadWidget from './CldUploadWidget-e61be307.esm.js';
+import CldUploadWidget from './CldUploadWidget-088119fa.esm.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
 
 const CldUploadButton = ({
@@ -9,7 +9,6 @@ const CldUploadButton = ({
   onClick,
   onError,
   onOpen,
-  onUpload,
   onAbort,
   onBatchCancelled,
   onClose,
@@ -45,7 +44,6 @@ const CldUploadButton = ({
     children: /*#__PURE__*/jsx(CldUploadWidget, {
       onError: onError,
       onOpen: onOpen,
-      onUpload: onUpload,
       onAbort: onAbort,
       onBatchCancelled: onBatchCancelled,
       onClose: onClose,

package/dist/{CldUploadWidget-e61be307.esm.js → CldUploadWidget-088119fa.esm.js}

@@ -1,8 +1,8 @@
 'use client';
-import { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import Script from 'next/script';
 import { generateSignatureCallback, getUploadWidgetOptions, generateUploadWidgetResultCallback, UPLOAD_WIDGET_EVENTS } from '@cloudinary-util/url-loader';
-import { g as getCloudinaryConfig } from './cloudinary-bd3de558.esm.js';
+import { g as getCloudinaryConfig } from './cloudinary-ef6def0a.esm.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import 'next/package.json';
 
@@ -18,19 +18,30 @@ function triggerOnIdle(callback) {
   return setTimeout(() => callback(), 1);
 }
 
+const useUploadWidgetId = () => {
+  const reactId = React.useId?.() ?? null;
+
+  // Preserve the original random ID behavior for React < 18
+  const fallbackId = React.useRef(Math.floor(Math.random() * 100)).current;
+
+  // Remove colons from React useId() output (e.g., ":r1:" -> "r1") to avoid issues with CSS selectors and HTML IDs
+  const sanitizedId = reactId ? reactId.replace(/:/g, '') : fallbackId;
+  return `cloudinary-uploadwidget-${sanitizedId}`;
+};
 const CldUploadWidget = ({
   children,
   config,
   onError,
   onOpen,
-  onUpload,
   options,
   signatureEndpoint,
   uploadPreset,
   ...props
 }) => {
-  const cloudinary = useRef();
-  const widget = useRef();
+  const uploadWidgetId = useUploadWidgetId();
+  const cloudinary = useRef(undefined);
+  const widget = useRef(undefined);
+  const isMounted = useRef(false);
   const [error, setError] = useState(undefined);
   const [results, setResults] = useState(undefined);
   const [isScriptLoading, setIsScriptLoading] = useState(true);
@@ -79,25 +90,13 @@ const CldUploadWidget = ({
     }
   });
 
-  // Handle result states and callbacks
-
-  useEffect(() => {
-    if (typeof results === 'undefined') return;
-    const isSuccess = results.event === 'success';
-    if (isSuccess && typeof onUpload === 'function') {
-      if (process.env.NODE_ENV === 'development') {
-        console.warn('The onUpload callback is deprecated. Please use onSuccess instead.');
-      }
-      onUpload(results, widget.current);
-    }
-  }, [results]);
-
   /**
    * handleOnLoad
    * @description Stores the Cloudinary window instance to a ref when the widget script loads
    */
 
   function handleOnLoad() {
+    if (!isMounted.current) return;
     setIsScriptLoading(false);
     if (!cloudinary.current) {
       cloudinary.current = window.cloudinary;
@@ -107,13 +106,15 @@ const CldUploadWidget = ({
     // to trigger widget creation. Optional.
 
     triggerOnIdle(() => {
-      if (!widget.current) {
+      if (isMounted.current && !widget.current) {
         widget.current = createWidget();
       }
     });
   }
   useEffect(() => {
+    isMounted.current = true;
     return () => {
+      isMounted.current = false;
       widget.current?.destroy();
       widget.current = undefined;
     };
@@ -129,7 +130,7 @@ const CldUploadWidget = ({
     if (!widget.current) {
       widget.current = createWidget();
     }
-    if (typeof widget?.current[method] === "function") {
+    if (typeof widget.current?.[method] === "function") {
       return widget.current[method](...options);
     }
   }
@@ -196,7 +197,7 @@ const CldUploadWidget = ({
       isLoading: isScriptLoading,
       ...instanceMethods
     }), /*#__PURE__*/jsx(Script, {
-      id: `cloudinary-uploadwidget-${Math.floor(Math.random() * 100)}`,
+      id: uploadWidgetId,
       src: "https://upload-widget.cloudinary.com/global/all.js",
       onLoad: handleOnLoad,
       onError: e => console.error(`Failed to load Cloudinary Upload Widget: ${e.message}`)

package/dist/{CldUploadWidget-552ed202.cjs.js → CldUploadWidget-a1e60409.cjs.js}

@@ -3,15 +3,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var react = require('react');
+var React = require('react');
 var Script = require('next/script');
 var urlLoader = require('@cloudinary-util/url-loader');
-var cloudinary = require('./cloudinary-b3d74a97.cjs.js');
+var cloudinary = require('./cloudinary-ed5f879f.cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 require('next/package.json');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
+var React__default = /*#__PURE__*/_interopDefault(React);
 var Script__default = /*#__PURE__*/_interopDefault(Script);
 
 /**
@@ -26,22 +27,33 @@ function triggerOnIdle(callback) {
   return setTimeout(() => callback(), 1);
 }
 
+const useUploadWidgetId = () => {
+  const reactId = React__default["default"].useId?.() ?? null;
+
+  // Preserve the original random ID behavior for React < 18
+  const fallbackId = React__default["default"].useRef(Math.floor(Math.random() * 100)).current;
+
+  // Remove colons from React useId() output (e.g., ":r1:" -> "r1") to avoid issues with CSS selectors and HTML IDs
+  const sanitizedId = reactId ? reactId.replace(/:/g, '') : fallbackId;
+  return `cloudinary-uploadwidget-${sanitizedId}`;
+};
 const CldUploadWidget = ({
   children,
   config,
   onError,
   onOpen,
-  onUpload,
   options,
   signatureEndpoint,
   uploadPreset,
   ...props
 }) => {
-  const cloudinary$1 = react.useRef();
-  const widget = react.useRef();
-  const [error, setError] = react.useState(undefined);
-  const [results, setResults] = react.useState(undefined);
-  const [isScriptLoading, setIsScriptLoading] = react.useState(true);
+  const uploadWidgetId = useUploadWidgetId();
+  const cloudinary$1 = React.useRef(undefined);
+  const widget = React.useRef(undefined);
+  const isMounted = React.useRef(false);
+  const [error, setError] = React.useState(undefined);
+  const [results, setResults] = React.useState(undefined);
+  const [isScriptLoading, setIsScriptLoading] = React.useState(true);
 
   // When creating a signed upload, you need to provide both your Cloudinary API Key
   // as well as a signature generator function that will sign any paramters
@@ -87,25 +99,13 @@ const CldUploadWidget = ({
     }
   });
 
-  // Handle result states and callbacks
-
-  react.useEffect(() => {
-    if (typeof results === 'undefined') return;
-    const isSuccess = results.event === 'success';
-    if (isSuccess && typeof onUpload === 'function') {
-      if (process.env.NODE_ENV === 'development') {
-        console.warn('The onUpload callback is deprecated. Please use onSuccess instead.');
-      }
-      onUpload(results, widget.current);
-    }
-  }, [results]);
-
   /**
    * handleOnLoad
    * @description Stores the Cloudinary window instance to a ref when the widget script loads
    */
 
   function handleOnLoad() {
+    if (!isMounted.current) return;
     setIsScriptLoading(false);
     if (!cloudinary$1.current) {
       cloudinary$1.current = window.cloudinary;
@@ -115,13 +115,15 @@ const CldUploadWidget = ({
     // to trigger widget creation. Optional.
 
     triggerOnIdle(() => {
-      if (!widget.current) {
+      if (isMounted.current && !widget.current) {
         widget.current = createWidget();
       }
     });
   }
-  react.useEffect(() => {
+  React.useEffect(() => {
+    isMounted.current = true;
     return () => {
+      isMounted.current = false;
       widget.current?.destroy();
       widget.current = undefined;
     };
@@ -137,7 +139,7 @@ const CldUploadWidget = ({
     if (!widget.current) {
       widget.current = createWidget();
     }
-    if (typeof widget?.current[method] === "function") {
+    if (typeof widget.current?.[method] === "function") {
       return widget.current[method](...options);
     }
   }
@@ -204,7 +206,7 @@ const CldUploadWidget = ({
       isLoading: isScriptLoading,
       ...instanceMethods
     }), /*#__PURE__*/jsxRuntime.jsx(Script__default["default"], {
-      id: `cloudinary-uploadwidget-${Math.floor(Math.random() * 100)}`,
+      id: uploadWidgetId,
       src: "https://upload-widget.cloudinary.com/global/all.js",
       onLoad: handleOnLoad,
       onError: e => console.error(`Failed to load Cloudinary Upload Widget: ${e.message}`)

package/dist/{CldVideoPlayer-b8f0145b.cjs.js → CldVideoPlayer-42f73054.cjs.js}

@@ -3,11 +3,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var react = require('react');
+var React = require('react');
 var Script = require('next/script');
 var Head = require('next/head');
 var urlLoader = require('@cloudinary-util/url-loader');
-var cloudinary = require('./cloudinary-b3d74a97.cjs.js');
+var cloudinary = require('./cloudinary-ed5f879f.cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 require('next/package.json');
 
@@ -17,11 +17,12 @@ var Script__default = /*#__PURE__*/_interopDefault(Script);
 var Head__default = /*#__PURE__*/_interopDefault(Head);
 
 let playerInstances = [];
-const PLAYER_VERSION = '1.11.1';
+const PLAYER_VERSION = '4.1.2';
 const CldVideoPlayer = props => {
   const {
     className,
     config,
+    disableRemotePlayback,
     height,
     id,
     onDataLoad,
@@ -32,7 +33,9 @@ const CldVideoPlayer = props => {
     onEnded,
     width
   } = props;
-  const uniqueId = react.useId();
+  const uniqueId = React.useId();
+  const [isScriptLoaded, setIsScriptLoaded] = React.useState(false);
+  const [playerInitialized, setPlayerInitialized] = React.useState(false);
   const cloudinaryConfig = cloudinary.getCloudinaryConfig(config);
   const playerOptions = urlLoader.getVideoPlayerOptions(props, cloudinaryConfig);
   const {
@@ -45,26 +48,18 @@ const CldVideoPlayer = props => {
   // Setup the refs and allow for the caller to pass through their
   // own ref instance
 
-  const cloudinaryRef = react.useRef();
-  const defaultVideoRef = react.useRef();
+  const cloudinaryRef = React.useRef(undefined);
+  const defaultVideoRef = React.useRef(null);
   const videoRef = props.videoRef || defaultVideoRef;
-  const defaultPlayerRef = react.useRef();
+  const defaultPlayerRef = React.useRef(null);
   const playerRef = props.playerRef || defaultPlayerRef;
+  // The <video> element the player was created on (video.js keeps using it inside the player)
+  const playerVideoElementRef = React.useRef(null);
   const playerId = id || `player-${uniqueId.replace(/:/g, '')}`;
   let playerClassName = 'cld-video-player cld-fluid';
   if (className) {
     playerClassName = `${playerClassName} ${className}`;
   }
-
-  // Check if the same id is being used for multiple video instances.
-  const checkForMultipleInstance = playerInstances.filter(id => id === playerId).length > 1;
-  if (checkForMultipleInstance) {
-    console.warn(`Multiple instances of the same video detected on the
-     page which may cause some features to not work.
-    Try adding a unique id to each player.`);
-  } else {
-    playerInstances.push(playerId);
-  }
   const events = {
     error: onError,
     loadeddata: onDataLoad,
@@ -87,28 +82,77 @@ const CldVideoPlayer = props => {
   }
 
   /**
-   * handleOnLoad
-   * @description Stores the Cloudinary window instance to a ref when the widget script loads
+   * disposePlayer
+   * @description Properly dispose of the player instance and clean up
    */
 
-  function handleOnLoad() {
-    if ('cloudinary' in window) {
+  const disposePlayer = () => {
+    // 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);
+    playerRef.current = null;
+    setPlayerInitialized(false);
+  };
+
+  /**
+   * initializePlayer
+   * @description Initialize the Cloudinary video player
+   */
+
+  const initializePlayer = () => {
+    // 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;
+      playerVideoElementRef.current = videoRef.current;
       playerRef.current = cloudinaryRef.current.videoPlayer(videoRef.current, playerOptions);
+      setPlayerInitialized(true);
       Object.keys(events).forEach(key => {
         if (typeof events[key] === 'function') {
           playerRef.current?.on(key, handleEvent);
         }
       });
     }
+  };
+
+  /**
+   * handleOnLoad
+   * @description Stores the Cloudinary window instance to a ref when the widget script loads
+   */
+
+  function handleOnLoad() {
+    setIsScriptLoaded(true);
+    if ('cloudinary' in window) {
+      initializePlayer();
+    }
   }
-  react.useEffect(() => {
+
+  // effect to handle component mounting and cleanup
+  React.useEffect(() => {
+    // initialize player if script is already loaded
+    if (isScriptLoaded && typeof window !== 'undefined' && 'cloudinary' in window) {
+      initializePlayer();
+    }
     return () => {
-      playerRef.current?.videojs.cloudinary.dispose();
-      playerInstances = playerInstances.filter(id => id !== playerId);
+      disposePlayer();
     };
   }, []);
 
+  // effect to handle script loading after mount
+  React.useEffect(() => {
+    if (isScriptLoaded && !playerInitialized && typeof window !== 'undefined' && 'cloudinary' in window) {
+      initializePlayer();
+    }
+  }, [isScriptLoaded, playerInitialized]);
+
   /**
    *getPlayerRefs
    */
@@ -127,19 +171,22 @@ const CldVideoPlayer = props => {
       })
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
       style: {
-        width: '100%',
-        aspectRatio: `${width} / ${height}`
+        width: '100%'
       },
       children: [/*#__PURE__*/jsxRuntime.jsx("video", {
         ref: videoRef,
         id: playerId,
         className: playerClassName,
         width: width,
-        height: height
+        height: height,
+        disableRemotePlayback: disableRemotePlayback
       }), /*#__PURE__*/jsxRuntime.jsx(Script__default["default"], {
         id: `cloudinary-videoplayer-${playerId}`,
         src: `https://unpkg.com/cloudinary-video-player@${PLAYER_VERSION}/dist/cld-video-player.min.js`,
-        onLoad: handleOnLoad,
+        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}`)
       })]
     })]