@financial-times/cp-content-pipeline-ui 6.11.3 → 6.11.5

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.
Files changed (12) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/lib/components/Clip/client/index.d.ts +2 -0
  3. package/lib/components/Clip/client/index.js +36 -24
  4. package/lib/components/Clip/client/index.js.map +1 -1
  5. package/lib/components/Clip/components/ClipTag.js +2 -2
  6. package/lib/components/Clip/components/ClipTag.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/Clip/client/index.ts +44 -31
  9. package/src/components/Clip/client/main.scss +37 -30
  10. package/src/components/Clip/components/ClipTag.tsx +3 -1
  11. package/src/components/Clip/test/__snapshots__/snapshot.spec.tsx.snap +24 -8
  12. package/tsconfig.tsbuildinfo +1 -1
package/src/components/Clip/client/main.scss CHANGED
@@ -17,7 +17,7 @@
17
17
  'themes': ('light'),
18
18
  'sizes': ('large')
19
19
  ));
20
- --o-loading-size: 64px;
20
+ --o-loading-size: 44px;
21
21
 
22
22
  &[data-o-component='cp-clip'] {
23
23
  flex: none;
@@ -41,12 +41,12 @@
41
41
  max-height: 80vh;
42
42
  box-sizing: border-box;
43
43
  position: absolute;
44
- background-color: rgba(oColorsByName('ft-grey'),0.30);
45
44
  top: 0;
45
+ }
46
46
 
47
- &--no-background {
48
- background-color: transparent;
49
- }
47
+ // now this is darker for contrast accessibility, do not have it over the top of a playing video
48
+ &:not(.cp-clip--playing) .cp-clip__video-controls {
49
+ background-color: rgba(0, 0, 0, 0.25);
50
50
  }
51
51
 
52
52
  .cp-clip__video-controls-bottom-bar {
@@ -62,15 +62,13 @@
62
62
  @include oGridRespondTo($from: L) {
63
63
  padding: oSpacingByName('s1') oSpacingByName('s6') oSpacingByName('s6') oSpacingByName('s6')
64
64
  }
65
- background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 38.38%, rgba(153, 153, 153, 0) 100%);
66
-
65
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
67
66
  &--fade-out:not(:has(button:focus)) {
68
67
  @include fade-out-animation();
69
68
  }
70
69
  }
71
70
 
72
- .cp-clip__play-icon-container {
73
- margin: auto auto;
71
+ @mixin cp-clip__icon-container {
74
72
  text-align: center;
75
73
  margin: auto auto;
76
74
  position: absolute;
@@ -83,19 +81,20 @@
83
81
  }
84
82
 
85
83
  @mixin cp-clip__control-icon {
86
- border: 2px solid oColorsByName('white');
84
+ background-color: rgba(0, 0, 0, 0.75);
85
+ border: 2px solid transparent;
87
86
  border-radius: 50%;
88
87
  margin: auto;
89
88
  display: block;
90
- width: 80px;
91
- height: 80px;
92
- background-size: 50px;
93
- @include oGridRespondTo($from: L) {
94
- width: 100px;
95
- height: 100px;
96
- background-size: 65px;
97
- }
98
- margin-bottom: oSpacingByName('s4');
89
+ width: 72px;
90
+ height: 72px;
91
+ background-size: 44px;
92
+ margin-bottom: oSpacingByName('s2');
93
+ }
94
+
95
+
96
+ .cp-clip__play-icon-container {
97
+ @include cp-clip__icon-container;
99
98
  }
100
99
 
101
100
  .cp-clip__play-icon {
@@ -103,14 +102,18 @@
103
102
  // See: https://github.com/Financial-Times/ft-app/blob/main/tools/webpack/client/webpack.config.common.js#L218
104
103
  @include oIconsContent($icon-name: 'play', $size: 20%, $color: oColorsByName('white'));
105
104
  @include cp-clip__control-icon;
105
+ &:hover, &:focus {
106
+ border-color: white;
107
+ }
106
108
  background-position: 60%;
107
109
  }
108
110
 
111
+ .cp-clip__loading-text,
109
112
  .cp-clip__play-text {
110
113
  @include oTypographySans(-1, $weight: 'semibold');
111
- @include oGridRespondTo($from: L) {
112
- @include oTypographySans(0);
113
- }
114
+ padding: 0 oSpacingByName('s1');
115
+ background-color: rgba(0, 0, 0, 0.75);
116
+ display: block;
114
117
  }
115
118
 
116
119
  .cp-clip__replay-icon {
@@ -118,9 +121,13 @@
118
121
  // See: https://github.com/Financial-Times/ft-app/blob/main/tools/webpack/client/webpack.config.common.js#L218
119
122
  @include oIconsContent($icon-name: 'refresh', $size: 20%, $color: oColorsByName('white'));
120
123
  @include cp-clip__control-icon;
124
+ &:hover, &:focus {
125
+ border-color: white;
126
+ }
121
127
  background-position: 50%;
122
128
  }
123
129
 
130
+ // fade out the bottom controls only when they are not focussed
124
131
  &.cp-clip--ready .cp-clip__video-controls-bottom-bar:not(:has(button:focus)),
125
132
  &.cp-clip--paused .cp-clip__video-controls-bottom-bar:not(:has(button:focus)) {
126
133
  @include fade-out-animation();
@@ -213,25 +220,25 @@
213
220
  @include oIconsContent($icon-name: 'closed-captions-on', $size: 32px, $color: oColorsByName('white'));
214
221
  }
215
222
 
216
- .cp-clip--fade-out:not(:has(button:focus)) {
217
- @include fade-out-animation();
218
- }
219
-
220
223
  @keyframes fade-out {
221
224
  from {opacity :1;}
222
225
  to {opacity :0;}
223
226
  }
224
227
 
225
228
  .cp-clip__loading-icon-container {
229
+ @include cp-clip__icon-container;
226
230
  display: none;
227
- position: absolute;
228
- top: calc(50% - var(--o-loading-size) / 2);
229
- left: calc(50% - var(--o-loading-size) / 2);
231
+ }
232
+
233
+ .cp-clip__loading-icon-bg {
234
+ @include cp-clip__control-icon;
235
+ display: flex;
236
+ align-items: center;
237
+ justify-content: center;
230
238
  }
231
239
 
232
240
  .o-loading {
233
241
  width: var(--o-loading-size);
234
242
  height: var(--o-loading-size);
235
243
  }
236
-
237
244
  }
