@wix/editor-react-components 1.2714.0 → 1.2716.0

package/dist/site/components/TransparentVideo/component.js

@@ -3357,6 +3357,57 @@ function useTransparentVideo(props) {
       controllerRef.current = null;
     };
   }, [canPlayTransparentVideo]);
+  useEffect(() => {
+    const videoElement = videoRef.current;
+    const player = playerRef.current;
+    if (!canPlayTransparentVideo || videoStartType !== VideoStartType.auto || !videoElement || !player) {
+      return;
+    }
+    let started = false;
+    let isIntersecting = false;
+    let pausedByViewport = false;
+    let pausingByViewport = false;
+    const onPlay = () => {
+      if (!started && !isIntersecting) {
+        pausedByViewport = true;
+        pausingByViewport = true;
+        videoElement.pause();
+        return;
+      }
+      pausedByViewport = false;
+    };
+    const onPause = () => {
+      if (pausingByViewport) {
+        pausingByViewport = false;
+        return;
+      }
+      pausedByViewport = false;
+    };
+    const observer = new IntersectionObserver((entries) => {
+      var _a;
+      isIntersecting = entries[entries.length - 1].isIntersecting;
+      if (isIntersecting) {
+        if (!started || pausedByViewport) {
+          started = true;
+          pausedByViewport = false;
+          (_a = videoElement.play()) == null ? void 0 : _a.catch(() => {
+          });
+        }
+      } else if (!videoElement.paused) {
+        pausedByViewport = true;
+        pausingByViewport = true;
+        videoElement.pause();
+      }
+    });
+    videoElement.addEventListener("play", onPlay);
+    videoElement.addEventListener("pause", onPause);
+    observer.observe(player);
+    return () => {
+      observer.disconnect();
+      videoElement.removeEventListener("play", onPlay);
+      videoElement.removeEventListener("pause", onPause);
+    };
+  }, [canPlayTransparentVideo, videoStartType]);
   const isPlaying = playingState === VideoPlayingState.playing;
   const shouldAutoplay = videoStartType === VideoStartType.auto;
   const shouldReplay = videoEndType !== VideoEndType.stop;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2714.0",
+  "version": "1.2716.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -85,7 +85,7 @@
     "@wix/site-service-configuration": "^1.0.1",
     "@wix/site-service-experiments": "^1.0.4",
     "@wix/site-service-rendering-context": "^1.0.1",
-    "@wix/site-ui": "1.280.0",
+    "@wix/site-ui": "1.281.0",
     "@wix/video": "^1.106.0",
     "@wix/viewer-service-consent-policy": "^1.0.103",
     "@wix/web-bi-logger": "^2.1.29",
@@ -200,5 +200,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "0243bf04c3595a0cbdddbb57fab204dfc607f4522d3d8cfba1b31522"
+  "falconPackageHash": "99cd60a0bcf982fa5b28540481a33bf0f3feadbb0104a206e8c4bd05"
 }