-
Notifications
You must be signed in to change notification settings - Fork 45
/
video-thumbnail.twig
89 lines (82 loc) · 3.28 KB
/
video-thumbnail.twig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
{# Schema Validation #}
{% set schema = bolt.data.components['@bolt-components-video-thumbnail'].schema %}
{% if enable_json_schema_validation %}
{{ validate_data_schema(schema, _self)|raw }}
{% endif %}
{# Variables #}
{% set this = init(schema) %}
{% set attributes = create_attribute(attributes|default({})) %}
{% if video.content or button_attributes %}
{% set button_attributes = create_attribute(button_attributes|default({})) %}
{% set button_attributes = video.content ? button_attributes.addClass('js-bolt-video-thumbnail-inline-button') : button_attributes %}
{% endif %}
{% set classes = [
'c-bolt-video-thumbnail',
this.data.border_radius.value ? 'c-bolt-video-thumbnail--border-radius-' ~ this.data.border_radius.value,
this.data.aspect_ratio.value ? 'c-bolt-video-thumbnail--aspect-ratio-' ~ this.data.aspect_ratio.value,
video.content ? 'c-bolt-video-thumbnail--inline'
] %}
{% if video.has_subtitles or video.has_captions %}
{% set show_icon = true %}
{% endif %}
{% if video.has_subtitles or video.has_captions %}
{% set icon_subtitle_label = 'Subtitles available'|t %}
{% set aria_label = 'This video has subtitles available.' %}
{% endif %}
{% if video.content or button_attributes %}
{% set play_video_label = video.title ? 'Play the video @title.'|t({'@title': video.title}) : 'Play the video.'|t %}
{% if video.has_subtitles or video.has_captions %}
{% set play_video_label = play_video_label ~ ' ' ~ aria_label|t %}
{% endif %}
{% endif %}
{# Template #}
<div {{ attributes.addClass(classes) }}>
{% if video.content or button_attributes %}
<button {{ button_attributes.addClass('c-bolt-video-thumbnail__inline-button')|without('aria-label')|without('type') }} type="button" aria-label="{{ play_video_label }}">
{% endif %}
<div class="c-bolt-video-thumbnail__content">
{{ content }}
</div>
{% if chip or video.show_title %}
<div class="c-bolt-video-thumbnail__meta c-bolt-video-thumbnail__meta--top">
{% if chip %}
{{ chip }}
{% endif %}
{% if video.show_title %}
<span class="c-bolt-video-thumbnail__title">
{{ video.title }}
</span>
{% endif %}
</div>
{% endif %}
<div class="c-bolt-video-thumbnail__play-icon" aria-hidden="true"></div>
{% if show_icon or video.duration %}
<div class="c-bolt-video-thumbnail__meta c-bolt-video-thumbnail__meta--bottom">
{% if video.duration %}
<div class="c-bolt-video-thumbnail__duration">
<span class="u-bolt-visuallyhidden">{{ 'Video duration'|t }}:</span> {{ video.duration }}
</div>
{% endif %}
{% if show_icon %}
<div class="c-bolt-video-thumbnail__subtitles" aria-label="{{ icon_subtitle_label }}">
{% set icon %}
{% include '@bolt-elements-icon/icon.twig' with {
name: 'pega-subtitle',
size: 'small'
} only %}
{% endset %}
{{ icon }}
<span class="u-bolt-visuallyhidden">{{ icon_subtitle_label }}</span>
</div>
{% endif %}
</div>
{% endif %}
{% if video.content or button_attributes %}
</button>
{% endif %}
{% if video.content %}
<div class="c-bolt-video-thumbnail__content-video js-bolt-video-thumbnail-content-video">
{{ video.content }}
</div>
{% endif %}
</div>