From 111811876ecb7663fcbb879734f1999f5a3f9f65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Tue, 28 Dec 2021 12:45:29 +0100
Subject: [PATCH] Replace video facade with cookiefirst consent banner

---
 package-lock.json                             | 11 ----
 package.json                                  |  1 -
 .../Resources/Private/Assets/js/_app.js       |  4 --
 .../Resources/Private/Assets/scss/main.scss   |  5 +-
 .../Private/Partials/RegionMaps.html          | 55 +++++++++++--------
 .../FluidStyledContent/YoutubeVideo.html      | 15 +++--
 .../Private/Templates/Product/Detail.html     | 15 +++--
 7 files changed, 58 insertions(+), 48 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4e5e6980..a2434463 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,7 +22,6 @@
         "font-awesome": "^4.7.0",
         "glightbox": "^3.0.9",
         "jquery": "^3.6.0",
-        "lazyframe": "^2.2.7",
         "lazysizes": "^4.1.8",
         "leaflet": "^1.7.1",
         "normalize.css": "^8.0.1",
@@ -6179,11 +6178,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/lazyframe": {
-      "version": "2.2.7",
-      "resolved": "https://registry.npmjs.org/lazyframe/-/lazyframe-2.2.7.tgz",
-      "integrity": "sha512-S4Cj6r+8ePZnH0Izn8Y9+Ht0/xylcKwhXljOwllPI8u6zB9gq9j+9BlxeKx7TNP8W/lovek8s6xQD1sSq5dLDw=="
-    },
     "node_modules/lazysizes": {
       "version": "4.1.8",
       "resolved": "https://registry.npmjs.org/lazysizes/-/lazysizes-4.1.8.tgz",
@@ -15862,11 +15856,6 @@
       "integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==",
       "dev": true
     },
