@playpilot/tpi 8.23.5 → 8.25.0-beta.1

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

@@ -1,144 +1,148 @@
-<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(),
-  }]
-
-  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 } 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>

package/src/routes/components/InjectionPopover.svelte

@@ -10,7 +10,7 @@
   import { trackViaPixel } from '@playpilot/retargeting-tracking'
   import Popover from './Popover.svelte'
   import Title from './Title.svelte'
-  import Participant from './Participant.svelte'
+  import Participant from './Participants/Participant.svelte'
   import TopScroll from './Ads/TopScroll.svelte'
   import Display from './Ads/Display.svelte'
 

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

@@ -1,7 +1,7 @@
 
 <script lang="ts">
   import Modal from './Modal.svelte'
-  import Participant from '../Participant.svelte'
+  import Participant from '../Participants/Participant.svelte'
   import type { ParticipantData } from '$lib/types/participant'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { track } from '$lib/tracking'

package/src/routes/components/{Participant.svelte → Participants/Participant.svelte}

@@ -5,11 +5,12 @@
   import { openModal } from '$lib/modal'
   import type { ParticipantData } from '$lib/types/participant'
   import type { TitleData } from '$lib/types/title'
-  import ListTitle from './ListTitle.svelte'
   import { t } from '$lib/localization'
   import { hasConsentedTo } from '$lib/consent'
   import { trackViaPixel } from '@playpilot/retargeting-tracking'
   import { MetaEvent } from '$lib/enums/TrackingEvent'
+  import ParticipantImage from './ParticipantImage.svelte'
+  import ListTitle from '../ListTitle.svelte'
 
   interface Props {
     participant: ParticipantData
@@ -54,13 +55,17 @@
 </script>
 
 <div class="header" class:small>
-  <div class="heading" use:heading={2} id="heading">{name}</div>
+  <ParticipantImage {participant} />
 
-  {#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>
-  {/if}
+  <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}
+      </p>
+    {/if}
+  </div>
 </div>
 
 <div class="content">
@@ -85,13 +90,22 @@
 
 <style lang="scss">
   .header {
-    padding: margin(4) margin(1) margin(2);
+    --participant-image-size: #{margin(6)};
+    display: grid;
+    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);
     font-weight: theme(detail-font-weight, normal);
     font-size: theme(detail-font-size, font-size-base);
     line-height: theme(participant-description-line-height, normal);
     color: theme(detail-text-color, text-color);
 
+    @include desktop {
+      --participant-image-size: #{margin(8)};
+    }
+
     &.small {
       padding: margin(1);
     }
@@ -101,7 +115,7 @@
     margin: 0;
     font-family: theme(detail-title-font-family, font-family);
     font-weight: theme(detail-title-font-weight, lighter);
-    font-size: theme(detail-title-font-size, margin(1.5));
+    font-size: clamp(1.25em, 5vw, 1.5em);
     line-height: normal;
     font-style: theme(detail-title-font-style, normal);
 
@@ -109,6 +123,10 @@
       margin: 0 0 margin(0.5);
       font-size: theme(detail-title-small-font-size, margin(1.25));
     }
