[Release] Stage to Main

libs/blocks/global-navigation/global-navigation.js

@@ -621,10 +621,12 @@ class Gnav {
       children: getChildren(),
     });
 
-    window.UniversalNav(getConfiguration());
+    // Exposing UNAV config for consumers
+    CONFIG.universalNav.universalNavConfig = getConfiguration();
+    window.UniversalNav(CONFIG.universalNav.universalNavConfig);
 
     isDesktop.addEventListener('change', () => {
-      window.UniversalNav.reload(getConfiguration());
+      window.UniversalNav.reload(CONFIG.universalNav.universalNavConfig);
     });
   };
 

libs/blocks/video/video.js

@@ -1,5 +1,5 @@
 import { createIntersectionObserver, getConfig } from '../../utils/utils.js';
-import { applyHoverPlay, getVideoAttrs } from '../../utils/decorate.js';
+import { applyHoverPlay, getVideoAttrs, applyInViewPortPlay } from '../../utils/decorate.js';
 
 const ROOT_MARGIN = 1000;
 
@@ -23,6 +23,7 @@ const loadVideo = (a) => {
   a.insertAdjacentHTML('afterend', video);
   const videoElem = document.body.querySelector(`source[src="${videoPath}"]`)?.parentElement;
   applyHoverPlay(videoElem);
+  applyInViewPortPlay(videoElem);
   a.remove();
 };
 

libs/styles/styles.css

@@ -108,7 +108,7 @@
   /* grid sizes */
   --grid-container-width: 83.4%;
   --grid-column-width: calc(var(--grid-container-width) / 12);
-  --grid-margins-width: calc((100vw - var(--grid-container-width)) / 2);
+  --grid-margins-width: calc((100% - var(--grid-container-width)) / 2);
   --grid-margins-width-10: calc((100vw - (var(--grid-column-width) * 10)) / 2);
   --grid-margins-width-8: calc((100vw - (var(--grid-column-width) * 8)) / 2);
   --grid-margins-width-6: calc((100vw - (var(--grid-column-width) * 6)) / 2);

libs/utils/decorate.js

@@ -174,12 +174,14 @@ export function getVideoAttrs(hash, dataset) {
   const isAutoplay = hash?.includes('autoplay');
   const isAutoplayOnce = hash?.includes('autoplay1');
   const playOnHover = hash?.includes('hoverplay');
+  const playInViewport = hash?.includes('viewportplay');
   const poster = dataset?.videoPoster ? `poster='${dataset.videoPoster}'` : '';
   const globalAttrs = `playsinline ${poster}`;
   const autoPlayAttrs = 'autoplay muted';
+  const playInViewportAttrs = playInViewport ? 'data-play-viewport' : '';
 
   if (isAutoplay && !isAutoplayOnce) {
-    return `${globalAttrs} ${autoPlayAttrs} loop`;
+    return `${globalAttrs} ${autoPlayAttrs} loop ${playInViewportAttrs}`;
   }
   if (playOnHover && isAutoplayOnce) {
     return `${globalAttrs} ${autoPlayAttrs} data-hoverplay`;
@@ -188,7 +190,7 @@ export function getVideoAttrs(hash, dataset) {
     return `${globalAttrs} muted data-hoverplay`;
   }
   if (isAutoplayOnce) {
-    return `${globalAttrs} ${autoPlayAttrs}`;
+    return `${globalAttrs} ${autoPlayAttrs} ${playInViewportAttrs}`;
   }
   return `${globalAttrs} controls`;
 }
@@ -225,3 +227,35 @@ export function handleObjectFit(bgRow) {
     setObjectFitAndPos(text, pic, r, ['fill', 'contain', 'cover', 'none', 'scale-down']);
   });
 }
+
+export function getVideoIntersectionObserver() {
+  if (!window?.videoIntersectionObs) {
+    window.videoIntersectionObs = new window.IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        const { intersectionRatio, target: video } = entry;
+        const isHaveLoopAttr = video.getAttributeNames().includes('loop');
+        const { playedOnce = false } = video.dataset;
+        const isPlaying = video.currentTime > 0 && !video.paused && !video.ended
+        && video.readyState > video.HAVE_CURRENT_DATA;
+
+        if (intersectionRatio <= 0.8) {
+          video.pause();
+        } else if ((isHaveLoopAttr || !playedOnce) && !isPlaying) {
+          video.play();
+        }
+      });
+    }, { threshold: [0.8] });
+  }
+  return window.videoIntersectionObs;
+}
+
+export function applyInViewPortPlay(video) {
+  if (!video) return;
+  if (video.hasAttribute('data-play-viewport')) {
+    const observer = getVideoIntersectionObserver();
+    video.addEventListener('ended', () => {
+      video.dataset.playedOnce = true;
+    });
+    observer.observe(video);
+  }
+}

