@playpilot/tpi 8.29.11 → 8.30.0

package/src/lib/types/global.d.ts

@@ -12,6 +12,7 @@ declare global {
       mount(): void
       destroy(): void
     }
+    Plyr: any
   }
 }
 

package/src/routes/components/Explore/Routes/ExploreModal.svelte

@@ -1,107 +1,107 @@
-<script lang="ts">
-  import { fetchParticipantBySid } from '$lib/api/participants'
-  import { fetchSimilarTitles, fetchTitleBySid } from '$lib/api/titles'
-  import { mobileBreakpoint } from '$lib/constants'
-  import { SplitTest } from '$lib/enums/SplitTest'
-  import { t } from '$lib/localization'
-  import { openModal, type ModalType } from '$lib/modal'
-  import { getSplitTestVariantName, trackSplitTestView } from '$lib/splitTest'
-  import type { TitleData } from '$lib/types/title'
-  import Modal from '../../Modals/Modal.svelte'
-
-  interface Props {
-    navigate?: (key: string, pushState?: boolean) => void
-  }
-
-  const { navigate = () => null }: Props = $props()
-
-  async function openModalViaRoute(): Promise<void> {
-    const currentUrl = new URL(document.location.toString())
-    const sid = currentUrl.searchParams.get('sid')
-
-    if (!sid) return
-
-    let type: ModalType = sid.startsWith('pr') ? 'participant' : 'title' // Sids with with `pr` for participants, `ti` for titles
-    let data: any = null
-
-    if (type === 'title') {
-      const isMobile = window.innerWidth < mobileBreakpoint
-      const isInReelSplitTest = isMobile && getSplitTestVariantName(SplitTest.Reels) === 'Reel'
-
-      if (isMobile) trackSplitTestView(SplitTest.Reels)
-
-      type = isMobile && isInReelSplitTest ? 'titles-reel' : 'titles-rail'
-
-      const [title, railTitles] = (await Promise.allSettled([fetchTitleBySid(sid), fetchSimilarTitles({ sid } as unknown as TitleData)])).map((promise) =>
-        promise.status === 'fulfilled' ? promise.value : null,
-      )
-      data = [title as TitleData, ...(railTitles as TitleData[])]
-    } else if (type === 'participant') {
-      data = await fetchParticipantBySid(sid)
-    }
-
-    openModal({
-      type,
-      data,
-      props: {
-        onclose: () => navigate('home'),
-        pushState: false,
-      },
-    })
-  }
-</script>
-
-{#await openModalViaRoute()}
-  <Modal blur pushState={false}>
-    {#snippet dialog()}
-      <div class="loading">
-        <div class="bar"></div>
-        <div class="bar"></div>
-        <div class="bar"></div>
-      </div>
-    {/snippet}
-  </Modal>
-{:catch}
-  <Modal blur onclose={() => navigate('home')} pushState={false}>
-    <div class="error">
-      {t('An Error Occurred')}
-    </div>
-  </Modal>
-{/await}
-
-<style lang="scss">
-  .loading {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    gap: margin(0.5);
-  }
-
-  @keyframes animate-bar {
-    to {
-      height: margin(3);
-      opacity: 0.5;
-    }
-  }
-
-  .bar {
-    height: margin(4);
-    width: margin(1);
-    border-radius: margin(0.25);
-    background: white;
-    animation: animate-bar 750ms infinite;
-
-    @for $i from 0 through 2 {
-      &:nth-child(#{$i}) {
-        animation-delay: $i * 250ms;
-      }
-    }
-  }
-
-  .error {
-    padding: margin(2);
-    font-size: 1.25em;
-    color: theme(text-color);
-  }
-</style>
+<script lang="ts">
+  import { fetchParticipantBySid } from '$lib/api/participants'
+  import { fetchSimilarTitles, fetchTitleBySid } from '$lib/api/titles'
+  import { mobileBreakpoint } from '$lib/constants'
+  import { SplitTest } from '$lib/enums/SplitTest'
+  import { t } from '$lib/localization'
+  import { openModal, type ModalType } from '$lib/modal'
+  import { getSplitTestVariantName, trackSplitTestView } from '$lib/splitTest'
+  import type { TitleData } from '$lib/types/title'
+  import Modal from '../../Modals/Modal.svelte'
+
+  interface Props {
+    navigate?: (key: string, pushState?: boolean) => void
+  }
+
+  const { navigate = () => null }: Props = $props()
+
+  async function openModalViaRoute(): Promise<void> {
+    const currentUrl = new URL(document.location.toString())
+    const sid = currentUrl.searchParams.get('sid')
+
+    if (!sid) return
+
+    let type: ModalType = sid.startsWith('pr') ? 'participant' : 'title' // Sids with with `pr` for participants, `ti` for titles
+    let data: any = null
+
+    if (type === 'title') {
+      const isMobile = window.innerWidth < mobileBreakpoint
+      const isInReelSplitTest = isMobile && getSplitTestVariantName(SplitTest.Reels) === 'Reel'
+
+      if (isMobile) trackSplitTestView(SplitTest.Reels)
+
+      type = isMobile && isInReelSplitTest ? 'titles-reel' : 'titles-rail'
+
+      const [title, railTitles] = (await Promise.allSettled([fetchTitleBySid(sid), fetchSimilarTitles({ sid } as unknown as TitleData)])).map((promise) =>
+        promise.status === 'fulfilled' ? promise.value : null,
+      )
+      data = [title as TitleData, ...(railTitles as TitleData[])]
+    } else if (type === 'participant') {
+      data = await fetchParticipantBySid(sid)
+    }
+
+    openModal({
+      type,
+      data,
+      props: {
+        onclose: () => navigate('home'),
+        pushState: false,
+      },
+    })
+  }
+</script>
+
+{#await openModalViaRoute()}
+  <Modal blur pushState={false}>
+    {#snippet dialog()}
+      <div class="loading">
+        <div class="bar"></div>
+        <div class="bar"></div>
+        <div class="bar"></div>
+      </div>
+    {/snippet}
+  </Modal>
+{:catch}
+  <Modal blur onclose={() => navigate('home')} pushState={false}>
+    <div class="error">
+      {t('An Error Occurred')}
+    </div>
+  </Modal>
+{/await}
+
+<style lang="scss">
+  .loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    gap: margin(0.5);
+  }
+
+  @keyframes animate-bar {
+    to {
+      height: margin(3);
+      opacity: 0.5;
+    }
+  }
+
+  .bar {
+    height: margin(4);
+    width: margin(1);
+    border-radius: margin(0.25);
+    background: white;
+    animation: animate-bar 750ms infinite;
+
+    @for $i from 0 through 2 {
+      &:nth-child(#{$i}) {
+        animation-delay: $i * 250ms;
+      }
+    }
+  }
+
+  .error {
+    padding: margin(2);
+    font-size: 1.25em;
+    color: theme(text-color);
+  }
+</style>

package/src/routes/components/Modals/TitlesReelModal.svelte

@@ -22,7 +22,7 @@
     onclose?: () => void
   }
 
-  const { titles, onclose = () => null }: Props = $props()
+  const { titles, onclose = () => null, ...restProps }: Props = $props()
 
 
   let interval: ReturnType<typeof setInterval> | null = null
@@ -74,7 +74,7 @@
 {/snippet}
 
 <div class="reel" style:--available-height="{availableHeight}px">
-  <Modal {prepend}>
+  <Modal {prepend} {onclose} {...restProps}>
     {#snippet dialog()}
       <div class="slider" bind:this={element}>
         <TinySlider vertical threshold={50} moveThreshold={10} {onchange}>
@@ -142,7 +142,7 @@
       overscroll-behavior: contain;
     }
 
-    :global(iframe) {
+    :global(.plyr) {
       pointer-events: none;
       z-index: 0;
     }

package/src/routes/components/Rails/TitlesRail.svelte

@@ -309,7 +309,7 @@
     background: black;
     z-index: 1;
 
-    :global(iframe) {
+    :global(.plyr) {
       opacity: 0;
       animation: fade-iframe 500ms 500ms forwards;
 

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/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 () => {