@websolutespa/bom-mixer-ui 1.7.0 → 1.7.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @websolutespa/bom-mixer-ui
 
+## 1.7.1
+
+### Patch Changes
+
+- 7898849: Added: Media image strategies Mixer, Oven
+- Updated dependencies [7898849]
+  - @websolutespa/bom-mixer-store@1.7.2
+
 ## 1.7.0
 
 ### Minor Changes

package/dist/cjs/index.js

@@ -11,6 +11,7 @@ var reactDom = require('react-dom');
 var bomMixerIcons = require('@websolutespa/bom-mixer-icons');
 var swiperCss = require('!!raw-loader!swiper/css');
 var react = require('swiper/react');
+var bomMixerStore = require('@websolutespa/bom-mixer-store');
 var bomMixerModels = require('@websolutespa/bom-mixer-models');
 var Head = require('next/head');
 var router = require('next/router');
@@ -4326,15 +4327,31 @@ 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_QUALITY = process.env.IMAGE_QUALITY ? parseInt(process.env.IMAGE_QUALITY) : 80;
+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)) : [640, 828, 1080, 1200, 1920];
-const IMAGE_STRATEGY = process.env.IMAGE_STRATEGY ? process.env.IMAGE_STRATEGY : exports.ImageStrategy.Next;
+const IMAGE_SIZEMAP = Object.fromEntries(IMAGE_SIZES.map((x, i) => [IMAGE_SIZE_VARIANTS[i], x]));
+const IMAGE_QUALITY = process.env.IMAGE_QUALITY ? parseInt(process.env.IMAGE_QUALITY) : 80;
+const IMAGE_STRATEGY = process.env.IMAGE_STRATEGY ? process.env.IMAGE_STRATEGY : exports.ImageStrategy.Mixer;
+function isMediaSizeVariant(item) {
+  return typeof item === 'string';
+  // return typeof item === 'string' && IMAGE_SIZE_VARIANTS.includes(item);
+}
+function isMediaSizeVariants(item) {
+  return bomCore.isObject(item) && Object.entries(item).reduce((p, _ref) => {
+    let [k, v] = _ref;
+    return p && typeof v === 'number';
+  }, true);
+  // return Array.isArray(item) && item.length > 0 && item.reduce((p, c) => p && typeof c === 'number', true);
+}
 const StyledMediaImage = styled__default.default.img`
   max-width: 100%;
   // height: auto;
   user-select: none;
+  color: transparent;
 `;
 const MediaImage = _a => {
   var {
@@ -4343,53 +4360,133 @@ const MediaImage = _a => {
       loading = 'lazy'
     } = _a,
     props = __rest(_a, ["className", "type", "loading"]);
-  const classNames = bomCore.getClassNames(className, 'image', {
+  const theme = React.useContext(styled.ThemeContext);
+  if (!theme) {
+    throw new Error('MediaImage must be used within ThemeProvider');
+  }
+  const classNames = bomCore.getClassNames(className, 'image', props.src && {
     'image-svg': isSVG(props.src)
   });
-  const imageProps = getImageProps(props);
+  const imageProps = getImageProps(props, theme.mediaQuery);
   return jsxRuntime.jsx(StyledMediaImage, Object.assign({
     className: classNames,
     loading: loading
-  }, imageProps));
+  }, imageProps, {
+    draggable: "false",
+    decoding: "async"
+  }));
 };
