@financial-times/cp-content-pipeline-ui 9.5.0 → 9.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,66 +1,66 @@
|
|
|
1
1
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
2
|
|
|
3
3
|
exports[`Clip Snapshot component rendered on server full-grid default render 1`] = `
|
|
4
|
-
"<div class
|
|
5
|
-
<div class
|
|
4
|
+
"<div class="n-content-layout" data-layout-width="full-grid">
|
|
5
|
+
<div class="n-content-layout__container" data-component="clip-set">
|
|
6
6
|
<div
|
|
7
|
-
data-cp-clip-layout
|
|
8
|
-
data-cp-clip-poster
|
|
9
|
-
data-cp-clip-no-audio
|
|
10
|
-
data-cp-clip-no-description
|
|
11
|
-
data-cp-clip-caption
|
|
12
|
-
data-cp-clip-no-info-box
|
|
13
|
-
data-cp-clip-no-caption
|
|
14
|
-
data-cp-clip-closed-caption
|
|
15
|
-
class
|
|
16
|
-
data-trackable
|
|
17
|
-
data-o-component
|
|
18
|
-
data-cp-clip-id
|
|
19
|
-
data-cp-clip-system-title
|
|
7
|
+
data-cp-clip-layout="full-grid"
|
|
8
|
+
data-cp-clip-poster=""
|
|
9
|
+
data-cp-clip-no-audio="false"
|
|
10
|
+
data-cp-clip-no-description="false"
|
|
11
|
+
data-cp-clip-caption=""
|
|
12
|
+
data-cp-clip-no-info-box="false"
|
|
13
|
+
data-cp-clip-no-caption="false"
|
|
14
|
+
data-cp-clip-closed-caption="false"
|
|
15
|
+
class="cp-clip"
|
|
16
|
+
data-trackable="next-article-cp-clip"
|
|
17
|
+
data-o-component="cp-clip"
|
|
18
|
+
data-cp-clip-id="localhost:8080/fakevideo.mpg"
|
|
19
|
+
data-cp-clip-system-title=""
|
|
20
20
|
>
|
|
21
21
|
<div
|
|
22
|
-
data-o-component
|
|
23
|
-
class
|
|
24
|
-
data-o-expander-shrink-to
|
|
25
|
-
data-trackable
|
|
26
|
-
data-o-expander-collapsed-toggle-text
|
|
27
|
-
data-o-expander-expanded-toggle-text
|
|
22
|
+
data-o-component="o-expander"
|
|
23
|
+
class="o-expander o-expander__info-box"
|
|
24
|
+
data-o-expander-shrink-to="hidden"
|
|
25
|
+
data-trackable="clip-info-box"
|
|
26
|
+
data-o-expander-collapsed-toggle-text="<span class='o-expander__visually-hidden'>Show video info</span>"
|
|
27
|
+
data-o-expander-expanded-toggle-text="<span class='o-expander__visually-hidden'>Hide video info</span>"
|
|
28
28
|
>
|
|
29
29
|
<button
|
|
30
|
-
data-trackable
|
|
31
|
-
class
|
|
30
|
+
data-trackable="toggle-open-close"
|
|
31
|
+
class="o-expander__toggle o-expander__toggle-empty"
|
|
32
32
|
>
|
|
33
|
-
<span class
|
|
33
|
+
<span class="o-expander__visually-hidden o3-type-detail"
|
|
34
34
|
>Show video info</span
|
|
35
35
|
>
|
|
36
36
|
</button>
|
|
37
|
-
<div class
|
|
37
|
+
<div class="o-expander__content video-info"></div>
|
|
38
38
|
</div>
|
|
39
|
-
<div class
|
|
39
|
+
<div class="cp-clip__video-container">
|
|
40
40
|
<video
|
|
41
|
-
class
|
|
42
|
-
controls
|
|
43
|
-
controlsList
|
|
44
|
-
disablepictureinpicture
|
|
45
|
-
disableremoteplayback
|
|
46
|
-
playsinline
|
|
47
|
-
poster
|
|
48
|
-
preload
|
|
49
|
-
id
|
|
50
|
-
crossorigin
|
|
51
|
-
style
|
|
41
|
+
class="cp-clip__video"
|
|
42
|
+
controls=""
|
|
43
|
+
controlsList="nodownload noremoteplayback noplaybackrate"
|
|
44
|
+
disablepictureinpicture=""
|
|
45
|
+
disableremoteplayback=""
|
|
46
|
+
playsinline=""
|
|
47
|
+
poster=""
|
|
48
|
+
preload="auto"
|
|
49
|
+
id="clip-localhost:8080/fakevideo.mpg"
|
|
50
|
+
crossorigin="anonymous"
|
|
51
|
+
style="height: fit-content; width: 100%"
|
|
52
52
|
>
|
|
53
53
|
<source
|
|
54
|
-
id
|
|
55
|
-
data-cp-component
|
|
56
|
-
src
|
|
57
|
-
type
|
|
54
|
+
id="video-source-0-localhost:8080/fakevideo.mpg"
|
|
55
|
+
data-cp-component="cp-clip__video-source"
|
|
56
|
+
src="localhost:8080/fakevideo.mpg"
|
|
57
|
+
type="video/mp4"
|
|
58
58
|
/>
|
|
59
59
|
</video>
|
|
60
60
|
</div>
|
|
61
61
|
<div
|
|
62
|
-
class
|
|
63
|
-
data-cp-clip-video-meta-info
|
|
62
|
+
class="cp-clip__video-meta-info"
|
|
63
|
+
data-cp-clip-video-meta-info="true"
|
|
64
64
|
></div>
|
|
65
65
|
</div>
|
|
66
66
|
</div>
|
|
@@ -69,98 +69,98 @@ exports[`Clip Snapshot component rendered on server full-grid default render 1`]
|
|
|
69
69
|
`;
|
|
70
70
|
|
|
71
71
|
exports[`Clip Snapshot component rendered on server full-grid render with attributes 1`] = `
|
|
72
|
-
"<div class
|
|
73
|
-
<div class
|
|
72
|
+
"<div class="n-content-layout" data-layout-width="full-grid">
|
|
73
|
+
<div class="n-content-layout__container" data-component="clip-set">
|
|
74
74
|
<div
|
|
75
|
-
data-cp-clip-layout
|
|
76
|
-
data-cp-clip-poster
|
|
77
|
-
data-cp-clip-autoplay
|
|
78
|
-
data-cp-clip-no-audio
|
|
79
|
-
data-cp-clip-no-description
|
|
80
|
-
data-cp-clip-caption
|
|
81
|
-
data-cp-clip-no-info-box
|
|
82
|
-
data-cp-clip-no-caption
|
|
83
|
-
data-cp-clip-closed-caption
|
|
84
|
-
data-cp-clip-loop
|
|
85
|
-
class
|
|
86
|
-
data-trackable
|
|
87
|
-
data-o-component
|
|
88
|
-
data-cp-clip-id
|
|
89
|
-
data-cp-clip-system-title
|
|
75
|
+
data-cp-clip-layout="full-grid"
|
|
76
|
+
data-cp-clip-poster=""
|
|
77
|
+
data-cp-clip-autoplay="true"
|
|
78
|
+
data-cp-clip-no-audio="false"
|
|
79
|
+
data-cp-clip-no-description="false"
|
|
80
|
+
data-cp-clip-caption="caption text"
|
|
81
|
+
data-cp-clip-no-info-box="false"
|
|
82
|
+
data-cp-clip-no-caption="false"
|
|
83
|
+
data-cp-clip-closed-caption="false"
|
|
84
|
+
data-cp-clip-loop="true"
|
|
85
|
+
class="cp-clip"
|
|
86
|
+
data-trackable="next-article-cp-clip"
|
|
87
|
+
data-o-component="cp-clip"
|
|
88
|
+
data-cp-clip-id="localhost:8080/fakevideo.mpg"
|
|
89
|
+
data-cp-clip-system-title=""
|
|
90
90
|
>
|
|
91
91
|
<div
|
|
92
|
-
data-o-component
|
|
93
|
-
class
|
|
94
|
-
data-o-expander-shrink-to
|
|
95
|
-
data-trackable
|
|
96
|
-
data-o-expander-collapsed-toggle-text
|
|
97
|
-
data-o-expander-expanded-toggle-text
|
|
92
|
+
data-o-component="o-expander"
|
|
93
|
+
class="o-expander o-expander__info-box"
|
|
94
|
+
data-o-expander-shrink-to="hidden"
|
|
95
|
+
data-trackable="clip-info-box"
|
|
96
|
+
data-o-expander-collapsed-toggle-text="<span class='o-expander__visually-hidden'>Show video info</span>"
|
|
97
|
+
data-o-expander-expanded-toggle-text="<span class='o-expander__visually-hidden'>Hide video info</span>"
|
|
98
98
|
>
|
|
99
99
|
<button
|
|
100
|
-
data-trackable
|
|
101
|
-
class
|
|
100
|
+
data-trackable="toggle-open-close"
|
|
101
|
+
class="o-expander__toggle o-expander__toggle-empty"
|
|
102
102
|
>
|
|
103
|
-
<span class
|
|
103
|
+
<span class="o-expander__visually-hidden o3-type-detail"
|
|
104
104
|
>Show video info</span
|
|
105
105
|
>
|
|
106
106
|
</button>
|
|
107
|
-
<div class
|
|
107
|
+
<div class="o-expander__content video-info"></div>
|
|
108
108
|
</div>
|
|
109
|
-
<div class
|
|
109
|
+
<div class="cp-clip__video-container">
|
|
110
110
|
<video
|
|
111
|
-
class
|
|
112
|
-
controls
|
|
113
|
-
controlsList
|
|
114
|
-
disablepictureinpicture
|
|
115
|
-
disableremoteplayback
|
|
116
|
-
playsinline
|
|
117
|
-
muted
|
|
118
|
-
loop
|
|
119
|
-
poster
|
|
120
|
-
preload
|
|
121
|
-
id
|
|
122
|
-
crossorigin
|
|
123
|
-
style
|
|
111
|
+
class="cp-clip__video"
|
|
112
|
+
controls=""
|
|
113
|
+
controlsList="nodownload noremoteplayback noplaybackrate"
|
|
114
|
+
disablepictureinpicture=""
|
|
115
|
+
disableremoteplayback=""
|
|
116
|
+
playsinline=""
|
|
117
|
+
muted=""
|
|
118
|
+
loop=""
|
|
119
|
+
poster=""
|
|
120
|
+
preload="auto"
|
|
121
|
+
id="clip-localhost:8080/fakevideo.mpg"
|
|
122
|
+
crossorigin="anonymous"
|
|
123
|
+
style="height: fit-content; width: 100%"
|
|
124
124
|
>
|
|
125
125
|
<source
|
|
126
|
-
id
|
|
127
|
-
data-cp-component
|
|
128
|
-
src
|
|
129
|
-
type
|
|
126
|
+
id="video-source-0-localhost:8080/fakevideo.mpg"
|
|
127
|
+
data-cp-component="cp-clip__video-source"
|
|
128
|
+
src="localhost:8080/fakevideo.mpg"
|
|
129
|
+
type="video/mp4"
|
|
130
130
|
/>
|
|
131
131
|
</video>
|
|
132
132
|
</div>
|
|
133
|
-
<div class
|
|
133
|
+
<div class="cp-clip__video-meta-info" data-cp-clip-video-meta-info="true">
|
|
134
134
|
<div
|
|
135
|
-
data-o-component
|
|
136
|
-
class
|
|
137
|
-
data-o-expander-shrink-to
|
|
138
|
-
data-trackable
|
|
139
|
-
data-o-expander-collapsed-toggle-text
|
|
140
|
-
data-o-expander-expanded-toggle-text
|
|
135
|
+
data-o-component="o-expander"
|
|
136
|
+
class="o-expander o-expander__description-box"
|
|
137
|
+
data-o-expander-shrink-to="hidden"
|
|
138
|
+
data-trackable="description-box"
|
|
139
|
+
data-o-expander-collapsed-toggle-text="<span class='o-expander__visually-hidden'>Show video description</span>"
|
|
140
|
+
data-o-expander-expanded-toggle-text="<span class='o-expander__visually-hidden'>Hide video description</span>"
|
|
141
141
|
>
|
|
142
|
-
<button data-trackable
|
|
143
|
-
<span class
|
|
142
|
+
<button data-trackable="toggle-open-close" class="o-expander__toggle">
|
|
143
|
+
<span class="o-expander__visually-hidden o3-type-detail"
|
|
144
144
|
>Show video description</span
|
|
145
145
|
>
|
|
146
146
|
</button>
|
|
147
|
-
<div class
|
|
148
|
-
<div class
|
|
149
|
-
<h4 class
|
|
147
|
+
<div class="o-expander__content">
|
|
148
|
+
<div class="video-description">
|
|
149
|
+
<h4 class="video-description__title o3-type-body-highlight">
|
|
150
150
|
Video description
|
|
151
151
|
</h4>
|
|
152
|
-
<p class
|
|
152
|
+
<p class="video-description__text o3-type-body-base">
|
|
153
153
|
Video description
|
|
154
154
|
</p>
|
|
155
155
|
</div>
|
|
156
156
|
</div>
|
|
157
157
|
</div>
|
|
158
158
|
<div
|
|
159
|
-
data-cp-clip-caption
|
|
160
|
-
class
|
|
159
|
+
data-cp-clip-caption="true"
|
|
160
|
+
class="cp-clip__caption o3-editorial-typography-caption"
|
|
161
161
|
>
|
|
162
162
|
caption text<!-- -->
|
|
163
|
-
<span class
|
|
163
|
+
<span class="cp-clip__credit"
|
|
164
164
|
>©
|
|
165
165
|
<!-- -->@credits</span
|
|
166
166
|
>
|
|
@@ -173,65 +173,65 @@ exports[`Clip Snapshot component rendered on server full-grid render with attrib
|
|
|
173
173
|
`;
|
|
174
174
|
|
|
175
175
|
exports[`Clip Snapshot component rendered on server in-line render 1`] = `
|
|
176
|
-
"<div class
|
|
176
|
+
"<div class="n-content-layout__container--in-line" data-component="clip-set">
|
|
177
177
|
<div
|
|
178
|
-
data-cp-clip-layout
|
|
179
|
-
data-cp-clip-poster
|
|
180
|
-
data-cp-clip-no-audio
|
|
181
|
-
data-cp-clip-no-description
|
|
182
|
-
data-cp-clip-caption
|
|
183
|
-
data-cp-clip-no-info-box
|
|
184
|
-
data-cp-clip-no-caption
|
|
185
|
-
data-cp-clip-closed-caption
|
|
186
|
-
class
|
|
187
|
-
data-trackable
|
|
188
|
-
data-o-component
|
|
189
|
-
data-cp-clip-id
|
|
190
|
-
data-cp-clip-system-title
|
|
178
|
+
data-cp-clip-layout="in-line"
|
|
179
|
+
data-cp-clip-poster=""
|
|
180
|
+
data-cp-clip-no-audio="false"
|
|
181
|
+
data-cp-clip-no-description="false"
|
|
182
|
+
data-cp-clip-caption=""
|
|
183
|
+
data-cp-clip-no-info-box="false"
|
|
184
|
+
data-cp-clip-no-caption="false"
|
|
185
|
+
data-cp-clip-closed-caption="false"
|
|
186
|
+
class="cp-clip"
|
|
187
|
+
data-trackable="next-article-cp-clip"
|
|
188
|
+
data-o-component="cp-clip"
|
|
189
|
+
data-cp-clip-id="localhost:8080/fakevideo.mpg"
|
|
190
|
+
data-cp-clip-system-title=""
|
|
191
191
|
>
|
|
192
192
|
<div
|
|
193
|
-
data-o-component
|
|
194
|
-
class
|
|
195
|
-
data-o-expander-shrink-to
|
|
196
|
-
data-trackable
|
|
197
|
-
data-o-expander-collapsed-toggle-text
|
|
198
|
-
data-o-expander-expanded-toggle-text
|
|
193
|
+
data-o-component="o-expander"
|
|
194
|
+
class="o-expander o-expander__info-box"
|
|
195
|
+
data-o-expander-shrink-to="hidden"
|
|
196
|
+
data-trackable="clip-info-box"
|
|
197
|
+
data-o-expander-collapsed-toggle-text="<span class='o-expander__visually-hidden'>Show video info</span>"
|
|
198
|
+
data-o-expander-expanded-toggle-text="<span class='o-expander__visually-hidden'>Hide video info</span>"
|
|
199
199
|
>
|
|
200
200
|
<button
|
|
201
|
-
data-trackable
|
|
202
|
-
class
|
|
201
|
+
data-trackable="toggle-open-close"
|
|
202
|
+
class="o-expander__toggle o-expander__toggle-empty"
|
|
203
203
|
>
|
|
204
|
-
<span class
|
|
204
|
+
<span class="o-expander__visually-hidden o3-type-detail"
|
|
205
205
|
>Show video info</span
|
|
206
206
|
>
|
|
207
207
|
</button>
|
|
208
|
-
<div class
|
|
208
|
+
<div class="o-expander__content video-info"></div>
|
|
209
209
|
</div>
|
|
210
|
-
<div class
|
|
210
|
+
<div class="cp-clip__video-container">
|
|
211
211
|
<video
|
|
212
|
-
class
|
|
213
|
-
controls
|
|
214
|
-
controlsList
|
|
215
|
-
disablepictureinpicture
|
|
216
|
-
disableremoteplayback
|
|
217
|
-
playsinline
|
|
218
|
-
poster
|
|
219
|
-
preload
|
|
220
|
-
id
|
|
221
|
-
crossorigin
|
|
222
|
-
style
|
|
212
|
+
class="cp-clip__video"
|
|
213
|
+
controls=""
|
|
214
|
+
controlsList="nodownload noremoteplayback noplaybackrate"
|
|
215
|
+
disablepictureinpicture=""
|
|
216
|
+
disableremoteplayback=""
|
|
217
|
+
playsinline=""
|
|
218
|
+
poster=""
|
|
219
|
+
preload="auto"
|
|
220
|
+
id="clip-localhost:8080/fakevideo.mpg"
|
|
221
|
+
crossorigin="anonymous"
|
|
222
|
+
style="height: fit-content; width: 100%"
|
|
223
223
|
>
|
|
224
224
|
<source
|
|
225
|
-
id
|
|
226
|
-
data-cp-component
|
|
227
|
-
src
|
|
228
|
-
type
|
|
225
|
+
id="video-source-0-localhost:8080/fakevideo.mpg"
|
|
226
|
+
data-cp-component="cp-clip__video-source"
|
|
227
|
+
src="localhost:8080/fakevideo.mpg"
|
|
228
|
+
type="video/mp4"
|
|
229
229
|
/>
|
|
230
230
|
</video>
|
|
231
231
|
</div>
|
|
232
232
|
<div
|
|
233
|
-
class
|
|
234
|
-
data-cp-clip-video-meta-info
|
|
233
|
+
class="cp-clip__video-meta-info"
|
|
234
|
+
data-cp-clip-video-meta-info="true"
|
|
235
235
|
></div>
|
|
236
236
|
</div>
|
|
237
237
|
</div>
|
|
@@ -239,97 +239,97 @@ exports[`Clip Snapshot component rendered on server in-line render 1`] = `
|
|
|
239
239
|
`;
|
|
240
240
|
|
|
241
241
|
exports[`Clip Snapshot component rendered on server in-line render with attributes 1`] = `
|
|
242
|
-
"<div class
|
|
242
|
+
"<div class="n-content-layout__container--in-line" data-component="clip-set">
|
|
243
243
|
<div
|
|
244
|
-
data-cp-clip-layout
|
|
245
|
-
data-cp-clip-poster
|
|
246
|
-
data-cp-clip-autoplay
|
|
247
|
-
data-cp-clip-no-audio
|
|
248
|
-
data-cp-clip-no-description
|
|
249
|
-
data-cp-clip-caption
|
|
250
|
-
data-cp-clip-no-info-box
|
|
251
|
-
data-cp-clip-no-caption
|
|
252
|
-
data-cp-clip-closed-caption
|
|
253
|
-
data-cp-clip-loop
|
|
254
|
-
class
|
|
255
|
-
data-trackable
|
|
256
|
-
data-o-component
|
|
257
|
-
data-cp-clip-id
|
|
258
|
-
data-cp-clip-system-title
|
|
244
|
+
data-cp-clip-layout="in-line"
|
|
245
|
+
data-cp-clip-poster=""
|
|
246
|
+
data-cp-clip-autoplay="true"
|
|
247
|
+
data-cp-clip-no-audio="false"
|
|
248
|
+
data-cp-clip-no-description="false"
|
|
249
|
+
data-cp-clip-caption="caption text"
|
|
250
|
+
data-cp-clip-no-info-box="false"
|
|
251
|
+
data-cp-clip-no-caption="false"
|
|
252
|
+
data-cp-clip-closed-caption="false"
|
|
253
|
+
data-cp-clip-loop="true"
|
|
254
|
+
class="cp-clip"
|
|
255
|
+
data-trackable="next-article-cp-clip"
|
|
256
|
+
data-o-component="cp-clip"
|
|
257
|
+
data-cp-clip-id="localhost:8080/fakevideo.mpg"
|
|
258
|
+
data-cp-clip-system-title=""
|
|
259
259
|
>
|
|
260
260
|
<div
|
|
261
|
-
data-o-component
|
|
262
|
-
class
|
|
263
|
-
data-o-expander-shrink-to
|
|
264
|
-
data-trackable
|
|
265
|
-
data-o-expander-collapsed-toggle-text
|
|
266
|
-
data-o-expander-expanded-toggle-text
|
|
261
|
+
data-o-component="o-expander"
|
|
262
|
+
class="o-expander o-expander__info-box"
|
|
263
|
+
data-o-expander-shrink-to="hidden"
|
|
264
|
+
data-trackable="clip-info-box"
|
|
265
|
+
data-o-expander-collapsed-toggle-text="<span class='o-expander__visually-hidden'>Show video info</span>"
|
|
266
|
+
data-o-expander-expanded-toggle-text="<span class='o-expander__visually-hidden'>Hide video info</span>"
|
|
267
267
|
>
|
|
268
268
|
<button
|
|
269
|
-
data-trackable
|
|
270
|
-
class
|
|
269
|
+
data-trackable="toggle-open-close"
|
|
270
|
+
class="o-expander__toggle o-expander__toggle-empty"
|
|
271
271
|
>
|
|
272
|
-
<span class
|
|
272
|
+
<span class="o-expander__visually-hidden o3-type-detail"
|
|
273
273
|
>Show video info</span
|
|
274
274
|
>
|
|
275
275
|
</button>
|
|
276
|
-
<div class
|
|
276
|
+
<div class="o-expander__content video-info"></div>
|
|
277
277
|
</div>
|
|
278
|
-
<div class
|
|
278
|
+
<div class="cp-clip__video-container">
|
|
279
279
|
<video
|
|
280
|
-
class
|
|
281
|
-
controls
|
|
282
|
-
controlsList
|
|
283
|
-
disablepictureinpicture
|
|
284
|
-
disableremoteplayback
|
|
285
|
-
playsinline
|
|
286
|
-
muted
|
|
287
|
-
loop
|
|
288
|
-
poster
|
|
289
|
-
preload
|
|
290
|
-
id
|
|
291
|
-
crossorigin
|
|
292
|
-
style
|
|
280
|
+
class="cp-clip__video"
|
|
281
|
+
controls=""
|
|
282
|
+
controlsList="nodownload noremoteplayback noplaybackrate"
|
|
283
|
+
disablepictureinpicture=""
|
|
284
|
+
disableremoteplayback=""
|
|
285
|
+
playsinline=""
|
|
286
|
+
muted=""
|
|
287
|
+
loop=""
|
|
288
|
+
poster=""
|
|
289
|
+
preload="auto"
|
|
290
|
+
id="clip-localhost:8080/fakevideo.mpg"
|
|
291
|
+
crossorigin="anonymous"
|
|
292
|
+
style="height: fit-content; width: 100%"
|
|
293
293
|
>
|
|
294
294
|
<source
|
|
295
|
-
id
|
|
296
|
-
data-cp-component
|
|
297
|
-
src
|
|
298
|
-
type
|
|
295
|
+
id="video-source-0-localhost:8080/fakevideo.mpg"
|
|
296
|
+
data-cp-component="cp-clip__video-source"
|
|
297
|
+
src="localhost:8080/fakevideo.mpg"
|
|
298
|
+
type="video/mp4"
|
|
299
299
|
/>
|
|
300
300
|
</video>
|
|
301
301
|
</div>
|
|
302
|
-
<div class
|
|
302
|
+
<div class="cp-clip__video-meta-info" data-cp-clip-video-meta-info="true">
|
|
303
303
|
<div
|
|
304
|
-
data-o-component
|
|
305
|
-
class
|
|
306
|
-
data-o-expander-shrink-to
|
|
307
|
-
data-trackable
|
|
308
|
-
data-o-expander-collapsed-toggle-text
|
|
309
|
-
data-o-expander-expanded-toggle-text
|
|
304
|
+
data-o-component="o-expander"
|
|
305
|
+
class="o-expander o-expander__description-box"
|
|
306
|
+
data-o-expander-shrink-to="hidden"
|
|
307
|
+
data-trackable="description-box"
|
|
308
|
+
data-o-expander-collapsed-toggle-text="<span class='o-expander__visually-hidden'>Show video description</span>"
|
|
309
|
+
data-o-expander-expanded-toggle-text="<span class='o-expander__visually-hidden'>Hide video description</span>"
|
|
310
310
|
>
|
|
311
|
-
<button data-trackable
|
|
312
|
-
<span class
|
|
311
|
+
<button data-trackable="toggle-open-close" class="o-expander__toggle">
|
|
312
|
+
<span class="o-expander__visually-hidden o3-type-detail"
|
|
313
313
|
>Show video description</span
|
|
314
314
|
>
|
|
315
315
|
</button>
|
|
316
|
-
<div class
|
|
317
|
-
<div class
|
|
318
|
-
<h4 class
|
|
316
|
+
<div class="o-expander__content">
|
|
317
|
+
<div class="video-description">
|
|
318
|
+
<h4 class="video-description__title o3-type-body-highlight">
|
|
319
319
|
Video description
|
|
320
320
|
</h4>
|
|
321
|
-
<p class
|
|
321
|
+
<p class="video-description__text o3-type-body-base">
|
|
322
322
|
Video description
|
|
323
323
|
</p>
|
|
324
324
|
</div>
|
|
325
325
|
</div>
|
|
326
326
|
</div>
|
|
327
327
|
<div
|
|
328
|
-
data-cp-clip-caption
|
|
329
|
-
class
|
|
328
|
+
data-cp-clip-caption="true"
|
|
329
|
+
class="cp-clip__caption o3-editorial-typography-caption"
|
|
330
330
|
>
|
|
331
331
|
caption text<!-- -->
|
|
332
|
-
<span class
|
|
332
|
+
<span class="cp-clip__credit"
|
|
333
333
|
>©
|
|
334
334
|
<!-- -->@credits</span
|
|
335
335
|
>
|
|
@@ -341,70 +341,70 @@ exports[`Clip Snapshot component rendered on server in-line render with attribut
|
|
|
341
341
|
`;
|
|
342
342
|
|
|
343
343
|
exports[`Clip Snapshot component rendered on server mid-grid default render 1`] = `
|
|
344
|
-
"<div class
|
|
345
|
-
<div class
|
|
344
|
+
"<div class="n-content-layout" data-layout-width="full-grid">
|
|
345
|
+
<div class="n-content-layout__container" data-component="clip-set">
|
|
346
346
|
<div
|
|
347
|
-
data-o-grid-colspan
|
|
348
|
-
class
|
|
347
|
+
data-o-grid-colspan="12 S12 M12 L10 XL10"
|
|
348
|
+
class="n-content-layout__container--mid-grid"
|
|
349
349
|
>
|
|
350
350
|
<div
|
|
351
|
-
data-cp-clip-layout
|
|
352
|
-
data-cp-clip-poster
|
|
353
|
-
data-cp-clip-no-audio
|
|
354
|
-
data-cp-clip-no-description
|
|
355
|
-
data-cp-clip-caption
|
|
356
|
-
data-cp-clip-no-info-box
|
|
357
|
-
data-cp-clip-no-caption
|
|
358
|
-
data-cp-clip-closed-caption
|
|
359
|
-
class
|
|
360
|
-
data-trackable
|
|
361
|
-
data-o-component
|
|
362
|
-
data-cp-clip-id
|
|
363
|
-
data-cp-clip-system-title
|
|
351
|
+
data-cp-clip-layout="mid-grid"
|
|
352
|
+
data-cp-clip-poster=""
|
|
353
|
+
data-cp-clip-no-audio="false"
|
|
354
|
+
data-cp-clip-no-description="false"
|
|
355
|
+
data-cp-clip-caption=""
|
|
356
|
+
data-cp-clip-no-info-box="false"
|
|
357
|
+
data-cp-clip-no-caption="false"
|
|
358
|
+
data-cp-clip-closed-caption="false"
|
|
359
|
+
class="cp-clip"
|
|
360
|
+
data-trackable="next-article-cp-clip"
|
|
361
|
+
data-o-component="cp-clip"
|
|
362
|
+
data-cp-clip-id="localhost:8080/fakevideo.mpg"
|
|
363
|
+
data-cp-clip-system-title=""
|
|
364
364
|
>
|
|
365
365
|
<div
|
|
366
|
-
data-o-component
|
|
367
|
-
class
|
|
368
|
-
data-o-expander-shrink-to
|
|
369
|
-
data-trackable
|
|
370
|
-
data-o-expander-collapsed-toggle-text
|
|
371
|
-
data-o-expander-expanded-toggle-text
|
|
366
|
+
data-o-component="o-expander"
|
|
367
|
+
class="o-expander o-expander__info-box"
|
|
368
|
+
data-o-expander-shrink-to="hidden"
|
|
369
|
+
data-trackable="clip-info-box"
|
|
370
|
+
data-o-expander-collapsed-toggle-text="<span class='o-expander__visually-hidden'>Show video info</span>"
|
|
371
|
+
data-o-expander-expanded-toggle-text="<span class='o-expander__visually-hidden'>Hide video info</span>"
|
|
372
372
|
>
|
|
373
373
|
<button
|
|
374
|
-
data-trackable
|
|
375
|
-
class
|
|
374
|
+
data-trackable="toggle-open-close"
|
|
375
|
+
class="o-expander__toggle o-expander__toggle-empty"
|
|
376
376
|
>
|
|
377
|
-
<span class
|
|
377
|
+
<span class="o-expander__visually-hidden o3-type-detail"
|
|
378
378
|
>Show video info</span
|
|
379
379
|
>
|
|
380
380
|
</button>
|
|
381
|
-
<div class
|
|
381
|
+
<div class="o-expander__content video-info"></div>
|
|
382
382
|
</div>
|
|
383
|
-
<div class
|
|
383
|
+
<div class="cp-clip__video-container">
|
|
384
384
|
<video
|
|
385
|
-
class
|
|
386
|
-
controls
|
|
387
|
-
controlsList
|
|
388
|
-
disablepictureinpicture
|
|
389
|
-
disableremoteplayback
|
|
390
|
-
playsinline
|
|
391
|
-
poster
|
|
392
|
-
preload
|
|
393
|
-
id
|
|
394
|
-
crossorigin
|
|
395
|
-
style
|
|
385
|
+
class="cp-clip__video"
|
|
386
|
+
controls=""
|
|
387
|
+
controlsList="nodownload noremoteplayback noplaybackrate"
|
|
388
|
+
disablepictureinpicture=""
|
|
389
|
+
disableremoteplayback=""
|
|
390
|
+
playsinline=""
|
|
391
|
+
poster=""
|
|
392
|
+
preload="auto"
|
|
393
|
+
id="clip-localhost:8080/fakevideo.mpg"
|
|
394
|
+
crossorigin="anonymous"
|
|
395
|
+
style="height: fit-content; width: 100%"
|
|
396
396
|
>
|
|
397
397
|
<source
|
|
398
|
-
id
|
|
399
|
-
data-cp-component
|
|
400
|
-
src
|
|
401
|
-
type
|
|
398
|
+
id="video-source-0-localhost:8080/fakevideo.mpg"
|
|
399
|
+
data-cp-component="cp-clip__video-source"
|
|
400
|
+
src="localhost:8080/fakevideo.mpg"
|
|
401
|
+
type="video/mp4"
|
|
402
402
|
/>
|
|
403
403
|
</video>
|
|
404
404
|
</div>
|
|
405
405
|
<div
|
|
406
|
-
class
|
|
407
|
-
data-cp-clip-video-meta-info
|
|
406
|
+
class="cp-clip__video-meta-info"
|
|
407
|
+
data-cp-clip-video-meta-info="true"
|
|
408
408
|
></div>
|
|
409
409
|
</div>
|
|
410
410
|
</div>
|
|
@@ -414,108 +414,108 @@ exports[`Clip Snapshot component rendered on server mid-grid default render 1`]
|
|
|
414
414
|
`;
|
|
415
415
|
|
|
416
416
|
exports[`Clip Snapshot component rendered on server mid-grid render with attributes 1`] = `
|
|
417
|
-
"<div class
|
|
418
|
-
<div class
|
|
417
|
+
"<div class="n-content-layout" data-layout-width="full-grid">
|
|
418
|
+
<div class="n-content-layout__container" data-component="clip-set">
|
|
419
419
|
<div
|
|
420
|
-
data-o-grid-colspan
|
|
421
|
-
class
|
|
420
|
+
data-o-grid-colspan="12 S12 M12 L10 XL10"
|
|
421
|
+
class="n-content-layout__container--mid-grid"
|
|
422
422
|
>
|
|
423
423
|
<div
|
|
424
|
-
data-cp-clip-layout
|
|
425
|
-
data-cp-clip-poster
|
|
426
|
-
data-cp-clip-autoplay
|
|
427
|
-
data-cp-clip-no-audio
|
|
428
|
-
data-cp-clip-no-description
|
|
429
|
-
data-cp-clip-caption
|
|
430
|
-
data-cp-clip-no-info-box
|
|
431
|
-
data-cp-clip-no-caption
|
|
432
|
-
data-cp-clip-closed-caption
|
|
433
|
-
data-cp-clip-loop
|
|
434
|
-
class
|
|
435
|
-
data-trackable
|
|
436
|
-
data-o-component
|
|
437
|
-
data-cp-clip-id
|
|
438
|
-
data-cp-clip-system-title
|
|
424
|
+
data-cp-clip-layout="mid-grid"
|
|
425
|
+
data-cp-clip-poster=""
|
|
426
|
+
data-cp-clip-autoplay="true"
|
|
427
|
+
data-cp-clip-no-audio="false"
|
|
428
|
+
data-cp-clip-no-description="false"
|
|
429
|
+
data-cp-clip-caption="caption text"
|
|
430
|
+
data-cp-clip-no-info-box="false"
|
|
431
|
+
data-cp-clip-no-caption="false"
|
|
432
|
+
data-cp-clip-closed-caption="false"
|
|
433
|
+
data-cp-clip-loop="true"
|
|
434
|
+
class="cp-clip"
|
|
435
|
+
data-trackable="next-article-cp-clip"
|
|
436
|
+
data-o-component="cp-clip"
|
|
437
|
+
data-cp-clip-id="localhost:8080/fakevideo.mpg"
|
|
438
|
+
data-cp-clip-system-title=""
|
|
439
439
|
>
|
|
440
440
|
<div
|
|
441
|
-
data-o-component
|
|
442
|
-
class
|
|
443
|
-
data-o-expander-shrink-to
|
|
444
|
-
data-trackable
|
|
445
|
-
data-o-expander-collapsed-toggle-text
|
|
446
|
-
data-o-expander-expanded-toggle-text
|
|
441
|
+
data-o-component="o-expander"
|
|
442
|
+
class="o-expander o-expander__info-box"
|
|
443
|
+
data-o-expander-shrink-to="hidden"
|
|
444
|
+
data-trackable="clip-info-box"
|
|
445
|
+
data-o-expander-collapsed-toggle-text="<span class='o-expander__visually-hidden'>Show video info</span>"
|
|
446
|
+
data-o-expander-expanded-toggle-text="<span class='o-expander__visually-hidden'>Hide video info</span>"
|
|
447
447
|
>
|
|
448
448
|
<button
|
|
449
|
-
data-trackable
|
|
450
|
-
class
|
|
449
|
+
data-trackable="toggle-open-close"
|
|
450
|
+
class="o-expander__toggle o-expander__toggle-empty"
|
|
451
451
|
>
|
|
452
|
-
<span class
|
|
452
|
+
<span class="o-expander__visually-hidden o3-type-detail"
|
|
453
453
|
>Show video info</span
|
|
454
454
|
>
|
|
455
455
|
</button>
|
|
456
|
-
<div class
|
|
456
|
+
<div class="o-expander__content video-info"></div>
|
|
457
457
|
</div>
|
|
458
|
-
<div class
|
|
458
|
+
<div class="cp-clip__video-container">
|
|
459
459
|
<video
|
|
460
|
-
class
|
|
461
|
-
controls
|
|
462
|
-
controlsList
|
|
463
|
-
disablepictureinpicture
|
|
464
|
-
disableremoteplayback
|
|
465
|
-
playsinline
|
|
466
|
-
muted
|
|
467
|
-
loop
|
|
468
|
-
poster
|
|
469
|
-
preload
|
|
470
|
-
id
|
|
471
|
-
crossorigin
|
|
472
|
-
style
|
|
460
|
+
class="cp-clip__video"
|
|
461
|
+
controls=""
|
|
462
|
+
controlsList="nodownload noremoteplayback noplaybackrate"
|
|
463
|
+
disablepictureinpicture=""
|
|
464
|
+
disableremoteplayback=""
|
|
465
|
+
playsinline=""
|
|
466
|
+
muted=""
|
|
467
|
+
loop=""
|
|
468
|
+
poster=""
|
|
469
|
+
preload="auto"
|
|
470
|
+
id="clip-localhost:8080/fakevideo.mpg"
|
|
471
|
+
crossorigin="anonymous"
|
|
472
|
+
style="height: fit-content; width: 100%"
|
|
473
473
|
>
|
|
474
474
|
<source
|
|
475
|
-
id
|
|
476
|
-
data-cp-component
|
|
477
|
-
src
|
|
478
|
-
type
|
|
475
|
+
id="video-source-0-localhost:8080/fakevideo.mpg"
|
|
476
|
+
data-cp-component="cp-clip__video-source"
|
|
477
|
+
src="localhost:8080/fakevideo.mpg"
|
|
478
|
+
type="video/mp4"
|
|
479
479
|
/>
|
|
480
480
|
</video>
|
|
481
481
|
</div>
|
|
482
482
|
<div
|
|
483
|
-
class
|
|
484
|
-
data-cp-clip-video-meta-info
|
|
483
|
+
class="cp-clip__video-meta-info"
|
|
484
|
+
data-cp-clip-video-meta-info="true"
|
|
485
485
|
>
|
|
486
486
|
<div
|
|
487
|
-
data-o-component
|
|
488
|
-
class
|
|
489
|
-
data-o-expander-shrink-to
|
|
490
|
-
data-trackable
|
|
491
|
-
data-o-expander-collapsed-toggle-text
|
|
492
|
-
data-o-expander-expanded-toggle-text
|
|
487
|
+
data-o-component="o-expander"
|
|
488
|
+
class="o-expander o-expander__description-box"
|
|
489
|
+
data-o-expander-shrink-to="hidden"
|
|
490
|
+
data-trackable="description-box"
|
|
491
|
+
data-o-expander-collapsed-toggle-text="<span class='o-expander__visually-hidden'>Show video description</span>"
|
|
492
|
+
data-o-expander-expanded-toggle-text="<span class='o-expander__visually-hidden'>Hide video description</span>"
|
|
493
493
|
>
|
|
494
494
|
<button
|
|
495
|
-
data-trackable
|
|
496
|
-
class
|
|
495
|
+
data-trackable="toggle-open-close"
|
|
496
|
+
class="o-expander__toggle"
|
|
497
497
|
>
|
|
498
|
-
<span class
|
|
498
|
+
<span class="o-expander__visually-hidden o3-type-detail"
|
|
499
499
|
>Show video description</span
|
|
500
500
|
>
|
|
501
501
|
</button>
|
|
502
|
-
<div class
|
|
503
|
-
<div class
|
|
504
|
-
<h4 class
|
|
502
|
+
<div class="o-expander__content">
|
|
503
|
+
<div class="video-description">
|
|
504
|
+
<h4 class="video-description__title o3-type-body-highlight">
|
|
505
505
|
Video description
|
|
506
506
|
</h4>
|
|
507
|
-
<p class
|
|
507
|
+
<p class="video-description__text o3-type-body-base">
|
|
508
508
|
Video description
|
|
509
509
|
</p>
|
|
510
510
|
</div>
|
|
511
511
|
</div>
|
|
512
512
|
</div>
|
|
513
513
|
<div
|
|
514
|
-
data-cp-clip-caption
|
|
515
|
-
class
|
|
514
|
+
data-cp-clip-caption="true"
|
|
515
|
+
class="cp-clip__caption o3-editorial-typography-caption"
|
|
516
516
|
>
|
|
517
517
|
caption text<!-- -->
|
|
518
|
-
<span class
|
|
518
|
+
<span class="cp-clip__credit"
|
|
519
519
|
>©
|
|
520
520
|
<!-- -->@credits</span
|
|
521
521
|
>
|
|
@@ -529,94 +529,94 @@ exports[`Clip Snapshot component rendered on server mid-grid render with attribu
|
|
|
529
529
|
`;
|
|
530
530
|
|
|
531
531
|
exports[`Clip Snapshot component rendered on server renders multiple video sources 1`] = `
|
|
532
|
-
"<div class
|
|
532
|
+
"<div class="n-content-layout__container--in-line" data-component="clip-set">
|
|
533
533
|
<div
|
|
534
|
-
data-cp-clip-layout
|
|
535
|
-
data-cp-clip-poster
|
|
536
|
-
data-cp-clip-no-audio
|
|
537
|
-
data-cp-clip-no-description
|
|
538
|
-
data-cp-clip-caption
|
|
539
|
-
data-cp-clip-no-info-box
|
|
540
|
-
data-cp-clip-no-caption
|
|
541
|
-
data-cp-clip-closed-caption
|
|
542
|
-
class
|
|
543
|
-
data-trackable
|
|
544
|
-
data-o-component
|
|
545
|
-
data-cp-clip-id
|
|
546
|
-
data-cp-clip-system-title
|
|
534
|
+
data-cp-clip-layout="in-line"
|
|
535
|
+
data-cp-clip-poster="https://whatever/1080x1920.jpg"
|
|
536
|
+
data-cp-clip-no-audio="false"
|
|
537
|
+
data-cp-clip-no-description="false"
|
|
538
|
+
data-cp-clip-caption="Aenean lobortis volutpat nunc vitae elementum"
|
|
539
|
+
data-cp-clip-no-info-box="false"
|
|
540
|
+
data-cp-clip-no-caption="false"
|
|
541
|
+
data-cp-clip-closed-caption="false"
|
|
542
|
+
class="cp-clip"
|
|
543
|
+
data-trackable="next-article-cp-clip"
|
|
544
|
+
data-o-component="cp-clip"
|
|
545
|
+
data-cp-clip-id="84d7e1b0-e8b2-4ffc-a798-306f29dc9d52"
|
|
546
|
+
data-cp-clip-system-title=""
|
|
547
547
|
>
|
|
548
548
|
<div
|
|
549
|
-
data-o-component
|
|
550
|
-
class
|
|
551
|
-
data-o-expander-shrink-to
|
|
552
|
-
data-trackable
|
|
553
|
-
data-o-expander-collapsed-toggle-text
|
|
554
|
-
data-o-expander-expanded-toggle-text
|
|
549
|
+
data-o-component="o-expander"
|
|
550
|
+
class="o-expander o-expander__info-box"
|
|
551
|
+
data-o-expander-shrink-to="hidden"
|
|
552
|
+
data-trackable="clip-info-box"
|
|
553
|
+
data-o-expander-collapsed-toggle-text="<span class='o-expander__visually-hidden'>Show video info</span>"
|
|
554
|
+
data-o-expander-expanded-toggle-text="<span class='o-expander__visually-hidden'>Hide video info</span>"
|
|
555
555
|
>
|
|
556
556
|
<button
|
|
557
|
-
data-trackable
|
|
558
|
-
class
|
|
557
|
+
data-trackable="toggle-open-close"
|
|
558
|
+
class="o-expander__toggle o-expander__toggle-empty"
|
|
559
559
|
>
|
|
560
|
-
<span class
|
|
560
|
+
<span class="o-expander__visually-hidden o3-type-detail"
|
|
561
561
|
>Show video info</span
|
|
562
562
|
>
|
|
563
563
|
</button>
|
|
564
|
-
<div class
|
|
564
|
+
<div class="o-expander__content video-info"></div>
|
|
565
565
|
</div>
|
|
566
|
-
<div class
|
|
566
|
+
<div class="cp-clip__video-container">
|
|
567
567
|
<video
|
|
568
|
-
class
|
|
569
|
-
controls
|
|
570
|
-
controlsList
|
|
571
|
-
disablepictureinpicture
|
|
572
|
-
disableremoteplayback
|
|
573
|
-
playsinline
|
|
574
|
-
poster
|
|
575
|
-
preload
|
|
576
|
-
id
|
|
577
|
-
crossorigin
|
|
578
|
-
style
|
|
568
|
+
class="cp-clip__video"
|
|
569
|
+
controls=""
|
|
570
|
+
controlsList="nodownload noremoteplayback noplaybackrate"
|
|
571
|
+
disablepictureinpicture=""
|
|
572
|
+
disableremoteplayback=""
|
|
573
|
+
playsinline=""
|
|
574
|
+
poster="https://whatever/1080x1920.jpg"
|
|
575
|
+
preload="auto"
|
|
576
|
+
id="clip-84d7e1b0-e8b2-4ffc-a798-306f29dc9d52"
|
|
577
|
+
crossorigin="anonymous"
|
|
578
|
+
style="aspect-ratio: 1920/1080; width: 100%"
|
|
579
579
|
>
|
|
580
580
|
<source
|
|
581
|
-
id
|
|
582
|
-
data-cp-component
|
|
583
|
-
src
|
|
584
|
-
type
|
|
581
|
+
id="video-source-0-84d7e1b0-e8b2-4ffc-a798-306f29dc9d52"
|
|
582
|
+
data-cp-component="cp-clip__video-source"
|
|
583
|
+
src="https://whatever/1080x1920.mp4"
|
|
584
|
+
type="video/mp4"
|
|
585
585
|
/>
|
|
586
586
|
<source
|
|
587
|
-
id
|
|
588
|
-
data-cp-component
|
|
589
|
-
src
|
|
590
|
-
type
|
|
587
|
+
id="video-source-1-84d7e1b0-e8b2-4ffc-a798-306f29dc9d52"
|
|
588
|
+
data-cp-component="cp-clip__video-source"
|
|
589
|
+
src="https://whatever/320x240.mp4"
|
|
590
|
+
type="video/mp4"
|
|
591
591
|
/>
|
|
592
592
|
<source
|
|
593
|
-
id
|
|
594
|
-
data-cp-component
|
|
595
|
-
src
|
|
596
|
-
type
|
|
593
|
+
id="video-source-2-84d7e1b0-e8b2-4ffc-a798-306f29dc9d52"
|
|
594
|
+
data-cp-component="cp-clip__video-source"
|
|
595
|
+
src="https://whatever/640x480.avi"
|
|
596
|
+
type="video/avi"
|
|
597
597
|
/>
|
|
598
598
|
</video>
|
|
599
599
|
</div>
|
|
600
|
-
<div class
|
|
600
|
+
<div class="cp-clip__video-meta-info" data-cp-clip-video-meta-info="true">
|
|
601
601
|
<div
|
|
602
|
-
data-o-component
|
|
603
|
-
class
|
|
604
|
-
data-o-expander-shrink-to
|
|
605
|
-
data-trackable
|
|
606
|
-
data-o-expander-collapsed-toggle-text
|
|
607
|
-
data-o-expander-expanded-toggle-text
|
|
602
|
+
data-o-component="o-expander"
|
|
603
|
+
class="o-expander o-expander__description-box"
|
|
604
|
+
data-o-expander-shrink-to="hidden"
|
|
605
|
+
data-trackable="description-box"
|
|
606
|
+
data-o-expander-collapsed-toggle-text="<span class='o-expander__visually-hidden'>Show video description</span>"
|
|
607
|
+
data-o-expander-expanded-toggle-text="<span class='o-expander__visually-hidden'>Hide video description</span>"
|
|
608
608
|
>
|
|
609
|
-
<button data-trackable
|
|
610
|
-
<span class
|
|
609
|
+
<button data-trackable="toggle-open-close" class="o-expander__toggle">
|
|
610
|
+
<span class="o-expander__visually-hidden o3-type-detail"
|
|
611
611
|
>Show video description</span
|
|
612
612
|
>
|
|
613
613
|
</button>
|
|
614
|
-
<div class
|
|
615
|
-
<div class
|
|
616
|
-
<h4 class
|
|
614
|
+
<div class="o-expander__content">
|
|
615
|
+
<div class="video-description">
|
|
616
|
+
<h4 class="video-description__title o3-type-body-highlight">
|
|
617
617
|
Video description
|
|
618
618
|
</h4>
|
|
619
|
-
<p class
|
|
619
|
+
<p class="video-description__text o3-type-body-base">
|
|
620
620
|
Dolor sit amet, consectetur adipiscing elit. Sed sit amet odio
|
|
621
621
|
quis ante auctor dapibus. Sed dapibus cursus nisi, tincidunt
|
|
622
622
|
sagittis sapien vehicula vitae.
|
|
@@ -625,8 +625,8 @@ exports[`Clip Snapshot component rendered on server renders multiple video sourc
|
|
|
625
625
|
</div>
|
|
626
626
|
</div>
|
|
627
627
|
<div
|
|
628
|
-
data-cp-clip-caption
|
|
629
|
-
class
|
|
628
|
+
data-cp-clip-caption="true"
|
|
629
|
+
class="cp-clip__caption o3-editorial-typography-caption"
|
|
630
630
|
>
|
|
631
631
|
Aenean lobortis volutpat nunc vitae elementum
|
|
632
632
|
</div>
|
|
@@ -637,98 +637,98 @@ exports[`Clip Snapshot component rendered on server renders multiple video sourc
|
|
|
637
637
|
`;
|
|
638
638
|
|
|
639
639
|
exports[`Clip Snapshot component rendered on server supports new Origami images, fallbacking to the previous implementation 1`] = `
|
|
640
|
-
"<div class
|
|
641
|
-
<div class
|
|
640
|
+
"<div class="n-content-layout" data-layout-width="full-grid">
|
|
641
|
+
<div class="n-content-layout__container" data-component="clip-set">
|
|
642
642
|
<div
|
|
643
|
-
data-cp-clip-layout
|
|
644
|
-
data-cp-clip-poster
|
|
645
|
-
data-cp-clip-autoplay
|
|
646
|
-
data-cp-clip-no-audio
|
|
647
|
-
data-cp-clip-no-description
|
|
648
|
-
data-cp-clip-caption
|
|
649
|
-
data-cp-clip-no-info-box
|
|
650
|
-
data-cp-clip-no-caption
|
|
651
|
-
data-cp-clip-closed-caption
|
|
652
|
-
data-cp-clip-loop
|
|
653
|
-
class
|
|
654
|
-
data-trackable
|
|
655
|
-
data-o-component
|
|
656
|
-
data-cp-clip-id
|
|
657
|
-
data-cp-clip-system-title
|
|
643
|
+
data-cp-clip-layout="full-grid"
|
|
644
|
+
data-cp-clip-poster=""
|
|
645
|
+
data-cp-clip-autoplay="true"
|
|
646
|
+
data-cp-clip-no-audio="false"
|
|
647
|
+
data-cp-clip-no-description="false"
|
|
648
|
+
data-cp-clip-caption="caption text"
|
|
649
|
+
data-cp-clip-no-info-box="false"
|
|
650
|
+
data-cp-clip-no-caption="false"
|
|
651
|
+
data-cp-clip-closed-caption="false"
|
|
652
|
+
data-cp-clip-loop="true"
|
|
653
|
+
class="cp-clip"
|
|
654
|
+
data-trackable="next-article-cp-clip"
|
|
655
|
+
data-o-component="cp-clip"
|
|
656
|
+
data-cp-clip-id="localhost:8080/fakevideo.mpg"
|
|
657
|
+
data-cp-clip-system-title=""
|
|
658
658
|
>
|
|
659
659
|
<div
|
|
660
|
-
data-o-component
|
|
661
|
-
class
|
|
662
|
-
data-o-expander-shrink-to
|
|
663
|
-
data-trackable
|
|
664
|
-
data-o-expander-collapsed-toggle-text
|
|
665
|
-
data-o-expander-expanded-toggle-text
|
|
660
|
+
data-o-component="o-expander"
|
|
661
|
+
class="o-expander o-expander__info-box"
|
|
662
|
+
data-o-expander-shrink-to="hidden"
|
|
663
|
+
data-trackable="clip-info-box"
|
|
664
|
+
data-o-expander-collapsed-toggle-text="<span class='o-expander__visually-hidden'>Show video info</span>"
|
|
665
|
+
data-o-expander-expanded-toggle-text="<span class='o-expander__visually-hidden'>Hide video info</span>"
|
|
666
666
|
>
|
|
667
667
|
<button
|
|
668
|
-
data-trackable
|
|
669
|
-
class
|
|
668
|
+
data-trackable="toggle-open-close"
|
|
669
|
+
class="o-expander__toggle o-expander__toggle-empty"
|
|
670
670
|
>
|
|
671
|
-
<span class
|
|
671
|
+
<span class="o-expander__visually-hidden o3-type-detail"
|
|
672
672
|
>Show video info</span
|
|
673
673
|
>
|
|
674
674
|
</button>
|
|
675
|
-
<div class
|
|
675
|
+
<div class="o-expander__content video-info"></div>
|
|
676
676
|
</div>
|
|
677
|
-
<div class
|
|
677
|
+
<div class="cp-clip__video-container">
|
|
678
678
|
<video
|
|
679
|
-
class
|
|
680
|
-
controls
|
|
681
|
-
controlsList
|
|
682
|
-
disablepictureinpicture
|
|
683
|
-
disableremoteplayback
|
|
684
|
-
playsinline
|
|
685
|
-
muted
|
|
686
|
-
loop
|
|
687
|
-
poster
|
|
688
|
-
preload
|
|
689
|
-
id
|
|
690
|
-
crossorigin
|
|
691
|
-
style
|
|
679
|
+
class="cp-clip__video"
|
|
680
|
+
controls=""
|
|
681
|
+
controlsList="nodownload noremoteplayback noplaybackrate"
|
|
682
|
+
disablepictureinpicture=""
|
|
683
|
+
disableremoteplayback=""
|
|
684
|
+
playsinline=""
|
|
685
|
+
muted=""
|
|
686
|
+
loop=""
|
|
687
|
+
poster=""
|
|
688
|
+
preload="auto"
|
|
689
|
+
id="clip-localhost:8080/fakevideo.mpg"
|
|
690
|
+
crossorigin="anonymous"
|
|
691
|
+
style="height: fit-content; width: 100%"
|
|
692
692
|
>
|
|
693
693
|
<source
|
|
694
|
-
id
|
|
695
|
-
data-cp-component
|
|
696
|
-
src
|
|
697
|
-
type
|
|
694
|
+
id="video-source-0-localhost:8080/fakevideo.mpg"
|
|
695
|
+
data-cp-component="cp-clip__video-source"
|
|
696
|
+
src="localhost:8080/fakevideo.mpg"
|
|
697
|
+
type="video/mp4"
|
|
698
698
|
/>
|
|
699
699
|
</video>
|
|
700
700
|
</div>
|
|
701
|
-
<div class
|
|
701
|
+
<div class="cp-clip__video-meta-info" data-cp-clip-video-meta-info="true">
|
|
702
702
|
<div
|
|
703
|
-
data-o-component
|
|
704
|
-
class
|
|
705
|
-
data-o-expander-shrink-to
|
|
706
|
-
data-trackable
|
|
707
|
-
data-o-expander-collapsed-toggle-text
|
|
708
|
-
data-o-expander-expanded-toggle-text
|
|
703
|
+
data-o-component="o-expander"
|
|
704
|
+
class="o-expander o-expander__description-box"
|
|
705
|
+
data-o-expander-shrink-to="hidden"
|
|
706
|
+
data-trackable="description-box"
|
|
707
|
+
data-o-expander-collapsed-toggle-text="<span class='o-expander__visually-hidden'>Show video description</span>"
|
|
708
|
+
data-o-expander-expanded-toggle-text="<span class='o-expander__visually-hidden'>Hide video description</span>"
|
|
709
709
|
>
|
|
710
|
-
<button data-trackable
|
|
711
|
-
<span class
|
|
710
|
+
<button data-trackable="toggle-open-close" class="o-expander__toggle">
|
|
711
|
+
<span class="o-expander__visually-hidden o3-type-detail"
|
|
712
712
|
>Show video description</span
|
|
713
713
|
>
|
|
714
714
|
</button>
|
|
715
|
-
<div class
|
|
716
|
-
<div class
|
|
717
|
-
<h4 class
|
|
715
|
+
<div class="o-expander__content">
|
|
716
|
+
<div class="video-description">
|
|
717
|
+
<h4 class="video-description__title o3-type-body-highlight">
|
|
718
718
|
Video description
|
|
719
719
|
</h4>
|
|
720
|
-
<p class
|
|
720
|
+
<p class="video-description__text o3-type-body-base">
|
|
721
721
|
Video description
|
|
722
722
|
</p>
|
|
723
723
|
</div>
|
|
724
724
|
</div>
|
|
725
725
|
</div>
|
|
726
726
|
<div
|
|
727
|
-
data-cp-clip-caption
|
|
728
|
-
class
|
|
727
|
+
data-cp-clip-caption="true"
|
|
728
|
+
class="cp-clip__caption o3-editorial-typography-caption"
|
|
729
729
|
>
|
|
730
730
|
caption text<!-- -->
|
|
731
|
-
<span class
|
|
731
|
+
<span class="cp-clip__credit"
|
|
732
732
|
>©
|
|
733
733
|
<!-- -->@credits</span
|
|
734
734
|
>
|