@playpilot/tpi 8.6.0 → 8.7.0

package/events.md

@@ -18,8 +18,10 @@ All events share a common payload:
 Events related to titles share an additional set of data (referred to below as `Title`):
 
 - `original_title`
+- `title`
 - `title_sid`
 - `title_type`: "movie" or "series"
+- `genres`: An array of all genres for the title
 - `providers`: An array of provider names
 
 Events may have additional data in their payload.
@@ -112,4 +114,5 @@ Event | Action | Info | Payload
 `explore_search` | _Fires any time the user searches for something_ | | `query`
 `venus_title_rail_modal_view` | _Fires any time a title is clicked in a rail, opening the rail modal_ | | `rail` (heading key of the rail)
 `venus_title_rail_expand_click` | _Fires any time a title is expanded in a rail directly via a click_ | Does not fire when a title opens automatically on load or navigate | `Title`, `rail` (heading key of the rail)
+`venus_title_rail_set_index` | _Fires when navigating in the titles rail modal, either via arrows, swipe, or clicking titles_ | | `Title`, `index` (index of the new position of the slider)
 `venus_navigate` | _Fires when navigating on the explore page_ | Does not fire on initial load | `route` (the key of the given route)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.6.0",
+	"version": "8.7.0",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/enums/TrackingEvent.ts

@@ -73,6 +73,7 @@ export const TrackingEvent = {
   ExploreFetchProvidersFailed: 'venus_fetch_providers_failed',
   ExploreTitleRailModalView: 'venus_title_rail_modal_view',
   ExploreTitleRailExpandClick: 'venus_title_rail_expand_click',
+  ExploreTitleRailSetIndex: 'venus_title_rail_set_index',
   ExploreNavigate: 'venus_navigate',
 } as const
 

package/src/routes/components/Icons/IconMute.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  interface Props {
+    muted?: boolean
+  }
+
+  const { muted = false }: Props = $props()
+</script>
+
+<svg width="32px" height="32px" viewBox="0 -960 960 960">
+  {#if muted}
+    <path fill="currentColor" d="m616-320-56-56 104-104-104-104 56-56 104 104 104-104 56 56-104 104 104 104-56 56-104-104-104 104Zm-496-40v-240h160l200-200v640L280-360H120Zm280-246-86 86H200v80h114l86 86v-252ZM300-480Z"/>
+  {:else}
+    <path fill="currentColor" d="M560-131v-82q90-26 145-100t55-168q0-94-55-168T560-749v-82q124 28 202 125.5T840-481q0 127-78 224.5T560-131ZM120-360v-240h160l200-200v640L280-360H120Zm440 40v-322q47 22 73.5 66t26.5 96q0 51-26.5 94.5T560-320ZM400-606l-86 86H200v80h114l86 86v-252ZM300-480Z" />
+  {/if}
+</svg>

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

@@ -11,10 +11,11 @@
   interface Props {
     items: Record<string, any>[]
     initialIndex?: number
+    onchange?: (index: number) => void
     each: Snippet<[item: any, currentIndex: number]>
   }
 
-  const { items, initialIndex = 0, each }: Props = $props()
+  const { items, initialIndex = 0, onchange = () => null, each }: Props = $props()
 
   const transitionDuration = 300
 
@@ -27,6 +28,11 @@
       requestAnimationFrame(() => initialized = true)
     })
   })
+
+  function setSliderIndex(index: number): void {
+    onchange(index)
+    slider.setIndex(index)
+  }
 </script>
 
 <Modal blur>
@@ -37,7 +43,7 @@
           {#each items as item, index}
             <!-- svelte-ignore a11y_click_events_have_key_events -->
             <!-- svelte-ignore a11y_no_static_element_interactions -->
-            <div class="item" class:active={index === currentIndex} onclick={() => slider.setIndex(index)}>
+            <div class="item" class:active={index === currentIndex} onclick={() => setSliderIndex(index)}>
               {#if Math.abs(index - currentIndex) === 1 || currentIndex === index}
                 <div class="content" transition:fade={{ duration: initialized ? transitionDuration : 0 }}>
                   {@render each(item, currentIndex)}
@@ -47,15 +53,15 @@
           {/each}
         {/snippet}
 
-        {#snippet controls({ setIndex, currentIndex, reachedEnd })}
+        {#snippet controls({ currentIndex, reachedEnd })}
           {#if currentIndex > 0}
-            <button class="arrow left" onclick={() => setIndex(currentIndex - 1)} aria-label="Previous" aria-live="polite">
+            <button class="arrow left" onclick={() => setSliderIndex(currentIndex - 1)} aria-label="Previous" aria-live="polite">
               <IconArrow size={21} direction="left" title="Previous" />
             </button>
           {/if}
 
           {#if !reachedEnd}
-            <button class="arrow right" onclick={() => setIndex(currentIndex + 1)} aria-label="Next" aria-live="polite">
+            <button class="arrow right" onclick={() => setSliderIndex(currentIndex + 1)} aria-label="Next" aria-live="polite">
               <IconArrow size={21} title="Next" />
             </button>
           {/if}

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

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { TrackingEvent } from '$lib/enums/TrackingEvent'
+  import { track } from '$lib/tracking'
   import type { TitleData } from '$lib/types/title'
   import Title from '../Title.svelte'
   import RailModal from './RailModal.svelte'
@@ -11,7 +13,7 @@
   const { titles, initialIndex = 0 }: Props = $props()
 </script>
 
-<RailModal items={titles} {initialIndex}>
+<RailModal items={titles} {initialIndex} onchange={(index) => track(TrackingEvent.ExploreTitleRailSetIndex, titles[index], { index })}>
   {#snippet each(title, currentIndex)}
     <Title {title} useVideoBackground={title.sid === titles[currentIndex]?.sid} />
   {/snippet}

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