next-cloudinary 1.3.0 → 1.5.0

package/dist/next-cloudinary.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('next/image'), require('@cloudinary/url-gen'), require('react/jsx-runtime'), require('next/head'), require('react'), require('next/script')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'next/image', '@cloudinary/url-gen', 'react/jsx-runtime', 'next/head', 'react', 'next/script'], factory) :
-  (global = global || self, factory(global.nextCloudinary = {}, global.Image, global.urlGen, global.jsxRuntime, global.Head, global.react, global.Script));
-})(this, (function (exports, Image, urlGen, jsxRuntime, Head, react, Script) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('next/image'), require('@cloudinary/url-gen'), require('react/jsx-runtime'), require('next/head'), require('next/script')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'next/image', '@cloudinary/url-gen', 'react/jsx-runtime', 'next/head', 'next/script'], factory) :
+  (global = global || self, factory(global.nextCloudinary = {}, global.react, global.Image, global.urlGen, global.jsxRuntime, global.Head, global.Script));
+})(this, (function (exports, react, Image, urlGen, jsxRuntime, Head, Script) {
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var Image__default = /*#__PURE__*/_interopDefaultLegacy(Image);
@@ -90,89 +90,6 @@
     plugin: plugin$7
   };
 
-  var 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'];
-  var props$6 = params.map(function (param) {
-    return param.prop || param;
-  });
-  function plugin$6(_temp) {
-    var _ref = _temp === void 0 ? {} : _temp,
-      cldImage = _ref.cldImage,
-      options = _ref.options;
-    params.forEach(function (key) {
-      var prop = key.prop || key;
-      var 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
 
   var primary = {
@@ -240,6 +157,211 @@
       qualifier: false
     }
   };
+  var 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'
+    }
+  };
+
+  var props$6 = Object.keys(effects);
+  function plugin$6(_temp) {
+    var _ref = _temp === void 0 ? {} : _temp,
+      cldImage = _ref.cldImage,
+      options = _ref.options;
+    Object.keys(effects).forEach(function (key) {
+      var _effects$key = effects[key],
+        prefix = _effects$key.prefix,
+        qualifier = _effects$key.qualifier;
+      var 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');
+    }
+  }
 
   var _excluded$3 = ["publicId", "url", "position", "text", "effects"];
   var props$5 = ['text', 'overlays'];
@@ -321,12 +443,33 @@
       });
 
       // 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(function (effect) {
         Object.keys(effect).forEach(function (key) {
-          if (!primary[key]) return;
-          var qualifier = primary[key].qualifier;
-          primary$1.push(qualifier + "_" + effect[key]);
+          if (primary[key]) {
+            var qualifier = primary[key].qualifier;
+            primary$1.push(qualifier + "_" + effect[key]);
+          } else if (effects[key]) {
+            var _qualifiersEffects$ke = effects[key],
+              _qualifier = _qualifiersEffects$ke.qualifier,
+              prefix = _qualifiersEffects$ke.prefix;
+            var 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]);
+              }
+            }
+          }
         });
       });
 
@@ -602,6 +745,58 @@
     plugin: plugin
   };
 
+  /**
+   * pollForProcessingImage
+   */
+
+  function _catch(body, recover) {
+    try {
+      var result = body();
+    } catch (e) {
+      return recover(e);
+    }
+    if (result && result.then) {
+      return result.then(void 0, recover);
+    }
+    return result;
+  }
+  var pollForProcessingImage = function pollForProcessingImage(options) {
+    try {
+      var _exit2;
+      var src = options.src;
+      var _temp4 = _catch(function () {
+        return Promise.resolve(new Promise(function (resolve, reject) {
+          fetch(src).then(function (res) {
+            if (!res.ok) {
+              reject(res);
+              return;
+            }
+            resolve(res);
+          });
+        })).then(function () {});
+      }, function (e) {
+        function _temp2(_result2) {
+          if (_exit2) return _result2;
+          _exit2 = 1;
+          return false;
+        }
+        var _temp = function () {
+          if (e.status === 423) {
+            return Promise.resolve(pollForProcessingImage(options)).then(function (_await$pollForProcess) {
+              _exit2 = 1;
+              return _await$pollForProcess;
+            });
+          }
+        }();
+        return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
+      });
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(function (_result) {
+        return _exit2 ? _result : true;
+      }) : _exit2 ? _temp4 : true);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
   var transformationPlugins = [
   // Background Removal must always come first
   removeBackgroundPlugin, croppingPlugin, effectsPlugin, overlaysPlugin, namedTransformationsPlugin, underlaysPlugin, zoompanPlugin,
@@ -769,6 +964,22 @@
   }
 
   var CldImage = function CldImage(props) {
+    /**
+     * handleOnError
+     */
+    var handleOnError = function handleOnError(options) {
+      try {
+        return Promise.resolve(pollForProcessingImage({
+          src: options.target.src
+        })).then(function (result) {
+          if (result) {
+            setImgKey(defaultImgKey + ";" + Date.now());
+          }
+        });
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
     var CLD_OPTIONS = ['deliveryType'];
     transformationPlugins.forEach(function (_ref) {
       var _ref$props = _ref.props,
@@ -789,6 +1000,12 @@
     }).forEach(function (key) {
       return imageProps[key] = props[key];
     });
+    var defaultImgKey = Object.keys(imageProps).map(function (key) {
+      return key + ":" + imageProps[key];
+    }).join(';');
+    var _useState = react.useState(defaultImgKey),
+      imgKey = _useState[0],
+      setImgKey = _useState[1];
 
     // Construct Cloudinary-specific props by looking for values for any of the supported prop keys
 
@@ -829,8 +1046,9 @@
           imageProps: imageProps,
           cldOptions: cldOptions
         });
-      }
-    }));
+      },
+      onError: handleOnError
+    }), imgKey);
   };
 
   var _excluded$1 = ["excludeTags", "twitterTitle"];