@websolutespa/bom-mixer-ui 1.7.10 → 1.7.11

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @websolutespa/bom-mixer-ui
 
+## 1.7.11
+
+### Patch Changes
+
+- Modified: Media
+- Added: MediaImage, MediaVideo, MediaItems, pickResponsiveProps
+- Updated dependencies
+  - @websolutespa/bom-mixer-models@1.7.5
+  - @websolutespa/bom-mixer-store@1.7.4
+  - @websolutespa/bom-core@1.7.7
+
 ## 1.7.10
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -726,6 +726,31 @@ function getAspectResponsive(props, defaultValue) {
   }
   return rules;
 }
+function pickResponsiveProps(props) {
+  const displayProps = {};
+  const otherProps = {};
+  const responsiveKeys = [];
+  for (var _len = arguments.length, keys = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    keys[_key - 1] = arguments[_key];
+  }
+  keys.forEach(k => {
+    responsiveKeys.push(k);
+    responsiveKeys.push(`${k}Sm`);
+    responsiveKeys.push(`${k}Md`);
+    responsiveKeys.push(`${k}Lg`);
+    responsiveKeys.push(`${k}Xl`);
+  });
+  Object.entries(props).forEach(_ref => {
+    let [k, v] = _ref;
+    const key = k;
+    if (responsiveKeys.includes(key)) {
+      displayProps[k] = v;
+    } else {
+      otherProps[k] = v;
+    }
+  });
+  return [displayProps, otherProps];
+}
 function isChildElement(parent, child) {
   if (!parent || !child) {
     return false;
@@ -4363,23 +4388,49 @@ const MediaImage = _a => {
   var {
       className,
       type,
-      loading = 'lazy'
+      loading = 'lazy',
+      onLoaded,
+      canLoad = true
     } = _a,
-    props = __rest(_a, ["className", "type", "loading"]);
+    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);
+  const onLoad = () => {
+    if (typeof onLoaded === 'function') {
+      onLoaded(imageRef);
+    }
+  };
+  React.useEffect(() => {
+    if (imageRef.current && canLoad) {
+      if (imageRef.current.complete) {
+        if (typeof onLoaded === 'function') {
+          onLoaded(imageRef);
+        }
+      } else {
+        imageRef.current.addEventListener('load', onLoad);
+        return () => {
+          if (imageRef.current) {
+            imageRef.current.removeEventListener('load', onLoad);
+          }
+        };
+      }
+    }
+    return () => {};
+  }, [imageRef, canLoad]);
   return jsxRuntime.jsx(StyledMediaImage, Object.assign({
+    ref: imageRef
+  }, canLoad ? imageProps : undefined, {
     className: classNames,
-    loading: loading
-  }, imageProps, {
-    draggable: "false",
-    decoding: "async"
+    loading: loading,
+    draggable: false,
+    decoding: 'async'
   }));
 };
 function getMediaSizes(mediaQuery, ratio, size) {
@@ -4518,6 +4569,174 @@ function isSVG(src) {
   return src.indexOf('.svg') !== -1;
 }
 
+const StyledMediaVideo = styled__default.default.video`
+  max-width: 100%;
+  // height: auto;
+  user-select: none;
+  color: transparent;
+
+  &.video {
+    &--muted {
+      &::cue {
+        background-color: transparent;
+        background-image: none;
+        color: transparent;
+        font-size: 0;
+      }
+    }
+  }
+`;
+const MediaVideo = _a => {
+  var {
+      className,
+      onLoaded,
+      canLoad = true,
+      src
+    } = _a,
+    props = __rest(_a, ["className", "onLoaded", "canLoad", "src"]);
+  const videoRef = React.useRef(null);
+  const {
+    locale
+  } = bomMixerHooks.useLayout();
+  const classNames = bomCore.getClassNames(className, 'video', 'video--muted');
+  const onLoad = () => {
+    if (typeof onLoaded === 'function' && videoRef.current && videoRef.current.readyState && videoRef.current.readyState >= 2) {
+      onLoaded(videoRef);
+    }
+  };
+  React.useEffect(() => {
+    if (videoRef.current && canLoad) {
+      if (videoRef.current.readyState && videoRef.current.readyState >= 2) {
+        if (typeof onLoaded === 'function') {
+          onLoaded(videoRef);
+        }
+      } else {
+        videoRef.current.addEventListener('loadeddata', onLoad);
+        return () => {
+          if (videoRef.current) {
+            videoRef.current.removeEventListener('loadeddata', onLoad);
+          }
+        };
+      }
+    }
+    return () => {};
+  }, [videoRef, canLoad]);
+  return jsxRuntime.jsx(StyledMediaVideo, Object.assign({
+    ref: videoRef,
+    className: classNames,
+    playsInline: true,
+    autoPlay: true,
+    muted: true,
+    loop: true
+  }, props, {
+    children: canLoad && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx("source", {
+        src: src,
+        type: "video/mp4"
+      }), locale && jsxRuntime.jsx("track", {
+        src: `/captions.vtt?locale=${locale}&title=${props.title}`,
+        kind: "captions",
+        srcLang: locale,
+        label: "Video Captions"
+      })]
+    })
+  }));
+};
+
+const MediaItem = _ref => {
+  let {
+    item,
+    options = {}
+  } = _ref;
+  const mediaItem = React.useMemo(() => {
+    if (typeof item['media'] === 'object') {
+      item = item['media'];
+    }
+    const mediaItem = {
+      type: item.type,
+      src: item.src
+    };
+    if (item.abstract) {
+      mediaItem.abstract = item.abstract;
+    }
+    if (item.alt) {
+      mediaItem.alt = item.alt;
+    }
+    if (item.mimeType) {
+      mediaItem.mimeType = item.mimeType;
+    }
+    if (item.url) {
+      mediaItem.src = item.url;
+    }
+    if (item.title) {
+      mediaItem.title = item.title;
+    }
+    mediaItem.width = options.width || item.width;
+    mediaItem.height = options.height || item.height;
+    mediaItem.aspectRatio = options.aspectRatio;
+    mediaItem.aspectRatioSm = options.aspectRatioSm;
+    mediaItem.aspectRatioMd = options.aspectRatioMd;
+    mediaItem.aspectRatioLg = options.aspectRatioLg;
+    mediaItem.aspectRatioXl = options.aspectRatioXl;
+    mediaItem.onLoaded = options.onLoaded;
+    mediaItem.canLoad = options.canLoad;
+    return mediaItem;
+  }, [item, options]);
+  const mediaItemProps = React.useMemo(() => {
+    const media = __rest(mediaItem, ["width", "height", "sizes"]);
+    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 mediaItemProps = {
+      src,
+      title,
+      alt,
+      size: options.size,
+      onLoaded: mediaItem.onLoaded,
+      canLoad: mediaItem.canLoad
+    };
+    const hasGallery = options.galleryId != null && typeof options.open === 'function';
+    if (hasGallery) {
+      mediaItemProps['data-gallery'] = JSON.stringify({
+        galleryId: options.galleryId,
+        media
+      });
+      mediaItemProps.onClick = event => {
+        if (options.open) {
+          options.open(media);
+        }
+      };
+    }
+    if (bomCore.isMediaImage(media)) {
+      if (options.width) {
+        mediaItemProps.width = options.width;
+      }
+      mediaItemProps.height = options.height;
+      mediaItemProps.aspectRatio = options.aspectRatio;
+      mediaItemProps.aspectRatioSm = options.aspectRatioSm;
+      mediaItemProps.aspectRatioMd = options.aspectRatioMd;
+      mediaItemProps.aspectRatioLg = options.aspectRatioLg;
+      mediaItemProps.aspectRatioXl = options.aspectRatioXl;
+      if (options.eager) {
+        mediaItemProps.loading = 'eager';
+      }
+    }
+    return mediaItemProps;
+  }, [mediaItem]);
+  return bomCore.isMediaVideo(mediaItem) ? jsxRuntime.jsx(MediaVideo, Object.assign({}, mediaItemProps)) : jsxRuntime.jsx(MediaImage, Object.assign({}, mediaItemProps));
+};
+const MediaItems = _ref2 => {
+  let {
+    item,
+    options = {}
+  } = _ref2;
+  const items = Array.isArray(item) ? item : [item];
+  return items.map((item, m) => jsxRuntime.jsx(MediaItem, {
+    item: item,
+    options: options
+  }, m));
+};
+
 const StyledMediaInfo = styled__default.default.div`
   position: absolute;
   display: flex;
@@ -4550,7 +4769,6 @@ const StyledMedia$1 = styled__default.default.div`
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  // color: var(--color-neutral-100);
 
   ${props => getCssResponsive(props)}
 
