next-cloudinary 1.3.0 → 1.5.0

package/dist/next-cloudinary.modern.mjs

@@ -1,8 +1,8 @@
+import { useState, useRef } from 'react';
 import Image from 'next/image';
 import { Cloudinary } from '@cloudinary/url-gen';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import Head from 'next/head';
-import { useRef } from 'react';
 import Script from 'next/script';
 
 function _extends() {
@@ -88,87 +88,6 @@ var croppingPlugin = {
   plugin: plugin$7
 };
 
-const params = ['art', {
-  prop: 'autoBrightness',
-  effect: 'auto_brightness'
-}, {
-  prop: 'autoColor',
-  effect: 'auto_color'
-}, {
-  prop: 'autoContrast',
-  effect: 'auto_contrast'
-}, {
-  prop: 'assistColorblind',
-  effect: 'assist_colorblind'
-}, 'blackwhite', 'blur', {
-  prop: 'blurFaces',
-  effect: 'blur_faces'
-}, {
-  prop: 'blurRegion',
-  effect: 'blur_region'
-}, 'brightness', {
-  prop: 'brightnessHSB',
-  effect: 'brightness_hsb'
-}, 'cartoonify', 'colorize', 'contrast', 'distort', {
-  prop: 'fillLight',
-  effect: 'fill_light'
-}, 'gamma', {
-  prop: 'gradientFade',
-  effect: 'gradient_fade'
-}, 'grayscale', 'improve', 'negate', {
-  prop: 'oilPaint',
-  effect: 'oil_paint'
-}, 'outline', 'pixelate', {
-  prop: 'pixelateFaces',
-  effect: 'pixelate_faces'
-}, {
-  prop: 'pixelateRegion',
-  effect: 'pixelate_region'
-}, 'redeye', {
-  prop: 'replaceColor',
-  effect: 'replace_color'
-}, 'saturation', 'sepia', 'shadow', 'sharpen', 'shear', {
-  prop: 'simulateColorblind',
-  effect: 'simulate_colorblind'
-}, 'tint', {
-  prop: 'unsharpMask',
-  effect: 'unsharp_mask'
-}, 'vectorize', 'vibrance', 'vignette'];
-const props$6 = params.map(param => param.prop || param);
-function plugin$6({
-  cldImage,
-  options
-} = {}) {
-  params.forEach(key => {
-    const prop = key.prop || key;
-    const effect = key.effect || key;
-    if (options[prop] === true) {
-      cldImage.effect(`e_${effect}`);
-    } else if (typeof options[prop] === 'string') {
-      cldImage.effect(`e_${effect}:${options[prop]}`);
-    }
-  });
-}
-
-var effectsPlugin = {
-  __proto__: null,
-  props: props$6,
-  plugin: plugin$6
-};
-
-/**
- * encodeBase64
- */
-
-function encodeBase64(value) {
-  if (typeof btoa === 'function') {
-    return btoa(value);
-  }
-  if (typeof Buffer !== 'undefined') {
-    return Buffer.from(value).toString('base64');
-  }
-}
-
 // aspectRatio
 
 const primary = {
@@ -236,6 +155,212 @@ const text = {
     qualifier: false
   }
 };
+const effects = {
+  art: {
+    prefix: 'e',
+    qualifier: 'art'
+  },
+  autoBrightness: {
+    prefix: 'e',
+    qualifier: 'auto_brightness'
+  },
+  autoColor: {
+    prefix: 'e',
+    qualifier: 'auto_color'
+  },
+  autoContrast: {
+    prefix: 'e',
+    qualifier: 'auto_contrast'
+  },
+  assistColorblind: {
+    prefix: 'e',
+    qualifier: 'assist_colorblind'
+  },
+  blackwhite: {
+    prefix: 'e',
+    qualifier: 'blackwhite'
+  },
+  blur: {
+    prefix: 'e',
+    qualifier: 'blur'
+  },
+  blurFaces: {
+    prefix: 'e',
+    qualifier: 'blur_faces'
+  },
+  blurRegion: {
+    prefix: 'e',
+    qualifier: 'blur_region'
+  },
+  brightness: {
+    prefix: 'e',
+    qualifier: 'brightness'
+  },
+  brightnessHSB: {
+    prefix: 'e',
+    qualifier: 'brightness_hsb'
+  },
+  cartoonify: {
+    prefix: 'e',
+    qualifier: 'cartoonify'
+  },
+  colorize: {
+    prefix: 'e',
+    qualifier: 'colorize'
+  },
+  contrast: {
+    prefix: 'e',
+    qualifier: 'contrast'
+  },
+  distort: {
+    prefix: 'e',
+    qualifier: 'distort'
+  },
+  fillLight: {
+    prefix: 'e',
+    qualifier: 'fill_light'
+  },
+  gamma: {
+    prefix: 'e',
+    qualifier: 'gamma'
+  },
+  gradientFade: {
+    prefix: 'e',
+    qualifier: 'gradient_fade'
+  },
+  grayscale: {
+    prefix: 'e',
+    qualifier: 'grayscale'
+  },
+  improve: {
+    prefix: 'e',
+    qualifier: 'improve'
+  },
+  negate: {
+    prefix: 'e',
+    qualifier: 'negate'
+  },
+  oilPaint: {
+    prefix: 'e',
+    qualifier: 'oil_paint'
+  },
+  opacity: {
+    qualifier: 'o'
+  },
+  outline: {
+    prefix: 'e',
+    qualifier: 'outline'
+  },
+  pixelate: {
+    prefix: 'e',
+    qualifier: 'pixelate'
+  },
+  pixelateFaces: {
+    prefix: 'e',
+    qualifier: 'pixelate_faces'
+  },
+  pixelateRegion: {
+    prefix: 'e',
+    qualifier: 'pixelate_region'
+  },
+  redeye: {
+    prefix: 'e',
+    qualifier: 'redeye'
+  },
+  replaceColor: {
+    prefix: 'e',
+    qualifier: 'replace_color'
+  },
+  saturation: {
+    prefix: 'e',
+    qualifier: 'saturation'
+  },
+  sepia: {
+    prefix: 'e',
+    qualifier: 'sepia'
+  },
+  shadow: {
+    prefix: 'e',
+    qualifier: 'shadow'
+  },
+  sharpen: {
+    prefix: 'e',
+    qualifier: 'sharpen'
+  },
+  shear: {
+    prefix: 'e',
+    qualifier: 'shear'
+  },
+  simulateColorblind: {
+    prefix: 'e',
+    qualifier: 'simulate_colorblind'
+  },
+  tint: {
+    prefix: 'e',
+    qualifier: 'tint'
+  },
+  unsharpMask: {
+    prefix: 'e',
+    qualifier: 'unsharp_mask'
+  },
+  vectorize: {
+    prefix: 'e',
+    qualifier: 'vectorize'
+  },
+  vibrance: {
+    prefix: 'e',
+    qualifier: 'vibrance'
+  },
+  vignette: {
+    prefix: 'e',
+    qualifier: 'vignette'
+  }
+};
+
+const props$6 = Object.keys(effects);
+function plugin$6({
+  cldImage,
+  options
+} = {}) {
+  Object.keys(effects).forEach(key => {
+    const {
+      prefix,
+      qualifier
+    } = effects[key];
+    let transformation = '';
+    if (prefix) {
+      transformation = `${prefix}_`;
+    }
+    if (options[key] === true) {
+      cldImage.effect(`${transformation}${qualifier}`);
+    } else if (typeof options[key] === 'string') {
+      if (prefix) {
+        cldImage.effect(`${transformation}${qualifier}:${options[key]}`);
+      } else {
+        cldImage.effect(`${qualifier}_${options[key]}`);
+      }
+    }
+  });
+}
+
+var effectsPlugin = {
+  __proto__: null,
+  props: props$6,
+  plugin: plugin$6
+};
+
+/**
+ * encodeBase64
+ */
+
+function encodeBase64(value) {
+  if (typeof btoa === 'function') {
+    return btoa(value);
+  }
+  if (typeof Buffer !== 'undefined') {
+    return Buffer.from(value).toString('base64');
+  }
+}
 
 const _excluded$3 = ["publicId", "url", "position", "text", "effects"];
 const props$5 = ['text', 'overlays'];
@@ -321,14 +446,36 @@ function plugin$5({
     });
 
     // Layer effects
+    // For layer effects we allow both the standard effects to be applied as well
+    // as the primary ones like width and height as those can be used to modify
+    // the layer after it's created
 
     layerEffects.forEach(effect => {
       Object.keys(effect).forEach(key => {
-        if (!primary[key]) return;
-        const {
-          qualifier
-        } = primary[key];
-        primary$1.push(`${qualifier}_${effect[key]}`);
+        if (primary[key]) {
+          const {
+            qualifier
+          } = primary[key];
+          primary$1.push(`${qualifier}_${effect[key]}`);
+        } else if (effects[key]) {
+          const {
+            qualifier,
+            prefix
+          } = effects[key];
+          let transformation = '';
+          if (prefix) {
+            transformation = `${prefix}_`;
+          }
+          if (effect[key] === true) {
+            primary$1.push(`${transformation}${qualifier}`);
+          } else if (typeof effect[key] === 'string' || typeof effect[key] === 'number') {
+            if (prefix) {
+              primary$1.push(`${transformation}${qualifier}:${effect[key]}`);
+            } else {
+              primary$1.push(`${qualifier}_${effect[key]}`);
+            }
+          }
+        }
       });
     });
 
@@ -760,6 +907,33 @@ function createPlaceholderUrl({
   });
 }
 
