@financial-times/cp-content-pipeline-ui 6.15.2 → 6.15.3

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

@@ -458,6 +458,7 @@ class Clip extends ClipInterface {
     // disable default controls
     video.controls = false
 
+    // CREATE ALL THE CUSTOM CONTOLS
     const customControls = document.createElement('div')
     customControls.classList.add('cp-clip__video-controls')
 
@@ -600,12 +601,7 @@ class Clip extends ClipInterface {
     customControls.prepend(playIconContainer)
     customControls.append(bottomBar)
 
-    video.addEventListener('loadeddata', () => {
-      const hasNoAudio = this.videoHasNoAudio()
-      if (hasNoAudio) {
-        this.muteIcon?.replaceWith(noAudioIcon)
-      }
-    })
+    // END CREATE ALL THE CUSTOM CONTOLS
 
     video.addEventListener('playing', () => {
       //resize controls in case poster is different size than video at the end
@@ -653,20 +649,9 @@ class Clip extends ClipInterface {
       }
     })
 
-    video.addEventListener('waiting', () => {
-      this.showLoadingIndicator()
-    })
-
-    video.addEventListener('canplay', () => {
-      this.hideLoadingIndicator()
-    })
-
-    video.addEventListener('canplaythrough', () => {
-      this.hideLoadingIndicator()
-    })
-
     this.resizeControls()
 
+    // EVENTS TO DO WITH READY STATE / LOADING STATUS
     const onLoadedMetaData = () => {
       this.resizeControls()
       const duration = formatTime(this.getDuration())
@@ -677,12 +662,50 @@ class Clip extends ClipInterface {
       this.containerEl.classList.add('cp-clip--ready')
     }
 
+    const onLoadedData = () => {
+      const hasNoAudio = this.videoHasNoAudio()
+      if (hasNoAudio) {
+        this.muteIcon?.replaceWith(noAudioIcon)
+      }
+    }
+
     if (video.readyState >= 1) {
       onLoadedMetaData()
     } else {
       video.addEventListener('loadedmetadata', onLoadedMetaData)
     }
 
+    if (video.readyState >= 2) {
+      onLoadedData()
+    } else {
+      video.addEventListener('loadeddata', () => {
+        onLoadedData()
+      })
+    }
+
+    if (video.readyState >= 3) {
+      this.hideLoadingIndicator()
+    }
+
+    // NB: videos can go back and forth between readystates 2 and 3
+
+    // will fire when video drops from readystate >=3 to readystate <=2
+    video.addEventListener('waiting', () => {
+      this.showLoadingIndicator()
+    })
+
+    // will fire when video goes from readystate <=2 to 3
+    video.addEventListener('canplay', () => {
+      this.hideLoadingIndicator()
+    })
+
+    // will fire when video gets to readystate 4
+    video.addEventListener('canplaythrough', () => {
+      this.hideLoadingIndicator()
+    })
+
+    // END EVENTS TO DO WITH READY STATE / LOADING STATUS
+
     customControls.addEventListener('click', (event) => {
       const isVisible = isElementVisible(customControls)
       this.fadeIn()

package/src/components/Clip/test/fixtures.ts

@@ -33,6 +33,27 @@ export const inlineVideoAutoplay = Clip({
     ],
   },
 })
+export const inlineVideoNoAudio = Clip({
+  dataLayout: 'in-line',
+  url: 'https://d1e00ek4ebabms.cloudfront.net/production/84d7e1b0-e8b2-4ffc-a798-306f29dc9d52.png',
+  description:
+    ' Dolor sit amet, consectetur adipiscing elit. Sed sit amet odio quis ante auctor dapibus. Sed dapibus cursus nisi, tincidunt sagittis sapien vehicula vitae.',
+  poster:
+    'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F84d7e1b0-e8b2-4ffc-a798-306f29dc9d52.png?fit=scale-down&source=next&width=700',
+  caption: 'Aenean lobortis volutpat nunc vitae elementum',
+  autoplay: true,
+  muted: true,
+  loop: true,
+  noAudio: true,
+  credits: 'Copyright Line',
+  accessibility: {
+    captions: [
+      {
+        url: 'https://next-media-api.ft.com/captions/16862228218010.vtt',
+      },
+    ],
+  },
+})
 
 export const teaserClipWithoutExpander = Clip({
   dataLayout: 'in-line',

package/src/components/Clip/test/index.spec.ts

@@ -4,6 +4,7 @@
 import {
   inlineVideo,
   inlineVideoAutoplay,
+  inlineVideoNoAudio,
   teaserClipWithMultipleSources,
   teaserClipWithoutExpander,
 } from './fixtures'
@@ -33,6 +34,9 @@ initialMocks()
 
 const mockVideo = (video) => {
   let playInterval = null
+  video.dispatchEvent(new Event('loadeddata'))
+  video.dispatchEvent(new Event('canplay'))
+  video.dispatchEvent(new Event('canplaythrough'))
   video.load = () => {
     /* do nothing */
   }
@@ -43,7 +47,6 @@ const mockVideo = (video) => {
     //mock that the video has a duration of 10 seconds when we play it due it is fully loaded
     video.duration = 10000
     video.paused = false
-    video.dispatchEvent(new Event('loadeddata'))
     video.dispatchEvent(new Event('playing'))
   }
   video.pause = () => {
@@ -413,6 +416,52 @@ describe('Clip', () => {
     })
   })
 
+  describe('with no audio', () => {
+    let clips: Array<Clip>
+
+    beforeEach(() => {
+      document.body.innerHTML = inlineVideoNoAudio
+      clips = Clip.init()
+      mockClips(clips)
+    })
+
+    afterEach(() => {
+      const elem = document.body.children[0]
+      document.body.removeChild(elem)
+      clips.forEach((clip) => clip.destroy())
+    })
+
+    it("if the video doesn't have audio it should show 'no audio' icon after playing", (done) => {
+      const clip = clips[0]
+      expect(clip.muted).toBe(true)
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const listener = (e) => {
+        expect(clip.muted).toBe(true)
+        expect(
+          clip.containerEl.querySelector('.cp-clip__no-audio')
+        ).toBeTruthy()
+        clip.videoEl.removeEventListener('playing', listener)
+        done()
+      }
+      clip.videoEl.addEventListener('playing', listener)
+      clip.videoEl.play()
+    })
+    it("if the video doesn't have audio it shouldn't show mute icon after playing", (done) => {
+      const clip = clips[0]
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const listener = (e) => {
+        expect(clip.muted).toBe(true)
+        expect(
+          clip.containerEl.querySelector('[data-test-id="cp-clip__mute-icon"]')
+        ).toBeFalsy()
+        clip.videoEl.removeEventListener('playing', listener)
+        done()
+      }
+      clip.videoEl.addEventListener('playing', listener)
+      clip.videoEl.play()
+    })
+  })
+
   describe('with autoplay', () => {
     let clips: Array<Clip>
 
@@ -584,23 +633,6 @@ describe('Clip', () => {
       clip.videoEl.play()
     })
 
-    it("if the video doesn't have audio it shouldn't show mute icon after playing", (done) => {
-      const clip = clips[0]
-      clip.opts.noAudio = true
-      expect(clip.muted).toBe(true)
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const listener = (e) => {
-        expect(clip.muted).toBe(true)
-        expect(
-          clip.containerEl.querySelector('[data-test-id="cp-clip__mute-icon"]')
-        ).toBeFalsy()
-        clip.videoEl.removeEventListener('playing', listener)
-        done()
-      }
-      clip.videoEl.addEventListener('playing', listener)
-      clip.videoEl.play()
-    })
-
     it('mute icon should change and set or unset the video muted', (done) => {
       const clip = clips[0]
       expect(clip.muted).toBe(true)
@@ -627,23 +659,6 @@ describe('Clip', () => {
       clip.muteIcon.click()
     })
 
-    it("if the video doesn't have audio it should show no audio icon after playing", (done) => {
-      const clip = clips[0]
-      clip.opts.noAudio = true
-      expect(clip.muted).toBe(true)
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const listener = (e) => {
-        expect(clip.muted).toBe(true)
-        expect(
-          clip.containerEl.querySelector('.cp-clip__no-audio')
-        ).toBeTruthy()
-        clip.videoEl.removeEventListener('playing', listener)
-        done()
-      }
-      clip.videoEl.addEventListener('playing', listener)
-      clip.videoEl.play()
-    })
-
     it('should assing empty string to the poster attribute if autoplay mode is enabled', () => {
       const clip = clips[0]
       expect(clip.videoEl.getAttribute('poster')).toBe('')