@playpilot/tpi 8.34.5 → 8.35.0-beta.2

package/src/lib/fakeData.ts

@@ -54,6 +54,7 @@ export const participants: ParticipantData[] = [
     image_uuid: null,
     gender: 'Male',
     character: 'Will Rodman (archive footage) (uncredited)',
+    description: 'Some description',
   },
   {
     sid: 'pr8bZm',
@@ -65,6 +66,7 @@ export const participants: ParticipantData[] = [
     image_uuid: null,
     gender: 'Male',
     character: 'Old Man',
+    description: 'Some description',
   },
   {
     sid: 'pr45Dp',
@@ -76,6 +78,7 @@ export const participants: ParticipantData[] = [
     image_uuid: null,
     gender: 'Male',
     character: 'Self (archive footage) (uncredited)',
+    description: 'Some description',
   },
   {
     sid: 'pr6DnN',
@@ -87,6 +90,7 @@ export const participants: ParticipantData[] = [
     image_uuid: null,
     gender: 'Male',
     character: 'Dreyfus',
+    description: 'Some description',
   },
   {
     sid: 'pr7GK8',
@@ -98,6 +102,7 @@ export const participants: ParticipantData[] = [
     image_uuid: null,
     gender: 'Male',
     character: 'Cannon-Gunner',
+    description: 'Some description',
   },
   {
     sid: 'pr88KG',
@@ -109,6 +114,7 @@ export const participants: ParticipantData[] = [
     image_uuid: null,
     gender: 'Female',
     character: 'Cornelia',
+    description: 'Some description',
   },
 ]
 

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

@@ -1,4 +1,7 @@
+import type { Sorting } from '$lib/enums/Sorting'
+
 export type ExploreFilterType = 'array' | 'range' | 'string'
-export type ExploreFilterItem = { type: ExploreFilterType, value: unknown }
+export type ExploreFilterItem = { type: ExploreFilterType; value: unknown }
 export type ExploreFilter = Record<string, ExploreFilterItem>
-export type ExploreFilterItemArrayValue = { label: string, value: string }
+export type ExploreFilterItemArrayValue = { label: string; value: string }
+export type ExploreTitleSorting = { label: string; value: (typeof Sorting)[keyof typeof Sorting] }

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

@@ -1,6 +1,7 @@
 export type ParticipantData = {
   sid: string
   name: string
+  description: string
   birth_date: string
   death_date: string | null
   jobs: Job[]
@@ -16,7 +17,6 @@ export type ParticipantData = {
   }
   gender: string
   character?: string | null
-  bio?: string | null
 }
 
 export type Job = 'actor' | 'writer' | 'director'

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

@@ -1,148 +1,154 @@
-<script lang="ts">
-  import type { ExploreFilter } from '$lib/types/filter'
-  import genres from '$lib/data/genres.json'
-  import { fetchProviders } from '$lib/api/providers'
-  import { t } from '$lib/localization'
-  import FilterItem from './FilterItem.svelte'
-  import FilterSorting from './FilterSorting.svelte'
-  import Button from '../../Button.svelte'
-  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'
-  import { cdnBaseUrl } from '$lib/constants'
-
-  interface Props {
-    filter: ExploreFilter
-    limit?: boolean
-    showSorting?: boolean
-    searchQuery?: string
-    onchange?: () => void
-    onempty?: () => void
-  }
-
-  const {
-    filter,
-    limit = true,
-    showSorting = true,
-    searchQuery = '',
-    onchange = () => null,
-    onempty = () => null,
-  }: Props = $props()
-
-  const shownItemsLimit = 3
-  const items = [{
-    label: t('Services'),
-    param: 'providers',
-    fetchData: async () => (await fetchProviders()).map(playlink => ({ label: playlink.name, value: playlink.slug })),
-  }, {
-    label: t('Genres'),
-    param: 'genres',
-    data: genres.filter(genre => parseInt(genre.slug) < 900).map(genre => ({ label: t(genre.name), value: genre.slug })),
-  }, {
-    label: t('IMDb'),
-    param: 'imdb_score',
-    range: [0, 10] as [number, number],
-  }, {
-    label: t('Year'),
-    param: 'year',
-    range: [1900, new Date().getFullYear()] as [number, number],
-  }, {
-    label: t('Runtime'),
-    param: 'length',
-    range: [0, 180] as [number, number],
-    valueAppend: t('Minutes'),
-  }, {
-    label: t('Countries'),
-    param: 'country_codes',
-    fetchData: async () => import.meta.env.DEV ?
-      (await import('$lib/data/countries.json')).default :
-      (await fetch(`${cdnBaseUrl}/src/lib/data/countries.json`)).json(),
-  }, {
-    label: t('Category'),
-    param: 'category',
-    data: [{ label: t('Movies'), value: 'movie' }, { label: t('Shows'), value: 'series' }, { label: t('Kids'), value: 'kids' }, { label: t('Documentary'), value: 'documentary' }],
-  }]
-
-  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>
-  <div class="items">
-    {#each limited ? items.slice(0, shownItemsLimit) : items as item}
-      <div transition:scale={{ start: 0.75, duration: 100 }}>
-        <FilterItem {filter} {onchange} {...item} />
-      </div>
-    {/each}
-  </div>
-
-  <div class="actions">
-    {#if limit}
-      <Button variant="link" onclick={() => limited = !limited}>
-        <IconFilter />
-        {t('All Filters')}
-        <IconArrow direction={limited ? 'down' : 'up'} />
-      </Button>
-    {/if}
-
-    {#if showSorting}
-      <div class="sorting" transition:fly={{ x: 5, duration: 100 }}>
-        <FilterSorting {filter} {onchange} />
-      </div>
-    {/if}
-  </div>
-</div>
-
-<ActiveFilterItems {filter} {items} />
-
-<style lang="scss">
-  .filter {
-    position: relative;
-  }
-
-  .items {
-    display: flex;
-    flex-wrap: wrap;
-    gap: margin(0.5);
-    padding-right: margin(7);
-
-    .limit & {
-      padding-right: 0;
-    }
-  }
-
-  .actions {
-    position: absolute;
-    top: margin(0.25);
-    right: 0;
-
-    .limit & {
-      position: initial;
-      top: auto;
-      display: flex;
-      justify-content: space-between;
-      margin-top: margin(0.5);
-    }
-  }
-
-  .sorting {
-    margin-top: margin(0.1);
-  }
-</style>
+<script lang="ts">
+  import type { ExploreFilter, ExploreTitleSorting } from '$lib/types/filter'
+  import genres from '$lib/data/genres.json'
+  import { fetchProviders } from '$lib/api/providers'
+  import { t } from '$lib/localization'
+  import FilterItem from './FilterItem.svelte'
+  import FilterSorting from './FilterSorting.svelte'
+  import Button from '../../Button.svelte'
+  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'
+  import { cdnBaseUrl } from '$lib/constants'
+
+  interface Props {
+    filter: ExploreFilter
+    limit?: boolean
+    hideActive?: boolean
+    showSorting?: boolean
+    sortings?: null | ExploreTitleSorting[]
+    searchQuery?: string
+    onchange?: () => void
+    onempty?: () => void
+  }
+
+  const {
+    filter,
+    limit = true,
+    hideActive = false,
+    showSorting = true,
+    sortings = null,
+    searchQuery = '',
+    onchange = () => null,
+    onempty = () => null,
+  }: Props = $props()
+
+  const shownItemsLimit = 3
+  const items = [{
+    label: t('Services'),
+    param: 'providers',
+    fetchData: async () => (await fetchProviders()).map(playlink => ({ label: playlink.name, value: playlink.slug })),
+  }, {
+    label: t('Genres'),
+    param: 'genres',
+    data: genres.filter(genre => parseInt(genre.slug) < 900).map(genre => ({ label: t(genre.name), value: genre.slug })),
+  }, {
+    label: t('IMDb'),
+    param: 'imdb_score',
+    range: [0, 10] as [number, number],
+  }, {
+    label: t('Year'),
+    param: 'year',
+    range: [1900, new Date().getFullYear()] as [number, number],
+  }, {
+    label: t('Runtime'),
+    param: 'length',
+    range: [0, 180] as [number, number],
+    valueAppend: t('Minutes'),
+  }, {
+    label: t('Countries'),
+    param: 'country_codes',
+    fetchData: async () => import.meta.env.DEV ?
+      (await import('$lib/data/countries.json')).default :
+      (await fetch(`${cdnBaseUrl}/src/lib/data/countries.json`)).json(),
+  }, {
+    label: t('Category'),
+    param: 'category',
+    data: [{ label: t('Movies'), value: 'movie' }, { label: t('Shows'), value: 'series' }, { label: t('Kids'), value: 'kids' }, { label: t('Documentary'), value: 'documentary' }],
+  }]
+
+  let limited = $derived(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>
+  <div class="items">
+    {#each limited ? items.slice(0, shownItemsLimit) : items as item}
+      <div transition:scale={{ start: 0.75, duration: 100 }}>
+        <FilterItem {filter} {onchange} {...item} />
+      </div>
+    {/each}
+  </div>
+
+  <div class="actions">
+    {#if limit}
+      <Button variant="link" onclick={() => limited = !limited}>
+        <IconFilter />
+        {t('All Filters')}
+        <IconArrow direction={limited ? 'down' : 'up'} />
+      </Button>
+    {/if}
+
+    {#if showSorting}
+      <div class="sorting" transition:fly={{ x: 5, duration: 100 }}>
+        <FilterSorting {filter} {onchange} {sortings} />
+      </div>
+    {/if}
+  </div>
+</div>
+
+{#if !hideActive}
+  <ActiveFilterItems {filter} {items} />
+{/if}
+
+<style lang="scss">
+  .filter {
+    position: relative;
+  }
+
+  .items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: margin(0.5);
+    padding-right: margin(7);
+
+    .limit & {
+      padding-right: 0;
+    }
+  }
+
+  .actions {
+    position: absolute;
+    top: margin(0.25);
+    right: 0;
+
+    .limit & {
+      position: initial;
+      top: auto;
+      display: flex;
+      justify-content: space-between;
+      margin-top: margin(0.5);
+    }
+  }
+
+  .sorting {
+    margin-top: margin(0.1);
+  }
+</style>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import Button from '../../Button.svelte'
   import IconArrow from '../../Icons/IconArrow.svelte'
-  import type { ExploreFilter } from '$lib/types/filter'
+  import type { ExploreFilter, ExploreTitleSorting } from '$lib/types/filter'
   import { t } from '$lib/localization'
   import Dropdown from './Dropdown.svelte'
   import { Sorting } from '$lib/enums/Sorting'
@@ -9,17 +9,18 @@
   interface Props {
     filter: ExploreFilter
     onchange?: () => void
+    sortings?: null | ExploreTitleSorting[]
   }
 
-  const { filter, onchange = () => null }: Props = $props()
+  const { filter, onchange = () => null, sortings = null }: Props = $props()
 
   const param = 'ordering'
 
-  const options = [
+  const options = $derived(sortings || [
     { label: 'Popularity', value: Sorting.Popular },
     { label: 'New', value: Sorting.New },
     { label: 'Top Rated', value: Sorting.Best },
-  ]
+  ])
 
   const label = $derived(options.find(({ value }) => value === filter[param]?.value)?.label || 'Sort By')
 

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

@@ -20,9 +20,12 @@
   interface Props {
     searchQuery?: string,
     filter?: ExploreFilter
+    forceGrid?: boolean
+    hidePlaylinks?: boolean
+    onTitleClick?: null | ((event: MouseEvent, titles: TitleData[], index: number) => void)
   }
 
-  const { searchQuery = '', filter = {} }: Props = $props()
+  const { searchQuery = '', filter = {}, forceGrid = false, hidePlaylinks = false, onTitleClick = null }: Props = $props()
 
   // svelte-ignore non_reactive_update
   let page = 1
@@ -33,12 +36,13 @@
   let promise = $state(getTitlesForFilter())
   let width = $state(0)
 
-  const grid = $derived(width > 500)
+  const grid = $derived(forceGrid || width > 500)
   const gridColumns = $derived.by(() => {
     if (width > 1400) return 8
     if (width > 900) return 6
-    else if (width > 600) return 4
-    return 3
+    if (width > 600) return 4
+    if (width > 400) return 3
+    return 2
   })
   const TitleComponent = $derived(grid ? GridTitle : ListTitle)
   const SkeletonComponent = $derived(grid ? GridTitleSkeleton : ListTitleSkeleton)
@@ -51,9 +55,7 @@
     if (filter) setFilter()
   })
 
-  onDestroy(() => {
-    emptyFilter()
-  })
+  onDestroy(emptyFilter)
 
   async function getTitlesForFilter(): Promise<APIPaginatedResult<TitleData>> {
     latestRequestId += 1
@@ -130,7 +132,12 @@
     track(TrackingEvent.ExploreShowMore, null, { page })
   }
 
-  function openTitle(event: MouseEvent, title: TitleData): void {
+  function openTitle(event: MouseEvent, title: TitleData, index: number): void {
+    if (onTitleClick) {
+      onTitleClick(event, titles, index)
+      return
+    }
+
     openModal({ event, data: title })
     track(TrackingEvent.ExploreTitleClick, title)
   }
@@ -145,9 +152,9 @@
 </script>
 
 <div class="titles" class:grid role="main" style:--grid-columns={gridColumns} bind:clientWidth={width} data-testid="explore-results">
-  {#each titles as title}
+  {#each titles as title, index}
     {#key title.sid}
-      <TitleComponent {title} onclick={(event: MouseEvent) => openTitle(event, title)} />
+      <TitleComponent {title} {hidePlaylinks} onclick={(event: MouseEvent) => openTitle(event, title, index)} />
     {/key}
   {/each}
 

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

@@ -28,7 +28,7 @@
 
 {#snippet back(offset = false)}
   <div class="back" class:offset>
-    <Button variant="link" onclick={() => { navigate('home') }}>
+    <Button variant="link" onclick={() => navigate('home')}>
       <IconArrow direction="left" />
       {t('Home')}
     </Button>

package/src/routes/components/GridTitle.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { TitleData } from '$lib/types/title'
+  import { getContext } from 'svelte'
   import IconIMDb from './Icons/IconIMDb.svelte'
   import PlaylinksCompact from './Playlinks/PlaylinksCompact.svelte'
   import TitlePoster from './TitlePoster.svelte'
@@ -7,9 +8,10 @@
   interface Props {
     title: TitleData
     onclick?: (event: MouseEvent) => void
+    hidePlaylinks?: boolean
   }
 
-  const { title, onclick = () => null }: Props = $props()
+  const { title, onclick = () => null, hidePlaylinks = false }: Props = $props()
 </script>
 
 <button class="title" {onclick} data-testid="title">
@@ -33,9 +35,11 @@
   </div>
 
   <div class="content">
-    <div class="heading">{title.title}</div>
+    <div class="heading" class:margin={!hidePlaylinks}>{title.title}</div>
 
-    <PlaylinksCompact playlinks={title.providers} size={20} />
+    {#if !hidePlaylinks}
+      <PlaylinksCompact playlinks={title.providers} size={20} />
+    {/if}
   </div>
 </button>
 
@@ -81,7 +85,6 @@
   }
 
   .heading {
-    margin-bottom: margin(0.5);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -96,6 +99,10 @@
       color: theme(grid-item-title-hover-text-color, text-color);
       text-decoration: theme(grid-item-title-hover-text-decoration, none);
     }
+
+    &.margin {
+      margin-bottom: margin(0.5);
+    }
   }
 
   .meta {

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

@@ -215,6 +215,10 @@
     &.background-blur {
       backdrop-filter: blur(1.5rem);
     }
+
+    :global(*) {
+      box-sizing: border-box;
+    }
   }
 
   .dialog,
@@ -223,7 +227,7 @@
     max-width: 600px;
 
     .wide & {
-      max-width: 900px;
+      max-width: 1200px;
     }
   }
 

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

@@ -14,8 +14,6 @@
 
   const { participant, initialScrollPosition = 0, ...restProps }: Props = $props()
 
-  let windowWidth = $state(0)
-
   track(TrackingEvent.ParticipantModalView, null, { participant: participant.name })
 
   onMount(() => {
@@ -25,8 +23,6 @@
   })
 </script>
 
-<svelte:window bind:innerWidth={windowWidth} />
-
-<Modal {initialScrollPosition} {...restProps} closeButtonStyle="flat" tall>
+<Modal {initialScrollPosition} {...restProps} closeButtonStyle="flat" tall wide blur>
   <Participant {participant} />
 </Modal>