-function getImageProps(_a) {
+function getMediaSizes(mediaQuery, ratio, size) {
+  if (size) {
+    if (typeof size === 'number') {
+      return Object.entries(ratio).map(_ref2 => {
+        let [k, v] = _ref2;
+        return [size, parseInt(String(mediaQuery[k])), v];
+      });
+    }
+    if (isMediaSizeVariant(size)) {
+      const sizeLimit = IMAGE_SIZEMAP[size] || 0;
+      // console.log(size, ratio[size], sizeLimit);
+      return Object.entries(IMAGE_SIZEMAP).filter(_ref3 => {
+        let [k, v] = _ref3;
+        return v <= sizeLimit;
+      }).map(_ref4 => {
+        let [k, v] = _ref4;
+        return [v, parseInt(String(mediaQuery[k])), ratio[k]];
+      });
+    }
+  }
+  size = size || IMAGE_SIZEMAP;
+  return Object.entries(size).map(_ref5 => {
+    let [k, v] = _ref5;
+    return [v, parseInt(String(mediaQuery[k])), ratio[k]];
+  });
+}
+function getImageProps(_a, mediaQuery) {
   var {
       src
     } = _a,
     props = __rest(_a, ["src"]);
-  if (IMAGE_STRATEGY === exports.ImageStrategy.None || isSVG(src)) {
+  if (IMAGE_STRATEGY === exports.ImageStrategy.None || !src || isSVG(src)) {
     return Object.assign({
       src
     }, props);
   }
-  const ratio = props.width && props.height ? parseInt(props.width.toString()) / parseInt(props.height.toString()) : 0;
-  const sizes = IMAGE_SIZES;
+  const {
+      width,
+      height,
+      size
+    } = props,
+    otherProps = __rest(props, ["width", "height", "size"]);
+  const ratio = getMediaRatio(props);
+  const sizes = getMediaSizes(mediaQuery, ratio, size);
+  const imageSrc = getImageSrc(src, sizes[0][0], sizes[0][2]);
+  const imageSrcSet = getImageSrcset(src, sizes);
+  const imageSizes = getImageSizes(sizes);
   return Object.assign({
-    src: getImageSrc(src, ratio, sizes[0]),
-    srcSet: getImageSrcset(src, ratio, sizes),
-    sizes: ratio !== 0 ? getImageSizes(sizes) : '100vw'
-  }, props);
+    src: imageSrc,
+    srcSet: imageSrcSet,
+    sizes: imageSizes
+  }, otherProps);
+}
+function getMediaRatio(props) {
+  let width = undefined;
+  let height = undefined;
+  if (props.width) {
+    width = parseInt(String(props.width));
+  }
+  props.width = width;
+  if (props.height) {
+    height = parseInt(String(props.height));
+  }
+  props.height = height;
+  const defaultRatio = width && height ? width / height : 0;
+  const xs = getRatio(props.aspectRatio, defaultRatio);
+  const sm = getRatio(props.aspectRatioSm, xs);
+  const md = getRatio(props.aspectRatioMd, sm);
+  const lg = getRatio(props.aspectRatioLg, md);
+  const xl = getRatio(props.aspectRatioXl, lg);
+  const ratio = {
+    xs,
+    sm,
+    md,
+    lg,
+    xl
+  };
+  return ratio;
+}
+function getRatio(aspectRatio, defaultRatio) {
+  if (defaultRatio === void 0) {
+    defaultRatio = 0;
+  }
+  return typeof aspectRatio === 'string' ? parseFloat(aspectRatio) : aspectRatio || defaultRatio;
 }
