MWPW-135276 Fix video selector (adobecom#1129)

vgoodric · Feb 1, 2024 · 7aee741 · 7aee741
1 parent 3d7bf05
commit 7aee741
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 41 deletions.
diff --git a/libs/blocks/marquee/marquee.js b/libs/blocks/marquee/marquee.js
@@ -1,27 +1,26 @@
-/*
- * Copyright 2022 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
 /*
  * Marquee - v6.0
  */
-import { decorateButtons, getBlockSize, applyHoverPlay } from '../../utils/decorate.js';
+
+import { applyHoverPlay, decorateButtons, getBlockSize, getVideoAttrs } from '../../utils/decorate.js';
 import { decorateBlockAnalytics, decorateLinkAnalytics } from '../../martech/attributes.js';
 import { createTag } from '../../utils/utils.js';
 
 const decorateVideo = (container, src) => {
-  container.innerHTML = `<video preload="metadata" playsinline autoplay muted loop>
-    <source src="${src}" type="video/mp4" />
-  </video>`;
-  container.classList.add('has-video');
+  if (typeof src === 'string' || src?.href.endsWith('.mp4')) {
+    // no special attrs handling
+    container.innerHTML = `<video preload="metadata" playsinline autoplay muted loop>
+      <source src="${src}" type="video/mp4" />
+    </video>`;
+    container.classList.add('has-video');
+  } else {
+    const { href, hash } = src;
+    const attrs = getVideoAttrs(hash);
+    container.innerHTML = `<video ${attrs}>
+          <source src="${href}" type="video/mp4" />
+        </video>`;
+  }
+  return container.firstChild;
 };
 
 const decorateBlockBg = (block, node) => {
@@ -40,9 +39,13 @@ const decorateBlockBg = (block, node) => {
     if (childCount === 3) {
       child.classList.add(viewports[index]);
     }
-    const videoElement = child.querySelector('a[href$=".mp4"], video source[src$=".mp4"]');
+    const videoElement = child.querySelector('a[href*=".mp4"], video source[src$=".mp4"]');
     if (videoElement) {
-      decorateVideo(child, videoElement.href || videoElement.src);
+      const video = decorateVideo(child, videoElement.href || videoElement.src);
+      const hash = video.firstElementChild?.src.split('#')[1];
+      if (hash?.includes('autoplay1')) {
+        video.removeAttribute('loop');
+      }
     }
 
     const pic = child.querySelector('picture');
@@ -135,13 +138,14 @@ export default function init(el) {
 
   if (media) {
     media.classList.add('media');
-    const video = media.querySelector('video');
-    if (video) applyHoverPlay(video);
-    if (media.querySelector('a[href$=".mp4"]')) {
-      decorateVideo(media);
+    let video = media.querySelector('video');
+    const videoLink = media.querySelector('a[href*=".mp4"]');
+    if (videoLink) {
+      video = decorateVideo(media, videoLink);
     } else {
       decorateImage(media);
     }
+    if (video) applyHoverPlay(video);
   }
 
   const firstDivInForeground = foreground.querySelector(':scope > div');

diff --git a/libs/blocks/video/video.js b/libs/blocks/video/video.js
@@ -1,24 +1,8 @@
-import { applyHoverPlay } from '../../utils/decorate.js';
-
-function getAttrs(hash) {
-  const isAutoplay = hash?.includes('autoplay');
-  const isAutoplayOnce = hash?.includes('autoplay1');
-  const playOnHover = hash.includes('hoverplay');
-  if (isAutoplay && !isAutoplayOnce) {
-    return 'playsinline autoplay loop muted';
-  }
-  if (playOnHover && isAutoplayOnce) {
-    return 'playsinline autoplay muted data-hoverplay';
-  }
-  if (isAutoplayOnce) {
-    return 'playsinline autoplay muted';
-  }
-  return 'playsinline controls';
-}
+import { applyHoverPlay, getVideoAttrs } from '../../utils/decorate.js';
 
 export default function init(a) {
   const { pathname, hash } = a;
-  const attrs = getAttrs(hash);
+  const attrs = getVideoAttrs(hash);
   const video = `<video ${attrs}>
         <source src=".${pathname}" type="video/mp4" />
       </video>`;

diff --git a/libs/utils/decorate.js b/libs/utils/decorate.js
@@ -116,7 +116,24 @@ export function decorateIconStack(el) {
   });
 }
 
+export function getVideoAttrs(hash) {
+  const isAutoplay = hash?.includes('autoplay');
+  const isAutoplayOnce = hash?.includes('autoplay1');
+  const playOnHover = hash.includes('hoverplay');
+  if (isAutoplay && !isAutoplayOnce) {
+    return 'playsinline autoplay loop muted';
+  }
+  if (playOnHover && isAutoplayOnce) {
+    return 'playsinline autoplay muted data-hoverplay';
+  }
+  if (isAutoplayOnce) {
+    return 'playsinline autoplay muted';
+  }
+  return 'playsinline controls';
+}
+
 export function applyHoverPlay(video) {
+  if (!video) return;
   if (video.hasAttribute('data-hoverplay') && !video.hasAttribute('data-mouseevent')) {
     video.addEventListener('mouseenter', () => { video.play(); });
     video.addEventListener('mouseleave', () => { video.pause(); });