next-cloudinary 6.13.0 → 7.0.0-beta.2

package/dist/CldUploadWidget-d1442bef.esm.js

@@ -0,0 +1,207 @@
+'use client';
+import { 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-50fd58f7.esm.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import 'next/package.json';
+
+/**
+ * triggerOnIdle
+ * @see MDN Polyfill https://github.com/behnammodi/polyfill/blob/master/window.polyfill.js#L7-L24
+ */
+
+function triggerOnIdle(callback) {
+  if (typeof window !== undefined && 'requestIdleCallback' in window) {
+    return requestIdleCallback(callback);
+  }
+  return setTimeout(() => callback(), 1);
+}
+
+const CldUploadWidget = ({
+  children,
+  config,
+  onError,
+  onOpen,
+  onUpload,
+  options,
+  signatureEndpoint,
+  uploadPreset,
+  ...props
+}) => {
+  const cloudinary = useRef();
+  const widget = useRef();
+  const [error, setError] = useState(undefined);
+  const [results, setResults] = useState(undefined);
+  const [isScriptLoading, setIsScriptLoading] = 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
+  // either on page load or during the upload process. Read more about signed uploads at:
+  // https://cloudinary.com/documentation/upload_widget#signed_uploads
+
+  const cloudinaryConfig = getCloudinaryConfig(config);
+  const uploadSignature = signatureEndpoint && generateSignatureCallback({
+    signatureEndpoint: String(signatureEndpoint),
+    fetch
+  });
+  const uploadOptions = getUploadWidgetOptions({
+    uploadPreset: uploadPreset || process.env.NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET,
+    uploadSignature,
+    ...options
+  }, cloudinaryConfig);
+  const resultsCallback = generateUploadWidgetResultCallback({
+    onError: uploadError => {
+      setError(uploadError);
+      if (typeof onError === 'function') {
+        onError(uploadError, {
+          widget: widget.current,
+          ...instanceMethods
+        });
+      }
+    },
+    onResult: uploadResult => {
+      if (typeof uploadResult?.event !== 'string') return;
+      setResults(uploadResult);
+      const widgetEvent = UPLOAD_WIDGET_EVENTS[uploadResult.event];
+      if (typeof widgetEvent === 'string' && typeof props[widgetEvent] === 'function') {
+        const callback = props[widgetEvent];
+        callback(uploadResult, {
+          widget: widget.current,
+          ...instanceMethods
+        });
+      }
+      const widgetEventAction = `${widgetEvent}Action`;
+      if (widgetEventAction && typeof props[widgetEventAction] === 'function') {
+        const action = props[widgetEventAction];
+        action(uploadResult);
+      }
+    }
+  });
+
+  // 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_ENVIRONMENT === '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() {
+    setIsScriptLoading(false);
+    if (!cloudinary.current) {
+      cloudinary.current = window.cloudinary;
+    }
+
+    // To help improve load time of the widget on first instance, use requestIdleCallback
+    // to trigger widget creation. Optional.
+
+    triggerOnIdle(() => {
+      if (!widget.current) {
+        widget.current = createWidget();
+      }
+    });
+  }
+  useEffect(() => {
+    return () => {
+      widget.current?.destroy();
+      widget.current = undefined;
+    };
+  }, []);
+
+  /**
+   * Instance Methods
+   * Gives the ability to interface directly with the Upload Widget instance methods like open and close
+   * https://cloudinary.com/documentation/upload_widget_reference#instance_methods
+   */
+
+  function invokeInstanceMethod(method, options = []) {
+    if (!widget.current) {
+      widget.current = createWidget();
+    }
+    if (typeof widget?.current[method] === "function") {
+      return widget.current[method](...options);
+    }
+  }
+  function close(options) {
+    invokeInstanceMethod('close', [options]);
+  }
+  function destroy(options) {
+    return invokeInstanceMethod('destroy', [options]);
+  }
+  function hide() {
+    invokeInstanceMethod('hide');
+  }
+  function isDestroyed() {
+    return invokeInstanceMethod('isDestroyed');
+  }
+  function isMinimized() {
+    return invokeInstanceMethod('isMinimized');
+  }
+  function isShowing() {
+    return invokeInstanceMethod('isShowing');
+  }
+  function minimize() {
+    invokeInstanceMethod('minimize');
+  }
+  function open(widgetSource, options) {
+    invokeInstanceMethod('open', [widgetSource, options]);
+    if (typeof onOpen === 'function') {
+      onOpen(widget.current);
+    }
+  }
+  function show() {
+    invokeInstanceMethod('show');
+  }
+  function update() {
+    invokeInstanceMethod('update');
+  }
+  const instanceMethods = {
+    close,
+    destroy,
+    hide,
+    isDestroyed,
+    isMinimized,
+    isShowing,
+    minimize,
+    open,
+    show,
+    update
+  };
+
+  /**
+   * createWidget
+   * @description Creates a new instance of the Cloudinary widget and stores in a ref
+   */
+
+  function createWidget() {
+    return cloudinary.current?.createUploadWidget(uploadOptions, resultsCallback);
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [typeof children === 'function' && children({
+      cloudinary: cloudinary.current,
+      widget: widget.current,
+      results,
+      error,
+      isLoading: isScriptLoading,
+      ...instanceMethods
+    }), /*#__PURE__*/jsx(Script, {
+      id: `cloudinary-uploadwidget-${Math.floor(Math.random() * 100)}`,
+      src: "https://upload-widget.cloudinary.com/global/all.js",
+      onLoad: handleOnLoad,
+      onError: e => console.error(`Failed to load Cloudinary Upload Widget: ${e.message}`)
+    })]
+  });
+};
+
+export { CldUploadWidget as default };

