@websolutespa/bom-mixer-ui 1.8.4 → 1.8.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @websolutespa/bom-mixer-ui
 
+## 1.8.6
+
+### Patch Changes
+
+- Modified: Meta, MediaGallery
+
+## 1.8.5
+
+### Patch Changes
+
+- Modified: getImageSrc handling latin1 src
+
 ## 1.8.4
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -4425,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;
@@ -4592,6 +4543,20 @@ const BASE_URLS = {
   [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;
@@ -4611,23 +4576,20 @@ function getImageSrc(src, width, ratio, focalX, focalY, quality) {
         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
+          src: href
         } : {
           w: width,
           q: quality,
-          src
+          src: href
         };
         const token = bomCore.encryptImageToken(imageResize);
         return `${BASE_URL}${pathname}?origin=${encodeURIComponent(origin)}&search=${encodeURIComponent(search)}&t=${encodeURIComponent(token)}`;
@@ -4639,11 +4601,7 @@ function getImageSrc(src, width, ratio, focalX, focalY, quality) {
           origin,
           pathname,
           search
-        } = src.indexOf('http') === 0 ? new URL(src) : {
-          origin: '',
-          pathname: src,
-          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:
@@ -4671,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%;
@@ -4689,7 +4697,7 @@ const StyledMediaVideo = styled__default.default.video`
     }
   }
 `;
-const MediaVideo = _a => {
+const MediaVideo_ = _a => {
   var {
       className,
       onLoaded,
@@ -4744,6 +4752,7 @@ const MediaVideo = _a => {
     })
   }));
 };
+const MediaVideo = /*#__PURE__*/React.memo(MediaVideo_);
 
 const MediaItem = _ref => {
   let {
@@ -5505,7 +5514,8 @@ const MediaGallery = /*#__PURE__*/React.forwardRef((_a, ref) => {
     }).filter(x => x && x.galleryId === id).map(x => x.media);
     // console.log('MediaGallery.open', medias, media);
     const initialSlide = media && !Array.isArray(media) ? medias.reduce((p, c, i) => {
-      if (c.src === media.src) {
+      const mediaSrc = media.src || media.url;
+      if (c.src === mediaSrc) {
         return i;
       } else {
         return p;
@@ -5637,8 +5647,8 @@ MediaGallery.displayName = 'MediaGallery';
 function Meta(_ref) {
   let {
     children,
-    websiteName = 'WebsiteName',
-    structuredDataCollections
+    structuredDataCollections,
+    brand
   } = _ref;
   var _a, _b, _e;
   const page = bomMixerHooks.usePage();
@@ -5679,7 +5689,7 @@ function Meta(_ref) {
     }
   }
   // structuredData
-  const structuredData = bomMixerModels.resolveStructuredData(page, websiteName, structuredDataCollections);
+  const structuredData = bomMixerModels.resolveStructuredData(page, structuredDataCollections, brand);
   return jsxRuntime.jsxs(Head__default.default, {
     children: [jsxRuntime.jsx("title", {
       children: title
@@ -5707,7 +5717,7 @@ function Meta(_ref) {
       hrefLang: alternate.locale
     }, `${alternate.locale}-${alternate.market}`)), page.media && jsxRuntime.jsx("meta", {
       property: "og:image",
-      content: bomMixerModels.resolveHref(page.media.src)
+      content: bomMixerModels.resolveHref(page.media.src || page.media.url)
     }), false , structuredData && jsxRuntime.jsx("script", {
       type: "application/ld+json",
       children: structuredData