@websolutespa/bom-mixer-ui 1.8.6 → 1.8.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @websolutespa/bom-mixer-ui
 
+## 1.8.7
+
+### Patch Changes
+
+- Fixing: MediaVideo & SvgAnimation src change issue
+
 ## 1.8.6
 
 ### 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"
@@ -6998,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) {
@@ -7036,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;