feat(video): Adding support for muted, autoplay and loop - Media container adding autoplay video option - FRONT-4600

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

@@ -685,3 +685,158 @@ exports[`Banner Video renders correctly 1`] = `
   </section>
 </jest>
 `;
+
+exports[`Banner Video renders correctly with extra attributes for the video 1`] = `
+<jest>
+  <section
+    class="ecl-banner ecl-banner--m ecl-banner--font-m ecl-banner--box-bg-light ecl-banner--color-dark ecl-banner--h-left ecl-banner--v-center"
+    data-ecl-auto-init="Banner"
+    data-ecl-banner=""
+  >
+    <div
+      class="ecl-banner__video-container"
+    >
+      <video
+        autoplay=""
+        class="ecl-video ecl-banner__video"
+        data-ecl-banner-video=""
+        data-test-extra-attribute=""
+        loop=""
+        muted=""
+        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>
+      <div
+        class="ecl-banner__credit"
+        data-ecl-banner-footer=""
+      >
+        <div
+          class="ecl-container"
+        >
+          © Copyright
+        </div>
+      </div>
+      <button
+        class="ecl-button ecl-button--tertiary ecl-banner__play ecl-button--icon-only"
+        data-ecl-banner-play=""
+        type="button"
+      >
+        <span
+          class="ecl-button__container"
+        >
+          <span
+            class="ecl-button__label"
+            data-ecl-label="true"
+          >
+            Play video
+          </span>
+          <svg
+            aria-hidden="true"
+            class="ecl-icon ecl-icon--m ecl-button__icon"
+            data-ecl-icon=""
+            focusable="false"
+          >
+            <use
+              xlink:href="/icons.svg#play-outline"
+            />
+          </svg>
+        </span>
+      </button>
+      <button
+        class="ecl-button ecl-button--tertiary ecl-banner__pause ecl-button--icon-only"
+        data-ecl-banner-pause=""
+        type="button"
+      >
+        <span
+          class="ecl-button__container"
+        >
+          <span
+            class="ecl-button__label"
+            data-ecl-label="true"
+          >
+            Pause video
+          </span>
+          <svg
+            aria-hidden="true"
+            class="ecl-icon ecl-icon--m ecl-button__icon"
+            data-ecl-icon=""
+            focusable="false"
+          >
+            <use
+              xlink:href="/icons.svg#pause-outline"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+    <div
+      class="ecl-container ecl-banner__info"
+    >
+      <div
+        class="ecl-banner__container"
+        data-ecl-banner-container=""
+      >
+        <div
+          class="ecl-banner__content"
+        >
+          <div
+            class="ecl-banner__title"
+          >
+            <span
+              class="ecl-banner__title-text"
+            >
+              <a
+                class="ecl-link ecl-banner__title-link"
+                href="/example"
+              >
+                Lorem ipsum dolor sit amet consectetuer adipiscin
+              </a>
+            </span>
+          </div>
+          <p
+            class="ecl-banner__description"
+          >
+            <span
+              class="ecl-banner__description-text"
+            >
+              <a
+                class="ecl-link ecl-banner__description-link"
+                href="/example"
+              >
+                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+              </a>
+            </span>
+          </p>
+          <div
+            class="ecl-banner__cta"
+          >
+            <a
+              class="ecl-link ecl-link--cta ecl-link--icon ecl-banner__link-cta"
+              href="/example"
+            >
+              <span
+                class="ecl-link__label"
+              >
+                CTA link
+              </span>
+              <svg
+                aria-hidden="true"
+                class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-link__icon"
+                focusable="false"
+              >
+                <use
+                  xlink:href="/icons.svg#corner-arrow"
+                />
+              </svg>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</jest>
+`;

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

@@ -161,16 +161,13 @@
     {# Video #}
     <div class="ecl-banner__video-container">
       {% 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,
+        autoplay: true,
+        muted: true,
+        loop: true,
         extra_classes: video_classes,
-        extra_attributes: video_attributes,
+        extra_attributes: video.extra_attributes|default([])|merge([{ name: 'data-ecl-banner-video' }]),
       }) only %}
       {% if _credit is not empty %}
         <div class="ecl-banner__credit" data-ecl-banner-footer>

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

@@ -90,5 +90,15 @@ describe('Banner', () => {
 
       return expect(render(data)).resolves.toMatchSnapshot();
     });
+
+    test(`renders correctly with extra attributes for the video`, () => {
+      expect.assertions(1);
+      const dataVideo = {
+        ...data.video,
+        extra_attributes: [{ name: 'data-test-extra-attribute' }],
+      };
+      const dataAttributes = { ...data, video: dataVideo };
+      return expect(render(dataAttributes)).resolves.toMatchSnapshot();
+    });
   });
 });

src/implementations/twig/components/media-container/README.md

@@ -13,17 +13,12 @@ npm install --save @ecl/twig-component-media-container
 - **"sr_video_player"** (string) (default: ''): additional label for the video player; for screen readers
 - **"sr_video_audio"** (string) (default: ''): additional text to indicate if there is an audio description; for screen readers
 - **"picture"** (associative array) (default: {}): Image for the media container, following ECL Picture structure
