@playpilot/tpi 8.23.0 → 8.23.1

package/events.md

@@ -126,6 +126,7 @@ Event | Action | Info | Payload
 `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_title_reel_set_index` | _Fires when navigating in the titles reel modal, 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)
 `venus_any_click` | _Fires on any click anywhere_ | | `selector` (parent > child selector of the clicked element), `text` (direct text content of the clicked element, limited to 30 characters)
 `venus_scroll_distance` | _Fires on increments of scroll distance_ | 25%, 50%, 75%, 100% | `scroll_percentage` (percentage of the explore element the user has seen)

package/package.json

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

package/src/lib/enums/TrackingEvent.ts

@@ -79,6 +79,7 @@ export const TrackingEvent = {
   ExploreTitleRailModalView: 'venus_title_rail_modal_view',
   ExploreTitleRailExpandClick: 'venus_title_rail_expand_click',
   ExploreTitleRailSetIndex: 'venus_title_rail_set_index',
+  ExploreTitleReelSetIndex: 'venus_title_reel_set_index',
   ExploreNavigate: 'venus_navigate',
   ExploreAnyClick: 'venus_any_click',
   ExploreScrollDistance: 'venus_scroll_distance',

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

@@ -3,6 +3,8 @@
   import { onMount } from 'svelte'
   import { heading } from '$lib/actions/heading'
   import { t } from '$lib/localization'
+  import { track } from '$lib/tracking'
+  import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import TinySlider from 'svelte-tiny-slider'
   import Modal from './Modal.svelte'
   import TitleBackground from '../TitleBackground.svelte'
@@ -15,9 +17,10 @@
 
   interface Props {
     titles: TitleData[],
+    onclose?: () => void
   }
 
-  const { titles }: Props = $props()
+  const { titles, onclose = () => null }: Props = $props()
 
   let interval: ReturnType<typeof setInterval> | null = null
 
@@ -29,6 +32,11 @@
     }
   })
 
+  function onchange(index: number): void {
+    pauseAndPlay(index)
+    track(TrackingEvent.ExploreTitleReelSetIndex, titles[index], { index })
+  }
+
   function pauseAndPlay(index: number): void {
     ;[titles[index - 1], titles[index + 1]].forEach(title => {
       window.dispatchEvent(new CustomEvent('pauseembed', { detail: title?.embeddable_url } ))
@@ -49,7 +57,7 @@
   <Modal>
     {#snippet dialog()}
       <div class="slider">
-        <TinySlider vertical threshold={50} moveThreshold={10} onchange={pauseAndPlay}>
+        <TinySlider vertical threshold={50} moveThreshold={10} {onchange}>
           {#snippet children({ currentIndex, setIndex })}
             {#each titles as title, index}
               <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -92,7 +100,7 @@
         </TinySlider>
       </div>
 
-      <ModalCloseOverlay label={t('Explore All Movies And Shows')} />
+      <ModalCloseOverlay {onclose} label={t('Explore All Movies And Shows')} />
     {/snippet}
   </Modal>
 </div>