Skip to content

Commit

Permalink
update video component.
Browse files Browse the repository at this point in the history
  • Loading branch information
@wildone
wildone committed Aug 9, 2024
1 parent 1d3a117 commit 9f88869
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 57 deletions.
47 changes: 23 additions & 24 deletions blocks/video/video.css
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
.video {
width: unset;
text-align: center;
max-width: 800px;
margin: 32px auto;
max-width: 900px;
margin: 24px auto;
}

.video.lazy-loading {
.video[data-embed-loaded='false']:not(.placeholder) {
/* reserve an approximate space to avoid extensive layout shifts */
aspect-ratio: 16 / 9;
}
Expand All @@ -19,12 +18,6 @@
max-width: 100%;
}

.video video[data-loading] {
/* reserve an approximate space to avoid extensive layout shifts */
width: 100%;
aspect-ratio: 16 / 9;
}

.video .video-placeholder {
width: 100%;
aspect-ratio: 16 / 9;
Expand All @@ -39,34 +32,40 @@
inset: 0;
}

.video[data-embed-loaded='true'] .video-placeholder,
.video[data-embed-loaded='false'] .video-placeholder + * {
visibility: hidden;
height: 0;
width: 0;
}

.video .video-placeholder picture img {
width: 100%;
height: 100%;
object-fit: cover;
}

.video .video-placeholder-play button {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(3);
width: 22px;
height: 22px;
border: 2px solid;
border-radius: 20px;
width: 44px;
height: 44px;
border-radius: 50%;
outline: 2px solid;
padding: 0;
}

.video .video-placeholder-play button::before {
content: "";
content: '';
display: block;
box-sizing: border-box;
position: absolute;
width: 0;
height: 10px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 6px solid;
top: 4px;
left: 7px;
}
height: 24px;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 18px solid;
top: 50%;
left: calc(50% + 2px);
transform: translate(-50%, -50%);
}
116 changes: 84 additions & 32 deletions blocks/video/video.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,37 +4,69 @@
* https://www.hlx.live/developer/block-collection/video
*/