test/blocks/video/mocks/body.html

@@ -1,3 +1,8 @@
+<style>
+  video {
+    width: 100%;
+  }
+</style>
 <main>
   <div class="video no-lazy">
     <a href="https://main--blog--adobecom.hlx.page/media_17927691d22fe4e1bd058e94762a224fdc57ebb7b.mp4">
@@ -37,4 +42,48 @@
       https://main--milo--adobecom.hlx.page/media_1e798d01c6ddc7e7eadc8f134d69e4f8d7193fdbb.mp4#_hoverplay
     </a>
   </div>
+
+  <div class="video autoplay viewportplay ">
+    <a href="https://main--milo--adobecom.hlx.page/media_1e798d01c6ddc7e7eadc8f134d69e4f8d7193fdbb1.mp4#autoplay#viewportplay">
+      https://main--milo--adobecom.hlx.page/media_1e798d01c6ddc7e7eadc8f134d69e4f8d7193fdbb1.mp4#autoplay#viewportplay
+    </a>
+  </div>
+
+  <div class="video autoplay viewportplay scrolled-80">
+    <a href="https://main--milo--adobecom.hlx.page/media_1e798d01c6ddc7e7eadc8f134d69e4f8d7193fdbb8.mp4#autoplay#viewportplay">
+      https://main--milo--adobecom.hlx.page/media_1e798d01c6ddc7e7eadc8f134d69e4f8d7193fdbb8.mp4#autoplay#viewportplay
+    </a>
+  </div>
+  <div class="video autoplay1 viewportplay">
+    <a href="https://main--milo--adobecom.hlx.page/media_1e798d01c6ddc7e7eadc8f134d69e4f8d7193fdbb2.mp4#autoplay1#viewportplay">
+      https://main--milo--adobecom.hlx.page/media_1e798d01c6ddc7e7eadc8f134d69e4f8d7193fdbb2.mp4#autoplay1#viewportplay
+    </a>
+  </div>
+
+  <div class="video autoplay1 viewportplay ended">
+    <a href="https://main--milo--adobecom.hlx.page/media_1e798d01c6ddc7e7eadc8f134d69e4f8d7193fdbb8.mp4#autoplay1#viewportplay">
+      https://main--milo--adobecom.hlx.page/media_1e798d01c6ddc7e7eadc8f134d69e4f8d7193fdbb8.mp4#autoplay1#viewportplay
+    </a>
+  </div>
+
+  <div class="video no-autoplay no-viewportplay">
+    <a href="https://main--milo--adobecom.hlx.page/media_1e798d01c6ddc7e7eadc8f134d69e4f8d7193fdbb3.mp4#viewportplay">
+      https://main--milo--adobecom.hlx.page/media_1e798d01c6ddc7e7eadc8f134d69e4f8d7193fdbb3.mp4#viewportplay
+    </a>
+  </div>
+  <div class="video no-autoplay1 no-viewportplay">
+    <a href="https://main--milo--adobecom.hlx.page/media_1e798d01c6ddc7e7eadc8f134d69e4f8d7193fdbb4.mp4#viewportplay">
+      https://main--milo--adobecom.hlx.page/media_1e798d01c6ddc7e7eadc8f134d69e4f8d7193fdbb4.mp4#viewportplay
+    </a>
+  </div>
+  <div class="video hoverplay no-viewportplay">
+    <a href="https://main--milo--adobecom.hlx.page/media_1e798d01c6ddc7e7eadc8f134d69e4f8d7193fdbb5.mp4#viewportplay#_hoverplay">
+      https://main--milo--adobecom.hlx.page/media_1e798d01c6ddc7e7eadc8f134d69e4f8d7193fdbb5.mp4#viewportplay#_hoverplay
+    </a>
+  </div>
+  <div class="video autoplay1 hoverplay no-viewportplay">
+    <a href="https://main--milo--adobecom.hlx.page/media_1e798d01c6ddc7e7eadc8f134d69e4f8d7193fdbb6.mp4#autoplay1#_hoverplay#viewportplay">
+      https://main--milo--adobecom.hlx.page/media_1e798d01c6ddc7e7eadc8f134d69e4f8d7193fdbb6.mp4#autoplay1#_hoverplay#viewportplay
+    </a>
+  </div>
 </main>