@playpilot/tpi 8.29.11 → 8.31.0

package/src/routes/components/YouTubeEmbed.svelte

@@ -14,14 +14,14 @@
     fallbackStartTime?: number
   }
 
-  const { embeddable_url = '', controls = [], muted = false, loop = false, captions = false, autoplay = true, showMuteControls = false, fallbackStartTime = 0 }: Props = $props()
+  let { embeddable_url = '', controls = [], muted = false, loop = false, captions = false, autoplay = true, showMuteControls = false, fallbackStartTime = 0 }: Props = $props()
 
   const videoId = $derived(getVideoId(embeddable_url))
   const startTime = $derived((window?.PlayPilotLinkInjections?.video_playtimes?.[videoId || ''] || (fallbackStartTime + 1)) - 1)
   const color = window?.getComputedStyle(document.body).getPropertyValue('--playpilot-primary')?.replace('#', '') || 'fa548a'
 
-  let iframe: HTMLIFrameElement | null = $state(null)
-  let isMuted = $state(muted)
+  let element: HTMLElement | null = $state(null)
+  let player: any
 
   onMount(() => {
     if (!videoId) return
@@ -37,37 +37,74 @@
     return () => clearInterval(interval)
   })
 
-  export function toggleMute(state = !isMuted): void {
-    if (isMuted != state) iframe?.contentWindow?.postMessage('mute', '*')
-    isMuted = state
+  function initialize(): void {
+    if (typeof window.Plyr === 'undefined') return
+    if (!element) return
+
+    element.dataset.plyrEmbedId = videoId!
+    element.style.setProperty('--plyr-color-main', '#' + color)
+
+    player = new window.Plyr(element, {
+      controls,
+      playsinline: true,
+      autoplay,
+      muted,
+      clickToPlay: false,
+      youtube: {
+        noCookie: true,
+        cc_load_policy: captions ? 1 : 0,
+        cc_lang_pref: 'auto',
+      },
+    })
+
+    player.on('ready', () => {
+      player.currentTime = startTime
+      toggleMute(muted)
+    })
+
+    if (!loop) return
+
+    player.on('statechange', (event: { detail: { code: number } }) => {
+      if (event.detail.code !== 0) return
+
+      requestAnimationFrame(() => {
+        player.play()
+        toggleMute(muted)
+      })
+    })
+  }
+
+  export function toggleMute(state = !muted): void {
+    player.muted = state
+    player.volume = muted ? 0 : 1
+
+    muted = state
   }
 
   export function play(event: CustomEvent): void {
-    if (event.detail === embeddable_url) iframe?.contentWindow?.postMessage('play', '*')
+    if (event.detail === embeddable_url) player?.play()
   }
 
   export function pause(event: CustomEvent): void {
-    if (event.detail === embeddable_url) iframe?.contentWindow?.postMessage('pause', '*')
+    if (event.detail === embeddable_url) player?.pause()
   }
 </script>
 
 <svelte:window onplayembed={play} onpauseembed={pause} />
 
+<svelte:head>
+  {#if videoId}
+    <script src="https://unpkg.com/plyr@3" onload={initialize}></script>
+    <link rel="stylesheet" href="https://unpkg.com/plyr@3/dist/plyr.css" />
+  {/if}
+</svelte:head>
+
 {#if videoId}
-  <iframe
-    bind:this={iframe}
-    width="600"
-    height="338"
-    src="https://video.playpilot.net/?video_id={videoId}&color={color}&muted={muted}&loop={loop}&captions={captions}&controls={controls.join(',')}&start_time={startTime}&autoplay={autoplay}&playsinline=true"
-    title="YouTube video player"
-    frameborder="0"
-    referrerpolicy="strict-origin-when-cross-origin"
-    allowfullscreen>
-  </iframe>
+  <div bind:this={element} class="player" data-plyr-provider="youtube" data-plyr-embed-id data-testid={embeddable_url}></div>
 
   {#if showMuteControls}
     <button class="mute" onclick={() => toggleMute()} aria-label="Mute">
-      <IconMute muted={isMuted} />
+      <IconMute {muted} />
     </button>
   {/if}
 {:else}
@@ -75,7 +112,11 @@
 {/if}
 
 <style lang="scss">
-  iframe {
+  .player {
+    --plyr-control-icon-size: 24px;
+    --plyr-video-controls-background: linear-gradient(rgba(0, 0, 0, 0), black);
+    --plyr-font-size-time: 16px;
+    --plyr-font-family: 'Consolas', monospace;
     z-index: -1;
     position: relative;
     width: 100%;

package/src/routes/components/YouTubeEmbedBackground.svelte

@@ -22,6 +22,7 @@
   .video-background {
     background: black;
 
+    :global(.plyr),
     :global(iframe) {
       position: absolute;
       height: var(--height);

package/src/routes/components/YouTubeEmbedOverlay.svelte

@@ -37,7 +37,7 @@
     left: 0;
     background: theme(detail-backdrop, rgba(0, 0, 0, 0.95));
 
-    :global(iframe) {
+    :global(.plyr) {
       z-index: 1;
       position: relative;
       display: block;

package/src/routes/elements/+page.svelte

@@ -22,6 +22,7 @@
   import TitlesRail from '../components/Rails/TitlesRail.svelte'
   import ParticipantsRail from '../components/Rails/ParticipantsRail.svelte'
   import InfiniteTitlesRail from '../components/Rails/InfiniteTitlesRail.svelte'
+  import YouTubeEmbed from '../components/YouTubeEmbed.svelte'
 
   if (browser) {
     // @ts-ignore
@@ -43,6 +44,12 @@
 
 <p>This page lays out various elements used in TPI. It does not currently include editor elements.</p>
 
+<h2>Youtube Embed</h2>
+
+<div class="video">
+  <YouTubeEmbed embeddable_url="https://www.youtube.com/watch?v=bBMajXwi6Cs" controls={['progress', 'play']} loop showMuteControls muted />
+</div>
+
 <h2>Title</h2>
 
 <div class="group">
@@ -267,4 +274,9 @@
     padding: margin(2);
     margin-bottom: margin(1);
   }
+
+  .video {
+    position: relative;
+    max-width: 400px;
+  }
 </style>

package/src/tests/lib/api/externalPages.test.js

@@ -1,10 +1,11 @@
 import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest'
 import { waitFor } from '@testing-library/svelte'
 
-import { fetchLinkInjections, pollLinkInjections, runAiBasedOnResponse } from '$lib/api/externalPages'
+import { fetchLinkInjections, pollLinkInjections, runAiBasedOnResponse, saveLinkInjections } from '$lib/api/externalPages'
 import { authorize, isEditorialModeEnabled } from '$lib/api/auth'
 import { Language } from '$lib/enums/Language'
 import { api } from '$lib/api/api'
+import { generateInjection } from '../../helpers'
 
 vi.mock('$lib/api/api', () => ({
   api: vi.fn(),
@@ -379,4 +380,136 @@ describe('$lib/api/externalPages', () => {
       expect(api).toHaveBeenCalled()
     })
   })
+
+  describe('saveLinkInjections', () => {
+    beforeEach(() => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections = { token: 'a' }
+    })
+
+    const manualInjection = { ...generateInjection('Some injection', 'injection'), manual: true }
+    const aiInjection = generateInjection('Some other injection', 'other injection')
+
+    it('Should call api with POST method and only manual injections included', async () => {
+      vi.mocked(api).mockResolvedValueOnce({ ok: true })
+
+      // @ts-ignore
+      await saveLinkInjections([manualInjection, aiInjection])
+
+      expect(api).toHaveBeenCalledWith(
+        expect.stringContaining('api-token'),
+        expect.objectContaining({
+          method: 'POST',
+          body: expect.objectContaining({
+            manual_injections: [
+              {
+                sid: manualInjection.sid,
+                title: manualInjection.title,
+                sentence: manualInjection.sentence,
+                phrase_before: manualInjection.phrase_before,
+                phrase_after: manualInjection.phrase_after,
+                playpilot_url: manualInjection.playpilot_url,
+                after_article: false,
+                after_article_style: null,
+                in_text: true,
+                inactive: false,
+                removed: false,
+                type: manualInjection.type,
+              },
+            ],
+          }),
+        }),
+      )
+    })
+
+    it('Should apply given values for after_article, in_text, inactive and removed instead of defaults', async () => {
+      vi.mocked(api).mockResolvedValueOnce({ ok: true })
+
+      const injection = {
+        ...manualInjection,
+        after_article: true,
+        after_article_style: 'modal_button',
+        in_text: false,
+        inactive: true,
+        removed: true,
+      }
+
+      // @ts-ignore
+      await saveLinkInjections([injection])
+
+      expect(api).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          body: expect.objectContaining({
+            manual_injections: [
+              expect.objectContaining({
+                after_article: true,
+                after_article_style: 'modal_button',
+                in_text: false,
+                inactive: true,
+                removed: true,
+              }),
+            ],
+          }),
+        }),
+      )
+    })
+
+    it('Should save with given type', async () => {
+      vi.mocked(api).mockResolvedValueOnce({ ok: true })
+
+      // @ts-ignore
+      await saveLinkInjections([{ ...manualInjection, type: 'participant' }])
+
+      expect(api).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          body: expect.objectContaining({
+            manual_injections: [
+              expect.objectContaining({
+                type: 'participant',
+              }),
+            ],
+          }),
+        }),
+      )
+    })
+
+    it('Should include content_text_selector from window.PlayPilotLinkInjections.selector', async () => {
+      vi.mocked(api).mockResolvedValueOnce({ ok: true })
+
+      // @ts-ignore
+      window.PlayPilotLinkInjections = { token: 'a', selector: '.some-element' }
+
+      // @ts-ignore
+      await saveLinkInjections([manualInjection])
+
+      expect(api).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          body: expect.objectContaining({
+            content_text_selector: '.some-element',
+          }),
+        }),
+      )
+    })
+
+    it('Should return the original linkInjections array unchanged, including non-manual injections', async () => {
+      vi.mocked(api).mockResolvedValueOnce({ ok: true })
+
+      const linkInjections = [manualInjection, aiInjection]
+
+      // @ts-ignore
+      const result = await saveLinkInjections(linkInjections)
+
+      expect(result).toEqual(linkInjections)
+    })
+
+    it('Should throw when the response is faulty', async () => {
+      vi.mocked(api).mockResolvedValueOnce(undefined)
+
+      // @ts-ignore
+      await expect(async () => await saveLinkInjections([manualInjection])).rejects.toThrowError('saveLinkInjections response was faulty')
+    })
+  })
 })

