@financial-times/cp-content-pipeline-schema 3.18.0 → 3.19.0

package/lib/model/schemas/capi/live-blog-package.d.ts

@@ -853,6 +853,8 @@ export declare const liveBlogPackageSchema: import("zod").ZodObject<Pick<{
                 pixelHeight: import("zod").ZodOptional<import("zod").ZodNumber>;
                 pixelWidth: import("zod").ZodOptional<import("zod").ZodNumber>;
                 videoCodec: import("zod").ZodOptional<import("zod").ZodString>;
+                quality: import("zod").ZodOptional<import("zod").ZodString>;
+                dppx: import("zod").ZodOptional<import("zod").ZodNumber>;
             }, "strip", import("zod").ZodTypeAny, {
                 binaryUrl?: string | undefined;
                 pixelWidth?: number | undefined;
@@ -861,6 +863,8 @@ export declare const liveBlogPackageSchema: import("zod").ZodObject<Pick<{
                 duration?: number | undefined;
                 mediaType?: string | undefined;
                 videoCodec?: string | undefined;
+                quality?: string | undefined;
+                dppx?: number | undefined;
             }, {
                 binaryUrl?: string | undefined;
                 pixelWidth?: number | undefined;
@@ -869,6 +873,8 @@ export declare const liveBlogPackageSchema: import("zod").ZodObject<Pick<{
                 duration?: number | undefined;
                 mediaType?: string | undefined;
                 videoCodec?: string | undefined;
+                quality?: string | undefined;
+                dppx?: number | undefined;
             }>, "many">;
             poster: import("zod").ZodOptional<import("zod").ZodObject<{
                 id: import("zod").ZodString;
@@ -1046,6 +1052,8 @@ export declare const liveBlogPackageSchema: import("zod").ZodObject<Pick<{
                 duration?: number | undefined;
                 mediaType?: string | undefined;
                 videoCodec?: string | undefined;
+                quality?: string | undefined;
+                dppx?: number | undefined;
             }[];
             format?: "standardInline" | "mobile" | undefined;
             poster?: {
@@ -1093,6 +1101,8 @@ export declare const liveBlogPackageSchema: import("zod").ZodObject<Pick<{
                 duration?: number | undefined;
                 mediaType?: string | undefined;
                 videoCodec?: string | undefined;
+                quality?: string | undefined;
+                dppx?: number | undefined;
             }[];
             format?: "standardInline" | "mobile" | undefined;
             poster?: {
@@ -1179,6 +1189,8 @@ export declare const liveBlogPackageSchema: import("zod").ZodObject<Pick<{
                 duration?: number | undefined;
                 mediaType?: string | undefined;
                 videoCodec?: string | undefined;
+                quality?: string | undefined;
+                dppx?: number | undefined;
             }[];
             format?: "standardInline" | "mobile" | undefined;
             poster?: {
@@ -1247,6 +1259,8 @@ export declare const liveBlogPackageSchema: import("zod").ZodObject<Pick<{
                 duration?: number | undefined;
                 mediaType?: string | undefined;
                 videoCodec?: string | undefined;
+                quality?: string | undefined;
+                dppx?: number | undefined;
             }[];
             format?: "standardInline" | "mobile" | undefined;
             poster?: {
@@ -1705,6 +1719,8 @@ export declare const liveBlogPackageSchema: import("zod").ZodObject<Pick<{
                 duration?: number | undefined;
                 mediaType?: string | undefined;
                 videoCodec?: string | undefined;
+                quality?: string | undefined;
+                dppx?: number | undefined;
             }[];
             format?: "standardInline" | "mobile" | undefined;
             poster?: {
@@ -1966,6 +1982,8 @@ export declare const liveBlogPackageSchema: import("zod").ZodObject<Pick<{
                 duration?: number | undefined;
                 mediaType?: string | undefined;
                 videoCodec?: string | undefined;
+                quality?: string | undefined;
+                dppx?: number | undefined;
             }[];
             format?: "standardInline" | "mobile" | undefined;
             poster?: {

package/lib/model/schemas/capi/placeholder.d.ts

@@ -853,6 +853,8 @@ export declare const placeholderSchema: import("zod").ZodObject<Pick<{
                 pixelHeight: import("zod").ZodOptional<import("zod").ZodNumber>;
                 pixelWidth: import("zod").ZodOptional<import("zod").ZodNumber>;
                 videoCodec: import("zod").ZodOptional<import("zod").ZodString>;
+                quality: import("zod").ZodOptional<import("zod").ZodString>;
+                dppx: import("zod").ZodOptional<import("zod").ZodNumber>;
             }, "strip", import("zod").ZodTypeAny, {
                 binaryUrl?: string | undefined;
                 pixelWidth?: number | undefined;
@@ -861,6 +863,8 @@ export declare const placeholderSchema: import("zod").ZodObject<Pick<{
                 duration?: number | undefined;
                 mediaType?: string | undefined;
                 videoCodec?: string | undefined;
+                quality?: string | undefined;
+                dppx?: number | undefined;
             }, {
                 binaryUrl?: string | undefined;
                 pixelWidth?: number | undefined;
@@ -869,6 +873,8 @@ export declare const placeholderSchema: import("zod").ZodObject<Pick<{
                 duration?: number | undefined;
                 mediaType?: string | undefined;
                 videoCodec?: string | undefined;
+                quality?: string | undefined;
+                dppx?: number | undefined;
             }>, "many">;
             poster: import("zod").ZodOptional<import("zod").ZodObject<{
                 id: import("zod").ZodString;
@@ -1046,6 +1052,8 @@ export declare const placeholderSchema: import("zod").ZodObject<Pick<{
                 duration?: number | undefined;
                 mediaType?: string | undefined;
                 videoCodec?: string | undefined;
+                quality?: string | undefined;
+                dppx?: number | undefined;
             }[];
             format?: "standardInline" | "mobile" | undefined;
             poster?: {
@@ -1093,6 +1101,8 @@ export declare const placeholderSchema: import("zod").ZodObject<Pick<{
                 duration?: number | undefined;
                 mediaType?: string | undefined;
                 videoCodec?: string | undefined;
+                quality?: string | undefined;
+                dppx?: number | undefined;
             }[];
             format?: "standardInline" | "mobile" | undefined;
             poster?: {
@@ -1179,6 +1189,8 @@ export declare const placeholderSchema: import("zod").ZodObject<Pick<{
                 duration?: number | undefined;
                 mediaType?: string | undefined;
                 videoCodec?: string | undefined;
+                quality?: string | undefined;
+                dppx?: number | undefined;
             }[];
             format?: "standardInline" | "mobile" | undefined;
             poster?: {
@@ -1247,6 +1259,8 @@ export declare const placeholderSchema: import("zod").ZodObject<Pick<{
                 duration?: number | undefined;
                 mediaType?: string | undefined;
                 videoCodec?: string | undefined;
+                quality?: string | undefined;
+                dppx?: number | undefined;
             }[];
             format?: "standardInline" | "mobile" | undefined;
             poster?: {
@@ -1728,6 +1742,8 @@ export declare const placeholderSchema: import("zod").ZodObject<Pick<{
                 duration?: number | undefined;
                 mediaType?: string | undefined;
                 videoCodec?: string | undefined;
+                quality?: string | undefined;
+                dppx?: number | undefined;
             }[];
             format?: "standardInline" | "mobile" | undefined;
             poster?: {
@@ -2012,6 +2028,8 @@ export declare const placeholderSchema: import("zod").ZodObject<Pick<{
                 duration?: number | undefined;
                 mediaType?: string | undefined;
                 videoCodec?: string | undefined;
+                quality?: string | undefined;
+                dppx?: number | undefined;
             }[];
             format?: "standardInline" | "mobile" | undefined;
             poster?: {

package/lib/model/schemas/capi/video.d.ts

@@ -853,6 +853,8 @@ export declare const videoSchema: import("zod").ZodObject<Pick<{
                 pixelHeight: import("zod").ZodOptional<import("zod").ZodNumber>;
                 pixelWidth: import("zod").ZodOptional<import("zod").ZodNumber>;
                 videoCodec: import("zod").ZodOptional<import("zod").ZodString>;
+                quality: import("zod").ZodOptional<import("zod").ZodString>;
+                dppx: import("zod").ZodOptional<import("zod").ZodNumber>;
             }, "strip", import("zod").ZodTypeAny, {
                 binaryUrl?: string | undefined;
                 pixelWidth?: number | undefined;
@@ -861,6 +863,8 @@ export declare const videoSchema: import("zod").ZodObject<Pick<{
                 duration?: number | undefined;
                 mediaType?: string | undefined;
                 videoCodec?: string | undefined;
+                quality?: string | undefined;
+                dppx?: number | undefined;
             }, {
                 binaryUrl?: string | undefined;
                 pixelWidth?: number | undefined;
@@ -869,6 +873,8 @@ export declare const videoSchema: import("zod").ZodObject<Pick<{
                 duration?: number | undefined;
                 mediaType?: string | undefined;
                 videoCodec?: string | undefined;
+                quality?: string | undefined;
+                dppx?: number | undefined;
             }>, "many">;
             poster: import("zod").ZodOptional<import("zod").ZodObject<{
                 id: import("zod").ZodString;
@@ -1046,6 +1052,8 @@ export declare const videoSchema: import("zod").ZodObject<Pick<{
                 duration?: number | undefined;
                 mediaType?: string | undefined;
                 videoCodec?: string | undefined;
+                quality?: string | undefined;
+                dppx?: number | undefined;
             }[];
             format?: "standardInline" | "mobile" | undefined;
             poster?: {
@@ -1093,6 +1101,8 @@ export declare const videoSchema: import("zod").ZodObject<Pick<{
                 duration?: number | undefined;
                 mediaType?: string | undefined;
                 videoCodec?: string | undefined;
+                quality?: string | undefined;
+                dppx?: number | undefined;
             }[];
             format?: "standardInline" | "mobile" | undefined;
             poster?: {
@@ -1179,6 +1189,8 @@ export declare const videoSchema: import("zod").ZodObject<Pick<{
                 duration?: number | undefined;
                 mediaType?: string | undefined;
                 videoCodec?: string | undefined;
+                quality?: string | undefined;
+                dppx?: number | undefined;
             }[];
             format?: "standardInline" | "mobile" | undefined;
             poster?: {
@@ -1247,6 +1259,8 @@ export declare const videoSchema: import("zod").ZodObject<Pick<{
                 duration?: number | undefined;
                 mediaType?: string | undefined;
                 videoCodec?: string | undefined;
+                quality?: string | undefined;
+                dppx?: number | undefined;
             }[];
             format?: "standardInline" | "mobile" | undefined;
             poster?: {

package/lib/resolvers/clip.d.ts

@@ -1,15 +1,7 @@
 declare const resolvers: {
     Clip: {
         __resolveType: () => string;
-        dataSource: (clip: import("../model/Clip").Clip) => {
-            binaryUrl: string;
-            mediaType: string;
-            audioCodec?: string;
-            duration?: number;
-            pixelHeight?: number;
-            pixelWidth?: number;
-            videoCodec?: string;
-        }[];
+        dataSource: (clip: import("../model/Clip").Clip) => import("../types/clip").ClipSource[];
         type: (clip: import("../model/Clip").Clip) => string;
         format: (clip: import("../model/Clip").Clip) => "mobile" | "standard-inline";
         poster: (clip: import("../model/Clip").Clip) => string;
@@ -23,6 +15,9 @@ declare const resolvers: {
         pixelWidth: (parent: import("../generated").ClipSource) => number | null;
         pixelHeight: (parent: import("../generated").ClipSource) => number | null;
         videoCodec: (parent: import("../generated").ClipSource) => string | null;
+        quality: (parent: import("../generated").ClipSource) => string | null;
+        dppx: (parent: import("../generated").ClipSource) => number | null;
+        previousSourceWidth: (parent: import("../generated").ClipSource) => number | null;
     };
 };
 export default resolvers;

package/lib/resolvers/clip.js

@@ -17,6 +17,9 @@ const resolvers = {
         pixelWidth: (parent) => parent.pixelWidth ?? null,
         pixelHeight: (parent) => parent.pixelHeight ?? null,
         videoCodec: (parent) => parent.videoCodec ?? null,
+        quality: (parent) => parent.quality ?? null,
+        dppx: (parent) => parent.dppx ?? null,
+        previousSourceWidth: (parent) => parent.previousSourceWidth ?? null,
     },
 };
 exports.default = resolvers;

package/lib/resolvers/clip.js.map

@@ -1 +1 @@
-{"version":3,"file":"clip.js","sourceRoot":"","sources":["../../src/resolvers/clip.ts"],"names":[],"mappings":";;AAEA,MAAM,SAAS,GAAG;IAChB,IAAI,EAAE;QACJ,aAAa,EAAE,GAAG,EAAE,CAAC,MAAM;QAC3B,UAAU,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE;QACvC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE;QAC3B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE;QAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE;QAC/B,EAAE,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE;KACxB;IAED,UAAU,EAAE;QACV,UAAU,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,IAAI,IAAI;QACjD,SAAS,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS;QACvC,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,IAAI,IAAI;QAC7C,SAAS,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS;QACvC,UAAU,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,IAAI,IAAI;QACjD,WAAW,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,IAAI,IAAI;QACnD,UAAU,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,IAAI,IAAI;KAClD;CACiE,CAAA;AAEpE,kBAAe,SAAS,CAAA"}
+{"version":3,"file":"clip.js","sourceRoot":"","sources":["../../src/resolvers/clip.ts"],"names":[],"mappings":";;AAEA,MAAM,SAAS,GAAG;IAChB,IAAI,EAAE;QACJ,aAAa,EAAE,GAAG,EAAE,CAAC,MAAM;QAC3B,UAAU,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE;QACvC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE;QAC3B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE;QAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE;QAC/B,EAAE,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE;KACxB;IAED,UAAU,EAAE;QACV,UAAU,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,IAAI,IAAI;QACjD,SAAS,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS;QACvC,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,IAAI,IAAI;QAC7C,SAAS,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS;QACvC,UAAU,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,IAAI,IAAI;QACjD,WAAW,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,IAAI,IAAI;QACnD,UAAU,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,IAAI,IAAI;QACjD,OAAO,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,IAAI,IAAI;QAC3C,IAAI,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI;QACrC,mBAAmB,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,mBAAmB,IAAI,IAAI;KACpE;CACiE,CAAA;AAEpE,kBAAe,SAAS,CAAA"}

package/lib/resolvers/index.d.ts

@@ -344,15 +344,7 @@ declare const resolvers: {
     MetaLink: import("../generated").MetaLinkResolvers;
     Clip: {
         __resolveType: () => string;
-        dataSource: (clip: import("../model/Clip").Clip) => {
-            binaryUrl: string;
-            mediaType: string;
-            audioCodec?: string;
-            duration?: number;
-            pixelHeight?: number;
-            pixelWidth?: number;
-            videoCodec?: string;
-        }[];
+        dataSource: (clip: import("../model/Clip").Clip) => import("../types/clip").ClipSource[];
         type: (clip: import("../model/Clip").Clip) => string;
         format: (clip: import("../model/Clip").Clip) => "mobile" | "standard-inline";
         poster: (clip: import("../model/Clip").Clip) => string;
@@ -366,6 +358,9 @@ declare const resolvers: {
         pixelWidth: (parent: import("../generated").ClipSource) => number | null;
         pixelHeight: (parent: import("../generated").ClipSource) => number | null;
         videoCodec: (parent: import("../generated").ClipSource) => string | null;
+        quality: (parent: import("../generated").ClipSource) => string | null;
+        dppx: (parent: import("../generated").ClipSource) => number | null;
+        previousSourceWidth: (parent: import("../generated").ClipSource) => number | null;
     };
     Image: {
         __resolveType: import("../generated").TypeResolveFn<"ImageDesktop" | "ImageLandscape" | "ImageMobile" | "ImagePortrait" | "ImageSquare" | "ImageSquareFTEdit" | "ImageStandard" | "ImageStandardInline" | "ImageWide", import("../model/Image").Image, import("..").QueryContext>;

package/lib/types/clip.d.ts

@@ -0,0 +1,21 @@
+import { LiteralUnionScalarValues } from '../resolvers/literal-union';
+import { ClipFormat } from '../resolvers/scalars';
+export type ClipSource = {
+    binaryUrl: string;
+    mediaType: string;
+    audioCodec?: string;
+    duration?: number;
+    pixelHeight?: number;
+    pixelWidth?: number;
+    videoCodec?: string;
+    quality?: string;
+    dppx?: number;
+    previousSourceWidth?: number;
+};
+export interface ClipVideo {
+    id(): string;
+    type(): string;
+    format(): LiteralUnionScalarValues<typeof ClipFormat>;
+    poster(): string;
+    dataSource(): ClipSource[];
+}

package/lib/types/clip.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=clip.js.map

package/lib/types/clip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clip.js","sourceRoot":"","sources":["../../src/types/clip.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/cp-content-pipeline-schema",
-  "version": "3.18.0",
+  "version": "3.19.0",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package/queries/article.graphql

@@ -358,6 +358,9 @@ fragment Clip on Clip {
     pixelHeight
     pixelWidth
     videoCodec
+    quality
+    dppx
+    previousSourceWidth
   }
   poster
 }

package/src/generated/index.ts

@@ -377,6 +377,8 @@ export type ClipSource = {
   readonly audioCodec?: Maybe<Scalars['String']['output']>;
   /** The url of the clip source, eg. 'https://next-media-api.ft.com/renditions/16868569859480/0x0.mp3'. */
   readonly binaryUrl: Scalars['String']['output'];
+  /** The encoding settings intention for the video media */
+  readonly dppx?: Maybe<Scalars['Int']['output']>;
   /** The duration of the clip in milliseconds. */
   readonly duration?: Maybe<Scalars['Int']['output']>;
   /** The media type eg. video/mp4. */
@@ -385,6 +387,10 @@ export type ClipSource = {
   readonly pixelHeight?: Maybe<Scalars['Int']['output']>;
   /** The width of the clip in pixels. */
   readonly pixelWidth?: Maybe<Scalars['Int']['output']>;
+  /** The width of the source immediately narrower than this one. */
+  readonly previousSourceWidth?: Maybe<Scalars['Int']['output']>;
+  /** The encoding quality of the video media */
+  readonly quality?: Maybe<Scalars['String']['output']>;
   /** The video encoding format of the source, eg. h264. */
   readonly videoCodec?: Maybe<Scalars['String']['output']>;
 };
@@ -2413,10 +2419,13 @@ export type ClipSetResolvers<ContextType = QueryContext, ParentType extends Reso
 export type ClipSourceResolvers<ContextType = QueryContext, ParentType extends ResolversParentTypes['ClipSource'] = ResolversParentTypes['ClipSource']> = ResolversObject<{
   audioCodec: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
   binaryUrl: Resolver<ResolversTypes['String'], ParentType, ContextType>;
+  dppx: Resolver<Maybe<ResolversTypes['Int']>, ParentType, ContextType>;
   duration: Resolver<Maybe<ResolversTypes['Int']>, ParentType, ContextType>;
   mediaType: Resolver<ResolversTypes['String'], ParentType, ContextType>;
   pixelHeight: Resolver<Maybe<ResolversTypes['Int']>, ParentType, ContextType>;
   pixelWidth: Resolver<Maybe<ResolversTypes['Int']>, ParentType, ContextType>;
+  previousSourceWidth: Resolver<Maybe<ResolversTypes['Int']>, ParentType, ContextType>;
+  quality: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
   videoCodec: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
   __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
 }>;

package/src/helpers/qualityWorkaround.ts

@@ -0,0 +1,44 @@
+// until we get quality setting data through from CAPI, we infer the quality and ddpx from the details in the filename
+// once we have quality data from CAPI, we can remove this module
+import type { ClipSource } from '../types/clip'
+
+// possible output sizes are set in https://github.com/Financial-Times/ip-ovide/tree/main/common/n-zencoder/src/profiles
+const dimensions = new Map([
+  [1920, 1080],
+  [1280, 720],
+  [960, 540],
+  [640, 360],
+  [480, 270],
+])
+
+// utility to extract width from filename pattern like /640x360.mp4
+function getDimensionsFromFilename(url: string): number[] {
+  // regex: get the first set of digits after a "/" and before "x", followed by 1+ digits, followed by ".mp" and 1 digit, then end of string.
+  const widthRegex = /\/(\d+)x(\d+)\.mp\d$/i
+  const widthMatch = url.match(widthRegex)
+  return [
+    parseInt(widthMatch?.[1] ?? '0', 10),
+    parseInt(widthMatch?.[2] ?? '0', 10),
+  ]
+}
+
+export default function qualityWorkaround(
+  dataSource: ClipSource[]
+): ClipSource[] {
+  return dataSource.map((source) => {
+    const originalDimensions = getDimensionsFromFilename(source.binaryUrl ?? '')
+    if (originalDimensions[0] === 0) {
+      // this will apply to audio files
+      return source
+    }
+    const smallerDimension = Math.min(...originalDimensions)
+    source.quality = `${
+      Array.from(dimensions.values()).includes(smallerDimension)
+        ? smallerDimension
+        : dimensions.get(smallerDimension)
+    }p`
+
+    source.dppx = smallerDimension >= 1080 ? 2 : 1
+    return source
+  })
+}

package/src/model/Clip.test.ts

@@ -4,6 +4,42 @@ const mockContext = {
   systemCode: 'cp-content-pipeline',
 } as unknown as QueryContext
 
+const mockDataSources = [
+  {
+    audioCodec: 'mp3',
+    binaryUrl: 'https://clips.ft.com/someguid/0x0.mp3',
+    duration: 21720,
+    mediaType: 'audio/mpeg',
+  },
+  {
+    audioCodec: 'aac',
+    binaryUrl: 'https://clips.ft.com/someguid/640x360.mp4',
+    duration: 21684,
+    mediaType: 'video/mp4',
+    pixelHeight: 360,
+    pixelWidth: 640,
+    videoCodec: 'h264',
+  },
+  {
+    audioCodec: 'aac',
+    binaryUrl: 'https://clips.ft.com/someguid/1280x720.mp4',
+    duration: 21684,
+    mediaType: 'video/mp4',
+    pixelHeight: 720,
+    pixelWidth: 1280,
+    videoCodec: 'h264',
+  },
+  {
+    audioCodec: 'aac',
+    binaryUrl: 'https://clips.ft.com/someguid/1920x1080.mp4',
+    duration: 21684,
+    mediaType: 'video/mp4',
+    pixelHeight: 720,
+    pixelWidth: 1280,
+    videoCodec: 'h264',
+  },
+]
+
 describe('Clip', () => {
   describe('poster', () => {
     it('uses the Origami Image Service when a url is provided', () => {
@@ -170,4 +206,63 @@ describe('Clip', () => {
       expect(clip.poster()).toContain('width=1200')
     })
   })
+  describe('datasources', () => {
+    it('creates a quality value and dppx value based on the width in the URL when quality is not provided', () => {
+      const clip = new Clip(
+        {
+          id: 'http://api.ft.com/things/1234',
+          type: 'http://www.ft.com/ontology/content/Clip',
+          dataSource: mockDataSources,
+        },
+        mockContext
+      )
+      const dataSource = clip.dataSource()
+      expect(dataSource).toHaveLength(4)
+      expect(dataSource?.[0]?.quality).toBe('1080p')
+      expect(dataSource?.[0]?.dppx).toBe(2)
+      expect(dataSource?.[1]?.quality).toBe('720p')
+      expect(dataSource?.[2]?.quality).toBe('360p')
+      expect(dataSource?.[3]?.quality).toBeUndefined()
+    })
+    it('orders the data sources by width and then dppx', () => {
+      const clip = new Clip(
+        {
+          id: 'http://api.ft.com/things/1234',
+          type: 'http://www.ft.com/ontology/content/Clip',
+          dataSource: mockDataSources,
+        },
+        mockContext
+      )
+      const dataSource = clip.dataSource()
+      expect(dataSource).toHaveLength(4)
+      expect(dataSource?.[0]?.binaryUrl).toBe(
+        'https://clips.ft.com/someguid/1920x1080.mp4'
+      )
+      expect(dataSource?.[1]?.binaryUrl).toBe(
+        'https://clips.ft.com/someguid/1280x720.mp4'
+      )
+      expect(dataSource?.[2]?.binaryUrl).toBe(
+        'https://clips.ft.com/someguid/640x360.mp4'
+      )
+      expect(dataSource?.[3]?.binaryUrl).toBe(
+        'https://clips.ft.com/someguid/0x0.mp3'
+      )
+    })
+    it('sets the previousSourceWidth to the next most narrow source', () => {
+      const clip = new Clip(
+        {
+          id: 'http://api.ft.com/things/1234',
+          type: 'http://www.ft.com/ontology/content/Clip',
+          dataSource: mockDataSources,
+        },
+        mockContext
+      )
+      const dataSource = clip.dataSource()
+      expect(dataSource).toHaveLength(4)
+      expect(dataSource?.[0]?.previousSourceWidth).toBe(640)
+      expect(dataSource?.[1]?.previousSourceWidth).toBe(640)
+      expect(dataSource?.[2]?.previousSourceWidth).toBeUndefined()
+      expect(dataSource?.[3]?.previousSourceWidth).toBeUndefined()
+    })
+  })
 })

package/src/model/Clip.ts

@@ -6,25 +6,9 @@ import {
 } from '../resolvers/literal-union'
 import { ClipFormat } from '../resolvers/scalars'
 import imageServiceUrl from '../helpers/imageService'
+import qualityWorkaround from '../helpers/qualityWorkaround'
 import { QueryContext } from '..'
-
-type ClipSource = {
-  binaryUrl: string
-  mediaType: string
-  audioCodec?: string
-  duration?: number
-  pixelHeight?: number
-  pixelWidth?: number
-  videoCodec?: string
-}
-
-interface ClipVideo {
-  id(): string
-  type(): string
-  format(): LiteralUnionScalarValues<typeof ClipFormat>
-  poster(): string
-  dataSource(): ClipSource[]
-}
+import type { ClipSource, ClipVideo } from '../types/clip'
 
 export class Clip implements ClipVideo {
   constructor(
@@ -60,18 +44,40 @@ export class Clip implements ClipVideo {
     return 'standard-inline'
   }
 
+  // apply 'quality' workaround
+  // order sources by width and then quality
+  // get the min width from the first previous more narrow item
   dataSource() {
-    // Order clip dataSource to have an order of video formats first then audio/mpeg, as the browser will first check if it can play the MIME type of the first source
-    const dataSource = this.clip.dataSource.slice().sort((a, b) => {
-      if (a.mediaType === 'video/mp4' && b.mediaType !== 'video/mp4') {
-        return -1
-      }
-      if (a.mediaType !== 'video/mp4' && b.mediaType === 'video/mp4') {
-        return 1
+    // create a copy of the array so we don't modify the original data
+    let dataSource = this.clip.dataSource.map((src) => ({
+      ...src,
+    })) as ClipSource[]
+    dataSource = qualityWorkaround(dataSource as ClipSource[])
+    dataSource = dataSource.sort((a, b) => {
+      const widthDiff = (b.pixelWidth ?? 0) - (a.pixelWidth ?? 0)
+      if (widthDiff !== 0) {
+        return widthDiff
       }
-      return 0
+      return (b?.dppx ?? 0) - (a?.dppx ?? 0)
     })
-    return dataSource as ClipSource[]
+
+    // get the min width from the previous item if it has pixelWidth set, checking it is not the same as pixelWidth as the current item
+    for (let i = 0; i < dataSource.length; i++) {
+      let next = 1
+      let minWidth = dataSource[i + next]?.pixelWidth
+      while (
+        typeof minWidth !== 'undefined' &&
+        minWidth === dataSource[i]?.pixelWidth
+      ) {
+        next++
+        minWidth = dataSource[i + next]?.pixelWidth
+      }
+      if (minWidth && dataSource[i]) {
+        dataSource[i]!.previousSourceWidth = minWidth
+      }
+    }
+
+    return dataSource
   }
 
   poster() {

package/src/model/schemas/capi/base-schema.ts

@@ -103,6 +103,8 @@ const ClipSource = z.object({
   pixelHeight: z.number().optional(),
   pixelWidth: z.number().optional(),
   videoCodec: z.string().optional(),
+  quality: z.string().optional(),
+  dppx: z.number().optional(),
 })
 
 export const Clip = z.object({

package/src/resolvers/clip.ts

@@ -18,6 +18,9 @@ const resolvers = {
     pixelWidth: (parent) => parent.pixelWidth ?? null,
     pixelHeight: (parent) => parent.pixelHeight ?? null,
     videoCodec: (parent) => parent.videoCodec ?? null,
+    quality: (parent) => parent.quality ?? null,
+    dppx: (parent) => parent.dppx ?? null,
+    previousSourceWidth: (parent) => parent.previousSourceWidth ?? null,
   },
 } satisfies { Clip: ClipResolvers; ClipSource: ClipSourceResolvers }
 

package/src/types/clip.ts

@@ -0,0 +1,23 @@
+import { LiteralUnionScalarValues } from '../resolvers/literal-union'
+import { ClipFormat } from '../resolvers/scalars'
+
+export type ClipSource = {
+  binaryUrl: string
+  mediaType: string
+  audioCodec?: string
+  duration?: number
+  pixelHeight?: number
+  pixelWidth?: number
+  videoCodec?: string
+  quality?: string
+  dppx?: number
+  previousSourceWidth?: number
+}
+
+export interface ClipVideo {
+  id(): string
+  type(): string
+  format(): LiteralUnionScalarValues<typeof ClipFormat>
+  poster(): string
+  dataSource(): ClipSource[]
+}