feat(video): Adding template for video, using it in different compone…

…nts - FRONT-4497 (#3506)

* feat(video): Adding template for video, using it in different components - FRONT-4497

* feat(video): Improving merge of extra_classes and extra_attributes - FRONT-4497

* feat(video): Adding missing param in the docs - FRONT-4497

* feat(video): REmoving dangerous whitespace handling - FRONT-4497

* feat(video): Adding back data from media-container - FRONT-4497

* feat(video): Aligning with latest changes - FRONT-4497

* feat(video): Trying to cope with the logic for the gallery - FRONT-4497

* feat(video): Removing unused data in the gallery specs - FRONT-4497

* feat(video): Adding backward compatibility test in media container - FRONT-4497

* feat(video): Feedback - FRONt-4497

* feat(video): Using right poster image for EC video - FRONT-4497

src/implementations/twig/components/banner/__snapshots__/banner.test.js.snap

@@ -544,7 +544,7 @@ exports[`Banner Video renders correctly 1`] = `
     >
       <video
         autoplay=""
-        class="ecl-banner__video"
+        class="ecl-video ecl-banner__video"
         data-ecl-banner-video=""
         loop=""
         muted=""

src/implementations/twig/components/banner/banner.html.twig

@@ -156,21 +156,19 @@
     </figure>
   {% elseif _video is not empty %}
     {# Video #}
-    {% set _video_sources = _video.sources|default([]) %}
-    {% set _video_tracks = _video.tracks|default([]) %}
     <div class="ecl-banner__video-container">
-      <video class="ecl-banner__video" poster="{{ _video.poster }}" autoplay loop muted data-ecl-banner-video>
-        {% if _video_sources is not empty and _video_sources is iterable %}
-          {% for video in _video_sources %}
-            <source src="{{ video.src }}" type="{{ video.type }}">
-          {% endfor %}
-        {% endif %}
-        {% if _video_tracks is not empty and _video_tracks is iterable %}
-          {% for track in _video_tracks %}
-            <track src="{{ track.src }}" kind="{{ track.kind }}" srclang="{{ track.src_lang }}" label="{{ track.label }}">
-          {% endfor %}
-        {% endif %}
-      </video>
+      {% set video_classes = 'ecl-banner__video' ~ (_video.extra_classes ? ' ' ~ _video.extra_classes : '') %}
+      {% set video_attributes = [
+          { name: 'autoplay' },
+          { name: 'loop' },
+          { name: 'muted' },
+          { name: 'data-ecl-banner-video' },
+        ]|merge(_video.extra_attributes|default([]))  %}
+      {% include '@ecl/video/video.html.twig' with _video|merge({
+        controls: false,
+        extra_classes: video_classes,
+        extra_attributes: video_attributes,
+      }) only %}
       {% if _credit is not empty %}
         <div class="ecl-banner__credit" data-ecl-banner-footer>
           <div class="ecl-container">{{ _credit }}</div>

src/implementations/twig/components/banner/package.json

@@ -10,7 +10,8 @@
   "dependencies": {
     "@ecl/twig-component-button": "4.6.1",
     "@ecl/twig-component-link": "4.6.1",
-    "@ecl/twig-component-picture": "4.6.1"
+    "@ecl/twig-component-picture": "4.6.1",
+    "@ecl/twig-component-video": "4.6.1"
   },
   "devDependencies": {
     "@ecl/specs-component-banner": "4.6.1",

src/implementations/twig/components/gallery/__snapshots__/gallery.test.js.snap

@@ -327,8 +327,8 @@ exports[`Gallery Default renders correctly 1`] = `
           class="ecl-gallery__item-link"
           data-ecl-gallery-item=""
           data-ecl-gallery-item-share="/share#example-image5.jpg"
-          data-ecl-gallery-item-video-title="EU law - Video player"
-          href="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4"
+          data-ecl-gallery-item-video-title="Visit the European Commission - Video player"
+          href="https://euc-vod.fl.freecaster.net/12/224712/HD_I224712EN1W.mp4"
           id="ecl-gallery-item-gallery-id-5"
         >
           <figure
@@ -348,12 +348,12 @@ exports[`Gallery Default renders correctly 1`] = `
               </svg>
             </div>
             <video
-              aria-label="EU law - Video"
-              class="ecl-gallery__image"
-              poster="https://inno-ecl.s3.amazonaws.com/media/examples/example-image5.jpg"
+              aria-label="Visit the European Commission - Video"
+              class="ecl-video ecl-gallery__image"
+              poster="https://euc-vod.fl.freecaster.net/12/224712/THUMB_I224712EN1W_V_1.jpg"
             >
               <source
-                src="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4"
+                src="https://euc-vod.fl.freecaster.net/12/224712/HD_I224712EN1W.mp4"
                 type="video/mp4"
               />
             </video>
@@ -366,12 +366,12 @@ exports[`Gallery Default renders correctly 1`] = `
                 data-ecl-gallery-title=""
                 id="ecl-gallery-item-gallery-id-5-title"
               >
-                EU law
+                Visit the European Commission
               </span>
               <span
                 class="ecl-gallery__caption"
               >
-                EU law. [HTML video]
+                The European Commission Visitors' Centre provides the public with an understanding of how the European Commission works and its 3 policies and priorities. [HTML video]
               </span>
               <span
                 class="ecl-gallery__meta"
@@ -1258,8 +1258,8 @@ exports[`Gallery Default renders correctly with extra attributes 1`] = `
           class="ecl-gallery__item-link"
           data-ecl-gallery-item=""
           data-ecl-gallery-item-share="/share#example-image5.jpg"
-          data-ecl-gallery-item-video-title="EU law - Video player"
-          href="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4"
+          data-ecl-gallery-item-video-title="Visit the European Commission - Video player"
+          href="https://euc-vod.fl.freecaster.net/12/224712/HD_I224712EN1W.mp4"
           id="ecl-gallery-item-gallery-id-5"
         >
           <figure
@@ -1279,12 +1279,12 @@ exports[`Gallery Default renders correctly with extra attributes 1`] = `
               </svg>
             </div>
             <video
-              aria-label="EU law - Video"
-              class="ecl-gallery__image"
-              poster="https://inno-ecl.s3.amazonaws.com/media/examples/example-image5.jpg"
+              aria-label="Visit the European Commission - Video"
+              class="ecl-video ecl-gallery__image"
+              poster="https://euc-vod.fl.freecaster.net/12/224712/THUMB_I224712EN1W_V_1.jpg"
             >
               <source
-                src="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4"
+                src="https://euc-vod.fl.freecaster.net/12/224712/HD_I224712EN1W.mp4"
                 type="video/mp4"
               />
             </video>
@@ -1297,12 +1297,12 @@ exports[`Gallery Default renders correctly with extra attributes 1`] = `
                 data-ecl-gallery-title=""
                 id="ecl-gallery-item-gallery-id-5-title"
               >
-                EU law
+                Visit the European Commission
               </span>
               <span
                 class="ecl-gallery__caption"
               >
-                EU law. [HTML video]
+                The European Commission Visitors' Centre provides the public with an understanding of how the European Commission works and its 3 policies and priorities. [HTML video]
               </span>
               <span
                 class="ecl-gallery__meta"
@@ -2187,8 +2187,8 @@ exports[`Gallery Default renders correctly with extra class names 1`] = `
           class="ecl-gallery__item-link"
           data-ecl-gallery-item=""
           data-ecl-gallery-item-share="/share#example-image5.jpg"
-          data-ecl-gallery-item-video-title="EU law - Video player"
-          href="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4"
+          data-ecl-gallery-item-video-title="Visit the European Commission - Video player"
+          href="https://euc-vod.fl.freecaster.net/12/224712/HD_I224712EN1W.mp4"
           id="ecl-gallery-item-gallery-id-5"
         >
           <figure
@@ -2208,12 +2208,12 @@ exports[`Gallery Default renders correctly with extra class names 1`] = `
               </svg>
             </div>
             <video
-              aria-label="EU law - Video"
-              class="ecl-gallery__image"
-              poster="https://inno-ecl.s3.amazonaws.com/media/examples/example-image5.jpg"
+              aria-label="Visit the European Commission - Video"
+              class="ecl-video ecl-gallery__image"
+              poster="https://euc-vod.fl.freecaster.net/12/224712/THUMB_I224712EN1W_V_1.jpg"
             >
               <source
-                src="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4"
+                src="https://euc-vod.fl.freecaster.net/12/224712/HD_I224712EN1W.mp4"
                 type="video/mp4"
               />
             </video>
@@ -2226,12 +2226,12 @@ exports[`Gallery Default renders correctly with extra class names 1`] = `
                 data-ecl-gallery-title=""
                 id="ecl-gallery-item-gallery-id-5-title"
               >
-                EU law
+                Visit the European Commission
               </span>
               <span
                 class="ecl-gallery__caption"
               >
-                EU law. [HTML video]
+                The European Commission Visitors' Centre provides the public with an understanding of how the European Commission works and its 3 policies and priorities. [HTML video]
               </span>
               <span
                 class="ecl-gallery__meta"
@@ -3116,8 +3116,8 @@ exports[`Gallery Default renders correctly with old data 1`] = `
           class="ecl-gallery__item-link"
           data-ecl-gallery-item=""
           data-ecl-gallery-item-share="/share#example-image5.jpg"
-          data-ecl-gallery-item-video-title="EU law - Video player"
-          href="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4"
+          data-ecl-gallery-item-video-title="Visit the European Commission - Video player"
+          href="https://euc-vod.fl.freecaster.net/12/224712/HD_I224712EN1W.mp4"
           id="ecl-gallery-item-gallery-id-5"
         >
           <figure
@@ -3137,12 +3137,12 @@ exports[`Gallery Default renders correctly with old data 1`] = `
               </svg>
             </div>
             <video
-              aria-label="EU law - Video"
-              class="ecl-gallery__image"
-              poster="https://inno-ecl.s3.amazonaws.com/media/examples/example-image5.jpg"
+              aria-label="Visit the European Commission - Video"
+              class="ecl-video ecl-gallery__image"
+              poster="https://euc-vod.fl.freecaster.net/12/224712/THUMB_I224712EN1W_V_1.jpg"
             >
               <source
-                src="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4"
+                src="https://euc-vod.fl.freecaster.net/12/224712/HD_I224712EN1W.mp4"
                 type="video/mp4"
               />
             </video>
@@ -3155,12 +3155,12 @@ exports[`Gallery Default renders correctly with old data 1`] = `
                 data-ecl-gallery-title=""
                 id="ecl-gallery-item-gallery-id-5-title"
               >
-                EU law
+                Visit the European Commission
               </span>
               <span
                 class="ecl-gallery__caption"
               >
-                EU law. [HTML video]
+                The European Commission Visitors' Centre provides the public with an understanding of how the European Commission works and its 3 policies and priorities. [HTML video]
               </span>
               <span
                 class="ecl-gallery__meta"
@@ -4045,8 +4045,8 @@ exports[`Gallery Grid renders correctly 1`] = `
           class="ecl-gallery__item-link"
           data-ecl-gallery-item=""
           data-ecl-gallery-item-share="/share#example-image5.jpg"
-          data-ecl-gallery-item-video-title="EU law - Video player"
-          href="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4"
+          data-ecl-gallery-item-video-title="Visit the European Commission - Video player"
+          href="https://euc-vod.fl.freecaster.net/12/224712/HD_I224712EN1W.mp4"
           id="ecl-gallery-item-gallery-id-5"
         >
           <figure
@@ -4066,12 +4066,12 @@ exports[`Gallery Grid renders correctly 1`] = `
               </svg>
             </div>
             <video
-              aria-label="EU law - Video"
-              class="ecl-gallery__image"
-              poster="https://inno-ecl.s3.amazonaws.com/media/examples/example-image5.jpg"
+              aria-label="Visit the European Commission - Video"
+              class="ecl-video ecl-gallery__image"
+              poster="https://euc-vod.fl.freecaster.net/12/224712/THUMB_I224712EN1W_V_1.jpg"
             >
               <source
-                src="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4"
+                src="https://euc-vod.fl.freecaster.net/12/224712/HD_I224712EN1W.mp4"
                 type="video/mp4"
               />
             </video>
@@ -4084,12 +4084,12 @@ exports[`Gallery Grid renders correctly 1`] = `
                 data-ecl-gallery-title=""
                 id="ecl-gallery-item-gallery-id-5-title"
               >
-                EU law
+                Visit the European Commission
               </span>
               <span
                 class="ecl-gallery__caption"
               >
-                EU law. [HTML video]
+                The European Commission Visitors' Centre provides the public with an understanding of how the European Commission works and its 3 policies and priorities. [HTML video]
               </span>
               <span
                 class="ecl-gallery__meta"

src/implementations/twig/components/gallery/gallery-item.html.twig

@@ -143,9 +143,15 @@
     {% if _item.embedded_video is not empty %}
       {# Embedded video #}
       {{- _thumbnail_markup -}}
-    {% elseif _item.video is not empty %}
-      {# HTML video #}
-      {% include '@ecl/gallery/gallery-video.html.twig' %}
+    {% elseif _item.video is defined and _item.video is not empty %}
+      {% set video_classes = 'ecl-gallery__image' ~ (_item.video.extra_classes ? ' ' ~ _item.video.extra_classes : '') %}
+      {% include '@ecl/video/video.html.twig' with _item.video|merge({
+        title: _item.title,
+        sr_video_label: _sr_video_label,
+        sr_video_player: _sr_video_player,
+        controls: false,
+        extra_classes: video_classes,     
+      }) only %}
     {% else %}
       {# Image #}
       {{- _thumbnail_markup -}}

src/implementations/twig/components/gallery/package.json

@@ -11,7 +11,8 @@
     "@ecl/twig-component-button": "4.6.1",
     "@ecl/twig-component-icon": "4.6.1",
     "@ecl/twig-component-link": "4.6.1",
-    "@ecl/twig-component-picture": "4.6.1"
+    "@ecl/twig-component-picture": "4.6.1",
+    "@ecl/twig-component-video": "4.6.1"
   },
   "devDependencies": {
     "@ecl/specs-component-gallery": "4.6.1",

src/implementations/twig/components/media-container/__snapshots__/media-container.test.js.snap

@@ -174,7 +174,7 @@ exports[`Media Container video renders correctly 1`] = `
     >
       <video
         aria-label="Visit the European Commission - Video player"
-        class="ecl-media-container__media"
+        class="ecl-video ecl-media-container__media"
         controls=""
         poster="https://euc-vod.fl.freecaster.net/12/224712/THUMB_I224712EN1W_V_1.jpg"
       >
@@ -225,3 +225,32 @@ exports[`Media Container video with embedded media renders correctly 1`] = `
   </div>
 </jest>
 `;
+
+exports[`Media Container video with old data renders correctly 1`] = `
+<jest>
+  <div
+    class="ecl-media-container"
+  >
+    <figure
+      class="ecl-media-container__figure"
+    >
+      <video
+        aria-label="Visit the European Commission - Video player"
+        class="ecl-video ecl-media-container__media"
+        controls=""
+        poster="https://euc-vod.fl.freecaster.net/12/224712/THUMB_I224712EN1W_V_1.jpg"
+      >
+        <source
+          src="https://euc-vod.fl.freecaster.net/12/224712/HD_I224712EN1W.mp4"
+          type="video/mp4"
+        />
+      </video>
+      <figcaption
+        class="ecl-media-container__caption"
+      >
+        The European Commission Visitors' Centre provides the public with an understanding of how the European Commission works and its 3 policies and priorities. The Centre welcomes different interest groups to Brussels, or virtually, to help them better understand the role of the European Commission and how it impacts their daily lives. Visitors to the Centre in Brussels can enjoy a digital and multifunctional experience providing access to the latest initiatives.
+      </figcaption>
+    </figure>
+  </div>
+</jest>
+`;