Commit 555a715e authored by Michael Kessler's avatar Michael Kessler
Browse files

[TASK] Add disable lightbox functionality

parent 97f27e4b
......@@ -8,7 +8,69 @@ export default class SgYoutubeLightbox {
* Initializes the LightboxManager with the necessary parameters.
*/
constructor() {
const youtubeItems = document.querySelectorAll('.sg-youtube-item');
const isMobile = window.matchMedia('(max-width: 679px)').matches;
youtubeItems.forEach((item) => {
if (item.dataset.disableLightboxMobile === '1' && isMobile || item.dataset.disableLightbox === '1' && !isMobile) {
item.classList.remove('sg-youtube-item');
item.addEventListener('click', this.disableLightbox.bind(this));
}
});
LightboxManager.init({type: 'video', glightbox: {selector: '.sg-youtube-item'}});
}
/**
* Replace the image with an iframe
*
* @param event
*/
disableLightbox(event) {
event.preventDefault();
const item = event.currentTarget;
item.classList.add('no-lightbox');
const videoId = this.getVideoIdFromUrl(item.href);
const videoImage = item.querySelector('.sg-video__image');
const height = videoImage.offsetHeight;
const width = videoImage.offsetWidth;
const iframe = document.createElement('iframe');
iframe.width = width;
iframe.height = height;
iframe.style.border = 'none';
iframe.allowFullscreen = true;
iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
iframe.src = `https://www.youtube-nocookie.com/embed/${videoId}`;
item.replaceChild(iframe, videoImage);
}
/**
* Prepares the given url, or returns null.
*
* @param {string} url
* @return {string|null}
*/
getVideoIdFromUrl(url) {
let matches = url.match(/watch\?v=(.*)&list=(.*)/);
if (!matches) {
// check if the list parameter is missing
matches = url.match(/watch\?v=([^?&]*)/);
if (!matches) {
return null;
}
}
let [, videoString] = matches,
queryParameterSeparator = '?';
if (matches[2]) {
videoString += '?list=' + matches[2];
queryParameterSeparator = '&';
}
return videoString + queryParameterSeparator + 'autoplay=1&rel=0';
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment