@playpilot/tpi 8.21.8 → 8.22.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.21.8",
+	"version": "8.22.0-beta.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
@@ -17,7 +17,7 @@
 		"postinstall": "patch-package"
 	},
 	"devDependencies": {
-		"@playpilot/retargeting-tracking": "^1.4.1",
+		"@playpilot/retargeting-tracking": "^1.4.2",
 		"@sveltejs/adapter-auto": "^7.0.1",
 		"@sveltejs/kit": "^2.56.1",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",

package/src/lib/api/api.ts

@@ -7,9 +7,10 @@ type Options = {
   headers?: Record<string, string>
   method?: 'POST' | 'GET'
   body?: null | Record<string, any>
+  baseUrl?: string
 }
 
-export async function api<T>(path: string, { headers = {}, method = 'GET', body = null }: Options = {}): Promise<T> {
+export async function api<T>(path: string, { headers = {}, method = 'GET', body = null, baseUrl = apiBaseUrl }: Options = {}): Promise<T> {
   // For GET methods we store all results in a cache object. This cache is super simple and has no invalidation at all.
   // Once something is stored it's there forever since the page is only short lived.
   // We never use the cache for editiorial mode since in the editor requests do change.
@@ -18,7 +19,7 @@ export async function api<T>(path: string, { headers = {}, method = 'GET', body
 
   const baseHeaders: Record<string, string> = method === 'GET' ? {} : { 'Content-Type': 'application/json' }
 
-  const response = await fetch(apiBaseUrl + path, {
+  const response = await fetch(baseUrl + path, {
     method,
     headers: new Headers({ ...baseHeaders, ...headers }),
     // eslint-disable-next-line no-undef

package/src/lib/tracking.ts

@@ -4,7 +4,7 @@ import { isCrawler } from './crawler'
 import { genreSlugsToNames } from './genre'
 import type { TitleData } from './types/title'
 import { getFullUrlPath } from './url'
-import { getUserId, isUserTrackingAllowed } from './user'
+import { getSessionId, getUserId, isUserTrackingAllowed } from './user'
 
 const baseUrl = 'https://insights.playpilot.net'
 
@@ -41,6 +41,7 @@ export async function track(event: string, title: TitleData | null = null, paylo
 
   if (isUserTrackingAllowed()) {
     payload.user_id = getUserId()
+    payload.session_id = getSessionId()
     payload.region = window.PlayPilotLinkInjections.region
   }
 

package/src/lib/types/language.d.ts

@@ -1 +1 @@
-export type LanguageCode = 'en-US' | 'sv-SE' | 'dk-DK'
+export type LanguageCode = 'en-US' | 'sv-SE' | 'da-DK'

package/src/lib/user.ts

@@ -2,6 +2,7 @@ import { hasConsentedTo } from './consent'
 import { generateRandomHash } from './hash'
 
 export const localStorageUserKey = 'playpilot_user_id'
+export const sessionStorageSessionKey = 'playpilot_session_id'
 
 export function getUserId(): string | null {
   if (!isUserTrackingAllowed()) return null
@@ -17,6 +18,20 @@ export function getUserId(): string | null {
   }
 }
 
+export function getSessionId(): string | null {
+  if (!isUserTrackingAllowed()) return null
+
+  try {
+    const sessionId = sessionStorage.getItem(sessionStorageSessionKey)
+    if (sessionId) return sessionId
+
+    sessionStorage.setItem(sessionStorageSessionKey, generateRandomHash(16))
+    return sessionStorage.getItem(sessionStorageSessionKey)
+  } catch {
+    return null
+  }
+}
+
 export function isUserTrackingAllowed(): boolean {
   return !!window.PlayPilotLinkInjections?.config?.allow_user_id_tracking && hasConsentedTo('tracking')
 }

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

@@ -2,37 +2,23 @@
   import type { TitleData } from '$lib/types/title'
   import { fetchTitles } from '$lib/api/titles'
   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'
   import { mobileBreakpoint } from '$lib/constants'
+  import { getLanguage } from '$lib/language'
+  import type { LanguageCode } from '$lib/types/language'
+  import { api } from '$lib/api/api'
 
   let expandedTitle: TitleData | null = $state(null)
   let expandedRailKey: string | null = $state(null)
   let windowWidth: number = $state(window.innerWidth)
 
-  const rails: { heading: string, params: Record<string, any>, properties: Record<string, any> }[] = [{
-    heading: 'List: Upcoming',
-    params: { from_playlist_sid: 'li42wf', region: null, no_region_filter: true },
-    properties: { expandable: true },
-  }, {
-    heading: 'List: Trending',
-    params: { ordering: Sorting.Popular },
-    properties: { expandable: true },
-  }, {
-    heading: 'List: New',
-    params: { from_playlist_sid: 'li42WR', include_playable_types: 'SVOD,FREE' },
-    properties: { aside: true, size: 'flexible' },
-  }, {
-    heading: 'List: Cinema',
-    params: { from_playlist_sid: 'li42WS', region: null, no_region_filter: true },
-    properties: { expandable: true },
-  }, {
-    heading: 'List: Demand',
-    params: { from_playlist_sid: 'licBS' },
-    properties: { aside: true, size: 'flexible' },
-  }]
+  type Rail = { headings: Record<LanguageCode, string>, params: Record<string, any>, properties: Record<string, any> }
+
+  async function fetchRails(): Promise<Rail[]> {
+    return await api<Rail[]>('/streaming-guide/rails', { baseUrl: 'https://partner.playpilot.net/api' })
+  }
 
   async function getListTitles(params: Record<string, any> = {}): Promise<TitleData[]> {
     try {
@@ -49,20 +35,28 @@
 
 <div data-testid="explore-home"></div>
 
-{#each rails as { heading, params, properties }}
-  <div class="rail">
-    <TitlesRail
-      heading={t(heading)}
-      titles={getListTitles(params)}
-      size={windowWidth >= mobileBreakpoint ? 'flexible' : 'huge'}
-      minimumLength={7}
-      {...properties}
-      bind:expandedTitle
-      bind:expandedRailKey
-      onclick={() => track(TrackingEvent.ExploreTitleRailModalView, null, { rail: heading })}
-      onexpand={(title) => track(TrackingEvent.ExploreTitleRailExpandClick, title, { rail: heading })} />
-  </div>
-{/each}
+{#await fetchRails()}
+  <TitlesRail titles={new Promise((res) => setTimeout(res, 10000))} size={windowWidth >= mobileBreakpoint ? 'flexible' : 'huge'} />
+{:then rails}
+  {#each rails as { headings, params, properties }}
+    {@const heading = headings[getLanguage()]}
+
+    <div class="rail">
+      <TitlesRail
+        {heading}
+        titles={getListTitles(params)}
+        size={windowWidth >= mobileBreakpoint ? (properties.size || 'flexible') : 'huge'}
+        minimumLength={7}
+        {...properties}
+        bind:expandedTitle
+        bind:expandedRailKey
+        onclick={() => track(TrackingEvent.ExploreTitleRailModalView, null, { rail: headings })}
+        onexpand={(title) => track(TrackingEvent.ExploreTitleRailExpandClick, title, { rail: headings })} />
+    </div>
+  {/each}
+{:catch}
+  {t('An Error Occurred')}
+{/await}
 
 <style lang="scss">
   .rail {

package/src/tests/lib/user.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest'
-import { getUserId, isUserTrackingAllowed, localStorageUserKey } from '$lib/user'
+import { getSessionId, getUserId, isUserTrackingAllowed, localStorageUserKey, sessionStorageSessionKey } from '$lib/user'
 import { hasConsentedTo } from '$lib/consent'
 
 vi.mock('$lib/consent', () => ({
@@ -45,6 +45,44 @@ describe('user.ts', () => {
     })
   })
 
+  describe('getSessionId', () => {
+    beforeEach(() => {
+    // @ts-ignore
+      window.PlayPilotLinkInjections = {
+        config: {
+          allow_user_id_tracking: true,
+        },
+      }
+
+      vi.mocked(hasConsentedTo).mockImplementation(() => true)
+    })
+
+    it('Should return random hash by default', () => {
+      expect(getSessionId()).toBeTruthy()
+    })
+
+    it('Should return the previously set value', () => {
+      sessionStorage.setItem(sessionStorageSessionKey, 'some_value')
+
+      expect(getSessionId()).toBe('some_value')
+    })
+
+    it('Should return null if allow_user_id_tracking is not set', () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections = {}
+
+      expect(getSessionId()).toBe(null)
+
+      sessionStorage.setItem(sessionStorageSessionKey, 'some_value')
+
+      expect(getSessionId()).toBe(null)
+    })
+
+    it('Should return the same id when called multiple times', () => {
+      expect(getSessionId()).toBe(getSessionId())
+    })
+  })
+
   describe('isUserTrackingAllowed', () => {
     beforeEach(() => {
     // @ts-ignore

package/src/tests/routes/components/Explore/Routes/ExploreHome.test.js

@@ -1,23 +1,34 @@
-import { render } from '@testing-library/svelte'
+import { render, waitFor } from '@testing-library/svelte'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import ExploreHome from '../../../../../routes/components/Explore/Routes/ExploreHome.svelte'
 import { fetchTitles } from '$lib/api/titles'
+import { api } from '$lib/api/api'
 
 vi.mock('$lib/api/titles', () => ({
   fetchTitles: vi.fn(),
 }))
 
+vi.mock('$lib/api/api', () => ({
+  api: vi.fn(),
+}))
+
 describe('ExploreResults.svelte', () => {
   beforeEach(() => {
     vi.resetAllMocks()
   })
 
-  it('Should fetch titles for each rail', () => {
+  it('Should fetch rails endpoint and titles for each rail', async () => {
+    const rail = { headings: {}, properties: {}, params: {} }
+
+    vi.mocked(api).mockResolvedValue([rail, rail, rail, rail, rail])
     vi.mocked(fetchTitles).mockResolvedValue({ next: null, previous: null, results: [] })
 
     render(ExploreHome)
 
-    expect(fetchTitles).toHaveBeenCalledTimes(5)
+    await waitFor(() => {
+      expect(api).toHaveBeenCalledOnce()
+      expect(fetchTitles).toHaveBeenCalledTimes(5)
+    })
   })
 })

package/src/tests/setup.js

@@ -96,7 +96,9 @@ beforeEach(() => {
   document.cookie.split(';').forEach((cookie) => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, '=;'))
 
   window.HTMLElement.prototype.scrollIntoView = vi.fn()
+
   localStorage.clear()
+  sessionStorage.clear()
 
   mockAnimations()
 })