Merge branch 'issue-14' into 'develop'

Videos from vimeo are now playable if the vimeo cookie is enabled Closes #14 See merge request ldc-web/projets/le-gaulois!47
2023-06-21 15:16:52 +00:00 · 2023-06-21 15:16:52 +00:00 · e24bfaf301
commit e24bfaf301
parent 7ca36a0913 a5bd28fb69
7 changed files with 127 additions and 90 deletions
--- 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;
    }
--- 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"
 };
--- 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;
+    }
+}
--- 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;
--- a/resources/views/front/modules/video-vimeo.blade.php
+++ b/resources/views/front/modules/video-vimeo.blade.php
@ -1,3 +1,8 @@
-<div class="video vimeo" data-authorize="0">
-    <iframe src="/frame/vimeo" data-src="https://player.vimeo.com/video{{ parse_url($url, PHP_URL_PATH) }}" width="100%" height="100%" frameborder="0" allow="fullscreen"></iframe>
-</div>
+<a class="video vimeo video-frame" style="display: block" data-type="vimeo" data-frame="{{ route('front.frame', ['type' => 'vimeo']) }}" href="https://player.vimeo.com/video{{ parse_url($url, PHP_URL_PATH) }}" data-authorize="0">
+    <img
+        src="https://vumbnail.com/{{ parse_url($url, PHP_URL_PATH) }}.jpg"
+        alt="Alt"
+        title="Title"
+    >
+    <i class="vimeo-play-button absolute top-50 left-50 fa fa-regular fa-play-circle"></i>
+</a>
--- 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'] = <<<SCRIPT
 function () {
-    let frames = document.querySelectorAll('.video.youtube');
-    for (let frame of frames) {
-        frame.dataset.authorize = 1;
-        let iframe = frame.querySelector('iframe') ?? frame;
-        if (iframe) {
-            iframe.src = iframe.dataset.src;
-        }
-    }
+    window.__CN_VIDEO = window.__CN_VIDEO ?? {};
+    window.__CN_VIDEO.youtube = true;
 }
 SCRIPT;
 $cookies['youtube']['fallback'] = <<<FALLBACK
 function () {
-    let youtubeVids = document.getElementsByClassName('.video.youtube');
-    for (let item of youtubeVids) {
-        let a = document.createElement('a');
-        a.innerText = 'Autoriser';
-        a.classList.add('cn-cookie-link');
-        a.classList.add('btn-autorize');
-        a.onclick = function () {
-            CookieNotice.openModal();
-        };
-        let e = document.createElement('p');
-        e.innerHTML = 'Youtube est désactivé. ';
-        item.innerHTML = "";
-        e.appendChild(a);
-        item.appendChild(e);
-    }
+    window.__CN_VIDEO = window.__CN_VIDEO ?? {};
+    window.__CN_VIDEO.youtube = false;
 }
 FALLBACK;

+
 // VIMEO
 $cookies['vimeo'] = [
-    'name' => 'VIDEOS - Vimeo',
-    '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.vimeo.name'),
+    'description' => __('cookie-notice.custom.vimeo.description'),
+    'labelLink' => __('cookie-notice.custom.vimeo.labelLink'),
    'link' => 'https://vimeo.com/cookie_policy',
