@playpilot/tpi 8.35.0-beta.2 → 8.35.1

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

@@ -1,7 +1,9 @@
 <script lang="ts">
+  import { onMount } from 'svelte'
   import { heading } from '$lib/actions/heading'
-  import type { Job, ParticipantData } from '$lib/types/participant'
-  import type { ExploreFilter, ExploreTitleSorting } from '$lib/types/filter'
+  import { fetchTitlesForParticipant } from '$lib/api/participants'
+  import { openModal } from '$lib/modal'
+  import type { ParticipantData } from '$lib/types/participant'
   import type { TitleData } from '$lib/types/title'
   import { Sorting } from '$lib/enums/Sorting'
   import { t } from '$lib/localization'
@@ -9,40 +11,66 @@
   import { trackViaPixel } from '@playpilot/retargeting-tracking'
   import { MetaEvent } from '$lib/enums/TrackingEvent'
   import ParticipantImage from './ParticipantImage.svelte'
-  import ExploreResults from '../Explore/Routes/ExploreResults.svelte'
-  import Filter from '../Explore/Filter/Filter.svelte'
+  import ListTitle from '../ListTitle.svelte'
+  import Dropdown from '../Explore/Filter/Dropdown.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, description } = $derived(participant)
+  const { name, birth_date, death_date } = $derived(participant)
 
