@websolutespa/bom-mixer-ui 1.8.0 → 1.8.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @websolutespa/bom-mixer-ui
 
+## 1.8.2
+
+### Patch Changes
+
+- Modified: imageHandler
+
+## 1.8.1
+
+### Patch Changes
+
+- Modified: Market & Language
+
 ## 1.8.0
 
 ### Minor Changes

package/dist/cjs/index.js

@@ -4411,9 +4411,11 @@ exports.ImageStrategy = void 0;
   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)) : [640, 828, 1080, 1200, 1920];
+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_QUALITY = process.env.IMAGE_QUALITY ? parseInt(process.env.IMAGE_QUALITY) : 80;
+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;
 function isMediaSizeVariant(item) {
   return typeof item === 'string';
@@ -4556,8 +4558,8 @@ function getImageProps(_a, mediaQuery) {
   }
   const ratio = getMediaRatio(useWidth, useHeight, props.aspectRatio, props.aspectRatioSm, props.aspectRatioMd, props.aspectRatioLg, props.aspectRatioXl);
   const sizes = getMediaSizes(mediaQuery, ratio, useSize, props.mediaWidth, props.mediaHeight);
-  const imageSrc = getImageSrc(src, sizes[0][0], sizes[0][2]);
-  const imageSrcSet = getImageSrcset(src, sizes);
+  const imageSrc = getImageSrc(src, sizes[0][0], sizes[0][2], props.mediaFocalX, props.mediaFocalY);
+  const imageSrcSet = getImageSrcset(src, sizes, props.mediaFocalX, props.mediaFocalY);
   const imageSizes = getImageSizes(sizes);
   // console.log('useSize', useSize, 'width', width, useWidth, 'height', height, useHeight);
   return Object.assign({
@@ -4597,23 +4599,52 @@ const BASE_URLS = {
   [exports.ImageStrategy.Oven]: bomMixerStore.getRemoteApiUrl('/_image')
 };
 const BASE_URL = BASE_URLS[IMAGE_STRATEGY];
-function getImageSrc(src, width, ratio, quality) {
+function getImageSrc(src, width, ratio, focalX, focalY, quality) {
+  if (focalX === void 0) {
+    focalX = IMAGE_FOCAL_X;
+  }
+  if (focalY === void 0) {
+    focalY = IMAGE_FOCAL_Y;
+  }
   if (quality === void 0) {
     quality = IMAGE_QUALITY;
   }
   if (isSVG(src)) {
     return src;
   }
-  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}`;
+  switch (IMAGE_STRATEGY) {
+    case exports.ImageStrategy.Mixer:
+    case exports.ImageStrategy.Oven:
+      {
+        const {
+          origin,
+          pathname,
+          search
+        } = src.indexOf('http') === 0 ? new URL(src) : {
+          origin: '',
+          pathname: src,
+          search: ''
+        };
+        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:
+      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, sizes, quality) {
+function getImageSrcset(src, sizes, focalX, focalY, quality) {
+  if (focalX === void 0) {
+    focalX = IMAGE_FOCAL_X;
+  }
+  if (focalY === void 0) {
+    focalY = IMAGE_FOCAL_Y;
+  }
   if (quality === void 0) {
     quality = IMAGE_QUALITY;
   }
   if (isSVG(src)) {
     return undefined;
   }
-  return sizes.length > 1 ? sizes.map(size => getImageSrc(src, size[0], size[2], quality) + ` ${size[0]}w`).join(', ') : undefined;
+  return sizes.length > 1 ? sizes.map(size => getImageSrc(src, size[0], size[2], focalX, focalY, quality) + ` ${size[0]}w`).join(', ') : undefined;
 }
 function getImageSizes(sizes) {
   return sizes.length > 1 ? sizes.map((size, i) => `${i < sizes.length - 1 ? `(max-width: ${sizes[i + 1][1] - 1}px) ` : ''}${size[0]}px`).join(', ') : undefined;
@@ -4744,6 +4775,12 @@ function getMediaItem(item, options) {
   if (typeof item.height === 'number') {
     mediaItem.mediaHeight = item.height;
   }
+  if (typeof item.focalX === 'number') {
+    mediaItem.mediaFocalX = item.focalX;
+  }
+  if (typeof item.focalY === 'number') {
+    mediaItem.mediaFocalY = item.focalY;
+  }
   mediaItem.width = options.width;
   mediaItem.height = options.height;
   mediaItem.aspectRatio = options.aspectRatio;
@@ -4783,6 +4820,8 @@ function getMediaItemProps(mediaItem, options) {
   if (bomCore.isMediaImage(media)) {
     mediaItemProps.mediaWidth = mediaItem.mediaWidth;
     mediaItemProps.mediaHeight = mediaItem.mediaHeight;
+    mediaItemProps.mediaFocalX = mediaItem.mediaFocalX;
+    mediaItemProps.mediaFocalY = mediaItem.mediaFocalY;
     mediaItemProps.width = options.width;
     mediaItemProps.height = options.height;
     mediaItemProps.aspectRatio = options.aspectRatio;
@@ -10926,8 +10965,8 @@ const MarketsAndLanguagesDrawer = _ref => {
     href,
     alternates
   } = bomMixerHooks.usePage();
-  const items = markets.map(x => Object.assign(Object.assign({}, x), {
-    locales: x.languages && x.languages.length ? locales.filter(l => x.languages ? x.languages.includes(l.id) : true) : locales
+  const items = markets.map(market => Object.assign(Object.assign({}, market), {
+    locales: market.languages && market.languages.length ? locales.filter(l => market.languages ? market.languages.findIndex(language => bomCore.asEntityId(language) === l.id) !== -1 : true) : locales
   }));
   const getHref = React.useCallback((market, locale, currentMarket, currentLocale) => {
     const items = alternates || [];