+
+    .small & {
+      font-size: 1em;
+    }
   }
 
   .dates {

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

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import type { ParticipantData } from '$lib/types/participant'
+
+  interface Props {
+    participant?: ParticipantData | null
+  }
+
+  const { participant = null }: Props = $props()
+</script>
+
+<div class="image">
+  {#if participant?.image}
+    <img loading="lazy" src={participant.image} alt="" />
+  {/if}
+</div>
+
+<style lang="scss">
+  $item-width: #{var(--participant-image-size, margin(6))};
+
+  .image {
+    position: relative;
+    display: block;
+    width: $item-width;
+    height: $item-width;
+    border-radius: 50%;
+    overflow: hidden;
+    background: theme(cast-background, lighter);
+
+    &::before,
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 50%;
+      height: 50%;
+      top: 50%;
+      left: 50%;
+      border-radius: 50%;
+      transform: translateX(-50%) translateY(-50%);
+      background: currentColor;
+      opacity: 0.1;
+    }
+
+    &::after {
+      top: 100%;
+      width: 75%;
+    }
+
+    img {
+      z-index: 1;
+      position: relative;
+      width: 100%;
+      height: auto;
+    }
+  }
+</style>

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

@@ -8,6 +8,7 @@
   import { track } from '$lib/tracking'
   import type { ParticipantData } from '$lib/types/participant'
   import type { TitleData } from '$lib/types/title'
+  import ParticipantImage from '../Participants/ParticipantImage.svelte'
   import Rail from './Rail.svelte'
 
   interface Props {
@@ -35,8 +36,6 @@
       participantsByOccurrence[participant.sid] = { participant, count }
     }
 
-    // Sort all participants by their occurrences. If a participant did not occur their positioned will be retained
-    // relative to where it was before
     const participantsSortedByCount = Object.values(participantsByOccurrence).sort((a, b) => b.count - a.count)
 
     return participantsSortedByCount.map(({ participant }) => participant)
@@ -51,7 +50,10 @@
 {#await fetchParticipantsForTitle(title)}
   <Rail {heading}>
     {#each { length: 5 }}
-      <div class="participant"></div>
+      <div class="participant">
+        <ParticipantImage />
+        <div class="name"></div>
+      </div>
     {/each}
   </Rail>
 {:then participants}
@@ -59,11 +61,9 @@
     <Rail {heading}>
       {#each orderParticipantsByPageTextOccurrence(participants).slice(0, 15) as participant}
         <button class="participant" data-testid="participant" onclick={event => onclick(event, participant)}>
-          <span class="truncate">{participant.name}</span>
+          <ParticipantImage {participant} />
 
-          {#if participant.character}
-            <div class="character truncate">{participant.character}</div>
-          {/if}
+          <div class="name">{participant.name}</div>
         </button>
       {/each}
     </Rail>
@@ -71,22 +71,25 @@
 {/await}
 
 <style lang="scss">
+  $item-width: #{theme(rail-size-default, margin(6))};
+
   .participant {
+    --participant-image-size: #{$item-width};
     display: flex;
     flex-direction: column;
-    flex: 0 0 10rem;
-    width: 10rem;
-    min-height: margin(3.375); // Matches 54 pixels, the height of a card with both name and character
-    padding: margin(0.5);
-    border: theme(cast-border, 0);
+    flex: 0 0 $item-width;
+    gap: margin(0.5);
+    width: $item-width;
+    padding: 0;
     border-radius: theme(cast-border-radius, border-radius);
-    background: theme(cast-background, lighter);
+    border: 0;
+    background: transparent;
     cursor: pointer;
-    font-family: inherit;
-    text-align: left;
     color: inherit;
+    font-family: inherit;
     font-size: theme(cast-font-size, font-size-small);
     line-height: normal;
+    text-align: center;
     white-space: nowrap;
 
     &:is(button):hover,
@@ -96,12 +99,7 @@
     }
   }
 
-  .character {
-    color: theme(cast-character-text-color, text-color-alt);
-    font-style: italic;
-  }
-
-  .truncate {
+  .name {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;

package/src/routes/components/TitlePoster.svelte

@@ -15,12 +15,12 @@
 </script>
 
 <img
+  loading={lazy ? 'lazy' : null}
   src={removeImageUrlPrefix(title.standing_poster)}
   alt="Movie poster for '{title.title}'"
   {width}
   {height}
   onerror={({ target }) => (target as HTMLImageElement).src = imagePlaceholderDataUrl}
-  loading={lazy ? 'lazy' : null}
   {onload} />
 
 <style lang="scss">

package/src/routes/elements/+page.svelte

@@ -20,6 +20,7 @@
   import Tooltip from '../components/Tooltip.svelte'
   import ExploreRouter from '../components/Explore/ExploreRouter.svelte'
   import TitlesRail from '../components/Rails/TitlesRail.svelte'
+  import ParticipantsRail from '../components/Rails/ParticipantsRail.svelte'
 
   if (browser) {
     // @ts-ignore
@@ -125,6 +126,15 @@
   </div>
 </div>
 
+<h2>Participants</h2>
+
+<div class="group">
+  <div>
+    <h3>Participants.svelte</h3>
+    <div class="item"><ParticipantsRail {title} /></div>
+  </div>
+</div>
+
 <h2>After article</h2>
 
 <div class="group">

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

@@ -27,13 +27,13 @@ describe('Filter.svelte', () => {
 
     await fireEvent.click(getByText('All filters'))
 
-    expect(getAllByTestId('filter-item')).toHaveLength(6)
+    expect(getAllByTestId('filter-item')).toHaveLength(7)
   })
 
   it('Should not limit the number of filter items by default if limit is set to false', () => {
     const { getAllByTestId, getByRole } = render(Filter, { filter: {}, limit: false })
 
-    expect(getAllByTestId('filter-item')).toHaveLength(6)
+    expect(getAllByTestId('filter-item')).toHaveLength(7)
     expect(getByRole('navigation').classList).not.toContain('limit')
   })
 

package/src/tests/routes/components/{Participant.test.js → Participants/Participant.test.js}

@@ -1,7 +1,7 @@
 import { fireEvent, render, waitFor  } from '@testing-library/svelte'
 import { describe, expect, it, vi, beforeEach } from 'vitest'
 
-import Participant from '../../../routes/components/Participant.svelte'
+import Participant from '../../../../routes/components/Participants/Participant.svelte'
 import { participants, title } from '$lib/fakeData'
 import { fetchTitlesForParticipant } from '$lib/api/participants'
 
@@ -80,4 +80,23 @@ describe('Participant.svelte', () => {
     expect(queryByText('Credits')).not.toBeTruthy()
     expect(container.querySelector('.small')).toBeTruthy()
   })
+
+  it('Should render image if given', async () => {
+    const participantWithImage = { ...participants[0], image: 'some-image.jpg' }
+
+    const { getByRole } = render(Participant, { participant: participantWithImage })
+
+    await waitFor(() => {
+      expect(getByRole('presentation')).toBeTruthy()
+    })
+  })
+
+  it('Should not render image if not given', async () => {
+
+    const { queryByRole } = render(Participant, { participant: participants[0] })
+
+    await waitFor(() => {
+      expect(queryByRole('presentation')).not.toBeTruthy()
+    })
+  })
 })

package/src/tests/routes/components/Rails/ParticipantsRail.test.js

@@ -36,6 +36,19 @@ describe('ParticipantsRail.svelte', () => {
     })
   })
 
+  it('Should render image only for participants with image', async () => {
+    const participantsWithImage = [...participants]
+    participantsWithImage[0].image = 'some-image.jpg'
+
+    vi.mocked(fetchParticipantsForTitle).mockResolvedValueOnce(participantsWithImage)
+
+    const { getAllByRole } = render(ParticipantsRail, { title })
+
+    await waitFor(() => {
+      expect(getAllByRole('presentation')).toHaveLength(1)
+    })
+  })
+
   it('Should order participants by their number of occurrences on the page', async () => {
     document.body.innerHTML = `<main>${participants[1].name}. ${participants[2].name}, ${participants[2].name}</main>`
     vi.mocked(fetchParticipantsForTitle).mockResolvedValueOnce(participants)