-    'labelLink' => __('En savoir +'),
    'cookies' => []
 ];

 $cookies['vimeo']['script'] = <<<SCRIPT
 function () {
-    setTimeout(() => {
-        let frames = document.querySelectorAll('.video.vimeo');
-        for (let frame of frames) {
-            frame.dataset.authorize = 1;
-            let iframe = frame.querySelector('iframe');
-            iframe = iframe ? iframe : frame;
-            if (iframe) {
-                iframe.src = iframe.dataset.src;
-            }
-        }
-    }, 200)
+    window.__CN_VIDEO = window.__CN_VIDEO ?? {};
+    window.__CN_VIDEO.vimeo = true;
 }
 SCRIPT;
 $cookies['vimeo']['fallback'] = <<<FALLBACK
 function () {
-    let vimeoVids = document.getElementsByClassName('.video.vimeo');
-    for (let item of vimeoVids) {
-        let a = document.createElement('a');
-        a.innerText = 'Autoriser';
-        a.classList.add('cn-cookie-link');
-        a.classList.add('btn-autorize');
-        a.onclick = function () {
-            CookieNotice.openModal();
-        };
-        let e = document.createElement('p');
-        e.innerHTML = 'Vimeo est désactivé. ';
-        item.innerHTML = "";
-        e.appendChild(a);
-        item.appendChild(e);
-    }
+    window.__CN_VIDEO = window.__CN_VIDEO ?? {};
+    window.__CN_VIDEO.vimeo = false;
 }
 FALLBACK;

@ -241,23 +201,26 @@ SCRIPT;

@push('scripts')
 <script nonce="{{ $nonce ?? '' }}">
-window.WebCookieNotice = {};
-@foreach($cookies as $index_name => $cookie)
-window.WebCookieNotice['{{ $index_name }}'] = {};
-window.WebCookieNotice['{{ $index_name }}'].tmp = {};
-// SCRIPT
-window.WebCookieNotice['{{ $index_name }}'].tmp.script = {!! strip_tags($cookie['script']) !!};
-@php unset($cookie['script']); @endphp
-// FALLBACK
-@if(isset($cookie['fallback']))
-window.WebCookieNotice['{{ $index_name }}'].tmp.fallback = {!! strip_tags($cookie['fallback']) !!};
-@php unset($cookie['fallback']); @endphp
-@endif
-window.WebCookieNotice['{{ $index_name }}'].conf = @json($cookie);
-window.WebCookieNotice['{{ $index_name }}'].conf.script = window.WebCookieNotice['{{ $index_name }}'].tmp.script;
-window.WebCookieNotice['{{ $index_name }}'].conf.fallback = window.WebCookieNotice['{{ $index_name }}'].tmp.fallback;
-window.WebCookieNotice['{{ $index_name }}'] = window.WebCookieNotice['{{ $index_name }}'].conf;
-@endforeach
-window.WebCookieNotice = new CookieNotice(window.WebCookieNotice);
+document.addEventListener('DOMContentLoaded', function () {
+    window.WebCookieNotice = {};
+    @foreach($cookies as $index_name => $cookie)
+    window.WebCookieNotice['{{ $index_name }}'] = {};
+    window.WebCookieNotice['{{ $index_name }}'].tmp = {};
+    // SCRIPT
+    window.WebCookieNotice['{{ $index_name }}'].tmp.script = {!! strip_tags($cookie['script']) !!};
+    @php unset($cookie['script']); @endphp
+    // FALLBACK
+    @if(isset($cookie['fallback']))
+    window.WebCookieNotice['{{ $index_name }}'].tmp.fallback = {!! strip_tags($cookie['fallback']) !!};
+    @php unset($cookie['fallback']); @endphp
+    @endif
+    window.WebCookieNotice['{{ $index_name }}'].conf = @json($cookie);
+    window.WebCookieNotice['{{ $index_name }}'].conf.script = window.WebCookieNotice['{{ $index_name }}'].tmp.script;
+    window.WebCookieNotice['{{ $index_name }}'].conf.fallback = window.WebCookieNotice['{{ $index_name }}'].tmp.fallback;
+    window.WebCookieNotice['{{ $index_name }}'] = window.WebCookieNotice['{{ $index_name }}'].conf;
+    @endforeach
+    window.WebCookieNotice = new CookieNotice(window.WebCookieNotice);
+});
 </script>
@endpush
+
--- a/resources/views/layouts/app-head.blade.php
+++ b/resources/views/layouts/app-head.blade.php
@ -51,4 +51,4 @@
 <!-- STYLES -->
 <link rel="stylesheet" href="{{ mix('css/preload-main.css') }}">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
-@stack('styles')
+@stack('styles')