-function getImageSrc(src, ratio, width, quality) {
+const BASE_URLS = {
+  [exports.ImageStrategy.Mixer]: '/api/_image',
+  [exports.ImageStrategy.Next]: '/_next/image',
+  [exports.ImageStrategy.Oven]: bomMixerStore.getRemoteApiUrl('/_image')
+};
+const BASE_URL = BASE_URLS[IMAGE_STRATEGY];
+function getImageSrc(src, width, ratio, quality) {
   if (quality === void 0) {
     quality = IMAGE_QUALITY;
   }
   if (isSVG(src)) {
     return src;
   }
-  return ratio !== 0 ? `/_next/image?url=${encodeURIComponent(src)}&w=${width}&h=${width / ratio}&q=${quality}` : `/_next/image?url=${encodeURIComponent(src)}&w=${width}&q=${quality}`;
+  return ratio !== 0 ? `${BASE_URL}?url=${encodeURIComponent(src)}&w=${width}&h=${Math.round(width / ratio)}&q=${quality}` : `${BASE_URL}?url=${encodeURIComponent(src)}&w=${width}&q=${quality}`;
 }
-function getImageSrcset(src, ratio, widths, quality) {
+function getImageSrcset(src, sizes, quality) {
   if (quality === void 0) {
     quality = IMAGE_QUALITY;
   }
   if (isSVG(src)) {
     return undefined;
   }
-  return widths.map(width => getImageSrc(src, ratio, width, quality) + ` ${width}w`).join(', ');
+  return sizes.length > 1 ? sizes.map(size => getImageSrc(src, size[0], size[2], quality) + ` ${size[0]}w`).join(', ') : undefined;
 }
-function getImageSizes(widths) {
-  return widths.map((width, i) => `${i < widths.length - 1 ? `(max-width: ${width}px) ` : ''}${width}px`).join(', ');
+function getImageSizes(sizes) {
+  return sizes.length > 1 ? sizes.map((size, i) => `${i < sizes.length - 1 ? `(max-width: ${sizes[i + 1][1]}px) ` : ''}${size[0]}px`).join(', ') : undefined;
 }
 function isSVG(src) {
   return src.indexOf('.svg') !== -1;
@@ -4440,7 +4537,7 @@ const StyledMedia$1 = styled__default.default.div`
   &>video,
   &>.video {
     object-fit: cover;
-    background: var(--color-neutral-200);
+    background: transparent; // var(--color-neutral-200);
   }
 
   &>svg {
@@ -4506,12 +4603,15 @@ const MediaBase = /*#__PURE__*/React.forwardRef((_a, ref) => {
       item,
       onClick,
       className,
+      size,
+      width,
+      height,
       eager,
       alt,
       title,
       as = 'div'
     } = _a,
-    props = __rest(_a, ["children", "item", "onClick", "className", "eager", "alt", "title", "as"]);
+    props = __rest(_a, ["children", "item", "onClick", "className", "size", "width", "height", "eager", "alt", "title", "as"]);
   const {
     locale
   } = bomMixerHooks.useLayout();
@@ -4523,6 +4623,14 @@ const MediaBase = /*#__PURE__*/React.forwardRef((_a, ref) => {
     'media--gallery': id
   });
   const mediaChildren = item && !children ? getMediaItems(item, {
+    width,
+    height,
+    size,
+    aspectRatio: props.aspectRatio,
+    aspectRatioSm: props.aspectRatioSm,
+    aspectRatioMd: props.aspectRatioMd,
+    aspectRatioLg: props.aspectRatioLg,
+    aspectRatioXl: props.aspectRatioXl,
     eager,
     galleryId: id,
     alt,
@@ -4574,27 +4682,34 @@ function getMediaItems(itemOrItems, options) {
     if (x.alt) {
       mediaItem.alt = x.alt;
     }
-    if (x.height) {
-      mediaItem.height = x.height;
-    }
     if (x.mimeType) {
       mediaItem.mimeType = x.mimeType;
     }
     if (x.title) {
       mediaItem.title = x.title;
     }
-    if (x.width) {
+    if (options.width) {
+      mediaItem.width = parseInt(String(options.width));
+    } else if (x.width) {
       mediaItem.width = x.width;
     }
+    if (options.height) {
+      mediaItem.height = parseInt(String(options.height));
+    } else if (x.height) {
+      mediaItem.height = x.height;
+    }
     return mediaItem;
   });
   const hasGallery = options.galleryId != null && typeof options.open === 'function';
   const getMediaItemProps = media => {
     const title = media.title || options.title || media.alt || options.alt;
     const alt = media.alt || options.alt || media.title || options.title;
+    const src = media.src || media.url || '';
     const props = {
+      src,
       title,
-      alt
+      alt,
+      size: options.size
     };
     if (hasGallery) {
       props['data-gallery'] = JSON.stringify({
@@ -4608,11 +4723,16 @@ function getMediaItems(itemOrItems, options) {
       };
     }
     if (bomCore.resolveMediaType(media) === 'image') {
-      const aspectRatio = typeof options.aspectRatio === 'string' ? parseFloat(options.aspectRatio) : options.aspectRatio;
-      if (aspectRatio != null) {
-        props.width = 800;
-        props.height = 800 / aspectRatio;
+      let width = undefined;
+      let height = undefined;
+      if (options.width) {
+        width = parseInt(String(options.width));
+      }
+      props.width = width;
+      if (options.height) {
+        height = parseInt(String(options.height));
       }
+      props.height = height;
       if (options.eager) {
         props.loading = 'eager';
       }
@@ -4635,7 +4755,7 @@ function getMediaItems(itemOrItems, options) {
       srcLang: options.locale,
       label: "Video Captions"
     })]
-  }), m) : jsxRuntime.jsx(MediaImage, Object.assign({}, media, {
+  }), m) : jsxRuntime.jsx(MediaImage, Object.assign({
     draggable: false
   }, getMediaItemProps(media)), m));
 }
@@ -20457,6 +20577,8 @@ exports.isCSSNumberValue = isCSSNumberValue;
 exports.isChildElement = isChildElement;
 exports.isCssProp = isCssProp;
 exports.isMac = isMac;
+exports.isMediaSizeVariant = isMediaSizeVariant;
+exports.isMediaSizeVariants = isMediaSizeVariants;
 exports.isMixerElement = isMixerElement;
 exports.labelVariants = labelVariants;
 exports.mapChildsByType = mapChildsByType;