From 69eb68045838e56c609dd8b801ae77d9e7e8b26e Mon Sep 17 00:00:00 2001
From: Alexis Gaillard <a@bypopcorn.com>
Date: Tue, 6 Sep 2022 13:29:58 +0200
Subject: [PATCH] fix(gallery): Fix AV Portal video overlay display -
 FRONT-3741

---
 .../__snapshots__/gallery.test.js.snap        | 114 +++++-------------
 .../vanilla/components/gallery/_gallery.scss  |   2 +-
 src/specs/components/gallery/demo/data.js     |  41 ++-----
 3 files changed, 37 insertions(+), 120 deletions(-)

diff --git a/src/implementations/twig/components/gallery/__snapshots__/gallery.test.js.snap b/src/implementations/twig/components/gallery/__snapshots__/gallery.test.js.snap
index 621af92eb7f..b233aedd8bf 100644
--- a/src/implementations/twig/components/gallery/__snapshots__/gallery.test.js.snap
+++ b/src/implementations/twig/components/gallery/__snapshots__/gallery.test.js.snap
@@ -334,40 +334,20 @@ exports[`Gallery Default renders correctly 1`] = `
         class="ecl-gallery__item"
       >
         <a
-          aria-label="Image 8"
+          aria-label="Climate change and protect nature"
           class="ecl-gallery__item-link"
           data-ecl-gallery-item=""
-          data-ecl-gallery-item-share="/share#example-image8.jpg"
-          href="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4"
+          data-ecl-gallery-item-embed-src="https://audiovisual.ec.europa.eu/embed/index.html?ref=I-223223&lg=EN"
+          href="https://audiovisual.ec.europa.eu/embed/index.html?ref=I-223223&lg=EN"
         >
           <figure
             class="ecl-gallery__image-container"
           >
-            <video
+            <img
+              alt="Climate change and protect nature"
               class="ecl-gallery__image"
-              poster="https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg"
-            >
-              <source
-                src="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4"
-                type="video/mp4"
-              />
-              <source
-                src="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.webm"
-                type="video/webm"
-              />
-              <track
-                kind="captions"
-                label="English"
-                src="/captions/bunny-en.vtt"
-                srclang="en"
-              />
-              <track
-                kind="captions"
-                label="français"
-                src="/captions/bunny-fr.vtt"
-                srclang="fr"
-              />
-            </video>
+              src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg"
+            />
             <svg
               aria-hidden="true"
               class="ecl-icon ecl-icon--l ecl-gallery__image-icon"
@@ -381,7 +361,7 @@ exports[`Gallery Default renders correctly 1`] = `
               class="ecl-gallery__description"
               data-ecl-gallery-description=""
             >
-              Kids' Corner
+              Climate change and protect nature
               <svg
                 aria-hidden="true"
                 class="ecl-icon ecl-icon--l ecl-gallery__description-icon"
@@ -395,7 +375,7 @@ exports[`Gallery Default renders correctly 1`] = `
                 class="ecl-gallery__meta"
                 data-ecl-gallery-meta=""
               >
-                Copyright, Author, Licence for image 8
+                Copyright, Author, Licence for embedded media
               </span>
             </figcaption>
           </figure>
@@ -1022,40 +1002,20 @@ exports[`Gallery Default renders correctly with extra attributes 1`] = `
         class="ecl-gallery__item"
       >
         <a
-          aria-label="Image 8"
+          aria-label="Climate change and protect nature"
           class="ecl-gallery__item-link"
           data-ecl-gallery-item=""
-          data-ecl-gallery-item-share="/share#example-image8.jpg"
-          href="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4"
+          data-ecl-gallery-item-embed-src="https://audiovisual.ec.europa.eu/embed/index.html?ref=I-223223&lg=EN"
+          href="https://audiovisual.ec.europa.eu/embed/index.html?ref=I-223223&lg=EN"
         >
           <figure
             class="ecl-gallery__image-container"
           >
-            <video
+            <img
+              alt="Climate change and protect nature"
               class="ecl-gallery__image"
-              poster="https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg"
-            >
-              <source
-                src="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4"
-                type="video/mp4"
-              />
-              <source
-                src="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.webm"
-                type="video/webm"
-              />
-              <track
-                kind="captions"
-                label="English"
-                src="/captions/bunny-en.vtt"
-                srclang="en"
-              />
-              <track
-                kind="captions"
-                label="français"
-                src="/captions/bunny-fr.vtt"
-                srclang="fr"
-              />
-            </video>
+              src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg"
+            />
             <svg
               aria-hidden="true"
               class="ecl-icon ecl-icon--l ecl-gallery__image-icon"
@@ -1069,7 +1029,7 @@ exports[`Gallery Default renders correctly with extra attributes 1`] = `
               class="ecl-gallery__description"
               data-ecl-gallery-description=""
             >
-              Kids' Corner
+              Climate change and protect nature
               <svg
                 aria-hidden="true"
                 class="ecl-icon ecl-icon--l ecl-gallery__description-icon"
@@ -1083,7 +1043,7 @@ exports[`Gallery Default renders correctly with extra attributes 1`] = `
                 class="ecl-gallery__meta"
                 data-ecl-gallery-meta=""
               >
