cloudinary-community · colbyfayock · Jan 24, 2024 · Jan 19, 2024 · Jan 19, 2024 · Jan 19, 2024
diff --git a/next-cloudinary/package.json b/next-cloudinary/package.json
@@ -15,6 +15,7 @@
     "test:app": "NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=\"test\" pnpm build && cd tests/nextjs-app && pnpm build"
   },
   "dependencies": {
+    "@cloudinary-util/types": "1.0.0",
     "@cloudinary-util/url-loader": "4.2.0",
     "@cloudinary-util/util": "^2.3.0"
   },

diff --git a/next-cloudinary/src/components/CldUploadWidget/CldUploadWidget.tsx b/next-cloudinary/src/components/CldUploadWidget/CldUploadWidget.tsx
@@ -1,21 +1,24 @@
 import React, { useState, useEffect, useRef } from 'react';
 import Script from 'next/script';
+import {
+  CloudinaryUploadWidgetResults,
+  CloudinaryUploadWidgetInstanceMethods,
+  CloudinaryUploadWidgetInstanceMethodCloseOptions,
+  CloudinaryUploadWidgetInstanceMethodDestroyOptions,
+  CloudinaryUploadWidgetInstanceMethodOpenOptions,
+  CloudinaryUploadWidgetSources,
+  CloudinaryUploadWidgetError
+} from '@cloudinary-util/types';
 
 import { triggerOnIdle } from '../../lib/util';
 
 import {
   CldUploadEventCallback,
-  CldUploadWidgetCloseInstanceMethodOptions,
   CldUploadWidgetCloudinaryInstance,
-  CldUploadWidgetDestroyInstanceMethodOptions,
-  CldUploadWidgetError,
-  CldUploadWidgetInstanceMethods,
-  CldUploadWidgetOpenInstanceMethodOptions,
-  CldUploadWidgetOpenWidgetSources,
   CldUploadWidgetProps,
-  CldUploadWidgetResults,
   CldUploadWidgetWidgetInstance,
 } from './CldUploadWidget.types';