@@ -4563,7 +4781,7 @@ const StyledMedia$1 = styled__default.default.div`
   &>video,
   &>.video {
     object-fit: cover;
-    background: transparent; // var(--color-neutral-200);
+    background: transparent;
   }
 
   &>svg {
@@ -4590,24 +4808,24 @@ const StyledMedia$1 = styled__default.default.div`
   }
 
   ${props => props.circle ? styled.css`
-      aspect-ratio: 1;
-      overflow: hidden;
-      border-radius: 50%;
-      &>* {
-        top: 0;
-        left: 0;
-        height: 100%;
-      }
-    ` : ''};
+    aspect-ratio: 1;
+    overflow: hidden;
+    border-radius: 50%;
+    &>* {
+      top: 0;
+      left: 0;
+      height: 100%;
+    }
+  ` : ''}
 
-    ${props => props.rounded ? styled.css`
-      overflow: hidden;
-      border-radius: var(--border-radius);
-    ` : ''};
+  ${props => props.rounded ? styled.css`
+    overflow: hidden;
+    border-radius: var(--border-radius);
+  ` : ''}
 
   ${props => getAspectResponsive(props, props.circle ? {
   aspectRatio: 1
-} : undefined)};
+} : undefined)}
 
   ${props => props.overlay ? styled.css`
     position: relative;
