@playpilot/tpi 8.25.0-beta.1 → 8.25.0

package/package.json

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

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

@@ -9,20 +9,22 @@
   import { getLanguage } from '$lib/language'
   import type { LanguageCode } from '$lib/types/language'
   import { api } from '$lib/api/api'
+  import InfiniteTitlesRail from '../../Rails/InfiniteTitlesRail.svelte'
+  import type { APIPaginatedResult } from '$lib/types/api'
+
+  type Rail = { headings: Record<LanguageCode, string>, params: Record<string, any>, properties: Record<string, any> }
 
   let expandedTitle: TitleData | null = $state(null)
   let expandedRailKey: string | null = $state(null)
   let windowWidth: number = $state(window.innerWidth)
 
-  type Rail = { headings: Record<LanguageCode, string>, params: Record<string, any>, properties: Record<string, any> }
-
   async function fetchRails(): Promise<Rail[]> {
     return await api<Rail[]>('/streaming-guide/rails', { baseUrl: 'https://partner.playpilot.net/api' })
   }
 
-  async function getListTitles(params: Record<string, any> = {}): Promise<TitleData[]> {
+  async function getListTitles(params: Record<string, any> = {}): Promise<APIPaginatedResult<TitleData>> {
     try {
-      return (await fetchTitles(params))?.results
+      return (await fetchTitles({ ...params, page_size: 20 }))
     } catch (error: any) {
       console.log(error)
       track(TrackingEvent.ExploreHomeRailError, null, { message: error.message || error.status.toString() || '', params })
@@ -38,7 +40,7 @@
 {#await fetchRails()}
   {#each { length: 3 }}
     <div class="rail">
-      <TitlesRail titles={new Promise((res) => setTimeout(res, 10000))} size={windowWidth >= mobileBreakpoint ? 'flexible' : 'huge'} />
+      <TitlesRail titles={new Promise(() => {})} size={windowWidth >= mobileBreakpoint ? 'flexible' : 'huge'} />
     </div>
   {/each}
 {:then rails}
@@ -46,16 +48,16 @@
     {@const heading = headings[getLanguage()]}
 
     <div class="rail">
-      <TitlesRail
+      <InfiniteTitlesRail
         {heading}
-        titles={getListTitles(params)}
-        size={windowWidth >= mobileBreakpoint ? (properties.size || 'flexible') : 'huge'}
-        minimumLength={7}
         {...properties}
         bind:expandedTitle
         bind:expandedRailKey
         onclick={() => track(TrackingEvent.ExploreTitleRailModalView, null, { rail: headings })}
-        onexpand={(title) => track(TrackingEvent.ExploreTitleRailExpandClick, title, { rail: headings })} />
+        onexpand={(title) => track(TrackingEvent.ExploreTitleRailExpandClick, title, { rail: headings })}
+        fetchFunction={(page) => getListTitles({ ...params, page })}
+        size={windowWidth >= mobileBreakpoint ? (properties.size || 'flexible') : 'huge'}
+        minimumLength={7} />
     </div>
   {/each}
 {:catch}

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 './Participants/Participant.svelte'
+  import Participant from './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 '../Participants/Participant.svelte'
+  import Participant from '../Participant.svelte'
   import type { ParticipantData } from '$lib/types/participant'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { track } from '$lib/tracking'

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

@@ -5,12 +5,11 @@
   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
@@ -55,17 +54,13 @@
 </script>
 
 <div class="header" class:small>
-  <ParticipantImage {participant} />
+  <div class="heading" use:heading={2} id="heading">{name}</div>
 
-  <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>
+  {#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="content">
@@ -90,22 +85,13 @@
 
 <style lang="scss">
   .header {
-    --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);
+    padding: margin(4) 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);
     }
@@ -115,7 +101,7 @@
     margin: 0;
     font-family: theme(detail-title-font-family, font-family);
     font-weight: theme(detail-title-font-weight, lighter);
-    font-size: clamp(1.25em, 5vw, 1.5em);
+    font-size: theme(detail-title-font-size, margin(1.5));
     line-height: normal;
     font-style: theme(detail-title-font-style, normal);
 
@@ -123,10 +109,6 @@
       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/Rails/InfiniteTitlesRail.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import type { APIPaginatedResult } from '$lib/types/api'
+  import type { TitleData } from '$lib/types/title'
+  import TitlesRail from './TitlesRail.svelte'
+  import { onMount, type ComponentProps } from 'svelte'
+
+  interface Props extends Omit<ComponentProps<typeof TitlesRail>, 'titles'> {
+    fetchFunction: (page: number) => Promise<APIPaginatedResult<TitleData>>
+    maxPage?: number
+  }
+
+  const {
+    fetchFunction,
+    maxPage = 5,
+    expandedTitle = $bindable(null),
+    expandedRailKey = $bindable(null),
+    ...rest
+  }: Props = $props()
+
+  const emptyPromise: Promise<TitleData[]> = new Promise(() => {})
+
+  let titles: TitleData[] = $state([])
+  let shown: number[] = $state([])
+  let page = $state(1)
+  let hasMorePages = $state(false)
+  let loading = $state(true)
+
+  $effect(() => {
+    if (loading) return
+    if (!hasMorePages) return
+    if (page >= maxPage) return
+    if (titles.length - shown.length > 5) return
+
+    page++
+    fetchTitles()
+  })
+
+  onMount(fetchTitles)
+
+  async function fetchTitles(): Promise<void> {
+    loading = true
+    hasMorePages = false
+
+    try {
+      const { next, results } = await fetchFunction(page)
+
+      titles = [...titles, ...results]
+      hasMorePages = !!next
+    } finally {
+      loading = false
+    }
+  }
+</script>
+
+{#if !titles.length && loading}
+  <TitlesRail titles={emptyPromise} {...rest} />
+{:else}
+  <TitlesRail {titles} {...rest} bind:shown />
+{/if}

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

@@ -8,7 +8,6 @@
   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 {
@@ -36,6 +35,8 @@
       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)
@@ -50,10 +51,7 @@
 {#await fetchParticipantsForTitle(title)}
   <Rail {heading}>
     {#each { length: 5 }}
-      <div class="participant">
-        <ParticipantImage />
-        <div class="name"></div>
-      </div>
+      <div class="participant"></div>
     {/each}
   </Rail>
 {:then participants}
@@ -61,9 +59,11 @@
     <Rail {heading}>
       {#each orderParticipantsByPageTextOccurrence(participants).slice(0, 15) as participant}
         <button class="participant" data-testid="participant" onclick={event => onclick(event, participant)}>
-          <ParticipantImage {participant} />
+          <span class="truncate">{participant.name}</span>
 
-          <div class="name">{participant.name}</div>
+          {#if participant.character}
+            <div class="character truncate">{participant.character}</div>
+          {/if}
         </button>
       {/each}
     </Rail>
@@ -71,25 +71,22 @@
 {/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 $item-width;
-    gap: margin(0.5);
-    width: $item-width;
-    padding: 0;
+    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);
     border-radius: theme(cast-border-radius, border-radius);
-    border: 0;
-    background: transparent;
+    background: theme(cast-background, lighter);
     cursor: pointer;
-    color: inherit;
     font-family: inherit;
+    text-align: left;
+    color: inherit;
     font-size: theme(cast-font-size, font-size-small);
     line-height: normal;
-    text-align: center;
     white-space: nowrap;
 
     &:is(button):hover,
@@ -99,7 +96,12 @@
     }
   }
 
-  .name {
+  .character {
+    color: theme(cast-character-text-color, text-color-alt);
+    font-style: italic;
+  }
+
+  .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;

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

@@ -9,6 +9,7 @@
     onchange?: (index: number) => void
     onresize?: () => void
     slider?: ReturnType<typeof TinySlider> | null,
+    shown?: number[],
     children: Snippet
   }
 
@@ -17,6 +18,7 @@
     onchange = () => null,
     onresize = () => null,
     slider = $bindable(),
+    shown = $bindable([]),
     children,
   }: Props = $props()
 </script>
@@ -26,7 +28,7 @@
 {/if}
 
 <div class="rail">
-  <TinySlider bind:this={slider} {onchange} {onresize} allowWheel>
+  <TinySlider bind:this={slider} {onchange} {onresize} bind:shown allowWheel>
     {@render children()}
 
     {#snippet controls({ setIndex, currentIndex, reachedEnd })}

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

@@ -18,10 +18,11 @@
     heading?: string,
     size?: 'small' | 'large' | 'huge' | 'flexible'
     aside?: boolean,
-    expandable?: boolean,
     navigateToExplore?: boolean,
+    expandable?: boolean,
     expandedTitle?: TitleData | null,
     expandedRailKey?: string | null,
+    shown?: number[],
     onclick?: (title: TitleData) => void,
     onexpand?: (title: TitleData) => void
   }
@@ -32,10 +33,11 @@
     heading = '',
     size = 'small',
     aside = false,
-    expandable = false,
     navigateToExplore = false,
+    expandable = false,
     expandedTitle = $bindable(null),
     expandedRailKey = $bindable(null),
+    shown = $bindable([]),
     onclick = () => null,
     onexpand = () => null,
   }: Props = $props()
@@ -169,6 +171,7 @@
     {#if titles?.length >= minimumLength}
       <Rail
         bind:slider
+        bind:shown
         {heading}
         onchange={(index) => onchange(titles, index)}
         onresize={() => slider?.reposition()}>

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

@@ -3,7 +3,7 @@
   import { title, linkInjections, campaign, participants } from '$lib/fakeData'
   import { openModal } from '$lib/modal'
   import { insertExplore, insertExploreIntoNavigation } from '$lib/explore'
-  import { fetchSimilarTitles } from '$lib/api/titles'
+  import { fetchSimilarTitles, fetchTitles } from '$lib/api/titles'
   import Disclaimer from '../components/Ads/Disclaimer.svelte'
   import Display from '../components/Ads/Display.svelte'
   import TopScroll from '../components/Ads/TopScroll.svelte'
@@ -21,6 +21,7 @@
   import ExploreRouter from '../components/Explore/ExploreRouter.svelte'
   import TitlesRail from '../components/Rails/TitlesRail.svelte'
   import ParticipantsRail from '../components/Rails/ParticipantsRail.svelte'
+  import InfiniteTitlesRail from '../components/Rails/InfiniteTitlesRail.svelte'
 
   if (browser) {
     // @ts-ignore
@@ -151,6 +152,10 @@
   <TitlesRail titles={fetchSimilarTitles(title)} expandable />
   <br>
   <TitlesRail titles={fetchSimilarTitles(title)} aside size="large" />
+  <br>
+  Loads more pages:
+  <br>
+  <InfiniteTitlesRail fetchFunction={(page: number) => fetchTitles({ page })} />
 {/key}
 
 <h2>TitlesRailModal</h2>

package/src/tests/routes/components/{Participants/Participant.test.js → 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/Participants/Participant.svelte'
+import Participant from '../../../routes/components/Participant.svelte'
 import { participants, title } from '$lib/fakeData'
 import { fetchTitlesForParticipant } from '$lib/api/participants'
 
@@ -80,23 +80,4 @@ 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,19 +36,6 @@ 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)

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

@@ -1,56 +0,0 @@
-<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>