@playpilot/tpi 6.1.2 → 6.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "6.1.2",
+	"version": "6.2.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
@@ -19,6 +19,7 @@
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@testing-library/svelte": "^5.2.6",
+		"@types/node": "^25.2.0",
 		"@typescript-eslint/eslint-plugin": "^8.32.1",
 		"@typescript-eslint/parser": "^8.32.1",
 		"eslint": "^9.27.0",

package/src/lib/data/genres.json

@@ -1,16 +1,4 @@
 [
-  {
-    "slug": "100",
-    "name": "All",
-    "categories": {
-      "movie": 100,
-      "series": 100,
-      "documentary": 100,
-      "kids": 100,
-      "cinema": 100,
-      "podcasts": 100
-    }
-  },
   {
     "slug": "999",
     "name": "Unscripted",

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

@@ -33,12 +33,17 @@ export type ConfigResponse = {
    */
   disable_public_injections?: boolean
 
-  /*
+  /**
    * Region to fall back on if other methods of getting the region fail. This should be equal to the region most relevant
    * to the partner. Should be lowercase.
    */
   fallback_region?: string
 
+  /**
+   * Disclaimer text that is shown above playlinks in title cards used to replace the default text
+   */
+  playlinks_disclaimer_text?: string
+
   /**
    * The following options are all relevant for in text disclaimers, which renders as a disclaimer text within the article,
    * rather than only inside of title cards.

package/src/routes/components/Editorial/AIIndicator.svelte

@@ -25,7 +25,7 @@
 
       <div>
         {#if !aiEnabled}
-          <strong>AI processing is disabled.</strong> Enable AI from the <a href="https://partner.playpilot.net">Partner Portal</a>
+          <strong>AI processing is disabled.</strong>
         {:else if aiRunning}
           <strong>AI links are currently processing.</strong> This can take several minutes. We'll insert all found injections once ready.
 
@@ -70,10 +70,6 @@
 {/if}
 
 <style lang="scss">
-  a {
-    color: currentColor;
-  }
-
   p {
     margin: 0;
   }

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

@@ -0,0 +1,23 @@
+<div class="empty">
+  <p>
+    <strong>No results were found</strong><br>
+    Sorry, we couldn't find anything matching your filter.
+  </p>
+</div>
+
+<style lang="scss">
+  p {
+    margin: 0;
+  }
+
+  strong {
+    font-size: theme(font-size-large);
+  }
+
+  .empty {
+    max-width: theme(explore-header-max-width, 600px);
+    padding: margin(2);
+    border-radius: theme(border-radius-large);
+    background: theme(lighter);
+  }
+</style>

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

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { heading } from '$lib/actions/heading'
-  import { searchTitles } from '$lib/api/search'
   import { fetchTitles } from '$lib/api/titles'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { exploreParentSelector } from '$lib/explore'
@@ -17,15 +16,16 @@
   import ListTitleSkeleton from '../ListTitleSkeleton.svelte'
   import Filter from './Filter/Filter.svelte'
   import Search from './Filter/Search.svelte'
+  import Empty from './Empty.svelte'
 
   const filter: ExploreFilter = $state({})
 
   let element: HTMLElement | null = null
   let titles: TitleData[] = $state([])
-  let page = 1
-  let searchQuery = ''
+  let page = $state(1)
   let debounce: ReturnType<typeof setTimeout> | null = null
   let latestRequestId = 0
+  let searchQuery = $state('')
   let promise = $state(getTitlesForFilter())
   let height: string | null = $state(null)
   let width = $state(0)
@@ -52,40 +52,26 @@
     latestRequestId += 1
     const requestId = latestRequestId
 
-    let response: APIPaginatedResult<TitleData>
+    const params: Record<string, string | number> = { page_size: 24, page }
 
-    // If a search query is given we use searchTitles with just the query.
-    // If not, we use fetchTitles with the given params for the filter.
-    // This is because the backend does not support filters for search results yet.
-    // In the future we will likely merge these two, either by adding filters in the backend
-    // or by filtering results in the frontend (this seems like the less good option).
-    if (searchQuery) {
-      const results: TitleData[] = await searchTitles(searchQuery)
-      response = { results, next: null, previous: null }
+    if (searchQuery) params.search = searchQuery
 
-      if (requestId === latestRequestId) titles = results
-    } else {
-      const params: Record<string, string | number> = { page_size: 24, page }
+    Object.entries(filter).forEach(([key, { type, value }]) => {
+      if (type === 'string') {
+        params[key] = value as string
+      } else if (type === 'array') {
+        params[key] = (value as string[]).join(',')
+      } else if (type === 'range') {
+        const [min, max] = value as number[]
 
-      Object.entries(filter).forEach(([key, { type, value }]) => {
-        if (type === 'string') {
-          params[key] = value as string
-        } else if (type === 'array') {
-          params[key] = (value as string[]).join(',')
-        } else if (type === 'range') {
-          const [min, max] = value as number[]
+        params[key + '_min'] = min
+        params[key + '_max'] = max
+      }
+    })
 
-          params[key + '_min'] = min
-          params[key + '_max'] = max
-        }
-      })
+    const response = await fetchTitles(params)
 
-      response = await fetchTitles(params)
-
-      if (!response?.results) throw new Error('Something went wrong when fetching titles in Explore')
-
-      if (requestId === latestRequestId) titles = [...titles, ...response.results]
-    }
+    if (requestId === latestRequestId) titles = [...titles, ...response.results]
 
     return response
   }
@@ -142,7 +128,7 @@
 
     {#key grid}
       <Search oninput={search} />
-      <Filter {filter} limit={!grid} onchange={setFilter} />
+      <Filter {filter} limit={!grid} onchange={setFilter} showSorting={!searchQuery} />
     {/key}
   </div>
 
@@ -168,8 +154,12 @@
         <Button size="large" onclick={fetchMoreTitles}>Show more</Button>
       </div>
     {/if}
+
+    {#if !titles?.length && page === 1}
+      <Empty />
+    {/if}
   {:catch}
-    Something went wrong
+    <p>Something went wrong</p>
   {/await}
 </div>
 
@@ -178,8 +168,9 @@
     background: theme(explore-background, light);
     border-radius: theme(border-radius-large);
     max-width: theme(explore-max-width, 1200px);
+    min-height: 75vh;
     margin: 0 auto;
-    padding: theme(explore-padding, margin(1) margin(1) margin(2));
+    padding: theme(explore-padding, margin(1) margin(1) margin(6));
     overflow: auto;
     font-family: theme(font-family);
     font-family: theme(detail-font-family, font-family);

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

@@ -8,15 +8,16 @@
   import Button from '../../Button.svelte'
   import IconArrow from '../../Icons/IconArrow.svelte'
   import IconFilter from '../../Icons/IconFilter.svelte'
-  import { scale } from 'svelte/transition'
+  import {  fly, scale } from 'svelte/transition'
 
   interface Props {
     filter: ExploreFilter
     onchange?: () => void
     limit?: boolean
+    showSorting?: boolean
   }
 
-  const { filter, onchange = () => null, limit = true }: Props = $props()
+  const { filter, onchange = () => null, limit = true, showSorting = true }: Props = $props()
 
   const shownItemsLimit = 3
   const items = [{
@@ -67,9 +68,11 @@
       </Button>
     {/if}
 
-    <div class="sorting">
-      <FilterSorting {filter} {onchange} />
-    </div>
+    {#if showSorting}
+      <div class="sorting" transition:fly={{ x: 5, duration: 100 }}>
+        <FilterSorting {filter} {onchange} />
+      </div>
+    {/if}
   </div>
 </div>
 

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

@@ -38,7 +38,7 @@
 
 {#if playlinks.length}
   <div class="disclaimer" data-testid="commission-disclaimer">
-    {t('Commission Disclaimer')}
+    {window?.PlayPilotLinkInjections?.config?.playlinks_disclaimer_text || t('Commission Disclaimer')}
     <a href="https://playpilot.com/" target="_blank" rel="sponsored">PlayPilot.com</a>
   </div>
 {/if}

package/src/routes/components/TitlePoster.svelte

@@ -28,6 +28,6 @@
     display: block;
     width: 100%;
     height: auto;
-    color: theme(detail-text-color, text-color-alt);
+    color: transparent;
   }
 </style>

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

@@ -4,7 +4,6 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import Explore from '../../../../routes/components/Explore/Explore.svelte'
 import { fetchTitles } from '$lib/api/titles'
 import { title } from '$lib/fakeData'
-import { searchTitles } from '$lib/api/search'
 import { TrackingEvent } from '$lib/enums/TrackingEvent'
 import { track } from '$lib/tracking'
 
@@ -103,21 +102,6 @@ describe('Explore.svelte', () => {
     expect(queryByTestId('skeleton')).not.toBeTruthy()
   })
 
-  it('Should fetch using searchTitles when query is given, resetting previous titles', async () => {
-    vi.mocked(fetchTitles).mockResolvedValueOnce({ results: [title, title], next: 'truthy', previous: null })
-
-    const { getByRole, getAllByTestId } = render(Explore)
-
-    vi.mocked(searchTitles).mockResolvedValueOnce([title])
-
-    fireEvent.input(getByRole('searchbox'), { target: { value: 'some query' } })
-
-    await waitFor(() => {
-      expect(searchTitles).toHaveBeenCalledWith('some query')
-      expect(getAllByTestId('title')).toHaveLength(1)
-    })
-  })
-
   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 })
 
@@ -131,6 +115,21 @@ describe('Explore.svelte', () => {
     expect(fetchTitles).toHaveBeenCalledWith({ page: 1, page_size: 24, genres: '101,109' })
   })
 
+  it('Should include search param when query is given', async () => {
+    vi.mocked(fetchTitles).mockResolvedValueOnce({ results: [title, title], next: 'truthy', previous: null })
+
+    const { getByRole, getAllByTestId } = render(Explore)
+
+    vi.mocked(fetchTitles).mockResolvedValueOnce({ results: [title], next: 'truthy', previous: null })
+
+    fireEvent.input(getByRole('searchbox'), { target: { value: 'some query' } })
+
+    await waitFor(() => {
+      expect(fetchTitles).toHaveBeenCalledWith({ page: 1, page_size: 24, search: 'some query' })
+      expect(getAllByTestId('title')).toHaveLength(1)
+    })
+  })
+
   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 })
 
@@ -173,4 +172,40 @@ describe('Explore.svelte', () => {
 
     expect(fetchTitles).toHaveBeenCalledWith({ page: 1, page_size: 24, ordering: '-new' })
   })
+
+  it('Should show empty message if no titles are returned for first page', async () => {
+    vi.mocked(fetchTitles).mockResolvedValue({ results: [], next: null, previous: null })
+
+    const { getByText } = render(Explore)
+
+    await waitFor(() => {
+      expect(getByText('No results were found')).toBeTruthy()
+    })
+  })
+
+  it('Should not show empty message if no titles are returned for pages past the first page', async () => {
+    vi.mocked(fetchTitles).mockResolvedValue({ results: [title], next: 'truthy', previous: null })
+
+    const { getByText, queryByText } = render(Explore)
+
+    await waitFor(() => getByText('Show more'))
+
+    vi.mocked(fetchTitles).mockResolvedValue({ results: [], next: null, previous: null })
+
+    await fireEvent.click(getByText('Show more'))
+
+    await waitFor(() => {
+      expect(queryByText('No results were found')).not.toBeTruthy()
+    })
+  })
+
+  it('Should show error message if api responded with error', async () => {
+    vi.mocked(fetchTitles).mockRejectedValueOnce(null)
+
+    const { getByText } = render(Explore)
+
+    await waitFor(() => {
+      expect(getByText('Something went wrong')).toBeTruthy()
+    })
+  })
 })

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

@@ -55,4 +55,16 @@ describe('Filter.svelte', () => {
 
     expect(fetchProviders).toHaveBeenCalled()
   })
+
+  it('Should not show sortings when showSortings is false', () => {
+    const { container } = render(Filter, { filter: {}, showSorting: false })
+
+    expect(container.querySelector('.sorting')).not.toBeTruthy()
+  })
+
+  it('Should show sortings when showSortings is true', () => {
+    const { container } = render(Filter, { filter: {}, showSorting: true })
+
+    expect(container.querySelector('.sorting')).toBeTruthy()
+  })
 })

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

@@ -1,5 +1,5 @@
 import { fireEvent, render } from '@testing-library/svelte'
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import Playlinks from '../../../../routes/components/Playlinks/Playlinks.svelte'
 import { title } from '$lib/fakeData'
@@ -17,6 +17,11 @@ vi.mock('svelte', async (importActual) => ({
 }))
 
 describe('Playlinks.svelte', () => {
+  beforeEach(() => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = {}
+  })
+
   it('Should render each given playlink', () => {
     const playlinks = [
       { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
@@ -35,9 +40,26 @@ describe('Playlinks.svelte', () => {
       { name: 'Some other playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
     ]
     // @ts-ignore
-    const { getByTestId } = render(Playlinks, { playlinks, title })
+    const { getByTestId, getByText } = render(Playlinks, { playlinks, title })
 
     expect(getByTestId('commission-disclaimer')).toBeTruthy()
+    expect(getByText('We may earn a commission', { exact: false })).toBeTruthy()
+  })
+
+  it('Should replace default disclaimer text with config value when given', () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = {
+      config: { playlinks_disclaimer_text: 'Some disclaimer' },
+    }
+
+    const playlinks = [
+      { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
+    ]
+
+    // @ts-ignore
+    const { getByText } = render(Playlinks, { playlinks, title })
+
+    expect(getByText('Some disclaimer')).toBeTruthy()
   })
 
   it('Should show empty state without commission disclaimer when no playlinks were given', () => {

package/tsconfig.json

@@ -9,7 +9,8 @@
 		"skipLibCheck": true,
 		"sourceMap": true,
 		"strict": true,
-		"moduleResolution": "bundler"
+		"moduleResolution": "bundler",
+		"types": ["node"]
 	}
 	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
 	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files