package/dist/CldVideoPlayer-25af8fc2.cjs.js

@@ -0,0 +1,149 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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-c07e74d7.cjs.js');
+var jsxRuntime = require('react/jsx-runtime');
+require('next/package.json');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var Script__default = /*#__PURE__*/_interopDefault(Script);
+var Head__default = /*#__PURE__*/_interopDefault(Head);
+
+let playerInstances = [];
+const PLAYER_VERSION = '1.11.1';
+const CldVideoPlayer = props => {
+  const {
+    className,
+    config,
+    height,
+    id,
+    onDataLoad,
+    onError,
+    onMetadataLoad,
+    onPause,
+    onPlay,
+    onEnded,
+    width
+  } = props;
+  const cloudinaryConfig = cloudinary.getCloudinaryConfig(config);
+  const playerOptions = urlLoader.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');
+  }
+
+  // Setup the refs and allow for the caller to pass through their
+  // own ref instance
+
+  const cloudinaryRef = react.useRef();
+  const defaultVideoRef = react.useRef();
+  const videoRef = props.videoRef || defaultVideoRef;
+  const defaultPlayerRef = react.useRef();
+  const playerRef = props.playerRef || defaultPlayerRef;
+  const playerId = id || `player-${publicId.replace('/', '-')}`;
+  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,
+    loadedmetadata: onMetadataLoad,
+    pause: onPause,
+    play: onPlay,
+    ended: onEnded
+  };
+
+  /**
+   * handleEvent
+   * @description Event handler for all player events
+   */
+
+  function handleEvent(event) {
+    const activeEvent = events[event.type];
+    if (typeof activeEvent === 'function') {
+      activeEvent(getPlayerRefs());
+    }
+  }
+
+  /**
+   * handleOnLoad
+   * @description Stores the Cloudinary window instance to a ref when the widget script loads
+   */
+
+  function handleOnLoad() {
+    if ('cloudinary' in window) {
+      cloudinaryRef.current = window.cloudinary;
+      playerRef.current = cloudinaryRef.current.videoPlayer(videoRef.current, playerOptions);
+      Object.keys(events).forEach(key => {
+        if (typeof events[key] === 'function') {
+          playerRef.current?.on(key, handleEvent);
+        }
+      });
+    }
+  }
+  react.useEffect(() => {
+    return () => {
+      //@ts-ignore
+      playerRef.current?.videojs.cloudinary.dispose();
+      playerInstances = playerInstances.filter(id => id !== playerId);
+    };
+  }, []);
+
+  /**
+   *getPlayerRefs
+   */
+
+  function getPlayerRefs() {
+    return {
+      player: playerRef.current,
+      video: videoRef.current
+    };
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Head__default["default"], {
+      children: /*#__PURE__*/jsxRuntime.jsx("link", {
+        href: `https://unpkg.com/cloudinary-video-player@${PLAYER_VERSION}/dist/cld-video-player.min.css`,
+        rel: "stylesheet"
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      style: {
+        width: '100%',
+        aspectRatio: `${width} / ${height}`
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx("video", {
+        ref: videoRef,
+        id: playerId,
+        className: playerClassName,
+        width: width,
+        height: height
+      }), /*#__PURE__*/jsxRuntime.jsx(Script__default["default"], {
+        id: `cloudinary-videoplayer-${playerId}-${Math.floor(Math.random() * 100)}`,
+        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}`)
+      })]
+    })]
+  });
+};
+
+exports["default"] = CldVideoPlayer;

package/dist/CldVideoPlayer-d3572d86.esm.js

@@ -0,0 +1,140 @@
+'use client';
+import { 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-50fd58f7.esm.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import 'next/package.json';
+
+let playerInstances = [];
+const PLAYER_VERSION = '1.11.1';
+const CldVideoPlayer = props => {
+  const {
+    className,
+    config,
+    height,
+    id,
+    onDataLoad,
+    onError,
+    onMetadataLoad,
+    onPause,
+    onPlay,
+    onEnded,
+    width
+  } = props;
+  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');
+  }
+
+  // Setup the refs and allow for the caller to pass through their
+  // own ref instance
+
+  const cloudinaryRef = useRef();
+  const defaultVideoRef = useRef();
+  const videoRef = props.videoRef || defaultVideoRef;
+  const defaultPlayerRef = useRef();
+  const playerRef = props.playerRef || defaultPlayerRef;
+  const playerId = id || `player-${publicId.replace('/', '-')}`;
+  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,
+    loadedmetadata: onMetadataLoad,
+    pause: onPause,
+    play: onPlay,
+    ended: onEnded
+  };
+
+  /**
+   * handleEvent
+   * @description Event handler for all player events
+   */
+
+  function handleEvent(event) {
+    const activeEvent = events[event.type];
+    if (typeof activeEvent === 'function') {
+      activeEvent(getPlayerRefs());
+    }
+  }
+
+  /**
+   * handleOnLoad
+   * @description Stores the Cloudinary window instance to a ref when the widget script loads
+   */
+
+  function handleOnLoad() {
+    if ('cloudinary' in window) {
+      cloudinaryRef.current = window.cloudinary;
+      playerRef.current = cloudinaryRef.current.videoPlayer(videoRef.current, playerOptions);
+      Object.keys(events).forEach(key => {
+        if (typeof events[key] === 'function') {
+          playerRef.current?.on(key, handleEvent);
+        }
+      });
+    }
+  }
+  useEffect(() => {
+    return () => {
+      //@ts-ignore
+      playerRef.current?.videojs.cloudinary.dispose();
+      playerInstances = playerInstances.filter(id => id !== playerId);
+    };
+  }, []);
+
+  /**
+   *getPlayerRefs
+   */
+
+  function getPlayerRefs() {
+    return {
+      player: playerRef.current,
+      video: videoRef.current
+    };
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Head, {
+      children: /*#__PURE__*/jsx("link", {
+        href: `https://unpkg.com/cloudinary-video-player@${PLAYER_VERSION}/dist/cld-video-player.min.css`,
+        rel: "stylesheet"
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      style: {
+        width: '100%',
+        aspectRatio: `${width} / ${height}`
+      },
+      children: [/*#__PURE__*/jsx("video", {
+        ref: videoRef,
+        id: playerId,
+        className: playerClassName,
+        width: width,
+        height: height
+      }), /*#__PURE__*/jsx(Script, {
+        id: `cloudinary-videoplayer-${playerId}-${Math.floor(Math.random() * 100)}`,
+        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}`)
+      })]
+    })]
+  });
+};
+
+export { CldVideoPlayer as default };

package/dist/cloudinary-50fd58f7.esm.js

@@ -0,0 +1,134 @@
+import nextPkg from 'next/package.json';
+
+var pkg = {
+	name: "next-cloudinary",
+	version: "7.0.0-beta.2",
+	license: "MIT",
+	main: "dist/next-cloudinary.cjs.js",
+	module: "dist/next-cloudinary.esm.js",
+	exports: {
+		".": {
+			types: {
+				"import": "./dist/next-cloudinary.cjs.mjs",
+				"default": "./dist/next-cloudinary.cjs.js"
+			},
+			module: "./dist/next-cloudinary.esm.js",
+			"import": "./dist/next-cloudinary.cjs.mjs",
+			"default": "./dist/next-cloudinary.cjs.js"
+		},
+		"./package.json": "./package.json",
+		"./cld-video-player.css": "./dist/cld-video-player.css",
+		"./dist/cld-video-player.css": "./dist/cld-video-player.css",
+		"./cloudinary_icon_for_black_bg.svg": "./dist/cloudinary_icon_for_black_bg.svg",
+		"./dist/cloudinary_icon_for_black_bg.svg": "./dist/cloudinary_icon_for_black_bg.svg",
+		"./cloudinary_icon_for_white_bg.svg": "./dist/cloudinary_icon_for_white_bg.svg",
+		"./dist/cloudinary_icon_for_white_bg.svg": "./dist/cloudinary_icon_for_white_bg.svg"
+	},
+	types: "./dist/next-cloudinary.cjs.d.ts",
+	files: [
+		"dist"
+	],
+	scripts: {
+		build: "preconstruct build && tsx scripts/copy-assets.ts",
+		dev: "preconstruct watch",
+		prepublishOnly: "cp ../README.md . && cp ../LICENSE . && pnpm build",
+		postpublish: "rm ./README.md && rm ./LICENSE",
+		test: "vitest run",
+		"test:app": "NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=\"test\" pnpm build && cd tests/nextjs-app && pnpm build",
+		"test:watch": "vitest"
+	},
+	dependencies: {
+		"@cloudinary-util/types": "1.5.8",
+		"@cloudinary-util/url-loader": "5.10.3",
+		"@cloudinary-util/util": "^3.3.2"
+	},
+	devDependencies: {
+		"@babel/core": "^7.25.2",
+		"@babel/preset-env": "^7.25.4",
+		"@babel/preset-react": "^7.24.7",
+		"@babel/preset-typescript": "^7.24.7",
+		"@tsconfig/recommended": "^1.0.7",
+		"@types/node": "^22.0.2",
+		"@types/react": "^18.3.3",
+		"@types/react-dom": "^18.3.0",
+		dotenv: "^16.4.5",
+		mkdirp: "^3.0.1",
+		tsx: "^4.19.1",
+		typescript: "^5.5.4",
+		vitest: "^2.0.5"
+	},
+	peerDependencies: {
+		next: "^12 || ^13 || ^14 || >=15.0.0-rc",
+		react: "^17 || ^18 || >=19.0.0-beta"
+	},
+	preconstruct: {
+		exports: {
+			importConditionDefaultExport: "default",
+			extra: {
+				"./cld-video-player.css": "./dist/cld-video-player.css",
+				"./dist/cld-video-player.css": "./dist/cld-video-player.css",
+				"./cloudinary_icon_for_black_bg.svg": "./dist/cloudinary_icon_for_black_bg.svg",
+				"./dist/cloudinary_icon_for_black_bg.svg": "./dist/cloudinary_icon_for_black_bg.svg",
+				"./cloudinary_icon_for_white_bg.svg": "./dist/cloudinary_icon_for_white_bg.svg",
+				"./dist/cloudinary_icon_for_white_bg.svg": "./dist/cloudinary_icon_for_white_bg.svg"
+			}
+		},
+		___experimentalFlags_WILL_CHANGE_IN_PATCH: {
+			importsConditions: true
+		}
+	}
+};
+
+const NEXT_CLOUDINARY_ANALYTICS_PRODUCT_ID = 'A';
+const NEXT_CLOUDINARY_ANALYTICS_ID = 'V';
+const NEXT_VERSION = normalizeVersion(nextPkg.version);
+const NEXT_CLOUDINARY_VERSION = normalizeVersion(pkg.version);
+function normalizeVersion(version) {
+  let normalized = version;
+  if (normalized.includes('-')) {
+    normalized = normalized.split('-')[0];
+  }
+  return normalized;
+}
+
+/**
+ * getCloudinaryConfig
+ */
+
+function getCloudinaryConfig(config) {
+  const cloudName = config?.cloud?.cloudName ?? process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME;
+  if (!cloudName) {
+    throw new Error('A Cloudinary Cloud name is required, please make sure NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME is set and configured in your environment.');
+  }
+  const apiKey = config?.cloud?.apiKey ?? process.env.NEXT_PUBLIC_CLOUDINARY_API_KEY;
+  const secureDistribution = config?.url?.secureDistribution ?? process.env.NEXT_PUBLIC_CLOUDINARY_SECURE_DISTRIBUTION;
+  const privateCdn = config?.url?.privateCdn ?? process.env.NEXT_PUBLIC_CLOUDINARY_PRIVATE_CDN;
+  return Object.assign({
+    cloud: {
+      ...config?.cloud,
+      apiKey,
+      cloudName
+    },
+    url: {
+      ...config?.url,
+      secureDistribution,
+      privateCdn
+    }
+  }, config);
+}
+
+/**
+ * getCloudinaryAnalytics
+ */
+
+function getCloudinaryAnalytics(analytics) {
+  return Object.assign({
+    product: NEXT_CLOUDINARY_ANALYTICS_PRODUCT_ID,
+    sdkCode: NEXT_CLOUDINARY_ANALYTICS_ID,
+    sdkSemver: NEXT_CLOUDINARY_VERSION,
+    techVersion: NEXT_VERSION,
+    feature: ''
+  }, analytics);
+}
+
+export { getCloudinaryAnalytics as a, getCloudinaryConfig as g };