Merge pull request #1484 from openeuropa/EWPP-4556

EWPP-4556: Add video parameter to the banner component.

composer.json

@@ -51,7 +51,7 @@
         "openeuropa/oe_corporate_countries": "^2.0.0",
         "openeuropa/oe_corporate_site_info": "^1.0.0-alpha8",
         "openeuropa/oe_media": "^1.27",
-        "openeuropa/oe_multilingual": "^1.17",
+        "openeuropa/oe_multilingual": "^1.18",
         "openeuropa/oe_paragraphs": "^1.20",
         "openeuropa/oe_search": "^2.0@beta",
         "openeuropa/oe_webtools": "^1.23",

sass/components/_banner.scss

@@ -0,0 +1,15 @@
+// Small banner - ratio 5:1
+.ecl-banner--s .ecl-banner__image,
+.ecl-banner--s .ecl-banner__video {
+  aspect-ratio: 5/1;
+
+  --css-aspect-ratio: 5/1;
+}
+
+// Large banner - ratio 3:1
+.ecl-banner--l .ecl-banner__image,
+.ecl-banner--l .ecl-banner__video {
+  aspect-ratio: 3/1;
+
+  --css-aspect-ratio: 3/1;
+}

sass/style-ec.scss

@@ -27,3 +27,4 @@
   $font-family: map.get(theme.$theme, 'font-family', 'default'),
 );
 @use "./components/navigation_list";
+@use "./components/banner";

sass/style-eu.scss

@@ -30,3 +30,4 @@
   $font-family: map.get(theme.$theme, 'font-family', 'default'),
 );
 @use "./components/navigation_list";
+@use "./components/banner";

templates/patterns/banners/banner.ui_patterns.yml

@@ -97,7 +97,7 @@ banner:
       type: "text"
       label: "Horizontal alignment"
       description: "Horizontal box alignment (can be 'left', 'center' or 'right'). Defaults to 'left'."
-      preview: "right"
+      preview: "left"
     vertical:
       type: "text"
       label: "Vertical alignment"
@@ -120,3 +120,27 @@ banner:
       label: "Credit"
       description: "Credit for the image (only displayed for image variants)."
       preview: "© Copyright or credit"
+    video:
+      type: "array"
+      label: "Video"
+      description: "Banner video: uses the media container parameters as defined by the ECL"
+      preview:
+        poster: "https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+        sources:
+          - src: "https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4"
+            src_type: "video/mp4"
+        tracks:
+          - src: "captions/bunny-en.vtt"
+            kind: "captions"
+            src_lang: "en"
+            label: "English"
+    sr_play:
+      type: "text"
+      label: "Screen reader control: Play"
+      description: "Screen reader label for the play button."
+      preview: "Play"
+    sr_pause:
+      type: "text"
+      label: "Screen reader control: Pause"
+      description: "Screen reader label for the pause button."
+      preview: "Pause"

templates/patterns/banners/pattern-banner.html.twig

@@ -103,6 +103,20 @@
   'sources': _sources,
 }) %}
 
+{# We need to use src_type instead of type to avoid getting render arrays due to using type. #}
+{% set _video = video|default({}) %}
+{% if _video.sources %}
+  {% set _sources = [] %}
+  {% for _source in _video.sources %}
+    {% set _sources = _sources|merge([_source|merge({
+      type: _source.src_type
+    })]) %}
+  {% endfor %}
+  {% set _video = _video|merge({
+    sources: _sources
+  }) %}
+{% endif %}
+
 {% set _font_color = font_color|default('dark') %}
 {% set _font_size = font_size|default('m') %}
 {% set _box_background = box_background|default('light') %}
@@ -112,6 +126,7 @@
   {% set _font_color = 'light' %}
   {% set _box_background = 'none' %}
   {% set _picture = [] %}
+  {% set _video = [] %}
   {% set extra_classes = 'ecl-banner--plain-background' %}
 {% elseif variant == 'text_overlay' %}
   {% set _font_color = 'light' %}
@@ -141,6 +156,11 @@
     full_width: full_width,
     credit: credit|default(''),
     extra_classes: extra_classes|default(''),
+    credit: credit|default(''),
+    video: _video,
+    sr_play: sr_play|default('Play'),
+    sr_pause: sr_pause|default('Pause'),
+    icon_path: ecl_icon_path
   } only %}
 
 </div>