@websolutespa/bom-mixer-ui 1.8.3 → 1.8.5

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @websolutespa/bom-mixer-ui
 
+## 1.8.5
+
+### Patch Changes
+
+- Modified: getImageSrc handling latin1 src
+
+## 1.8.4
+
+### Patch Changes
+
+- Added: ImageStrategy.Token
+- Updated dependencies
+  - @websolutespa/bom-core@1.8.4
+
 ## 1.8.3
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -4402,21 +4402,13 @@ function useMediaGalleryContext() {
   return React.useContext(MediaGalleryContext);
 }
 
-exports.ImageStrategy = void 0;
-(function (ImageStrategy) {
-  ImageStrategy["None"] = "none";
-  ImageStrategy["Next"] = "next";
-  ImageStrategy["Mixer"] = "mixer";
-  ImageStrategy["Oven"] = "oven";
-  ImageStrategy["Custom"] = "custom";
-})(exports.ImageStrategy || (exports.ImageStrategy = {}));
 const IMAGE_SIZE_VARIANTS = ['xs', 'sm', 'md', 'lg', 'xl'];
 const IMAGE_SIZES = process.env.IMAGE_SIZES ? process.env.IMAGE_SIZES.split(',').map(x => parseInt(x)) : [750, 960, 1440, 1600, 1920];
 const IMAGE_SIZEMAP = Object.fromEntries(IMAGE_SIZES.map((x, i) => [IMAGE_SIZE_VARIANTS[i], x]));
 const IMAGE_FOCAL_X = 50;
 const IMAGE_FOCAL_Y = 50;
 const IMAGE_QUALITY = process.env.IMAGE_QUALITY ? parseInt(process.env.IMAGE_QUALITY) : 90;