-                Copyright, Author, Licence for image 8
+                Copyright, Author, Licence for embedded media
               </span>
             </figcaption>
           </figure>
@@ -1708,40 +1668,20 @@ exports[`Gallery Default renders correctly with extra class names 1`] = `
         class="ecl-gallery__item"
       >
         <a
-          aria-label="Image 8"
+          aria-label="Climate change and protect nature"
           class="ecl-gallery__item-link"
           data-ecl-gallery-item=""
-          data-ecl-gallery-item-share="/share#example-image8.jpg"
-          href="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4"
+          data-ecl-gallery-item-embed-src="https://audiovisual.ec.europa.eu/embed/index.html?ref=I-223223&lg=EN"
+          href="https://audiovisual.ec.europa.eu/embed/index.html?ref=I-223223&lg=EN"
         >
           <figure
             class="ecl-gallery__image-container"
           >
-            <video
+            <img
+              alt="Climate change and protect nature"
               class="ecl-gallery__image"
-              poster="https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg"
-            >
-              <source
-                src="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4"
-                type="video/mp4"
-              />
-              <source
-                src="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.webm"
-                type="video/webm"
-              />
-              <track
-                kind="captions"
-                label="English"
-                src="/captions/bunny-en.vtt"
-                srclang="en"
-              />
-              <track
-                kind="captions"
-                label="français"
-                src="/captions/bunny-fr.vtt"
-                srclang="fr"
-              />
-            </video>
+              src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg"
+            />
             <svg
               aria-hidden="true"
               class="ecl-icon ecl-icon--l ecl-gallery__image-icon"
@@ -1755,7 +1695,7 @@ exports[`Gallery Default renders correctly with extra class names 1`] = `
               class="ecl-gallery__description"
               data-ecl-gallery-description=""
             >
-              Kids' Corner
+              Climate change and protect nature
               <svg
                 aria-hidden="true"
                 class="ecl-icon ecl-icon--l ecl-gallery__description-icon"
@@ -1769,7 +1709,7 @@ exports[`Gallery Default renders correctly with extra class names 1`] = `
                 class="ecl-gallery__meta"
                 data-ecl-gallery-meta=""
               >
-                Copyright, Author, Licence for image 8
+                Copyright, Author, Licence for embedded media
               </span>
             </figcaption>
           </figure>
diff --git a/src/implementations/vanilla/components/gallery/_gallery.scss b/src/implementations/vanilla/components/gallery/_gallery.scss
index 2927338083f..80bbf1ad09f 100644
--- a/src/implementations/vanilla/components/gallery/_gallery.scss
+++ b/src/implementations/vanilla/components/gallery/_gallery.scss
@@ -283,7 +283,7 @@ $_overlay-links-hover-color: null !default;
 .ecl-gallery__slider-embed {
   @include uMedia.aspect-ratio(16, 9);
 
-  width: 100%;
+  width: calc(100% - map.get(theme.$spacing, 'l'));
 }
 
 .ecl-gallery__slider-previous {
diff --git a/src/specs/components/gallery/demo/data.js b/src/specs/components/gallery/demo/data.js
index fcb846a2d95..c6144b3ec3a 100644
--- a/src/specs/components/gallery/demo/data.js
+++ b/src/specs/components/gallery/demo/data.js
@@ -119,44 +119,21 @@ module.exports = {
       share_path: '/share#example-image7.jpg',
     },
     {
-      // Video
-      video: {
-        poster:
-          'https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg',
-        sources: [
-          {
-            src: 'https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4',
-            type: 'video/mp4',
-          },
-          {
-            src: 'https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.webm',
-            type: 'video/webm',
-          },
-        ],
-        tracks: [
-          {
-            src: '/captions/bunny-en.vtt',
-            kind: 'captions',
-            src_lang: 'en',
-            label: 'English',
-          },
-          {
-            src: '/captions/bunny-fr.vtt',
-            kind: 'captions',
-            src_lang: 'fr',
-            label: 'français',
-          },
-        ],
+      // Embedded AV Portal video
+      image: {
+        src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg',
+        alt: 'Climate change and protect nature',
       },
-      alt: 'Image 8',
-      description: "Kids' Corner",
-      meta: 'Copyright, Author, Licence for image 8',
+      embedded_video: {
+        src: 'https://audiovisual.ec.europa.eu/embed/index.html?ref=I-223223&lg=EN',
+      },
+      description: 'Climate change and protect nature',
+      meta: 'Copyright, Author, Licence for embedded media',
       icon: {
         name: 'video',
         size: 'l',
         path: '/icons.svg',
       },
-      share_path: '/share#example-image8.jpg',
     },
     {
       // Image