next-cloudinary 7.0.0-beta.11 → 7.0.0-beta.13

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
 
@@ -207,6 +203,22 @@ pnpm test
       <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-ca9114a8.cjs.js → CldImage-7889010b.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-636b4b15.cjs.js');
+var cloudinaryLoader = require('./cloudinary-loader-42e7d6e4.cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
-require('./cloudinary-8a433217.cjs.js');
+require('./cloudinary-60840067.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/{CldImage-e19c2455.esm.js → CldImage-aa471276.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-fc483562.esm.js';
+import { g as getCldImageUrl, c as cloudinaryLoader } from './cloudinary-loader-d3996c49.esm.js';
 import { jsx } from 'react/jsx-runtime';
-import './cloudinary-3487906c.esm.js';
+import './cloudinary-921aa922.esm.js';
 import 'next/package.json';
 
 const CldImage = /*#__PURE__*/forwardRef(function CldImage(props, ref) {

package/dist/CldUploadButton-196b419b.esm.js

@@ -1,6 +1,6 @@
 'use client';
 import 'react';
-import CldUploadWidget from './CldUploadWidget-17958387.esm.js';
+import CldUploadWidget from './CldUploadWidget-7ea51225.esm.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
 
 const CldUploadButton = ({

package/dist/CldUploadButton-db9b095b.cjs.js

@@ -4,7 +4,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('react');
-var CldUploadWidget = require('./CldUploadWidget-91685b20.cjs.js');
+var CldUploadWidget = require('./CldUploadWidget-1d4a6e0e.cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/dist/{CldUploadWidget-91685b20.cjs.js → CldUploadWidget-1d4a6e0e.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-8a433217.cjs.js');
+var cloudinary = require('./cloudinary-60840067.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,6 +27,16 @@ 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,
@@ -37,11 +48,13 @@ const CldUploadWidget = ({
   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
@@ -89,7 +102,7 @@ const CldUploadWidget = ({
 
   // Handle result states and callbacks
 
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (typeof results === 'undefined') return;
     const isSuccess = results.event === 'success';
     if (isSuccess && typeof onUpload === 'function') {
@@ -106,6 +119,7 @@ const CldUploadWidget = ({
    */
 
   function handleOnLoad() {
+    if (!isMounted.current) return;
     setIsScriptLoading(false);
     if (!cloudinary$1.current) {
       cloudinary$1.current = window.cloudinary;
@@ -115,13 +129,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 +153,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 +220,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/{CldUploadWidget-17958387.esm.js → CldUploadWidget-7ea51225.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-3487906c.esm.js';
+import { g as getCloudinaryConfig } from './cloudinary-921aa922.esm.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import 'next/package.json';
 
@@ -18,6 +18,16 @@ 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,
@@ -29,8 +39,10 @@ const CldUploadWidget = ({
   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);
@@ -98,6 +110,7 @@ const CldUploadWidget = ({
    */
 
   function handleOnLoad() {
+    if (!isMounted.current) return;
     setIsScriptLoading(false);
     if (!cloudinary.current) {
       cloudinary.current = window.cloudinary;
@@ -107,13 +120,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 +144,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 +211,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/{CldVideoPlayer-4b47ff9b.esm.js → CldVideoPlayer-5e118d70.esm.js}

@@ -1,18 +1,19 @@
 'use client';
-import { useId, useRef, useEffect } from 'react';
+import { useId, useState, useRef, useEffect } from 'react';
 import Script from 'next/script';
 import Head from 'next/head';
 import { getVideoPlayerOptions } from '@cloudinary-util/url-loader';
-import { g as getCloudinaryConfig } from './cloudinary-3487906c.esm.js';
+import { g as getCloudinaryConfig } from './cloudinary-921aa922.esm.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import 'next/package.json';
 
 let playerInstances = [];
-const PLAYER_VERSION = '1.11.1';
+const PLAYER_VERSION = '4.1.2';
 const CldVideoPlayer = props => {
   const {
     className,
     config,
+    disableRemotePlayback,
     height,
     id,
     onDataLoad,
@@ -24,6 +25,8 @@ const CldVideoPlayer = props => {
     width
   } = props;
   const uniqueId = useId();
+  const [isScriptLoaded, setIsScriptLoaded] = useState(false);
+  const [playerInitialized, setPlayerInitialized] = useState(false);
   const cloudinaryConfig = getCloudinaryConfig(config);
   const playerOptions = getVideoPlayerOptions(props, cloudinaryConfig);
   const {
@@ -36,26 +39,16 @@ const CldVideoPlayer = props => {
   // Setup the refs and allow for the caller to pass through their
   // own ref instance
 
-  const cloudinaryRef = useRef();
-  const defaultVideoRef = useRef();
+  const cloudinaryRef = useRef(undefined);
+  const defaultVideoRef = useRef(null);
   const videoRef = props.videoRef || defaultVideoRef;
-  const defaultPlayerRef = useRef();
+  const defaultPlayerRef = useRef(null);
   const playerRef = props.playerRef || defaultPlayerRef;
   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,
@@ -78,28 +71,73 @@ 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 = () => {
+    if (playerRef.current?.videojs?.cloudinary) {
+      playerRef.current.videojs.cloudinary.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 = () => {
+    if (typeof window !== 'undefined' && 'cloudinary' in window && videoRef.current && !playerInitialized) {
       cloudinaryRef.current = window.cloudinary;
+
+      // dispose any existing player instance first to prevent conflicts
+      if (playerRef.current) {
+        disposePlayer();
+      }
       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();
+    }
   }
+
+  // effect to handle component mounting and cleanup
   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
+  useEffect(() => {
+    if (isScriptLoaded && !playerInitialized && typeof window !== 'undefined' && 'cloudinary' in window) {
+      initializePlayer();
+    }
+  }, [isScriptLoaded, playerInitialized]);
+
   /**
    *getPlayerRefs
    */
@@ -118,15 +156,15 @@ const CldVideoPlayer = props => {
       })
     }), /*#__PURE__*/jsxs("div", {
       style: {
-        width: '100%',
-        aspectRatio: `${width} / ${height}`
+        width: '100%'
       },
       children: [/*#__PURE__*/jsx("video", {
         ref: videoRef,
         id: playerId,
         className: playerClassName,
         width: width,
-        height: height
+        height: height,
+        disableRemotePlayback: disableRemotePlayback
       }), /*#__PURE__*/jsx(Script, {
         id: `cloudinary-videoplayer-${playerId}`,
         src: `https://unpkg.com/cloudinary-video-player@${PLAYER_VERSION}/dist/cld-video-player.min.js`,

package/dist/{CldVideoPlayer-f03be2a8.cjs.js → CldVideoPlayer-f4e9d781.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-8a433217.cjs.js');
+var cloudinary = require('./cloudinary-60840067.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,16 @@ 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;
   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 +80,73 @@ 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 = () => {
+    if (playerRef.current?.videojs?.cloudinary) {
+      playerRef.current.videojs.cloudinary.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 = () => {
+    if (typeof window !== 'undefined' && 'cloudinary' in window && videoRef.current && !playerInitialized) {
       cloudinaryRef.current = window.cloudinary;
+
+      // dispose any existing player instance first to prevent conflicts
+      if (playerRef.current) {
+        disposePlayer();
+      }
       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,15 +165,15 @@ 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`,