@playpilot/tpi 8.8.0 → 8.9.0

package/events.md

@@ -77,6 +77,8 @@ Event | Action | Info | Payload
 `ali_manual_report` | _Fires only through manual action when reporting issues with an injection via the Editor._ | | `Title`, `report_reason`, `sid` (of injection), `title` (of injection), `sentence`, `failed` (true or false), `failed_message` (reason for failure as given in the editor), `manual` (true or false)
 `ali_editor_error` | _Fires whenever an error occurs within the Editor._ | | `Title`, `phrase`, `sentence`
 `ali_injection_error` | _Fires whenever an error occurs during injection_ | This includes fetching the injections as well as actually injecting itself. Does not include fetching of the config object. | `message` (error message as given by the browser)
+`venus_explore_results_error` | _Fires whenever an error occurs when fetching titles on the results page of the streaming guide_ | | `message` (error message as given by the browser), `params`
+`venus_explore_home_rail_error` | _Fires whenever an error when fetching titles for any rail on the streaming guide homepage_ | | `message` (error message as given by the browser), `params`
 
 ### Split Testing
 Event | Action | Info | Payload

package/package.json

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

package/src/lib/api/titles.ts

@@ -19,9 +19,7 @@ export async function fetchTitles(params: Record<string, any> = {}): Promise<API
 
   if (params.region !== null) params.region = params.region || await getRegionBasedOnIp()
 
