@playpilot/tpi 8.6.0 → 8.6.1

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.6.1",
 	"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/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}