@playpilot/tpi 8.5.10-beta.2 → 8.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.5.10-beta.2",
+	"version": "8.6.0",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

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

@@ -1,5 +1,4 @@
 export type ExploreRoute = {
   key: string
-  label: string
   component: any
 }

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

@@ -1,28 +1,27 @@
 <script lang="ts">
+  import type { ExploreFilter } from '$lib/types/filter'
   import { heading } from '$lib/actions/heading'
   import { exploreParentSelector, useExploreRouter } from '$lib/explore'
   import { t } from '$lib/localization'
-  import type { ExploreRoute } from '$lib/types/explore'
   import { track } from '$lib/tracking'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { fetchAds } from '$lib/api/ads'
   import { onMount, type Snippet } from 'svelte'
   import Search from './Filter/Search.svelte'
-  import Button from '../Button.svelte'
+  import Filter from './Filter/Filter.svelte'
 
   interface Props {
-    routes: ExploreRoute[]
-    currentRoute: ExploreRoute
-    navigate?: (route: ExploreRoute) => void
+    navigate?: (key: string) => void
     searchQuery?: string
+    filter?: ExploreFilter
     children: Snippet
   }
 
-  let { routes, currentRoute, navigate = () => null, searchQuery = $bindable(''), children }: Props = $props()
+  let { navigate = () => null, searchQuery = $bindable(''), filter = $bindable({}), children }: Props = $props()
 
   let element: HTMLElement | null = null
   let height: string | null = $state(null)