package/src/components/Clip/components/ClipTag.tsx CHANGED
@@ -62,11 +62,12 @@ export const ClipTag = ({
62
62
  data-cp-clip-autoplay={autoplay}
63
63
  data-cp-clip-no-audio={noAudio}
64
64
  data-cp-clip-no-description={noDescription}
65
+ data-cp-clip-caption={caption}
65
66
  data-cp-clip-no-info-box={noInfoBox}
66
67
  data-cp-clip-no-caption={noCaption}
67
68
  data-cp-clip-closed-caption={Boolean(accessibility?.captions?.[0]?.url)}
68
69
  data-cp-clip-loop={loop}
69
- className="cp-clip"
70
+ className="cp-clip cp-clip--loading"
70
71
  data-trackable={dataTrackable}
71
72
  data-o-component="cp-clip"
72
73
  data-cp-clip-id={id}
@@ -88,6 +89,7 @@ export const ClipTag = ({
88
89
  loop={loop}
89
90
  poster={poster}
90
91
  preload={preload}
92
+ id={id}
91
93
  >
92
94
  {clip?.dataSource?.map(({ binaryUrl, mediaType }, index) => {
93
95
  return (
package/src/components/Clip/test/__snapshots__/snapshot.spec.tsx.snap CHANGED
@@ -9,11 +9,12 @@ exports[`Clip Snapshot component rendered on server full-grid default render 1`]
9
9
  data-cp-clip-autoplay=\\"false\\"
10
10
  data-cp-clip-no-audio=\\"false\\"
11
11
  data-cp-clip-no-description=\\"false\\"
12
+ data-cp-clip-caption=\\"\\"
12
13
  data-cp-clip-no-info-box=\\"false\\"
13
14
  data-cp-clip-no-caption=\\"false\\"
14
15
  data-cp-clip-closed-caption=\\"false\\"
15
16
  data-cp-clip-loop=\\"false\\"
16
- class=\\"cp-clip\\"
17
+ class=\\"cp-clip cp-clip--loading\\"
17
18
  data-trackable=\\"next-article-cp-clip\\"
18
19
  data-o-component=\\"cp-clip\\"
19
20
  data-cp-clip-id=\\"localhost:8080/fakevideo.mpg\\"
@@ -44,6 +45,7 @@ exports[`Clip Snapshot component rendered on server full-grid default render 1`]
44
45
  playsinline=\\"\\"
45
46
  poster=\\"\\"
46
47
  preload=\\"auto\\"
48
+ id=\\"localhost:8080/fakevideo.mpg\\"
47
49
  style=\\"height: fit-content; width: 100%\\"
48
50
  >
49
51
  <source
@@ -73,11 +75,12 @@ exports[`Clip Snapshot component rendered on server full-grid render with attrib
73
75
  data-cp-clip-autoplay=\\"true\\"
74
76
  data-cp-clip-no-audio=\\"false\\"
75
77
  data-cp-clip-no-description=\\"false\\"
78
+ data-cp-clip-caption=\\"caption text\\"
76
79
  data-cp-clip-no-info-box=\\"false\\"
77
80
  data-cp-clip-no-caption=\\"false\\"
78
81
  data-cp-clip-closed-caption=\\"false\\"
79
82
  data-cp-clip-loop=\\"true\\"
80
- class=\\"cp-clip\\"
83
+ class=\\"cp-clip cp-clip--loading\\"
81
84
  data-trackable=\\"next-article-cp-clip\\"
82
85
  data-o-component=\\"cp-clip\\"
83
86
  data-cp-clip-id=\\"localhost:8080/fakevideo.mpg\\"
@@ -109,6 +112,7 @@ exports[`Clip Snapshot component rendered on server full-grid render with attrib
109
112
  loop=\\"\\"
110
113
  poster=\\"\\"
111
114
  preload=\\"auto\\"
115
+ id=\\"localhost:8080/fakevideo.mpg\\"
112
116
  style=\\"height: fit-content; width: 100%\\"
113
117
  >
114
118
  <source
@@ -162,11 +166,12 @@ exports[`Clip Snapshot component rendered on server in-line render 1`] = `
162
166
  data-cp-clip-autoplay=\\"false\\"
163
167
  data-cp-clip-no-audio=\\"false\\"
164
168
  data-cp-clip-no-description=\\"false\\"
169
+ data-cp-clip-caption=\\"\\"
165
170
  data-cp-clip-no-info-box=\\"false\\"
166
171
  data-cp-clip-no-caption=\\"false\\"
167
172
  data-cp-clip-closed-caption=\\"false\\"
168
173
  data-cp-clip-loop=\\"false\\"
169
- class=\\"cp-clip\\"
174
+ class=\\"cp-clip cp-clip--loading\\"
170
175
  data-trackable=\\"next-article-cp-clip\\"
171
176
  data-o-component=\\"cp-clip\\"
172
177
  data-cp-clip-id=\\"localhost:8080/fakevideo.mpg\\"
@@ -197,6 +202,7 @@ exports[`Clip Snapshot component rendered on server in-line render 1`] = `
197
202
  playsinline=\\"\\"
198
203
  poster=\\"\\"
199
204
  preload=\\"auto\\"
205
+ id=\\"localhost:8080/fakevideo.mpg\\"
200
206
  style=\\"height: fit-content; width: 100%\\"
201
207
  >
202
208
  <source
@@ -224,11 +230,12 @@ exports[`Clip Snapshot component rendered on server in-line render with attribut
224
230
  data-cp-clip-autoplay=\\"true\\"
225
231
  data-cp-clip-no-audio=\\"false\\"
226
232
  data-cp-clip-no-description=\\"false\\"
233
+ data-cp-clip-caption=\\"caption text\\"
227
234
  data-cp-clip-no-info-box=\\"false\\"
228
235
  data-cp-clip-no-caption=\\"false\\"
229
236
  data-cp-clip-closed-caption=\\"false\\"
230
237
  data-cp-clip-loop=\\"true\\"
231
- class=\\"cp-clip\\"
238
+ class=\\"cp-clip cp-clip--loading\\"
232
239
  data-trackable=\\"next-article-cp-clip\\"
233
240
  data-o-component=\\"cp-clip\\"
234
241
  data-cp-clip-id=\\"localhost:8080/fakevideo.mpg\\"
@@ -260,6 +267,7 @@ exports[`Clip Snapshot component rendered on server in-line render with attribut
260
267
  loop=\\"\\"
261
268
  poster=\\"\\"
262
269
  preload=\\"auto\\"
270
+ id=\\"localhost:8080/fakevideo.mpg\\"
263
271
  style=\\"height: fit-content; width: 100%\\"
264
272
  >
265
273
  <source
@@ -317,11 +325,12 @@ exports[`Clip Snapshot component rendered on server mid-grid default render 1`]
317
325
  data-cp-clip-autoplay=\\"false\\"
318
326
  data-cp-clip-no-audio=\\"false\\"
319
327
  data-cp-clip-no-description=\\"false\\"
328
+ data-cp-clip-caption=\\"\\"
320
329
  data-cp-clip-no-info-box=\\"false\\"
321
330
  data-cp-clip-no-caption=\\"false\\"
322
331
  data-cp-clip-closed-caption=\\"false\\"
323
332
  data-cp-clip-loop=\\"false\\"
324
- class=\\"cp-clip\\"
333
+ class=\\"cp-clip cp-clip--loading\\"
325
334
  data-trackable=\\"next-article-cp-clip\\"
326
335
  data-o-component=\\"cp-clip\\"
327
336
  data-cp-clip-id=\\"localhost:8080/fakevideo.mpg\\"
@@ -352,6 +361,7 @@ exports[`Clip Snapshot component rendered on server mid-grid default render 1`]
352
361
  playsinline=\\"\\"
353
362
  poster=\\"\\"
354
363
  preload=\\"auto\\"
364
+ id=\\"localhost:8080/fakevideo.mpg\\"
355
365
  style=\\"height: fit-content; width: 100%\\"
356
366
  >
357
367
  <source
@@ -386,11 +396,12 @@ exports[`Clip Snapshot component rendered on server mid-grid render with attribu
386
396
  data-cp-clip-autoplay=\\"true\\"
387
397
  data-cp-clip-no-audio=\\"false\\"
388
398
  data-cp-clip-no-description=\\"false\\"
399
+ data-cp-clip-caption=\\"caption text\\"
389
400
  data-cp-clip-no-info-box=\\"false\\"
390
401
  data-cp-clip-no-caption=\\"false\\"
391
402
  data-cp-clip-closed-caption=\\"false\\"
392
403
  data-cp-clip-loop=\\"true\\"
393
- class=\\"cp-clip\\"
404
+ class=\\"cp-clip cp-clip--loading\\"
394
405
  data-trackable=\\"next-article-cp-clip\\"
395
406
  data-o-component=\\"cp-clip\\"
396
407
  data-cp-clip-id=\\"localhost:8080/fakevideo.mpg\\"
@@ -422,6 +433,7 @@ exports[`Clip Snapshot component rendered on server mid-grid render with attribu
422
433
  loop=\\"\\"
423
434
  poster=\\"\\"
424
435
  preload=\\"auto\\"
436
+ id=\\"localhost:8080/fakevideo.mpg\\"
425
437
  style=\\"height: fit-content; width: 100%\\"
426
438
  >
427
439
  <source
@@ -482,11 +494,12 @@ exports[`Clip Snapshot component rendered on server renders multiple video sourc
482
494
  data-cp-clip-autoplay=\\"false\\"
483
495
  data-cp-clip-no-audio=\\"false\\"
484
496
  data-cp-clip-no-description=\\"false\\"
497
+ data-cp-clip-caption=\\"Aenean lobortis volutpat nunc vitae elementum\\"
485
498
  data-cp-clip-no-info-box=\\"false\\"
486
499
  data-cp-clip-no-caption=\\"false\\"
487
500
  data-cp-clip-closed-caption=\\"false\\"
488
501
  data-cp-clip-loop=\\"false\\"
489
- class=\\"cp-clip\\"
502
+ class=\\"cp-clip cp-clip--loading\\"
490
503
  data-trackable=\\"next-article-cp-clip\\"
491
504
  data-o-component=\\"cp-clip\\"
492
505
  data-cp-clip-id=\\"84d7e1b0-e8b2-4ffc-a798-306f29dc9d52\\"
@@ -517,6 +530,7 @@ exports[`Clip Snapshot component rendered on server renders multiple video sourc
517
530
  playsinline=\\"\\"
518
531
  poster=\\"https://whatever/1080x1920.jpg\\"
519
532
  preload=\\"auto\\"
533
+ id=\\"84d7e1b0-e8b2-4ffc-a798-306f29dc9d52\\"
520
534
  style=\\"aspect-ratio: 1920/1080; width: 100%\\"
521
535
  >
522
536
  <source
@@ -582,11 +596,12 @@ exports[`Clip Snapshot component rendered on server supports new Origami images,
582
596
  data-cp-clip-autoplay=\\"true\\"
583
597
  data-cp-clip-no-audio=\\"false\\"
584
598
  data-cp-clip-no-description=\\"false\\"
599
+ data-cp-clip-caption=\\"caption text\\"
585
600
  data-cp-clip-no-info-box=\\"false\\"
586
601
  data-cp-clip-no-caption=\\"false\\"
587
602
  data-cp-clip-closed-caption=\\"false\\"
588
603
  data-cp-clip-loop=\\"true\\"
589
- class=\\"cp-clip\\"
604
+ class=\\"cp-clip cp-clip--loading\\"
590
605
  data-trackable=\\"next-article-cp-clip\\"
591
606
  data-o-component=\\"cp-clip\\"
592
607
  data-cp-clip-id=\\"localhost:8080/fakevideo.mpg\\"
@@ -618,6 +633,7 @@ exports[`Clip Snapshot component rendered on server supports new Origami images,
618
633
  loop=\\"\\"
619
634
  poster=\\"\\"
620
635
  preload=\\"auto\\"
636
+ id=\\"localhost:8080/fakevideo.mpg\\"
621
637
  style=\\"height: fit-content; width: 100%\\"
622
638
  >
623
639
  <source