@financial-times/cp-content-pipeline-schema 1.8.6 → 2.0.1

package/src/model/Clip.test.ts

@@ -0,0 +1,154 @@
+import { Clip } from './Clip';
+
+describe('Clip', () => {
+    describe('poster', () => {
+        it('uses the Origami Image Service when a url is provided', () => {
+            const clip = new Clip({
+                id: 'http://api.ft.com/things/1234',
+                type: "http://www.ft.com/ontology/content/Clip",
+                dataSource: [
+                    {},
+                ],
+                poster: {
+                    id: 'http://api.ft.com/things/1234',
+                    type: 'http://www.ft.com/ontology/content/ImageSet',
+                    members: [
+                        {
+                            id: 'http://api.ft.com/things/1234',
+                            type: 'http://www.ft.com/ontology/content/Image',
+                            binaryUrl: 'http://video.ft.com/1234.jpg',
+                        },
+                    ],
+                },      
+            });
+            expect(clip.poster()).toContain('https://www.ft.com/__origami/service/image/v2/images/raw/');
+            expect(clip.poster()).toContain('source=cp-content-pipeline&fit=scale-down&quality=highest');
+        });
+        it('returns an empty string if an image url is not provided', () => {
+            const clip = new Clip({
+                id: 'http://api.ft.com/things/1234',
+                type: "http://www.ft.com/ontology/content/Clip",
+                dataSource: [
+                    {},
+                ],
+                poster: {
+                    id: 'http://api.ft.com/things/1234',
+                    type: 'http://www.ft.com/ontology/content/ImageSet',
+                    members: [
+                        {
+                            id: 'http://api.ft.com/things/1234',
+                            type: 'http://www.ft.com/ontology/content/Image',
+                            binaryUrl: '',
+                        },
+                    ],
+                },      
+            });
+            expect(clip.poster()).toEqual('');
+        });
+        it('uses a default width if a layout is not provided', () => {
+            const clip = new Clip({
+                id: 'http://api.ft.com/things/1234',
+                type: "http://www.ft.com/ontology/content/Clip",
+                dataSource: [
+                    {},
+                ],
+                poster: {
+                    id: 'http://api.ft.com/things/1234',
+                    type: 'http://www.ft.com/ontology/content/ImageSet',
+                    members: [
+                        {
+                            id: 'http://api.ft.com/things/1234',
+                            type: 'http://www.ft.com/ontology/content/Image',
+                            binaryUrl: 'http://video.ft.com/1234.jpg',
+                        },
+                    ],
+                },      
+            });
+            expect(clip.poster()).toContain('width=700');
+        });
+        it('uses a default width if a layout is not supported', () => {
+            const clip = new Clip({
+                id: 'http://api.ft.com/things/1234',
+                type: "http://www.ft.com/ontology/content/Clip",
+                dataSource: [
+                    {},
+                ],
+                poster: {
+                    id: 'http://api.ft.com/things/1234',
+                    type: 'http://www.ft.com/ontology/content/ImageSet',
+                    members: [
+                        {
+                            id: 'http://api.ft.com/things/1234',
+                            type: 'http://www.ft.com/ontology/content/Image',
+                            binaryUrl: 'http://video.ft.com/1234.jpg',
+                        },
+                    ],
+                },      
+            }, 'I-dont-exist');
+            expect(clip.poster()).toEqual('https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fvideo.ft.com%2F1234.jpg?source=cp-content-pipeline&fit=scale-down&quality=highest&width=700&dpr=1');
+        });
+        it('generates an image with the appropriate width for a `in-line` layout', () => {
+            const clip = new Clip({
+                id: 'http://api.ft.com/things/1234',
+                type: "http://www.ft.com/ontology/content/Clip",
+                dataSource: [
+                    {},
+                ],
+                poster: {
+                    id: 'http://api.ft.com/things/1234',
+                    type: 'http://www.ft.com/ontology/content/ImageSet',
+                    members: [
+                        {
+                            id: 'http://api.ft.com/things/1234',
+                            type: 'http://www.ft.com/ontology/content/Image',
+                            binaryUrl: 'http://video.ft.com/1234.jpg',
+                        },
+                    ],
+                },      
+            }, 'in-line');
+            expect(clip.poster()).toContain('width=700');
+        });
+        it('generates an image with the appropriate width for a `mid-grid` layout', () => {
+            const clip = new Clip({
+                id: 'http://api.ft.com/things/1234',
+                type: "http://www.ft.com/ontology/content/Clip",
+                dataSource: [
+                    {},
+                ],
+                poster: {
+                    id: 'http://api.ft.com/things/1234',
+                    type: 'http://www.ft.com/ontology/content/ImageSet',
+                    members: [
+                        {
+                            id: 'http://api.ft.com/things/1234',
+                            type: 'http://www.ft.com/ontology/content/Image',
+                            binaryUrl: 'http://video.ft.com/1234.jpg',
+                        },
+                    ],
+                },      
+            }, 'mid-grid');
+            expect(clip.poster()).toContain('width=900');
+        });
+        it('generates an image with the appropriate width for a `full-grid` layout', () => {
+            const clip = new Clip({
+                id: 'http://api.ft.com/things/1234',
+                type: "http://www.ft.com/ontology/content/Clip",
+                dataSource: [
+                    {},
+                ],
+                poster: {
+                    id: 'http://api.ft.com/things/1234',
+                    type: 'http://www.ft.com/ontology/content/ImageSet',
+                    members: [
+                        {
+                            id: 'http://api.ft.com/things/1234',
+                            type: 'http://www.ft.com/ontology/content/Image',
+                            binaryUrl: 'http://video.ft.com/1234.jpg',
+                        },
+                    ],
+                },      
+            }, 'full-grid');
+            expect(clip.poster()).toContain('width=1200');
+        });
+    });
+}); 

