@websolutespa/bom-mixer-ui 1.8.5 → 1.8.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @websolutespa/bom-mixer-ui
 
+## 1.8.7
+
+### Patch Changes
+
+- Fixing: MediaVideo & SvgAnimation src change issue
+
+## 1.8.6
+
+### Patch Changes
+
+- Modified: Meta, MediaGallery
+
 ## 1.8.5
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -4701,36 +4701,59 @@ const MediaVideo_ = _a => {
   var {
       className,
       onLoaded,
-      canLoad = true,
-      src
+      canLoad = true
     } = _a,
-    props = __rest(_a, ["className", "onLoaded", "canLoad", "src"]);
+    props = __rest(_a, ["className", "onLoaded", "canLoad"]);
   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);
-    }
-  };
+  const [src, setSrc] = React.useState();
   React.useEffect(() => {
-    if (videoRef.current && canLoad) {
+    if (videoRef.current && src) {
       const video = videoRef.current;
-      if (video.readyState && video.readyState >= 2) {
-        if (typeof onLoaded === 'function') {
+      const onReadyState = () => {
+        if (typeof onLoaded === 'function' && videoRef.current && videoRef.current.readyState && videoRef.current.readyState >= 2) {
           onLoaded(videoRef);
         }
+      };
+      if (video.readyState && video.readyState >= 2) {
+        onReadyState();
       } else {
-        video.addEventListener('loadeddata', onLoad);
+        video.addEventListener('loadeddata', onReadyState);
         return () => {
-          video.removeEventListener('loadeddata', onLoad);
+          video.removeEventListener('loadeddata', onReadyState);
         };
       }
     }
     return () => {};
-  }, [videoRef, canLoad]);
+  }, [videoRef, onLoaded, src]);
+  const isIntersecting = bomMixerHooks.useIntersectionObserver(videoRef, {
+    threshold: 0,
+    root: null,
+    rootMargin: '0px'
+  });
+  // handle intersection
+  React.useEffect(() => {
+    if (isIntersecting && canLoad) {
+      // on enter
+      if (src !== props.src) {
+        setSrc(props.src);
+      } else {
+        if (!videoRef.current) {
+          return;
+        }
+        videoRef.current.play();
+      }
+    } else {
+      // on exit
+      if (!videoRef.current) {
+        return;
+      }
+      videoRef.current.pause();
+    }
+  }, [isIntersecting, canLoad, videoRef, src, props.src]);
+  const classNames = bomCore.getClassNames(className, 'video', 'video--muted');
   return jsxRuntime.jsx(StyledMediaVideo, Object.assign({
     ref: videoRef,
     className: classNames,
@@ -4739,7 +4762,7 @@ const MediaVideo_ = _a => {
     muted: true,
     loop: true
   }, props, {
-    children: canLoad && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: src && jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [jsxRuntime.jsx("source", {
         src: src,
         type: "video/mp4"
@@ -5514,7 +5537,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;
@@ -5646,8 +5670,8 @@ MediaGallery.displayName = 'MediaGallery';
 function Meta(_ref) {
   let {
     children,
-    websiteName = 'WebsiteName',
-    structuredDataCollections
+    structuredDataCollections,
+    brand
   } = _ref;
   var _a, _b, _e;
   const page = bomMixerHooks.usePage();
@@ -5688,7 +5712,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
@@ -5716,7 +5740,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
@@ -6997,7 +7021,7 @@ const SvgAnimation = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [shouldLoad]);
+  }, [shouldLoad, href]);
   // handle intersection
   React.useEffect(() => {
     if (isIntersecting) {
@@ -7035,7 +7059,7 @@ const SvgAnimation = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
         playerRef.current.stop();
       }
     }
-  }, [isIntersecting, mode, shouldLoad]);
+  }, [isIntersecting, mode, shouldLoad, href]);
   // handle scroll
   React.useEffect(() => {
     const scrollElement = mode === SvgAnimationStrategy.Scroll ? scrollableRef ? scrollableRef.current : window : undefined;