+/**
+ * pollForProcessingImage
+ */
+
+async function pollForProcessingImage(options) {
+  const {
+    src
+  } = options;
+  try {
+    await new Promise((resolve, reject) => {
+      fetch(src).then(res => {
+        if (!res.ok) {
+          reject(res);
+          return;
+        }
+        resolve(res);
+      });
+    });
+  } catch (e) {
+    if (e.status === 423) {
+      return await pollForProcessingImage(options);
+    }
+    return false;
+  }
+  return true;
+}
+
 function cloudinaryLoader({
   loaderOptions,
   imageProps,
@@ -803,6 +977,8 @@ const CldImage = props => {
 
   const imageProps = {};
   Object.keys(props).filter(key => !CLD_OPTIONS.includes(key)).forEach(key => imageProps[key] = props[key]);
+  const defaultImgKey = Object.keys(imageProps).map(key => `${key}:${imageProps[key]}`).join(';');
+  const [imgKey, setImgKey] = useState(defaultImgKey);
 
   // Construct Cloudinary-specific props by looking for values for any of the supported prop keys
 
@@ -836,13 +1012,27 @@ const CldImage = props => {
     const transformations = getTransformations(props.src, props.preserveTransformations);
     imageProps.rawTransformations = [...imageProps.rawTransformations, ...transformations];
   }
+
+  /**
+   * handleOnError
+   */
+
+  async function handleOnError(options) {
+    const result = await pollForProcessingImage({
+      src: options.target.src
+    });
+    if (result) {
+      setImgKey(`${defaultImgKey};${Date.now()}`);
+    }
+  }
   return /*#__PURE__*/jsx(Image, _extends({}, imageProps, {
     loader: loaderOptions => cloudinaryLoader({
       loaderOptions,
       imageProps,
       cldOptions
-    })
-  }));
+    }),
+    onError: handleOnError
+  }), imgKey);
 };
 
 const _excluded$1 = ["excludeTags", "twitterTitle"];