@financial-times/cp-content-pipeline-ui 3.1.1 → 3.2.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.
Files changed (25) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/lib/components/Clip/template/component.d.ts +5 -3
  3. package/lib/components/Clip/template/component.js +29 -4
  4. package/lib/components/Clip/template/component.js.map +1 -1
  5. package/lib/components/Clip/test/fixtures.d.ts +1 -0
  6. package/lib/components/Clip/test/fixtures.js +6 -1
  7. package/lib/components/Clip/test/fixtures.js.map +1 -1
  8. package/lib/components/Clip/test/snapshot.spec.js +67 -0
  9. package/lib/components/Clip/test/snapshot.spec.js.map +1 -1
  10. package/lib/components/RichText/index.js +1 -0
  11. package/lib/components/RichText/index.js.map +1 -1
  12. package/lib/components/Topper/Wrapper.js +0 -1
  13. package/lib/components/Topper/Wrapper.js.map +1 -1
  14. package/lib/index.d.ts +1 -1
  15. package/lib/index.js +3 -3
  16. package/lib/index.js.map +1 -1
  17. package/package.json +4 -4
  18. package/src/components/Clip/template/component.tsx +41 -5
  19. package/src/components/Clip/test/__snapshots__/snapshot.spec.tsx.snap +90 -6
  20. package/src/components/Clip/test/fixtures.ts +5 -0
  21. package/src/components/Clip/test/snapshot.spec.tsx +78 -0
  22. package/src/components/RichText/index.tsx +1 -0
  23. package/src/components/Topper/Wrapper.tsx +0 -1
  24. package/src/index.ts +1 -1
  25. package/tsconfig.tsbuildinfo +1 -1
package/CHANGELOG.md CHANGED
@@ -382,6 +382,40 @@
382
382
  * devDependencies
383
383
  * n-content-body bumped from ^14.5.0 to ^14.6.0
384
384
 
