next-cloudinary 1.3.0 → 1.5.0

package/README.md

@@ -12,7 +12,7 @@
 
 ######
 
-<a href="https://github.com/colbyfayock/next-cloudinary/actions/workflows/test_and_release.yml"><img alt="GitHub Workflow Status" src="https://img.shields.io/github/workflow/status/colbyfayock/next-cloudinary/Test%20&%20Release?label=Test%20%26%20Release&style=flat-square"></a> <a href="https://www.npmjs.com/package/next-cloudinary"><img alt="npm" src="https://img.shields.io/npm/v/next-cloudinary?style=flat-square"></a> <a href="https://github.com/colbyfayock/next-cloudinary/blob/main/LICENSE"><img alt="GitHub" src="https://img.shields.io/github/license/colbyfayock/next-cloudinary?label=License&style=flat-square"></a>
+<a href="https://github.com/colbyfayock/next-cloudinary/actions/workflows/test_and_release.yml"><img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/colbyfayock/next-cloudinary/test_and_release.yml?branch=main&label=Test%20%26%20Release&style=flat-square"></a> <a href="https://www.npmjs.com/package/next-cloudinary"><img alt="npm" src="https://img.shields.io/npm/v/next-cloudinary?style=flat-square"></a> <a href="https://github.com/colbyfayock/next-cloudinary/blob/main/LICENSE"><img alt="GitHub" src="https://img.shields.io/github/license/colbyfayock/next-cloudinary?label=License&style=flat-square"></a>
 
 # Next Cloudinary
 
@@ -177,6 +177,7 @@ yarn test
       <td align="center"><a href="http://www.timbenniks.dev"><img src="https://avatars.githubusercontent.com/u/121096?v=4?s=100" width="100px;" alt="Tim Benniks"/><br /><sub><b>Tim Benniks</b></sub></a><br /><a href="https://github.com/colbyfayock/next-cloudinary/commits?author=timbenniks" title="Code">💻</a> <a href="https://github.com/colbyfayock/next-cloudinary/commits?author=timbenniks" title="Documentation">📖</a></td>
       <td align="center"><a href="https://github.com/csgochan"><img src="https://avatars.githubusercontent.com/u/116420257?v=4?s=100" width="100px;" alt="csgochan"/><br /><sub><b>csgochan</b></sub></a><br /><a href="https://github.com/colbyfayock/next-cloudinary/commits?author=csgochan" title="Documentation">📖</a></td>
       <td align="center"><a href="https://github.com/codingis4noobs2"><img src="https://avatars.githubusercontent.com/u/87560178?v=4?s=100" width="100px;" alt="codingis4noobs2"/><br /><sub><b>codingis4noobs2</b></sub></a><br /><a href="https://github.com/colbyfayock/next-cloudinary/commits?author=codingis4noobs2" title="Code">💻</a> <a href="https://github.com/colbyfayock/next-cloudinary/commits?author=codingis4noobs2" title="Tests">⚠️</a></td>
+      <td align="center"><a href="https://github.com/michizhou"><img src="https://avatars.githubusercontent.com/u/33012425?v=4?s=100" width="100px;" alt="michizhou"/><br /><sub><b>michizhou</b></sub></a><br /><a href="https://github.com/colbyfayock/next-cloudinary/commits?author=michizhou" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

package/dist/next-cloudinary.js

@@ -1,8 +1,8 @@
+var react = require('react');
 var Image = require('next/image');
 var urlGen = require('@cloudinary/url-gen');
 var jsxRuntime = require('react/jsx-runtime');
 var Head = require('next/head');
-var react = require('react');
 var Script = require('next/script');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -92,89 +92,6 @@ var croppingPlugin = {
   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 = {
@@ -242,6 +159,211 @@ var text = {
     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'];
@@ -323,12 +445,33 @@ function plugin$5(_temp) {
     });
 
     // 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]);
+            }
+          }
+        }
       });
     });
 
@@ -604,6 +747,58 @@ var zoompanPlugin = {
   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,
@@ -771,6 +966,22 @@ function cloudinaryLoader(_ref) {
 }
 
 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,
@@ -791,6 +1002,12 @@ var CldImage = function CldImage(props) {
   }).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
 
@@ -831,8 +1048,9 @@ var CldImage = function CldImage(props) {
         imageProps: imageProps,
         cldOptions: cldOptions
       });
-    }
-  }));
+    },
+    onError: handleOnError
+  }), imgKey);
 };
 
 var _excluded$1 = ["excludeTags", "twitterTitle"];