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 38f68ed5a4f3e23ca3427dd4bc0841c9e3a6a90c Mon Sep 17 00:00:00 2001
From: Okan Sahin
Date: Thu, 15 Aug 2024 10:16:24 +0200
Subject: [PATCH 02/14] Add default hash at in the right spot
---
libs/blocks/adobetv/adobetv.js | 1 -
libs/blocks/video/video.js | 1 -
libs/utils/decorate.js | 8 +++-----
3 files changed, 3 insertions(+), 7 deletions(-)
diff --git a/libs/blocks/adobetv/adobetv.js b/libs/blocks/adobetv/adobetv.js
index 5a13b37cfd..99d2b6ea75 100644
--- a/libs/blocks/adobetv/adobetv.js
+++ b/libs/blocks/adobetv/adobetv.js
@@ -7,7 +7,6 @@ export default function init(a) {
a.classList.add('hide');
if (!a.parentNode) return;
turnAnchorIntoVideo({
- hash: a.hash || 'autoplay',
src: a.href,
anchorTag: a,
});
diff --git a/libs/blocks/video/video.js b/libs/blocks/video/video.js
index 728aa08964..18dd65056b 100644
--- a/libs/blocks/video/video.js
+++ b/libs/blocks/video/video.js
@@ -15,7 +15,6 @@ export default function init(a) {
videoPath = `${root}${mediaFilename}`;
}
turnAnchorIntoVideo({
- hash: a.hash,
src: videoPath,
anchorTag: a,
});
diff --git a/libs/utils/decorate.js b/libs/utils/decorate.js
index c3c86a68b0..4bdbe881f6 100644
--- a/libs/utils/decorate.js
+++ b/libs/utils/decorate.js
@@ -112,8 +112,6 @@ export async function decorateBlockBg(block, node, { useHandleFocalpoint = false
const allVP = [['mobile-only'], ['tablet-only'], ['desktop-only']];
const viewports = childCount === 2 ? binaryVP : allVP;
[...node.children].forEach((child, i) => {
- const videoLink = child.querySelector('a[href*=".mp4"]');
- if (videoLink && !videoLink.hash) videoLink.hash = 'autoplay';
if (childCount > 1) child.classList.add(...viewports[i]);
const pic = child.querySelector('picture');
if (useHandleFocalpoint && pic
@@ -309,10 +307,10 @@ export function decorateMultiViewport(el) {
return foreground;
}
-export function turnAnchorIntoVideo({ hash, src, anchorTag }) {
+export function turnAnchorIntoVideo({ src, anchorTag, hash }) {
const { dataset, parentElement } = anchorTag;
- const attrs = getVideoAttrs(hash, dataset);
- const video = ``;
+ const attrs = getVideoAttrs(hash || anchorTag.hash, dataset);
+ const video = ``;
anchorTag.insertAdjacentHTML('afterend', video);
const videoEl = parentElement.querySelector('video');
createIntersectionObserver({
From ac12fbb3cbd7af262ebe6ca970e96be4004351e7 Mon Sep 17 00:00:00 2001
From: Okan Sahin
Date: Thu, 15 Aug 2024 15:12:02 +0200
Subject: [PATCH 03/14] Fix the figure/video interaction
---
libs/blocks/figure/figure.js | 35 +++++++++++++++++------------------
1 file changed, 17 insertions(+), 18 deletions(-)
diff --git a/libs/blocks/figure/figure.js b/libs/blocks/figure/figure.js
index 8275b18e93..4aa1db8ae3 100644
--- a/libs/blocks/figure/figure.js
+++ b/libs/blocks/figure/figure.js
@@ -1,4 +1,5 @@
-import { applyHoverPlay, getVideoAttrs } from '../../utils/decorate.js';
+import { applyHoverPlay, turnAnchorIntoVideo } from '../../utils/decorate.js';
+import { createTag } from '../../utils/utils.js';
function buildCaption(pEl) {
const figCaptionEl = document.createElement('figcaption');
@@ -15,23 +16,21 @@ function htmlToElement(html) {
}
function decorateVideo(clone, figEl) {
- let video = clone.querySelector('video');
- const videoLink = clone.querySelector('a[href*=".mp4"]');
- if (videoLink) {
- const { href, hash, dataset } = videoLink;
- const attrs = getVideoAttrs(hash, dataset);
- const videoElem = ``;
-
- videoLink.insertAdjacentHTML('afterend', videoElem);
- videoLink.remove();
- video = clone.querySelector('video');
- }
- if (video) {
- video.removeAttribute('data-mouseevent');
- applyHoverPlay(video);
- figEl.prepend(video);
+ const videoTag = clone.querySelector('video');
+ const anchorTag = clone.querySelector('a[href*=".mp4"]');
+ if (anchorTag) turnAnchorIntoVideo({ src: anchorTag.href, anchorTag });
+ if (videoTag) {
+ videoTag.removeAttribute('data-mouseevent');
+ if (videoTag.dataset?.videoSource) {
+ videoTag.appendChild(
+ createTag('source', {
+ src: videoTag.dataset?.videoSource,
+ type: 'video/mp4',
+ }),
+ );
+ }
+ applyHoverPlay(videoTag);
+ figEl.prepend(videoTag);
}
}
From d7e2f6d9b87035a0b930965ac235ba73e1131de3 Mon Sep 17 00:00:00 2001
From: Okan Sahin
Date: Thu, 15 Aug 2024 15:19:56 +0200
Subject: [PATCH 04/14] Remove unused export statement
---
libs/utils/decorate.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/libs/utils/decorate.js b/libs/utils/decorate.js
index 4bdbe881f6..27635de6f5 100644
--- a/libs/utils/decorate.js
+++ b/libs/utils/decorate.js
@@ -197,7 +197,7 @@ export function getImgSrc(pic) {
return source?.srcset ? `poster='${source.srcset}'` : '';
}
-export function getVideoAttrs(hash, dataset) {
+function getVideoAttrs(hash, dataset) {
const isAutoplay = hash?.includes('autoplay');
const isAutoplayOnce = hash?.includes('autoplay1');
const playOnHover = hash?.includes('hoverplay');
From c188d1c12eb919b84c6fff7463ac8d8ae65d3717 Mon Sep 17 00:00:00 2001
From: Okan Sahin
Date: Fri, 23 Aug 2024 11:23:30 +0200
Subject: [PATCH 05/14] Keep the previous defaults
---
libs/blocks/adobetv/adobetv.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/libs/blocks/adobetv/adobetv.js b/libs/blocks/adobetv/adobetv.js
index 99d2b6ea75..7635da82e3 100644
--- a/libs/blocks/adobetv/adobetv.js
+++ b/libs/blocks/adobetv/adobetv.js
@@ -9,6 +9,7 @@ export default function init(a) {
turnAnchorIntoVideo({
src: a.href,
anchorTag: a,
+ hash: a.hash || 'autoplay',
});
} else {
const embed = `
From bf367ad1c3afb6ff267dd002d761e8e8fd2eb1ad Mon Sep 17 00:00:00 2001
From: Okan Sahin
Date: Mon, 9 Sep 2024 11:30:22 +0200
Subject: [PATCH 06/14] Re-add adding autoplay
---
libs/blocks/adobetv/adobetv.js | 1 -
libs/utils/decorate.js | 4 ++--
2 files changed, 2 insertions(+), 3 deletions(-)
diff --git a/libs/blocks/adobetv/adobetv.js b/libs/blocks/adobetv/adobetv.js
index 7635da82e3..99d2b6ea75 100644
--- a/libs/blocks/adobetv/adobetv.js
+++ b/libs/blocks/adobetv/adobetv.js
@@ -9,7 +9,6 @@ export default function init(a) {
turnAnchorIntoVideo({
src: a.href,
anchorTag: a,
- hash: a.hash || 'autoplay',
});
} else {
const embed = `
diff --git a/libs/utils/decorate.js b/libs/utils/decorate.js
index 27635de6f5..2a5961f2d4 100644
--- a/libs/utils/decorate.js
+++ b/libs/utils/decorate.js
@@ -307,9 +307,9 @@ export function decorateMultiViewport(el) {
return foreground;
}
-export function turnAnchorIntoVideo({ src, anchorTag, hash }) {
+export function turnAnchorIntoVideo({ src, anchorTag }) {
const { dataset, parentElement } = anchorTag;
- const attrs = getVideoAttrs(hash || anchorTag.hash, dataset);
+ const attrs = getVideoAttrs(anchorTag.hash || 'autoplay', dataset);
const video = `
`;
anchorTag.insertAdjacentHTML('afterend', video);
const videoEl = parentElement.querySelector('video');
From 253feca1bf37b56db53efe334ac06b007652d53b Mon Sep 17 00:00:00 2001
From: Okan Sahin
Date: Mon, 9 Sep 2024 13:27:10 +0200
Subject: [PATCH 07/14] Retain decorateBlockBg logic
---
libs/utils/decorate.js | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/libs/utils/decorate.js b/libs/utils/decorate.js
index 2a5961f2d4..a36a32adfc 100644
--- a/libs/utils/decorate.js
+++ b/libs/utils/decorate.js
@@ -309,7 +309,9 @@ export function decorateMultiViewport(el) {
export function turnAnchorIntoVideo({ src, anchorTag }) {
const { dataset, parentElement } = anchorTag;
- const attrs = getVideoAttrs(anchorTag.hash || 'autoplay', dataset);
+ const videoLink = anchorTag.querySelector('a[href*=".mp4"]');
+ if (videoLink && !videoLink.hash) videoLink.hash = 'autoplay';
+ const attrs = getVideoAttrs(anchorTag.hash, dataset);
const video = ``;
anchorTag.insertAdjacentHTML('afterend', video);
const videoEl = parentElement.querySelector('video');
From ff57508ea7d44c0270bf0979d7695b4b99f77db9 Mon Sep 17 00:00:00 2001
From: Okan Sahin
Date: Mon, 9 Sep 2024 14:04:37 +0200
Subject: [PATCH 08/14] Move autoplay logic to the right location
---
libs/blocks/figure/figure.js | 1 +
libs/utils/decorate.js | 3 +--
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/libs/blocks/figure/figure.js b/libs/blocks/figure/figure.js
index 4aa1db8ae3..828cb0fb82 100644
--- a/libs/blocks/figure/figure.js
+++ b/libs/blocks/figure/figure.js
@@ -18,6 +18,7 @@ function htmlToElement(html) {
function decorateVideo(clone, figEl) {
const videoTag = clone.querySelector('video');
const anchorTag = clone.querySelector('a[href*=".mp4"]');
+ if(!anchorTag?.hash) anchorTag?.hash = '#autoplay';
if (anchorTag) turnAnchorIntoVideo({ src: anchorTag.href, anchorTag });
if (videoTag) {
videoTag.removeAttribute('data-mouseevent');
diff --git a/libs/utils/decorate.js b/libs/utils/decorate.js
index a36a32adfc..444bd852d2 100644
--- a/libs/utils/decorate.js
+++ b/libs/utils/decorate.js
@@ -308,9 +308,8 @@ export function decorateMultiViewport(el) {
}
export function turnAnchorIntoVideo({ src, anchorTag }) {
+ if (anchorTag.closest('.marquee, .aside, .hero-marquee') && !anchorTag.hash) anchorTag.hash = '#autoplay';
const { dataset, parentElement } = anchorTag;
- const videoLink = anchorTag.querySelector('a[href*=".mp4"]');
- if (videoLink && !videoLink.hash) videoLink.hash = 'autoplay';
const attrs = getVideoAttrs(anchorTag.hash, dataset);
const video = ``;
anchorTag.insertAdjacentHTML('afterend', video);
From dc418ae994d7c68c293b1b88480a4e19180f3d30 Mon Sep 17 00:00:00 2001
From: Okan Sahin
Date: Mon, 9 Sep 2024 14:05:37 +0200
Subject: [PATCH 09/14] Fix linting issues
---
libs/blocks/figure/figure.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/libs/blocks/figure/figure.js b/libs/blocks/figure/figure.js
index 828cb0fb82..a0eda51301 100644
--- a/libs/blocks/figure/figure.js
+++ b/libs/blocks/figure/figure.js
@@ -18,7 +18,7 @@ function htmlToElement(html) {
function decorateVideo(clone, figEl) {
const videoTag = clone.querySelector('video');
const anchorTag = clone.querySelector('a[href*=".mp4"]');
- if(!anchorTag?.hash) anchorTag?.hash = '#autoplay';
+ if (anchorTag && !anchorTag.hash) anchorTag.hash = '#autoplay';
if (anchorTag) turnAnchorIntoVideo({ src: anchorTag.href, anchorTag });
if (videoTag) {
videoTag.removeAttribute('data-mouseevent');
From 64a91202e9f6fc38ccbb2fdcf79d258df4e9c234 Mon Sep 17 00:00:00 2001
From: Okan Sahin
Date: Thu, 12 Sep 2024 13:23:11 +0200
Subject: [PATCH 10/14] Adapt figure tests
---
test/blocks/figure/figure.test.js | 5 +++--
test/blocks/figure/mocks/body.html | 16 ++--------------
2 files changed, 5 insertions(+), 16 deletions(-)
diff --git a/test/blocks/figure/figure.test.js b/test/blocks/figure/figure.test.js
index fb6d9b23fc..61ee37b909 100644
--- a/test/blocks/figure/figure.test.js
+++ b/test/blocks/figure/figure.test.js
@@ -42,8 +42,9 @@ describe('init', () => {
init(blockEl);
const figures = blockEl.querySelectorAll('.figure');
- expect(figures[0].querySelector('a > picture')).to.be.exist;
- expect(figures[1].querySelector('a > video')).to.be.exist;
+ expect(figures[0].querySelector('a > picture')).to.exist;
+ expect(figures[1].querySelector('a > video')).to.exist;
+ expect(figures[1].querySelector('a > video > source')).to.exist;
});
it('should not add any classes to the block element when no pictures are present', () => {
diff --git a/test/blocks/figure/mocks/body.html b/test/blocks/figure/mocks/body.html
index b79ea96e1f..5a07ebf098 100644
--- a/test/blocks/figure/mocks/body.html
+++ b/test/blocks/figure/mocks/body.html
@@ -51,17 +51,7 @@
caption
@@ -114,9 +104,7 @@
-
https://blog.adobe.com/en/publish/2022/12/07/kah-milah-ledgester-breathes-life-into-award-winning-art-with-adobe-creative-cloud
From 7bd8ceced5a29b93e3b6f83357fd3121f2d3f01d Mon Sep 17 00:00:00 2001
From: Okan Sahin
Date: Mon, 16 Sep 2024 10:51:58 +0200
Subject: [PATCH 11/14] PR Feedback
---
libs/blocks/adobetv/adobetv.js | 4 ++--
libs/blocks/figure/figure.js | 4 ++--
libs/blocks/video/video.js | 4 ++--
libs/utils/decorate.js | 5 ++---
4 files changed, 8 insertions(+), 9 deletions(-)
diff --git a/libs/blocks/adobetv/adobetv.js b/libs/blocks/adobetv/adobetv.js
index 99d2b6ea75..85928d1c03 100644
--- a/libs/blocks/adobetv/adobetv.js
+++ b/libs/blocks/adobetv/adobetv.js
@@ -1,4 +1,4 @@
-import { turnAnchorIntoVideo } from '../../utils/decorate.js';
+import { decorateAnchorVideo } from '../../utils/decorate.js';
export default function init(a) {
a.classList.add('hide-video');
@@ -6,7 +6,7 @@ export default function init(a) {
if (a.href.includes('.mp4') && bgBlocks.some((b) => a.closest(`.${b}`))) {
a.classList.add('hide');
if (!a.parentNode) return;
- turnAnchorIntoVideo({
+ decorateAnchorVideo({
src: a.href,
anchorTag: a,
});
diff --git a/libs/blocks/figure/figure.js b/libs/blocks/figure/figure.js
index a0eda51301..cd0d80cd88 100644
--- a/libs/blocks/figure/figure.js
+++ b/libs/blocks/figure/figure.js
@@ -1,4 +1,4 @@
-import { applyHoverPlay, turnAnchorIntoVideo } from '../../utils/decorate.js';
+import { applyHoverPlay, decorateAnchorVideo } from '../../utils/decorate.js';
import { createTag } from '../../utils/utils.js';
function buildCaption(pEl) {
@@ -19,7 +19,7 @@ function decorateVideo(clone, figEl) {
const videoTag = clone.querySelector('video');
const anchorTag = clone.querySelector('a[href*=".mp4"]');
if (anchorTag && !anchorTag.hash) anchorTag.hash = '#autoplay';
- if (anchorTag) turnAnchorIntoVideo({ src: anchorTag.href, anchorTag });
+ if (anchorTag) decorateAnchorVideo({ src: anchorTag.href, anchorTag });
if (videoTag) {
videoTag.removeAttribute('data-mouseevent');
if (videoTag.dataset?.videoSource) {
diff --git a/libs/blocks/video/video.js b/libs/blocks/video/video.js
index 18dd65056b..f9d6c69167 100644
--- a/libs/blocks/video/video.js
+++ b/libs/blocks/video/video.js
@@ -1,5 +1,5 @@
import { getConfig } from '../../utils/utils.js';
-import { turnAnchorIntoVideo } from '../../utils/decorate.js';
+import { decorateAnchorVideo } from '../../utils/decorate.js';
export default function init(a) {
a.classList.add('hide-video');
@@ -14,7 +14,7 @@ export default function init(a) {
const mediaFilename = pathname.split('/').pop();
videoPath = `${root}${mediaFilename}`;
}
- turnAnchorIntoVideo({
+ decorateAnchorVideo({
src: videoPath,
anchorTag: a,
});
diff --git a/libs/utils/decorate.js b/libs/utils/decorate.js
index 444bd852d2..e6abe6a819 100644
--- a/libs/utils/decorate.js
+++ b/libs/utils/decorate.js
@@ -307,11 +307,10 @@ export function decorateMultiViewport(el) {
return foreground;
}
-export function turnAnchorIntoVideo({ src, anchorTag }) {
+export function decorateAnchorVideo({ src, anchorTag }) {
if (anchorTag.closest('.marquee, .aside, .hero-marquee') && !anchorTag.hash) anchorTag.hash = '#autoplay';
const { dataset, parentElement } = anchorTag;
- const attrs = getVideoAttrs(anchorTag.hash, dataset);
- const video = ``;
+ const video = ``;
anchorTag.insertAdjacentHTML('afterend', video);
const videoEl = parentElement.querySelector('video');
createIntersectionObserver({
From eee2c90f586f06be47f25430bdca97767bd1bce0 Mon Sep 17 00:00:00 2001
From: Okan Sahin
Date: Mon, 16 Sep 2024 12:02:59 +0200
Subject: [PATCH 12/14] Safeguard decorateAnchorVideo
---
libs/utils/decorate.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/libs/utils/decorate.js b/libs/utils/decorate.js
index e6abe6a819..f697799823 100644
--- a/libs/utils/decorate.js
+++ b/libs/utils/decorate.js
@@ -308,6 +308,7 @@ export function decorateMultiViewport(el) {
}
export function decorateAnchorVideo({ src, anchorTag }) {
+ if (!src.length || !(anchorTag instanceof HTMLElement)) return;
if (anchorTag.closest('.marquee, .aside, .hero-marquee') && !anchorTag.hash) anchorTag.hash = '#autoplay';
const { dataset, parentElement } = anchorTag;
const video = ``;
From 79019d92bb234f5abc10818f0edf1c2c452583eb Mon Sep 17 00:00:00 2001
From: Okan Sahin
Date: Mon, 16 Sep 2024 12:07:45 +0200
Subject: [PATCH 13/14] Remove anchor if neccessary
---
libs/blocks/video/video.js | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/libs/blocks/video/video.js b/libs/blocks/video/video.js
index f9d6c69167..3decc59e15 100644
--- a/libs/blocks/video/video.js
+++ b/libs/blocks/video/video.js
@@ -3,7 +3,10 @@ import { decorateAnchorVideo } from '../../utils/decorate.js';
export default function init(a) {
a.classList.add('hide-video');
- if (!a.parentNode) return;
+ if (!a.parentNode) {
+ a.remove();
+ return;
+ }
const { pathname } = a;
let videoPath = `.${pathname}`;
if (pathname.match('media_.*.mp4')) {
From bea6b258f1bfd8ad98d29cff24fb4f1c26cbc89f Mon Sep 17 00:00:00 2001
From: Okan Sahin
Date: Mon, 16 Sep 2024 15:46:00 +0200
Subject: [PATCH 14/14] Add video test
---
test/blocks/video/video.test.js | 8 +++++++-
1 file changed, 7 insertions(+), 1 deletion(-)
diff --git a/test/blocks/video/video.test.js b/test/blocks/video/video.test.js
index 9cfe5a104e..3a4ac9b1e9 100644
--- a/test/blocks/video/video.test.js
+++ b/test/blocks/video/video.test.js
@@ -3,7 +3,7 @@ import { expect, assert } from '@esm-bundle/chai';
import sinon from 'sinon';
import { waitFor, waitForElement } from '../../helpers/waitfor.js';
-import { setConfig } from '../../../libs/utils/utils.js';
+import { setConfig, createTag } from '../../../libs/utils/utils.js';
setConfig({});
const { default: init } = await import('../../../libs/blocks/video/video.js');
@@ -17,6 +17,12 @@ describe('video uploaded using franklin bot', () => {
document.body.innerHTML = '';
});
+ it('decorates video', (done) => {
+ const anchor = createTag('a');
+ anchor.remove = () => done();
+ init(anchor);
+ });
+
it('decorates video', async () => {
const block = document.querySelector('.video.normal');
const a = block.querySelector('a');