-    "lazyframe": {
-      "version": "2.2.7",
-      "resolved": "https://registry.npmjs.org/lazyframe/-/lazyframe-2.2.7.tgz",
-      "integrity": "sha512-S4Cj6r+8ePZnH0Izn8Y9+Ht0/xylcKwhXljOwllPI8u6zB9gq9j+9BlxeKx7TNP8W/lovek8s6xQD1sSq5dLDw=="
-    },
     "lazysizes": {
       "version": "4.1.8",
       "resolved": "https://registry.npmjs.org/lazysizes/-/lazysizes-4.1.8.tgz",
diff --git a/package.json b/package.json
index af50eb83..717f85f6 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,6 @@
     "font-awesome": "^4.7.0",
     "glightbox": "^3.0.9",
     "jquery": "^3.6.0",
-    "lazyframe": "^2.2.7",
     "lazysizes": "^4.1.8",
     "leaflet": "^1.7.1",
     "normalize.css": "^8.0.1",
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
index 895c703c..97d47959 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
@@ -7,10 +7,6 @@ require('picturefill')
 import smoothscroll from 'smoothscroll-polyfill'
 smoothscroll.polyfill()
 
-// Video lazy loading
-import lazyframe from 'lazyframe'
-lazyframe('.lazyframe')
-
 // Add pacode to external links
 document.addEventListener('DOMContentLoaded', () => {
     const configElement = document.getElementById('appconfig')
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss
index 632574a2..e1b8ebe3 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss
@@ -32,7 +32,6 @@
     @import "components/teaser";
     @import "components/tiles";
     @import "components/tooltips";
-    @import "~lazyframe/src/scss/lazyframe";
 }
 
 @layer utilities {
@@ -72,4 +71,8 @@
         text-shadow: none;
         border: 0;
     }
+
+    iframe:not([src]) {
+        display: none;
+    }
 }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/RegionMaps.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/RegionMaps.html
index a89168b3..dc32a585 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/RegionMaps.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/RegionMaps.html
@@ -1,23 +1,32 @@
-<f:if condition="{region.regionMaps}">
-    <div class="bg-gray-50 p-4 mb-4"
-         data-controller="lightbox">
-        <p class="font-bold mb-2">
-            Pistenplan
-        </p>
-        <f:for each="{region.regionMaps}" as="regionMap" iteration="iteration">
-            <a href="{f:uri.image(src: '{regionMap.uid}', treatIdAsReference: '1', maxWidth: '2560')}"
-               data-action="lightbox#open"
-               data-lightbox-target="thumb"
-               data-lightbox-index="{iteration.cycle}"
-               data-lightbox-caption="Pistenplan {region.name}"
-               title="Pistenplan {region.name}">
-                <ep:lazyLoadImage image="{regionMap}"
-                                  loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
-                                  class="block w-full h-auto"
-                                  width="330"
-                                  alt="{regionMap.alternative}"
-                                  title="{regionMap.title}"/>
-            </a>
-        </f:for>
-    </div>
-</f:if>
+<html data-namespace-typo3-fluid="true" lang="en"
+      xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
+      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
+
+    <f:if condition="{region.regionMaps}">
+        <div class="bg-gray-50 p-4 mb-4"
+             data-controller="lightbox">
+            <p class="font-bold mb-2">
+                Pistenplan
+            </p>
+            <div class="flex flex-col space-y-2">
+                <f:for each="{region.regionMaps}" as="regionMap" iteration="iteration">
+                    <a href="{f:uri.image(src: '{regionMap.uid}', treatIdAsReference: '1', maxWidth: '2560')}"
+                       data-action="lightbox#open"
+                       data-lightbox-target="thumb"
+                       data-lightbox-index="{iteration.cycle}"
+                       data-lightbox-caption="Pistenplan {region.name}"
+                       title="Pistenplan {region.name}">
+                        <ep:lazyLoadImage image="{regionMap}"
+                                          loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
+                                          class="block w-full h-auto"
+                                          width="330"
+                                          alt="{regionMap.alternative}"
+                                          title="{regionMap.title}"/>
+                    </a>
+                </f:for>
+            </div>
+        </div>
+    </f:if>
+
+</html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/YoutubeVideo.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/YoutubeVideo.html
index d02f281e..cbb27df4 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/YoutubeVideo.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/YoutubeVideo.html
@@ -6,10 +6,17 @@
     <f:layout name="Default"/>
 
     <f:section name="Main">
-        <div class="lazyframe"
-             data-vendor="{f:if(condition: '{data.layout} == 0', then: 'youtube_nocookie', else: 'vimeo')}"
-             data-ratio="16:9"
-             data-src="{ep:uri.video(value: data.header_link, layout: data.layout)}">
+        <div class="relative w-full aspect-w-16 aspect-h-9 bg-cover bg-center"
+             style="background-image: url({f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png')})">
+            <iframe class="absolute top-0 left-0 w-full h-full"
+                    width="640" height="360" allowfullscreen
+                    data-src="{ep:uri.video(value: data.header_link, layout: data.layout)}"
+                    data-cookiefirst-category="advertising"></iframe>
+            <div class="cookiefirst-disabled-resource">
+                <div class="absolute top-1/2 left-1/2 tranform -translate-xy-1/2">
+                    Bitte <a href="#" onclick="CookieFirst.acceptCategory('advertising'); return false" class="underline">Marketing-Cookies akzeptieren</a>, um dieses Video anzusehen.
+                </div>
+            </div>
         </div>
     </f:section>
 
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
index fb8569a2..4d106b78 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
@@ -200,10 +200,17 @@
         <f:render section="Calendar" arguments="{_all}"/>
         <f:render partial="Facts" arguments="{facts: product.facts}"/>
         <f:if condition="{product.video}">
-            <div class="lazyframe mb-4"
-                 data-vendor="vimeo"
-                 data-ratio="16:9"
-                 data-src="{ep:uri.video(value: product.video)}">
+            <div class="relative w-full aspect-w-16 aspect-h-9 bg-cover bg-center mb-4"
+                 style="background-image: url({f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png')})">
+                <iframe class="absolute top-0 left-0 w-full h-full"
+                        width="640" height="360" allowfullscreen
+                        data-src="{ep:uri.video(value: product.video)}"
+                        data-cookiefirst-category="advertising"></iframe>
+                <div class="cookiefirst-disabled-resource">
+                    <div class="absolute top-1/2 left-1/2 tranform -translate-xy-1/2">
+                        Bitte <a href="#" onclick="CookieFirst.acceptCategory('advertising'); return false" class="underline">Marketing-Cookies akzeptieren</a>, um dieses Video anzusehen.
+                    </div>
+                </div>
             </div>
         </f:if>
         <div class="bg-gray-50 p-4 mb-4">