-const IMAGE_STRATEGY = process.env.IMAGE_STRATEGY ? process.env.IMAGE_STRATEGY : exports.ImageStrategy.Mixer;
+const IMAGE_STRATEGY = process.env.IMAGE_STRATEGY ? process.env.IMAGE_STRATEGY : bomCore.ImageStrategy.Mixer;
 function isMediaSizeVariant(item) {
   return typeof item === 'string';
   // return typeof item === 'string' && IMAGE_SIZE_VARIANTS.includes(item);
@@ -4433,55 +4425,6 @@ const StyledMediaImage = styled__default.default.img`
   user-select: none;
   color: transparent;
 `;
-const MediaImage = _a => {
-  var {
-      className,
-      type,
-      loading = 'lazy',
-      onLoaded,
-      canLoad = true
-    } = _a,
-    props = __rest(_a, ["className", "type", "loading", "onLoaded", "canLoad"]);
-  const theme = React.useContext(styled.ThemeContext);
-  if (!theme) {
-    throw new Error('MediaImage must be used within ThemeProvider');
-  }
-  const imageRef = React.useRef(null);
-  const classNames = bomCore.getClassNames(className, 'image', props.src && {
-    'image-svg': isSVG(props.src)
-  });
-  const imageProps = getImageProps(props, theme.mediaQuery);
-  React.useEffect(() => {
-    if (imageRef.current && canLoad) {
-      const image = imageRef.current;
-      if (image.complete) {
-        if (typeof onLoaded === 'function') {
-          onLoaded(imageRef);
-        }
-      } else {
-        const onLoad = () => {
-          if (typeof onLoaded === 'function') {
-            onLoaded(imageRef);
-          }
-        };
-        image.addEventListener('load', onLoad);
-        return () => {
-          if (image) {
-            image.removeEventListener('load', onLoad);
-          }
-        };
-      }
-    }
-    return () => {};
-  }, [canLoad, onLoaded]);
-  return jsxRuntime.jsx(StyledMediaImage, Object.assign({
-    ref: imageRef
-  }, canLoad ? imageProps : undefined, {
-    className: classNames,
-    loading: loading,
-    draggable: false
-  }));
-};
 function getMediaSizes(mediaQuery, ratio, size, maxWidth, maxHeight) {
   if (maxWidth === void 0) {
     maxWidth = Number.POSITIVE_INFINITY;
@@ -4531,7 +4474,7 @@ function getImageProps(_a, mediaQuery) {
       src
     } = _a,
     props = __rest(_a, ["src"]);
-  if (IMAGE_STRATEGY === exports.ImageStrategy.None || !src || isSVG(src)) {
+  if (IMAGE_STRATEGY === bomCore.ImageStrategy.None || !src || isSVG(src)) {
     return Object.assign({
       src
     }, props);
@@ -4594,11 +4537,26 @@ function getRatio(aspectRatio, defaultRatio) {
   return typeof aspectRatio === 'string' ? parseFloat(aspectRatio) : aspectRatio || defaultRatio;
 }
 const BASE_URLS = {
-  [exports.ImageStrategy.Mixer]: '/api/_image',
-  [exports.ImageStrategy.Next]: '/_next/image',
-  [exports.ImageStrategy.Oven]: bomMixerStore.getRemoteApiUrl('/_image')
+  [bomCore.ImageStrategy.Mixer]: '/api/_image',
+  [bomCore.ImageStrategy.Token]: '/api/_image',
+  [bomCore.ImageStrategy.Next]: '/_next/image',
+  [bomCore.ImageStrategy.Oven]: bomMixerStore.getRemoteApiUrl('/_image')
 };
 const BASE_URL = BASE_URLS[IMAGE_STRATEGY];
+function parseUrl(src) {
+  if (src.indexOf('http') === 0) {
+    const url = new URL(src);
+    return url;
+  }
+  const pathname = src.split('/').map(x => encodeURIComponent(x)).join('/');
+  const url = {
+    origin: '',
+    pathname,
+    search: '',
+    href: pathname
+  };
+  return url;
+}
 function getImageSrc(src, width, ratio, focalX, focalY, quality) {
   if (focalX === void 0) {
     focalX = IMAGE_FOCAL_X;
@@ -4613,18 +4571,37 @@ function getImageSrc(src, width, ratio, focalX, focalY, quality) {
     return src;
   }
   switch (IMAGE_STRATEGY) {
-    case exports.ImageStrategy.Mixer:
-    case exports.ImageStrategy.Oven:
+    case bomCore.ImageStrategy.Token:
       {
         const {
           origin,
           pathname,
-          search
-        } = src.indexOf('http') === 0 ? new URL(src) : {
-          origin: '',
-          pathname: src,
-          search: ''
+          search,
+          href
+        } = parseUrl(src);
+        const imageResize = ratio !== 0 ? {
+          w: width,
+          h: Math.round(width / ratio),
+          x: focalX,
+          y: focalY,
+          q: quality,
+          src: href
+        } : {
+          w: width,
+          q: quality,
+          src: href
         };
+        const token = bomCore.encryptImageToken(imageResize);
+        return `${BASE_URL}${pathname}?origin=${encodeURIComponent(origin)}&search=${encodeURIComponent(search)}&t=${encodeURIComponent(token)}`;
+      }
+    case bomCore.ImageStrategy.Mixer:
+    case bomCore.ImageStrategy.Oven:
+      {
+        const {
+          origin,
+          pathname,
+          search
+        } = parseUrl(src);
         return ratio !== 0 ? `${BASE_URL}${pathname}?origin=${encodeURIComponent(origin)}&search=${encodeURIComponent(search)}&w=${width}&h=${Math.round(width / ratio)}&x=${focalX}&y=${focalY}&q=${quality}` : `${BASE_URL}${pathname}?origin=${encodeURIComponent(origin)}&search=${encodeURIComponent(search)}&w=${width}&x=${focalX}&y=${focalY}&q=${quality}`;
       }
     default:
@@ -4652,6 +4629,56 @@ function getImageSizes(sizes) {
 function isSVG(src) {
   return src.indexOf('.svg') !== -1;
 }
+const MediaImage_ = _a => {
+  var {
+      className,
+      type,
+      loading = 'lazy',
+      onLoaded,
+      canLoad = true
+    } = _a,
+    props = __rest(_a, ["className", "type", "loading", "onLoaded", "canLoad"]);
+  const theme = React.useContext(styled.ThemeContext);
+  if (!theme) {
+    throw new Error('MediaImage must be used within ThemeProvider');
+  }
+  const imageRef = React.useRef(null);
+  const classNames = bomCore.getClassNames(className, 'image', props.src && {
+    'image-svg': isSVG(props.src)
+  });
+  const imageProps = getImageProps(props, theme.mediaQuery);
+  React.useEffect(() => {
+    if (imageRef.current && canLoad) {
+      const image = imageRef.current;
+      if (image.complete) {
+        if (typeof onLoaded === 'function') {
+          onLoaded(imageRef);
+        }
+      } else {
+        const onLoad = () => {
+          if (typeof onLoaded === 'function') {
+            onLoaded(imageRef);
+          }
+        };
+        image.addEventListener('load', onLoad);
+        return () => {
+          if (image) {
+            image.removeEventListener('load', onLoad);
+          }
+        };
+      }
+    }
+    return () => {};
+  }, [canLoad, onLoaded]);
+  return jsxRuntime.jsx(StyledMediaImage, Object.assign({
+    ref: imageRef
+  }, canLoad ? imageProps : undefined, {
+    className: classNames,
+    loading: loading,
+    draggable: false
+  }));
+};
+const MediaImage = /*#__PURE__*/React.memo(MediaImage_);
 
 const StyledMediaVideo = styled__default.default.video`
   max-width: 100%;
@@ -4670,7 +4697,7 @@ const StyledMediaVideo = styled__default.default.video`
     }
   }
 `;
-const MediaVideo = _a => {
+const MediaVideo_ = _a => {
   var {
       className,
       onLoaded,
@@ -4725,6 +4752,7 @@ const MediaVideo = _a => {
     })
   }));
 };
+const MediaVideo = /*#__PURE__*/React.memo(MediaVideo_);
 
 const MediaItem = _ref => {
   let {