385
+ ## [3.2.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v3.1.2...cp-content-pipeline-ui-v3.2.0) (2023-10-31)
386
+
387
+
388
+ ### Features
389
+
390
+ * add clip and clipset schema ([a765b91](https://github.com/Financial-Times/cp-content-pipeline/commit/a765b917fc3f3ffa05b52662687239a27ec29d0c))
391
+
392
+
393
+ ### Bug Fixes
394
+
395
+ * get this working with old clips ([ca5944a](https://github.com/Financial-Times/cp-content-pipeline/commit/ca5944a74683c23102287f452a684bdf2b84e1a7))
396
+
397
+
398
+ ### Dependencies
399
+
400
+ * The following workspace dependencies were updated
401
+ * devDependencies
402
+ * @financial-times/cp-content-pipeline-client bumped from ^2.0.6 to ^2.1.0
403
+ * @financial-times/cp-content-pipeline-schema bumped from ^1.4.4 to ^1.5.0
404
+
405
+ ## [3.1.2](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v3.1.1...cp-content-pipeline-ui-v3.1.2) (2023-10-30)
406
+
407
+
408
+ ### Bug Fixes
409
+
410
+ * revert "feat: add missing styles for ft-app" ([9448472](https://github.com/Financial-Times/cp-content-pipeline/commit/94484724576f888c58a9dc2fe5c287f8ebb1fe99))
411
+
412
+
413
+ ### Dependencies
414
+
415
+ * The following workspace dependencies were updated
416
+ * devDependencies
417
+ * @financial-times/cp-content-pipeline-styles bumped from ^1.1.0 to ^1.1.1
418
+
385
419
  ## [3.1.1](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v3.1.0...cp-content-pipeline-ui-v3.1.1) (2023-10-27)
386
420
 
387
421
 
package/lib/components/Clip/template/component.d.ts CHANGED
@@ -1,16 +1,18 @@
1
1
  import React from 'react';
2
+ import type { Clip } from '@financial-times/cp-content-pipeline-client';
2
3
  export interface ClipProps {
3
- url: string;
4
+ url?: string;
5
+ id?: string;
4
6
  autoplay?: boolean;
5
7
  loop?: boolean;
6
8
  credits?: string;
9
+ clips?: Clip[];
7
10
  poster?: string;
8
11
  posterAlt?: string;
9
- posterCredits?: string;
10
12
  dataLayout: string;
11
13
  description?: string;
12
14
  muted?: boolean;
13
15
  caption?: string;
14
16
  noAudio?: boolean;
15
17
  }
16
- export default function ClipComponent({ url, autoplay, loop, credits, poster, posterAlt, posterCredits, dataLayout, description, muted, caption, noAudio, }: ClipProps): React.JSX.Element;
18
+ export default function ClipComponent({ url, id, autoplay, loop, credits, clips, poster, posterAlt, dataLayout, description, muted, caption, noAudio, }: ClipProps): React.JSX.Element;
package/lib/components/Clip/template/component.js CHANGED
@@ -9,7 +9,31 @@ const mapSizes = {
9
9
  'mid-grid': 900,
10
10
  'full-grid': 1200,
11
11
  };
12
- function ClipComponent({ url, autoplay = false, loop = false, credits = '', poster = '', posterAlt = '', posterCredits = '', dataLayout, description = '', muted = false, caption = '', noAudio = false, }) {
12
+ function ClipComponent({ url, id, autoplay = false, loop = false, credits = '', clips = [], poster = '', posterAlt = '', dataLayout, description = '', muted = false, caption = '', noAudio = false, }) {
13
+ // We support currently a single clip, with multiple sources.
14
+ let clip = {};
15
+ // V2 has an array of clips
16
+ if (clips && clips.length > 0) {
17
+ clip = clips[0];
18
+ poster = clip.poster ?? '';
19
+ posterAlt = caption;
20
+ url = clip.dataSource[0].binaryUrl;
21
+ }
22
+ else {
23
+ // Create a V1 compatible clip
24
+ id = url ?? '';
25
+ clip = {
26
+ type: '',
27
+ id: id ?? '',
28
+ dataSource: [
29
+ {
30
+ binaryUrl: url ?? '',
31
+ // V1 supports only mp4.
32
+ mediaType: 'video/mp4',
33
+ },
34
+ ],
35
+ };
36
+ }
13
37
  const posterAttribute = poster && !autoplay ? poster : '';
14
38
  const preload = autoplay ? '' : 'auto';
15
39
  const Credit = () => react_1.default.createElement("span", { className: "cp-clip__credit" },
@@ -57,11 +81,12 @@ function ClipComponent({ url, autoplay = false, loop = false, credits = '', post
57
81
  react_1.default.createElement("div", { "data-o-grid-colspan": "12 S12 M12 L10 XL10", className: "n-content-layout__container--mid-grid" }, children))) : (react_1.default.createElement("div", { className: "n-content-layout__container--in-line" }, children));
58
82
  };
59
83
  const ClipTag = () => {
60
- return (react_1.default.createElement("div", { "data-cp-clip-layout": dataLayout, "data-cp-clip-poster": poster, "data-cp-clip-autoplay": autoplay, "data-cp-clip-no-audio": noAudio, "data-cp-clip-loop": loop, className: "cp-clip", "data-trackable": "next-article-cp-clip", "data-o-component": "cp-clip", "data-cp-clip-id": url },
84
+ return (react_1.default.createElement("div", { "data-cp-clip-layout": dataLayout, "data-cp-clip-poster": poster, "data-cp-clip-autoplay": autoplay, "data-cp-clip-no-audio": noAudio, "data-cp-clip-loop": loop, className: "cp-clip", "data-trackable": "next-article-cp-clip", "data-o-component": "cp-clip", "data-cp-clip-id": id },
61
85
  react_1.default.createElement(VideoInfoBox, null),
62
86
  react_1.default.createElement("div", { className: "cp-clip__video-container" },
63
- react_1.default.createElement("video", { className: "cp-clip__video", controls: true, controlsList: "nodownload noremoteplayback noplaybackrate", disablePictureInPicture: true, disableRemotePlayback: true, playsInline: true, muted: muted, loop: loop, poster: posterAttribute, preload: preload, tabIndex: 0 },
64
- react_1.default.createElement("source", { src: url })),
87
+ react_1.default.createElement("video", { className: "cp-clip__video", controls: true, controlsList: "nodownload noremoteplayback noplaybackrate", disablePictureInPicture: true, disableRemotePlayback: true, playsInline: true, muted: muted, loop: loop, poster: posterAttribute, preload: preload, tabIndex: 0 }, clip.dataSource.map(({ binaryUrl, mediaType }) => {
88
+ return (react_1.default.createElement("source", { src: binaryUrl, type: mediaType !== '' ? mediaType : undefined, key: binaryUrl }));
89
+ })),
65
90
  react_1.default.createElement("img", { className: "cp-clip__fallback o-normalise-visually-hidden", src: getPosterUrl(), alt: getPosterAlt(), "data-cp-clip-fallback": true })),
66
91
  react_1.default.createElement("div", { className: "video-meta-info", "data-cp-clip-video-meta-info": true },
67
92
  react_1.default.createElement(CaptionTag, null),
package/lib/components/Clip/template/component.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../src/components/Clip/template/component.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAwC;AACxC,MAAM,QAAQ,GAEV;IACF,SAAS,EAAE,GAAG;IACd,UAAU,EAAE,GAAG;IACf,WAAW,EAAE,IAAI;CAClB,CAAA;AAeD,SAAwB,aAAa,CAAC,EACpC,GAAG,EACH,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,KAAK,EACZ,OAAO,GAAG,EAAE,EACZ,MAAM,GAAG,EAAE,EACX,SAAS,GAAG,EAAE,EACd,aAAa,GAAG,EAAE,EAClB,UAAU,EACV,WAAW,GAAG,EAAE,EAChB,KAAK,GAAG,KAAK,EACb,OAAO,GAAG,EAAE,EACZ,OAAO,GAAG,KAAK,GACL;IACV,MAAM,eAAe,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAA;IACzD,MAAM,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAA;IAEtC,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,wCAAM,SAAS,EAAC,iBAAiB;;QAAI,OAAO,CAAQ,CAAA;IAEzE,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,OAAO,MAAM;YACX,CAAC,CAAC,GAAG,MAAM,qCAAqC,MAAM,CAClD,QAAQ,CAAC,UAAU,CAAC,CACrB,EAAE;YACL,CAAC,CAAC,EAAE,CAAA;IACR,CAAC,CAAA;IAED,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,OAAO,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAA;IACxC,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO;YAAE,OAAO,6DAAK,CAAA;QACtC,MAAM,SAAS,GAAG,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAA;QAEjD,OAAO,CACL,qEAA0B,SAAS,EAAC,kBAAkB;YACnD,OAAO;YACP,SAAS;YACT,OAAO,IAAI,8BAAC,MAAM,OAAG,CAClB,CACP,CAAA;IACH,CAAC,CAAA;IAED,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,IAAI,CAAC,WAAW;YAAE,OAAO,6DAAK,CAAA;QAE9B,OAAO,CACL,2DACmB,YAAY,EAC7B,SAAS,EAAC,wCAAwC,+BACxB,QAAQ,oBACnB,iBAAiB,2CACM,GAAG,0CACJ,GAAG;YAExC,4DACiB,mBAAmB,EAClC,SAAS,EAAC,oBAAoB;gBAE9B,qDAAmB,CACZ;YACT,uCAAK,SAAS,EAAC,uCAAuC;gBACpD,sCAAI,SAAS,EAAC,0BAA0B,wBAAuB;gBAC/D,qCAAG,SAAS,EAAC,yBAAyB,IAAE,WAAW,CAAK,CACpD,CACF,CACP,CAAA;IACH,CAAC,CAAA;IAED,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,OAAO,CACL,2DACmB,YAAY,EAC7B,SAAS,EAAC,iCAAiC,+BACjB,QAAQ,oBACnB,eAAe,2CACQ,GAAG,0CACJ,GAAG;YAExC,4DACiB,mBAAmB,EAClC,SAAS,EAAC,oBAAoB;gBAE9B,qDAAmB,CACZ;YACT,uCAAK,SAAS,EAAC,gCAAgC,GAAO,CAClD,CACP,CAAA;IACH,CAAC,CAAA;IAED,uEAAuE;IACvE,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAA2B,EAAE,EAAE;QAC9D,OAAO,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,CAChC,uCAAK,SAAS,EAAC,kBAAkB,uBAAmB,WAAW,IAC5D,QAAQ,CACL,CACP,CAAC,CAAC,CAAC,CACF,8DAAG,QAAQ,CAAI,CAChB,CAAA;IACH,CAAC,CAAA;IAED,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAA2B,EAAE,EAAE;QAC7D,OAAO,UAAU,KAAK,WAAW,CAAC,CAAC,CAAC,CAClC,uCAAK,SAAS,EAAC,6BAA6B,IAAE,QAAQ,CAAO,CAC9D,CAAC,CAAC,CAAC,UAAU,KAAK,UAAU,CAAC,CAAC,CAAC,CAC9B,uCAAK,SAAS,EAAC,6BAA6B;YAC1C,8DACsB,qBAAqB,EACzC,SAAS,EAAC,uCAAuC,IAEhD,QAAQ,CACL,CACF,CACP,CAAC,CAAC,CAAC,CACF,uCAAK,SAAS,EAAC,sCAAsC,IAAE,QAAQ,CAAO,CACvE,CAAA;IACH,CAAC,CAAA;IAED,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,OAAO,CACL,8DACuB,UAAU,yBACV,MAAM,2BACJ,QAAQ,2BACR,OAAO,uBACX,IAAI,EACvB,SAAS,EAAC,SAAS,oBACJ,sBAAsB,sBACpB,SAAS,qBACT,GAAG;YAEpB,8BAAC,YAAY,OAAG;YAChB,uCAAK,SAAS,EAAC,0BAA0B;gBAEvC,yCACE,SAAS,EAAC,gBAAgB,EAC1B,QAAQ,QACR,YAAY,EAAC,4CAA4C,EACzD,uBAAuB,QACvB,qBAAqB,QACrB,WAAW,QACX,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,eAAe,EACvB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC;oBAEX,0CAAQ,GAAG,EAAE,GAAG,GAAW,CACrB;gBACR,uCACE,SAAS,EAAC,+CAA+C,EACzD,GAAG,EAAE,YAAY,EAAE,EACnB,GAAG,EAAE,YAAY,EAAE,kCAEnB,CACE;YACN,uCAAK,SAAS,EAAC,iBAAiB;gBAC9B,8BAAC,UAAU,OAAG;gBACd,8BAAC,gBAAgB,OAAG,CAChB,CACF,CACP,CAAA;IACH,CAAC,CAAA;IAED,OAAO,CACL,8BAAC,aAAa;QACZ,8BAAC,YAAY;YACX,8BAAC,OAAO,OAAW,CACN,CACD,CACjB,CAAA;AACH,CAAC;AA5KD,gCA4KC"}
1
+ {"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../src/components/Clip/template/component.tsx"],"names":[],"mappings":"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"}
package/lib/components/Clip/test/fixtures.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export declare const inlineVideo: string;
2
2
  export declare const inlineVideoAutoplay: string;
3
+ export declare const clipTest: string;
package/lib/components/Clip/test/fixtures.js CHANGED
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.inlineVideoAutoplay = exports.inlineVideo = void 0;
6
+ exports.clipTest = exports.inlineVideoAutoplay = exports.inlineVideo = void 0;
7
7
  const util_1 = require("util");
8
8
  if (typeof global.TextEncoder === 'undefined') {
9
9
  global.TextEncoder = util_1.TextEncoder;
@@ -27,4 +27,9 @@ exports.inlineVideoAutoplay = (0, index_1.default)({
27
27
  loop: true,
28
28
  credits: 'Copyright Line',
29
29
  });
30
+ exports.clipTest = (0, index_1.default)({
31
+ noAudio: true,
32
+ url: '',
33
+ dataLayout: '',
34
+ });
30
35
  //# sourceMappingURL=fixtures.js.map
package/lib/components/Clip/test/fixtures.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fixtures.js","sourceRoot":"","sources":["../../../../src/components/Clip/test/fixtures.ts"],"names":[],"mappings":";;;;;;AAAA,+BAAkC;AAClC,IAAI,OAAO,MAAM,CAAC,WAAW,KAAK,WAAW,EAAE;IAC7C,MAAM,CAAC,WAAW,GAAG,kBAAW,CAAA;CACjC;AACD,8DAAoC;AAEvB,QAAA,WAAW,GAAG,IAAA,eAAI,EAAC;IAC9B,UAAU,EAAE,SAAS;IACrB,GAAG,EAAE,2FAA2F;IAChG,WAAW,EACT,8JAA8J;IAChK,MAAM,EACJ,mMAAmM;IACrM,OAAO,EAAE,+CAA+C;CACzD,CAAC,CAAA;AACW,QAAA,mBAAmB,GAAG,IAAA,eAAI,EAAC;IACtC,UAAU,EAAE,SAAS;IACrB,GAAG,EAAE,2FAA2F;IAChG,WAAW,EACT,8JAA8J;IAChK,MAAM,EACJ,mMAAmM;IACrM,OAAO,EAAE,+CAA+C;IACxD,QAAQ,EAAE,IAAI;IACd,KAAK,EAAE,IAAI;IACX,IAAI,EAAE,IAAI;IACV,OAAO,EAAE,gBAAgB;CAC1B,CAAC,CAAA"}
1
+ {"version":3,"file":"fixtures.js","sourceRoot":"","sources":["../../../../src/components/Clip/test/fixtures.ts"],"names":[],"mappings":";;;;;;AAAA,+BAAkC;AAClC,IAAI,OAAO,MAAM,CAAC,WAAW,KAAK,WAAW,EAAE;IAC7C,MAAM,CAAC,WAAW,GAAG,kBAAW,CAAA;CACjC;AACD,8DAAoC;AAEvB,QAAA,WAAW,GAAG,IAAA,eAAI,EAAC;IAC9B,UAAU,EAAE,SAAS;IACrB,GAAG,EAAE,2FAA2F;IAChG,WAAW,EACT,8JAA8J;IAChK,MAAM,EACJ,mMAAmM;IACrM,OAAO,EAAE,+CAA+C;CACzD,CAAC,CAAA;AACW,QAAA,mBAAmB,GAAG,IAAA,eAAI,EAAC;IACtC,UAAU,EAAE,SAAS;IACrB,GAAG,EAAE,2FAA2F;IAChG,WAAW,EACT,8JAA8J;IAChK,MAAM,EACJ,mMAAmM;IACrM,OAAO,EAAE,+CAA+C;IACxD,QAAQ,EAAE,IAAI;IACd,KAAK,EAAE,IAAI;IACX,IAAI,EAAE,IAAI;IACV,OAAO,EAAE,gBAAgB;CAC1B,CAAC,CAAA;AACW,QAAA,QAAQ,GAAG,IAAA,eAAI,EAAC;IAC3B,OAAO,EAAE,IAAI;IACb,GAAG,EAAE,EAAE;IACP,UAAU,EAAE,EAAE;CACf,CAAC,CAAA"}
package/lib/components/Clip/test/snapshot.spec.js CHANGED
@@ -60,6 +60,73 @@ describe('Clip Snapshot', () => {
60
60
  .toJSON();
61
61
  expect(formatString(tree)).toMatchSnapshot();
62
62
  });
63
+ it('renders multiple video sources', () => {
64
+ const videoWithMultipleSources = {
65
+ dataLayout: 'in-line',
66
+ id: '84d7e1b0-e8b2-4ffc-a798-306f29dc9d52',
67
+ url: 'https://spark-clips-staging.s3.eu-west-1.amazonaws.com/optimised-media-files/16968704765960/1080x1920.mp4',
68
+ description: ' Dolor sit amet, consectetur adipiscing elit. Sed sit amet odio quis ante auctor dapibus. Sed dapibus cursus nisi, tincidunt sagittis sapien vehicula vitae.',
69
+ clips: [
70
+ {
71
+ dataSource: [
72
+ {
73
+ binaryUrl: 'https://whatever/1080x1920.mp4',
74
+ mediaType: 'video/mp4',
75
+ },
76
+ {
77
+ binaryUrl: 'https://whatever/320x240.mp4',
78
+ mediaType: 'video/mp4',
79
+ },
80
+ {
81
+ binaryUrl: 'https://whatever/640x480.avi',
82
+ mediaType: 'video/avi',
83
+ },
84
+ ],
85
+ poster: 'https://whatever/1080x1920.jpg',
86
+ },
87
+ ],
88
+ caption: 'Aenean lobortis volutpat nunc vitae elementum',
89
+ };
90
+ const tree = react_test_renderer_1.default
91
+ .create(react_1.default.createElement(index_1.default, { ...videoWithMultipleSources }))
92
+ .toJSON();
93
+ expect(formatString(tree)).toMatchSnapshot();
94
+ });
95
+ it('in-line rendered output is the same for CAPI and cp-content-pipeline data', () => {
96
+ const inlineVideo = {
97
+ dataLayout: 'in-line',
98
+ url: 'https://spark-clips-staging.s3.eu-west-1.amazonaws.com/optimised-media-files/16968704765960/1080x1920.mp4',
99
+ description: ' Dolor sit amet, consectetur adipiscing elit. Sed sit amet odio quis ante auctor dapibus. Sed dapibus cursus nisi, tincidunt sagittis sapien vehicula vitae.',
100
+ poster: 'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F84d7e1b0-e8b2-4ffc-a798-306f29dc9d52.png?fit=scale-down&source=next&width=700',
101
+ caption: 'Aenean lobortis volutpat nunc vitae elementum',
102
+ };
103
+ const inlineVideoCPPipeline = {
104
+ dataLayout: 'in-line',
105
+ id: 'https://spark-clips-staging.s3.eu-west-1.amazonaws.com/optimised-media-files/16968704765960/1080x1920.mp4',
106
+ url: 'https://spark-clips-staging.s3.eu-west-1.amazonaws.com/optimised-media-files/16968704765960/1080x1920.mp4',
107
+ description: ' Dolor sit amet, consectetur adipiscing elit. Sed sit amet odio quis ante auctor dapibus. Sed dapibus cursus nisi, tincidunt sagittis sapien vehicula vitae.',
108
+ clips: [
109
+ {
110
+ dataSource: [
111
+ {
112
+ binaryUrl: 'https://spark-clips-staging.s3.eu-west-1.amazonaws.com/optimised-media-files/16968704765960/1080x1920.mp4',
113
+ mediaType: 'video/mp4',
114
+ },
115
+ ],
116
+ id: '22a65f5a-ead3-4a25-bf79-c6b080f00547',
117
+ poster: 'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F84d7e1b0-e8b2-4ffc-a798-306f29dc9d52.png?fit=scale-down&source=next&width=700',
118
+ },
119
+ ],
120
+ caption: 'Aenean lobortis volutpat nunc vitae elementum',
121
+ };
122
+ const capiContainer = react_test_renderer_1.default
123
+ .create(react_1.default.createElement(index_1.default, { ...inlineVideo }))
124
+ .toJSON();
125
+ const cpContainer = react_test_renderer_1.default
126
+ .create(react_1.default.createElement(index_1.default, { ...inlineVideoCPPipeline }))
127
+ .toJSON();
128
+ expect(capiContainer).toEqual(cpContainer);
129
+ });
63
130
  });
64
131
  });
65
132
  //# sourceMappingURL=snapshot.spec.js.map
package/lib/components/Clip/test/snapshot.spec.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"snapshot.spec.js","sourceRoot":"","sources":["../../../../src/components/Clip/test/snapshot.spec.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"snapshot.spec.js","sourceRoot":"","sources":["../../../../src/components/Clip/test/snapshot.spec.tsx"],"names":[],"mappings":"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"}
package/lib/components/RichText/index.js CHANGED
@@ -53,6 +53,7 @@ const componentMap = {
53
53
  'big-number': BigNumber_1.default,
54
54
  blockquote: BasicComponents_1.Blockquote,
55
55
  break: BasicComponents_1.LineBreak,
56
+ 'clip-set': Clip_1.default,
56
57
  clip: Clip_1.default,
57
58
  emphasis: BasicComponents_1.Emphasis,
58
59
  flourish: Flourish_1.default,
package/lib/components/RichText/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/RichText/index.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/RichText/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,kDAA8E;AAC9E,iEAAwC;AACxC,wDAAqD;AACrD,sCAA8C;AAC9C,6DAAoC;AACpC,qDAA4B;AAC5B,2DAAkC;AAClC,yDAAgC;AAChC,6DAAoC;AACpC,qDAA4B;AAC5B,qDAA4B;AAC5B,mDAA0B;AAC1B,6DAAoC;AAEpC,uDAa0B;AAO1B,mEAA0C;AAC1C,kDAA8C;AAC9C,sDAK0B;AAC1B,iEAA6D;AAC7D,mEAA0C;AA+B1C;;GAEG;AAEH,MAAM,YAAY,GAAuB;IACvC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ;IACnC,YAAY,EAAE,mBAAS;IACvB,UAAU,EAAE,4BAAU;IACtB,KAAK,EAAE,2BAAS;IAChB,UAAU,EAAE,cAAI;IAChB,IAAI,EAAE,cAAI;IACV,QAAQ,EAAE,0BAAQ;IAClB,QAAQ,EAAE,kBAAQ;IAClB,OAAO,EAAE,iBAAO;IAChB,WAAW,EAAE,kBAAQ;IACrB,cAAc,EAAE,kBAAQ;IACxB,aAAa,EAAE,mBAAU;IACzB,MAAM,EAAE,eAAM;IACd,IAAI,EAAE,sBAAI;IACV,WAAW,EAAE,0BAAQ;IACrB,IAAI,EAAE,sBAAI;IACV,SAAS,EAAE,mBAAS;IACpB,SAAS,EAAE,mBAAS;IACpB,WAAW,EAAE,wBAAa;IAC1B,WAAW,EAAE,qBAAW;IACxB,eAAe,EAAE,6BAAY;IAC7B,cAAc,EAAE,4BAAW;IAC3B,iBAAiB,EAAE,+BAAc;IACjC,eAAe,EAAE,2BAAY;IAC7B,iBAAiB,EAAE,+BAAc;IACjC,aAAa,EAAE,+BAAa;IAC5B,MAAM,EAAE,wBAAM;IACd,YAAY,EAAE,mBAAS;IACvB,eAAe,EAAE,8BAAY;IAC7B,YAAY,EAAE,qBAAS;IACvB,cAAc,EAAE,6BAAW;IAC3B,WAAW,EAAE,0BAAQ;IACrB,KAAK,EAAE,eAAK;IACZ,gBAAgB,EAAE,gCAAc;IAChC,KAAK,EAAE,eAAK;IACZ,KAAK,EAAE,eAAK;IACZ,eAAe,EAAE,sBAAY;CAC9B,CAAA;AAED,SAAS,YAAY,CACnB,IAAuD;IAEvD,OAAO,UAAU,IAAI,IAAI,CAAA;AAC3B,CAAC;AAED,MAAM,aAAa,GAAG,CAAC,EACrB,IAAI,EACJ,UAAU,EACV,UAAU,EACV,WAAW,GAMZ,EAAE,EAAE;IACH,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;QACxB,OAAO,8DAAG,IAAI,CAAC,KAAK,CAAI,CAAA;KACzB;IAED,MAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC,QAAQ,CAAA;IAE9D,IAAI,SAAS,EAAE;QACb,MAAM,QAAQ,GAAgB,YAAY,CAAC,IAAI,CAAC;YAC9C,CAAC,CAAC,IAAI,CAAC,QAAQ;iBACV,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACrB,8BAAC,aAAa,IACZ,IAAI,EAAE,KAAuC,EAC7C,GAAG,EAAE,KAAK,EACV,WAAW,EAAE,KAAK,EAClB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,GACtB,CACH,CAAC;iBACD,MAAM,CAAC,OAAO,CAAC;YACpB,CAAC,CAAC,EAAE,CAAA;QAEN,MAAM,SAAS,GACb,OAAO,IAAI,CAAC,IAAI,EAAE,cAAc,KAAK,QAAQ;YAC3C,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,cAAc,CAAC;YACvC,CAAC,CAAC,EAAE,CAAA;QAER,OAAO,CACL,8BAAC,SAAS,OACJ,IAAI,KACJ,SAAS,EACb,GAAG,EAAE,WAAW,EAChB,WAAW,EAAE,WAAW,IAEvB,QAAQ,CACC,CACb,CAAA;KACF;IAED,OAAO,IAAI,CAAA;AACb,CAAC,CAAA;AAED,SAAwB,QAAQ,CAAC,EAC/B,iBAAiB,EACjB,UAAU,GACI;IACd,IAAI,CAAC,iBAAiB,EAAE;QACtB,OAAO,IAAI,CAAA;KACZ;IAED,MAAM,uBAAuB,GAAG;QAC9B,GAAG,YAAY;QACf,GAAG,UAAU;KACd,CAAA;IAED,MAAM,IAAI,GAAqB,iBAAiB,CAAC,IAAI,CAAA;IAErD,OAAO,CACL,8DACG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAClC,8BAAC,aAAa,IACZ,IAAI,EAAE,IAAsC,EAC5C,WAAW,EAAE,KAAK,EAClB,GAAG,EAAE,KAAK,EACV,UAAU,EAAE,uBAAuB,EACnC,UAAU,EAAE,iBAAiB,CAAC,UAAU,IAAI,EAAE,GAC9C,CACH,CAAC,CACD,CACJ,CAAA;AACH,CAAC;AA5BD,2BA4BC"}
package/lib/components/Topper/Wrapper.js CHANGED
@@ -10,7 +10,6 @@ function Wrapper({ children, isBasic, modifiers = [], backgroundColor, }) {
10
10
  const modifierClassesString = modifierClasses.toString().replace(/,/g, ' ');
11
11
  const wrapperClassnames = (0, classnames_1.default)({
12
12
  'o-topper': true,
13
- 'o-topper--right-rail': true,
14
13
  'article-topper': true,
15
14
  [`o-topper--color-${backgroundColor}`]: Boolean(backgroundColor),
16
15
  [`${modifierClassesString}`]: Boolean(modifierClassesString),
package/lib/components/Topper/Wrapper.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Wrapper.js","sourceRoot":"","sources":["../../../src/components/Topper/Wrapper.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAwC;AACxC,4DAAmC;AAUnC,SAAwB,OAAO,CAAC,EAC9B,QAAQ,EACR,OAAO,EACP,SAAS,GAAG,EAAE,EACd,eAAe,GACF;IACb,MAAM,eAAe,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,aAAa,QAAQ,EAAE,CAAC,CAAA;IAC5E,MAAM,qBAAqB,GAAG,eAAe,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA;IAE3E,MAAM,iBAAiB,GAAG,IAAA,oBAAU,EAAC;QACnC,UAAU,EAAE,IAAI;QAChB,sBAAsB,EAAE,IAAI;QAC5B,gBAAgB,EAAE,IAAI;QACtB,CAAC,mBAAmB,eAAe,EAAE,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC;QAChE,CAAC,GAAG,qBAAqB,EAAE,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC;QAC5D,iBAAiB,EAAE,OAAO;KAC3B,CAAC,CAAA;IAEF,OAAO,uCAAK,SAAS,EAAE,iBAAiB,IAAG,QAAQ,CAAO,CAAA;AAC5D,CAAC;AAnBD,0BAmBC"}
1
+ {"version":3,"file":"Wrapper.js","sourceRoot":"","sources":["../../../src/components/Topper/Wrapper.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAwC;AACxC,4DAAmC;AAUnC,SAAwB,OAAO,CAAC,EAC9B,QAAQ,EACR,OAAO,EACP,SAAS,GAAG,EAAE,EACd,eAAe,GACF;IACb,MAAM,eAAe,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,aAAa,QAAQ,EAAE,CAAC,CAAA;IAC5E,MAAM,qBAAqB,GAAG,eAAe,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA;IAE3E,MAAM,iBAAiB,GAAG,IAAA,oBAAU,EAAC;QACnC,UAAU,EAAE,IAAI;QAChB,gBAAgB,EAAE,IAAI;QACtB,CAAC,mBAAmB,eAAe,EAAE,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC;QAChE,CAAC,GAAG,qBAAqB,EAAE,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC;QAC5D,iBAAiB,EAAE,OAAO;KAC3B,CAAC,CAAA;IAEF,OAAO,uCAAK,SAAS,EAAE,iBAAiB,IAAG,QAAQ,CAAO,CAAA;AAC5D,CAAC;AAlBD,0BAkBC"}
package/lib/index.d.ts CHANGED
@@ -3,10 +3,10 @@ export { default as ArticleInfo } from './components/ArticleInfo';
3
3
  export { default as BigNumber } from './components/BigNumber';
4
4
  export { default as Body } from './components/Body';
5
5
  export { default as Byline } from './components/Byline';
6
- export { default as Clip } from './components/Clip/template/component';
7
6
  export { default as Flourish } from './components/Flourish';
8
7
  export { default as Heading } from './components/Heading';
9
8
  export { default as ImageSet } from './components/ImageSet';
9
+ export { default as Clip } from './components/Clip/template/component';
10
10
  export { Layout, LayoutContainer, LayoutSlot } from './components/Layout';
11
11
  export { default as LiveBlogBody } from './components/LiveBlogBody';
12
12
  export { default as MainImage } from './components/MainImage';
package/lib/index.js CHANGED
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.Strikethrough = exports.Strong = exports.Emphasis = exports.HorizontalRule = exports.LineBreak = exports.Blockquote = exports.Link = exports.ListItem = exports.List = exports.YoutubeVideo = exports.Video = exports.Tweet = exports.Topper = exports.Table = exports.ScrollyBlock = exports.RichText = exports.Recommended = exports.Pullquote = exports.PodcastBody = exports.Paragraph = exports.MainImage = exports.LiveBlogBody = exports.LayoutSlot = exports.LayoutContainer = exports.Layout = exports.ImageSet = exports.Heading = exports.Flourish = exports.Clip = exports.Byline = exports.Body = exports.BigNumber = exports.ArticleInfo = exports.ArticleBody = void 0;
6
+ exports.Strikethrough = exports.Strong = exports.Emphasis = exports.HorizontalRule = exports.LineBreak = exports.Blockquote = exports.Link = exports.ListItem = exports.List = exports.YoutubeVideo = exports.Video = exports.Tweet = exports.Topper = exports.Table = exports.ScrollyBlock = exports.RichText = exports.Recommended = exports.Pullquote = exports.PodcastBody = exports.Paragraph = exports.MainImage = exports.LiveBlogBody = exports.LayoutSlot = exports.LayoutContainer = exports.Layout = exports.Clip = exports.ImageSet = exports.Heading = exports.Flourish = exports.Byline = exports.Body = exports.BigNumber = exports.ArticleInfo = exports.ArticleBody = void 0;
7
7
  var ArticleBody_1 = require("./components/ArticleBody");
8
8
  Object.defineProperty(exports, "ArticleBody", { enumerable: true, get: function () { return __importDefault(ArticleBody_1).default; } });
9
9
  var ArticleInfo_1 = require("./components/ArticleInfo");
@@ -14,14 +14,14 @@ var Body_1 = require("./components/Body");
14
14
  Object.defineProperty(exports, "Body", { enumerable: true, get: function () { return __importDefault(Body_1).default; } });
15
15
  var Byline_1 = require("./components/Byline");
16
16
  Object.defineProperty(exports, "Byline", { enumerable: true, get: function () { return __importDefault(Byline_1).default; } });
17
- var component_1 = require("./components/Clip/template/component");
18
- Object.defineProperty(exports, "Clip", { enumerable: true, get: function () { return __importDefault(component_1).default; } });
19
17
  var Flourish_1 = require("./components/Flourish");
20
18
  Object.defineProperty(exports, "Flourish", { enumerable: true, get: function () { return __importDefault(Flourish_1).default; } });
21
19
  var Heading_1 = require("./components/Heading");
22
20
  Object.defineProperty(exports, "Heading", { enumerable: true, get: function () { return __importDefault(Heading_1).default; } });
23
21
  var ImageSet_1 = require("./components/ImageSet");
24
22
  Object.defineProperty(exports, "ImageSet", { enumerable: true, get: function () { return __importDefault(ImageSet_1).default; } });
23
+ var component_1 = require("./components/Clip/template/component");
24
+ Object.defineProperty(exports, "Clip", { enumerable: true, get: function () { return __importDefault(component_1).default; } });
25
25
  var Layout_1 = require("./components/Layout");
26
26
  Object.defineProperty(exports, "Layout", { enumerable: true, get: function () { return Layout_1.Layout; } });
27
27
  Object.defineProperty(exports, "LayoutContainer", { enumerable: true, get: function () { return Layout_1.LayoutContainer; } });
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,oDAA6D;AAApD,uHAAA,OAAO,OAAa;AAC7B,0CAAmD;AAA1C,6GAAA,OAAO,OAAQ;AACxB,8CAAuD;AAA9C,iHAAA,OAAO,OAAU;AAC1B,kEAAsE;AAA7D,kHAAA,OAAO,OAAQ;AACxB,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,gDAAyD;AAAhD,mHAAA,OAAO,OAAW;AAC3B,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,8CAAyE;AAAhE,gGAAA,MAAM,OAAA;AAAE,yGAAA,eAAe,OAAA;AAAE,oGAAA,UAAU,OAAA;AAC5C,0DAAmE;AAA1D,6HAAA,OAAO,OAAgB;AAChC,oDAA6D;AAApD,uHAAA,OAAO,OAAa;AAC7B,oDAA6D;AAApD,uHAAA,OAAO,OAAa;AAC7B,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,sDAAmE;AAA1D,mHAAA,OAAO,OAAa;AAC7B,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,8DAA0D;AAAjD,8GAAA,YAAY,OAAA;AACrB,4CAAqD;AAA5C,+GAAA,OAAO,OAAS;AACzB,8CAAuD;AAA9C,iHAAA,OAAO,OAAU;AAC1B,4CAAqD;AAA5C,+GAAA,OAAO,OAAS;AACzB,4CAAqD;AAA5C,+GAAA,OAAO,OAAS;AACzB,0DAAmE;AAA1D,6HAAA,OAAO,OAAgB;AAChC,yEAU8C;AAT5C,uGAAA,IAAI,OAAA;AACJ,2GAAA,QAAQ,OAAA;AACR,uGAAA,IAAI,OAAA;AACJ,6GAAA,UAAU,OAAA;AACV,4GAAA,SAAS,OAAA;AACT,iHAAA,cAAc,OAAA;AACd,2GAAA,QAAQ,OAAA;AACR,yGAAA,MAAM,OAAA;AACN,gHAAA,aAAa,OAAA"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,oDAA6D;AAApD,uHAAA,OAAO,OAAa;AAC7B,0CAAmD;AAA1C,6GAAA,OAAO,OAAQ;AACxB,8CAAuD;AAA9C,iHAAA,OAAO,OAAU;AAC1B,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,gDAAyD;AAAhD,mHAAA,OAAO,OAAW;AAC3B,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,kEAAsE;AAA7D,kHAAA,OAAO,OAAQ;AACxB,8CAAyE;AAAhE,gGAAA,MAAM,OAAA;AAAE,yGAAA,eAAe,OAAA;AAAE,oGAAA,UAAU,OAAA;AAC5C,0DAAmE;AAA1D,6HAAA,OAAO,OAAgB;AAChC,oDAA6D;AAApD,uHAAA,OAAO,OAAa;AAC7B,oDAA6D;AAApD,uHAAA,OAAO,OAAa;AAC7B,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,sDAAmE;AAA1D,mHAAA,OAAO,OAAa;AAC7B,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,8DAA0D;AAAjD,8GAAA,YAAY,OAAA;AACrB,4CAAqD;AAA5C,+GAAA,OAAO,OAAS;AACzB,8CAAuD;AAA9C,iHAAA,OAAO,OAAU;AAC1B,4CAAqD;AAA5C,+GAAA,OAAO,OAAS;AACzB,4CAAqD;AAA5C,+GAAA,OAAO,OAAS;AACzB,0DAAmE;AAA1D,6HAAA,OAAO,OAAgB;AAChC,yEAU8C;AAT5C,uGAAA,IAAI,OAAA;AACJ,2GAAA,QAAQ,OAAA;AACR,uGAAA,IAAI,OAAA;AACJ,6GAAA,UAAU,OAAA;AACV,4GAAA,SAAS,OAAA;AACT,iHAAA,cAAc,OAAA;AACd,2GAAA,QAAQ,OAAA;AACR,yGAAA,MAAM,OAAA;AACN,gHAAA,aAAa,OAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@financial-times/cp-content-pipeline-ui",
3
- "version": "3.1.1",
3
+ "version": "3.2.0",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {
@@ -17,9 +17,9 @@
17
17
  "@babel/preset-react": "^7.22.5",
18
18
  "@dotcom-tool-kit/npm": "^3.1.4",
19
19
  "@financial-times/content-tree": "github:financial-times/content-tree#14370e3",
20
- "@financial-times/cp-content-pipeline-client": "^2.0.6",
21
- "@financial-times/cp-content-pipeline-schema": "^1.4.4",
22
- "@financial-times/cp-content-pipeline-styles": "^1.1.0",
20
+ "@financial-times/cp-content-pipeline-client": "^2.1.0",
21
+ "@financial-times/cp-content-pipeline-schema": "^1.5.0",
22
+ "@financial-times/cp-content-pipeline-styles": "^1.1.1",
23
23
  "@financial-times/n-scrollytelling-image": "^1.1.0",
24
24
  "@financial-times/o-colors": "^6.6.2",
25
25
  "@financial-times/o-expander": "^6.2.6",
package/src/components/Clip/template/component.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import React, { ReactNode } from 'react'
2
+ import type { Clip } from '@financial-times/cp-content-pipeline-client'
2
3
  const mapSizes: {
3
4
  [key: string]: number
4
5
  } = {
@@ -7,13 +8,15 @@ const mapSizes: {
7
8
  'full-grid': 1200,
8
9
  }
9
10
  export interface ClipProps {
10
- url: string
11
+ // Remove on v2
12
+ url?: string
13
+ id?: string
11
14
  autoplay?: boolean
12
15
  loop?: boolean
13
16
  credits?: string
17
+ clips?: Clip[]
14
18
  poster?: string
15
19
  posterAlt?: string
16
- posterCredits?: string
17
20
  dataLayout: string
18
21
  description?: string
19
22
  muted?: boolean
@@ -22,18 +25,43 @@ export interface ClipProps {
22
25
  }
23
26
  export default function ClipComponent({
24
27
  url,
28
+ id,
25
29
  autoplay = false,
26
30
  loop = false,
27
31
  credits = '',
32
+ clips = [],
28
33
  poster = '',
29
34
  posterAlt = '',
30
- posterCredits = '',
31
35
  dataLayout,
32
36
  description = '',
33
37
  muted = false,
34
38
  caption = '',
35
39
  noAudio = false,
36
40
  }: ClipProps) {
41
+ // We support currently a single clip, with multiple sources.
42
+ let clip = {} as Clip
43
+ // V2 has an array of clips
44
+ if (clips && clips.length > 0) {
45
+ clip = clips[0]
46
+ poster = clip.poster ?? ''
47
+ posterAlt = caption
48
+ url = clip.dataSource[0].binaryUrl
49
+ } else {
50
+ // Create a V1 compatible clip
51
+ id = url ?? ''
52
+ clip = {
53
+ type: '',
54
+ id: id ?? '',
55
+ dataSource: [
56
+ {
57
+ binaryUrl: url ?? '',
58
+ // V1 supports only mp4.
59
+ mediaType: 'video/mp4',
60
+ },
61
+ ],
62
+ }
63
+ }
64
+
37
65
  const posterAttribute = poster && !autoplay ? poster : ''
38
66
  const preload = autoplay ? '' : 'auto'
39
67
 
@@ -150,7 +178,7 @@ export default function ClipComponent({
150
178
  className="cp-clip"
151
179
  data-trackable="next-article-cp-clip"
152
180
  data-o-component="cp-clip"
153
- data-cp-clip-id={url}
181
+ data-cp-clip-id={id}
154
182
  >
155
183
  <VideoInfoBox />
156
184
  <div className="cp-clip__video-container">
@@ -168,7 +196,15 @@ export default function ClipComponent({
168
196
  preload={preload}
169
197
  tabIndex={0}
170
198
  >
171
- <source src={url}></source>
199
+ {clip.dataSource.map(({ binaryUrl, mediaType }) => {
200
+ return (
201
+ <source
202
+ src={binaryUrl}
203
+ type={mediaType !== '' ? mediaType : undefined}
204
+ key={binaryUrl}
205
+ ></source>
206
+ )
207
+ })}
172
208
  </video>
173
209
  <img
174
210
  className="cp-clip__fallback o-normalise-visually-hidden"
package/src/components/Clip/test/__snapshots__/snapshot.spec.tsx.snap CHANGED
@@ -39,7 +39,7 @@ exports[`Clip Snapshot component rendered on server full-grid default render 1`]
39
39
  preload=\\"auto\\"
40
40
  tabindex=\\"0\\"
41
41
  >
42
- <source src=\\"localhost:8080/fakevideo.mpg\\" /></video
42
+ <source src=\\"localhost:8080/fakevideo.mpg\\" type=\\"video/mp4\\" /></video
43
43
  ><img
44
44
  class=\\"cp-clip__fallback o-normalise-visually-hidden\\"
45
45
  src=\\"\\"
@@ -94,7 +94,7 @@ exports[`Clip Snapshot component rendered on server full-grid render with attrib
94
94
  preload=\\"\\"
95
95
  tabindex=\\"0\\"
96
96
  >
97
- <source src=\\"localhost:8080/fakevideo.mpg\\" /></video
97
+ <source src=\\"localhost:8080/fakevideo.mpg\\" type=\\"video/mp4\\" /></video
98
98
  ><img
99
99
  class=\\"cp-clip__fallback o-normalise-visually-hidden\\"
100
100
  src=\\"localhost:8080/fakeposter.jpg?fit=scale-down&amp;source=next&amp;width=1200\\"
@@ -171,7 +171,7 @@ exports[`Clip Snapshot component rendered on server in-line render 1`] = `
171
171
  preload=\\"auto\\"
172
172
  tabindex=\\"0\\"
173
173
  >
174
- <source src=\\"localhost:8080/fakevideo.mpg\\" /></video
174
+ <source src=\\"localhost:8080/fakevideo.mpg\\" type=\\"video/mp4\\" /></video
175
175
  ><img
176
176
  class=\\"cp-clip__fallback o-normalise-visually-hidden\\"
177
177
  src=\\"\\"
@@ -224,7 +224,7 @@ exports[`Clip Snapshot component rendered on server in-line render with attribut
224
224
  preload=\\"\\"
225
225
  tabindex=\\"0\\"
226
226
  >
227
- <source src=\\"localhost:8080/fakevideo.mpg\\" /></video
227
+ <source src=\\"localhost:8080/fakevideo.mpg\\" type=\\"video/mp4\\" /></video
228
228
  ><img
229
229
  class=\\"cp-clip__fallback o-normalise-visually-hidden\\"
230
230
  src=\\"localhost:8080/fakeposter.jpg?fit=scale-down&amp;source=next&amp;width=700\\"
@@ -305,7 +305,10 @@ exports[`Clip Snapshot component rendered on server mid-grid default render 1`]
305
305
  preload=\\"auto\\"
306
306
  tabindex=\\"0\\"
307
307
  >
308
- <source src=\\"localhost:8080/fakevideo.mpg\\" /></video
308
+ <source
309
+ src=\\"localhost:8080/fakevideo.mpg\\"
310
+ type=\\"video/mp4\\"
311
+ /></video
309
312
  ><img
310
313
  class=\\"cp-clip__fallback o-normalise-visually-hidden\\"
311
314
  src=\\"\\"
@@ -365,7 +368,10 @@ exports[`Clip Snapshot component rendered on server mid-grid render with attribu
365
368
  preload=\\"\\"
366
369
  tabindex=\\"0\\"
367
370
  >
368
- <source src=\\"localhost:8080/fakevideo.mpg\\" /></video
371
+ <source
372
+ src=\\"localhost:8080/fakevideo.mpg\\"
373
+ type=\\"video/mp4\\"
374
+ /></video
369
375
  ><img
370
376
  class=\\"cp-clip__fallback o-normalise-visually-hidden\\"
371
377
  src=\\"localhost:8080/fakeposter.jpg?fit=scale-down&amp;source=next&amp;width=900\\"
@@ -407,3 +413,81 @@ exports[`Clip Snapshot component rendered on server mid-grid render with attribu
407
413
  </div>
408
414
  "
409
415
  `;
416
+
417
+ exports[`Clip Snapshot component rendered on server renders multiple video sources 1`] = `
418
+ "<div class=\\"n-content-layout__container--in-line\\">
419
+ <div
420
+ data-cp-clip-layout=\\"in-line\\"
421
+ data-cp-clip-poster=\\"https://whatever/1080x1920.jpg\\"
422
+ data-cp-clip-autoplay=\\"false\\"
423
+ data-cp-clip-no-audio=\\"false\\"
424
+ data-cp-clip-loop=\\"false\\"
425
+ class=\\"cp-clip\\"
426
+ data-trackable=\\"next-article-cp-clip\\"
427
+ data-o-component=\\"cp-clip\\"
428
+ data-cp-clip-id=\\"84d7e1b0-e8b2-4ffc-a798-306f29dc9d52\\"
429
+ >
430
+ <div
431
+ data-o-component=\\"o-expander\\"
432
+ class=\\"o-expander o-expander__info-box\\"
433
+ data-o-expander-shrink-to=\\"hidden\\"
434
+ data-trackable=\\"clip-info-box\\"
435
+ data-o-expander-collapsed-toggle-text=\\" \\"
436
+ data-o-expander-expanded-toggle-text=\\" \\"
437
+ >
438
+ <button data-trackable=\\"toggle-open-close\\" class=\\"o-expander__toggle\\">
439
+ <span>Expand</span>
440
+ </button>
441
+ <div class=\\"o-expander__content video-info\\"></div>
442
+ </div>
443
+ <div class=\\"cp-clip__video-container\\">
444
+ <video
445
+ class=\\"cp-clip__video\\"
446
+ controls=\\"\\"
447
+ controlsList=\\"nodownload noremoteplayback noplaybackrate\\"
448
+ disablepictureinpicture=\\"\\"
449
+ disableremoteplayback=\\"\\"
450
+ playsinline=\\"\\"
451
+ poster=\\"https://whatever/1080x1920.jpg\\"
452
+ preload=\\"auto\\"
453
+ tabindex=\\"0\\"
454
+ >
455
+ <source src=\\"https://whatever/1080x1920.mp4\\" type=\\"video/mp4\\" />
456
+ <source src=\\"https://whatever/320x240.mp4\\" type=\\"video/mp4\\" />
457
+ <source src=\\"https://whatever/640x480.avi\\" type=\\"video/avi\\" /></video
458
+ ><img
459
+ class=\\"cp-clip__fallback o-normalise-visually-hidden\\"
460
+ src=\\"https://whatever/1080x1920.jpg?fit=scale-down&amp;source=next&amp;width=700\\"
461
+ alt=\\"Aenean lobortis volutpat nunc vitae elementum\\"
462
+ data-cp-clip-fallback=\\"true\\"
463
+ />
464
+ </div>
465
+ <div class=\\"video-meta-info\\" data-cp-clip-video-meta-info=\\"true\\">
466
+ <div data-cp-clip-caption=\\"true\\" class=\\"cp-clip__caption\\">
467
+ Aenean lobortis volutpat nunc vitae elementum
468
+ </div>
469
+ <div
470
+ data-o-component=\\"o-expander\\"
471
+ class=\\"o-expander o-expander__description-box\\"
472
+ data-o-expander-shrink-to=\\"hidden\\"
473
+ data-trackable=\\"description-box\\"
474
+ data-o-expander-collapsed-toggle-text=\\" \\"
475
+ data-o-expander-expanded-toggle-text=\\" \\"
476
+ >
477
+ <button data-trackable=\\"toggle-open-close\\" class=\\"o-expander__toggle\\">
478
+ <span>Expand</span>
479
+ </button>
480
+ <div class=\\"o-expander__content video-description\\">
481
+ <h4 class=\\"video-description__title\\">Video description</h4>
482
+ <p class=\\"video-description__text\\">
483
+ Dolor sit amet, consectetur adipiscing elit. Sed sit amet odio quis
484
+ ante auctor dapibus. Sed dapibus cursus nisi, tincidunt sagittis
485
+ sapien vehicula vitae.
486
+ </p>
487
+ </div>
488
+ </div>
489
+ </div>
490
+ </div>
491
+ </div>
492
+ "
493
+ `;
package/src/components/Clip/test/fixtures.ts CHANGED
@@ -26,3 +26,8 @@ export const inlineVideoAutoplay = Clip({
26
26
  loop: true,
27
27
  credits: 'Copyright Line',
28
28
  })
29
+ export const clipTest = Clip({
30
+ noAudio: true,
31
+ url: '',
32
+ dataLayout: '',
33
+ })