https://main--blog--adobecom.hlx.page/media_17927691d22fe4e1bd058e94762a224fdc57ebb7b.mp4
diff --git a/test/blocks/video/video.test.js b/test/blocks/video/video.test.js
index e80298c650..9cfe5a104e 100644
--- a/test/blocks/video/video.test.js
+++ b/test/blocks/video/video.test.js
@@ -1,25 +1,20 @@
import { readFile } from '@web/test-runner-commands';
import { expect, assert } from '@esm-bundle/chai';
-
import sinon from 'sinon';
+import { waitFor, waitForElement } from '../../helpers/waitfor.js';
-import { waitForElement } from '../../helpers/waitfor.js';
import { setConfig } from '../../../libs/utils/utils.js';
setConfig({});
const { default: init } = await import('../../../libs/blocks/video/video.js');
-document.body.innerHTML = await readFile({ path: './mocks/body.html' });
describe('video uploaded using franklin bot', () => {
- it('decorates no-lazy video', async () => {
- const block = document.querySelector('.video.no-lazy');
- const a = block.querySelector('a');
- a.textContent = 'no-lazy';
- block.append(a);
+ beforeEach(async () => {
+ document.body.innerHTML = await readFile({ path: './mocks/body.html' });
+ });
- init(a);
- const video = await waitForElement('.video.no-lazy video');
- expect(video).to.exist;
+ afterEach(() => {
+ document.body.innerHTML = '';
});
it('decorates video', async () => {
@@ -74,7 +69,6 @@ describe('video uploaded using franklin bot', () => {
it('no hoverplay attribute added when with autoplay on loop', async () => {
const block = document.querySelector('.video.autoplay.playonhover');
const a = block.querySelector('a');
- a.textContent = 'no-lazy';
block.append(a);
init(a);
@@ -86,7 +80,6 @@ describe('video uploaded using franklin bot', () => {
it('decorate video with hoverplay when only hoverplay is added to url', async () => {
const block = document.querySelector('.video.hoveronly');
const a = block.querySelector('a');
- a.textContent = 'no-lazy';
block.append(a);
init(a);
@@ -97,7 +90,6 @@ describe('video uploaded using franklin bot', () => {
it('decorate video with viewportplay only with autoplay', async () => {
const block = document.querySelector('.video.autoplay.viewportplay');
const a = block.querySelector('a');
- a.textContent = 'no-lazy';
block.append(a);
init(a);
@@ -108,7 +100,6 @@ describe('video uploaded using franklin bot', () => {
it('play video when element reached 80% viewport', async () => {
const block = document.querySelector('.video.autoplay.viewportplay.scrolled-80');
const a = block.querySelector('a');
- a.textContent = 'no-lazy';
block.append(a);
const nextFrame = () => new Promise((resolve) => {
requestAnimationFrame(resolve);
@@ -116,13 +107,10 @@ describe('video uploaded using franklin bot', () => {
init(a);
const video = block.querySelector('video');
- const source = video.querySelector('source');
- source.setAttribute('src', 'https://www.adobe.com/creativecloud/media_1167374e3354ef57f126fa78a55cbc1708ac4babd.mp4');
- source.setAttribute('type', 'video/mp4');
-
const playSpy = sinon.spy(video, 'play');
const pauseSpy = sinon.spy(video, 'pause');
-
+ const intersectionObserverAddsSource = () => video.querySelector('source');
+ await waitFor(intersectionObserverAddsSource);
video.scrollIntoView();
await nextFrame();
await new Promise((resolve) => {
@@ -130,20 +118,22 @@ describe('video uploaded using franklin bot', () => {
});
assert.isTrue(playSpy.calledOnce);
- document.body.scrollIntoView();
+ // push the video out of the viewport
+ const div = document.createElement('div');
+ div.style.height = '2000px';
+ video.parentNode.insertBefore(div, video);
+
await nextFrame();
await new Promise((resolve) => {
setTimeout(resolve, 100);
});
assert.isTrue(pauseSpy.calledOnce);
-
expect(video.hasAttribute('data-play-viewport')).to.be.true;
});
it('Don\'t play the video once it end when autoplay1 enabled', async () => {
const block = document.querySelector('.video.autoplay1.viewportplay.ended');
const a = block.querySelector('a');
- a.textContent = 'no-lazy';
block.append(a);
const nextFrame = () => new Promise((resolve) => {
requestAnimationFrame(resolve);
@@ -151,15 +141,13 @@ describe('video uploaded using franklin bot', () => {
init(a);
const video = block.querySelector('video');
- const source = video.querySelector('source');
- source.setAttribute('src', 'https://www.adobe.com/creativecloud/media_1167374e3354ef57f126fa78a55cbc1708ac4babd.mp4');
- source.setAttribute('type', 'video/mp4');
-
const playSpy = sinon.spy(video, 'play');
const pauseSpy = sinon.spy(video, 'pause');
const endedSpy = sinon.spy();
- video.addEventListener('ended', endedSpy);
+ const intersectionObserverAddsSource = () => video.querySelector('source');
+ await waitFor(intersectionObserverAddsSource);
+ video.addEventListener('ended', endedSpy);
video.scrollIntoView();
await nextFrame();
await new Promise((resolve) => {
@@ -167,13 +155,16 @@ describe('video uploaded using franklin bot', () => {
});
assert.isTrue(playSpy.calledOnce);
- document.body.scrollIntoView();
+ // push the video out of the viewport
+ const div = document.createElement('div');
+ div.style.height = '2000px';
+ video.parentNode.insertBefore(div, video);
+
await nextFrame();
await new Promise((resolve) => {
setTimeout(resolve, 100);
});
assert.isTrue(pauseSpy.calledOnce);
-
video.dispatchEvent(new Event('ended'));
await nextFrame();
await new Promise((resolve) => {
@@ -193,7 +184,6 @@ describe('video uploaded using franklin bot', () => {
it('decorate video with viewportplay only with autoplay1', async () => {
const block = document.querySelector('.video.autoplay1.viewportplay');
const a = block.querySelector('a');
- a.textContent = 'no-lazy';
block.append(a);
init(a);
@@ -204,7 +194,6 @@ describe('video uploaded using franklin bot', () => {
it('decorate video with no viewportplay with autoplay1 hoverplay', async () => {
const block = document.querySelector('.video.autoplay1.hoverplay.no-viewportplay');
const a = block.querySelector('a');
- a.textContent = 'no-lazy';
block.append(a);
init(a);
@@ -215,7 +204,6 @@ describe('video uploaded using franklin bot', () => {
it('decorate video with no viewportplay with hoverplay', async () => {
const block = document.querySelector('.video.hoverplay.no-viewportplay');
const a = block.querySelector('a');
- a.textContent = 'no-lazy';
block.append(a);
init(a);
@@ -226,7 +214,6 @@ describe('video uploaded using franklin bot', () => {
it('decorate video with no viewportplay no autoplay', async () => {
const block = document.querySelector('.video.no-autoplay.no-viewportplay');
const a = block.querySelector('a');
- a.textContent = 'no-lazy';
block.append(a);
init(a);
@@ -237,7 +224,6 @@ describe('video uploaded using franklin bot', () => {
it('decorate video with no viewportplay no autoplay1', async () => {
const block = document.querySelector('.video.no-autoplay1.no-viewportplay');
const a = block.querySelector('a');
- a.textContent = 'no-lazy';
block.append(a);
init(a);
From 96de2ac63b332bf974f5f88f3a539acced29053d Mon Sep 17 00:00:00 2001
From: Okan Sahin <39759830+mokimo@users.noreply.github.com>
Date: Thu, 15 Aug 2024 11:46:46 +0200
Subject: [PATCH 7/8] Revert "MWPW-155412: Fix video CLS netting +10 lighthouse
points" (#2748)
Revert "MWPW-155412: Fix video CLS netting +10 lighthouse points (#2724)"
This reverts commit e9fa6999fba638b4ff1847a063655a5687d6d88a.
---
libs/blocks/adobetv/adobetv.js | 35 +++++++++++++-----
libs/blocks/video/video.js | 41 +++++++++++++++------
libs/utils/decorate.js | 24 ++-----------
test/blocks/adobetv/adobetv.test.js | 11 ++++++
test/blocks/adobetv/mocks/body.html | 2 +-
test/blocks/marquee/marquee.test.js | 21 +++--------
test/blocks/video/mocks/body.html | 2 +-
test/blocks/video/video.test.js | 56 ++++++++++++++++++-----------
8 files changed, 112 insertions(+), 80 deletions(-)
diff --git a/libs/blocks/adobetv/adobetv.js b/libs/blocks/adobetv/adobetv.js
index 5a13b37cfd..31cfc7a368 100644
--- a/libs/blocks/adobetv/adobetv.js
+++ b/libs/blocks/adobetv/adobetv.js
@@ -1,16 +1,22 @@
-import { turnAnchorIntoVideo } from '../../utils/decorate.js';
+import { createIntersectionObserver } from '../../utils/utils.js';
+import { applyHoverPlay, getVideoAttrs } from '../../utils/decorate.js';
-export default function init(a) {
- a.classList.add('hide-video');
+const ROOT_MARGIN = 1000;
+
+const loadAdobeTv = (a) => {
const bgBlocks = ['aside', 'marquee', 'hero-marquee'];
if (a.href.includes('.mp4') && bgBlocks.some((b) => a.closest(`.${b}`))) {
a.classList.add('hide');
+ const { href, hash, dataset } = a;
+ const attrs = getVideoAttrs(hash || 'autoplay', dataset);
+ const video = `
`;
if (!a.parentNode) return;
- turnAnchorIntoVideo({
- hash: a.hash || 'autoplay',
- src: a.href,
- anchorTag: a,
- });
+ a.insertAdjacentHTML('afterend', video);
+ const videoElem = document.body.querySelector(`source[src="${href}"]`)?.parentElement;
+ applyHoverPlay(videoElem);
+ a.remove();
} else {
const embed = `