@playpilot/tpi 8.25.1 → 8.26.1

package/package.json

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

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/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/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/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()
+})