@playpilot/tpi 5.22.0 → 5.23.0-beta.1

package/events.md

@@ -37,6 +37,7 @@ Event | Action | Info | Payload
 `ali_participant_modal_view` | _Fires any time a title modal is viewed_ | The title modal opens when viewing a participant modal both on desktop and mobile | `participant` (name of the participant)
 `ali_participant_modal_close` | _Fires any time a title modal is closed_ | | `participant` (name of the participant) `time_spent` (time between modal_view and modal_close milliseconds)
 'ali_similar_title_click' | _Fires any time a similar titles rail item is clicked_ | Title | `title_source` (original name of the title the rail item was clicked in)
+'ali_participant_click' | _Fires any time a participants rail item is clicked_ | null | `title_source` (original name of the title the rail item was clicked in), `participant` (name of the clicked participant)
 
 ### Popover
 Event | Action | Info | Payload

package/package.json

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

package/src/lib/api/participants.ts

@@ -0,0 +1,16 @@
+import { getApiToken } from '$lib/token'
+import type { ParticipantData } from '$lib/types/participant'
+import type { TitleData } from '../types/title'
+import { api } from './api'
+
+export async function fetchTitlesForParticipant(participant: ParticipantData, { page = 1 }: { page?: number } = {}): Promise<TitleData[]> {
+  const response = await api<{ results: TitleData[] }>(`/titles/browse?api-token=${getApiToken()}&participant_sid=${participant.sid}&page=${page}`)
+
+  return response.results
+}
+
+export async function fetchParticipantsForTitle(title: TitleData): Promise<ParticipantData[]> {
+  const response = await api<{ results: ParticipantData[] }>(`/participants/browse?api-token=${getApiToken()}&title_sid=${title.sid}`)
+
+  return response.results
+}

package/src/lib/api/titles.ts

@@ -0,0 +1,9 @@
+import { getApiToken } from '$lib/token'
+import type { TitleData } from '../types/title'
+import { api } from './api'
+
+export async function fetchSimilarTitles(title: TitleData): Promise<TitleData[]> {
+  const response = await api<{ results: TitleData[] }>(`/titles/browse?api-token=${getApiToken()}&related_to_sid=${title.sid}`)
+
+  return response.results
+}

package/src/lib/data/translations.ts

@@ -101,6 +101,11 @@ export const translations = {
     [Language.Swedish]: 'Få',
     [Language.Danish]: 'Få',
   },
