Skip to content
Snippets Groups Projects
Commit 1425f731 authored by Georgi's avatar Georgi
Browse files

Merge remote-tracking branch 'origin/feature_sg-youtube-shorts' into feature_frontend_filters

parents d55d3455 3f3bb3d4
No related branches found
No related tags found
1 merge request!13Feature frontend filters
Hide whitespace changes
Inline Side-by-side
Resources/Public/JavaScript/Modules/sgVideoLightbox.js
+ 38
− 27
View file @ 1425f731
......@@ -30,9 +30,10 @@ export default class SgVideoLightbox {
*/
static openLightbox(event) {
event.preventDefault();
const isShorts = event.target.closest('a')?.dataset?.isShorts === '1';
switch (event.target.closest('a')?.dataset?.videoType) {
case 'youtube': {
SgVideoLightbox.openYouTubeLightBox(event);
SgVideoLightbox.openYouTubeLightBox(event, isShorts);
break;
}
case 'vimeo': {
......@@ -51,9 +52,10 @@ export default class SgVideoLightbox {
*/
static disableLightbox(event) {
event.preventDefault();
const isShorts = event.target.closest('a')?.dataset?.isShorts === '1';
switch (event.target.closest('a')?.dataset?.videoType) {
case 'youtube': {
SgVideoLightbox.disableYouTubeLightbox(event);
SgVideoLightbox.disableYouTubeLightbox(event, isShorts);
break;
}
case 'vimeo': {
......@@ -91,9 +93,10 @@ export default class SgVideoLightbox {
/**
* Opens the lightbox with the youtube player (uses youtube-nocookie)
*
* @param event
* @param {Event} event
* @param {boolean} isShorts
*/
static openYouTubeLightBox(event) {
static openYouTubeLightBox(event, isShorts) {
let url = event.target.closest('.sg-video-item').href;
const videoId = SgVideoLightbox.getYouTubeVideoIdFromUrl(url);
url = `https://www.youtube-nocookie.com/embed/${videoId}`;
......@@ -102,25 +105,28 @@ export default class SgVideoLightbox {
event.target.closest('a').dataset.additionalUrlParameters,
);
const iframeClass = isShorts ? 'sg-video-iframe sg-video-youtube-iframe sg-video-youtube-shorts-iframe' : 'sg-video-iframe sg-video-youtube-iframe';
const instance = BasicLightbox.create(
`
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
class="sg-video-iframe sg-video-youtube-iframe" src="${url}"></iframe>
class="${iframeClass}" src="${url}"></iframe>
`,
{
closable: true,
},
);
instance.show();
}
/**
* Replace the image with an iframe
*
* @param event
* @param {Event} event
* @param {boolean} isShorts
*
*/
static disableYouTubeLightbox(event) {
static disableYouTubeLightbox(event, isShorts) {
event.preventDefault();
const item = event.currentTarget;
item.classList.add('no-lightbox');
......@@ -130,16 +136,25 @@ export default class SgVideoLightbox {
item.dataset.additionalUrlParameters,
);
const videoImage = item.querySelector('.sg-video__image');
const height = videoImage.offsetHeight;
const width = videoImage.offsetWidth;
const originalWidth = videoImage.offsetWidth;
const originalHeight = videoImage.offsetHeight;
// Calculate iframe dimensions
let iframeWidth = originalWidth;
let iframeHeight = originalHeight;
if (isShorts) {
// Maintain 9:16 aspect ratio for Shorts
iframeWidth = originalWidth;
iframeHeight = Math.round((iframeWidth / 9) * 16);
}
const iframe = document.createElement('iframe');
iframe.width = width;
iframe.height = height;
iframe.width = iframeWidth;
iframe.height = iframeHeight;
iframe.style.border = 'none';
iframe.allowFullscreen = true;
iframe.allow =
'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
iframe.classList.add(isShorts ? 'sg-video-youtube-shorts-iframe' : '');
iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
iframe.src = `https://www.youtube-nocookie.com/embed/${videoId}`;
if (videoImage.parentElement.nodeName.toLowerCase() === 'picture') {
......@@ -205,22 +220,18 @@ export default class SgVideoLightbox {
* @return {string|null}
*/
static getYouTubeVideoIdFromUrl(url) {
let matches = url.match(/watch\?v=(.*)&list=(.*)/);
// Match standard YouTube URL or Shorts URL
const matches = url.match(/watch\?v=([^&?]*)(?:&list=([^&?]*))?|shorts\/([^&?/]+)/);
if (!matches) {
// check if the list parameter is missing
matches = url.match(/watch\?v=([^&?]*)/);
if (!matches) {
return null;
}
}
let [, videoString] = matches;
let queryParameterSeparator = '?';
if (matches[2]) {
videoString += `?list=${matches[2]}`;
queryParameterSeparator = '&';
return null;
}
return `${videoString + queryParameterSeparator}autoplay=1&rel=0`;
// Determine the video ID and construct the appropriate URL
const videoId = matches[1] || matches[3];
const listParam = matches[2] ? `?list=${matches[2]}` : '';
const autoplayParams = listParam ? '&autoplay=1&rel=0' : '?autoplay=1&rel=0';
return `${videoId}${listParam}${autoplayParams}`;
}
/**
......
Resources/Public/Sass/Modules/Bootstrap5/_sg-video.scss
+ 20
− 0
View file @ 1425f731
......@@ -40,6 +40,14 @@ $basicLightbox__timing: ease !default;
.sg-video__image {
transition: transform 0.3s ease;
&--shorts {
height: auto;
aspect-ratio: 9 / 16;
object-fit: cover;
max-height: 900px;
}
}
.sg-video__svg {
......@@ -150,6 +158,18 @@ iframe.sg-video-iframe,
pointer-events: all;
}
iframe.sg-video-youtube-shorts-iframe {
aspect-ratio: 9 / 16;
&.sg-video-iframe {
width: 90vw;
max-width: 480px;
height: auto;
max-height: 900px;
margin: 0 auto;
}
}
@keyframes pulse {
0% {
transform: scale(1);
......
Resources/Public/StyleSheets/Bootstrap5/main.min.css
+ 1
− 1
View file @ 1425f731
.sg-video__link:hover .sg-video__svg-inner{animation:pulse 1.4s linear infinite}.sg-video__link:hover .sg-video__image{transform:scale(1.1)}.sg-video__read-more-arrow{transform:rotate(180deg)}.sg-video__read-more-text{display:none}.collapse:not(.show)+.sg-video__read-more .sg-video__read-less-text{display:none}.collapse:not(.show)+.sg-video__read-more .sg-video__read-more-text{display:inline-flex}.collapse:not(.show)+.sg-video__read-more .sg-video__read-more-arrow{transform:none}.sg-video__image{transition:transform .3s ease}.sg-video__svg svg{transform:translateX(3px)}.no-lightbox .sg-video__svg{display:none !important}.sg-video__svg-inner{opacity:.5;transition:opacity .3s ease,transform .3s ease}.basicLightbox{position:fixed;display:flex;justify-content:center;align-items:center;top:0;left:0;width:100%;height:100vh;background:rgba(0,0,0,.8);opacity:.01;transition:opacity .4s ease;z-index:1020;will-change:opacity}.basicLightbox::after{content:"";position:absolute;top:1.8rem;right:1.8rem;width:2em;height:2em;background-size:contain;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%20width%3D%2218%22%20height%3D%2218%22%20fill%3D%22white%22%20stroke%3D%22white%22%3E%3C!--!%20Font%20Awesome%20Free%206.5.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202023%20Fonticons%2C%20Inc.%20--%3E%3Cg%20id%3D%22svg-dff5ea2525636251b1cf60f8943ff15f%22%3E%3Cpath%20d%3D%22M342.6%20150.6c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L192%20210.7%2086.6%20105.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3L146.7%20256%2041.4%20361.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200L192%20301.3%20297.4%20406.6c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3L237.3%20256%20342.6%20150.6z%22%20fill%3D%22white%22%20stroke%3D%22white%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-repeat:no-repeat;cursor:pointer}.basicLightbox--visible{opacity:1;pointer-events:auto}.basicLightbox__placeholder{max-width:100%;transform:scale(0.9);transition:transform .4s ease;z-index:1;will-change:transform;display:flex;align-items:center;justify-content:center}.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child,.basicLightbox__placeholder>iframe:first-child:last-child{display:block;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto}.basicLightbox__placeholder>video:first-child:last-child,.basicLightbox__placeholder>iframe:first-child:last-child{pointer-events:auto}.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child{width:auto;height:auto}.basicLightbox--img .basicLightbox__placeholder,.basicLightbox--video .basicLightbox__placeholder,.basicLightbox--iframe .basicLightbox__placeholder{width:100%;height:100%;pointer-events:none}.basicLightbox--visible .basicLightbox__placeholder{transform:scale(1)}iframe.sg-video-iframe,.basicLightbox .sg-cookie-optin-iframe-consent{width:100%;height:auto;max-width:900px;aspect-ratio:16/9}.basicLightbox .sg-cookie-optin-iframe-consent{pointer-events:all}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{opacity:.75}100%{transform:scale(1.1);opacity:1}}
.sg-video__link:hover .sg-video__svg-inner{animation:pulse 1.4s linear infinite}.sg-video__link:hover .sg-video__image{transform:scale(1.1)}.sg-video__read-more-arrow{transform:rotate(180deg)}.sg-video__read-more-text{display:none}.collapse:not(.show)+.sg-video__read-more .sg-video__read-less-text{display:none}.collapse:not(.show)+.sg-video__read-more .sg-video__read-more-text{display:inline-flex}.collapse:not(.show)+.sg-video__read-more .sg-video__read-more-arrow{transform:none}.sg-video__image{transition:transform .3s ease}.sg-video__image--shorts{height:auto;aspect-ratio:9/16;object-fit:cover;max-height:900px}.sg-video__svg svg{transform:translateX(3px)}.no-lightbox .sg-video__svg{display:none !important}.sg-video__svg-inner{opacity:.5;transition:opacity .3s ease,transform .3s ease}.basicLightbox{position:fixed;display:flex;justify-content:center;align-items:center;top:0;left:0;width:100%;height:100vh;background:rgba(0,0,0,.8);opacity:.01;transition:opacity .4s ease;z-index:1020;will-change:opacity}.basicLightbox::after{content:"";position:absolute;top:1.8rem;right:1.8rem;width:2em;height:2em;background-size:contain;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%20width%3D%2218%22%20height%3D%2218%22%20fill%3D%22white%22%20stroke%3D%22white%22%3E%3C!--!%20Font%20Awesome%20Free%206.5.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202023%20Fonticons%2C%20Inc.%20--%3E%3Cg%20id%3D%22svg-dff5ea2525636251b1cf60f8943ff15f%22%3E%3Cpath%20d%3D%22M342.6%20150.6c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L192%20210.7%2086.6%20105.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3L146.7%20256%2041.4%20361.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200L192%20301.3%20297.4%20406.6c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3L237.3%20256%20342.6%20150.6z%22%20fill%3D%22white%22%20stroke%3D%22white%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-repeat:no-repeat;cursor:pointer}.basicLightbox--visible{opacity:1;pointer-events:auto}.basicLightbox__placeholder{max-width:100%;transform:scale(0.9);transition:transform .4s ease;z-index:1;will-change:transform;display:flex;align-items:center;justify-content:center}.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child,.basicLightbox__placeholder>iframe:first-child:last-child{display:block;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto}.basicLightbox__placeholder>video:first-child:last-child,.basicLightbox__placeholder>iframe:first-child:last-child{pointer-events:auto}.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child{width:auto;height:auto}.basicLightbox--img .basicLightbox__placeholder,.basicLightbox--video .basicLightbox__placeholder,.basicLightbox--iframe .basicLightbox__placeholder{width:100%;height:100%;pointer-events:none}.basicLightbox--visible .basicLightbox__placeholder{transform:scale(1)}iframe.sg-video-iframe,.basicLightbox .sg-cookie-optin-iframe-consent{width:100%;height:auto;max-width:900px;aspect-ratio:16/9}.basicLightbox .sg-cookie-optin-iframe-consent{pointer-events:all}iframe.sg-video-youtube-shorts-iframe{aspect-ratio:9/16}iframe.sg-video-youtube-shorts-iframe.sg-video-iframe{width:90vw;max-width:480px;height:auto;max-height:900px;margin:0 auto}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{opacity:.75}100%{transform:scale(1.1);opacity:1}}
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