From a5bd28fb690c806860d3fefb79a0e5b488d43968 Mon Sep 17 00:00:00 2001 From: "noah.lancien" Date: Wed, 21 Jun 2023 15:16:52 +0000 Subject: [PATCH] Videos from vimeo are now playable if the vimeo cookie is enabled --- app/Http/Middleware/SecureHeaders.php | 3 +- resources/js/main.js | 43 +++++++ .../pages/brand/poultry_pages/_engage.scss | 31 +++++ .../brand/poultry_pages/blocs/_bloc2.scss | 18 +-- .../views/front/modules/video-vimeo.blade.php | 11 +- resources/views/front/webldc-cn.blade.php | 109 ++++++------------ resources/views/layouts/app-head.blade.php | 2 +- 7 files changed, 127 insertions(+), 90 deletions(-) diff --git a/app/Http/Middleware/SecureHeaders.php b/app/Http/Middleware/SecureHeaders.php index a2e1a006..a2bbecb7 100644 --- a/app/Http/Middleware/SecureHeaders.php +++ b/app/Http/Middleware/SecureHeaders.php @@ -47,6 +47,7 @@ class SecureHeaders '\'self\'', 'https://www.youtube.com', 'https://vimeo.com/', + 'https://player.vimeo.com/', 'https://www.google.com/recaptcha/', 'https://recaptcha.google.com/recaptcha/' ]) . ';', @@ -72,7 +73,7 @@ class SecureHeaders ); $response->headers->set('Feature-Policy', \implode(',', [ 'fullscreen', 'accelerometer', 'encrypted-media', - 'gyroscope', 'picture-in-picture', '\'self\'' + 'gyroscope', 'picture-in-picture' ]) . ';'); return $response; } diff --git a/resources/js/main.js b/resources/js/main.js index cab2ffda..69e7821b 100644 --- a/resources/js/main.js +++ b/resources/js/main.js @@ -41,6 +41,49 @@ pages.keys().map(key => { }); }); +document.addEventListener('DOMContentLoaded', function () { + // * Video frames. + const videoFrameList = document.querySelectorAll(".video-frame"); + for (const videoLink of videoFrameList) { + if (!videoLink.dataset.type) { + throw new Error("Missing dataset type"); + } + if (!videoLink.dataset.frame) { + throw new Error("Missing dataset frame"); + } + // @ts-ignore + window.__CN_VIDEO = window.__CN_VIDEO ?? {}; + + const newIframe = document.createElement("iframe"); + newIframe.frameBorder = "0"; + newIframe.allow = "fullscreen"; + newIframe.width = "1920px"; + newIframe.height = "1080px"; + newIframe.setAttribute("allowfullscreen", "allowfullscreen"); + + // @ts-ignore + const instance = new FsLightbox(); + instance.props.sources = [newIframe]; + + setTimeout(() => { + videoLink.addEventListener("click", (e) => { + e.preventDefault(); + + // * This comes fslightbox lib + // @ts-ignore + instance.open(); + setTimeout(function () { + // @ts-ignore + newIframe.src = window.__CN_VIDEO[videoLink.dataset.type] + ? String(videoLink.href) + : String(videoLink.dataset.frame); + }, 50); + return false; + }); + }, 300); + } +}) + let vueOptions = { el: "#app" }; diff --git a/resources/sass/front/pages/brand/poultry_pages/_engage.scss b/resources/sass/front/pages/brand/poultry_pages/_engage.scss index 8b137891..cdaa7911 100644 --- a/resources/sass/front/pages/brand/poultry_pages/_engage.scss +++ b/resources/sass/front/pages/brand/poultry_pages/_engage.scss @@ -1 +1,32 @@ +.absolute { + position: absolute; +} +.relative { + position: relative; +} + +.vimeo-play-button { + top: 50%; + left: 50%; + font-size: 3rem; + transform: translateX(-50%) translateY(-50%); + color: #fff; +} + +.top-50 { + top: 50% +} + +.left-50 { + left: 50%; +} + +@media screen and (min-width: 1230px) { + .video-frame > img { + height: 14vw; + min-height: 22.13112rem; + width: 24vw; + min-width: 39.12942rem; + } +} diff --git a/resources/sass/front/pages/brand/poultry_pages/blocs/_bloc2.scss b/resources/sass/front/pages/brand/poultry_pages/blocs/_bloc2.scss index 14746577..82ecb651 100644 --- a/resources/sass/front/pages/brand/poultry_pages/blocs/_bloc2.scss +++ b/resources/sass/front/pages/brand/poultry_pages/blocs/_bloc2.scss @@ -8,11 +8,13 @@ top: 8.666rem; left: 0; z-index: 1; + max-width: 100%; & > .video { - height: 14vw; - min-height: 22.13112rem; - width: 24vw; - min-width: 39.12942rem; + max-width: 90vw; + height: auto; + & > img { + max-width: 100%; + } } } & > .content { @@ -99,15 +101,7 @@ top: 0; left: 50%; transform: translateX(-50%); - width: 100%; - max-width: inherit; z-index: 0; - & > .video { - height: 22.13112rem; - width: inherit; - min-height: 22.13112rem; - min-width: inherit; - } } & > .content { position: relative; diff --git a/resources/views/front/modules/video-vimeo.blade.php b/resources/views/front/modules/video-vimeo.blade.php index 8034591b..e230a9b2 100644 --- a/resources/views/front/modules/video-vimeo.blade.php +++ b/resources/views/front/modules/video-vimeo.blade.php @@ -1,3 +1,8 @@ -
- -
+ + Alt + + diff --git a/resources/views/front/webldc-cn.blade.php b/resources/views/front/webldc-cn.blade.php index daaf12fc..f27c7e94 100644 --- a/resources/views/front/webldc-cn.blade.php +++ b/resources/views/front/webldc-cn.blade.php @@ -41,86 +41,46 @@ $cookies = []; // YOUTUBE $cookies['youtube'] = [ - 'name' => 'VIDEOS - Youtube', - 'description' => __('Les cookies déposés via les services de partage de vidéo ont pour finalité de permettre à l’utilisateur de visionner directement sur le site le contenu multimédia.'), + 'name' => __('cookie-notice.custom.youtube.name'), + 'description' => __('cookie-notice.custom.youtube.name'), + 'labelLink' => __('cookie-notice.custom.youtube.labelLink'), 'link' => 'https://policies.google.com/technologies/cookies?hl=fr&utm_source=ucb', - 'labelLink' => __('En savoir +'), 'cookies' => ['NID', 'VISITOR_INFO1_LIVE', 'YSC'] ]; $cookies['youtube']['script'] = << @endpush + diff --git a/resources/views/layouts/app-head.blade.php b/resources/views/layouts/app-head.blade.php index 4cfe4b2b..1719953c 100644 --- a/resources/views/layouts/app-head.blade.php +++ b/resources/views/layouts/app-head.blade.php @@ -51,4 +51,4 @@ -@stack('styles') \ No newline at end of file +@stack('styles')