From 2fe50fe92544869c39d91451cefd2c163ef5edb0 Mon Sep 17 00:00:00 2001
From: Georgi Mateev <georgi.mateev@sgalinski.de>
Date: Thu, 17 Oct 2024 13:44:09 +0300
Subject: [PATCH] [BUGFIX] Improve default template behavior
---
README.md | 1 +
.../Templates/Bootstrap5/Vimeo/Index.html | 2 +-
.../JavaScript/Backend/LicenseNotification.js | 2 +-
.../JavaScript/Dist/main.bundled.min.js | 447 +++++++++++++++++-
.../JavaScript/Modules/sgVideoLightbox.js | 15 +-
Resources/Public/Sass/Bootstrap5/main.scss | 2 +-
Resources/Public/Sass/Modules/_sg-video.scss | 19 +-
Resources/Public/Sass/main.scss | 2 +-
Resources/Public/StyleSheets/main.min.css | 2 +-
9 files changed, 470 insertions(+), 22 deletions(-)
diff --git a/README.md b/README.md
index 1e18240..18bc9d3 100644
--- a/README.md
+++ b/README.md
@@ -121,6 +121,7 @@ plugin.tx_sgvimeo {
- Initialize the javascript modules in your main.js: `
new SgVideoLightbox();
SgVideo.initDefault();`
+- If you want to recompile the JS with SGC, you must add `excludeFromQa: ['!**/Backend/**/*']` to your .sgc-config.js and also set your main extension in extensions to sg-vimeo `extensions: ['sg-vimeo']`
### Compiling SASS only without SGC
diff --git a/Resources/Private/Templates/Bootstrap5/Vimeo/Index.html b/Resources/Private/Templates/Bootstrap5/Vimeo/Index.html
index 005aa5c..c3c2763 100644
--- a/Resources/Private/Templates/Bootstrap5/Vimeo/Index.html
+++ b/Resources/Private/Templates/Bootstrap5/Vimeo/Index.html
@@ -80,7 +80,7 @@
<f:if condition="{filtersBottom} || {submitButton.position} == 'bottom' || {submitButton.position} == 'both'">
<div class="sg-video-filters sg-video-filters-bottom gap-2 d-flex align-items-baseline">
<f:for each="{filtersBottom}" as="filter">
- <f:render partial="{filter.partial}" arguments="{name: filter.name, label: filter.label}" />
+ <f:render partial="{filter.partial}" arguments="{filter: filter, pluginId: pluginContentData.uid, filterValues: filterValues}" />
</f:for>
<f:if condition="{submitButton.position} == 'bottom' || {submitButton.position} == 'both'">
diff --git a/Resources/Public/JavaScript/Backend/LicenseNotification.js b/Resources/Public/JavaScript/Backend/LicenseNotification.js
index ab8e1a2..a72ce0d 100644
--- a/Resources/Public/JavaScript/Backend/LicenseNotification.js
+++ b/Resources/Public/JavaScript/Backend/LicenseNotification.js
@@ -26,7 +26,7 @@
import Notification from '@typo3/backend/notification.js';
const LicenseCheck = {
- init () {
+ init() {
fetch(TYPO3.settings.ajaxUrls['sg_vimeo::checkLicense'])
.then((response) => {
if (response.ok) {
diff --git a/Resources/Public/JavaScript/Dist/main.bundled.min.js b/Resources/Public/JavaScript/Dist/main.bundled.min.js
index 307c6f9..17f9c4b 100644
--- a/Resources/Public/JavaScript/Dist/main.bundled.min.js
+++ b/Resources/Public/JavaScript/Dist/main.bundled.min.js
@@ -1,8 +1,441 @@
-(()=>{var A=Object.create;var x=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var U=Object.getPrototypeOf,$=Object.prototype.hasOwnProperty;var g=(n=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(n,{get:(e,t)=>(typeof require<"u"?require:e)[t]}):n)(function(n){if(typeof require<"u")return require.apply(this,arguments);throw new Error('Dynamic require of "'+n+'" is not supported')});var C=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports);var P=(n,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of M(e))!$.call(n,o)&&o!==t&&x(n,o,{get:()=>e[o],enumerable:!(i=I(e,o))||i.enumerable});return n};var k=(n,e,t)=>(t=n!=null?A(U(n)):{},P(e||!n||!n.__esModule?x(t,"default",{value:n,enumerable:!0}):t,n));var L=C((w,v)=>{(function(n){typeof w=="object"&&typeof v<"u"?v.exports=n():typeof define=="function"&&define.amd?define([],n):(typeof window<"u"||typeof window<"u"?window:typeof self<"u"?self:this).basicLightbox=n()})(function(){return function n(e,t,i){function o(s,d){if(!t[s]){if(!e[s]){var p=typeof g=="function"&&g;if(!d&&p)return p(s,!0);if(a)return a(s,!0);var h=new Error("Cannot find module '"+s+"'");throw h.code="MODULE_NOT_FOUND",h}var r=t[s]={exports:{}};e[s][0].call(r.exports,function(u){return o(e[s][1][u]||u)},r,r.exports,n,e,t,i)}return t[s].exports}for(var a=typeof g=="function"&&g,c=0;c<i.length;c++)o(i[c]);return o}({1:[function(n,e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.create=t.visible=void 0;var i=function(c){var s=arguments.length>1&&arguments[1]!==void 0&&arguments[1],d=document.createElement("div");return d.innerHTML=c.trim(),s===!0?d.children:d.firstChild},o=function(c,s){var d=c.children;return d.length===1&&d[0].tagName===s},a=function(c){return(c=c||document.querySelector(".basicLightbox"))!=null&&c.ownerDocument.body.contains(c)===!0};t.visible=a,t.create=function(c,s){var d=function(r,u){var m=i(`
- <div class="basicLightbox `.concat(u.className,`">
- <div class="basicLightbox__placeholder" role="dialog"></div>
- </div>
- `)),b=m.querySelector(".basicLightbox__placeholder");r.forEach(function(T){return b.appendChild(T)});var _=o(b,"IMG"),E=o(b,"VIDEO"),q=o(b,"IFRAME");return _===!0&&m.classList.add("basicLightbox--img"),E===!0&&m.classList.add("basicLightbox--video"),q===!0&&m.classList.add("basicLightbox--iframe"),m}(c=function(r){var u=typeof r=="string",m=r instanceof HTMLElement==1;if(u===!1&&m===!1)throw new Error("Content must be a DOM element/node or string");return u===!0?Array.from(i(r,!0)):r.tagName==="TEMPLATE"?[r.content.cloneNode(!0)]:Array.from(r.children)}(c),s=function(){var r=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};if((r=Object.assign({},r)).closable==null&&(r.closable=!0),r.className==null&&(r.className=""),r.onShow==null&&(r.onShow=function(){}),r.onClose==null&&(r.onClose=function(){}),typeof r.closable!="boolean")throw new Error("Property `closable` must be a boolean");if(typeof r.className!="string")throw new Error("Property `className` must be a string");if(typeof r.onShow!="function")throw new Error("Property `onShow` must be a function");if(typeof r.onClose!="function")throw new Error("Property `onClose` must be a function");return r}(s)),p=function(r){return s.onClose(h)!==!1&&function(u,m){return u.classList.remove("basicLightbox--visible"),setTimeout(function(){return a(u)===!1||u.parentElement.removeChild(u),m()},410),!0}(d,function(){if(typeof r=="function")return r(h)})};s.closable===!0&&d.addEventListener("click",function(r){r.target===d&&p()});var h={element:function(){return d},visible:function(){return a(d)},show:function(r){return s.onShow(h)!==!1&&function(u,m){return document.body.appendChild(u),setTimeout(function(){requestAnimationFrame(function(){return u.classList.add("basicLightbox--visible"),m()})},10),!0}(d,function(){if(typeof r=="function")return r(h)})},close:p};return h}},{}]},{},[1])(1)})});var y=k(L()),l=class{constructor(){let e=document.querySelectorAll(".sg-video-item"),t=window.matchMedia("(max-width: 679px)").matches;e.forEach(i=>{(i.dataset.disableLightboxMobile==="1"&&t||i.dataset.disableLightbox==="1"&&!t)&&(i.classList.remove("sg-video-item"),i.addEventListener("click",l.disableLightbox.bind(this)))}),Array.prototype.forEach.call(document.querySelectorAll(".sg-video-item"),i=>{i.addEventListener("click",l.openLightbox)})}static openLightbox(e){var t,i;switch(e.preventDefault(),(i=(t=e.target.closest("a"))==null?void 0:t.dataset)==null?void 0:i.videoType){case"youtube":{l.openYouTubeLightBox(e);break}case"vimeo":{l.openVimeoLightBox(e);break}default:}}static disableLightbox(e){var t,i;switch(e.preventDefault(),(i=(t=e.target.closest("a"))==null?void 0:t.dataset)==null?void 0:i.videoType){case"youtube":{l.disableYouTubeLightbox(e);break}case"vimeo":{l.disableVimeoLightbox(e);break}default:}}static openVimeoLightBox(e){let t=e.target.closest(".sg-video-item").href;t=l.includeAdditionalUrlParameters(t,e.target.closest("a").dataset.additionalUrlParameters),t+="&autoplay=1&dnt=1",y.create(`<iframe class="sg-video-iframe sg-video-vimeo-iframe mfp-iframe" frameborder="0" allowfullscreen allow="autoplay; fullscreen *; picture-in-picture" src="${t}"></iframe>`,{closable:!0}).show()}static openYouTubeLightBox(e){let t=e.target.closest(".sg-video-item").href;t=`https://www.youtube-nocookie.com/embed/${l.getYouTubeVideoIdFromUrl(t)}`,t=l.includeAdditionalUrlParameters(t,e.target.closest("a").dataset.additionalUrlParameters),y.create(`
+(() => {
+ var __create = Object.create;
+ var __defProp = Object.defineProperty;
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+ var __getOwnPropNames = Object.getOwnPropertyNames;
+ var __getProtoOf = Object.getPrototypeOf;
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
+ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+ get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+ }) : x)(function(x) {
+ if (typeof require !== "undefined")
+ return require.apply(this, arguments);
+ throw new Error('Dynamic require of "' + x + '" is not supported');
+ });
+ var __commonJS = (cb, mod) => function __require2() {
+ return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+ };
+ var __copyProps = (to, from, except, desc) => {
+ if (from && typeof from === "object" || typeof from === "function") {
+ for (let key of __getOwnPropNames(from))
+ if (!__hasOwnProp.call(to, key) && key !== except)
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+ }
+ return to;
+ };
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+ mod
+ ));
+
+ // vendor/sgalinski/sg-vimeo/node_modules/basiclightbox/dist/basicLightbox.min.js
+ var require_basicLightbox_min = __commonJS({
+ "vendor/sgalinski/sg-vimeo/node_modules/basiclightbox/dist/basicLightbox.min.js"(exports, module) {
+ !function(e) {
+ if ("object" == typeof exports && "undefined" != typeof module)
+ module.exports = e();
+ else if ("function" == typeof define && define.amd)
+ define([], e);
+ else {
+ ("undefined" != typeof window ? window : "undefined" != typeof window ? window : "undefined" != typeof self ? self : this).basicLightbox = e();
+ }
+ }(function() {
+ return function e(n, t, o) {
+ function r(c2, u) {
+ if (!t[c2]) {
+ if (!n[c2]) {
+ var s = "function" == typeof __require && __require;
+ if (!u && s)
+ return s(c2, true);
+ if (i)
+ return i(c2, true);
+ var a = new Error("Cannot find module '" + c2 + "'");
+ throw a.code = "MODULE_NOT_FOUND", a;
+ }
+ var l = t[c2] = { exports: {} };
+ n[c2][0].call(l.exports, function(e2) {
+ return r(n[c2][1][e2] || e2);
+ }, l, l.exports, e, n, t, o);
+ }
+ return t[c2].exports;
+ }
+ for (var i = "function" == typeof __require && __require, c = 0; c < o.length; c++)
+ r(o[c]);
+ return r;
+ }({ 1: [function(e, n, t) {
+ "use strict";
+ Object.defineProperty(t, "__esModule", { value: true }), t.create = t.visible = void 0;
+ var o = function(e2) {
+ var n2 = arguments.length > 1 && void 0 !== arguments[1] && arguments[1], t2 = document.createElement("div");
+ return t2.innerHTML = e2.trim(), true === n2 ? t2.children : t2.firstChild;
+ }, r = function(e2, n2) {
+ var t2 = e2.children;
+ return 1 === t2.length && t2[0].tagName === n2;
+ }, i = function(e2) {
+ return null != (e2 = e2 || document.querySelector(".basicLightbox")) && true === e2.ownerDocument.body.contains(e2);
+ };
+ t.visible = i;
+ t.create = function(e2, n2) {
+ var t2 = function(e3, n3) {
+ var t3 = o('\n <div class="basicLightbox '.concat(n3.className, '">\n <div class="basicLightbox__placeholder" role="dialog"></div>\n </div>\n ')), i2 = t3.querySelector(".basicLightbox__placeholder");
+ e3.forEach(function(e4) {
+ return i2.appendChild(e4);
+ });
+ var c2 = r(i2, "IMG"), u2 = r(i2, "VIDEO"), s = r(i2, "IFRAME");
+ return true === c2 && t3.classList.add("basicLightbox--img"), true === u2 && t3.classList.add("basicLightbox--video"), true === s && t3.classList.add("basicLightbox--iframe"), t3;
+ }(e2 = function(e3) {
+ var n3 = "string" == typeof e3, t3 = e3 instanceof HTMLElement == 1;
+ if (false === n3 && false === t3)
+ throw new Error("Content must be a DOM element/node or string");
+ return true === n3 ? Array.from(o(e3, true)) : "TEMPLATE" === e3.tagName ? [e3.content.cloneNode(true)] : Array.from(e3.children);
+ }(e2), n2 = function() {
+ var e3 = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
+ if (null == (e3 = Object.assign({}, e3)).closable && (e3.closable = true), null == e3.className && (e3.className = ""), null == e3.onShow && (e3.onShow = function() {
+ }), null == e3.onClose && (e3.onClose = function() {
+ }), "boolean" != typeof e3.closable)
+ throw new Error("Property `closable` must be a boolean");
+ if ("string" != typeof e3.className)
+ throw new Error("Property `className` must be a string");
+ if ("function" != typeof e3.onShow)
+ throw new Error("Property `onShow` must be a function");
+ if ("function" != typeof e3.onClose)
+ throw new Error("Property `onClose` must be a function");
+ return e3;
+ }(n2)), c = function(e3) {
+ return false !== n2.onClose(u) && function(e4, n3) {
+ return e4.classList.remove("basicLightbox--visible"), setTimeout(function() {
+ return false === i(e4) || e4.parentElement.removeChild(e4), n3();
+ }, 410), true;
+ }(t2, function() {
+ if ("function" == typeof e3)
+ return e3(u);
+ });
+ };
+ true === n2.closable && t2.addEventListener("click", function(e3) {
+ e3.target === t2 && c();
+ });
+ var u = { element: function() {
+ return t2;
+ }, visible: function() {
+ return i(t2);
+ }, show: function(e3) {
+ return false !== n2.onShow(u) && function(e4, n3) {
+ return document.body.appendChild(e4), setTimeout(function() {
+ requestAnimationFrame(function() {
+ return e4.classList.add("basicLightbox--visible"), n3();
+ });
+ }, 10), true;
+ }(t2, function() {
+ if ("function" == typeof e3)
+ return e3(u);
+ });
+ }, close: c };
+ return u;
+ };
+ }, {}] }, {}, [1])(1);
+ });
+ }
+ });
+
+ // vendor/sgalinski/sg-vimeo/Resources/Public/JavaScript/Modules/sgVideoLightbox.js
+ var BasicLightbox = __toESM(require_basicLightbox_min());
+ var SgVideoLightbox = class {
+ constructor() {
+ const videoItems = document.querySelectorAll(".sg-video-item");
+ const isMobile = window.matchMedia("(max-width: 679px)").matches;
+ videoItems.forEach((item) => {
+ if (item.dataset.disableLightboxMobile === "1" && isMobile || item.dataset.disableLightbox === "1" && !isMobile) {
+ item.classList.remove("sg-video-item");
+ item.addEventListener("click", SgVideoLightbox.disableLightbox.bind(this));
+ }
+ });
+ Array.prototype.forEach.call(document.querySelectorAll(".sg-video-item"), (element) => {
+ element.addEventListener("click", SgVideoLightbox.openLightbox);
+ });
+ }
+ static openLightbox(event) {
+ var _a, _b, _c, _d;
+ event.preventDefault();
+ const isShorts = ((_b = (_a = event.target.closest("a")) == null ? void 0 : _a.dataset) == null ? void 0 : _b.isShorts) === "1";
+ switch ((_d = (_c = event.target.closest("a")) == null ? void 0 : _c.dataset) == null ? void 0 : _d.videoType) {
+ case "youtube": {
+ SgVideoLightbox.openYouTubeLightBox(event, isShorts);
+ break;
+ }
+ case "vimeo": {
+ SgVideoLightbox.openVimeoLightBox(event);
+ break;
+ }
+ default:
+ }
+ }
+ static disableLightbox(event) {
+ var _a, _b, _c, _d;
+ event.preventDefault();
+ const isShorts = ((_b = (_a = event.target.closest("a")) == null ? void 0 : _a.dataset) == null ? void 0 : _b.isShorts) === "1";
+ switch ((_d = (_c = event.target.closest("a")) == null ? void 0 : _c.dataset) == null ? void 0 : _d.videoType) {
+ case "youtube": {
+ SgVideoLightbox.disableYouTubeLightbox(event, isShorts);
+ break;
+ }
+ case "vimeo": {
+ SgVideoLightbox.disableVimeoLightbox(event);
+ break;
+ }
+ default:
+ }
+ }
+ static openVimeoLightBox(event) {
+ let url = event.target.closest(".sg-video-item").href;
+ url = SgVideoLightbox.includeAdditionalUrlParameters(
+ url,
+ event.target.closest("a").dataset.additionalUrlParameters
+ );
+ url += "&autoplay=1&dnt=1";
+ const instance = BasicLightbox.create(
+ `<iframe class="sg-video-iframe sg-video-vimeo-iframe mfp-iframe" frameborder="0" allowfullscreen allow="autoplay; fullscreen *; picture-in-picture" src="${url}"></iframe>`,
+ {
+ closable: true
+ }
+ );
+ instance.show();
+ }
+ 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}`;
+ url = SgVideoLightbox.includeAdditionalUrlParameters(
+ url,
+ 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="${t}"></iframe>
- `,{closable:!0}).show()}static disableYouTubeLightbox(e){e.preventDefault();let t=e.currentTarget;t.classList.add("no-lightbox");let i=l.includeAdditionalUrlParameters(l.getYouTubeVideoIdFromUrl(t.href),t.dataset.additionalUrlParameters),o=t.querySelector(".sg-video__image"),a=o.offsetHeight,c=o.offsetWidth,s=document.createElement("iframe");s.width=c,s.height=a,s.style.border="none",s.allowFullscreen=!0,s.allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",s.src=`https://www.youtube-nocookie.com/embed/${i}`,o.parentElement.nodeName.toLowerCase()==="picture"?o.parentElement.replaceWith(s):o.replaceWith(s)}static disableVimeoLightbox(e){e.preventDefault();let t=e.currentTarget.closest(".sg-video__item"),i=t.querySelector("a");t.classList.add("no-lightbox");let o=l.includeAdditionalUrlParameters(i.href,i.dataset.additionalUrlParameters),a=t.querySelector(".sg-video__image"),c=a==null?void 0:a.clientWidth,s=a==null?void 0:a.clientHeight,d=document.createRange().createContextualFragment(`<div class="sg-video-item sg-card-shadow" style="height: ${s}px; width: ${c}px;"><div class="embed-container" style="padding-bottom: calc(${s} / ${c} * 100%);"><iframe width="${c}" height="${s}" src="${o}&dnt=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div></div>`);a==null||a.replaceWith(d)}static getVimeoVideoIdFromUrl(e){return/^.*(vimeo\.com\/)((channels\/[A-z]+\/)|(groups\/[A-z]+\/videos\/))?(\d+)/.exec(e)[5]}static getYouTubeVideoIdFromUrl(e){let t=e.match(/watch\?v=(.*)&list=(.*)/);if(!t&&(t=e.match(/watch\?v=([^&?]*)/),!t))return null;let[,i]=t,o="?";return t[2]&&(i+=`?list=${t[2]}`,o="&"),`${i+o}autoplay=1&rel=0`}static includeAdditionalUrlParameters(e,t=""){if(!e)return"";if(!t)return e;let i=t,o=i.charAt(0)==="?",a=i.charAt(0)==="&";return(o||a)&&(i=i.slice(1)),e.includes("?")?`${e}&${i}`:`${e}?${i}`}};var f=class{constructor(e,t){this.settings=t,this.dom={list:e,listItems:e.querySelectorAll(".sg-video__item")},this.active=0,this.dom.listItems.forEach((i,o)=>{this.setupReadMore(o)}),this.settings.disableMinHeight||this.checkImageSizes()}static initDefault(){document.querySelectorAll(".sg-video__list--default").forEach(e=>{new f(e,{textSelector:".sg-video__bodytext",descriptionSelector:".sg-video__description",type:"default"})}),document.querySelectorAll(".sg-video__list--rows").forEach(e=>{new f(e,{textSelector:".sg-video__description",descriptionSelector:".sg-video__description",disableMinHeight:!0})}),document.querySelectorAll(".sg-video__list--playlist").forEach(e=>{new f(e,{textSelector:".sg-video__description",descriptionSelector:".sg-video__description",disableMinHeight:!0})}),document.querySelectorAll(".sg-video__highlight").forEach(e=>{new f(e,{textSelector:".sg-video__bodytext",descriptionSelector:".sg-video__description",disableMinHeight:!0})}),document.querySelectorAll(".sg-video--single").forEach(e=>{new f(e,{textSelector:".sg-video__description",descriptionSelector:".sg-video__description"})})}checkImageSizes(){let e=0,t=[];this.dom.listItems.forEach(i=>{let o=i.querySelector("img");o&&o.height>e&&(e=o.height),t.push(o)}),t.forEach(i=>{i.style.minHeight=`${e}px`})}setupReadMore(e){let t=this.dom.listItems[e],i=t.querySelector(".sg-video__read-more"),o=t.querySelector(this.settings.textSelector);if(!o){i&&i.classList.add("disabled");return}if(!!i){if(f.isTextTruncated(o,this.settings)){i.classList.add("disabled");return}i.addEventListener("click",()=>this.showText(e))}}showText(e){let t=this.dom.listItems[e];if(t.classList.contains("expanded")){this.active-=1,this.hideText(e);return}this.active+=1;let i=t.querySelector(".sg-video__read-more"),o=t.querySelector(this.settings.textSelector),a=o.matches(this.settings.descriptionSelector)?o:o.querySelector(this.settings.descriptionSelector);t.classList.add("expanded"),o.classList.add("expanded"),a.classList.add("expanded"),i.classList.add("expanded"),i.querySelector(".sg-video__read-more-text").textContent=i.dataset.buttonCloseText}hideText(e){let t=this.dom.listItems[e],i=t.querySelector(".sg-video__read-more"),o=t.querySelector(this.settings.textSelector),a=o.matches(this.settings.descriptionSelector)?o:o.querySelector(this.settings.descriptionSelector);o.classList.remove("expanded"),a.classList.remove("expanded"),i.classList.remove("expanded"),i.querySelector(".sg-video__read-more-text").textContent=i.dataset.buttonOpenText,setTimeout(()=>{this.settings.type==="default"&&this.active===0&&this.dom.listItems.forEach(c=>{c.style.height="",c.style.zIndex=""}),t.classList.remove("expanded")},200)}static isTextTruncated(e,t){let i=e.matches(t.descriptionSelector)?e:e.querySelector(t.descriptionSelector);return i&&i.scrollHeight<=i.clientHeight}};function S(){new l,f.initDefault()}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",S):S();})();
+ class="${iframeClass}" src="${url}"></iframe>
+ `,
+ {
+ closable: true
+ }
+ );
+ instance.show();
+ }
+ static disableYouTubeLightbox(event, isShorts) {
+ event.preventDefault();
+ const item = event.currentTarget;
+ item.classList.add("no-lightbox");
+ const videoId = SgVideoLightbox.includeAdditionalUrlParameters(
+ SgVideoLightbox.getYouTubeVideoIdFromUrl(item.href),
+ item.dataset.additionalUrlParameters
+ );
+ const videoImage = item.querySelector(".sg-video__image");
+ const originalWidth = videoImage.offsetWidth;
+ const originalHeight = videoImage.offsetHeight;
+ let iframeWidth = originalWidth;
+ let iframeHeight = originalHeight;
+ if (isShorts) {
+ iframeWidth = originalWidth;
+ iframeHeight = Math.round(iframeWidth / 9 * 16);
+ }
+ const iframe = document.createElement("iframe");
+ iframe.width = iframeWidth;
+ iframe.height = iframeHeight;
+ iframe.style.border = "none";
+ iframe.allowFullscreen = true;
+ 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") {
+ videoImage.parentElement.replaceWith(iframe);
+ } else {
+ videoImage.replaceWith(iframe);
+ }
+ }
+ static disableVimeoLightbox(event) {
+ event.preventDefault();
+ const item = event.currentTarget.closest(".sg-video__item");
+ const link = item.querySelector("a");
+ item.classList.add("no-lightbox");
+ const iframeUrl = SgVideoLightbox.includeAdditionalUrlParameters(
+ link.href,
+ link.dataset.additionalUrlParameters
+ );
+ const thumbnailElement = item.querySelector(".sg-video__image");
+ const width = thumbnailElement == null ? void 0 : thumbnailElement.clientWidth;
+ const height = thumbnailElement == null ? void 0 : thumbnailElement.clientHeight;
+ const nodes = document.createRange().createContextualFragment(
+ `<div class="sg-video-item sg-card-shadow" style="height: ${height}px; width: ${width}px;"><div class="embed-container" style="padding-bottom: calc(${height} / ${width} * 100%);"><iframe width="${width}" height="${height}" src="${iframeUrl}&dnt=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div></div>`
+ );
+ thumbnailElement == null ? void 0 : thumbnailElement.replaceWith(nodes);
+ }
+ static getVimeoVideoIdFromUrl(url) {
+ const regExp = /^.*(vimeo\.com\/)((channels\/[A-z]+\/)|(groups\/[A-z]+\/videos\/))?(\d+)/;
+ const parseUrl = regExp.exec(url);
+ return parseUrl[5];
+ }
+ static getYouTubeVideoIdFromUrl(url) {
+ const matches = url.match(/watch\?v=([^&?]*)(?:&list=([^&?]*))?|shorts\/([^&/?]+)/);
+ if (!matches) {
+ return null;
+ }
+ const videoId = matches[1] || matches[3];
+ const listParameter = matches[2] ? `?list=${matches[2]}` : "";
+ const autoplayParameters = listParameter ? "&autoplay=1&rel=0" : "?autoplay=1&rel=0";
+ return `${videoId}${listParameter}${autoplayParameters}`;
+ }
+ static includeAdditionalUrlParameters(url, _additionalUrlParameters = "") {
+ if (!url) {
+ return "";
+ }
+ if (!_additionalUrlParameters) {
+ return url;
+ }
+ let additionalUrlParameters = _additionalUrlParameters;
+ const beginsWithQuestionMark = additionalUrlParameters.charAt(0) === "?";
+ const beginsWithAmpersand = additionalUrlParameters.charAt(0) === "&";
+ if (beginsWithQuestionMark || beginsWithAmpersand) {
+ additionalUrlParameters = additionalUrlParameters.slice(1);
+ }
+ return url.includes("?") ? `${url}&${additionalUrlParameters}` : `${url}?${additionalUrlParameters}`;
+ }
+ };
+
+ // vendor/sgalinski/sg-vimeo/Resources/Public/JavaScript/Modules/sgVideo.js
+ var SgVideo = class {
+ constructor(element, settings) {
+ this.settings = settings;
+ this.dom = {
+ list: element,
+ listItems: element.querySelectorAll(".sg-video__item")
+ };
+ this.active = 0;
+ this.dom.listItems.forEach((item, index) => {
+ this.setupReadMore(index);
+ });
+ if (!this.settings.disableMinHeight) {
+ this.checkImageSizes();
+ }
+ }
+ static initDefault() {
+ document.querySelectorAll(".sg-video__list--default").forEach((item) => {
+ new SgVideo(item, {
+ textSelector: ".sg-video__bodytext",
+ descriptionSelector: ".sg-video__description",
+ type: "default"
+ });
+ });
+ document.querySelectorAll(".sg-video__list--rows").forEach((item) => {
+ new SgVideo(item, {
+ textSelector: ".sg-video__description",
+ descriptionSelector: ".sg-video__description",
+ disableMinHeight: true
+ });
+ });
+ document.querySelectorAll(".sg-video__list--playlist").forEach((item) => {
+ new SgVideo(item, {
+ textSelector: ".sg-video__description",
+ descriptionSelector: ".sg-video__description",
+ disableMinHeight: true
+ });
+ });
+ document.querySelectorAll(".sg-video__highlight").forEach((item) => {
+ new SgVideo(item, {
+ textSelector: ".sg-video__bodytext",
+ descriptionSelector: ".sg-video__description",
+ disableMinHeight: true
+ });
+ });
+ document.querySelectorAll(".sg-video--single").forEach((item) => {
+ new SgVideo(item, {
+ textSelector: ".sg-video__description",
+ descriptionSelector: ".sg-video__description"
+ });
+ });
+ }
+ checkImageSizes() {
+ let highestValue = 0;
+ const images = [];
+ this.dom.listItems.forEach((item) => {
+ const image = item.querySelector("img");
+ if (image && image.height > highestValue) {
+ highestValue = image.height;
+ }
+ images.push(image);
+ });
+ images.forEach((image) => {
+ image.style.minHeight = `${highestValue}px`;
+ });
+ }
+ setupReadMore(index) {
+ const item = this.dom.listItems[index];
+ const button = item.querySelector(".sg-video__read-more");
+ const text = item.querySelector(this.settings.textSelector);
+ if (!text) {
+ if (button) {
+ button.classList.add("disabled");
+ }
+ return;
+ }
+ if (!button) {
+ return;
+ }
+ if (SgVideo.isTextTruncated(text, this.settings)) {
+ button.classList.add("disabled");
+ return;
+ }
+ button.addEventListener("click", () => this.showText(index));
+ }
+ showText(index) {
+ const item = this.dom.listItems[index];
+ if (item.classList.contains("expanded")) {
+ this.active -= 1;
+ this.hideText(index);
+ return;
+ }
+ this.active += 1;
+ const button = item.querySelector(".sg-video__read-more");
+ const text = item.querySelector(this.settings.textSelector);
+ const description = text.matches(this.settings.descriptionSelector) ? text : text.querySelector(this.settings.descriptionSelector);
+ item.classList.add("expanded");
+ text.classList.add("expanded");
+ description.classList.add("expanded");
+ button.classList.add("expanded");
+ button.querySelector(".sg-video__read-more-text").textContent = button.dataset.buttonCloseText;
+ }
+ hideText(index) {
+ const item = this.dom.listItems[index];
+ const button = item.querySelector(".sg-video__read-more");
+ const text = item.querySelector(this.settings.textSelector);
+ const description = text.matches(this.settings.descriptionSelector) ? text : text.querySelector(this.settings.descriptionSelector);
+ text.classList.remove("expanded");
+ description.classList.remove("expanded");
+ button.classList.remove("expanded");
+ button.querySelector(".sg-video__read-more-text").textContent = button.dataset.buttonOpenText;
+ setTimeout(() => {
+ if (this.settings.type === "default" && this.active === 0) {
+ this.dom.listItems.forEach((_item) => {
+ _item.style.height = "";
+ _item.style.zIndex = "";
+ });
+ }
+ item.classList.remove("expanded");
+ }, 200);
+ }
+ static isTextTruncated(element, settings) {
+ const descriptionElement = element.matches(settings.descriptionSelector) ? element : element.querySelector(settings.descriptionSelector);
+ return descriptionElement && descriptionElement.scrollHeight <= descriptionElement.clientHeight;
+ }
+ };
+
+ // vendor/sgalinski/sg-vimeo/Resources/Public/JavaScript/main.js
+ function main() {
+ new SgVideoLightbox();
+ SgVideo.initDefault();
+ }
+ if (document.readyState === "loading") {
+ document.addEventListener("DOMContentLoaded", main);
+ } else {
+ main();
+ }
+})();
+//# sourceMappingURL=main.bundled.min.js.map
diff --git a/Resources/Public/JavaScript/Modules/sgVideoLightbox.js b/Resources/Public/JavaScript/Modules/sgVideoLightbox.js
index ab00a6d..6340bed 100644
--- a/Resources/Public/JavaScript/Modules/sgVideoLightbox.js
+++ b/Resources/Public/JavaScript/Modules/sgVideoLightbox.js
@@ -105,7 +105,9 @@ 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 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(
`
@@ -154,7 +156,8 @@ export default class SgVideoLightbox {
iframe.style.border = 'none';
iframe.allowFullscreen = true;
iframe.classList.add(isShorts ? 'sg-video-youtube-shorts-iframe' : '');
- iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
+ 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') {
@@ -221,17 +224,17 @@ export default class SgVideoLightbox {
*/
static getYouTubeVideoIdFromUrl(url) {
// Match standard YouTube URL or Shorts URL
- const matches = url.match(/watch\?v=([^&?]*)(?:&list=([^&?]*))?|shorts\/([^&?/]+)/);
+ const matches = url.match(/watch\?v=([^&?]*)(?:&list=([^&?]*))?|shorts\/([^&/?]+)/);
if (!matches) {
return null;
}
// 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';
+ const listParameter = matches[2] ? `?list=${matches[2]}` : '';
+ const autoplayParameters = listParameter ? '&autoplay=1&rel=0' : '?autoplay=1&rel=0';
- return `${videoId}${listParam}${autoplayParams}`;
+ return `${videoId}${listParameter}${autoplayParameters}`;
}
/**
diff --git a/Resources/Public/Sass/Bootstrap5/main.scss b/Resources/Public/Sass/Bootstrap5/main.scss
index 5c5853d..b2c182b 100644
--- a/Resources/Public/Sass/Bootstrap5/main.scss
+++ b/Resources/Public/Sass/Bootstrap5/main.scss
@@ -1 +1 @@
-@import '../Modules/Bootstrap5/sg-video';
+@use '../Modules/Bootstrap5/sg-video';
diff --git a/Resources/Public/Sass/Modules/_sg-video.scss b/Resources/Public/Sass/Modules/_sg-video.scss
index f69de8b..9d4d1e2 100644
--- a/Resources/Public/Sass/Modules/_sg-video.scss
+++ b/Resources/Public/Sass/Modules/_sg-video.scss
@@ -14,9 +14,9 @@ $basicLightbox__timing: ease !default;
}
$sg-video-icon-solid-play: "data:image/svg+xml,%3csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3e%3cpath d='M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z'/%3e%3c/svg%3e"
- 448px 512px;
+448px 512px;
$sg-video-icon-solid-chevron-down: "data:image/svg+xml,%3csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3e%3cpath d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3e%3c/svg%3e"
- 448px 512px;
+448px 512px;
$sg-video-item-heading-color: var(--sg-video-component-color-headline);
$sg-video-item-text-color: var(--sg-video-component-color-foreground);
@@ -62,6 +62,14 @@ $sg-video-screen-xs-min: $sg-video-screen-xs;
width: 100%;
height: auto;
transition: transform $sg-video-base-transition-timing ease;
+
+ &--shorts {
+ height: auto;
+ aspect-ratio: 9 / 16;
+ object-fit: cover;
+
+ max-height: 900px;
+ }
}
&__image-container {
@@ -80,7 +88,7 @@ $sg-video-screen-xs-min: $sg-video-screen-xs;
transform: translate(-50%, -50%) scale(0.8);
opacity: 0.8;
transition: opacity $sg-video-base-transition-timing,
- transform $sg-video-base-transition-timing;
+ transform $sg-video-base-transition-timing;
z-index: 9;
text-shadow: -1px 4px 27px rgba(0, 0, 0, 0.5);
}
@@ -148,6 +156,7 @@ $sg-video-screen-xs-min: $sg-video-screen-xs;
&__list {
margin-bottom: 0;
list-style: none;
+ padding-left: 0;
}
&__highlight {
@@ -477,9 +486,11 @@ iframe.sg-video-iframe {
aspect-ratio: 16/9;
}
-.tx-sg-youtube-filters {
+.sg-video-filters {
gap: 10px;
display: flex;
flex-direction: row;
align-items: baseline;
}
+
+
diff --git a/Resources/Public/Sass/main.scss b/Resources/Public/Sass/main.scss
index 95032e1..f3d2302 100644
--- a/Resources/Public/Sass/main.scss
+++ b/Resources/Public/Sass/main.scss
@@ -1 +1 @@
-@import 'Modules/sg-video';
+@use 'Modules/sg-video';
diff --git a/Resources/Public/StyleSheets/main.min.css b/Resources/Public/StyleSheets/main.min.css
index 8d39724..a909adc 100644
--- a/Resources/Public/StyleSheets/main.min.css
+++ b/Resources/Public/StyleSheets/main.min.css
@@ -1 +1 @@
-:root{--sg-video-component-color-headline: #0a293b;--sg-video-component-color-foreground: #174566;--sg-video-component-color-background: none;--sg-video-component-color-link: #15415e;--sg-video-component-color-play-button: #fff;--sg-video-component-color-link--hover: #061924}.tx-sg-youtube{margin-bottom:20px}.tx-sg-youtube iframe{border:0}.tx-sg-vimeo{margin-bottom:20px}.tx-sg-vimeo iframe{border:0}.sg-video__image{width:100%;height:auto;transition:transform var(--sg-video-base-transition-timing, 0.3s) ease}.sg-video__image-container{position:relative;overflow:hidden;width:100%;color:var(--sg-video-component-color-play-button);display:block}.sg-video__image-container:not(.no-lightbox) svg{position:absolute;top:50%;left:50%;width:40px;height:50px;transform:translate(-50%, -50%) scale(0.8);opacity:.8;transition:opacity var(--sg-video-base-transition-timing, 0.3s),transform var(--sg-video-base-transition-timing, 0.3s);z-index:9;text-shadow:-1px 4px 27px rgba(0,0,0,.5)}.sg-video__image-container:hover,.sg-video__image-container:focus{text-decoration:none}.sg-video__image-container:hover .sg-video__image,.sg-video__image-container:focus .sg-video__image{transform:scale(1.1)}.sg-video__image-container:hover::after,.sg-video__image-container:focus::after{transform:translate(-50%, -50%) scale(1.1)}.sg-video__read-more{padding:10px 0;display:inline-block;cursor:pointer;width:100%;text-align:left;margin-top:auto;text-decoration:none;font-weight:700;text-transform:lowercase}.sg-video__bodytext{padding:10px 0;margin-top:auto;margin-bottom:auto;min-height:90px}@media(1200px){.sg-video__bodytext{padding:20px}}.sg-video__bodytext h3{color:var(--sg-video-component-color-headline);margin-top:0;padding-top:0}.sg-video__bodytext .sg-video__description{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.sg-video__bodytext .sg-video__description.expanded{-webkit-line-clamp:unset}.sg-video__item{box-shadow:0 0 7px rgba(var(--sg-video-box-shadow-rgb), 0.18);background:var(--sg-video-component-color-background)}.sg-video__list{margin-bottom:0;list-style:none}.sg-video__highlight .sg-video__item{display:flex;flex-direction:column}.sg-video__highlight .sg-video__image{-o-object-fit:scale-down;object-fit:scale-down}@media(min-width: 1200px){.sg-video__list-item--alt .sg-video__item{display:flex}.sg-video__list-item--alt .sg-video__image-container{width:50%}.sg-video__list-item--alt .sg-video__bodytext{width:50%;background:rgba(0,0,0,0);padding:0 5px 0 20px}}@media(min-width: 1200px){.sg-video--playlist{display:grid;gap:20px;grid-template-columns:70% auto;position:relative}}.sg-video__list--playlist{display:flex;flex-direction:row;position:relative}@media(min-width: 1200px){.sg-video__list--playlist>div{position:absolute;height:100%;width:100%;overflow-y:auto;flex-direction:column;flex-grow:1;justify-content:space-between}.sg-video__list--playlist>div .sg-video__list-item:not(:last-child){margin-bottom:15px}}.sg-video__list--playlist .sg-video__item{height:100%}.sg-video__list--playlist .sg-video__bodytext{padding:10px 0 0}.sg-video__list--playlist h3{font-size:1.3em}.sg-video__list-item{position:relative;margin:15px 10px}@media(min-width: 1200px){.sg-video__list-item{margin:auto}}@media(min-width: 1200px){.sg-video__list-item--alt{margin:0}}@media(max-width: 767.98px){.sg-video .sg-video__list--playlist{display:block}}.sg-video__list--default{display:flex;flex-wrap:wrap;margin:0 -10px}.sg-video__list--default>li{width:100%;margin:10px;display:flex;flex-direction:column}@media(min-width: 1200px){.sg-video__list--default>li{width:calc(33.3333% - 20px)}}.sg-video__list--default a{box-shadow:none}.sg-video__list--default .sg-video__bodytext{position:relative;display:block;overflow:hidden;padding:10px 0;transition:max-height var(--sg-video-base-transition-timing-fast, 0.1s)}.sg-video__list--default .sg-video__read-more{display:block;width:100%;text-align:left;margin-top:auto}.sg-video__list--default .sg-video__item{flex-grow:1}@media(max-width: var(--sg-video-mobile-breakpoint, 768px)-1px){.sg-video__list--default img{min-height:0 !important}}.sg-video__read-more{background:none;color:var(--sg-video-component-color-link);border:0}.sg-video__read-more:hover{color:var(--sg-video-component-color-link--hover)}.sg-video__read-more svg{display:inline-block;width:13px;height:10px;transition:transform var(--sg-video-base-transition-timing, 0.3s)}.sg-video__read-more.disabled{display:none}.sg-video__list--rows .sg-video__read-more.disabled{display:none !important}.sg-video__list--rows .sg-video__image{-o-object-fit:contain;object-fit:contain}@media(min-width: 992px){.sg-video__list--rows .sg-video__item{box-shadow:none;background-color:rgba(0,0,0,0);display:flex}.sg-video__list--rows .sg-video__image-container{float:left;clear:left;width:40.5%}.sg-video__list--rows .sg-video__image-container span{position:relative}}@media(min-width: 992px)and (min-width: 1200px){.sg-video__list--rows .sg-video__image-container{width:35%}}@media(min-width: 992px){.sg-video__list--rows .sg-video__bodytext{position:relative;box-shadow:0 0 7px rgba(var(--sg-video-box-shadow-rgb), 0.18);margin-left:auto;display:block;min-height:210px}}@media(min-width: 992px)and (min-width: 1200px){.sg-video__list--rows .sg-video__bodytext{width:65%;min-height:225px;padding-top:0;padding-left:20px}}@media(min-width: 992px){.sg-video__list--rows .sg-video__description{-webkit-line-clamp:5;transition:max-height var(--sg-video-base-transition-timing-fast, 0.1s)}}@media(min-width: 992px){.sg-video__list--rows .sg-video__list-item{margin-bottom:25px}}@media(min-width: 992px){.sg-video__list--rows .sg-video__read-more{display:block;padding:20px 0 0}}.sg-video__read-more.expanded .sg-video__read-more-arrow{transform:rotateX(180deg)}.sg-video-lightbox-wrapper{pointer-events:all;padding:0;margin:0}.no-lightbox svg{display:none}.plyr .sg-cookie-optin-iframe-consent{min-height:410px}.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:1000;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 width='90px' height='90px' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%23ffffff' stroke='%23ffffff'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Ctitle%3EClose-Circle%3C/title%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Close-Circle'%3E%3Crect id='Rectangle' fill-rule='nonzero' x='0' y='0' width='24' height='24'%3E%3C/rect%3E%3Ccircle id='Oval' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' cx='12' cy='12' r='9'%3E%3C/circle%3E%3Cline x1='14.1213' y1='9.87866' x2='9.8787' y2='14.1213' id='Path' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3C/line%3E%3Cline x1='9.87866' y1='9.87866' x2='14.1213' y2='14.1213' id='Path' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3C/line%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%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}.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{width:100%;height:auto;max-width:900px;aspect-ratio:16/9}
\ No newline at end of file
+:root{--sg-video-component-color-headline: #0a293b;--sg-video-component-color-foreground: #174566;--sg-video-component-color-background: none;--sg-video-component-color-link: #15415e;--sg-video-component-color-play-button: #fff;--sg-video-component-color-link--hover: #061924}.tx-sg-youtube{margin-bottom:20px}.tx-sg-youtube iframe{border:0}.tx-sg-vimeo{margin-bottom:20px}.tx-sg-vimeo iframe{border:0}.sg-video__image{width:100%;height:auto;transition:transform var(--sg-video-base-transition-timing, 0.3s) ease}.sg-video__image--shorts{height:auto;aspect-ratio:9/16;object-fit:cover;max-height:900px}.sg-video__image-container{position:relative;overflow:hidden;width:100%;color:var(--sg-video-component-color-play-button);display:block}.sg-video__image-container:not(.no-lightbox) svg{position:absolute;top:50%;left:50%;width:40px;height:50px;transform:translate(-50%, -50%) scale(0.8);opacity:.8;transition:opacity var(--sg-video-base-transition-timing, 0.3s),transform var(--sg-video-base-transition-timing, 0.3s);z-index:9;text-shadow:-1px 4px 27px rgba(0,0,0,.5)}.sg-video__image-container:hover,.sg-video__image-container:focus{text-decoration:none}.sg-video__image-container:hover .sg-video__image,.sg-video__image-container:focus .sg-video__image{transform:scale(1.1)}.sg-video__image-container:hover::after,.sg-video__image-container:focus::after{transform:translate(-50%, -50%) scale(1.1)}.sg-video__read-more{padding:10px 0;display:inline-block;cursor:pointer;width:100%;text-align:left;margin-top:auto;text-decoration:none;font-weight:700;text-transform:lowercase}.sg-video__bodytext{padding:10px 0;margin-top:auto;margin-bottom:auto;min-height:90px}@media(1200px){.sg-video__bodytext{padding:20px}}.sg-video__bodytext h3{color:var(--sg-video-component-color-headline);margin-top:0;padding-top:0}.sg-video__bodytext .sg-video__description{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.sg-video__bodytext .sg-video__description.expanded{-webkit-line-clamp:unset}.sg-video__item{box-shadow:0 0 7px rgba(var(--sg-video-box-shadow-rgb), 0.18);background:var(--sg-video-component-color-background)}.sg-video__list{margin-bottom:0;list-style:none;padding-left:0}.sg-video__highlight .sg-video__item{display:flex;flex-direction:column}.sg-video__highlight .sg-video__image{object-fit:scale-down}@media(min-width: 1200px){.sg-video__list-item--alt .sg-video__item{display:flex}.sg-video__list-item--alt .sg-video__image-container{width:50%}.sg-video__list-item--alt .sg-video__bodytext{width:50%;background:rgba(0,0,0,0);padding:0 5px 0 20px}}@media(min-width: 1200px){.sg-video--playlist{display:grid;gap:20px;grid-template-columns:70% auto;position:relative}}.sg-video__list--playlist{display:flex;flex-direction:row;position:relative}@media(min-width: 1200px){.sg-video__list--playlist>div{position:absolute;height:100%;width:100%;overflow-y:auto;flex-direction:column;flex-grow:1;justify-content:space-between}.sg-video__list--playlist>div .sg-video__list-item:not(:last-child){margin-bottom:15px}}.sg-video__list--playlist .sg-video__item{height:100%}.sg-video__list--playlist .sg-video__bodytext{padding:10px 0 0}.sg-video__list--playlist h3{font-size:1.3em}.sg-video__list-item{position:relative;margin:15px 10px}@media(min-width: 1200px){.sg-video__list-item{margin:auto}}@media(min-width: 1200px){.sg-video__list-item--alt{margin:0}}@media(max-width: 767.98px){.sg-video .sg-video__list--playlist{display:block}}.sg-video__list--default{display:flex;flex-wrap:wrap;margin:0 -10px}.sg-video__list--default>li{width:100%;margin:10px;display:flex;flex-direction:column}@media(min-width: 1200px){.sg-video__list--default>li{width:calc(33.3333% - 20px)}}.sg-video__list--default a{box-shadow:none}.sg-video__list--default .sg-video__bodytext{position:relative;display:block;overflow:hidden;padding:10px 0;transition:max-height var(--sg-video-base-transition-timing-fast, 0.1s)}.sg-video__list--default .sg-video__read-more{display:block;width:100%;text-align:left;margin-top:auto}.sg-video__list--default .sg-video__item{flex-grow:1}@media(max-width: var(--sg-video-mobile-breakpoint, 768px)-1px){.sg-video__list--default img{min-height:0 !important}}.sg-video__read-more{background:none;color:var(--sg-video-component-color-link);border:0}.sg-video__read-more:hover{color:var(--sg-video-component-color-link--hover)}.sg-video__read-more svg{display:inline-block;width:13px;height:10px;transition:transform var(--sg-video-base-transition-timing, 0.3s)}.sg-video__read-more.disabled{display:none}.sg-video__list--rows .sg-video__read-more.disabled{display:none !important}.sg-video__list--rows .sg-video__image{object-fit:contain}@media(min-width: 992px){.sg-video__list--rows .sg-video__item{box-shadow:none;background-color:rgba(0,0,0,0);display:flex}.sg-video__list--rows .sg-video__image-container{float:left;clear:left;width:40.5%}.sg-video__list--rows .sg-video__image-container span{position:relative}}@media(min-width: 992px)and (min-width: 1200px){.sg-video__list--rows .sg-video__image-container{width:35%}}@media(min-width: 992px){.sg-video__list--rows .sg-video__bodytext{position:relative;box-shadow:0 0 7px rgba(var(--sg-video-box-shadow-rgb), 0.18);margin-left:auto;display:block;min-height:210px}}@media(min-width: 992px)and (min-width: 1200px){.sg-video__list--rows .sg-video__bodytext{width:65%;min-height:225px;padding-top:0;padding-left:20px}}@media(min-width: 992px){.sg-video__list--rows .sg-video__description{-webkit-line-clamp:5;transition:max-height var(--sg-video-base-transition-timing-fast, 0.1s)}.sg-video__list--rows .sg-video__list-item{margin-bottom:25px}.sg-video__list--rows .sg-video__read-more{display:block;padding:20px 0 0}}.sg-video__read-more.expanded .sg-video__read-more-arrow{transform:rotateX(180deg)}.sg-video-lightbox-wrapper{pointer-events:all;padding:0;margin:0}.no-lightbox svg{display:none}.plyr .sg-cookie-optin-iframe-consent{min-height:410px}.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:1000;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 width='90px' height='90px' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%23ffffff' stroke='%23ffffff'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Ctitle%3EClose-Circle%3C/title%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Close-Circle'%3E%3Crect id='Rectangle' fill-rule='nonzero' x='0' y='0' width='24' height='24'%3E%3C/rect%3E%3Ccircle id='Oval' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' cx='12' cy='12' r='9'%3E%3C/circle%3E%3Cline x1='14.1213' y1='9.87866' x2='9.8787' y2='14.1213' id='Path' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3C/line%3E%3Cline x1='9.87866' y1='9.87866' x2='14.1213' y2='14.1213' id='Path' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3C/line%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%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}.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{width:100%;height:auto;max-width:900px;aspect-ratio:16/9}.sg-video-filters{gap:10px;display:flex;flex-direction:row;align-items:baseline}
--
GitLab