+- **"video"** (associative array) (default: {}) An ECL video object
+- **"autoplay"**: (bool) (default: false) If the media is a video, makes it autoplay, with no sound and in a loop.
+- **"sr_play"** (string) (default: ''): Label for the play button (for the autoplay video)
+- **"sr_pause"** (string) (default: ''): Label for the pause button (for the autoplay video)
+- **"icon_path"**: (string) (default: '') Path or url to the icons sprite (for autoplay video)
 - **"full_width"**: (bool) (default: false) Full width media container (inside the grid container)
-- **"sources"** (array) (default: []) Array of Video sources with this structure:
-  - "src" (string) (default: ''),
-  - "type" (string) (default: ''),
-- **"tracks"** (array) (default: []): Array of Video tracks with this structure:
-  - "src" (string) (default: ''),
-  - "kind" (string) (default: ''),
-  - "src_lang" (string) (default: ''),
-  - "label" (string) (default: ''),
-  - "description" (string) (default: ''),
-- **"image"**: (string) (default: '') Path or url to the image used as the video placeholder
 - **"ratio"** (string) ('') Ratio of the embedded media, if empty the ratio will be set by the js
 - **"expandable"** (associative array) (default: {}): Optional expandable block, following ECL Expandable structure
 - **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated)
@@ -35,6 +30,20 @@ npm install --save @ecl/twig-component-media-container
 
 - **"embedded_media"** (optional) (string) (default: '') A block where to set an embed code
 
+### Deprecated:
+
+- **"sources"** (array) (default: []) Array of Video sources with this structure:
+  - "src" (string) (default: ''),
+  - "type" (string) (default: ''),
+- **"tracks"** (array) (default: []): Array of Video tracks with this structure:
+  - "src" (string) (default: ''),
+  - "kind" (string) (default: ''),
+  - "src_lang" (string) (default: ''),
+  - "label" (string) (default: ''),
+  - "description" (string) (default: ''),
+- **"image"** (string) (default: ''): Image to be used as the video placeholder
+- **"sr_video_label"** (string) (default: ''): additional label for the video items; for screen readers
+
 ### Example for media container image:
 
 <!-- prettier-ignore -->

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

@@ -164,6 +164,78 @@ exports[`Media Container infographic renders correctly 1`] = `
 </jest>
 `;
 
+exports[`Media Container video as autoplay renders correctly 1`] = `
+<jest>
+  <div
+    class="ecl-media-container"
+    data-ecl-auto-init="MediaContainer"
+    data-ecl-media-container="true"
+  >
+    <figure
+      class="ecl-media-container__figure"
+    >
+      <div
+        class="ecl-media-container__video-wrapper"
+      >
+        <video
+          aria-label="Visit the European Commission - Video player"
+          autoplay=""
+          class="ecl-video ecl-media-container__media"
+          data-ecl-media-container-video=""
+          loop=""
+          muted=""
+        >
+          <source
+            src="https://euc-vod.fl.freecaster.net/12/224712/HD_I224712EN1W.mp4"
+            type="video/mp4"
+          />
+        </video>
+        <button
+          class="ecl-button ecl-button--tertiary ecl-media-container__play ecl-button--icon-only"
+          data-ecl-media-container-play=""
+          type="button"
+        >
+          <span
+            class="ecl-button__container"
+          >
+            <svg
+              aria-hidden="true"
+              class="ecl-icon ecl-icon--m ecl-button__icon"
+              data-ecl-icon=""
+              focusable="false"
+            >
+              <use
+                xlink:href="#play-outline"
+              />
+            </svg>
+          </span>
+        </button>
+        <button
+          class="ecl-button ecl-button--tertiary ecl-media-container__pause ecl-button--icon-only"
+          data-ecl-media-container-pause=""
+          type="button"
+        >
+          <span
+            class="ecl-button__container"
+          >
+            <svg
+              aria-hidden="true"
+              class="ecl-icon ecl-icon--m ecl-button__icon"
+              data-ecl-icon=""
+              focusable="false"
+            >
+              <use
+                xlink:href="#pause-outline"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </figure>
+  </div>
+</jest>
+`;
+
 exports[`Media Container video renders correctly 1`] = `
 <jest>
   <div
@@ -172,17 +244,22 @@ exports[`Media Container video renders correctly 1`] = `
     <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"
+      <div
+        class="ecl-media-container__video-wrapper"
       >
-        <source
-          src="https://euc-vod.fl.freecaster.net/12/224712/HD_I224712EN1W.mp4"
-          type="video/mp4"
-        />
-      </video>
+        <video
+          aria-label="Visit the European Commission - Video player"
+          class="ecl-video ecl-media-container__media"
+          controls=""
+          data-ecl-media-container-video=""
+          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>
+      </div>
       <figcaption
         class="ecl-media-container__caption"
       >
@@ -234,17 +311,22 @@ exports[`Media Container video with old data renders correctly 1`] = `
     <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"
+      <div
+        class="ecl-media-container__video-wrapper"
       >
-        <source
-          src="https://euc-vod.fl.freecaster.net/12/224712/HD_I224712EN1W.mp4"
-          type="video/mp4"
-        />
-      </video>
+        <video
+          aria-label="Visit the European Commission - Video player"
+          class="ecl-video ecl-media-container__media"
+          controls=""
+          data-ecl-media-container-video=""
+          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>
+      </div>
       <figcaption
         class="ecl-media-container__caption"
       >