+
 import {checkForCloudName} from "../../lib/cloudinary";
 
 const WIDGET_WATCHED_EVENTS = [
@@ -58,8 +61,8 @@ const CldUploadWidget = ({
 
   const signed = !!signatureEndpoint;
 
-  const [error, setError] = useState<CldUploadWidgetError | undefined>(undefined);
-  const [results, setResults] = useState<CldUploadWidgetResults | undefined>(undefined);
+  const [error, setError] = useState<CloudinaryUploadWidgetError | undefined>(undefined);
+  const [results, setResults] = useState<CloudinaryUploadWidgetResults | undefined>(undefined);
   const [isScriptLoading, setIsScriptLoading] = useState(true);
 
   // When creating a signed upload, you need to provide both your Cloudinary API Key
@@ -167,12 +170,12 @@ const CldUploadWidget = ({
    */
 
   function invokeInstanceMethod<
-    TMethod extends keyof CldUploadWidgetInstanceMethods
+    TMethod extends keyof CloudinaryUploadWidgetInstanceMethods
   >(
     method: TMethod,
     options: Parameters<
-      CldUploadWidgetInstanceMethods[TMethod]
-    > = [] as Parameters<CldUploadWidgetInstanceMethods[TMethod]>
+      CloudinaryUploadWidgetInstanceMethods[TMethod]
+    > = [] as Parameters<CloudinaryUploadWidgetInstanceMethods[TMethod]>
   ) {
     if (!widget.current) {
       widget.current = createWidget();
@@ -183,11 +186,11 @@ const CldUploadWidget = ({
     }
   }
 
-  function close(options?: CldUploadWidgetCloseInstanceMethodOptions) {
+  function close(options?: CloudinaryUploadWidgetInstanceMethodCloseOptions) {
     invokeInstanceMethod('close', [options]);
   }
 
-  function destroy(options?: CldUploadWidgetDestroyInstanceMethodOptions) {
+  function destroy(options?: CloudinaryUploadWidgetInstanceMethodDestroyOptions) {
     return invokeInstanceMethod('destroy', [options]);
   }
 
@@ -211,7 +214,7 @@ const CldUploadWidget = ({
     invokeInstanceMethod('minimize');
   }
 
-  function open(widgetSource?: CldUploadWidgetOpenWidgetSources, options?: CldUploadWidgetOpenInstanceMethodOptions) {
+  function open(widgetSource?: CloudinaryUploadWidgetSources, options?: CloudinaryUploadWidgetInstanceMethodOpenOptions) {
     invokeInstanceMethod('open', [widgetSource, options]);
 
     if ( typeof onOpen === 'function' ) {
@@ -227,7 +230,7 @@ const CldUploadWidget = ({
     invokeInstanceMethod('update');
   }
 
-  const instanceMethods: CldUploadWidgetInstanceMethods = {
+  const instanceMethods: CloudinaryUploadWidgetInstanceMethods = {
     close,
     destroy,
     hide,
@@ -246,7 +249,7 @@ const CldUploadWidget = ({
    */
 
   function createWidget() {
-    return cloudinary.current?.createUploadWidget(uploadOptions, (uploadError: CldUploadWidgetError, uploadResult: CldUploadWidgetResults) => {
+    return cloudinary.current?.createUploadWidget(uploadOptions, (uploadError: CloudinaryUploadWidgetError, uploadResult: CloudinaryUploadWidgetResults) => {
       if ( uploadError && uploadError !== null ) {
         setError(uploadError);
       }

diff --git a/next-cloudinary/src/components/CldUploadWidget/CldUploadWidget.types.ts b/next-cloudinary/src/components/CldUploadWidget/CldUploadWidget.types.ts
@@ -1,100 +1,13 @@
-// TODO: widget needs to be typed
+import {
+  CloudinaryUploadWidgetOptions,
+  CloudinaryUploadWidgetResults,
+  CloudinaryUploadWidgetInstanceMethods,
+  CloudinaryUploadWidgetError
+} from '@cloudinary-util/types';
 
 export type CldUploadWidgetCloudinaryInstance = any;
 export type CldUploadWidgetWidgetInstance = any;
 
-type CustomURL = `https://${string}.${string}`;
-
-export interface CldUploadWidgetResults {
-  event?: string;
-  info?: string | CldUploadWidgetInfo;
-}
-
-export interface CldUploadWidgetInfo {
-  access_mode: 'public' | 'authenticated';
-  api_key: string;
-  asset_id: string;
-  batchId: string;
-  bytes: number;
-  context: Record<string, Record<string, string>>;
-  created_at: string;
-  etag: string;
-  folder: string;
-  format: string;
-  height: number;
-  hook_execution: Record<string, unknown>;
-  id: string;
-  info: Record<string, unknown>;
-  original_filename: string;
-  pages: number;
-  path: string;
-  placeholder: boolean;
-  public_id: string;
-  resource_type: 'image' | 'raw' | 'video' | 'auto';
-  secure_url: string;
-  signature: string;
-  tags: string[];
-  thumbnail_url: string;
-  type: 'upload' | 'private' | 'authenticated';
-  url: string;
-  version: number;
-  width: number;
-  [key: string]: unknown;
-}
-
-export type CldUploadWidgetDestroyInstanceMethodOptions = {
-  removeThumbnails: boolean;
-}
-
-export type CldUploadWidgetCloseInstanceMethodOptions = {
-  quiet: boolean;
-}
-
-export type CldUploadWidgetOpenInstanceMethodOptions = {
-  files: CustomURL[];
-}
-
-export type CldUploadWidgetOpenWidgetSources =
-  | 'local'
-  | 'url'
-  | 'camera'
-  | 'image_search'
-  | 'google_drive'
-  | 'dropbox'
-  | 'facebook'
-  | 'instagram'
-  | 'shutterstock'
-  | 'getty'
-  | 'istock'
-  | 'unsplash'
-  | null;
-
-type CldUploadWidgetUpdateInstanceMethodOptions = Omit<
-  CldUploadWidgetPropsOptions,
-  "secure" | "uploadSignature" | "getTags" | "preBatch" | "inlineContainer" | "fieldName"
-> & {
-  cloudName: string;
-  uploadPreset: string;
-}
-
-export interface CldUploadWidgetInstanceMethods {
-  close: (options?: CldUploadWidgetCloseInstanceMethodOptions) => void;
-  destroy: (options?: CldUploadWidgetDestroyInstanceMethodOptions) => Promise<void>;
-  hide: () => void;
-  isDestroyed: () => boolean;
-  isMinimized: () => boolean;
-  isShowing: () => boolean;
-  minimize: () => void;
-  open: (widgetSource?: CldUploadWidgetOpenWidgetSources, options?: CldUploadWidgetOpenInstanceMethodOptions) => void;
-  show: () => void;
-  update: (options: CldUploadWidgetUpdateInstanceMethodOptions) => void;
-}
-
-export type CldUploadWidgetError = {
-  status: string;
-  statusText: string;
-} | string | null;
-
 export interface CldUploadWidgetProps {
   children?: ({ cloudinary, widget, open, results, error }: CldUploadWidgetPropsChildren) => JSX.Element;
   onError?: CldUploadEventCallbackError;
@@ -113,7 +26,7 @@ export interface CldUploadWidgetProps {
   onSuccess?: CldUploadEventCallback;
   onTags?: CldUploadEventCallback;
   onUploadAdded?: CldUploadEventCallback;
-  options?: CldUploadWidgetPropsOptions;
+  options?: CloudinaryUploadWidgetOptions;
   signatureEndpoint?: URL | RequestInfo;
   uploadPreset?: string;
 }
@@ -122,124 +35,16 @@ export type CldUploadWidgetPropsChildren = {
   cloudinary: CldUploadWidgetCloudinaryInstance;
   widget: CldUploadWidgetWidgetInstance;
 
-  error?: CldUploadWidgetError;
+  error?: CloudinaryUploadWidgetError;
   isLoading?: boolean;
-  results?: CldUploadWidgetResults;
-} & CldUploadWidgetInstanceMethods;
-
-// Parameters sourced from:
-// https://cloudinary.com/documentation/upload_widget_reference#parameters
-
-export interface CldUploadWidgetPropsOptions {
-  // Widget
-
-  encryption?: {
-    key: string;
-    iv: string;
-  }
-  defaultSource?: string;
-  maxFiles?: number;
-  multiple?: boolean;
-  sources?: Array<
-    "camera"
-    | "dropbox"
-    | "facebook"
-    | "gettyimages"
-    | "google_drive"
-    | "image_search"
-    | "instagram"
-    | "istock"
-    | "local"
-    | "shutterstock"
-    | "unsplash"
-    | "url"
-  >;
-
-  // Cropping
-
-  cropping?: boolean;
-  croppingAspectRatio?: number;
-  croppingCoordinatesMode?: string;
-  croppingDefaultSelectionRatio?: number;
-  croppingShowBackButton?: boolean;
-  croppingShowDimensions?: boolean;
-  showSkipCropButton?: boolean;
-
-  // Sources
-
-  dropboxAppKey?: string;
-  facebookAppId?: string;
-  googleApiKey?: string;
-  googleDriveClientId?: string;
-  instagramClientId?: string;
-  searchByRights?: boolean;
-  searchBySites?: Array<string>;
-
-  // Upload
-
-  context?: object;
-  folder?: string;
-  publicId?: string;
-  resourceType?: string;
-  tags?: Array<string>;
-  uploadSignature?: string | Function;
-  uploadSignatureTimestamp?: number;
-
-  // Client Side
-
-  clientAllowedFormats?: Array<string>;
-  croppingValidateDimensions?: boolean;
-  maxChunkSize?: number;
-  maxImageFileSize?: number;
-  maxImageHeight?: number;
-  maxImageWidth?: number;
-  maxFileSize?: number;
-  maxRawFileSize?: number;
-  maxVideoFileSize?: number;
-  minImageHeight?: number;
-  minImageWidth?: number;
-  validateMaxWidthHeight?: boolean;
-
-  // Containing Page
-
-  fieldName?: string;
-  form?: string;
-  thumbnails?: string;
-  thumbnailTransformation?: string | Array<object>;
-
-  // Customization
-
-  buttonCaption?: string;
-  buttonClass?: string;
-  text?: object;
-  theme?: string;
-  styles?: object;
-
-  // Advanced
-
-  autoMinimize?: boolean;
-  getTags?: Function;
-  getUploadPresets?: Function;
-  inlineContainer?: any; // string or DOM element
-  language?: string;
-  preBatch?: Function;
-  prepareUploadParams?: Function;
-  queueViewPosition?: string;
-  showAdvancedOptions?: boolean;
-  showCompletedButton?: boolean;
-  showInsecurePreview?: boolean;
-  showPoweredBy?: boolean;
-  showUploadMoreButton?: boolean;
-  singleUploadAutoClose?: boolean;
-  detection?: string;
-  on_success?: string;
-}
+  results?: CloudinaryUploadWidgetResults;
+} & CloudinaryUploadWidgetInstanceMethods;
 
-export type CldUploadEventCallback = (results: CldUploadWidgetResults, widget: CldUploadEventCallbackWidget) => void;
-export type CldUploadEventCallbackNoOptions = (results: CldUploadWidgetResults, widget: CldUploadWidgetWidgetInstance) => void;
+export type CldUploadEventCallback = (results: CloudinaryUploadWidgetResults, widget: CldUploadEventCallbackWidget) => void;
+export type CldUploadEventCallbackNoOptions = (results: CloudinaryUploadWidgetResults, widget: CldUploadWidgetWidgetInstance) => void;
 export type CldUploadEventCallbackWidgetOnly = (widget: CldUploadWidgetWidgetInstance) => void;
-export type CldUploadEventCallbackError = (error: CldUploadWidgetError, widget: CldUploadWidgetWidgetInstance) => void;
+export type CldUploadEventCallbackError = (error: CloudinaryUploadWidgetError, widget: CldUploadWidgetWidgetInstance) => void;
 
 export type CldUploadEventCallbackWidget = {
   widget: CldUploadWidgetWidgetInstance;
-} & CldUploadWidgetInstanceMethods;
+} & CloudinaryUploadWidgetInstanceMethods;
diff --git a/next-cloudinary/src/components/CldUploadWidget/index.ts b/next-cloudinary/src/components/CldUploadWidget/index.ts
@@ -1,8 +1,2 @@
 export { default } from './CldUploadWidget';
-export type {
-  CldUploadWidgetInfo,
-  CldUploadWidgetProps,
-  CldUploadWidgetPropsChildren,
-  CldUploadWidgetPropsOptions,
-  CldUploadWidgetResults,
-} from './CldUploadWidget.types';
+export type { CldUploadWidgetProps, CldUploadWidgetPropsChildren } from './CldUploadWidget.types';
diff --git a/next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.tsx b/next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.tsx
@@ -2,9 +2,10 @@ import React, {useRef, MutableRefObject, useEffect} from 'react';
 import Script from 'next/script';
 import Head from 'next/head';
 import { parseUrl } from '@cloudinary-util/util';
+import { CloudinaryVideoPlayer, CloudinaryVideoPlayerOptionsLogo, CloudinaryVideoPlayerOptions, } from '@cloudinary-util/types';
 
 import { CldVideoPlayerProps } from './CldVideoPlayer.types';
-import { CloudinaryVideoPlayer, CloudinaryVideoPlayerOptions, CloudinaryVideoPlayerOptionsLogo } from '../../types/player';
+
 import { getCldImageUrl } from '../../helpers/getCldImageUrl';
 import { getCldVideoUrl } from '../../helpers/getCldVideoUrl';
 import {checkForCloudName} from "../../lib/cloudinary";