+  'Show More': {
+    [Language.English]: 'Show more',
+    [Language.Swedish]: 'Visa mer',
+    [Language.Danish]: 'Vis mere',
+  },
 
   // Genres
   'All': {

package/src/lib/enums/TrackingEvent.ts

@@ -22,6 +22,7 @@ export const TrackingEvent = Object.freeze({
 
   // Rails
   SimilarTitleClick: 'ali_similar_title_click',
+  ParticipantClick: 'ali_title_participant_click',
 
   // After article
   AfterArticlePlaylinkClick: 'ali_after_article_playlink_click',

package/src/routes/components/ListTitle.svelte

@@ -29,7 +29,7 @@
   }
 </script>
 
-<a class="title" href={titleUrl(title)} {onclick}>
+<a class="title" href={titleUrl(title)} {onclick} data-testid="title">
   <div class="poster">
     <TitlePoster {title} width={30} height={43} />
   </div>
@@ -89,7 +89,7 @@
     display: flex;
     align-items: center;
     width: 100%;
-    background: var(--playpilot-list-item-background, var(--playpilot-lighter));
+    background: var(--playpilot-list-item-background, var(--playpilot-playlink-background, var(--playpilot-lighter)));
     padding: margin(0.5);
     border: 0;
     border-radius: var(--playpilot-list-item-border-radius, margin(0.5));
@@ -97,7 +97,7 @@
     font-style: normal !important;
 
     &:hover {
-      background: var(--playpilot-list-item-hover-background, var(--playpilot-content));
+      filter: var(--playpilot-list-item-hover-filter, var(--playpilot-playlink-hover-filter, brightness(1.1)));
     }
 
     &:last-child {
@@ -112,7 +112,7 @@
     width: margin(4.125);
     aspect-ratio: 2/3;
     border-radius: var(--playpilot-detail-image-border-radius, margin(0.5));
-    background: var(--playpilot-detail-image-background, var(--playpilot-content));
+    background: var(--playpilot-detail-image-background, var(--playpilot-genre-background, var(--playpilot-content)));
     overflow: hidden;
   }
 

package/src/routes/components/Participant.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
+  import { onMount } from 'svelte'
   import { heading } from '$lib/actions/heading'
+  import { fetchTitlesForParticipant } from '$lib/api/participants'
   import { SplitTest } from '$lib/enums/SplitTest'
   import { openModal } from '$lib/modal'
   import { trackSplitTestView } from '$lib/splitTest'
   import type { ParticipantData } from '$lib/types/participant'
+  import type { TitleData } from '$lib/types/title'
   import ListTitle from './ListTitle.svelte'
+  import { t } from '$lib/localization'
 
   interface Props {
     participant: ParticipantData
@@ -14,12 +18,37 @@
 
   const { name, birth_date, death_date } = $derived(participant)
 
+  const pageSize = 30
+
   trackSplitTestView(SplitTest.ParticipantPlaylinkFormat)
 
+  let titles: TitleData[] = $state([])
+  let page = $state(1)
+  let hasMorePages = $state(true)
+  let loading = $state(true)
+
+  onMount(loadMore)
+
   function formatDate(dateString: string): string {
     const date = new Date(dateString)
     return date.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })
   }
+
+  async function loadMore() {
+    loading = true
+
+    try {
+      const results = await fetchTitlesForParticipant(participant, { page })
+
+      titles = [...titles, ...results]
+      hasMorePages = results?.length >= pageSize
+    } catch {
+      hasMorePages = false
+    } finally {
+      loading = false
+      page += 1
+    }
+  }
 </script>
 
 <div class="header">
@@ -36,11 +65,17 @@
   <div class="heading small" use:heading={3} id="credits">Credits</div>
 
   <div class="list">
-    {#each window.PlayPilotLinkInjections?.evaluated_link_injections?.map(i => i.title_details) || [] as title}
-      {#if title}
-        <ListTitle {title} onclick={(event) => openModal({ event, data: title })} />
-      {/if}
+    {#each titles as title}
+      <ListTitle {title} 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>
 
@@ -89,4 +124,26 @@
     flex-direction: column;
     gap: margin(0.5);
   }
+
+  .skeleton {
+    min-height: margin(7.25);
+    border-radius: var(--playpilot-playlink-border-radius, margin(0.5));
+    background: var(--playpilot-list-item-background, var(--playpilot-lighter));
+  }
+
+  .more {
+    cursor: pointer;
+    appearance: none;
+    padding: margin(0.5) margin(1);
+    border: 0;
+    border-radius: var(--playpilot-participants-load-more-border-radius, var(--playpilot-list-item-border-radius, margin(0.5)));
+    background: var(--playpilot-participants-load-more-background, var(--playpilot-button-background, var(--playpilot-content)));
+    color: inherit;
+    font-size: inherit;
+    font-family: inherit;
+
+    &:hover {
+      filter: brightness(1.2);
+    }
+  }
 </style>

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

@@ -1,18 +1,25 @@
 <script lang="ts">
-  import { participants } from '$lib/fakeData'
+  import { fetchParticipantsForTitle } from '$lib/api/participants'
+  import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { openModal } from '$lib/modal'
+  import { track } from '$lib/tracking'
   import type { ParticipantData } from '$lib/types/participant'
+  import type { TitleData } from '$lib/types/title'
   import Rail from './Rail.svelte'
 
-  async function fetchParticipants(): Promise<ParticipantData[]> {
-    // This is just a fake loading state for now
-    await new Promise(res => setTimeout(res, 500))
+  interface Props {
+    title: TitleData
+  }
+
+  const { title }: Props = $props()
 
-    return participants
+  function onclick(event: MouseEvent, participant: ParticipantData): void {
+    openModal({ event, type: 'participant', data: participant })
+    track(TrackingEvent.ParticipantClick, null, { title_source: title.original_title, participant: participant.name })
   }
 </script>
 
-{#await fetchParticipants()}
+{#await fetchParticipantsForTitle(title)}
   <Rail heading="Cast">
     {#each { length: 5 }}
       <div class="participant"></div>
@@ -22,10 +29,12 @@
   {#if participants?.length}
     <Rail heading="Cast">
       {#each participants.slice(0, 15) as participant}
-        <button class="participant" data-testid="participant" onclick={event => openModal({ event, type: 'participant', data: participant })}>
+        <button class="participant" data-testid="participant" onclick={event => onclick(event, participant)}>
           <span class="truncate">{participant.name}</span>
 
-          <div class="character truncate">{participant.character}</div>
+          {#if participant.character}
+            <div class="character truncate">{participant.character}</div>
+          {/if}
         </button>
       {/each}
     </Rail>
@@ -34,7 +43,8 @@
 
 <style lang="scss">
   .participant {
-    display: block;
+    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

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { fetchSimilarTitles } from '$lib/api/titles'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { track } from '$lib/tracking'
   import type { TitleData } from '$lib/types/title'
@@ -10,15 +11,7 @@
 
   const { title }: Props = $props()
 
-  const titles = fetchTitles()
-
-  async function fetchTitles(): Promise<TitleData[]> {
-    // This is just a fake loading state for now
-    await new Promise(res => setTimeout(res, 500))
-
-    // Imagine this being a fetch request that returns titles instead.
-    return (window.PlayPilotLinkInjections?.evaluated_link_injections?.map(i => i.title_details) || []) as TitleData[]
-  }
+  const titles = fetchSimilarTitles(title)
 </script>
 
 <TitlesRail {titles} heading="Similar movies & shows" onclick={(targetTitle) => track(TrackingEvent.SimilarTitleClick, targetTitle, { title_source: title.original_title })} />

package/src/routes/components/Title.svelte

@@ -55,11 +55,8 @@
       <Description text={title.description} blurb={title.blurb} />
     {/if}
 
-    <!-- Temporarily not available on production as there is not yet an API endpoint for either -->
-    {#if process.env.NODE_ENV !== 'production'}
-      <ParticipantsRail />
-      <SimilarRail {title} />
-    {/if}
+    <ParticipantsRail {title} />
+    <SimilarRail {title} />
   </div>
 </div>
 

package/src/routes/components/TitlePoster.svelte

@@ -26,5 +26,6 @@
     display: block;
     width: 100%;
     height: auto;
+    color: var(--playpilot-detail-text-color, var(--playpilot-text-color-alt));
   }
 </style>

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

@@ -0,0 +1,76 @@
+import { fireEvent, render, waitFor  } from '@testing-library/svelte'
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+
+import Participant from '../../../routes/components/Participant.svelte'
+import { participants, title } from '$lib/fakeData'
+import { fetchTitlesForParticipant } from '$lib/api/participants'
+
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+vi.mock('$lib/api/participants', () => ({
+  fetchTitlesForParticipant: vi.fn(),
+}))
+
+describe('Participant.svelte', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+  })
+
+  it('Should call fetchTitlesForParticipant on mount', () => {
+    render(Participant, { participant: participants[0] })
+
+    expect(fetchTitlesForParticipant).toHaveBeenCalledWith(participants[0], { page: 1 })
+  })
+
+  it('Should render fetched titles after showing skeletons', async () => {
+    vi.mocked(fetchTitlesForParticipant).mockResolvedValueOnce([title, title])
+
+    const { getAllByTestId } = render(Participant, { participant: participants[0] })
+
+    expect(getAllByTestId('skeleton')).toHaveLength(6)
+
+    await waitFor(() => {
+      expect(getAllByTestId('title')).toHaveLength(2)
+    })
+  })
+
+  it('Should not show load more button while loading and when fewer than page size of titles are fetched', async () => {
+    vi.mocked(fetchTitlesForParticipant).mockResolvedValueOnce([title, title])
+
+    const { queryByText, getAllByTestId } = render(Participant, { participant: participants[0] })
+
+    expect(queryByText('Show More')).not.toBeTruthy()
+
+    await waitFor(() => {
+      expect(getAllByTestId('title')).toHaveLength(2)
+    })
+
+    expect(queryByText('Show More')).not.toBeTruthy()
+  })
+
+  it('Should show load more button after loading and if more than page size of titles are fetched', async () => {
+    const resolved = Array(30).fill(title)
+    vi.mocked(fetchTitlesForParticipant).mockResolvedValueOnce(resolved)
+
+    const { getByText } = render(Participant, { participant: participants[0] })
+
+    await waitFor(() => {
+      expect(getByText('Show more')).toBeTruthy()
+    })
+  })
+
+  it('Should fetch more titles when load more button is clicked', async () => {
+    const resolved = Array(30).fill(title)
+    vi.mocked(fetchTitlesForParticipant).mockResolvedValueOnce(resolved)
+
+    const { getByText } = render(Participant, { participant: participants[0] })
+
+    await waitFor(() => getByText('Show more'))
+
+    await fireEvent.click(getByText('Show more'))
+
+    expect(fetchTitlesForParticipant).toHaveBeenCalledWith(participants[0], { page: 2 })
+  })
+})

package/src/tests/routes/components/ParticipantModal.test.js

@@ -14,6 +14,10 @@ vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
 }))
 
+vi.mock('$lib/api/participants', () => ({
+  fetchTitlesForParticipant: vi.fn(),
+}))
+
 describe('ParticipantModal.svelte', () => {
   beforeEach(() => {
     vi.resetAllMocks()

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

@@ -1,18 +1,31 @@
 import { fireEvent, render, waitFor } from '@testing-library/svelte'
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import ParticipantsRail from '../../../../routes/components/Rails/ParticipantsRail.svelte'
 import { openModal } from '$lib/modal'
-import { participants } from '$lib/fakeData'
+import { participants, title } from '$lib/fakeData'
+import { track } from '$lib/tracking'
+import { TrackingEvent } from '$lib/enums/TrackingEvent'
+import { fetchParticipantsForTitle } from '$lib/api/participants'
 
 vi.mock('$lib/modal', () => ({
   openModal: vi.fn(),
 }))
 
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+vi.mock('$lib/api/participants', () => ({
+  fetchParticipantsForTitle: vi.fn(),
+}))
+
 describe('ParticipantsRail.svelte', () => {
   it('Should render each given participant', async () => {
+    vi.mocked(fetchParticipantsForTitle).mockResolvedValueOnce(participants)
+
     // @ts-ignore
-    const { getByText } = render(ParticipantsRail)
+    const { getByText } = render(ParticipantsRail, { title })
 
     await waitFor(() => {
       expect(getByText(participants[0].name)).toBeTruthy()
@@ -20,15 +33,20 @@ describe('ParticipantsRail.svelte', () => {
     })
   })
 
-  // TODO: Re-enable when participants are actually fetched
-  // it('Should not render when no participants are returned', () => {
-  //   const { container } = render(ParticipantsRail)
+  it('Should not render when no participants are returned', async () => {
+    vi.mocked(fetchParticipantsForTitle).mockResolvedValueOnce([])
 
-  //   expect(container.querySelectorAll('.participant').length).toBe(0)
-  // })
+    const { container } = render(ParticipantsRail)
+
+    await waitFor(() => {
+      expect(container.querySelectorAll('.participant').length).toBe(0)
+    })
+  })
 
   it('Should open modal on click of participant', async () => {
-    const { getAllByTestId } = render(ParticipantsRail)
+    vi.mocked(fetchParticipantsForTitle).mockResolvedValueOnce(participants)
+
+    const { getAllByTestId } = render(ParticipantsRail, { title })
 
     await waitFor(async () => {
       await fireEvent.click(getAllByTestId('participant')[0])
@@ -36,4 +54,16 @@ describe('ParticipantsRail.svelte', () => {
 
     expect(openModal).toHaveBeenCalledWith({ event: expect.any(Object), type: 'participant', data: participants[0] })
   })
+
+  it('Should fire track event on click of participant', async () => {
+    vi.mocked(fetchParticipantsForTitle).mockResolvedValueOnce(participants)
+
+    const { getAllByTestId } = render(ParticipantsRail, { title })
+
+    await waitFor(async () => {
+      await fireEvent.click(getAllByTestId('participant')[0])
+    })
+
+    expect(track).toHaveBeenCalledWith(TrackingEvent.ParticipantClick, null, { title_source: title.original_title, participant: participants[0].name })
+  })
 })

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

@@ -0,0 +1,26 @@
+import { render } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import { title } from '$lib/fakeData'
+import SimilarRail from '../../../../routes/components/Rails/SimilarRail.svelte'
+import { fetchSimilarTitles } from '$lib/api/titles'
+
+vi.mock('$lib/modal', () => ({
+  openModal: vi.fn(),
+}))
+
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+vi.mock('$lib/api/titles', () => ({
+  fetchSimilarTitles: vi.fn(),
+}))
+
+describe('ParticipantsRail.svelte', () => {
+  it('Should fetch titles', async () => {
+    render(SimilarRail, { title })
+
+    expect(fetchSimilarTitles).toHaveBeenCalledWith(title)
+  })
+})

package/src/tests/routes/components/Title.test.js

@@ -3,11 +3,21 @@ import { describe, expect, it, vi, beforeEach } from 'vitest'
 
 import Title from '../../../routes/components/Title.svelte'
 import { title } from '$lib/fakeData'
+import { fetchParticipantsForTitle } from '$lib/api/participants'
+import { fetchSimilarTitles } from '$lib/api/titles'
 
 vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
 }))
 
+vi.mock('$lib/api/participants', () => ({
+  fetchParticipantsForTitle: vi.fn(),
+}))
+
+vi.mock('$lib/api/titles', () => ({
+  fetchSimilarTitles: vi.fn(),
+}))
+
 vi.mock('svelte', async (importActual) => ({
   ...(await importActual()),
   getContext: vi.fn(),
@@ -74,4 +84,11 @@ describe('Title.svelte', () => {
 
     expect(container.querySelector('.paragraph')).not.toBeTruthy()
   })
+
+  it('Should call fetches for participants and similar titles', () => {
+    render(Title, { title })
+
+    expect(fetchParticipantsForTitle).toHaveBeenCalled()
+    expect(fetchSimilarTitles).toHaveBeenCalled()
+  })
 })

package/src/tests/routes/components/TitleModal.test.js

@@ -15,6 +15,14 @@ vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
 }))
 
+vi.mock('$lib/api/participants', () => ({
+  fetchParticipantsForTitle: vi.fn(),
+}))
+
+vi.mock('$lib/api/titles', () => ({
+  fetchSimilarTitles: vi.fn(),
+}))
+
 describe('TitleModal.svelte', () => {
   beforeEach(() => {
     vi.resetAllMocks()
@@ -25,16 +33,14 @@ describe('TitleModal.svelte', () => {
     vi.useRealTimers()
   })
 
-  const onclose = vi.fn()
-
   it('Should call track function when rendered', () => {
-    render(TitleModal, { onclose, title })
+    render(TitleModal, { title })
 
     expect(track).toHaveBeenCalledWith(TrackingEvent.TitleModalView, title)
   })
 
   it('Should call track function when scrolled', async () => {
-    const { getByRole } = render(TitleModal, { onclose, title })
+    const { getByRole } = render(TitleModal, { title })
 
     await fireEvent.scroll(getByRole('dialog'))
 
@@ -44,7 +50,7 @@ describe('TitleModal.svelte', () => {
   it('Should call track function with time_spent when destroyed', async () => {
     vi.useFakeTimers()
 
-    const { unmount } = render(TitleModal, { onclose, title })
+    const { unmount } = render(TitleModal, { title })
 
     vi.advanceTimersByTime(200)
     unmount()
@@ -56,7 +62,7 @@ describe('TitleModal.svelte', () => {
     // @ts-ignore
     window.PlayPilotLinkInjections = { ads: [{ campaign_format: 'top_scroll', content: {}, cta: {} }] }
 
-    const { container } = render(TitleModal, { onclose, title })
+    const { container } = render(TitleModal, { title })
 
     expect(container.querySelector('.top-scroll')).toBeTruthy()
   })
@@ -65,7 +71,7 @@ describe('TitleModal.svelte', () => {
     // @ts-ignore
     window.PlayPilotLinkInjections = { ads: null }
 
-    const { container } = render(TitleModal, { onclose, title })
+    const { container } = render(TitleModal, { title })
 
     expect(container.querySelector('.top-scroll')).not.toBeTruthy()
   })
@@ -74,7 +80,7 @@ describe('TitleModal.svelte', () => {
     // @ts-ignore
     window.PlayPilotLinkInjections = { ads: [{ campaign_format: 'card', content: {}, cta: {} }] }
 
-    const { container } = render(TitleModal, { onclose, title })
+    const { container } = render(TitleModal, { title })
 
     expect(container.querySelector('.display')).toBeTruthy()
   })
@@ -83,7 +89,7 @@ describe('TitleModal.svelte', () => {
     // @ts-ignore
     window.PlayPilotLinkInjections = { ads: null }
 
-    const { container } = render(TitleModal, { onclose, title })
+    const { container } = render(TitleModal, { title })
 
     expect(container.querySelector('.display')).not.toBeTruthy()
   })

package/src/tests/routes/components/TitlePopover.test.js

@@ -15,6 +15,14 @@ vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
 }))
 
+vi.mock('$lib/api/participants', () => ({
+  fetchParticipantsForTitle: vi.fn(),
+}))
+
+vi.mock('$lib/api/titles', () => ({
+  fetchSimilarTitles: vi.fn(),
+}))
+
 describe('TitlePopover.svelte', () => {
   beforeEach(() => {
     vi.resetAllMocks()