@playpilot/tpi 8.5.2 → 8.5.4

package/events.md

@@ -109,3 +109,6 @@ Event | Action | Info | Payload
 `explore_show_more` | _Fires when "show more" is clicked on explore_ | | `page` (The current page number) |
 `explore_set_filter` | _Fires when any filter is set on the explore page._ | This includes any filter type, including sorting. | `key` (the name of the current filter being set), `value`, `total_filter` (all currently active filter items)
 `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_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.5.2",
+	"version": "8.5.4",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/enums/TrackingEvent.ts

@@ -70,6 +70,9 @@ export const TrackingEvent = {
   ExploreSetFilter: 'venus_set_filter',
   ExploreSearch: 'venus_search',
   ExploreFetchProvidersFailed: 'venus_fetch_providers_failed',
+  ExploreTitleRailModalView: 'venus_title_rail_modal_view',
+  ExploreTitleRailExpandClick: 'venus_title_rail_expand_click',
+  ExploreNavigate: 'venus_navigate',
 } as const
 
 export const MetaEvent = {

package/src/routes/components/Explore/ExploreRouter.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { ExploreRoute } from '$lib/types/explore'
   import { useExploreRouter } from '$lib/explore'
+  import { track } from '$lib/tracking'
+  import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import ExploreHome from './Routes/ExploreHome.svelte'
   import ExploreResults from './Routes/ExploreResults.svelte'
   import ExploreLayout from './ExploreLayout.svelte'
@@ -32,6 +34,8 @@
 
   function navigate(route: ExploreRoute): void {
     currentRoute = route
+
+    track(TrackingEvent.ExploreNavigate, null, { route: route.key })
   }
 </script>
 

package/src/routes/components/Explore/Filter/TogglesWithSearch.svelte

@@ -2,6 +2,8 @@
   import { flip } from 'svelte/animate'
   import { scale } from 'svelte/transition'
   import { t } from '$lib/localization'
+  import IconMinus from '../../Icons/IconMinus.svelte'
+  import IconPlus from '../../Icons/IconPlus.svelte'
 
   interface Option {
     label: string
@@ -58,7 +60,11 @@
         <div class="action">
           {#key active}
             <div class="icon" transition:scale={{ start: 0.25, duration: 100 }}>
-              {active ? '-' : '+'}
+              {#if active}
+                <IconMinus />
+              {:else}
+                <IconPlus />
+              {/if}
             </div>
           {/key}
         </div>

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

@@ -1,31 +1,33 @@
 <script lang="ts">
   import type { TitleData } from '$lib/types/title'
   import { fetchTitles } from '$lib/api/titles'
-  import TitlesRail from '../../Rails/TitlesRail.svelte'
   import { t } from '$lib/localization'
   import { Sorting } from '$lib/enums/Sorting'
+  import { track } from '$lib/tracking'
+  import { TrackingEvent } from '$lib/enums/TrackingEvent'
+  import TitlesRail from '../../Rails/TitlesRail.svelte'
 
   let expandedTitle: TitleData | null = $state(null)
   let expandedRailKey: string | null = $state(null)
 
   const rails: { heading: string, params: Record<string, any>, properties: Record<string, any> }[] = [{
-    heading: t('List: Trending'),
+    heading: 'List: Trending',
     params: { ordering: Sorting.Popular },
     properties: { expandable: true },
   }, {
-    heading: t('List: Upcoming'),
+    heading: 'List: Upcoming',
     params: { from_playlist_sid: 'li42wf', region: null, no_region_filter: true },
     properties: { aside: true },
   }, {
-    heading: t('List: New'),
+    heading: 'List: New',
     params: { from_playlist_sid: 'li42WR', include_playable_types: 'SVOD,FREE' },
     properties: { expandable: true },
   }, {
-    heading: t('List: Demand'),
+    heading: 'List: Demand',
     params: { from_playlist_sid: 'licBS' },
     properties: {},
   }, {
-    heading: t('List: Cinema'),
+    heading: 'List: Cinema',
     params: { from_playlist_sid: 'li42WS', region: null, no_region_filter: true },
     properties: { aside: true },
   }]
@@ -41,7 +43,16 @@
 
 {#each rails as { heading, params, properties }}
   <div class="rail">
-    <TitlesRail {heading} titles={getListTitles(params)} size="flexible" {...properties} bind:expandedTitle bind:expandedRailKey />
+    <TitlesRail
+      heading={t(heading)}
+      titles={getListTitles(params)}
+      size="flexible"
+      minimumLength={7}
+      {...properties}
+      bind:expandedTitle
+      bind:expandedRailKey
+      onclick={() => track(TrackingEvent.ExploreTitleRailModalView, null, { rail: heading })}
+      onexpand={(title) => track(TrackingEvent.ExploreTitleRailExpandClick, title, { rail: heading })} />
   </div>
 {/each}
 

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

@@ -43,7 +43,7 @@
   const SkeletonComponent = $derived(grid ? GridTitleSkeleton : ListTitleSkeleton)
 
   $effect(() => {
-    if (searchQuery) search(searchQuery)
+    if (searchQuery || latestRequestId != 0) search(searchQuery)
   })
 
   async function getTitlesForFilter(): Promise<APIPaginatedResult<TitleData>> {

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

@@ -0,0 +1,3 @@
+<svg width="18px" height="18px" viewBox="0 -960 960 960" fill="currentColor">
+  <path d="M200-440v-80h560v80H200Z"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg width="18px" height="18px" viewBox="0 -960 960 960" fill="currentColor">
+  <path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/>
+</svg>

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

@@ -14,17 +14,20 @@
 
   interface Props {
     titles: Promise<TitleData[]> | TitleData[]
+    minimumLength?: number,
     heading?: string,
     size?: 'small' | 'large' | 'flexible'
     aside?: boolean,
     expandable?: boolean,
     expandedTitle?: TitleData | null,
     expandedRailKey?: string | null,
-    onclick?: (title: TitleData) => void
+    onclick?: (title: TitleData) => void,
+    onexpand?: (title: TitleData) => void
   }
 
   let {
     titles,
+    minimumLength = 1,
     heading = '',
     size = 'small',
     aside = false,
@@ -32,6 +35,7 @@
     expandedTitle = $bindable(null),
     expandedRailKey = $bindable(null),
     onclick = () => null,
+    onexpand = () => null,
   }: Props = $props()
 
   const key = generateRandomHash()
@@ -52,8 +56,8 @@
     const title = titles[index]
 
     if (expandable && !isExpanded(title)) {
-      const activeElement = element!.querySelectorAll('.title')[index]!
-      const parentOffset = element!.getBoundingClientRect().right
+      const activeElement = element?.querySelectorAll('.title')[index]!
+      const parentOffset = element?.getBoundingClientRect().right || 0
       const elementOffsetInParent = parentOffset - activeElement.getBoundingClientRect().right
 
       recentlyExpanded = true
@@ -63,9 +67,13 @@
 
       expandTitleIntoTrailer(title)
 
+      if (event) onexpand(title)
+
       return
     }
 
+    if (!event) return
+
     if (useExploreRouter()) {
       openModal({ event, type: 'titles-rail', data: titles as TitleData[], returnToTitle, props: { initialIndex: index } })
     } else {
@@ -144,7 +152,7 @@
       {/each}
     </Rail>
   {:then titles}
-    {#if titles?.length}
+    {#if titles?.length >= minimumLength}
       <Rail
         bind:slider
         {heading}
@@ -182,7 +190,7 @@
               <!-- svelte-ignore a11y_click_events_have_key_events -->
               <!-- svelte-ignore a11y_no_static_element_interactions -->
               <div class="aside" {onclick} data-testid="aside">
-                {title.blurb || title.description}
+                {title.description}
               </div>
             {/if}
           </div>

package/src/routes/explore/+page.svelte

@@ -20,6 +20,7 @@
         explore_custom_style: 'main { border: 2px solid white }',
         explore_use_router: true,
       },
+      require_consent: false,
     }
   }
 

package/src/tests/routes/components/Rails/TitlesRail.test.js

@@ -149,6 +149,21 @@ describe('TitlesRail.svelte', () => {
     })
   })
 
+  it('Should fire onexpand even on expand on click of title but not on subsequent click', async () => {
+    const titles = [{ ...title }, { ...title, sid: 'some-other-sid' }]
+    const onexpand = vi.fn()
+
+    const { getAllByTestId } = render(TitlesRail, { titles, onexpand, expandable: true })
+
+    expect(onexpand).toHaveBeenCalledTimes(0)
+
+    await fireEvent.click(getAllByTestId('heading')[1])
+    expect(onexpand).toHaveBeenCalledTimes(1)
+
+    await fireEvent.click(getAllByTestId('heading')[1])
+    expect(onexpand).toHaveBeenCalledTimes(1)
+  })
+
   it('Should not call openModal after changing if expandable is false', async () => {
     const titles = [{ ...title }, { ...title, sid: 'some-other-sid' }]
 
@@ -186,4 +201,16 @@ describe('TitlesRail.svelte', () => {
     expect(/** @type {HTMLElement} */ (container.querySelector('.titles.small'))).not.toBeTruthy()
     expect(/** @type {HTMLElement} */ (container.querySelector('.titles.large'))).toBeTruthy()
   })
+
+  it('Should not render rails if fewer than given mimimumLength of titles were returned', () => {
+    const { container } = render(TitlesRail, { titles: [title, title], minimumLength: 3 })
+
+    expect(container.querySelector('.titles .slider')).not.toBeTruthy()
+  })
+
+  it('Should render rails if equal or more than given mimimumLength of titles were returned', () => {
+    const { container } = render(TitlesRail, { titles: [title, title, title], minimumLength: 3 })
+
+    expect(container.querySelector('.titles .slider')).toBeTruthy()
+  })
 })