package/src/model/Clip.ts

@@ -5,6 +5,7 @@ import {
   validLiteralUnionValue,
 } from '../resolvers/literal-union'
 import { ClipFormat } from '../resolvers/scalars'
+import imageServiceUrl from '../helpers/imageService'
 
 export type ClipSource = {
   binaryUrl: string
@@ -25,7 +26,7 @@ export interface ClipVideo {
 }
 
 export class Clip implements ClipVideo {
-  constructor(private clip: ClipMetadata) {}
+  constructor(private clip: ClipMetadata, private layout?: string) {}
 
   type() {
     return 'clip'
@@ -70,6 +71,19 @@ export class Clip implements ClipVideo {
   }
 
   poster() {
-    return this.clip.poster?.members[0].binaryUrl ?? ''
+    const mapSizes: {
+      [key: string]: number
+    } = {
+      'in-line': 700,
+      'mid-grid': 900,
+      'full-grid': 1200,
+    }
+
+    const url = this.clip.poster?.members[0].binaryUrl;
+    return url  ? imageServiceUrl({
+      url,
+      systemCode: 'cp-content-pipeline',
+      width: this.layout && mapSizes[this.layout] ? mapSizes[this.layout] : 700,
+    }) : ''
   }
 }

package/src/resolvers/content-tree/references/ClipSet.ts

@@ -5,6 +5,7 @@ import type {
 } from '../Workarounds'
 import { uuidFromUrl } from '../../../helpers/metadata'
 import { Clip } from '../../../model/Clip'
+import { RichText } from '../../../model/RichText'
 import { ClipSetResolvers } from '../../../generated'
 import { ReferenceWithCAPIData } from '.'
 
@@ -45,7 +46,18 @@ export const ClipSet = {
   caption: (parent) =>
     (parent.reference as OldClipContentTree).caption ??
     getClipSet(parent)?.caption,
-  accessibility: (parent) => getClipSet(parent)?.accessibility || null,
+  accessibility: (parent) => {
+    const accessibility = getClipSet(parent)?.accessibility
+    if (accessibility) {
+      return {
+        ...accessibility,
+        transcript: accessibility.transcript
+          ? new RichText('transcript', accessibility.transcript)
+          : null,
+      }
+    }
+    return null
+  },
   description: (parent) =>
     (parent.reference as OldClipContentTree).description ??
     getClipSet(parent)?.description,
@@ -61,7 +73,7 @@ export const ClipSet = {
     const clipSet = getClipSet(parent)
 
     return clipSet && clipSet.members && clipSet.members.length > 0
-      ? clipSet.members.map((clip) => new Clip(clip))
+      ? clipSet.members.map((clip) => new Clip(clip, parent.reference.dataLayout))
       : null
   },
 } satisfies ClipSetResolvers

package/src/resolvers/scalars.ts

@@ -111,10 +111,10 @@ export const ClipFormat = new LiteralUnionScalar<['standard-inline', 'mobile']>(
 )
 
 export const RichTextSource = new LiteralUnionScalar<
-  ['standfirst', 'summary', 'bodyXML']
+  ['standfirst', 'summary', 'bodyXML', 'transcript']
 >({
   name: 'RichTextSource',
-  values: ['standfirst', 'summary', 'bodyXML'],
+  values: ['standfirst', 'summary', 'bodyXML', 'transcript'],
 })
 
 export const ContentType = new LiteralUnionScalar<