-  const filter: ExploreFilter = $state({})
-  const sortings: ExploreTitleSorting[] = [
+  const sortings: TitleSorting[] = [
     { label: 'Popularity', value: Sorting.Popular },
     { label: 'Top Rated', value: Sorting.Best },
     { label: 'Year', value: Sorting.Chronological },
   ]
 
-  let currentJob: 'all' | Job = $state('all')
-  let descriptionExpanded: boolean = $state(false)
+  const pageSize = 30
+
+  let titles: TitleData[] = $state([])
+  let page = $state(1)
+  let hasMorePages = $state(true)
+  let loading = $state(true)
+  let currentSorting = $state(sortings[0])
 
-  const filterWithParticipant: ExploreFilter = $derived({
-    ...filter,
-    participant_sid: { type: 'string', value: participant.sid },
-    participant_job: { type: 'string', value: currentJob === 'all' ? null : currentJob }
-  })
+  onMount(loadMore)
 
   if (isRetargetingAllowed()) trackViaPixel(MetaEvent.ParticipantView, { participant: participant.name })
 
-  function onTitleClick(event: MouseEvent, titles: TitleData[], index: number): void {
-    openModal({ event, type: 'titles-rail', data: titles, props: { initialIndex: index } })
+  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()
   }
 </script>
 
@@ -52,46 +80,60 @@
   <div>
     <div class="heading" use:heading={2} id="heading">{name}</div>
 
-    {#if description}
-      <p class="description" class:expanded={descriptionExpanded}>
-        {description}
+    {#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}
       </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" class:small>
-  {#if !small}
+<div class="content">
+  {#if !small && (titles.length && !loading)}
     <div class="list-header">
       <div class="heading subheading" use:heading={3} id="credits">{t('Credits')}</div>
-    </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 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>
-
-    <Filter {filter} {sortings} hideActive />
   {/if}
 
-  <ExploreResults forceGrid hidePlaylinks filter={filterWithParticipant} {onTitleClick} />
+  <div class="list">
+    {#each titles as title}
+      <ListTitle {title} compact={small} onclick={(event) => openModal({ event, data: title })} />
+    {/each}
+
+    {#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>
 </div>
 
 <style lang="scss">
   .header {
-    --participant-image-size: #{margin(5)};
+    --participant-image-size: #{margin(6)};
     display: grid;
-    grid-template-columns: var(--participant-image-size) calc(100% - var(--participant-image-size) - margin(1));
-    align-items: start;
+    grid-template-columns: calc(var(--participant-image-size)) auto;
+    align-items: center;
     gap: margin(1);
     padding: margin(3) margin(1) margin(2);
     font-family: theme(detail-font-family, font-family);
@@ -102,13 +144,11 @@
 
     @include desktop {
       --participant-image-size: #{margin(8)};
-      padding: margin(3) margin(2) margin(2);
     }
 
     &.small {
       --participant-image-size: #{margin(6)};
-      padding: margin(1) margin(1) 0;
-      align-items: center;
+      padding: margin(1);
     }
   }
 
@@ -121,14 +161,19 @@
     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: 1.25em;
+      font-size: 1em;
     }
   }
 
+  .dates {
+    margin: margin(0.5) 0 0;
+  }
+
   .content {
     padding: 0 margin(1) margin(1);
     color: theme(detail-text-color, text-color);
@@ -138,38 +183,16 @@
     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%;
     }
   }
 
-  .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 {
+    display: flex;
+    flex-direction: column;
+    gap: margin(0.5);
   }
 
   .list-header {
@@ -179,10 +202,47 @@
     margin-bottom: margin(0.5);
   }
 
-  .jobs {
+  .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 {
     display: flex;
-    flex-wrap: wrap;
-    gap: margin(0.5);
-    margin-bottom: margin(0.5);
+    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;
+    }
   }
 </style>

package/src/tests/main.test.js

@@ -113,10 +113,11 @@ describe('main.ts', () => {
   })
 
   describe('mount', () => {
-    it('Should insert script tag', () => {
+    it('Should insert both script and style tags', () => {
       window.PlayPilotLinkInjections.mount()
 
       expect(document.querySelector('script#playpilot-mount')).toBeTruthy()
+      expect(document.querySelector('link#playpilot-mount-style')).toBeTruthy()
     })
 
     it('Should insert script tag with editorial mode if editiorial mode is enabled', () => {

package/src/tests/routes/components/Participants/Participant.test.js

@@ -3,15 +3,15 @@ import { describe, expect, it, vi, beforeEach } from 'vitest'
 
 import Participant from '../../../../routes/components/Participants/Participant.svelte'
 import { participants, title } from '$lib/fakeData'
-import { fetchTitles } from '$lib/api/titles'
+import { fetchTitlesForParticipant } from '$lib/api/participants'
 import { Sorting } from '$lib/enums/Sorting'
 
 vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
 }))
 
-vi.mock('$lib/api/titles', () => ({
-  fetchTitles: vi.fn(),
+vi.mock('$lib/api/participants', () => ({
+  fetchTitlesForParticipant: vi.fn(),
 }))
 
 describe('Participant.svelte', () => {
@@ -19,20 +19,18 @@ describe('Participant.svelte', () => {
     vi.resetAllMocks()
   })
 
-  it('Should call fetchTitles on mount', async () => {
+  it('Should call fetchTitlesForParticipant on mount', () => {
     render(Participant, { participant: participants[0] })
 
-    await waitFor(() => {
-      expect(fetchTitles).toHaveBeenCalled()
-    })
+    expect(fetchTitlesForParticipant).toHaveBeenCalledWith(participants[0], { page: 1, sorting: Sorting.Popular })
   })
 
   it('Should render fetched titles after showing skeletons', async () => {
-    vi.mocked(fetchTitles).mockResolvedValueOnce({ results: [title, title], next: 'next', previous: 'previous' })
+    vi.mocked(fetchTitlesForParticipant).mockResolvedValueOnce([title, title])
 
     const { getAllByTestId } = render(Participant, { participant: participants[0] })
 
-    expect(getAllByTestId('skeleton')).toHaveLength(24)
+    expect(getAllByTestId('skeleton')).toHaveLength(6)
 
     await waitFor(() => {
       expect(getAllByTestId('title')).toHaveLength(2)
@@ -40,7 +38,7 @@ describe('Participant.svelte', () => {
   })
 
   it('Should not show load more button while loading and when fewer than page size of titles are fetched', async () => {
-    vi.mocked(fetchTitles).mockResolvedValueOnce({ results: [title, title], next: 'next', previous: 'previous' })
+    vi.mocked(fetchTitlesForParticipant).mockResolvedValueOnce([title, title])
 
     const { queryByText, getAllByTestId } = render(Participant, { participant: participants[0] })
 
@@ -54,8 +52,8 @@ describe('Participant.svelte', () => {
   })
 
   it('Should show load more button after loading and if more than page size of titles are fetched', async () => {
-    const resolved = ({ results: Array(30).fill(title), next: 'next', previous: 'previous' })
-    vi.mocked(fetchTitles).mockResolvedValueOnce(resolved)
+    const resolved = Array(30).fill(title)
+    vi.mocked(fetchTitlesForParticipant).mockResolvedValueOnce(resolved)
 
     const { getByText } = render(Participant, { participant: participants[0] })
 
@@ -65,8 +63,8 @@ describe('Participant.svelte', () => {
   })
 
   it('Should fetch more titles when load more button is clicked', async () => {
-    const resolved = ({ results: Array(30).fill(title), next: 'next', previous: 'previous' })
-    vi.mocked(fetchTitles).mockResolvedValueOnce(resolved)
+    const resolved = Array(30).fill(title)
+    vi.mocked(fetchTitlesForParticipant).mockResolvedValueOnce(resolved)
 
     const { getByText } = render(Participant, { participant: participants[0] })
 
@@ -74,34 +72,7 @@ describe('Participant.svelte', () => {
 
     await fireEvent.click(getByText('Show more'))
 
-    expect(fetchTitles).toHaveBeenCalledWith({ page: 2, page_size: expect.any(Number), participant_job: null, participant_sid: participants[0].sid })
-  })
-
-  it('Should include participant role in fetchTitles when selected and refetch', async () => {
-    const resolved = ({ results: Array(30).fill(title), next: 'next', previous: 'previous' })
-    vi.mocked(fetchTitles).mockResolvedValueOnce(resolved)
-
-    const { getByText } = render(Participant, { participant: participants[0] })
-
-    await fireEvent.click(getByText('Actor'))
-
-    await waitFor(() => {
-      expect(fetchTitles).toHaveBeenCalledWith(expect.objectContaining({ participant_job: 'actor' }))
-    })
-  })
-
-  it('Should include selected sorting specific to participants', async () => {
-    const resolved = ({ results: Array(30).fill(title), next: 'next', previous: 'previous' })
-    vi.mocked(fetchTitles).mockResolvedValueOnce(resolved)
-
-    const { getByText } = render(Participant, { participant: participants[0] })
-
-    await fireEvent.click(getByText('Sort by'))
-    await fireEvent.click(getByText('Year'))
-
-    await waitFor(() => {
-      expect(fetchTitles).toHaveBeenCalledWith(expect.objectContaining({ ordering: Sorting.Chronological }))
-    })
+    expect(fetchTitlesForParticipant).toHaveBeenCalledWith(participants[0], { page: 2, sorting: Sorting.Popular })
   })
 
   it('Should render as small variant when given', () => {
@@ -122,20 +93,11 @@ describe('Participant.svelte', () => {
   })
 
   it('Should not render image if not given', async () => {
+
     const { queryByRole } = render(Participant, { participant: participants[0] })
 
     await waitFor(() => {
       expect(queryByRole('presentation')).not.toBeTruthy()
     })
   })
-
-  it('Should render description and toggle more on click of Read more button', async () => {
-    const { getByText } = render(Participant, { participant: participants[0] })
-
-    expect(getByText(participants[0].description)).toBeTruthy()
-
-    await fireEvent.click(getByText('Read more'))
-
-    expect(getByText('Read less')).toBeTruthy()
-  })
 })

package/vite._mount.config.js

@@ -2,7 +2,6 @@ import path from 'path'
 import * as dotenv from 'dotenv'
 import { defineConfig } from 'vitest/config'
 import { svelte } from '@sveltejs/vite-plugin-svelte'
-import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
 import packageJson from './package.json'
 
 dotenv.config({ path: '.env' })
@@ -13,7 +12,6 @@ export default defineConfig(({ mode }) => {
   return {
     plugins: [
       svelte(),
-      cssInjectedByJsPlugin(),
       injectEnvVariables,
     ],
 
@@ -22,9 +20,9 @@ export default defineConfig(({ mode }) => {
       rollupOptions: {
         input: './src/mount.ts',
         output: {
-          format: 'iife',
           name: 'PlayPilotMount',
           entryFileNames: isEditiorial ? 'editorial.mount.js' : 'mount.js',
+          assetFileNames: (assetInfo) => assetInfo.name,
         },
       },
     },