@playpilot/tpi 8.29.10 → 8.30.0

package/src/tests/routes/components/YouTubeEmbed.test.js

@@ -1,72 +1,148 @@
 import { render } from '@testing-library/svelte'
-import { describe, expect, it } from 'vitest'
-
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
 import YouTubeEmbed from '../../../routes/components/YouTubeEmbed.svelte'
-import { beforeEach } from 'node:test'
 import { fakeFetch } from '../../helpers'
 
+function loadPlyr() {
+  const script = document.head.querySelector('script[src*="plyr"]')
+  script?.dispatchEvent(new Event('load'))
+}
+
 describe('YouTubeEmbed.svelte', () => {
+  /** @type {any} */ let Plyr
+  /** @type {any} */ let player
+  /** @type {any} */ let onready
+  /** @type {any} */ let statechange
+
   beforeEach(() => {
     fakeFetch()
+    onready = undefined
+    statechange = undefined
+
+    player = {
+      on: vi.fn((eventName, callback) => {
+        if (eventName === 'ready') onready = callback
+        if (eventName === 'statechange') statechange = callback
+      }),
+      play: vi.fn(),
+      pause: vi.fn(),
+      muted: false,
+      volume: 1,
+      currentTime: 0,
+    }
+
+    Plyr = vi.fn(() => player)
+    window.Plyr = Plyr
   })
 
-  it('Should render embed iframe with given video url and default options', () => {
-    const { container } = render(YouTubeEmbed, { embeddable_url: 'youtube.com/watch?v=abc' })
+  afterEach(() => {
+    delete window.Plyr
+    document.head.innerHTML = ''
+  })
 
-    expect(/** @type {HTMLIFrameElement} */ (container.querySelector('iframe')).src).toBe('https://video.playpilot.net/?video_id=abc&color=fa548a&muted=false&loop=false&captions=false&controls=&start_time=0&autoplay=true&playsinline=true')
+  it('Should render player element and initialize Plyr with default options', () => {
+    const { container } = render(YouTubeEmbed, { embeddable_url: 'youtube.com/watch?v=abc' })
+    loadPlyr()
+
+    /** @type {HTMLElement | null} */
+    const playerElement = container.querySelector('.player')
+
+    expect(playerElement).toBeTruthy()
+    expect(playerElement?.dataset.plyrEmbedId).toBe('abc')
+    expect(playerElement?.dataset.plyrProvider).toBe('youtube')
+
+    expect(Plyr).toHaveBeenCalledWith(
+      playerElement,
+      expect.objectContaining({
+        controls: [],
+        autoplay: true,
+        muted: false,
+        clickToPlay: false,
+        playsinline: true,
+        youtube: expect.objectContaining({ noCookie: true, cc_load_policy: 0, cc_lang_pref: 'auto' }),
+      }),
+    )
   })
 
-  it('Should render embed iframe with given controls', () => {
-    const { container } = render(YouTubeEmbed, { embeddable_url: 'youtube.com/watch?v=abc', controls: ['fullscreen', 'mute'] })
+  it('Should initialize Plyr with given controls', () => {
+    const { container } = render(YouTubeEmbed, {
+      embeddable_url: 'youtube.com/watch?v=abc',
+      controls: ['fullscreen', 'mute'],
+    })
 
-    expect(/** @type {HTMLIFrameElement} */ (container.querySelector('iframe')).src).toContain('&controls=fullscreen,mute')
+    loadPlyr()
+
+    expect(Plyr).toHaveBeenCalledWith(
+      container.querySelector('.player'),
+      expect.objectContaining({ controls: ['fullscreen', 'mute'] }),
+    )
   })
 
-  it('Should render embed iframe with muted if given', () => {
+  it('Should initialize Plyr muted if given', () => {
     const { container } = render(YouTubeEmbed, { embeddable_url: 'youtube.com/watch?v=abc', muted: true })
 
-    expect(/** @type {HTMLIFrameElement} */ (container.querySelector('iframe')).src).toContain('&muted=true')
+    loadPlyr()
+
+    expect(Plyr).toHaveBeenCalledWith(
+      container.querySelector('.player'),
+      expect.objectContaining({ muted: true }),
+    )
+  })
+
+  it('Should set current time on ready to given fallbackStartTime', () => {
+    render(YouTubeEmbed, { embeddable_url: 'youtube.com/watch?v=abc', fallbackStartTime: 8 })
+
+    loadPlyr()
+    onready?.()
+
+    expect(player.currentTime).toBe(8)
   })
 
-  it('Should render embed iframe with loop if given', () => {
-    const { container } = render(YouTubeEmbed, { embeddable_url: 'youtube.com/watch?v=abc', loop: true })
+  it('Should use stored playtime for video id, minus 1 second', () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = {
+      video_playtimes: { abc: 5 },
+    }
+
+    render(YouTubeEmbed, { embeddable_url: 'youtube.com/watch?v=abc' })
+
+    loadPlyr()
+    onready?.()
 
-    expect(/** @type {HTMLIFrameElement} */ (container.querySelector('iframe')).src).toContain('&loop=true')
+    expect(player.currentTime).toBe(4)
   })
 
-  it('Should render embed iframe with captions if given', () => {
+  it('Should enable captions in youtube options if given', () => {
     const { container } = render(YouTubeEmbed, { embeddable_url: 'youtube.com/watch?v=abc', captions: true })
+    loadPlyr()
 
-    expect(/** @type {HTMLIFrameElement} */ (container.querySelector('iframe')).src).toContain('&captions=true')
+    expect(Plyr).toHaveBeenCalledWith(container.querySelector('.player'), expect.objectContaining({ youtube: expect.objectContaining({ cc_load_policy: 1 }) }))
   })
 
-  it('Should render embed iframe with autoplay set to false if given', () => {
+  it('Should initialize Plyr with autoplay set to false if given', () => {
     const { container } = render(YouTubeEmbed, { embeddable_url: 'youtube.com/watch?v=abc', autoplay: false })
 
-    expect(/** @type {HTMLIFrameElement} */ (container.querySelector('iframe')).src).toContain('&autoplay=false')
+    loadPlyr()
+
+    expect(Plyr).toHaveBeenCalledWith(container.querySelector('.player'), expect.objectContaining({ autoplay: false }))
   })
 
-  it('Should start at given fallbackStartTime', () => {
-    const { container } = render(YouTubeEmbed, { embeddable_url: 'youtube.com/watch?v=abc', fallbackStartTime: 8 })
+  it('Should replay and re-mute on loop when video ends', () => {
+    render(YouTubeEmbed, { embeddable_url: 'youtube.com/watch?v=abc', loop: true, muted: true })
+
+    loadPlyr()
+    global.requestAnimationFrame = (callback) => (callback(0), 0)
 
-    expect(/** @type {HTMLIFrameElement} */ (container.querySelector('iframe')).src).toContain('&start_time=8')
+    statechange?.({ detail: { code: 0 } })
+
+    expect(player.play).toHaveBeenCalled()
+    expect(player.muted).toBe(true)
   })
 
   it('Should render error message if embeddable_url is invalid', () => {
     const { container, getByText } = render(YouTubeEmbed, { embeddable_url: '-' })
 
-    expect(container.querySelector('iframe')).not.toBeTruthy()
+    expect(container.querySelector('.player')).not.toBeTruthy()
     expect(getByText('Something went wrong')).toBeTruthy()
   })
-
-  it('Should include start_time for given video id if present, minus 1 second', () => {
-    // @ts-ignore
-    window.PlayPilotLinkInjections = {
-      video_playtimes: { abc: 5 },
-    }
-
-    const { container } = render(YouTubeEmbed, { embeddable_url: 'youtube.com/watch?v=abc', captions: true })
-
-    expect(/** @type {HTMLIFrameElement} */ (container.querySelector('iframe')).src).toContain('&start_time=4')
-  })
 })

package/src/tests/routes/components/YouTubeEmbedBackground.test.js

@@ -5,9 +5,8 @@ import YouTubeEmbedBackground from '../../../routes/components/YouTubeEmbedBackg
 
 describe('YouTubeEmbedBackground.svelte', () => {
   it('Should render embed iframe with given video url', () => {
-    const { container } = render(YouTubeEmbedBackground, { embeddable_url: 'youtube.com/watch?v=abc' })
+    const { getByTestId } = render(YouTubeEmbedBackground, { embeddable_url: 'youtube.com/watch?v=abc' })
 
-    // @ts-ignore
-    expect(container.querySelector('iframe').src).toBe('https://video.playpilot.net/?video_id=abc&color=fa548a&muted=true&loop=true&captions=false&controls=&start_time=5&autoplay=true&playsinline=true')
+    expect(getByTestId('youtube.com/watch?v=abc')).toBeTruthy()
   })
 })

package/src/tests/routes/components/YouTubeEmbedOverlay.test.js

@@ -5,10 +5,9 @@ import YouTubeEmbedOverlay from '../../../routes/components/YouTubeEmbedOverlay.
 
 describe('YouTubeEmbedOverlay.svelte', () => {
   it('Should render embed iframe with given video url', () => {
-    const { container } = render(YouTubeEmbedOverlay, { embeddable_url: 'youtube.com/watch?v=abc', onclose: () => null })
+    const { getByTestId } = render(YouTubeEmbedOverlay, { embeddable_url: 'youtube.com/watch?v=abc', onclose: () => null })
 
-    // @ts-ignore
-    expect(container.querySelector('iframe').src).toBe('https://video.playpilot.net/?video_id=abc&color=fa548a&muted=false&loop=false&captions=false&controls=current-time,fullscreen,mute,play,progress&start_time=0&autoplay=true&playsinline=true')
+    expect(getByTestId('youtube.com/watch?v=abc')).toBeTruthy()
   })
 
   it('Should fire given onclose function on click of close button and backdrop', async () => {