@financial-times/cp-content-pipeline-ui 7.10.0 → 7.11.0

package/src/components/ArticleInfo/index.tsx

@@ -1,45 +1,82 @@
-import React from 'react'
-import Byline from '../Byline'
-import type { ArticleQuery } from '@financial-times/cp-content-pipeline-client'
-import ftDateFormat from '@financial-times/ft-date-format'
+import React from "react"
+import Byline from "../Byline"
+import type { ArticleQuery } from "@financial-times/cp-content-pipeline-client"
+import ftDateFormat from "@financial-times/ft-date-format"
 
 type ArticleInfoProps = {
-  content: ArticleQuery['content']
+  content: ArticleQuery["content"]
 }
 
 const ArticleInfo: React.FC<React.PropsWithChildren<ArticleInfoProps>> = ({
   children,
   content,
 }) => {
-  const isLiveBlogPackage = content.__typename === 'LiveBlogPackage'
+  const isLiveBlogPackage = content.__typename === "LiveBlogPackage"
+  const formattedFirstPublishedDate = ftDateFormat.format(
+    new Date(content.firstPublishedDate),
+    "date"
+  )
   const formattedPublishedDate = ftDateFormat.format(
     new Date(content.publishedTimestamp),
-    'date'
+    "date"
   )
 
+  const displayPublishedDate = content.publishedDate && !isLiveBlogPackage
+  const displayUpdatedDate =
+    new Date(content.firstPublishedDate).getTime() !==
+    content.publishedTimestamp
+  const isPublishedMoreThanOneDayAgo =
+    Date.now() - new Date(content.firstPublishedDate).getTime() >
+    24 * 60 * 60 * 1000
+
   return (
     <div className="article-info">
-      <div className="article-info__time-byline">
-        {content.byline && content.__typename !== 'Audio' && (
-          <Byline
-            structuredContent={content.byline}
-            showEditedBy={isLiveBlogPackage}
-          />
-        )}
-        {content.publishedDate && !isLiveBlogPackage && (
-          <>
-            {' '}
-            <time
-              data-o-component="o-date"
-              className="article-info__timestamp o-date"
-              dateTime={content.publishedDate}
-            >
-              {formattedPublishedDate}
-            </time>
-          </>
-        )}
+      <div className="article-info__time-byline-row">
+        <div className="article-info__time-byline-content">
+          {content.byline && content.__typename !== "Audio" && (
+            <Byline
+              structuredContent={content.byline}
+              showEditedBy={isLiveBlogPackage}
+            />
+          )}
+        </div>
+        {!displayPublishedDate && children}
       </div>
-      {children}
+      {displayPublishedDate && (
+        <div className="article-info__time-byline-row">
+          <div className="article-info__time-byline-content">
+            <p className="article-info__timestamp-item">
+              Published
+              <time
+                data-o-component="o-date"
+                {...(isPublishedMoreThanOneDayAgo
+                  ? { "data-o-date-format": "MMM d yyyy" }
+                  : {})}
+                className="article-info__timestamp o-date"
+                dateTime={content.firstPublishedDate}
+              >
+                {formattedFirstPublishedDate}
+              </time>
+            </p>
+            {displayUpdatedDate && (
+              <p className="article-info__timestamp-item article-info__updated-timestamp">
+                Updated
+                <time
+                  data-o-component="o-date"
+                  data-o-date-format={
+                    isPublishedMoreThanOneDayAgo ? "MMM d yyyy, HH:mm" : "HH:mm"
+                  }
+                  className="article-info__timestamp o-date"
+                  dateTime={content.publishedDate}
+                >
+                  {formattedPublishedDate}
+                </time>
+              </p>
+            )}
+          </div>
+          {children}
+        </div>
+      )}
     </div>
   )
 }

package/src/components/content-tree/Clip/client/index.ts

