@playpilot/tpi 8.6.1 → 8.7.1

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

@@ -44,6 +44,7 @@
 
   let element: HTMLElement | null = $state(null)
   let slider: ReturnType<typeof TinySlider> | null = $state(null)
+  let embed: ReturnType<typeof YouTubeEmbed> | null = $state(null)
   let recentlyExpanded = false
 
   onMount(() => {
@@ -80,6 +81,7 @@
       openModal({ event, data: title, returnToTitle })
     }
 
+    embed?.toggleMute(true)
     onclick(title)
   }
 
@@ -170,7 +172,7 @@
                   <a class="video-overlay" title="" {href} {onclick}></a>
 
                   {#if !!title.embeddable_url}
-                    <YouTubeEmbed embeddable_url={title.embeddable_url!} muted loop />
+                    <YouTubeEmbed bind:this={embed} embeddable_url={title.embeddable_url!} muted loop captions showMuteControls />
                   {:else}
                     <img class="video-fallback" src={title.medium_poster} alt="" />
                   {/if}

package/src/routes/components/YouTubeEmbed.svelte

@@ -1,29 +1,47 @@
 <script lang="ts">
   import { getVideoId } from '$lib/trailer'
+  import IconMute from './Icons/IconMute.svelte'
 
   interface Props {
     embeddable_url: string
     controls?: ('play' | 'mute' | 'fullscreen' | 'progress' | 'current-time')[]
     muted?: boolean
     loop?: boolean
+    captions?: boolean
+    showMuteControls?: boolean
   }
 
-  const { embeddable_url = '', controls = [], muted = false, loop = false }: Props = $props()
+  const { embeddable_url = '', controls = [], muted = false, loop = false, captions = false, showMuteControls = false }: Props = $props()
 
   const videoId = $derived(getVideoId(embeddable_url))
   const color = window?.getComputedStyle(document.body).getPropertyValue('--playpilot-primary')?.replace('#', '') || 'fa548a'
+
+  let iframe: HTMLIFrameElement | null = $state(null)
+  let isMuted = $state(muted)
+
+  export function toggleMute(state = !isMuted): void {
+    if (isMuted != state) iframe?.contentWindow?.postMessage('mute', '*')
+    isMuted = state
+  }
 </script>
 
 {#if videoId}
   <iframe
+    bind:this={iframe}
     width="600"
     height="338"
-    src="https://video.playpilot.net/?video_id={videoId}&color={color}&muted={muted}&loop={loop}&controls={controls.join(',')}&autoplay=true&playsinline=true"
+    src="https://video.playpilot.net/?video_id={videoId}&color={color}&muted={muted}&loop={loop}&captions={captions}&controls={controls.join(',')}&autoplay=true&playsinline=true"
     title="YouTube video player"
     frameborder="0"
     referrerpolicy="strict-origin-when-cross-origin"
     allowfullscreen>
   </iframe>
+
+  {#if showMuteControls}
+    <button class="mute" onclick={() => toggleMute()}>
+      <IconMute muted={isMuted} />
+    </button>
+  {/if}
 {:else}
   Something went wrong
 {/if}
@@ -33,4 +51,31 @@
     width: 100%;
     height: 100%;
   }
+
+  .mute {
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: margin(0.5);
+    right: margin(0.5);
+    padding: margin(0.25);
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
+    transition: transform 50ms;
+    cursor: pointer;
+    color: white;
+
+    &:hover {
+      outline: 1px solid white;
+      transform: scale(1.1);
+    }
+
+    &:active {
+      transform: scale(0.95);
+    }
+  }
 </style>

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

@@ -7,7 +7,7 @@ describe('YouTubeEmbed.svelte', () => {
   it('Should render embed iframe with given video url and default options', () => {
     const { container } = render(YouTubeEmbed, { embeddable_url: 'youtube.com/watch?v=abc' })
 
-    expect(/** @type {HTMLIFrameElement} */ (container.querySelector('iframe')).src).toBe('https://video.playpilot.net/?video_id=abc&color=fa548a&muted=false&loop=false&controls=&autoplay=true&playsinline=true')
+    expect(/** @type {HTMLIFrameElement} */ (container.querySelector('iframe')).src).toBe('https://video.playpilot.net/?video_id=abc&color=fa548a&muted=false&loop=false&captions=false&controls=&autoplay=true&playsinline=true')
   })
 
   it('Should render embed iframe with given controls', () => {
@@ -28,6 +28,11 @@ describe('YouTubeEmbed.svelte', () => {
     expect(/** @type {HTMLIFrameElement} */ (container.querySelector('iframe')).src).toContain('&loop=true')
   })
 
+  it('Should render embed iframe with captions if given', () => {
+    const { container } = render(YouTubeEmbed, { embeddable_url: 'youtube.com/watch?v=abc', captions: true })
+
+    expect(/** @type {HTMLIFrameElement} */ (container.querySelector('iframe')).src).toContain('&captions=true')
+  })
 
   it('Should render error message if embeddable_url is invalid', () => {
     const { container, getByText } = render(YouTubeEmbed, { embeddable_url: '-' })

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

@@ -8,6 +8,6 @@ describe('YouTubeEmbedBackground.svelte', () => {
     const { container } = 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&controls=&autoplay=true&playsinline=true')
+    expect(container.querySelector('iframe').src).toBe('https://video.playpilot.net/?video_id=abc&color=fa548a&muted=true&loop=true&captions=false&controls=&autoplay=true&playsinline=true')
   })
 })

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

@@ -8,7 +8,7 @@ describe('YouTubeEmbedOverlay.svelte', () => {
     const { container } = 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&controls=current-time,fullscreen,mute,play,progress&autoplay=true&playsinline=true')
+    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&autoplay=true&playsinline=true')
   })
 
   it('Should fire given onclose function on click of close button and backdrop', async () => {