-  const response = await api<APIPaginatedResult<TitleData>>(`/titles/browse?api-token=${apiToken}&` + paramsToString(params))
-
-  return response
+  return await api<APIPaginatedResult<TitleData>>(`/titles/browse?api-token=${apiToken}&` + paramsToString(params))
 }
 
 export async function fetchSimilarTitles(title: TitleData): Promise<TitleData[]> {

package/src/lib/data/translations.ts

@@ -231,6 +231,21 @@ export const translations = {
     [Language.Swedish]: 'Toppbetyg',
     [Language.Danish]: 'Højst vurderet',
   },
+  '-popularity': {
+    [Language.English]: 'Popularity',
+    [Language.Swedish]: 'Popularitet',
+    [Language.Danish]: 'Popularitet',
+  },
+  '-new': {
+    [Language.English]: 'New',
+    [Language.Swedish]: 'Nytt',
+    [Language.Danish]: 'Nyt',
+  },
+  '-best': {
+    [Language.English]: 'Top Rated',
+    [Language.Swedish]: 'Toppbetyg',
+    [Language.Danish]: 'Højst vurderet',
+  },
   'Search': {
     [Language.English]: 'Search',
     [Language.Swedish]: 'Sök',

package/src/lib/enums/TrackingEvent.ts

@@ -40,6 +40,8 @@ export const TrackingEvent = {
   ManualReport: 'ali_manual_report',
   EditorError: 'ali_editor_error',
   InjectionError: 'ali_injection_error',
+  ExploreResultsError: 'venus_explore_results_error',
+  ExploreHomeRailError: 'venus_explore_home_rail_error',
 
   // Ads
   TopScrollView: 'ali_top_scroll_view',

package/src/lib/filter.ts

@@ -0,0 +1,12 @@
+import type { ExploreFilterItem } from './types/filter'
+
+export function isFilterItemActive(item: ExploreFilterItem, range?: [number, number] | null): boolean {
+  if (!item) return false
+
+  const { type, value } = item
+
+  if (type === 'array' && !((value as Array<any>).length)) return false
+  if (type === 'range' && JSON.stringify(value) === JSON.stringify(range)) return false
+
+  return true
+}

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

@@ -1,2 +1,4 @@
 export type ExploreFilterType = 'array' | 'range' | 'string'
-export type ExploreFilter = Record<string, { type: ExploreFilterType, value: unknown }>
+export type ExploreFilterItem = { type: ExploreFilterType, value: unknown }
+export type ExploreFilter = Record<string, ExploreFilterItem>
+export type ExploreFilterItemArrayValue = { label: string, value: string }

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

@@ -57,7 +57,13 @@
 
   {#if useExploreRouter()}
     <div class="filter">
-      <Filter {filter} limit={clientWidth < 500} showSorting={!searchQuery} onchange={() => navigate('results')} />
+      <Filter
+        {filter}
+        {searchQuery}
+        limit={clientWidth < 500}
+        showSorting={!searchQuery}
+        onchange={() => navigate('results')}
+        onempty={() => navigate('home')} />
     </div>
   {/if}
 

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

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { isFilterItemActive } from '$lib/filter'
+  import { t } from '$lib/localization'
+  import type { ExploreFilter, ExploreFilterItemArrayValue } from '$lib/types/filter'
+  import IconClose from '../../Icons/IconClose.svelte'
+
+  interface Props {
+    filter: ExploreFilter
+    items: any
+  }
+
+  const { filter, items }: Props = $props()
+
+  function removeFilterItem(param: string): void {
+    delete filter[param]
+  }
+
+  function truncate(text: string): string {
+    let truncated = text.slice(0, 30).trim()
+    if (text.length > truncated.length) truncated += '...'
+
+    return truncated
+  }
+</script>
+
+<div class="active-filter">
+  {#each Object.entries(filter) as [param, item]}
+    {@const { label, range, data, fetchData } = items.find((i: any) => param === i.param) || {}}
+
+    {#if isFilterItemActive(item, range)}
+      <button class="item" onclick={() => removeFilterItem(param)}>
+        {#if item.type === 'array'}
+          {#await fetchData?.() || data then data}
+            {truncate(data?.filter((d: ExploreFilterItemArrayValue) => (item.value as string[])
+              .includes(d.value))
+              .map((d: ExploreFilterItemArrayValue) => d.label)
+              .join(' + '))}
+          {/await}
+        {:else if item.type === 'range'}
+          {label}: {(item.value as number[]).join(' - ')}
+        {:else}
+          {t(item.value as string)}
+        {/if}
+
+        <IconClose size={8} />
+      </button>
+    {/if}
+  {/each}
+</div>
+
+<style lang="scss">
+  .active-filter {
+    display: flex;
+    gap: margin(0.25);
+  }
+
+  .item {
+    appearance: none;
+    display: flex;
+    align-items: center;
+    gap: margin(0.5);
+    padding: margin(0.15) margin(0.5);
+    border: 1px solid theme(content);
+    border-radius: theme(border-radius-large);
+    background: theme(lighter);
+    color: theme(text-color-alt);
+    font-family: inherit;
+    font-size: theme(font-size-small);
+    cursor: pointer;
+
+    &:hover {
+      border-color: theme(content-light);
+      color: theme(text-color);
+    }
+  }
+</style>

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

@@ -10,15 +10,26 @@
   import IconArrow from '../../Icons/IconArrow.svelte'
   import IconFilter from '../../Icons/IconFilter.svelte'
   import {  fly, scale } from 'svelte/transition'
+  import ActiveFilterItems from './ActiveFilterItems.svelte'
+  import { isFilterItemActive } from '$lib/filter'
 
   interface Props {
     filter: ExploreFilter
-    onchange?: () => void
     limit?: boolean
     showSorting?: boolean
+    searchQuery?: string
+    onchange?: () => void
+    onempty?: () => void
   }
 
-  const { filter, onchange = () => null, limit = true, showSorting = true }: Props = $props()
+  const {
+    filter,
+    limit = true,
+    showSorting = true,
+    searchQuery = '',
+    onchange = () => null,
+    onempty = () => null,
+  }: Props = $props()
 
   const shownItemsLimit = 3
   const items = [{
@@ -49,6 +60,22 @@
   }]
 
   let limited = $state(limit)
+  let wasPreviouslyActive = false
+
+  $effect(() => {
+    const hasAnyActiveFilter = Object.keys(filter).some((param) => {
+      const { range } = items.find((i: any) => param === i.param) || {}
+
+      return isFilterItemActive(filter[param], range)
+    })
+
+    if (hasAnyActiveFilter || searchQuery) {
+      wasPreviouslyActive = true
+    } else if (wasPreviouslyActive) {
+      wasPreviouslyActive = false
+      onempty()
+    }
+  })
 </script>
 
 <div class="filter" role="navigation" class:limit>
@@ -77,6 +104,8 @@
   </div>
 </div>
 
+<ActiveFilterItems {filter} {items} />
+
 <style lang="scss">
   .filter {
     position: relative;

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ExploreFilter, ExploreFilterType } from '$lib/types/filter'
+  import type { ExploreFilter, ExploreFilterItemArrayValue, ExploreFilterType } from '$lib/types/filter'
   import Button from '../../Button.svelte'
   import IconArrow from '../../Icons/IconArrow.svelte'
   import TogglesWithSearch from './TogglesWithSearch.svelte'
@@ -8,16 +8,15 @@
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { track } from '$lib/tracking'
   import { t } from '$lib/localization'
-
-  type Item = { label: string, value: string }
+  import { isFilterItemActive } from '$lib/filter'
 
   interface Props {
     filter: ExploreFilter
     label: string
     param: string
     onchange?: () => void
-    data?: Item[] | null
-    fetchData?: (() => Promise<Item[]>) | null
+    data?: ExploreFilterItemArrayValue[] | null
+    fetchData?: (() => Promise<ExploreFilterItemArrayValue[]>) | null
     range?: [number, number] | null
     valueAppend?: string
   }
@@ -33,16 +32,7 @@
     valueAppend = '',
   }: Props = $props()
 
-  const active = $derived.by(() => {
-    if (!filter[param]) return false
-
-    const { type, value } = filter[param]
-
-    if (type === 'array' && !((value as Array<any>).length)) return false
-    if (type === 'range' && JSON.stringify(value) === JSON.stringify(range)) return false
-
-    return true
-  })
+  const active = $derived(isFilterItemActive(filter[param], range))
 
   let loading = $state(!!fetchData)
 

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

@@ -33,7 +33,12 @@
   }]
 
   async function getListTitles(params: Record<string, any> = {}): Promise<TitleData[]> {
-    return (await fetchTitles(params))?.results
+    try {
+      return (await fetchTitles(params))?.results
+    } catch (error: any) {
+      track(TrackingEvent.ExploreHomeRailError, null, { message: error.message, params })
+      throw new Error(error)
+    }
   }
 </script>
 

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

@@ -7,7 +7,6 @@
   import type { ExploreFilter } from '$lib/types/filter'
   import type { TitleData } from '$lib/types/title'
   import { hasConsentedTo } from '$lib/consent'
-  import { useExploreRouter } from '$lib/explore'
   import { t } from '$lib/localization'
   import { trackViaPixel } from '@playpilot/retargeting-tracking'
   import Button from '../../Button.svelte'
@@ -16,7 +15,6 @@
   import ListTitle from '../../ListTitle.svelte'
   import ListTitleSkeleton from '../../ListTitleSkeleton.svelte'
   import Empty from '../Empty.svelte'
-  import IconArrow from '../../Icons/IconArrow.svelte'
 
   interface Props {
     searchQuery?: string,
@@ -24,7 +22,7 @@
     navigate?: (key: string) => void
   }
 
-  const { searchQuery = '', filter = {}, navigate = () => null }: Props = $props()
+  const { searchQuery = '', filter = {} }: Props = $props()
 
   // svelte-ignore non_reactive_update
   let page = 1
@@ -74,11 +72,16 @@
       }
     })
 
-    const response = await fetchTitles(params) || { next: null, previous: null, results: [] }
+    try {
+      const response = await fetchTitles(params) || { next: null, previous: null, results: [] }
 
-    if (requestId === latestRequestId) titles = [...titles, ...response.results]
+      if (requestId === latestRequestId) titles = [...titles, ...response.results]
 
-    return response
+      return response
+    } catch (error: any) {
+      track(TrackingEvent.ExploreResultsError, null, { message: error.message, params })
+      throw new Error(error)
+    }
   }
 
   async function search(query: string): Promise<void> {
@@ -121,12 +124,6 @@
     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
@@ -136,13 +133,6 @@
   }
 </script>
 
-{#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}
     {#key title.sid}

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

@@ -255,6 +255,7 @@
   .media {
     grid-area: media;
     width: var(--width);
+    max-height: var(--image-height);
     border-radius: var(--border-radius);
     transition: width 200ms;
     transition-delay: 1ms;

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

@@ -0,0 +1,35 @@
+import { describe, it, expect } from 'vitest'
+import { isFilterItemActive } from '$lib/filter'
+
+describe('filter.ts', () => {
+  describe('isFilterItemActive', () => {
+    it('Should return false if type is array and value is empty', () => {
+      expect(isFilterItemActive({ type: 'array', value: [] })).toBe(false)
+    })
+
+    it('Should return true if type is array and value is not empty', () => {
+      expect(isFilterItemActive({ type: 'array', value: ['some-value'] })).toBe(true)
+    })
+
+    it('Should return false if type is range and value matches given range', () => {
+      expect(isFilterItemActive({ type: 'range', value: [0, 100] }, [0, 100])).toBe(false)
+    })
+
+    it('Should return true if type is range and value does not match given range', () => {
+      expect(isFilterItemActive({ type: 'range', value: [0, 100] }, [0, 50])).toBe(true)
+    })
+
+    it('Should return true if type is range and no range is provided', () => {
+      expect(isFilterItemActive({ type: 'range', value: [0, 100] })).toBe(true)
+    })
+
+    it('Should return true if type is range and range is null', () => {
+      expect(isFilterItemActive({ type: 'range', value: [0, 100] }, null)).toBe(true)
+    })
+
+    it('Should return true for other types regardless of value', () => {
+      expect(isFilterItemActive({ type: 'string', value: 'some-value' })).toBe(true)
+      expect(isFilterItemActive({ type: 'string', value: '' })).toBe(true)
+    })
+  })
+})

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

@@ -0,0 +1,120 @@
+import { fireEvent, render, waitFor } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+import ActiveFilter from '../../../../../routes/components/Explore/Filter/ActiveFilterItems.svelte'
+
+vi.mock('$lib/localization', () => ({
+  t: vi.fn((key) => key),
+}))
+
+describe('ActiveFilter.svelte', () => {
+  const arrayItem = {
+    param: 'genres',
+    label: 'Genres',
+    data: [
+      { label: 'Action', value: 'action' },
+      { label: 'Comedy', value: 'comedy' },
+    ],
+  }
+
+  const rangeItem = {
+    param: 'year',
+    label: 'Year',
+    range: [1900, 2025],
+  }
+
+  const stringItem = {
+    param: 'ordering',
+    label: 'Sort by',
+  }
+
+  it('Should not render any buttons if filter is empty', () => {
+    const { container } = render(ActiveFilter, { filter: {}, items: [] })
+
+    expect(container.querySelectorAll('button')).toHaveLength(0)
+  })
+
+  it('Should not render button if filter item is not active', () => {
+    const filter = { genres: { type: 'array', value: [] } }
+    // @ts-ignore
+    const { container } = render(ActiveFilter, { filter, items: [arrayItem] })
+
+    expect(container.querySelectorAll('button')).toHaveLength(0)
+  })
+
+  it('Should render button for active array filter item', async () => {
+    const filter = { genres: { type: 'array', value: ['action'] } }
+    // @ts-ignore
+    const { findByText } = render(ActiveFilter, { filter, items: [arrayItem] })
+
+    expect(await findByText('Action')).toBeTruthy()
+  })
+
+  it('Should render joined labels for multiple active array values', async () => {
+    const filter = { genres: { type: 'array', value: ['action', 'comedy'] } }
+    // @ts-ignore
+    const { findByText } = render(ActiveFilter, { filter, items: [arrayItem] })
+
+    expect(await findByText('Action + Comedy')).toBeTruthy()
+  })
+
+  it('Should render label and range values for active range filter item', () => {
+    const filter = { year: { type: 'range', value: [2000, 2020] } }
+    // @ts-ignore
+    const { getByText } = render(ActiveFilter, { filter, items: [rangeItem] })
+
+    expect(getByText('Year: 2000 - 2020')).toBeTruthy()
+  })
+
+  it('Should not render button if range value matches the default range', () => {
+    const filter = { year: { type: 'range', value: [1900, 2025] } }
+    // @ts-ignore
+    const { container } = render(ActiveFilter, { filter, items: [rangeItem] })
+
+    expect(container.querySelectorAll('button')).toHaveLength(0)
+  })
+
+  it('Should remove filter item on button click', async () => {
+    const filter = { genres: { type: 'array', value: ['action'] } }
+    // @ts-ignore
+    const { container } = render(ActiveFilter, { filter, items: [arrayItem] })
+
+    expect(container.querySelectorAll('button')).toHaveLength(1)
+
+    await fireEvent.click(/** @type {HTMLButtonElement} */ (container.querySelector('button')))
+
+    expect(container.querySelectorAll('button')).toHaveLength(0)
+  })
+
+  it('Should render buttons for multiple active filter items', async () => {
+    const filter = {
+      genres: { type: 'array', value: ['action'] },
+      year: { type: 'range', value: [2000, 2020] },
+    }
+    // @ts-ignore
+    const { findByText, getByText } = render(ActiveFilter, { filter, items: [arrayItem, rangeItem] })
+
+    expect(await findByText('Action')).toBeTruthy()
+    expect(getByText('Year: 2000 - 2020')).toBeTruthy()
+  })
+
+  it('Should render translated value for active string filter item', () => {
+    const filter = { ordering: { type: 'string', value: '-new' } }
+    // @ts-ignore
+    const { getByText } = render(ActiveFilter, { filter, items: [stringItem] })
+
+    expect(getByText('-new')).toBeTruthy()
+  })
+
+  it('Should resolve array data from fetchData if provided', async () => {
+    const fetchData = vi.fn().mockResolvedValue([{ label: 'Action', value: 'action' }])
+    const itemWithFetch = { param: 'genres', label: 'Genres', fetchData }
+    const filter = { genres: { type: 'array', value: ['action'] } }
+
+    // @ts-ignore
+    const { findByText } = render(ActiveFilter, { filter, items: [itemWithFetch] })
+
+    await waitFor(() => {
+      expect(findByText('Action')).toBeTruthy()
+    })
+  })
+})

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

@@ -67,4 +67,32 @@ describe('Filter.svelte', () => {
 
     expect(container.querySelector('.sorting')).toBeTruthy()
   })
+
+  it('Should call onempty after filter is removed', async () => {
+    const onempty = vi.fn()
+
+    const { getByText } = render(Filter, { filter: { genres: { type: 'array', value: ['101'] } }, onempty })
+
+    await fireEvent.click(getByText('Action'))
+
+    expect(onempty).toHaveBeenCalled()
+  })
+
+  it('Should not call onempty if filter is empty on mount', () => {
+    const onempty = vi.fn()
+
+    render(Filter, { filter: {}, onempty })
+
+    expect(onempty).not.toHaveBeenCalled()
+  })
+
+  it('Should not call onempty if filter is emptied but searchQuery is not', async () => {
+    const onempty = vi.fn()
+
+    const { getByText } = render(Filter, { filter: { genres: { type: 'array', value: ['101'] } }, onempty, searchQuery: 'thing' })
+
+    await fireEvent.click(getByText('Action'))
+
+    expect(onempty).not.toHaveBeenCalled()
+  })
 })