@playpilot/tpi 8.35.1 → 8.36.0-beta.1

package/package.json

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

package/src/lib/api/providers.ts

@@ -15,7 +15,9 @@ export async function fetchProviders(): Promise<PlaylinkData[]> {
     include_count: false,
   }
 
-  const response = await api<PlaylinkData[]>(`/providers/?api-token=${apiToken}&` + paramsToString(params))
+  let response = await api<PlaylinkData[]>(`/providers/?api-token=${apiToken}&` + paramsToString(params))
+
+  response = response.filter((a, i, providers) => providers.findIndex(b => (b.slug === a.slug)) === i)
 
   return response
 }

package/src/lib/data/translations.ts

@@ -151,6 +151,16 @@ export const translations = {
     [Language.Swedish]: 'Visa mindre',
     [Language.Danish]: 'Vis mindre',
   },
+  'Read More': {
+    [Language.English]: 'Read more',
+    [Language.Swedish]: 'Läs mer',
+    [Language.Danish]: 'Læs mere',
+  },
+  'Read Less': {
+    [Language.English]: 'Read less',
+    [Language.Swedish]: 'Läs mindre',
+    [Language.Danish]: 'Læs mindre',
+  },
   'Cast': {
     [Language.English]: 'Cast',
     [Language.Swedish]: 'Rollista',
@@ -358,6 +368,36 @@ export const translations = {
     [Language.Swedish]: 'Utforska alla filmer och tv-serier',
     [Language.Danish]: 'Udforsk alle film og tv-serier',
   },
+  'Job: all': {
+    [Language.English]: 'All',
+    [Language.Swedish]: 'Alla',
+    [Language.Danish]: 'Alle',
+  },
+  'Job: actor': {
+    [Language.English]: 'Actor',
+    [Language.Swedish]: 'Skådespelare',
+    [Language.Danish]: 'Skuespiller',
+  },
+  'Job: producer': {
+    [Language.English]: 'Producer',
+    [Language.Swedish]: 'Producent',
+    [Language.Danish]: 'Producer',
+  },
+  'Job: executive-producer': {
+    [Language.English]: 'Executive Producer',
+    [Language.Swedish]: 'Verkställande producent',
+    [Language.Danish]: 'Administrerende producer',
+  },
+  'Job: writer': {
+    [Language.English]: 'Writer',
+    [Language.Swedish]: 'Manusförfattare',
+    [Language.Danish]: 'Manuskriptforfatter',
+  },
+  'Job: director': {
+    [Language.English]: 'Director',
+    [Language.Swedish]: 'Regissör',
+    [Language.Danish]: 'Instruktør',
+  },
 
   // Genres
   'All': {

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,5 +1,5 @@
 <script lang="ts">
-  import type { ExploreFilter } from '$lib/types/filter'
+  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'
@@ -16,7 +16,9 @@
   interface Props {
     filter: ExploreFilter
     limit?: boolean
+    hideActive?: boolean
     showSorting?: boolean
+    sortings?: null | ExploreTitleSorting[]
     searchQuery?: string
     onchange?: () => void
     onempty?: () => void
@@ -25,7 +27,9 @@
   const {
     filter,
     limit = true,
+    hideActive = false,
     showSorting = true,
+    sortings = null,
     searchQuery = '',
     onchange = () => null,
     onempty = () => null,
@@ -65,7 +69,7 @@
     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 limited = $derived(limit)
   let wasPreviouslyActive = false
 
   $effect(() => {
@@ -97,20 +101,22 @@
     {#if limit}
       <Button variant="link" onclick={() => limited = !limited}>
         <IconFilter />
-        {t('All Filters')}
+        {limited ? t('Show More') : t('Show Less')}
         <IconArrow direction={limited ? 'down' : 'up'} />
       </Button>
     {/if}
 
     {#if showSorting}
       <div class="sorting" transition:fly={{ x: 5, duration: 100 }}>
-        <FilterSorting {filter} {onchange} />
+        <FilterSorting {filter} {onchange} {sortings} />
       </div>
     {/if}
   </div>
 </div>
 
-<ActiveFilterItems {filter} {items} />
+{#if !hideActive}
+  <ActiveFilterItems {filter} {items} />
+{/if}
 
 <style lang="scss">
   .filter {

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

@@ -21,9 +21,11 @@
     searchQuery?: string,
     filter?: ExploreFilter
     forceGrid?: boolean
+    hidePlaylinks?: boolean
+    onTitleClick?: null | ((event: MouseEvent, titles: TitleData[], index: number) => void)
   }
 
-  const { searchQuery = '', filter = {}, forceGrid = false }: Props = $props()
+  const { searchQuery = '', filter = {}, forceGrid = false, hidePlaylinks = false, onTitleClick = null }: Props = $props()
 
   // svelte-ignore non_reactive_update
   let page = 1
@@ -53,9 +55,7 @@
     if (filter) setFilter()
   })
 
-  onDestroy(() => {
-    emptyFilter()
-  })
+  onDestroy(emptyFilter)
 
   async function getTitlesForFilter(): Promise<APIPaginatedResult<TitleData>> {
     latestRequestId += 1
@@ -132,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)
   }
@@ -147,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}
 
@@ -165,7 +170,7 @@
 {#await promise then { next }}
   {#if next}
     <div class="show-more" class:grid>
-      <Button size="large" onclick={fetchMoreTitles}>{t('Show More')}</Button>
+      <Button size="large" onclick={fetchMoreTitles} label="Show more movies & shows">{t('Show More')}</Button>
     </div>
   {/if}
 

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/Icons/IconAttribution.svelte

@@ -1,3 +1,3 @@
-<svg height="24px" viewBox="0 -960 960 960" width="24px">
+<svg width="21px" height="21px" viewBox="0 -960 960 960">
   <path fill="currentColor" d="M430-200h100v-180h60v-184q0-27-28.5-41.5T480-620q-53 0-81.5 14.5T370-564v184h60v180Zm-105 88.5q-73-31.5-127.5-86t-86-127.5Q80-398 80-480.5t31.5-155q31.5-72.5 86-127t127.5-86Q398-880 480.5-880t155 31.5q72.5 31.5 127 86t86 127Q880-563 880-480.5T848.5-325q-31.5 73-86 127.5t-127 86Q563-80 480.5-80T325-111.5Zm381.5-142Q800-347 800-480t-93.5-226.5Q613-800 480-800t-226.5 93.5Q160-613 160-480t93.5 226.5Q347-160 480-160t226.5-93.5ZM523-657q17-17 17-43t-17-43q-17-17-43-17t-43 17q-17 17-17 43t17 43q17 17 43 17t43-17Zm-43 177Z"/>
 </svg>

package/src/routes/components/Icons/IconFilter.svelte

@@ -1,5 +1,3 @@
-<svg width="11" height="13" viewBox="0 0 11 13">
-  <path d="M9.77037 6.86774C9.68778 7.21645 9.48992 7.52709 9.20883 7.74937C8.92774 7.97166 8.57987 8.09259 8.22151 8.09259C7.86315 8.09259 7.51528 7.97166 7.23419 7.74937C6.9531 7.52709 6.75525 7.21645 6.67265 6.86774L0.385491 6.86774C0.335766 6.87014 0.286069 6.86243 0.239415 6.84505C0.192761 6.82768 0.150121 6.80101 0.114079 6.76667C0.0780373 6.73233 0.0493441 6.69103 0.0297394 6.64527C0.0101337 6.5995 2.67029e-05 6.55024 2.67029e-05 6.50045C2.67029e-05 6.45067 0.0101337 6.40141 0.0297394 6.35565C0.0493441 6.30989 0.0780373 6.26858 0.114079 6.23424C0.150121 6.1999 0.192761 6.17323 0.239415 6.15586C0.286069 6.13849 0.335766 6.13077 0.385491 6.13317L6.67265 6.13317C6.75525 5.78446 6.9531 5.47382 7.23419 5.25154C7.51528 5.02925 7.86315 4.90833 8.22151 4.90833C8.57987 4.90833 8.92774 5.02925 9.20883 5.25154C9.48992 5.47382 9.68778 5.78446 9.77037 6.13317H10.1801C10.2298 6.13077 10.2795 6.13849 10.3262 6.15586C10.3728 6.17323 10.4155 6.1999 10.4515 6.23424C10.4875 6.26858 10.5162 6.30989 10.5358 6.35565C10.5554 6.40141 10.5656 6.45067 10.5656 6.50045C10.5656 6.55024 10.5554 6.5995 10.5358 6.64527C10.5162 6.69103 10.4875 6.73233 10.4515 6.76667C10.4155 6.80101 10.3728 6.82768 10.3262 6.84505C10.2795 6.86243 10.2298 6.87014 10.1801 6.86774H9.77037ZM8.22151 5.64374C8.05198 5.64374 7.88626 5.69401 7.74531 5.7882C7.60435 5.88238 7.49449 6.01625 7.42961 6.17287C7.36474 6.32949 7.34776 6.50183 7.38084 6.6681C7.41391 6.83437 7.49554 6.9871 7.61542 7.10698C7.73529 7.22685 7.88802 7.30849 8.05429 7.34156C8.22056 7.37463 8.3929 7.35766 8.54953 7.29278C8.70615 7.22791 8.84002 7.11805 8.9342 6.97709C9.02839 6.83613 9.07866 6.67041 9.07866 6.50089C9.07877 6.38825 9.05668 6.2767 9.01366 6.17261C8.97063 6.06851 8.90751 5.97392 8.82791 5.89424C8.7483 5.81455 8.65377 5.75134 8.54973 5.70821C8.44568 5.66508 8.33415 5.64288 8.22151 5.64288V5.64374Z" fill="currentColor"/>
-  <path d="M3.8929 2.45945C3.8103 2.80816 3.61245 3.11879 3.33136 3.34108C3.05027 3.56336 2.7024 3.68429 2.34404 3.68429C1.98568 3.68429 1.63781 3.56336 1.35672 3.34108C1.07563 3.11879 0.87778 2.80816 0.795181 2.45945H0.385466C0.291124 2.45489 0.202153 2.4142 0.136997 2.34582C0.0718422 2.27744 0.0354977 2.18661 0.0354977 2.09216C0.0354977 1.99771 0.0718422 1.90688 0.136997 1.8385C0.202153 1.77012 0.291124 1.72943 0.385466 1.72488H0.795181C0.87778 1.37617 1.07563 1.06553 1.35672 0.843245C1.63781 0.620959 1.98568 0.500031 2.34404 0.500031C2.7024 0.500031 3.05027 0.620959 3.33136 0.843245C3.61245 1.06553 3.8103 1.37617 3.8929 1.72488L10.1801 1.72488C10.2744 1.72943 10.3634 1.77012 10.4285 1.8385C10.4937 1.90688 10.53 1.99771 10.53 2.09216C10.53 2.18661 10.4937 2.27744 10.4285 2.34582C10.3634 2.4142 10.2744 2.45489 10.1801 2.45945L3.8929 2.45945ZM2.34404 1.23544C2.17451 1.23544 2.00879 1.28572 1.86784 1.3799C1.72688 1.47408 1.61702 1.60795 1.55214 1.76458C1.48727 1.9212 1.47029 2.09354 1.50337 2.25981C1.53644 2.42608 1.61807 2.57881 1.73795 2.69868C1.85782 2.81856 2.01055 2.90019 2.17682 2.93327C2.34309 2.96634 2.51543 2.94936 2.67206 2.88449C2.82868 2.81961 2.96255 2.70975 3.05673 2.56879C3.15092 2.42784 3.20119 2.26212 3.20119 2.09259C3.2013 1.97996 3.17921 1.8684 3.13619 1.76431C3.09316 1.66022 3.03004 1.56563 2.95044 1.48594C2.87083 1.40626 2.77631 1.34304 2.67226 1.29992C2.56821 1.25679 2.45668 1.23459 2.34404 1.23459V1.23544Z" fill="currentColor"/>
-  <path d="M6.0975 11.2752C6.01491 11.6239 5.81705 11.9345 5.53596 12.1568C5.25488 12.3791 4.907 12.5 4.54864 12.5C4.19028 12.5 3.84241 12.3791 3.56132 12.1568C3.28024 11.9345 3.08238 11.6239 2.99978 11.2752H0.385491C0.335766 11.2776 0.286069 11.2699 0.239415 11.2525C0.192761 11.2351 0.150121 11.2085 0.114079 11.1741C0.0780373 11.1398 0.0493441 11.0985 0.0297394 11.0527C0.0101337 11.0069 2.67029e-05 10.9577 2.67029e-05 10.9079C2.67029e-05 10.8581 0.0101337 10.8088 0.0297394 10.7631C0.0493441 10.7173 0.0780373 10.676 0.114079 10.6417C0.150121 10.6073 0.192761 10.5807 0.239415 10.5633C0.286069 10.5459 0.335766 10.5382 0.385491 10.5406H2.99978C3.08238 10.1919 3.28024 9.88126 3.56132 9.65898C3.84241 9.43669 4.19028 9.31577 4.54864 9.31577C4.907 9.31577 5.25488 9.43669 5.53596 9.65898C5.81705 9.88126 6.01491 10.1919 6.0975 10.5406H10.1801C10.2298 10.5382 10.2795 10.5459 10.3262 10.5633C10.3728 10.5807 10.4155 10.6073 10.4515 10.6417C10.4875 10.676 10.5162 10.7173 10.5358 10.7631C10.5554 10.8088 10.5656 10.8581 10.5656 10.9079C10.5656 10.9577 10.5554 11.0069 10.5358 11.0527C10.5162 11.0985 10.4875 11.1398 10.4515 11.1741C10.4155 11.2085 10.3728 11.2351 10.3262 11.2525C10.2795 11.2699 10.2298 11.2776 10.1801 11.2752H6.0975ZM4.54779 10.0503C4.37826 10.0503 4.21254 10.1006 4.07158 10.1948C3.93063 10.289 3.82077 10.4228 3.75589 10.5795C3.69101 10.7361 3.67404 10.9084 3.70711 11.0747C3.74018 11.241 3.82182 11.3937 3.94169 11.5136C4.06157 11.6334 4.2143 11.7151 4.38057 11.7481C4.54684 11.7812 4.71918 11.7642 4.8758 11.6994C5.03242 11.6345 5.16629 11.5246 5.26048 11.3837C5.35466 11.2427 5.40493 11.077 5.40493 10.9075C5.40493 10.6801 5.31463 10.4621 5.15388 10.3014C4.99313 10.1406 4.77512 10.0503 4.54779 10.0503Z" fill="currentColor"/>
+<svg height="24px" viewBox="0 -960 960 960" width="24px">
+  <path fill="currentColor" transform="scale(1.2) translate(0, 75)" scale="1.2" d="M440-120v-240h80v80h320v80H520v80h-80Zm-320-80v-80h240v80H120Zm160-160v-80H120v-80h160v-80h80v240h-80Zm160-80v-80h400v80H440Zm160-160v-240h80v80h160v80H680v80h-80Zm-480-80v-80h400v80H120Z" />
 </svg>

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

@@ -227,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>