From df797a4775b04bc249603882a2ed86b606ab1805 Mon Sep 17 00:00:00 2001 From: 22Alexandra Date: Tue, 19 Nov 2024 11:29:43 +0200 Subject: [PATCH] EWPP-4935: Add animation field to Text with featured media pattern. --- oe_theme.theme | 2 +- .../pattern-text-featured-media.html.twig | 21 ++++++- .../text_featured_media.ui_patterns.yml | 14 +++++ tests/src/Kernel/fixtures/rendering.yml | 56 ++++++++++++++++++- 4 files changed, 88 insertions(+), 5 deletions(-) diff --git a/oe_theme.theme b/oe_theme.theme index 65cf58993..bf841fbf8 100644 --- a/oe_theme.theme +++ b/oe_theme.theme @@ -1205,7 +1205,7 @@ function oe_theme_preprocess_pattern_date_block__preview(array &$variables): voi * Implements hook_preprocess_HOOK(). */ function oe_theme_preprocess_pattern_text_featured_media__preview(array &$variables): void { - $variables['image'] = ImageValueObject::fromArray($variables['image']); + $variables['image'] = !empty($variables['image']) ? ImageValueObject::fromArray($variables['image']) : NULL; $variables['expandable']['id'] = 'text-featured-media-expandable' . rand(); } diff --git a/templates/patterns/text_featured_media/pattern-text-featured-media.html.twig b/templates/patterns/text_featured_media/pattern-text-featured-media.html.twig index dc2abb1f4..5624bbdac 100644 --- a/templates/patterns/text_featured_media/pattern-text-featured-media.html.twig +++ b/templates/patterns/text_featured_media/pattern-text-featured-media.html.twig @@ -36,7 +36,7 @@ }%} {% endif %} -{% if image or video %} +{% if image or video or animation %} {% if image %} {% set _media_container = { 'picture': { @@ -53,6 +53,25 @@ 'ratio': video_ratio, 'description': caption, } %} + {% elseif animation.sources %} + {% set _animation = animation %} + {# We need to use src_type instead of type to avoid getting render + arrays due to using type. #} + {% set _sources = [] %} + {% for _source in _animation.sources %} + {% set _sources = _sources|merge([_source|merge({ + type: _source.src_type + })]) %} + {% endfor %} + {% set _animation = _animation|merge({ + sources: _sources + }) %} + {% set _media_container = { + 'video': _animation, + 'autoplay': true, + 'description': caption, + 'icon_path': ecl_icon_path, + } %} {% endif %} {% endif %} diff --git a/templates/patterns/text_featured_media/text_featured_media.ui_patterns.yml b/templates/patterns/text_featured_media/text_featured_media.ui_patterns.yml index 26aabf39e..c445f8035 100644 --- a/templates/patterns/text_featured_media/text_featured_media.ui_patterns.yml +++ b/templates/patterns/text_featured_media/text_featured_media.ui_patterns.yml @@ -37,6 +37,20 @@ text_featured_media: label: "Video" description: "Embedded video as a renderable iframe (for example by using the 'html_tag' render element). Either this or the image need to be provided. If both are provided the image will take preference." preview: "" + animation: + type: "array" + label: "Animation" + description: "Animation: uses the media container parameters as defined by the ECL to render a video." + 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" caption: type: "text" label: "Caption" diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml index 29f47e479..5149102aa 100644 --- a/tests/src/Kernel/fixtures/rendering.yml +++ b/tests/src/Kernel/fixtures/rendering.yml @@ -3809,6 +3809,7 @@ '.ecl-featured-item__media_container figure.ecl-media-container__figure': 1 'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 1 'iframe': 0 + 'video': 0 'figcaption.ecl-media-container__caption': 1 'a.ecl-link.ecl-link--standalone[href="http://example.com"]': 1 'svg.ecl-icon.ecl-icon--xs.ecl-icon--primary.ecl-link__icon': 1 @@ -3846,6 +3847,7 @@ '.ecl-featured-item__media_container figure.ecl-media-container__figure': 1 'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 1 'iframe': 0 + 'video': 0 'figcaption.ecl-media-container__caption': 1 'a.ecl-link.ecl-link--standalone[href="https://european-union.europa.eu/index_en"]': 1 'svg.ecl-icon.ecl-icon--xs.ecl-icon--primary.ecl-link__icon': 1 @@ -3865,8 +3867,16 @@ '#variant': "right_simple" '#fields': title: "Heading" - image: - src: "http://via.placeholder.com/150x150" + animation: + 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" caption: "Some caption text for the image" text: "Some more text" link: @@ -3885,7 +3895,10 @@ 'div.ecl-featured-item__container': 1 'div.ecl-featured-item__title span.ecl-featured-item__title-content': 0 '.ecl-featured-item__media_container figure.ecl-media-container__figure': 1 - 'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 1 + 'img.ecl-media-container__media': 0 + 'video.ecl-video.ecl-media-container__media[poster="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"][autoplay][muted][loop]': 1 + 'video source[type="video/mp4"][src="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4"]': 1 + 'video track[kind="captions"][label="English"][src="captions/bunny-en.vtt"][srclang="en"]': 1 'iframe': 0 'figcaption.ecl-media-container__caption': 1 'a.ecl-link.ecl-link--standalone[href="http://example.com"]': 1 @@ -3950,6 +3963,7 @@ '.ecl-featured-item__media_container figure.ecl-media-container__figure': 1 'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 1 'iframe': 0 + 'video': 0 'figcaption.ecl-media-container__caption': 0 'a.ecl-link.ecl-link--cta[href="http://example.com"]': 1 'div.ecl-expandable.ecl-media-container__expandable': 0 @@ -4042,6 +4056,42 @@ 'div.ecl-media-container__media--ratio-1-1 iframe[src="//ec.europa.eu/avservices/play.cfm?ref=I-181645"]': 1 'a.ecl-link.ecl-link--standalone[href="http://example.com"]': 1 'div.ecl-expandable.ecl-media-container__expandable': 0 +- array: + '#type': pattern + '#id': text_featured_media + '#variant': "left_featured" + '#fields': + title: "Heading" + animation: + 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" + text: "Some more text" + link: + label: "Call to action" + path: "http://example.com" + assertions: + count: + 'article.ecl-featured-item.ecl-featured-item--highlight': 0 + 'div.ecl-featured-item__container.ecl-featured-item__container--right': 1 + '.ecl-featured-item__media_container figure.ecl-media-container__figure': 1 + 'video.ecl-video.ecl-media-container__media[poster="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"][autoplay][muted][loop]': 1 + 'video source[type="video/mp4"][src="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4"]': 1 + 'video track[kind="captions"][label="English"][src="captions/bunny-en.vtt"][srclang="en"]': 1 + 'img.ecl-media-container__media': 0 + 'iframe': 0 + 'figcaption.ecl-media-container__caption': 0 + 'a.ecl-link.ecl-link--cta[href="http://example.com"]': 1 + equals: + 'h2.ecl-u-type-heading-2': "Heading" + 'div.ecl-featured-item__item div.ecl-featured-item__description': "Some more text" + 'a.ecl-link span.ecl-link__label': "Call to action" - array: '#type': pattern '#id': icons_with_text