function embedYoutube(url, autoplay) {
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');

function embedYoutube(url, autoplay, background) {
const usp = new URLSearchParams(url.search);
const suffix = autoplay ? '&muted=1&autoplay=1' : '';
let suffix = '';
if (background || autoplay) {
const suffixParams = {
autoplay: autoplay ? '1' : '0',
mute: background ? '1' : '0',
controls: background ? '0' : '1',
disablekb: background ? '1' : '0',
loop: background ? '1' : '0',
playsinline: background ? '1' : '0',
};
suffix = `&${Object.entries(suffixParams).map(([k, v]) => `${k}=${encodeURIComponent(v)}`).join('&')}`;
}
let vid = usp.get('v') ? encodeURIComponent(usp.get('v')) : '';
const embed = url.pathname;
if (url.origin.includes('youtu.be')) {
[, vid] = url.pathname.split('/');
}
return `<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;">
<iframe src="https://www.youtube.com${vid ? `/embed/${vid}?rel=0&v=${vid}${suffix}` : embed}" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;"

const temp = document.createElement('div');
temp.innerHTML = `<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;">
<iframe src="https://www.youtube.com${vid ? `/embed/${vid}?rel=0&v=${vid}${suffix}` : embed}" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;"
allow="autoplay; fullscreen; picture-in-picture; encrypted-media; accelerometer; gyroscope; picture-in-picture" allowfullscreen="" scrolling="no" title="Content from Youtube" loading="lazy"></iframe>
</div>`;
return temp.children.item(0);
}

function embedVimeo(url, autoplay) {
function embedVimeo(url, autoplay, background) {
const [, video] = url.pathname.split('/');
const suffix = autoplay ? '?muted=1&autoplay=1' : '';
return `<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;">
<iframe src="https://player.vimeo.com/video/${video}${suffix}"
style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;"
frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen
let suffix = '';
if (background || autoplay) {
const suffixParams = {
autoplay: autoplay ? '1' : '0',
background: background ? '1' : '0',
};
suffix = `?${Object.entries(suffixParams).map(([k, v]) => `${k}=${encodeURIComponent(v)}`).join('&')}`;
}
const temp = document.createElement('div');
temp.innerHTML = `<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;">
<iframe src="https://player.vimeo.com/video/${video}${suffix}"
style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;"
frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen
title="Content from Vimeo" loading="lazy"></iframe>
</div>`;
return temp.children.item(0);
}

function getVideoElement(source, autoplay) {
function getVideoElement(source, autoplay, background) {
const video = document.createElement('video');
video.setAttribute('controls', '');
video.dataset.loading = 'true';
video.addEventListener('loadedmetadata', () => delete video.dataset.loading);
if (autoplay) video.setAttribute('autoplay', '');
if (background) {
video.setAttribute('loop', '');
video.setAttribute('playsinline', '');
video.removeAttribute('controls');
video.addEventListener('canplay', () => {
video.muted = true;
if (autoplay) video.play();
});
}

const sourceEl = document.createElement('source');
sourceEl.setAttribute('src', source);
Expand All @@ -44,49 +76,69 @@ function getVideoElement(source, autoplay) {
return video;
}

const loadVideoEmbed = (block, link, autoplay) => {
if (block.dataset.embedIsLoaded) {
const loadVideoEmbed = (block, link, autoplay, background) => {
if (block.dataset.embedLoaded === 'true') {
return;
}
const url = new URL(link);

const isYoutube = link.includes('youtube') || link.includes('youtu.be');
const isVimeo = link.includes('vimeo');
const isMp4 = link.includes('.mp4');

if (isYoutube) {
block.innerHTML = embedYoutube(url, autoplay);
const embedWrapper = embedYoutube(url, autoplay, background);
block.append(embedWrapper);
embedWrapper.querySelector('iframe').addEventListener('load', () => {
block.dataset.embedLoaded = true;
});
} else if (isVimeo) {
block.innerHTML = embedVimeo(url, autoplay);
} else if (isMp4) {
block.textContent = '';
block.append(getVideoElement(link, autoplay));
const embedWrapper = embedVimeo(url, autoplay, background);
block.append(embedWrapper);
embedWrapper.querySelector('iframe').addEventListener('load', () => {
block.dataset.embedLoaded = true;
});
} else {
const videoEl = getVideoElement(link, autoplay, background);
block.append(videoEl);
videoEl.addEventListener('canplay', () => {
block.dataset.embedLoaded = true;
});
}

block.dataset.embedIsLoaded = true;
};

export default async function decorate(block) {
console.log('decorating video block');

Check warning on line 110 in blocks/video/video.js

View workflow job for this annotation

GitHub Actions / build 

Unexpected console statement
const placeholder = block.querySelector('picture');
const link = block.querySelector('a').href;
block.textContent = '';
block.dataset.embedLoaded = false;

const autoplay = block.classList.contains('autoplay');
if (placeholder) {
block.classList.add('placeholder');
const wrapper = document.createElement('div');
wrapper.className = 'video-placeholder';
wrapper.innerHTML = '<div class="video-placeholder-play"><button type="button" title="Play"></button></div>';
wrapper.prepend(placeholder);
wrapper.addEventListener('click', () => {
loadVideoEmbed(block, link, true);
});
wrapper.append(placeholder);

if (!autoplay) {
wrapper.insertAdjacentHTML(
'beforeend',
'<div class="video-placeholder-play"><button type="button" title="Play"></button></div>',
);
wrapper.addEventListener('click', () => {
wrapper.remove();
loadVideoEmbed(block, link, true, false);
});
}
block.append(wrapper);
} else {
block.classList.add('lazy-loading');
}

if (!placeholder || autoplay) {
const observer = new IntersectionObserver((entries) => {
if (entries.some((e) => e.isIntersecting)) {
observer.disconnect();
loadVideoEmbed(block, link, false);
block.classList.remove('lazy-loading');
const playOnLoad = autoplay && !prefersReducedMotion.matches;
loadVideoEmbed(block, link, playOnLoad, autoplay);
}
});
observer.observe(block);
Expand Down
2 changes: 1 addition & 1 deletion component-definition.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@
"page": {
"resourceType": "core/franklin/components/block/v1/block",
"template": {
"name": "video",
"name": "Video",
"model": "video"
}
}
Expand Down

0 comments on commit 9f88869

Please sign in to comment.