@playpilot/tpi 8.25.1 → 8.26.2

package/package.json

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

package/src/lib/{pixel.ts → retargeting.ts}

@@ -2,7 +2,7 @@ import { RETARGETING_USER_ID_KEY } from '@playpilot/retargeting-tracking'
 import { hasConsentedTo } from './consent'
 import { getUserId } from './user'
 
-export function isPixelAllowed(): boolean {
+export function isRetargetingAllowed(): boolean {
   if (!window.PlayPilotLinkInjections.config?.allow_retargeting_pixels) return false
 
   if (!hasConsentedTo('pixels')) return false

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

@@ -5,7 +5,6 @@
   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'
@@ -40,7 +39,7 @@
 {#await fetchRails()}
   {#each { length: 3 }}
     <div class="rail">
-      <TitlesRail titles={new Promise(() => {})} size={windowWidth >= mobileBreakpoint ? 'flexible' : 'huge'} />
+      <TitlesRail heading=" " titles={new Promise(() => {})} size="huge" />
     </div>
   {/each}
 {:then rails}
@@ -53,10 +52,11 @@
         {...properties}
         bind:expandedTitle
         bind:expandedRailKey
+        lazy
         onclick={() => track(TrackingEvent.ExploreTitleRailModalView, null, { rail: headings })}
         onexpand={(title) => track(TrackingEvent.ExploreTitleRailExpandClick, title, { rail: headings })}
         fetchFunction={(page) => getListTitles({ ...params, page })}
-        size={windowWidth >= mobileBreakpoint ? (properties.size || 'flexible') : 'huge'}
+        size={properties.size || 'flexible'}
         minimumLength={7} />
     </div>
   {/each}

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

@@ -7,7 +7,7 @@
   import type { APIPaginatedResult } from '$lib/types/api'
   import type { ExploreFilter } from '$lib/types/filter'
   import type { TitleData } from '$lib/types/title'
-  import { hasConsentedTo } from '$lib/consent'
+  import { isRetargetingAllowed } from '$lib/retargeting'
   import { t } from '$lib/localization'
   import { trackViaPixel } from '@playpilot/retargeting-tracking'
   import Button from '../../Button.svelte'
@@ -101,7 +101,7 @@
       if (!query) return
 
       track(TrackingEvent.ExploreSearch, null, { query })
-      if (hasConsentedTo('pixels')) trackViaPixel(MetaEvent.SearchQuery, { query })
+      if (isRetargetingAllowed()) trackViaPixel(MetaEvent.SearchQuery, { query })
     }, 100)
   }
 

package/src/routes/components/Genres.svelte

@@ -2,7 +2,7 @@
   import genreData from '$lib/data/genres.json'
   import { MetaEvent, MetaSource } from '$lib/enums/TrackingEvent'
   import { t } from '$lib/localization'
-  import { isPixelAllowed } from '$lib/pixel'
+  import { isRetargetingAllowed } from '$lib/retargeting'
   import { trackViewViaPixel } from '@playpilot/retargeting-tracking'
 
   interface Props {
@@ -20,7 +20,7 @@
   {@const genreName = genreData.find(g => g.slug === genre)?.name}
 
   {#if genreName}
-    <div class="genre" {@attach isPixelAllowed() ? trackViewViaPixel(MetaEvent.GenreInterest, { genre: genreName, source: MetaSource.Card }) : null}>
+    <div class="genre" {@attach isRetargetingAllowed() ? trackViewViaPixel(MetaEvent.GenreInterest, { genre: genreName, source: MetaSource.Card }) : null}>
       {t(genreName)}
     </div>
   {/if}

package/src/routes/components/InjectionPopover.svelte

@@ -6,7 +6,7 @@
   import type { ParticipantData } from '$lib/types/participant'
   import type { LinkInjectionDataType } from '$lib/types/injection'
   import { onMount, setContext } from 'svelte'
-  import { isPixelAllowed } from '$lib/pixel'
+  import { isRetargetingAllowed } from '$lib/retargeting'
   import { trackViaPixel } from '@playpilot/retargeting-tracking'
   import Popover from './Popover.svelte'
   import Title from './Title.svelte'
@@ -32,7 +32,7 @@
   if (type === 'title') track(TrackingEvent.InjectionPopoverView, data as TitleData, { type })
   if (type === 'participant') track(TrackingEvent.InjectionPopoverView, null, { type, participant: (data as ParticipantData).name })
 
-  if (isPixelAllowed() && type === 'title') trackViaPixel(MetaEvent.TitleInterest, { title: (data as TitleData).title, source: MetaSource.Card })
+  if (isRetargetingAllowed() && type === 'title') trackViaPixel(MetaEvent.TitleInterest, { title: (data as TitleData).title, source: MetaSource.Card })
 
   onMount(() => {
     setOffset()

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

@@ -5,7 +5,7 @@
   import { getFirstAdOfType } from '$lib/api/ads'
   import { exploreParentSelector } from '$lib/explore'
   import { onMount, setContext } from 'svelte'
-  import { isPixelAllowed } from '$lib/pixel'
+  import { isRetargetingAllowed } from '$lib/retargeting'
   import { trackViaPixel } from '@playpilot/retargeting-tracking'
   import Modal from './Modal.svelte'
   import Title from '../Title.svelte'
@@ -31,7 +31,7 @@
 
   track(TrackingEvent.TitleModalView, title)
 
-  if (isPixelAllowed()) trackViaPixel(MetaEvent.TitleInterest, { title: title.title, source: MetaSource.Card })
+  if (isRetargetingAllowed()) trackViaPixel(MetaEvent.TitleInterest, { title: title.title, source: MetaSource.Card })
 
   onMount(() => {
     const openTimestamp = Date.now()

package/src/routes/components/Participant.svelte

@@ -7,7 +7,7 @@
   import type { TitleData } from '$lib/types/title'
   import ListTitle from './ListTitle.svelte'
   import { t } from '$lib/localization'
-  import { hasConsentedTo } from '$lib/consent'
+  import { isRetargetingAllowed } from '$lib/retargeting'
   import { trackViaPixel } from '@playpilot/retargeting-tracking'
   import { MetaEvent } from '$lib/enums/TrackingEvent'
 
@@ -29,7 +29,7 @@
 
   onMount(loadMore)
 
-  if (hasConsentedTo('pixels')) trackViaPixel(MetaEvent.ParticipantView, { participant: participant.name })
+  if (isRetargetingAllowed()) trackViaPixel(MetaEvent.ParticipantView, { participant: participant.name })
 
   function formatDate(dateString: string): string {
     const date = new Date(dateString)

package/src/routes/components/Playlinks/Playlink.svelte

@@ -7,7 +7,7 @@
   import type { PlaylinkData } from '$lib/types/playlink'
   import { trackClickViaPixel, trackViewViaPixel } from '@playpilot/retargeting-tracking'
   import { MetaEvent, MetaSource } from '$lib/enums/TrackingEvent'
-  import { isPixelAllowed } from '$lib/pixel'
+  import { isRetargetingAllowed } from '$lib/retargeting'
 
   interface Props {
     playlink: PlaylinkData
@@ -20,7 +20,7 @@
 
   const { name, url, logo_url, highlighted, cta_text, action_text, pixels, extra_info: { category } } = $derived(playlink)
 
-  const usePixel = $derived(isPixelAllowed() && !highlighted)
+  const usePixel = $derived(isRetargetingAllowed() && !highlighted)
 
   const categoryStrings = {
     AVOD: t('Stream'),

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

@@ -7,11 +7,13 @@
   interface Props extends Omit<ComponentProps<typeof TitlesRail>, 'titles'> {
     fetchFunction: (page: number) => Promise<APIPaginatedResult<TitleData>>
     maxPage?: number
+    lazy?: boolean
   }
 
   const {
     fetchFunction,
     maxPage = 4,
+    lazy = false,
     expandedTitle = $bindable(null),
     expandedRailKey = $bindable(null),
     ...rest
@@ -24,6 +26,12 @@
   let page = $state(1)
   let hasMorePages = $state(false)
   let loading = $state(true)
+  let element: HTMLElement | null = $state(null)
+  let hasBeenVisible = $derived(!lazy)
+
+  $effect(() => {
+    if (hasBeenVisible) fetchTitles()
+  })
 
   $effect(() => {
     if (loading) return
@@ -35,7 +43,22 @@
     fetchTitles()
   })
 
-  onMount(fetchTitles)
+  onMount(() => {
+    if (!lazy) return
+    if (!element) return
+
+    const observer = new IntersectionObserver(([entry]) => {
+      if (!entry.isIntersecting) return
+
+      hasBeenVisible = true
+
+      observer.disconnect()
+    }, { rootMargin: window.innerHeight / 2 + 'px' })
+
+    observer.observe(element)
+
+    return () => observer?.disconnect()
+  })
 
   async function fetchTitles(): Promise<void> {
     loading = true
@@ -52,8 +75,10 @@
   }
 </script>
 
-{#if !titles.length && loading}
-  <TitlesRail titles={emptyPromise} {...rest} />
-{:else}
-  <TitlesRail {titles} {...rest} bind:shown />
-{/if}
+<div bind:this={element}>
+  {#if (lazy && !hasBeenVisible) || (!titles.length && loading)}
+    <TitlesRail titles={emptyPromise} {...rest} />
+  {:else}
+    <TitlesRail {titles} {...rest} bind:shown />
+  {/if}
+</div>

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

@@ -49,6 +49,7 @@
 
 <style lang="scss">
   .heading {
+    min-height: 1lh;
     margin: margin(1) 0 margin(0.5);
     font-size: theme(rail-title-font-size, 18px);
     line-height: normal;

package/src/routes/components/Tracking/TrackingPixelsForTitleDataPerLink.svelte

@@ -2,7 +2,7 @@
   import genreData from '$lib/data/genres.json'
   import { MetaEvent, MetaSource } from '$lib/enums/TrackingEvent'
   import { keyDataAttribute } from '$lib/injection'
-  import { isPixelAllowed } from '$lib/pixel'
+  import { isRetargetingAllowed } from '$lib/retargeting'
   import type { LinkInjection } from '$lib/types/injection'
   import type { TitleData } from '$lib/types/title'
   import { trackViaPixel } from '@playpilot/retargeting-tracking'
@@ -15,7 +15,7 @@
   const { linkInjections }: Props = $props()
 
   onMount(() => {
-    if (!isPixelAllowed()) return
+    if (!isRetargetingAllowed()) return
 
     const observer = new IntersectionObserver((entries) => {
       entries.forEach(entry => {

package/src/tests/lib/{pixel.test.js → retargeting.test.js}

@@ -1,5 +1,5 @@
 import { hasConsentedTo } from '$lib/consent'
-import { isPixelAllowed } from '$lib/pixel'
+import { isRetargetingAllowed } from '$lib/retargeting'
 import { getUserId } from '$lib/user'
 import { RETARGETING_USER_ID_KEY } from '@playpilot/retargeting-tracking'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -12,7 +12,7 @@ vi.mock('$lib/user', () => ({
   getUserId: vi.fn(),
 }))
 
-describe('pixel.ts', () => {
+describe('retargeting.ts', () => {
   beforeEach(() => {
     // @ts-ignore
     window.PlayPilotLinkInjections = {}
@@ -28,35 +28,35 @@ describe('pixel.ts', () => {
       vi.mocked(hasConsentedTo).mockImplementation(() => true)
       window.PlayPilotLinkInjections.config = null
 
-      expect(isPixelAllowed()).toBe(false)
+      expect(isRetargetingAllowed()).toBe(false)
     })
 
     it('Should return false if config object is without allow_retargeting_pixels', () => {
       vi.mocked(hasConsentedTo).mockImplementation(() => true)
       window.PlayPilotLinkInjections.config = { something: true }
 
-      expect(isPixelAllowed()).toBe(false)
+      expect(isRetargetingAllowed()).toBe(false)
     })
 
     it('Should return false if config object is allow_retargeting_pixels is false', () => {
       vi.mocked(hasConsentedTo).mockImplementation(() => true)
       window.PlayPilotLinkInjections.config = { allow_retargeting_pixels: false }
 
-      expect(isPixelAllowed()).toBe(false)
+      expect(isRetargetingAllowed()).toBe(false)
     })
 
     it('Should return true if config object is allow_retargeting_pixels is true', () => {
       vi.mocked(hasConsentedTo).mockImplementation(() => true)
       window.PlayPilotLinkInjections.config = { allow_retargeting_pixels: true }
 
-      expect(isPixelAllowed()).toBe(true)
+      expect(isRetargetingAllowed()).toBe(true)
     })
 
     it('Should return false if config object is allow_retargeting_pixels is true but hasConsentedTo is false', () => {
       vi.mocked(hasConsentedTo).mockImplementation(() => false)
       window.PlayPilotLinkInjections.config = { allow_retargeting_pixels: true }
 
-      expect(isPixelAllowed()).toBe(false)
+      expect(isRetargetingAllowed()).toBe(false)
     })
 
     it('Should set user id on window', () => {
@@ -67,7 +67,7 @@ describe('pixel.ts', () => {
       // @ts-ignore
       expect(window[RETARGETING_USER_ID_KEY]).not.toBeTruthy()
 
-      isPixelAllowed()
+      isRetargetingAllowed()
 
       // @ts-ignore
       expect(window[RETARGETING_USER_ID_KEY]).toBe('abc')

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

@@ -4,6 +4,7 @@ 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'
+import { mockIntersectionObserver } from '../../../../setup'
 
 vi.mock('$lib/api/titles', () => ({
   fetchTitles: vi.fn(),
@@ -16,6 +17,7 @@ vi.mock('$lib/api/api', () => ({
 describe('ExploreResults.svelte', () => {
   beforeEach(() => {
     vi.resetAllMocks()
+    mockIntersectionObserver()
   })
 
   it('Should fetch rails endpoint and titles for each rail', async () => {

package/src/tests/routes/components/InjectionPopover.test.js

@@ -15,8 +15,8 @@ vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
 }))
 
-vi.mock('$lib/pixel', () => ({
-  isPixelAllowed: vi.fn(),
+vi.mock('$lib/retargeting', () => ({
+  isRetargetingAllowed: vi.fn(),
 }))
 
 vi.mock('$lib/api/participants', () => ({

package/src/tests/routes/components/Modals/TitleModal.test.js

@@ -15,8 +15,8 @@ vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
 }))
 
-vi.mock('$lib/pixel', () => ({
-  isPixelAllowed: vi.fn(),
+vi.mock('$lib/retargeting', () => ({
+  isRetargetingAllowed: vi.fn(),
 }))
 
 vi.mock('$lib/api/participants', () => ({

package/src/tests/routes/components/Playlinks/Playlink.test.js

@@ -8,8 +8,8 @@ vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
 }))
 
-vi.mock('$lib/pixel', () => ({
-  isPixelAllowed: vi.fn(),
+vi.mock('$lib/retargeting', () => ({
+  isRetargetingAllowed: vi.fn(),
 }))
 
 vi.mock('$lib/consent', () => ({

package/src/tests/routes/components/Playlinks/Playlinks.test.js

@@ -11,8 +11,8 @@ vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
 }))
 
-vi.mock('$lib/pixel', () => ({
-  isPixelAllowed: vi.fn(),
+vi.mock('$lib/retargeting', () => ({
+  isRetargetingAllowed: vi.fn(),
 }))
 
 vi.mock('svelte', async (importActual) => ({

package/src/tests/routes/components/Title.test.js

@@ -11,8 +11,8 @@ vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
 }))
 
-vi.mock('$lib/pixel', () => ({
-  isPixelAllowed: vi.fn(),
+vi.mock('$lib/retargeting', () => ({
+  isRetargetingAllowed: vi.fn(),
 }))
 
 vi.mock('$lib/api/participants', () => ({

package/src/tests/setup.js

@@ -1,108 +1,108 @@
-import { cleanup } from '@testing-library/svelte'
-import { afterEach, beforeAll, beforeEach, vi } from 'vitest'
-import { fakeFetch } from './helpers'
-
-vi.mock('svelte/transition')
-
-// https://github.com/jsdom/jsdom/issues/3429#issuecomment-1936128876
-const mockAnimations = () => {
-  Element.prototype.animate ??= vi.fn().mockReturnValue({
-    onfinish: null,
-    finished: Promise.resolve(),
-    cancel: vi.fn(),
-    startTime: null,
-    currentTime: null,
-  })
-
-  Element.prototype.getAnimations ??= vi.fn().mockReturnValue([])
-}
-
-const mockLocalStorage = () => {
-  /** @type {Record<string, string>} */
-  let store = {}
-
-  // @ts-ignore
-  ;(window).localStorage = {
-    getItem: function (key) {
-      return store[key] || null
-    },
-    setItem: function (key, value) {
-      store[key] = value.toString()
-    },
-    removeItem: function (key) {
-      delete store[key]
-    },
-    clear: function () {
-      store = {}
-    },
-  }
-}
-
-const mockSessionStorage = () => {
-  /** @type {Record<string, string>} */
-  let store = {}
-
-  // @ts-ignore
-  ;(window).sessionStorage = {
-    getItem: function (key) {
-      return store[key] || null
-    },
-    setItem: function (key, value) {
-      store[key] = value.toString()
-    },
-    removeItem: function (key) {
-      delete store[key]
-    },
-    clear: function () {
-      store = {}
-    },
-  }
-}
-
-const mockIntersectionObserver = () => {
-  // @ts-ignore
-  global.IntersectionObserver = vi.fn(() => ({
-    disconnect: vi.fn(),
-    observe: vi.fn(),
-    unobserve: vi.fn(),
-  }))
-}
-
-beforeAll(() => {
-  fakeFetch()
-  mockLocalStorage()
-  mockSessionStorage()
-  mockIntersectionObserver()
-})
-
-beforeEach(() => {
-  // @ts-ignore
-  window.PlayPilotLinkInjections = { token: 'some-token', require_consent: false }
-
-  // Enable all consent
-  // @ts-ignore
-  window.__tcfapi = (command, _version, callback) => {
-    if (command !== 'addEventListener') return
-
-    setTimeout(() => callback({
-      purpose: { consents: { 1: true, 2: true, 7: true, 8: true, 9: true, 10: true } },
-      eventStatus: 'tcloaded',
-    }, true), 0)
-
-    return 1
-  }
-
-  // Reset cookies
-  document.cookie.split(';').forEach((cookie) => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, '=;'))
-
-  window.HTMLElement.prototype.scrollIntoView = vi.fn()
-
-  localStorage.clear()
-  sessionStorage.clear()
-
-  mockAnimations()
-})
-
-afterEach(() => {
-  cleanup()
-})
+import { cleanup } from '@testing-library/svelte'
+import { afterEach, beforeAll, beforeEach, vi } from 'vitest'
+import { fakeFetch } from './helpers'
+
+vi.mock('svelte/transition')
+
+// https://github.com/jsdom/jsdom/issues/3429#issuecomment-1936128876
+const mockAnimations = () => {
+  Element.prototype.animate ??= vi.fn().mockReturnValue({
+    onfinish: null,
+    finished: Promise.resolve(),
+    cancel: vi.fn(),
+    startTime: null,
+    currentTime: null,
+  })
+
+  Element.prototype.getAnimations ??= vi.fn().mockReturnValue([])
+}
+
+const mockLocalStorage = () => {
+  /** @type {Record<string, string>} */
+  let store = {}
+
+  // @ts-ignore
+  ;(window).localStorage = {
+    getItem: function (key) {
+      return store[key] || null
+    },
+    setItem: function (key, value) {
+      store[key] = value.toString()
+    },
+    removeItem: function (key) {
+      delete store[key]
+    },
+    clear: function () {
+      store = {}
+    },
+  }
+}
+
+const mockSessionStorage = () => {
+  /** @type {Record<string, string>} */
+  let store = {}
+
+  // @ts-ignore
+  ;(window).sessionStorage = {
+    getItem: function (key) {
+      return store[key] || null
+    },
+    setItem: function (key, value) {
+      store[key] = value.toString()
+    },
+    removeItem: function (key) {
+      delete store[key]
+    },
+    clear: function () {
+      store = {}
+    },
+  }
+}
+
+export const mockIntersectionObserver = () => {
+  // @ts-ignore
+  global.IntersectionObserver = vi.fn((callback) => ({
+    disconnect: vi.fn(),
+    observe: vi.fn(() => callback([{ isIntersecting: true }])),
+    unobserve: vi.fn(),
+  }))
+}
+
+beforeAll(() => {
+  fakeFetch()
+  mockLocalStorage()
+  mockSessionStorage()
+  mockIntersectionObserver()
+})
+
+beforeEach(() => {
+  // @ts-ignore
+  window.PlayPilotLinkInjections = { token: 'some-token', require_consent: false }
+
+  // Enable all consent
+  // @ts-ignore
+  window.__tcfapi = (command, _version, callback) => {
+    if (command !== 'addEventListener') return
+
+    setTimeout(() => callback({
+      purpose: { consents: { 1: true, 2: true, 7: true, 8: true, 9: true, 10: true } },
+      eventStatus: 'tcloaded',
+    }, true), 0)
+
+    return 1
+  }
+
+  // Reset cookies
+  document.cookie.split(';').forEach((cookie) => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, '=;'))
+
+  window.HTMLElement.prototype.scrollIntoView = vi.fn()
+
+  localStorage.clear()
+  sessionStorage.clear()
+
+  mockAnimations()
+})
+
+afterEach(() => {
+  cleanup()
+})