@financial-times/cp-content-pipeline-ui 6.4.6 → 6.6.0

package/src/components/Clip/client/index.ts

@@ -38,6 +38,7 @@ interface TrackingData {
   category: string
   contentId?: string
   action: string
+  url: string
   progress?: number
   amount?: number
   amountPercentage?: number
@@ -194,91 +195,105 @@ class Clip extends ClipInterface {
   }
 
   async init() {
-    this.performSourceErrorCheck()
+    try {
+      this.performSourceErrorCheck()
+
+      if (
+        !this.opts.noDescription ||
+        !this.opts.noInfoBox ||
+        !this.opts.noCaption
+      ) {
+        await loadExpander()
+      }
 
-    if (
-      !this.opts.noDescription ||
-      !this.opts.noInfoBox ||
-      !this.opts.noCaption
-    ) {
-      await loadExpander()
-    }
+      this.videoEl.addEventListener('playing', this.markPlayStart.bind(this))
+      this.videoEl.addEventListener(
+        'pause',
+        this.updateAmountWatched.bind(this)
+      )
 
-    this.videoEl.addEventListener('playing', this.markPlayStart.bind(this))
-    this.videoEl.addEventListener('pause', this.updateAmountWatched.bind(this))
-
-    this.addEvents([
-      'playing',
-      'pause',
-      'ended',
-      'seeked',
-      'error',
-      'stalled',
-      'waiting',
-      'timeupdate',
-    ])
-
-    /* When a video starts to autoplay the controls will be visible for about a second.
+      this.addEvents([
+        'playing',
+        'pause',
+        'ended',
+        'seeked',
+        'error',
+        'stalled',
+        'waiting',
+        'timeupdate',
+      ])
+
+      /* When a video starts to autoplay the controls will be visible for about a second.
        We want to remove the controls for the initial play, but also add them back in when the user
        wants to see the controls (mouseover focus, and press on a touchscreen).
     */
-    if (this.opts.autoplay && !this.useCustomPlayer) {
-      this.videoEl.addEventListener('mouseenter', () => {
-        this.videoEl.setAttribute('controls', '')
-      })
+      if (this.opts.autoplay && !this.useCustomPlayer) {
+        this.videoEl.addEventListener('mouseenter', () => {
+          this.videoEl.setAttribute('controls', '')
+        })
 
-      this.videoEl.addEventListener('touchenter', () => {
-        this.videoEl.setAttribute('controls', '')
-      })
+        this.videoEl.addEventListener('touchenter', () => {
+          this.videoEl.setAttribute('controls', '')
+        })
 
-      this.videoEl.addEventListener('focus', () => {
-        this.videoEl.setAttribute('controls', '')
-      })
-    }
+        this.videoEl.addEventListener('focus', () => {
+          this.videoEl.setAttribute('controls', '')
+        })
+      }
 
-    // send 'watched' event on page unload,
-    window.addEventListener(unloadEventName, this.fireWatchedEvent, {
-      capture: true,
-    })
+      // send 'watched' event on page unload,
+      window.addEventListener(unloadEventName, this.fireWatchedEvent, {
+        capture: true,
+      })
 
-    this.fireEvent('mount')
+      this.fireEvent('mount')
 
-    const expander = Expander?.init(this.containerEl)
-    this.expander = (Array.isArray(expander) ? expander[0] : expander) ?? null
+      const expander = Expander?.init(this.containerEl)
+      this.expander = (Array.isArray(expander) ? expander[0] : expander) ?? null
 
-    const oExpanderElement = this.expander?.oExpanderElement
+      const oExpanderElement = this.expander?.oExpanderElement
 
-    if (oExpanderElement) {
-      const buttonElement = oExpanderElement.querySelector('button')
-      if (buttonElement) {
-        buttonElement.setAttribute('tabindex', '-1')
+      if (oExpanderElement) {
+        const buttonElement = oExpanderElement.querySelector('button')
+        if (buttonElement) {
+          buttonElement.setAttribute('tabindex', '-1')
+        }
       }
-    }
 
-    // Listen to offline/online events
-    window.addEventListener('offline', this.onOfflineEvent)
-    window.addEventListener('online', this.onOnlineEvent)
-    // Listen to stalled event to show offline message
-    this.videoEl.addEventListener('stalled', this.onOfflineEvent)
-    // If the user play a buffered video offline, we need to hide the offline message.
-    this.videoEl.addEventListener('playing', this.onOfflineEvent)
-
-    // Mobile App, differently from DotCom, can render article offline, so we need to check if we are already offline.
-    if (!window.navigator.onLine && this.expander) {
-      this.showOffLineMessage()
-    }
+      // Listen to offline/online events
+      window.addEventListener('offline', this.onOfflineEvent)
+      window.addEventListener('online', this.onOnlineEvent)
+      // Listen to stalled event to show offline message
+      this.videoEl.addEventListener('stalled', this.onOfflineEvent)
+      // If the user play a buffered video offline, we need to hide the offline message.
+      this.videoEl.addEventListener('playing', this.onOfflineEvent)
+
+      // Mobile App, differently from DotCom, can render article offline, so we need to check if we are already offline.
+      if (!window.navigator.onLine && this.expander) {
+        this.showOffLineMessage()
+      }
 
-    if (this.expander) {
-      this.descriptionToggle()
-    }
-    //Add custom player
-    if (this.useCustomPlayer) {
-      this.createCustomPlayer()
-      //set default value for mute
-      this.muted =
-        !this.muteIcon ||
-        // TODO: fix this type properly
-        (this.opts.autoplay as boolean)
+      if (this.expander) {
+        this.descriptionToggle()
+      }
+      //Add custom player
+      if (this.useCustomPlayer) {
+        this.createCustomPlayer()
+        //set default value for mute
+        this.muted =
+          !this.muteIcon ||
+          // TODO: fix this type properly
+          (this.opts.autoplay as boolean)
+      }
+    } catch (error) {
+      const customEvent = new CustomEvent(
+        'cpContentPipeline.clipComponent.initFailure',
+        {
+          detail: { clipInstance: this, error },
+          bubbles: true,
+        }
+      )
+      this.containerEl.dispatchEvent(customEvent)
     }
   }
 
@@ -332,6 +347,7 @@ class Clip extends ClipInterface {
       //contentId: this.opts.id,
       action: eventType,
       progress: this.getRelevantProgress(),
+      url: window.location.href,
       video: {
         duration: this.getDuration(),
         source_url: this.opts.id,

package/src/components/Clip/client/progressBar.ts

@@ -26,13 +26,13 @@ class ProgressBar {
   private onWindowMouseMoveListener: (e: MouseEvent) => void
   private onWindowMouseUpListener: (e: MouseEvent) => void
   private opts: Required<Opts>
-  private isMobileDevice = false
+
   constructor(videoEl: HTMLVideoElement, opts: Opts) {
     this.videoEl = videoEl
     this.opts = { ...defaultOpts, ...opts }
     this.onWindowMouseMoveListener = this.windowMouseMoveListener.bind(this)
     this.onWindowMouseUpListener = this.windowMouseUpListener.bind(this)
-    this.isMobileDevice = isMobile()
+
     const container = document.createElement('div')
     container.classList.add('cp-clip__video-progress-bar')
     const mainBar = document.createElement('div')
@@ -88,17 +88,21 @@ class ProgressBar {
 
     //When mousedown for progressBarTimeTriggerTap time we dispatch the tap event
     container.addEventListener('mousedown', () => {
-      this.mousePressed = true
-      window.addEventListener('mouseup', this.onWindowMouseUpListener)
-      window.addEventListener('mousemove', this.onWindowMouseMoveListener)
+      if (!isMobile()) {
+        this.mousePressed = true
+        window.addEventListener('mouseup', this.onWindowMouseUpListener)
+        window.addEventListener('mousemove', this.onWindowMouseMoveListener)
+      }
     })
 
     container.addEventListener('mouseover', () => {
-      mainBar.classList.add('cp-clip__progress-enlarged')
+      if (!isMobile()) {
+        mainBar.classList.add('cp-clip__progress-enlarged')
+      }
     })
 
     container.addEventListener('mouseleave', () => {
-      if (!this.mousePressed) {
+      if (!this.mousePressed && !isMobile()) {
         mainBar.classList.remove('cp-clip__progress-enlarged')
       }
     })
@@ -235,7 +239,7 @@ class ProgressBar {
   }
 
   windowMouseUpListener(e: MouseEvent) {
-    if (this.mousePressed && !this.isMobileDevice) {
+    if (this.mousePressed) {
       this.scrub(e.clientX)
       this.mousePressed = false
       if (!e.target || !this?.container?.contains(e.target as Node)) {

package/src/components/Clip/template/component.tsx

@@ -72,7 +72,7 @@ export default function ClipComponent({
       <ClipTag
         id={id}
         clip={clip}
-        poster={posterAttribute}
+        poster={poster}
         accessibility={accessibility}
         autoplay={autoplay}
         loop={loop}

package/src/components/Clip/test/snapshot.spec.tsx

@@ -1,6 +1,8 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 import React from 'react'
+// TODO: React test renderer is depracated, we should use @testing-library/react
+// https://react.dev/warnings/react-test-renderer
 import renderer from 'react-test-renderer'
 import prettier from 'prettier'
 import { TextEncoder } from 'util'

package/src/components/Flourish/client/index.ts

@@ -0,0 +1,17 @@
+function hideIFrame(): void {
+  const flourishComponent = document.querySelectorAll(
+    '[data-component="flourish"]'
+  )
+  flourishComponent.forEach((component) => {
+    component.classList.add('disable-iframe')
+  })
+}
+
+function init(featureFlag: boolean = true): void {
+  // turning the feature flag off will hide the iframe and display the fallback image
+  if (!featureFlag) {
+    hideIFrame()
+  }
+}
+
+export default init

package/src/components/Flourish/client/main.scss

@@ -0,0 +1,38 @@
+.flourish {
+    &.flourish--iFrame {
+        @include oGridRespondTo(XL) {
+            max-width: oGridColspan(12);
+        }
+        margin-bottom: 0;
+        margin-top: oSpacingByName("s4")
+    }
+    // We need to force the iframe to be hidden if we turn the feature flag off
+    &.disable-iframe {
+        .flourish__i-frame {
+            display: none;
+        }
+
+        .flourish__figure {
+            display: block;
+        }
+    }
+}
+// Without JS the i-frame will not work, so we hide it
+.no-js {
+    .flourish__i-frame {
+        display: none;
+    }
+}
+.js {
+    .flourish__i-frame {
+        display: block;
+        border: 0;
+        @media screen and (max-width: 739px) {
+            // We need to enforce this otherwise it will use the inline styling
+            aspect-ratio: 3/4 !important;
+        }
+    }
+    .flourish__figure {
+        display: none;
+    }
+}

package/src/components/Flourish/index.tsx

@@ -1,12 +1,25 @@
 import React from 'react'
 import classnames from 'classnames'
-import { ContentTree } from '@financial-times/content-tree'
-import { FlourishFragment } from '@financial-times/cp-content-pipeline-client'
 
 type disclaimerProps = {
   id: string
 }
 
+type FlourishProps = {
+  id: string
+  type?: string
+  flourishType?: string
+  description?: string
+  layoutWidth?: string
+  fallbackImage: {
+    url?: string | null | undefined
+    width?: number | null | undefined
+    height?: number | null | undefined
+  }
+  iFrame?: boolean
+  inArticleBody?: boolean
+}
+
 const DisclaimerNotice = ({ id }: disclaimerProps) => (
   <div
     id={id}
@@ -30,20 +43,50 @@ export default function Flourish({
   description,
   layoutWidth,
   fallbackImage,
-}: ContentTree.Flourish & FlourishFragment) {
+  iFrame = false,
+  inArticleBody = true,
+}: FlourishProps) {
   const anchorHref = `#${id}`
   const fullGrid = layoutWidth === 'full-grid' || layoutWidth === 'grid'
   const figureClassnames = classnames({
     'n-content-picture': true,
     'n-content-layout__container': true,
     'n-content-picture--wide': fullGrid,
+    flourish__figure: iFrame,
   })
 
+  const iframeAspectRatio =
+    iFrame && fallbackImage?.width && fallbackImage?.height
+      ? `${fallbackImage.width}/${fallbackImage.height}`
+      : '16/9'
+
+  const imageAspectRatio =
+    !inArticleBody && fallbackImage?.width && fallbackImage?.height
+      ? {
+          width: '100%',
+          aspectRatio: `${fallbackImage.width}/${fallbackImage.height}`,
+        }
+      : {}
+
+  if (!id) return null
+
   return (
     <div
-      className="n-content-layout"
+      className={classnames({
+        'n-content-layout': inArticleBody,
+        flourish: iFrame,
+        'flourish--iFrame': iFrame,
+      })}
       data-layout-width={fullGrid ? 'full-grid' : null}
+      data-component="flourish"
     >
+      {iFrame && (
+        <iframe
+          src={`https://flo.uri.sh/visualisation/${id}/embed?hideTitle=${!inArticleBody}`} // hide the title of if in topper
+          style={{ width: '100%', aspectRatio: iframeAspectRatio }}
+          className="flourish__i-frame"
+        ></iframe>
+      )}
       <figure
         className={figureClassnames}
         data-original-image-width={fullGrid ? fallbackImage?.width : null}
@@ -51,12 +94,18 @@ export default function Flourish({
       >
         <a href={anchorHref}>
           <picture
-            data-asset-type="flourish"
+            // `flourish-embed` loads an iframe containing the JS version of a flourish chart
+            // `flourish` will be instead targeted by the flourish JS, that will replace the picture with the flourish JS version contained in an iframe
+            data-asset-type={iFrame ? 'flourish-embed' : 'flourish'}
             data-flourish-id={id}
             data-flourish-type={flourishType}
           >
             <DisclaimerNotice id={id} />
-            <img src={fallbackImage?.url} alt={description} />
+            <img
+              src={fallbackImage?.url || ''}
+              alt={description}
+              style={imageAspectRatio}
+            />
           </picture>
         </a>
       </figure>