@@ -4619,7 +4837,7 @@ const StyledMedia$1 = styled__default.default.div`
       left: 0;
       width: 100%;
       height: 100%;
-      ${typeof props.overlay === 'number' ? styled.css`background: rgba(0,0,0,${props.overlay})` : styled.css`background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 15.9%, rgba(0, 0, 0, 0) 41.67%, rgba(0, 0, 0, 0.1) 61.79%, rgba(0, 0, 0, 0.6) 100%)`};
+      ${typeof props.overlay === 'number' ? `background: rgba(0,0,0,${props.overlay});` : `background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 15.9%, rgba(0, 0, 0, 0) 41.67%, rgba(0, 0, 0, 0.1) 61.79%, rgba(0, 0, 0, 0.6) 100%);`}
     }
   ` : ''}
 `;
@@ -4627,20 +4845,19 @@ const MediaBase = /*#__PURE__*/React.forwardRef((_a, ref) => {
   var {
       children,
       item,
-      onClick,
       className,
-      size,
       width,
       height,
+      size,
       eager,
       alt,
       title,
+      onClick,
+      onLoaded,
+      canLoad,
       as = 'div'
     } = _a,
-    props = __rest(_a, ["children", "item", "onClick", "className", "size", "width", "height", "eager", "alt", "title", "as"]);
-  const {
-    locale
-  } = bomMixerHooks.useLayout();
+    props = __rest(_a, ["children", "item", "className", "width", "height", "size", "eager", "alt", "title", "onClick", "onLoaded", "canLoad", "as"]);
   const {
     id,
     open
@@ -4648,7 +4865,6 @@ const MediaBase = /*#__PURE__*/React.forwardRef((_a, ref) => {
   const classNames = bomCore.getClassNames(className, 'media', {
     'media--gallery': id
   });
-  // console.log('props.width', props.width, 'props.height', props.height);
   const style = {};
   if (typeof width === 'string' && width.indexOf('px') !== -1) {
     style.width = width;
@@ -4656,28 +4872,31 @@ const MediaBase = /*#__PURE__*/React.forwardRef((_a, ref) => {
   if (typeof height === 'string' && height.indexOf('px') !== -1) {
     style.height = height;
   }
-  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,
-    title,
-    locale,
-    open
-  }) : children;
   return jsxRuntime.jsx(StyledMedia$1, Object.assign({
     className: classNames,
     ref: ref,
     as: as
   }, props, style, {
-    children: mediaChildren
+    children: children ? children : item && jsxRuntime.jsx(MediaItems, {
+      item: item,
+      options: {
+        width,
+        height,
+        aspectRatio: props.aspectRatio,
+        aspectRatioSm: props.aspectRatioSm,
+        aspectRatioMd: props.aspectRatioMd,
+        aspectRatioLg: props.aspectRatioLg,
+        aspectRatioXl: props.aspectRatioXl,
+        galleryId: id,
+        size,
+        eager,
+        alt,
+        title,
+        open,
+        onLoaded,
+        canLoad
+      }
+    })
   }));
 });
 MediaBase.displayName = 'Media';
@@ -4685,136 +4904,6 @@ const Media = bomCore.withSchema(MediaBase, {
   Info: MediaInfo,
   displayName: 'Media'
 });
-const StyledVideo = styled__default.default('video')`
-  &.video {
-    &--muted {
-      &::cue {
-        background-color: transparent;
-        background-image: none;
-        color: transparent;
-        font-size: 0;
-      }
-    }
-  }
-`;
-function getMediaItems(itemOrItems, options) {
-  if (options === void 0) {
-    options = {};
-  }
-  // !!! todo remap payloadcms media
-  const items = (Array.isArray(itemOrItems) ? itemOrItems : [itemOrItems]).map(x => {
-    if (typeof x['media'] === 'object') {
-      x = x['media'];
-    }
-    const mediaItem = {
-      type: x.type,
-      src: typeof x.url === 'string' ? x.url : x.src
-    };
-    if (x.abstract) {
-      mediaItem.abstract = x.abstract;
-    }
-    if (x.alt) {
-      mediaItem.alt = x.alt;
-    }
-    if (x.mimeType) {
-      mediaItem.mimeType = x.mimeType;
-    }
-    if (x.title) {
-      mediaItem.title = x.title;
-    }
-    mediaItem.width = options.width || x.width;
-    /*
-    if (options.width) {
-      mediaItem.width = parseInt(String(options.width));
-    } else if (x.width) {
-      mediaItem.width = x.width;
-    }
-    */
-    mediaItem.height = options.height || x.height;
-    /*
-    if (options.height) {
-      mediaItem.height = parseInt(String(options.height));
-    } else if (x.height) {
-      mediaItem.height = x.height;
-    }
-    */
-    mediaItem.aspectRatio = options.aspectRatio;
-    mediaItem.aspectRatioSm = options.aspectRatioSm;
-    mediaItem.aspectRatioMd = options.aspectRatioMd;
-    mediaItem.aspectRatioLg = options.aspectRatioLg;
-    mediaItem.aspectRatioXl = options.aspectRatioXl;
-    return mediaItem;
-  });
-  const hasGallery = options.galleryId != null && typeof options.open === 'function';
-  const getMediaItemProps = _a => {
-    var media = __rest(_a, ["width", "height"]);
-    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,
-      size: options.size
-    };
-    if (hasGallery) {
-      props['data-gallery'] = JSON.stringify({
-        galleryId: options.galleryId,
-        media
-      });
-      props.onClick = event => {
-        if (options.open) {
-          options.open(media);
-        }
-      };
-    }
-    if (bomCore.resolveMediaType(media) === 'image') {
-      /*
-      let width: number | undefined = undefined;
-      let height: number | undefined = undefined;
-      if (options.width) {
-        width = parseInt(String(options.width));
-      }
-      props.width = width;
-      if (options.height) {
-        height = parseInt(String(options.height));
-      }
-      props.height = height;
-      console.log('width', width, options.width, 'height', height, options.height);
-      */
-      props.width = options.width;
-      props.height = options.height;
-      props.aspectRatio = options.aspectRatio;
-      props.aspectRatioSm = options.aspectRatioSm;
-      props.aspectRatioMd = options.aspectRatioMd;
-      props.aspectRatioLg = options.aspectRatioLg;
-      props.aspectRatioXl = options.aspectRatioXl;
-      if (options.eager) {
-        props.loading = 'eager';
-      }
-    }
-    return props;
-  };
-  return items.map((media, m) => bomCore.resolveMediaType(media) === 'video' ? jsxRuntime.jsxs(StyledVideo, Object.assign({
-    className: "video video--muted",
-    playsInline: true,
-    autoPlay: true,
-    muted: true,
-    loop: true
-  }, getMediaItemProps(media), {
-    children: [jsxRuntime.jsx("source", {
-      src: media.src,
-      type: "video/mp4"
-    }), options.locale && jsxRuntime.jsx("track", {
-      src: `/captions.vtt?locale=${options.locale}&title=${media.title}`,
-      kind: "captions",
-      srcLang: options.locale,
-      label: "Video Captions"
-    })]
-  }), m) : jsxRuntime.jsx(MediaImage, Object.assign({
-    draggable: false
-  }, getMediaItemProps(media)), m));
-}
 
 const ModalContext = /*#__PURE__*/React.createContext({});
 function useModalContext() {
@@ -16981,7 +17070,7 @@ const ProductsHeroCard = _a => {
       borderRadius: "0.4rem",
       justifyContent: "flex-end",
       children: [jsxRuntime.jsx(Card.Background, {
-        children: jsxRuntime.jsx(Media, {
+        children: item.media && jsxRuntime.jsx(Media, {
           overlay: 0.2,
           item: item.media
         })
@@ -20651,6 +20740,7 @@ exports.CssInputContainerDefault = CssInputContainerDefault;
 exports.CssInputDefault = CssInputDefault;
 exports.CssInputReset = CssInputReset;
 exports.CssLabelDefault = CssLabelDefault;
+exports.CssMap = CssMap;
 exports.CssPrint = CssPrint;
 exports.CssRadioCardDefault = CssRadioCardDefault;
 exports.CssRadioColorDefault = CssRadioColorDefault;
@@ -20722,6 +20812,9 @@ exports.MarketsAndLanguagesDrawer = MarketsAndLanguagesDrawer;
 exports.Media = Media;
 exports.MediaGallery = MediaGallery;
 exports.MediaImage = MediaImage;
+exports.MediaItem = MediaItem;
+exports.MediaItems = MediaItems;
+exports.MediaVideo = MediaVideo;
 exports.Meta = Meta;
 exports.Modal = Modal;
 exports.Nav = Nav;
@@ -20850,6 +20943,7 @@ exports.mediaUp = mediaUp;
 exports.pickChild = pickChild;
 exports.pickChildByProps = pickChildByProps;
 exports.pickChildrenFirst = pickChildrenFirst;
+exports.pickResponsiveProps = pickResponsiveProps;
 exports.radioCardVariants = radioCardVariants;
 exports.radioColorVariants = radioColorVariants;
 exports.radioOptionVariants = radioOptionVariants;