Skip to content

Commit

Permalink
Merge pull request #1527 from openeuropa/EWPP-4935
Browse files Browse the repository at this point in the history
EWPP-4935: Add animation field to Text with featured media pattern.
  • Loading branch information
22Alexandra authored Dec 13, 2024
2 parents f2ebc43 + df797a4 commit f8462d5
Show file tree
Hide file tree
Showing 4 changed files with 88 additions and 5 deletions.
2 changes: 1 addition & 1 deletion oe_theme.theme
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
}%}
{% endif %}

{% if image or video %}
{% if image or video or animation %}
{% if image %}
{% set _media_container = {
'picture': {
Expand All @@ -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 %}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
56 changes: 53 additions & 3 deletions tests/src/Kernel/fixtures/rendering.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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:
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down

0 comments on commit f8462d5

Please sign in to comment.