-  let clientWidth: number = $state(0)
+  let clientWidth: number = $state(window.innerWidth)
 
   $effect(() => {
     // Set the height of this element to match that of it's container. That way we can
@@ -32,7 +31,6 @@
 
   onMount(async () => {
     track(TrackingEvent.ExplorePageView)
-    console.log('track page view')
 
     if (!window.PlayPilotLinkInjections.ads?.length) window.PlayPilotLinkInjections.ads = await fetchAds()
   })
@@ -55,18 +53,14 @@
     </div>
   </div>
 
+  <Search oninput={(query) => searchQuery = query} />
+
   {#if useExploreRouter()}
-    <div class="navigation" role="navigation">
-      {#each routes as route}
-        <Button variant="border" size="large" active={currentRoute.key === route.key} onclick={() => navigate(route)}>
-          {t(route.label)}
-        </Button>
-      {/each}
+    <div class="filter">
+      <Filter {filter} limit={clientWidth < 500} showSorting={!searchQuery} onchange={() => navigate('results')} />
     </div>
   {/if}
 
-  <Search oninput={(query) => searchQuery = query} />
-
   {@render children()}
 </div>
 
@@ -121,9 +115,11 @@
     line-height: 1.35;
   }
 
-  .navigation {
+  .filter {
     display: flex;
+    flex-direction: column;
     gap: margin(0.5);
-    margin-bottom: margin(0.5);
+    width: 100%;
+    margin: margin(0.5) 0 margin(1.5);
   }
 </style>

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

@@ -1,8 +1,8 @@
 <script lang="ts">
   import type { ExploreRoute } from '$lib/types/explore'
+  import type { ExploreFilter } from '$lib/types/filter'
   import { useExploreRouter } from '$lib/explore'
   import { track } from '$lib/tracking'
-  import { t } from '$lib/localization'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import ExploreHome from './Routes/ExploreHome.svelte'
   import ExploreResults from './Routes/ExploreResults.svelte'
@@ -11,7 +11,6 @@
   const routes: ExploreRoute[] = [
     {
       key: 'results',
-      label: t('Explore'),
       component: ExploreResults,
     },
   ]
@@ -19,13 +18,13 @@
   if (useExploreRouter()) {
     routes.unshift({
       key: 'home',
-      label: t('Home'),
       component: ExploreHome,
     })
   }
 
   let currentRoute: ExploreRoute = $state(routes[0])
   let searchQuery: string = $state('')
+  let filter: ExploreFilter = $state({})
 
   const CurrentRouteComponent = $derived(currentRoute.component)
 
@@ -33,13 +32,13 @@
     if (searchQuery) currentRoute = routes.find(route => route.key === 'results')!
   })
 
-  function navigate(route: ExploreRoute): void {
-    currentRoute = route
+  function navigate(key: string): void {
+    currentRoute = routes.find(route => route.key === key) || routes[0]
 
-    track(TrackingEvent.ExploreNavigate, null, { route: route.key })
+    track(TrackingEvent.ExploreNavigate, null, { route: currentRoute.key })
   }
 </script>
 
-<ExploreLayout {routes} {currentRoute} {navigate} bind:searchQuery>
-  <CurrentRouteComponent {searchQuery} />
+<ExploreLayout {navigate} bind:searchQuery bind:filter>
+  <CurrentRouteComponent {searchQuery} {filter} {navigate} />
 </ExploreLayout>

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

@@ -7,28 +7,31 @@
   import type { ExploreFilter } from '$lib/types/filter'
   import type { TitleData } from '$lib/types/title'
   import { hasConsentedTo } from '$lib/consent'
-  import { trackViaPixel } from '@playpilot/retargeting-tracking'
+  import { useExploreRouter } from '$lib/explore'
   import { t } from '$lib/localization'
+  import { trackViaPixel } from '@playpilot/retargeting-tracking'
   import Button from '../../Button.svelte'
   import GridTitle from '../../GridTitle.svelte'
   import GridTitleSkeleton from '../../GridTitleSkeleton.svelte'
   import ListTitle from '../../ListTitle.svelte'
   import ListTitleSkeleton from '../../ListTitleSkeleton.svelte'
-  import Filter from '../Filter/Filter.svelte'
   import Empty from '../Empty.svelte'
+  import IconArrow from '../../Icons/IconArrow.svelte'
 
   interface Props {
-    searchQuery?: string
+    searchQuery?: string,
+    filter?: ExploreFilter,
+    navigate?: (key: string) => void
   }
 
-  const { searchQuery = '' }: Props = $props()
-
-  const filter: ExploreFilter = $state({})
+  const { searchQuery = '', filter = {}, navigate = () => null }: Props = $props()
 
+  // svelte-ignore non_reactive_update
+  let page = 1
   let titles: TitleData[] = $state([])
-  let page = $state(1)
   let debounce: ReturnType<typeof setTimeout> | null = null
   let latestRequestId = 0
+  let lastRequestAsString = JSON.stringify(filter) + searchQuery
   let promise = $state(getTitlesForFilter())
   let width = $state(0)
 
@@ -46,6 +49,10 @@
     if (searchQuery || latestRequestId != 0) search(searchQuery)
   })
 
+  $effect(() => {
+    if (filter) setFilter()
+  })
+
   async function getTitlesForFilter(): Promise<APIPaginatedResult<TitleData>> {
     latestRequestId += 1
     const requestId = latestRequestId
@@ -75,6 +82,8 @@
   }
 
   async function search(query: string): Promise<void> {
+    if (!isNewRequest()) return
+
     if (debounce) clearTimeout(debounce)
 
     debounce = setTimeout(() => {
@@ -89,6 +98,8 @@
   }
 
   function setFilter(): void {
+    if (!isNewRequest()) return
+
     resetTitles()
     promise = getTitlesForFilter()
   }
@@ -109,13 +120,28 @@
     openModal({ event, data: title })
     track(TrackingEvent.ExploreTitleClick, title)
   }
+
+  function clearFilter(): void {
+    for (const key of Object.keys(filter)) {
+      delete filter[key]
+    }
+  }
+
+  function isNewRequest(): boolean {
+    const requestAsString = JSON.stringify(filter) + searchQuery
+    if (requestAsString === lastRequestAsString) return false
+
+    lastRequestAsString = requestAsString
+    return true
+  }
 </script>
 
-{#key grid}
-  <div class="filter">
-    <Filter {filter} limit={!grid} onchange={setFilter} showSorting={!searchQuery} />
-  </div>
-{/key}
+{#if useExploreRouter()}
+  <Button variant="link" onclick={() => { navigate('home'); clearFilter() }}>
+    <IconArrow direction="left" />
+    {t('Home')}
+  </Button>
+{/if}
 
 <div class="titles" class:grid role="main" style:--grid-columns={gridColumns} bind:clientWidth={width} data-testid="explore-results">
   {#each titles as title}
@@ -148,14 +174,6 @@
 {/await}
 
 <style lang="scss">
-  .filter {
-    display: flex;
-    flex-direction: column;
-    gap: margin(0.5);
-    width: 100%;
-    margin: margin(0.5) 0 margin(2);
-  }
-
   .titles {
     --playpilot-list-item-padding: 0;
     --playpilot-list-item-background: transparent;
@@ -164,6 +182,7 @@
     display: flex;
     flex-direction: column;
     gap: margin(0.5);
+    margin-top: margin(1.5);
 
     &.grid {
       display: grid;

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

@@ -67,6 +67,23 @@ describe('$lib/api/api', () => {
         expect(global.fetch).toHaveBeenCalledTimes(1)
       })
 
+      it('Should fetch twice once for the same path if the first request failed', async () => {
+        fakeFetch({ ok: false })
+        try {
+          await api('/some-path')
+        } catch {
+          // Ignore me
+        }
+
+        try {
+          await api('/some-path')
+        } catch {
+          // Ignore me
+        }
+
+        expect(global.fetch).toHaveBeenCalledTimes(2)
+      })
+
       it('Should fetch multiple times if multiple requests are made for different paths', async () => {
         await api('/some-path')
         await api('/some-other-path')

package/src/tests/main.test.js

@@ -38,6 +38,9 @@ describe('main.ts', () => {
     vi.resetModules()
     vi.resetAllMocks()
 
+    // @ts-ignore
+    delete window.PlayPilotLinkInjections
+
     await import('../main')
   })
 
@@ -48,6 +51,7 @@ describe('main.ts', () => {
   describe('initialize', () => {
     it('Should not call setConsent when only a token is passed', () => {
       window.PlayPilotLinkInjections.initialize({ token: 'a' })
+      console.log(window.PlayPilotLinkInjections)
 
       expect(setConsent).not.toHaveBeenCalled()
 

package/src/tests/mount.test.js

@@ -39,6 +39,15 @@ describe('mount.ts', () => {
 
       expect(window.PlayPilotLinkInjections.app).toEqual({ some_key: 'Some value' })
     })
+
+    it('Should not call mount again if app is already present', () => {
+      vi.mocked(mount).mockReturnValue({ some_key: 'Some value' })
+
+      window.PlayPilotMount.mount()
+      window.PlayPilotMount.mount()
+
+      expect(mount).toBeCalledTimes(1)
+    })
   })
 
   describe('destroy', () => {

package/src/tests/routes/components/Explore/ExploreLayout.test.js

@@ -10,18 +10,6 @@ import { fetchAds } from '$lib/api/ads'
 
 const children = createRawSnippet(() => ({ render: () => '<div></div>' }))
 
-const routes = [
-  {
-    key: 'route-1',
-    label: 'Route 1',
-    component: {},
-  }, {
-    key: 'route-2',
-    label: 'Route 2',
-    component: {},
-  },
-]
-
 vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
 }))
@@ -38,20 +26,14 @@ describe('ExploreLayout.svelte', () => {
     window.PlayPilotLinkInjections = { config: { explore_use_router: true } }
   })
 
-  it('Should render each given route', () => {
-    const { getByText } = render(ExploreLayout, { routes, currentRoute: routes[0], children })
-
-    expect(getByText('Route 1')).toBeTruthy()
-    expect(getByText('Route 2')).toBeTruthy()
-  })
-
-  it('Should call navigate when route is clicked', async () => {
+  it('Should call navigate when filter is changed', async () => {
     const navigate = vi.fn()
-    const { getByText } = render(ExploreLayout, { routes, currentRoute: routes[0], navigate, children })
+    const { getByText } = render(ExploreLayout, { navigate, children })
 
-    await fireEvent.click(getByText('Route 2'))
+    await fireEvent.click(getByText('Genres'))
+    await fireEvent.click(getByText('Drama'))
 
-    expect(navigate).toHaveBeenCalledWith(routes[1])
+    expect(navigate).toHaveBeenCalledWith('results')
   })
 
   it('Should should set its height if parent has height', async () => {
@@ -59,7 +41,7 @@ describe('ExploreLayout.svelte', () => {
 
     const { container } = render(
       ExploreLayout,
-      { routes, currentRoute: routes[0], children },
+      { children },
       { baseElement: /** @type {HTMLElement} */ (document.querySelector(exploreParentSelector)),
       })
 
@@ -69,7 +51,7 @@ describe('ExploreLayout.svelte', () => {
   })
 
   it('Should call tracking event and fetchAds on mount', () => {
-    render(ExploreLayout, { routes, currentRoute: routes[0], children })
+    render(ExploreLayout, { children })
 
     expect(track).toHaveBeenCalledWith(TrackingEvent.ExplorePageView)
     expect(fetchAds).toHaveBeenCalled()
@@ -79,7 +61,7 @@ describe('ExploreLayout.svelte', () => {
     // @ts-ignore
     window.PlayPilotLinkInjections.ads = ['a']
 
-    render(ExploreLayout, { routes, currentRoute: routes[0], children })
+    render(ExploreLayout, { children })
 
     expect(fetchAds).not.toHaveBeenCalled()
   })

package/src/tests/routes/components/Explore/ExploreRouter.test.js

@@ -23,10 +23,11 @@ describe('ExploreRouter.svelte', () => {
     expect(getByTestId('explore-home')).toBeTruthy()
   })
 
-  it('Should render results on click of button', async () => {
+  it('Should render results after navigate', async () => {
     const { getByText, getByTestId } = render(ExploreRouter)
 
-    await fireEvent.click(getByText('Explore'))
+    await fireEvent.click(getByText('Genres'))
+    await fireEvent.click(getByText('Drama'))
 
     expect(getByTestId('explore-results')).toBeTruthy()
   })

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

@@ -6,6 +6,7 @@ import { fetchTitles } from '$lib/api/titles'
 import { title } from '$lib/fakeData'
 import { TrackingEvent } from '$lib/enums/TrackingEvent'
 import { track } from '$lib/tracking'
+import { clearCache } from '$lib/api/api'
 
 vi.mock('$lib/api/titles', () => ({
   fetchTitles: vi.fn(),
@@ -24,12 +25,14 @@ describe('ExploreResults.svelte', () => {
     // @ts-ignore
     window.PlayPilotLinkInjections = {}
 
+    clearCache()
     vi.resetAllMocks()
   })
 
   it('Should call fetchTitles on mount', () => {
     render(ExploreResults)
 
+    expect(fetchTitles).toHaveBeenCalledTimes(1)
     expect(fetchTitles).toHaveBeenCalledWith({ page_size: 24, page: 1 })
   })
 
@@ -102,13 +105,8 @@ describe('ExploreResults.svelte', () => {
   it('Should call fetchTitles with string of comma separated values when filtering with array value', async () => {
     vi.mocked(fetchTitles).mockResolvedValue({ results: [title], next: 'truthy', previous: null })
 
-    const { getByText } = render(ExploreResults)
-
-    await fireEvent.click(getByText('Genres'))
-    await fireEvent.click(getByText('Action'))
-    await fireEvent.click(getByText('Adventure'))
+    render(ExploreResults, { filter: { genres: { type: 'array', value: ['101', '109'] } } })
 
-    expect(fetchTitles).toHaveBeenCalledWith({ page: 1, page_size: 24, genres: '101' })
     expect(fetchTitles).toHaveBeenCalledWith({ page: 1, page_size: 24, genres: '101,109' })
   })
 
@@ -137,11 +135,7 @@ describe('ExploreResults.svelte', () => {
   it('Should call fetchTitles with min and max values when filtering with range value', async () => {
     vi.mocked(fetchTitles).mockResolvedValue({ results: [title], next: 'truthy', previous: null })
 
-    const { container, getByText } = render(ExploreResults)
-
-    await fireEvent.click(getByText('IMDb'))
-    // @ts-ignore
-    await fireEvent.input(container.querySelector('#lower'), { target: { value: 2 } })
+    render(ExploreResults, { filter: { imdb_score: { type: 'range', value: [2, 10] } } })
 
     await waitFor(() => {
       expect(fetchTitles).toHaveBeenCalledWith({ page: 1, page_size: 24, imdb_score_min: 2, imdb_score_max: 10 })
@@ -151,15 +145,12 @@ describe('ExploreResults.svelte', () => {
   it('Should call fetchTitles with multiple values when given', async () => {
     vi.mocked(fetchTitles).mockResolvedValue({ results: [title], next: 'truthy', previous: null })
 
-    const { container, getByText } = render(ExploreResults)
-
-    await fireEvent.click(getByText('Genres'))
-    await fireEvent.click(getByText('Action'))
-    await fireEvent.click(getByText('Adventure'))
-
-    await fireEvent.click(getByText('IMDb'))
-    // @ts-ignore
-    await fireEvent.input(container.querySelector('#lower'), { target: { value: 2 } })
+    render(ExploreResults, {
+      filter: {
+        genres: { type: 'array', value: ['101', '109'] },
+        imdb_score: { type: 'range', value: [2, 10] },
+      },
+    })
 
     await waitFor(() => {
       expect(fetchTitles).toHaveBeenCalledWith({ page: 1, page_size: 24, genres: '101,109', imdb_score_min: 2, imdb_score_max: 10 })
@@ -169,10 +160,7 @@ describe('ExploreResults.svelte', () => {
   it('Should call fetchTitles with string for sorting when sorting is used', async () => {
     vi.mocked(fetchTitles).mockResolvedValue({ results: [title], next: 'truthy', previous: null })
 
-    const { getByText } = render(ExploreResults)
-
-    await fireEvent.click(getByText('Sort by'))
-    await fireEvent.click(getByText('New'))
+    render(ExploreResults, { filter: { ordering: { type: 'string', value: '-new' } } })
 
     expect(fetchTitles).toHaveBeenCalledWith({ page: 1, page_size: 24, ordering: '-new' })
   })
@@ -204,7 +192,7 @@ describe('ExploreResults.svelte', () => {
   })
 
   it('Should show error message if api responded with error', async () => {
-    vi.mocked(fetchTitles).mockRejectedValueOnce(null)
+    vi.mocked(fetchTitles).mockRejectedValue(null)
 
     const { getByText } = render(ExploreResults)