package/src/tests/routes/components/Editorial/EditorItem.test.js

@@ -207,7 +207,6 @@ describe('EditorItem.svelte', () => {
 
     expect(queryByLabelText('Expand')).not.toBeTruthy()
     expect(getByText(fakeLinkInjections[4].participant_details?.name || '-')).toBeTruthy()
-    expect(container.querySelector('.poster')).not.toBeTruthy()
-    expect(container.querySelector('.placeholder-image')).toBeTruthy()
+    expect(container.querySelector('.participant')).toBeTruthy()
   })
 })

package/src/tests/routes/components/Editorial/ManualInjection.test.js

@@ -2,9 +2,10 @@ import { fireEvent, render, waitFor } from '@testing-library/svelte'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import ManualInjection from '../../../../routes/components/Editorial/ManualInjection.svelte'
-import { searchTitles } from '$lib/api/search'
-import { title } from '$lib/fakeData'
+import { searchParticipants, searchTitles } from '$lib/api/search'
+import { participants, title } from '$lib/fakeData'
 import { getIndexOfSelection } from '$lib/selection'
+import { participantUrl, titleUrl } from '$lib/routes'
 
 function createSelectionMock() {
   const container = document.querySelector('div')
@@ -26,6 +27,7 @@ function createSelectionMock() {
 
 vi.mock('$lib/api/search', () => ({
   searchTitles: vi.fn(),
+  searchParticipants: vi.fn(),
 }))
 
 vi.mock('$lib/selection', () => ({
@@ -93,7 +95,7 @@ describe('ManualInjection.svelte', () => {
       sid: title.sid,
       title: 'text',
       sentence: 'Some text in a sentence',
-      playpilot_url: `https://www.playpilot.com/show/${title.slug}`,
+      playpilot_url: titleUrl(title),
       key: expect.any(String),
       title_details: title,
       manual: true,
@@ -136,7 +138,7 @@ describe('ManualInjection.svelte', () => {
       sid: title.sid,
       title: 'text',
       sentence: 'Some text in a sentence',
-      playpilot_url: `https://www.playpilot.com/show/${title.slug}`,
+      playpilot_url: titleUrl(title),
       key: expect.any(String),
       title_details: title,
       manual: true,
@@ -179,7 +181,7 @@ describe('ManualInjection.svelte', () => {
       sid: title.sid,
       title: 'Some title',
       sentence: 'Some title',
-      playpilot_url: `https://www.playpilot.com/show/${title.slug}`,
+      playpilot_url: titleUrl(title),
       key: expect.any(String),
       title_details: title,
       manual: true,
@@ -222,7 +224,7 @@ describe('ManualInjection.svelte', () => {
       sid: title.sid,
       title: 'Some other paragraph',
       sentence: 'Some other paragraph',
-      playpilot_url: `https://www.playpilot.com/show/${title.slug}`,
+      playpilot_url: titleUrl(title),
       key: expect.any(String),
       title_details: title,
       manual: true,
@@ -285,4 +287,39 @@ describe('ManualInjection.svelte', () => {
 
     await waitFor(() => expect(searchTitles).toHaveBeenCalled())
   })
+
+  it('Should save participants when selected', async () => {
+    createSelectionMock()
+
+    const participant = participants[0]
+
+    vi.mocked(searchParticipants).mockResolvedValueOnce([participant])
+    vi.mocked(getIndexOfSelection).mockReturnValueOnce({ start: 5, end: 10 })
+
+    const onsave = vi.fn()
+    const { getByText, getByLabelText } = render(ManualInjection, { onsave })
+
+    await fireEvent.mouseUp(window)
+    await fireEvent.click(getByText('Cast & Crew'))
+
+    await waitFor(async () => {
+      await fireEvent.input(getByLabelText('Search...'), { target: { value: 'test' } })
+      await fireEvent.click(getByText(participants[0].name))
+    })
+
+    await fireEvent.click(getByText('Add playlink'))
+
+    expect(onsave).toHaveBeenCalledWith({
+      sid: participants[0].sid,
+      title: 'text',
+      sentence: 'Some text in a sentence',
+      playpilot_url: participantUrl(participant),
+      key: expect.any(String),
+      participant_details: participant,
+      manual: true,
+      phrase_before: 'Some',
+      phrase_after: 'in a',
+      type: 'participant',
+    })
+  })
 })

package/src/tests/routes/components/Editorial/Search/{TitleSearch.test.js → TypeSearch.test.js}

@@ -1,21 +1,22 @@
 import { fireEvent, render, waitFor } from '@testing-library/svelte'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import TitleSearch from '../../../../../routes/components/Editorial/Search/TitleSearch.svelte'
-import { searchTitles } from '$lib/api/search'
+import TypeSearch from '../../../../../routes/components/Editorial/Search/TypeSearch.svelte'
+import { searchTitles, searchParticipants } from '$lib/api/search'
 import { title } from '$lib/fakeData'
 
 vi.mock('$lib/api/search', () => ({
   searchTitles: vi.fn(),
+  searchParticipants: vi.fn(),
 }))
 
-describe('TitleSearch.svelte', () => {
+describe('TypeSearch.svelte', () => {
   beforeEach(() => {
     vi.resetAllMocks()
   })
 
   it('Should search for titles when inputting text', async () => {
-    const { getByRole } = render(TitleSearch)
+    const { getByRole } = render(TypeSearch)
 
     await fireEvent.input(getByRole('textbox'), { target: { value: 'test' } })
 
@@ -25,7 +26,7 @@ describe('TitleSearch.svelte', () => {
   it('Should show empty state when no results are returned', async () => {
     vi.mocked(searchTitles).mockResolvedValueOnce([])
 
-    const { getByRole, getByText } = render(TitleSearch)
+    const { getByRole, getByText } = render(TypeSearch)
 
     await fireEvent.input(getByRole('textbox'), { target: { value: 'test' } })
 
@@ -37,7 +38,7 @@ describe('TitleSearch.svelte', () => {
   it('Should show results when given', async () => {
     vi.mocked(searchTitles).mockResolvedValueOnce([title])
 
-    const { getByRole, getByText, getByTestId } = render(TitleSearch)
+    const { getByRole, getByText, getByTestId } = render(TypeSearch)
 
     await fireEvent.input(getByRole('textbox'), { target: { value: 'test' } })
 
@@ -52,15 +53,26 @@ describe('TitleSearch.svelte', () => {
     vi.mocked(searchTitles).mockResolvedValueOnce([title])
 
     const onselect = vi.fn()
-    const { getByRole, getByText, queryByTestId } = render(TitleSearch, { onselect, query: '' })
+    const { getByRole, getByText, queryByTestId } = render(TypeSearch, { onselect, query: '' })
 
     await fireEvent.input(getByRole('textbox'), { target: { value: 'test' } })
 
     await waitFor(async () => {
-      await fireEvent.click(getByRole('button'))
-      expect(onselect).toHaveBeenCalledWith(title)
+      await fireEvent.click(getByText(title.title))
+
+      expect(onselect).toHaveBeenCalledWith(title, 'title')
       expect(queryByTestId('search-results')).not.toBeTruthy()
       expect(getByText(title.title)).toBeTruthy()
     })
   })
+
+  it('Should search for participants after changing tab when inputting text', async () => {
+    const { getByRole, getByText } = render(TypeSearch)
+
+    await fireEvent.click(getByText('Cast & Crew'))
+    await fireEvent.input(getByRole('textbox'), { target: { value: 'test' } })
+
+    expect(searchTitles).not.toHaveBeenCalled()
+    expect(searchParticipants).toHaveBeenCalled()
+  })
 })

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')
-  })
 })