@playpilot/tpi 8.35.0-beta.1 → 8.35.0-beta.2

package/package.json

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

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(() => {
@@ -104,13 +108,15 @@
 
     {#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}
 

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

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

package/src/routes/components/Participants/Participant.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
-  import { onMount } from 'svelte'
   import { heading } from '$lib/actions/heading'
-  import { fetchTitlesForParticipant } from '$lib/api/participants'
-  import { openModal } from '$lib/modal'
-  import type { ParticipantData } from '$lib/types/participant'
+  import type { Job, ParticipantData } from '$lib/types/participant'
+  import type { ExploreFilter, ExploreTitleSorting } from '$lib/types/filter'
   import type { TitleData } from '$lib/types/title'
   import { Sorting } from '$lib/enums/Sorting'
   import { t } from '$lib/localization'
@@ -11,66 +9,40 @@
   import { trackViaPixel } from '@playpilot/retargeting-tracking'
   import { MetaEvent } from '$lib/enums/TrackingEvent'
   import ParticipantImage from './ParticipantImage.svelte'
-  import ListTitle from '../ListTitle.svelte'
-  import Dropdown from '../Explore/Filter/Dropdown.svelte'
+  import ExploreResults from '../Explore/Routes/ExploreResults.svelte'
+  import Filter from '../Explore/Filter/Filter.svelte'
   import Button from '../Button.svelte'
+  import { openModal } from '$lib/modal'
 
   interface Props {
     participant: ParticipantData
     small?: boolean
   }
 
-  type TitleSorting = { label: string; value: (typeof Sorting)[keyof typeof Sorting] }
-
   const { participant, small = false }: Props = $props()
 
-  const { name, birth_date, death_date } = $derived(participant)
+  const { name, description } = $derived(participant)
 
-  const sortings: TitleSorting[] = [
+  const filter: ExploreFilter = $state({})
+  const sortings: ExploreTitleSorting[] = [
     { label: 'Popularity', value: Sorting.Popular },
     { label: 'Top Rated', value: Sorting.Best },
     { label: 'Year', value: Sorting.Chronological },
   ]
 
-  const pageSize = 30
-
-  let titles: TitleData[] = $state([])
-  let page = $state(1)
-  let hasMorePages = $state(true)
-  let loading = $state(true)
-  let currentSorting = $state(sortings[0])
+  let currentJob: 'all' | Job = $state('all')
+  let descriptionExpanded: boolean = $state(false)
 
-  onMount(loadMore)
+  const filterWithParticipant: ExploreFilter = $derived({
+    ...filter,
+    participant_sid: { type: 'string', value: participant.sid },
+    participant_job: { type: 'string', value: currentJob === 'all' ? null : currentJob }
+  })
 
   if (isRetargetingAllowed()) trackViaPixel(MetaEvent.ParticipantView, { participant: participant.name })
 
-  function formatDate(dateString: string): string {
-    const date = new Date(dateString)
-    return date.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })
-  }
-
-  async function loadMore(): Promise<void> {
-    loading = true
-
-    try {
-      const results = await fetchTitlesForParticipant(participant, { page, sorting: currentSorting.value })
-
-      titles = [...titles, ...results]
-      hasMorePages = results?.length >= pageSize
-    } catch {
-      hasMorePages = false
-    } finally {
-      loading = false
-      page += 1
-    }
-  }
-
-  function setSorting(sorting: TitleSorting): void {
-    currentSorting = sorting
-    titles = []
-    page = 1
-
-    loadMore()
+  function onTitleClick(event: MouseEvent, titles: TitleData[], index: number): void {
+    openModal({ event, type: 'titles-rail', data: titles, props: { initialIndex: index } })
   }
 </script>
 
@@ -80,60 +52,46 @@
   <div>
     <div class="heading" use:heading={2} id="heading">{name}</div>
 
-    {#if birth_date}
-      <p class="dates">
-        {t('Born On')} <strong>{formatDate(birth_date)}</strong>{#if death_date}, {t('Died On')} <strong>{formatDate(death_date)}</strong>{/if}
+    {#if description}
+      <p class="description" class:expanded={descriptionExpanded}>
+        {description}
       </p>
+
+      <div class="read-more">
+        <Button variant="link" onclick={() => descriptionExpanded = !descriptionExpanded}>
+          {descriptionExpanded ? t('Read Less') : t('Read More')}
+        </Button>
+      </div>
     {/if}
   </div>
 </div>
 
-<div class="content">
-  {#if !small && (titles.length && !loading)}
+<div class="content" class:small>
+  {#if !small}
     <div class="list-header">
       <div class="heading subheading" use:heading={3} id="credits">{t('Credits')}</div>
+    </div>
 
-      <div class="sort">
-        {t('Sort By')}:
-
-        <Dropdown>
-          {#snippet button({ toggle })}
-            <Button variant="border" onclick={toggle}>{t(currentSorting.label)}</Button>
-          {/snippet}
-
-          {#snippet content()}
-            <div class="sortings">
-              {#each sortings as sorting}
-                <Button variant="link" onclick={() => setSorting(sorting)}>{t(sorting.label)}</Button>
-              {/each}
-            </div>
-          {/snippet}
-        </Dropdown>
-      </div>
+    <div class="jobs">
+      {#each ['all', ...participant.jobs] as job}
+        <Button variant="border" size="large" active={currentJob === job} onclick={() => currentJob = job as 'all' | Job}>
+          {t('Job: ' + job)}
+        </Button>
+      {/each}
     </div>
-  {/if}
 
-  <div class="list">
-    {#each titles as title}
-      <ListTitle {title} compact={small} onclick={(event) => openModal({ event, data: title })} />
-    {/each}
+    <Filter {filter} {sortings} hideActive />
+  {/if}
 
-    {#if loading}
-      {#each { length: 6 }}
-        <div class="skeleton" data-testid="skeleton"></div>
-      {/each}
-    {:else if hasMorePages}
-      <button class="more" onclick={loadMore}>{t('Show More')}</button>
-    {/if}
-  </div>
+  <ExploreResults forceGrid hidePlaylinks filter={filterWithParticipant} {onTitleClick} />
 </div>
 
 <style lang="scss">
   .header {
-    --participant-image-size: #{margin(6)};
+    --participant-image-size: #{margin(5)};
     display: grid;
-    grid-template-columns: calc(var(--participant-image-size)) auto;
-    align-items: center;
+    grid-template-columns: var(--participant-image-size) calc(100% - var(--participant-image-size) - margin(1));
+    align-items: start;
     gap: margin(1);
     padding: margin(3) margin(1) margin(2);
     font-family: theme(detail-font-family, font-family);
@@ -144,11 +102,13 @@
 
     @include desktop {
       --participant-image-size: #{margin(8)};
+      padding: margin(3) margin(2) margin(2);
     }
 
     &.small {
       --participant-image-size: #{margin(6)};
-      padding: margin(1);
+      padding: margin(1) margin(1) 0;
+      align-items: center;
     }
   }
 
@@ -161,19 +121,14 @@
     font-style: theme(detail-title-font-style, normal);
 
     &.subheading {
-      margin: 0;
       font-size: theme(detail-title-small-font-size, margin(1.25));
     }
 
     .small & {
-      font-size: 1em;
+      font-size: 1.25em;
     }
   }
 
-  .dates {
-    margin: margin(0.5) 0 0;
-  }
-
   .content {
     padding: 0 margin(1) margin(1);
     color: theme(detail-text-color, text-color);
@@ -183,16 +138,38 @@
     line-height: normal;
     font-style: normal;
 
+    @include desktop {
+      padding: 0 margin(2) margin(2);
+
+      &.small {
+        padding: 0 margin(1) margin(1);
+      }
+    }
+
     ::view-transition-old(content),
     ::view-transition-new(content) {
       height: 100%;
     }
   }
 
-  .list {
-    display: flex;
-    flex-direction: column;
-    gap: margin(0.5);
+  .description {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    margin: margin(0.5) 0 0;
+    overflow: hidden;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    color: theme(text-color-alt);
+
+    &.expanded {
+      display: block;
+    }
+  }
+
+  .read-more {
+    :global(.button) {
+      font-weight: bold;
+    }
   }
 
   .list-header {
@@ -202,47 +179,10 @@
     margin-bottom: margin(0.5);
   }
 
-  .skeleton {
-    min-height: margin(7.25);
-    border-radius: theme(playlink-border-radius, border-radius);
-    background: theme(detail-background-light, lighter);
-  }
-
-  .more {
-    cursor: pointer;
-    appearance: none;
-    padding: margin(0.5) margin(1);
-    border: 0;
-    border-radius: theme(participants-load-more-border-radius, border-radius);
-    background: theme(participants-load-more-background, content);
-    color: inherit;
-    font-size: inherit;
-    font-family: inherit;
-
-    &:hover {
-      filter: brightness(1.2);
-    }
-  }
-
-  .sort {
+  .jobs {
     display: flex;
-    align-items: center;
-    gap: margin(0.25);
-    color: theme(text-color-alt);
-  }
-
-  .sortings {
-    :global(.button) {
-      display: block;
-      width: 100%;
-      padding: margin(0.5) margin(1);
-      text-align: left;
-      white-space: nowrap;
-    }
-
-    :global(.button:hover) {
-      background: theme(content-light);
-      border-radius: 0;
-    }
+    flex-wrap: wrap;
+    gap: margin(0.5);
+    margin-bottom: margin(0.5);
   }
 </style>