@@ -620,7 +620,6 @@ class Clip extends ClipInterface {
       this.resizeControls()
       this.togglePlayPauseButton()
       if (this.opts.autoShowClosedCaptions) {
-        this.videoEl.setAttribute('crossorigin', 'true')
         this.showCaptionsByDefault()
       }
       this.containerEl.classList.remove(

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

@@ -90,6 +90,7 @@ export const ClipTag: React.FC<ClipTagProps> = ({
           poster={poster}
           preload={preload}
           id={`clip-${id}`}
+          crossOrigin="anonymous"
         >
           {clip?.dataSource?.map(({ binaryUrl, mediaType }, index) => {
             return (

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

@@ -45,6 +45,7 @@ exports[`Clip Snapshot component rendered on server full-grid default render 1`]
           poster=\\"\\"
           preload=\\"auto\\"
           id=\\"clip-localhost:8080/fakevideo.mpg\\"
+          crossorigin=\\"anonymous\\"
           style=\\"height: fit-content; width: 100%\\"
         >
           <source
@@ -114,6 +115,7 @@ exports[`Clip Snapshot component rendered on server full-grid render with attrib
           poster=\\"\\"
           preload=\\"auto\\"
           id=\\"clip-localhost:8080/fakevideo.mpg\\"
+          crossorigin=\\"anonymous\\"
           style=\\"height: fit-content; width: 100%\\"
         >
           <source
@@ -203,6 +205,7 @@ exports[`Clip Snapshot component rendered on server in-line render 1`] = `
         poster=\\"\\"
         preload=\\"auto\\"
         id=\\"clip-localhost:8080/fakevideo.mpg\\"
+        crossorigin=\\"anonymous\\"
         style=\\"height: fit-content; width: 100%\\"
       >
         <source
@@ -270,6 +273,7 @@ exports[`Clip Snapshot component rendered on server in-line render with attribut
         poster=\\"\\"
         preload=\\"auto\\"
         id=\\"clip-localhost:8080/fakevideo.mpg\\"
+        crossorigin=\\"anonymous\\"
         style=\\"height: fit-content; width: 100%\\"
       >
         <source
@@ -363,6 +367,7 @@ exports[`Clip Snapshot component rendered on server mid-grid default render 1`]
             poster=\\"\\"
             preload=\\"auto\\"
             id=\\"clip-localhost:8080/fakevideo.mpg\\"
+            crossorigin=\\"anonymous\\"
             style=\\"height: fit-content; width: 100%\\"
           >
             <source
@@ -437,6 +442,7 @@ exports[`Clip Snapshot component rendered on server mid-grid render with attribu
             poster=\\"\\"
             preload=\\"auto\\"
             id=\\"clip-localhost:8080/fakevideo.mpg\\"
+            crossorigin=\\"anonymous\\"
             style=\\"height: fit-content; width: 100%\\"
           >
             <source
@@ -533,6 +539,7 @@ exports[`Clip Snapshot component rendered on server renders multiple video sourc
         poster=\\"https://whatever/1080x1920.jpg\\"
         preload=\\"auto\\"
         id=\\"clip-84d7e1b0-e8b2-4ffc-a798-306f29dc9d52\\"
+        crossorigin=\\"anonymous\\"
         style=\\"aspect-ratio: 1920/1080; width: 100%\\"
       >
         <source
@@ -638,6 +645,7 @@ exports[`Clip Snapshot component rendered on server supports new Origami images,
           poster=\\"\\"
           preload=\\"auto\\"
           id=\\"clip-localhost:8080/fakevideo.mpg\\"
+          crossorigin=\\"anonymous\\"
           style=\\"height: fit-content; width: 100%\\"
         >
           <source

package/src/components/content-tree/Clip/test/client/index.spec.ts

@@ -172,7 +172,6 @@ describe('Clip', () => {
   it('should play closed captions by default when available', () => {
     clipInstance.videoEl.dispatchEvent(new Event('playing'))
     expect(clipInstance.videoEl.textTracks[0]?.mode).toBe('showing')
-    expect(clipInstance.videoEl.getAttribute('crossorigin')).toBe('true')
     const closedCaptionIcon = document.querySelector('.cp-clip__closed-caption')
     expect(
       closedCaptionIcon?.getAttribute('data-display-closed-captions')

package/src/components/content-tree/Clip/test/index.spec.ts

@@ -186,6 +186,7 @@ describe('Clip', () => {
       expect(clip.opts.systemTitle).toBe(
         clip.containerEl.getAttribute('data-cp-clip-system-title')
       )
+      expect(clip.videoEl.crossOrigin).toBe('anonymous')
     })
 
     it('dispatches an analytics mount event when the component is initialised', () => {