@financial-times/cp-content-pipeline-ui 9.10.0 → 9.12.0

package/CHANGELOG.md

@@ -574,6 +574,41 @@
     * @financial-times/cp-content-pipeline-client bumped from ^3.7.2 to ^3.7.3
     * @financial-times/cp-content-pipeline-schema bumped from ^2.10.1 to ^2.10.2
 
+## [9.12.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v9.11.0...cp-content-pipeline-ui-v9.12.0) (2025-11-21)
+
+
+### Features
+
+* anchor links in clips ([f753082](https://github.com/Financial-Times/cp-content-pipeline/commit/f753082b61b1e5aa989cd1db901546eeee71fe83))
+
+
+### Bug Fixes
+
+* avoid fetching teaser data from RecommendedList resolver ([54bc53f](https://github.com/Financial-Times/cp-content-pipeline/commit/54bc53f9a40446667a9f93b85d710cd6a943157d))
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * devDependencies
+    * @financial-times/cp-content-pipeline-client bumped from ^4.20.0 to ^4.20.1
+    * @financial-times/cp-content-pipeline-schema bumped from ^3.19.0 to ^3.20.0
+
+## [9.11.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v9.10.0...cp-content-pipeline-ui-v9.11.0) (2025-11-11)
+
+
+### Features
+
+* ci-3111 media queries on clips sources ([856bd45](https://github.com/Financial-Times/cp-content-pipeline/commit/856bd457ba6dc56f292c6a31e0edfe3f29b4a904))
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * devDependencies
+    * @financial-times/cp-content-pipeline-client bumped from ^4.19.0 to ^4.20.0
+    * @financial-times/cp-content-pipeline-schema bumped from ^3.18.0 to ^3.19.0
+
 ## [9.10.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v9.9.0...cp-content-pipeline-ui-v9.10.0) (2025-11-06)
 
 

package/lib/components/content-tree/Clip/components/ClipTag.d.ts

@@ -13,6 +13,7 @@ interface ClipTagProps {
     noDescription?: boolean;
     noInfoBox?: boolean;
     noCaption?: boolean;
+    maxClipWidth?: number;
     noClosedCaption?: boolean;
     accessibility?: ComponentWorkarounds.ClipAccessibility;
     muted?: boolean;
@@ -20,6 +21,7 @@ interface ClipTagProps {
     caption?: string;
     preload?: string;
     systemTitle?: string;
+    fragmentIdentifier?: string;
 }
 export declare const ClipTag: React.FC<ClipTagProps>;
 export {};

package/lib/components/content-tree/Clip/components/ClipTag.js

@@ -7,16 +7,45 @@ exports.ClipTag = void 0;
 const react_1 = __importDefault(require("react"));
 const index_1 = require("./index");
 const FixedAspectRatio_1 = require("../../../FixedAspectRatio/FixedAspectRatio");
-const ClipTag = ({ id, dataLayout, description, poster, autoplay, noAudio, loop, muted, clip, credits, caption, accessibility, preload, noDescription = false, noInfoBox = false, noCaption = false, dataTrackable, systemTitle, }) => {
+const ClipTag = ({ id, dataLayout, description, poster, autoplay, noAudio, loop, muted, clip, credits, caption, accessibility, preload, noDescription = false, noInfoBox = false, noCaption = false, maxClipWidth = 0, dataTrackable, systemTitle, fragmentIdentifier, }) => {
     const { pixelWidth, pixelHeight } = clip?.dataSource?.[0]
         ? clip.dataSource[0]
         : { pixelWidth: 0, pixelHeight: 0 };
-    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-no-description": noDescription, "data-cp-clip-caption": caption, "data-cp-clip-no-info-box": noInfoBox, "data-cp-clip-no-caption": noCaption, "data-cp-clip-closed-caption": Boolean(accessibility?.captions?.[0]?.url), "data-cp-clip-loop": loop, className: "cp-clip", "data-trackable": dataTrackable, "data-o-component": "cp-clip", "data-cp-clip-id": id, "data-cp-clip-system-title": systemTitle },
+    const mediaQuery = ({ dppx, previousSourceWidth, }) => {
+        const mqOptions = [];
+        if (dppx && dppx > 1) {
+            mqOptions.push(`(min-resolution: ${dppx}dppx)`);
+        }
+        if (previousSourceWidth) {
+            mqOptions.push(`(min-width: ${previousSourceWidth}px)`);
+        }
+        if (mqOptions.length > 0) {
+            return mqOptions.join(' and ');
+        }
+    };
+    // get the index of the last source that is a video
+    const getLastVideoIndex = () => {
+        for (let i = clip?.dataSource.length - 1; i >= 0; i--) {
+            if (clip?.dataSource[i]?.mediaType.startsWith('video/')) {
+                return i;
+            }
+        }
+        return 0;
+    };
+    const lastVideoIndex = getLastVideoIndex();
+    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-no-description": noDescription, "data-cp-clip-caption": caption, "data-cp-clip-no-info-box": noInfoBox, "data-cp-clip-no-caption": noCaption, "data-cp-clip-closed-caption": Boolean(accessibility?.captions?.[0]?.url), "data-cp-clip-loop": loop, className: "cp-clip", "data-trackable": dataTrackable, "data-o-component": "cp-clip", "data-cp-clip-id": id, "data-cp-clip-system-title": systemTitle, id: fragmentIdentifier },
         !noInfoBox && react_1.default.createElement(index_1.VideoInfoBox, null),
         react_1.default.createElement("div", { className: "cp-clip__video-container" },
             react_1.default.createElement(FixedAspectRatio_1.FixedAspectRatio, { width: pixelWidth, height: pixelHeight, element: "video", className: "cp-clip__video", controls: true, controlsList: "nodownload noremoteplayback noplaybackrate", disablePictureInPicture: true, disableRemotePlayback: true, playsInline: true, muted: muted, loop: loop, poster: poster, preload: preload, id: `clip-${id}`, crossOrigin: "anonymous" },
-                clip?.dataSource?.map(({ binaryUrl, mediaType }, index) => {
-                    return (react_1.default.createElement("source", { id: `video-source-${index}-${id}`, "data-cp-component": "cp-clip__video-source", src: binaryUrl, type: mediaType !== '' ? mediaType : undefined, key: binaryUrl }));
+                clip?.dataSource?.map(({ binaryUrl, mediaType, dppx, previousSourceWidth }, index) => {
+                    // allow user to set a max width for clip sources to avoid loading very large videos on places like the homepage
+                    if (maxClipWidth &&
+                        previousSourceWidth &&
+                        previousSourceWidth > maxClipWidth &&
+                        index < lastVideoIndex) {
+                        return null;
+                    }
+                    return (react_1.default.createElement("source", { id: `video-source-${index}-${id}`, "data-cp-component": "cp-clip__video-source", src: binaryUrl, type: mediaType !== '' ? mediaType : undefined, key: binaryUrl, media: mediaQuery({ dppx, previousSourceWidth }) }));
                 }),
                 react_1.default.createElement(index_1.ClosedCaptions, { accessibility: accessibility }))),
         (!noDescription || !noCaption) && (react_1.default.createElement("div", { className: "cp-clip__video-meta-info", "data-cp-clip-video-meta-info": true },

package/lib/components/content-tree/Clip/components/ClipTag.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClipTag.js","sourceRoot":"","sources":["../../../../../src/components/content-tree/Clip/components/ClipTag.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAyB;AACzB,mCAKgB;AAChB,iFAA6E;AAyBtE,MAAM,OAAO,GAA2B,CAAC,EAC9C,EAAE,EACF,UAAU,EACV,WAAW,EACX,MAAM,EACN,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,OAAO,EACP,OAAO,EACP,aAAa,EACb,OAAO,EACP,aAAa,GAAG,KAAK,EACrB,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,KAAK,EACjB,aAAa,EACb,WAAW,GACZ,EAAE,EAAE;IACH,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;QACvD,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;QACpB,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,CAAA;IAErC,OAAO,CACL,8DACuB,UAAU,yBACV,MAAM,2BACJ,QAAQ,2BACR,OAAO,iCACD,aAAa,0BACpB,OAAO,8BACH,SAAS,6BACV,SAAS,iCACL,OAAO,CAAC,aAAa,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,uBACpD,IAAI,EACvB,SAAS,EAAC,SAAS,oBACH,aAAa,sBACZ,SAAS,qBACT,EAAE,+BACQ,WAAW;QAErC,CAAC,SAAS,IAAI,8BAAC,oBAAY,OAAG;QAC/B,uCAAK,SAAS,EAAC,0BAA0B;YAEvC,8BAAC,mCAAgB,IACf,KAAK,EAAE,UAAoB,EAC3B,MAAM,EAAE,WAAqB,EAC7B,OAAO,EAAC,OAAO,EACf,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,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,QAAQ,EAAE,EAAE,EAChB,WAAW,EAAC,WAAW;gBAEtB,IAAI,EAAE,UAAU,EAAE,GAAG,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE;oBACzD,OAAO,CACL,0CACE,EAAE,EAAE,gBAAgB,KAAK,IAAI,EAAE,EAAE,uBACf,uBAAuB,EACzC,GAAG,EAAE,SAAS,EACd,IAAI,EAAE,SAAS,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAC9C,GAAG,EAAE,SAAS,GACN,CACX,CAAA;gBACH,CAAC,CAAC;gBACF,8BAAC,sBAAc,IAAC,aAAa,EAAE,aAAa,GAAI,CAC/B,CACf;QACL,CAAC,CAAC,aAAa,IAAI,CAAC,SAAS,CAAC,IAAI,CACjC,uCAAK,SAAS,EAAC,0BAA0B;YACtC,CAAC,aAAa,IAAI,CACjB,8BAAC,wBAAgB,IACf,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,GAC5B,CACH;YACA,CAAC,SAAS,IAAI,8BAAC,eAAO,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAI,CAC1D,CACP,CACG,CACP,CAAA;AACH,CAAC,CAAA;AAzFY,QAAA,OAAO,WAyFnB"}
+{"version":3,"file":"ClipTag.js","sourceRoot":"","sources":["../../../../../src/components/content-tree/Clip/components/ClipTag.tsx"],"names":[],"mappings":"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"}

package/lib/components/content-tree/Clip/template/component.d.ts

@@ -5,6 +5,7 @@ type Preset = 'full-player' | 'thumbnail';
 export interface ClipProps extends ContentProps<ComponentWorkarounds.ClipSet> {
     preload?: string;
     preset?: Preset;
+    maxClipWidth?: number;
 }
 export interface ClipPropsOld {
     url?: string;

package/lib/components/content-tree/Clip/template/component.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const components_1 = require("../components");
-const ClipComponent = ({ content, preset = 'full-player', preload = 'auto', }) => {
+const ClipComponent = ({ content, preset = 'full-player', preload = 'auto', maxClipWidth = 0, }) => {
     let poster = 'poster' in content ? content.poster : '';
     let id;
     // We support currently a single clip, with multiple sources.
@@ -36,11 +36,11 @@ const ClipComponent = ({ content, preset = 'full-player', preload = 'auto', }) =
     const accessibility = content.accessibility ?? {};
     const systemTitle = content.systemTitle ?? '';
     if (preset === 'thumbnail') {
-        return (react_1.default.createElement(components_1.ClipTag, { id: id, clip: clip, poster: poster, accessibility: accessibility, autoplay: content.autoplay, loop: content.loop, noAudio: noAudio, muted: content.muted, preload: preload, noCaption: true, noDescription: true, noInfoBox: true, systemTitle: systemTitle }));
+        return (react_1.default.createElement(components_1.ClipTag, { id: id, clip: clip, poster: poster, accessibility: accessibility, autoplay: content.autoplay, loop: content.loop, noAudio: noAudio, muted: content.muted, preload: preload, noCaption: true, noDescription: true, noInfoBox: true, systemTitle: systemTitle, maxClipWidth: maxClipWidth }));
     }
     return (react_1.default.createElement(components_1.ContentLayout, { dataLayout: content.dataLayout },
         react_1.default.createElement(components_1.Container, { dataLayout: content.dataLayout },
-            react_1.default.createElement(components_1.ClipTag, { id: id, dataLayout: content.dataLayout, description: content.description ?? '', poster: posterAttribute, autoplay: content.autoplay, noAudio: noAudio, loop: content.loop, muted: content.muted, clip: clip, credits: content.credits ?? '', caption: content.caption ?? '', systemTitle: systemTitle, accessibility: accessibility, preload: preload, dataTrackable: "next-article-cp-clip" }))));
+            react_1.default.createElement(components_1.ClipTag, { id: id, dataLayout: content.dataLayout, description: content.description ?? '', poster: posterAttribute, autoplay: content.autoplay, noAudio: noAudio, loop: content.loop, muted: content.muted, clip: clip, credits: content.credits ?? '', caption: content.caption ?? '', systemTitle: systemTitle, accessibility: accessibility, preload: preload, dataTrackable: "next-article-cp-clip", maxClipWidth: maxClipWidth, fragmentIdentifier: content.fragmentIdentifier ?? '' }))));
 };
 exports.default = ClipComponent;
 //# sourceMappingURL=component.js.map

package/lib/components/content-tree/Clip/template/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../../src/components/content-tree/Clip/template/component.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,8CAAiE;AA+BjE,MAAM,aAAa,GAAwB,CAAC,EAC1C,OAAO,EACP,MAAM,GAAG,aAAa,EACtB,OAAO,GAAG,MAAM,GACjB,EAAE,EAAE;IACH,IAAI,MAAM,GAAG,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAA;IACtD,IAAI,EAAU,CAAA;IACd,6DAA6D;IAC7D,IAAI,IAA+B,CAAA;IACnC,2BAA2B;IAC3B,IAAI,OAAO,CAAC,KAAK,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;QACtC,IAAI,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;QACvB,EAAE,GAAG,IAAI,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAA;QACtC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,MAAM,GAAG,IAAI,CAAC,MAAM,CAAA;QACtB,CAAC;IACH,CAAC;SAAM,CAAC;QACN,8BAA8B;QAC9B,EAAE,GAAG,KAAK,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAA;QACxC,IAAI,GAAG;YACL,UAAU,EAAE;gBACV;oBACE,SAAS,EAAE,EAAE,IAAI,EAAE;oBACnB,wBAAwB;oBACxB,SAAS,EAAE,WAAW;iBACvB;aACF;SACF,CAAA;IACH,CAAC;IAED,MAAM,eAAe,GACnB,IAAI,EAAE,UAAU,EAAE,MAAM,IAAI,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAA;IAC5D,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,IAAI,KAAK,CAAA;IACxC,MAAM,aAAa,GAAG,OAAO,CAAC,aAAa,IAAI,EAAE,CAAA;IACjD,MAAM,WAAW,GAAG,OAAO,CAAC,WAAW,IAAI,EAAE,CAAA;IAE7C,IAAI,MAAM,KAAK,WAAW,EAAE,CAAC;QAC3B,OAAO,CACL,8BAAC,oBAAO,IACN,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,OAAO,CAAC,KAAK,EACpB,OAAO,EAAE,OAAO,EAChB,SAAS,QACT,aAAa,QACb,SAAS,QACT,WAAW,EAAE,WAAW,GACxB,CACH,CAAA;IACH,CAAC;IAED,OAAO,CACL,8BAAC,0BAAa,IAAC,UAAU,EAAE,OAAO,CAAC,UAAU;QAC3C,8BAAC,sBAAS,IAAC,UAAU,EAAE,OAAO,CAAC,UAAU;YACvC,8BAAC,oBAAO,IACN,EAAE,EAAE,EAAE,EACN,UAAU,EAAE,OAAO,CAAC,UAAU,EAC9B,WAAW,EAAE,OAAO,CAAC,WAAW,IAAI,EAAE,EACtC,MAAM,EAAE,eAAe,EACvB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,KAAK,EAAE,OAAO,CAAC,KAAK,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,CAAC,OAAO,IAAI,EAAE,EAC9B,OAAO,EAAE,OAAO,CAAC,OAAO,IAAI,EAAE,EAC9B,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,EAChB,aAAa,EAAC,sBAAsB,GACpC,CACQ,CACE,CACjB,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,aAAa,CAAA"}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../../src/components/content-tree/Clip/template/component.tsx"],"names":[],"mappings":"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"}

package/lib/components/content-tree/RecommendedList/index.js

@@ -6,18 +6,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 //HACK: worked around missing Teaser type by declaring a module x-teaser.d.ts
 const x_teaser_1 = require("@financial-times/x-teaser");
-const RecommendedList = ({ content: { heading, teasers }, }) => {
-    if (!teasers || teasers.length === 0) {
+const RecommendedList = ({ content }) => {
+    const { heading, children } = content;
+    if (!children || children.length === 0) {
         return null;
     }
     return (react_1.default.createElement("aside", { "aria-labelledby": "aside-label", className: "n-content-recommended-list", "data-component": "recommended-list" },
         react_1.default.createElement("p", { className: "n-content-recommended-list__title o3-type-title-lg" }, heading),
-        react_1.default.createElement("div", { className: "n-content-recommended-list__teasers" }, teasers.map((teaser, index) => (react_1.default.createElement(x_teaser_1.Teaser, { key: teaser?.id || index, modifiers: ['stacked'], ...x_teaser_1.presets.SmallHeavy, ...teaser, metaPrefixText: 'By', metaLink: {
-                prefLabel: teaser?.clientName,
+        react_1.default.createElement("div", { className: "n-content-recommended-list__teasers" }, children.map((child, index) => (react_1.default.createElement(x_teaser_1.Teaser, { key: child?.id || index, modifiers: ['stacked'], ...x_teaser_1.presets.SmallHeavy, ...child.teaser, metaPrefixText: 'By', metaLink: {
+                prefLabel: child.teaser?.clientName,
                 // clientName is a free form text field. Currently, there is no way to map it to an organisation
                 // from the annotations. For now, we're linking it to the article url.
                 // A property like isSponsoredBy could be added in future to support this properly.
-                url: teaser?.url,
+                url: child.teaser?.url,
             } }))))));
 };
 exports.default = RecommendedList;

package/lib/components/content-tree/RecommendedList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/content-tree/RecommendedList/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAEzB,6EAA6E;AAC7E,wDAA2D;AAW3D,MAAM,eAAe,GAAmC,CAAC,EACvD,OAAO,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,GAC9B,EAAE,EAAE;IACH,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACrC,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,4DACkB,aAAa,EAC7B,SAAS,EAAC,4BAA4B,oBACvB,kBAAkB;QAEjC,qCAAG,SAAS,EAAC,oDAAoD,IAC9D,OAAO,CACN;QACJ,uCAAK,SAAS,EAAC,qCAAqC,IACjD,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,8BAAC,iBAAM,IACL,GAAG,EAAE,MAAM,EAAE,EAAE,IAAI,KAAK,EACxB,SAAS,EAAE,CAAC,SAAS,CAAC,KAClB,kBAAO,CAAC,UAAU,KAClB,MAAM,EACV,cAAc,EAAE,IAAI,EACpB,QAAQ,EAAE;gBACR,SAAS,EAAE,MAAM,EAAE,UAAU;gBAC7B,gGAAgG;gBAChG,sEAAsE;gBACtE,mFAAmF;gBACnF,GAAG,EAAE,MAAM,EAAE,GAAG;aACjB,GACD,CACH,CAAC,CACE,CACA,CACT,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,eAAe,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/content-tree/RecommendedList/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAEzB,6EAA6E;AAC7E,wDAA2D;AAW3D,MAAM,eAAe,GAAmC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IACtE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAA;IACrC,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvC,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,4DACkB,aAAa,EAC7B,SAAS,EAAC,4BAA4B,oBACvB,kBAAkB;QAEjC,qCAAG,SAAS,EAAC,oDAAoD,IAC9D,OAAO,CACN;QACJ,uCAAK,SAAS,EAAC,qCAAqC,IACjD,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,8BAAC,iBAAM,IACL,GAAG,EAAE,KAAK,EAAE,EAAE,IAAI,KAAK,EACvB,SAAS,EAAE,CAAC,SAAS,CAAC,KAClB,kBAAO,CAAC,UAAU,KAClB,KAAK,CAAC,MAAM,EAChB,cAAc,EAAE,IAAI,EACpB,QAAQ,EAAE;gBACR,SAAS,EAAE,KAAK,CAAC,MAAM,EAAE,UAAU;gBACnC,gGAAgG;gBAChG,sEAAsE;gBACtE,mFAAmF;gBACnF,GAAG,EAAE,KAAK,CAAC,MAAM,EAAE,GAAG;aACvB,GACD,CACH,CAAC,CACE,CACA,CACT,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,eAAe,CAAA"}

package/lib/components/content-tree/Workarounds.d.ts

@@ -50,6 +50,9 @@ interface ClipSource {
     pixelHeight?: number;
     pixelWidth?: number;
     videoCodec?: string;
+    quality?: string;
+    dppx?: number;
+    previousSourceWidth?: number;
 }
 export type Clip = PartialToMaybeDeep<ReadonlyArrays<{
     format?: ClipFormat;
@@ -80,6 +83,7 @@ interface ClipSetReferences {
     subtitle?: string;
     publishedDate?: string;
     clips?: Clip[];
+    fragmentIdentifier?: string | undefined;
 }
 export type ClipSet = PartialToMaybeDeep<ReadonlyArrays<(ContentTreeWorkarounds.OldClip | ContentTreeWorkarounds.ClipSet) & ClipSetReferences>>;
 export type RawImage = ContentTreeWorkarounds.RawImage & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/cp-content-pipeline-ui",
-  "version": "9.10.0",
+  "version": "9.12.0",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -16,8 +16,8 @@
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
     "@financial-times/content-tree": "github:financial-times/content-tree#3f77ec4",
-    "@financial-times/cp-content-pipeline-client": "^4.19.0",
-    "@financial-times/cp-content-pipeline-schema": "^3.18.0",
+    "@financial-times/cp-content-pipeline-client": "^4.20.1",
+    "@financial-times/cp-content-pipeline-schema": "^3.20.0",
     "@financial-times/cp-content-pipeline-styles": "^4.5.0",
     "@financial-times/n-scrollytelling-image": "^1.1.0",
     "@financial-times/o-grid": "^6.1.8",

package/src/components/content-tree/Clip/components/ClipTag.tsx

@@ -21,6 +21,7 @@ interface ClipTagProps {
   noDescription?: boolean
   noInfoBox?: boolean
   noCaption?: boolean
+  maxClipWidth?: number
   noClosedCaption?: boolean
   accessibility?: ComponentWorkarounds.ClipAccessibility
   muted?: boolean
@@ -28,6 +29,7 @@ interface ClipTagProps {
   caption?: string
   preload?: string
   systemTitle?: string
+  fragmentIdentifier?: string //a unique identifier used to locate the component inside a page for features like scrolling to it
 }
 
 export const ClipTag: React.FC<ClipTagProps> = ({
@@ -47,13 +49,46 @@ export const ClipTag: React.FC<ClipTagProps> = ({
   noDescription = false,
   noInfoBox = false,
   noCaption = false,
+  maxClipWidth = 0,
   dataTrackable,
   systemTitle,
+  fragmentIdentifier,
 }) => {
   const { pixelWidth, pixelHeight } = clip?.dataSource?.[0]
     ? clip.dataSource[0]
     : { pixelWidth: 0, pixelHeight: 0 }
 
+  const mediaQuery = ({
+    dppx,
+    previousSourceWidth,
+  }: {
+    dppx: number | null | undefined
+    previousSourceWidth: number | null | undefined
+  }) => {
+    const mqOptions = []
+    if (dppx && dppx > 1) {
+      mqOptions.push(`(min-resolution: ${dppx}dppx)`)
+    }
+    if (previousSourceWidth) {
+      mqOptions.push(`(min-width: ${previousSourceWidth}px)`)
+    }
+    if (mqOptions.length > 0) {
+      return mqOptions.join(' and ')
+    }
+  }
+
+  // get the index of the last source that is a video
+  const getLastVideoIndex = (): number => {
+    for (let i = clip?.dataSource.length - 1; i >= 0; i--) {
+      if (clip?.dataSource[i]?.mediaType.startsWith('video/')) {
+        return i
+      }
+    }
+    return 0
+  }
+
+  const lastVideoIndex: number = getLastVideoIndex()
+
   return (
     <div
       data-cp-clip-layout={dataLayout}
@@ -71,6 +106,7 @@ export const ClipTag: React.FC<ClipTagProps> = ({
       data-o-component="cp-clip"
       data-cp-clip-id={id}
       data-cp-clip-system-title={systemTitle}
+      id={fragmentIdentifier}
     >
       {!noInfoBox && <VideoInfoBox />}
       <div className="cp-clip__video-container">
@@ -92,17 +128,31 @@ export const ClipTag: React.FC<ClipTagProps> = ({
           id={`clip-${id}`}
           crossOrigin="anonymous"
         >
-          {clip?.dataSource?.map(({ binaryUrl, mediaType }, index) => {
-            return (
-              <source
-                id={`video-source-${index}-${id}`}
-                data-cp-component="cp-clip__video-source"
-                src={binaryUrl}
-                type={mediaType !== '' ? mediaType : undefined}
-                key={binaryUrl}
-              ></source>
-            )
-          })}
+          {clip?.dataSource?.map(
+            ({ binaryUrl, mediaType, dppx, previousSourceWidth }, index) => {
+              // allow user to set a max width for clip sources to avoid loading very large videos on places like the homepage
+              if (
+                maxClipWidth &&
+                previousSourceWidth &&
+                previousSourceWidth > maxClipWidth &&
+                index < lastVideoIndex
+              ) {
+                return null
+              }
+
+              return (
+                <source
+                  id={`video-source-${index}-${id}`}
+                  data-cp-component="cp-clip__video-source"
+                  src={binaryUrl}
+                  type={mediaType !== '' ? mediaType : undefined}
+                  key={binaryUrl}
+                  media={mediaQuery({ dppx, previousSourceWidth })}
+                ></source>
+              )
+            }
+          )}
+
           <ClosedCaptions accessibility={accessibility} />
         </FixedAspectRatio>
       </div>

package/src/components/content-tree/Clip/template/component.tsx

@@ -8,6 +8,7 @@ type Preset = 'full-player' | 'thumbnail'
 export interface ClipProps extends ContentProps<ComponentWorkarounds.ClipSet> {
   preload?: string
   preset?: Preset
+  maxClipWidth?: number
 }
 
 export interface ClipPropsOld {
@@ -34,6 +35,7 @@ const ClipComponent: React.FC<ClipProps> = ({
   content,
   preset = 'full-player',
   preload = 'auto',
+  maxClipWidth = 0,
 }) => {
   let poster = 'poster' in content ? content.poster : ''
   let id: string
@@ -82,6 +84,7 @@ const ClipComponent: React.FC<ClipProps> = ({
         noDescription
         noInfoBox
         systemTitle={systemTitle}
+        maxClipWidth={maxClipWidth}
       />
     )
   }
@@ -105,6 +108,8 @@ const ClipComponent: React.FC<ClipProps> = ({
           accessibility={accessibility}
           preload={preload}
           dataTrackable="next-article-cp-clip"
+          maxClipWidth={maxClipWidth}
+          fragmentIdentifier={content.fragmentIdentifier ?? ''}
         />
       </Container>
     </ContentLayout>

package/src/components/content-tree/Clip/test/__snapshots__/snapshot.spec.tsx.snap

@@ -17,6 +17,7 @@ exports[`Clip Snapshot component rendered on server full-grid default render 1`]
       data-o-component="cp-clip"
       data-cp-clip-id="localhost:8080/fakevideo.mpg"
       data-cp-clip-system-title=""
+      id=""
     >
       <div
         data-o-component="o-expander"
@@ -87,6 +88,7 @@ exports[`Clip Snapshot component rendered on server full-grid render with attrib
       data-o-component="cp-clip"
       data-cp-clip-id="localhost:8080/fakevideo.mpg"
       data-cp-clip-system-title=""
+      id=""
     >
       <div
         data-o-component="o-expander"
@@ -188,6 +190,7 @@ exports[`Clip Snapshot component rendered on server in-line render 1`] = `
     data-o-component="cp-clip"
     data-cp-clip-id="localhost:8080/fakevideo.mpg"
     data-cp-clip-system-title=""
+    id=""
   >
     <div
       data-o-component="o-expander"
@@ -256,6 +259,7 @@ exports[`Clip Snapshot component rendered on server in-line render with attribut
     data-o-component="cp-clip"
     data-cp-clip-id="localhost:8080/fakevideo.mpg"
     data-cp-clip-system-title=""
+    id=""
   >
     <div
       data-o-component="o-expander"
@@ -361,6 +365,7 @@ exports[`Clip Snapshot component rendered on server mid-grid default render 1`]
         data-o-component="cp-clip"
         data-cp-clip-id="localhost:8080/fakevideo.mpg"
         data-cp-clip-system-title=""
+        id=""
       >
         <div
           data-o-component="o-expander"
@@ -436,6 +441,7 @@ exports[`Clip Snapshot component rendered on server mid-grid render with attribu
         data-o-component="cp-clip"
         data-cp-clip-id="localhost:8080/fakevideo.mpg"
         data-cp-clip-system-title=""
+        id=""
       >
         <div
           data-o-component="o-expander"
@@ -544,6 +550,7 @@ exports[`Clip Snapshot component rendered on server renders multiple video sourc
     data-o-component="cp-clip"
     data-cp-clip-id="84d7e1b0-e8b2-4ffc-a798-306f29dc9d52"
     data-cp-clip-system-title=""
+    id=""
   >
     <div
       data-o-component="o-expander"
@@ -655,6 +662,7 @@ exports[`Clip Snapshot component rendered on server supports new Origami images,
       data-o-component="cp-clip"
       data-cp-clip-id="localhost:8080/fakevideo.mpg"
       data-cp-clip-system-title=""
+      id=""
     >
       <div
         data-o-component="o-expander"

package/src/components/content-tree/RecommendedList/index.tsx

@@ -5,17 +5,16 @@ import { presets, Teaser } from '@financial-times/x-teaser'
 import { ContentProps } from '../../types'
 import type * as ComponentWorkarounds from '../Workarounds'
 
-// Renders a Recommended teaser component
+// Renders a Recommended teaser componentx
 // `<Teaser>` is imported from x-dash
 // https://github.com/Financial-Times/x-dash/tree/main/components/x-teaser)
 
 interface RecommendedListProps
   extends ContentProps<ComponentWorkarounds.RecommendedList> {}
 
-const RecommendedList: React.FC<RecommendedListProps> = ({
-  content: { heading, teasers },
-}) => {
-  if (!teasers || teasers.length === 0) {
+const RecommendedList: React.FC<RecommendedListProps> = ({ content }) => {
+  const { heading, children } = content
+  if (!children || children.length === 0) {
     return null
   }
 
@@ -29,19 +28,19 @@ const RecommendedList: React.FC<RecommendedListProps> = ({
         {heading}
       </p>
       <div className="n-content-recommended-list__teasers">
-        {teasers.map((teaser, index) => (
+        {children.map((child, index) => (
           <Teaser
-            key={teaser?.id || index}
+            key={child?.id || index}
             modifiers={['stacked']}
             {...presets.SmallHeavy}
-            {...teaser}
+            {...child.teaser}
             metaPrefixText={'By'}
             metaLink={{
-              prefLabel: teaser?.clientName,
+              prefLabel: child.teaser?.clientName,
               // clientName is a free form text field. Currently, there is no way to map it to an organisation
               // from the annotations. For now, we're linking it to the article url.
               // A property like isSponsoredBy could be added in future to support this properly.
-              url: teaser?.url,
+              url: child.teaser?.url,
             }}
           />
         ))}

package/src/components/content-tree/Workarounds.ts

@@ -87,7 +87,7 @@ export type Teaser = PartialToMaybeDeep<
 >
 
 export type Recommended = PartialToMaybe<
-ContentTreeWorkarounds.Recommended & {
+  ContentTreeWorkarounds.Recommended & {
     teaser?: Teaser
   }
 >
@@ -95,11 +95,10 @@ ContentTreeWorkarounds.Recommended & {
 export type RecommendedList = PartialToMaybe<
   ReadonlyArrays<
     Omit<ContentTree.RecommendedList, 'children'> & {
-    teasers?: (Teaser | null)[]
-    children: Recommended[]
-  }
+      teasers?: (Teaser | null)[]
+      children: Recommended[]
+    }
   >
-
 >
 
 export type ImageSetPicture = PartialToMaybe<
@@ -144,6 +143,9 @@ interface ClipSource {
   pixelHeight?: number
   pixelWidth?: number
   videoCodec?: string
+  quality?: string
+  dppx?: number
+  previousSourceWidth?: number
 }
 export type Clip = PartialToMaybeDeep<
   ReadonlyArrays<{
@@ -178,6 +180,7 @@ interface ClipSetReferences {
   subtitle?: string
   publishedDate?: string
   clips?: Clip[]
+  fragmentIdentifier?: string | undefined
 }
 
 export type ClipSet = PartialToMaybeDeep<