@playpilot/tpi 8.29.0-beta.8 → 8.29.1

package/package.json

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

package/src/lib/api/participants.ts

@@ -28,13 +28,7 @@ export async function fetchParticipantsForTitle(title: TitleData): Promise<Parti
 }
 
 export async function fetchParticipantBySid(sid: string): Promise<ParticipantData> {
-  await new Promise(res => setTimeout(res, 200))
-
-  return participants[0]
-
-  const data = await api<{ results: ParticipantData[] }>(`/participants/browse?api-token=${getApiToken()}&sids=${sid}`)
-
-  const participant = data.results[0]
+  const participant = await api<ParticipantData>(`/participants/${sid}?api-token=${getApiToken()}`)
 
   if (!participant) throw new Error('No participant was returned for sid: ' + sid)
 

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

@@ -9,6 +9,9 @@
   import ExploreLayout from './ExploreLayout.svelte'
   import ExploreTitle from './Routes/ExploreTitle.svelte'
   import ExploreModal from './Routes/ExploreModal.svelte'
+  import { setContext } from 'svelte'
+
+  setContext('navigate', navigate)
 
   const routes: ExploreRoute[] = [
     {

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

@@ -1,106 +1,106 @@
-<script lang="ts">
-  import { fetchParticipantBySid } from '$lib/api/participants'
-  import { fetchSimilarTitles, fetchTitleBySid } from '$lib/api/titles'
-  import { mobileBreakpoint } from '$lib/constants'
-  import { SplitTest } from '$lib/enums/SplitTest'
-  import { t } from '$lib/localization'
-  import { openModal, type ModalType } from '$lib/modal'
-  import { getSplitTestVariantName, trackSplitTestView } from '$lib/splitTest'
-  import type { TitleData } from '$lib/types/title'
-  import Modal from '../../Modals/Modal.svelte'
-
-  interface Props {
-    navigate?: (key: string, pushState?: boolean) => void
-  }
-
-  const { navigate = () => null }: Props = $props()
-
-  async function openModalViaRoute(): Promise<void> {
-    const currentUrl = new URL(document.location.toString())
-    const sid = currentUrl.searchParams.get('sid')
-
-    if (!sid) return
-
-    let type: ModalType = sid.startsWith('pr') ? 'participant' : 'title' // Sids with with `pr` for participants, `ti` for titles
-    let data: any = null
-
-    if (type === 'title') {
-      const isMobile = window.innerWidth < mobileBreakpoint
-      const isInReelSplitTest = isMobile && getSplitTestVariantName(SplitTest.Reels) === 'Reel'
-
-      if (isMobile) trackSplitTestView(SplitTest.Reels)
-
-      type = isMobile && isInReelSplitTest ? 'titles-reel' : 'titles-rail'
-
-      const [title, railTitles] = (await Promise.allSettled([fetchTitleBySid(sid), fetchSimilarTitles({ sid } as unknown as TitleData)])).map((promise) => promise.status === 'fulfilled' ? promise.value : null)
-
-      data = [title as TitleData, ...(railTitles as TitleData[])]
-    } else if (type === 'participant') {
-      data = await fetchParticipantBySid(sid)
-    }
-
-    openModal({
-      type,
-      data,
-      props: {
-        onclose: () => navigate('home'),
-        pushState: false,
-      },
-    })
-  }
-</script>
-
-{#await openModalViaRoute()}
-  <Modal blur pushState={false}>
-    {#snippet dialog()}
-      <div class="loading">
-        <div class="bar"></div>
-        <div class="bar"></div>
-        <div class="bar"></div>
-      </div>
-    {/snippet}
-  </Modal>
-{:catch}
-  <Modal blur onclose={() => navigate('home')} pushState={false}>
-    <div class="error">
-      {t('An Error Occurred')}
-    </div>
-  </Modal>
-{/await}
-
-<style lang="scss">
-  .loading {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    gap: margin(0.5);
-  }
-
-  @keyframes animate-bar {
-    to {
-      height: margin(3);
-      opacity: 0.5;
-    }
-  }
-
-  .bar {
-    height: margin(4);
-    width: margin(1);
-    border-radius: margin(0.25);
-    background: white;
-    animation: animate-bar 750ms infinite;
-
-    @for $i from 0 through 2 {
-      &:nth-child(#{$i}) {
-        animation-delay: $i * 250ms;
-      }
-    }
-  }
-
-  .error {
-    padding: margin(2);
-    font-size: 1.25em;
-    color: theme(text-color);
-  }
-</style>
+<script lang="ts">
+  import { fetchParticipantBySid } from '$lib/api/participants'
+  import { fetchSimilarTitles, fetchTitleBySid } from '$lib/api/titles'
+  import { mobileBreakpoint } from '$lib/constants'
+  import { SplitTest } from '$lib/enums/SplitTest'
+  import { t } from '$lib/localization'
+  import { openModal, type ModalType } from '$lib/modal'
+  import { getSplitTestVariantName, trackSplitTestView } from '$lib/splitTest'
+  import type { TitleData } from '$lib/types/title'
+  import Modal from '../../Modals/Modal.svelte'
+
+  interface Props {
+    navigate?: (key: string, pushState?: boolean) => void
+  }
+
+  const { navigate = () => null }: Props = $props()
+
+  async function openModalViaRoute(): Promise<void> {
+    const currentUrl = new URL(document.location.toString())
+    const sid = currentUrl.searchParams.get('sid')
+
+    if (!sid) return
+
+    let type: ModalType = sid.startsWith('pr') ? 'participant' : 'title' // Sids with with `pr` for participants, `ti` for titles
+    let data: any = null
+
+    if (type === 'title') {
+      const isMobile = window.innerWidth < mobileBreakpoint
+      const isInReelSplitTest = isMobile && getSplitTestVariantName(SplitTest.Reels) === 'Reel'
+
+      if (isMobile) trackSplitTestView(SplitTest.Reels)
+
+      type = isMobile && isInReelSplitTest ? 'titles-reel' : 'titles-rail'
+
+      const [title, railTitles] = (await Promise.allSettled([fetchTitleBySid(sid), fetchSimilarTitles({ sid } as unknown as TitleData)])).map((promise) => promise.status === 'fulfilled' ? promise.value : null)
+
+      data = [title as TitleData, ...(railTitles as TitleData[])]
+    } else if (type === 'participant') {
+      data = await fetchParticipantBySid(sid)
+    }
+
+    openModal({
+      type,
+      data,
+      props: {
+        onclose: () => navigate('home'),
+        pushState: false,
+      },
+    })
+  }
+</script>
+
+{#await openModalViaRoute()}
+  <Modal blur pushState={false}>
+    {#snippet dialog()}
+      <div class="loading">
+        <div class="bar"></div>
+        <div class="bar"></div>
+        <div class="bar"></div>
+      </div>
+    {/snippet}
+  </Modal>
+{:catch}
+  <Modal blur onclose={() => navigate('home')} pushState={false}>
+    <div class="error">
+      {t('An Error Occurred')}
+    </div>
+  </Modal>
+{/await}
+
+<style lang="scss">
+  .loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    gap: margin(0.5);
+  }
+
+  @keyframes animate-bar {
+    to {
+      height: margin(3);
+      opacity: 0.5;
+    }
+  }
+
+  .bar {
+    height: margin(4);
+    width: margin(1);
+    border-radius: margin(0.25);
+    background: white;
+    animation: animate-bar 750ms infinite;
+
+    @for $i from 0 through 2 {
+      &:nth-child(#{$i}) {
+        animation-delay: $i * 250ms;
+      }
+    }
+  }
+
+  .error {
+    padding: margin(2);
+    font-size: 1.25em;
+    color: theme(text-color);
+  }
+</style>

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

@@ -8,8 +8,10 @@
   import { track } from '$lib/tracking'
   import type { ParticipantData } from '$lib/types/participant'
   import type { TitleData } from '$lib/types/title'
+  import { getContext } from 'svelte'
   import ParticipantImage from '../Participants/ParticipantImage.svelte'
   import Rail from './Rail.svelte'
+  import { exploreModalUrl } from '$lib/routes'
 
   interface Props {
     title: TitleData
@@ -18,6 +20,8 @@
 
   const { title, heading = t('Cast') }: Props = $props()
 
+  const navigate: Function | undefined = getContext('navigate')
+
   /**
    * Order participants by how often their name appears in an the page text. This only takes into account
    * their full name. If an actor is mentioned by first name only, which is often the case, they won't get
@@ -42,8 +46,22 @@
   }
 
   function onclick(event: MouseEvent, participant: ParticipantData): void {
-    openModal({ event, type: 'participant', data: participant })
     track(TrackingEvent.ParticipantClick, null, { title_source: title.original_title || title.title, participant: participant.name })
+
+    if (!window.PlayPilotLinkInjections?.config?.open_tpi_links_in_explore) {
+      openModal({ event, type: 'participant', data: participant })
+      return
+    }
+
+    const url = exploreModalUrl(participant.sid)
+
+    if (navigate) {
+      window.history.pushState({}, '', url)
+      navigate('modal')
+      return
+    }
+
+    window.location.href = url
   }
 </script>
 

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

@@ -1,98 +1,122 @@
-import { fireEvent, render, waitFor } from '@testing-library/svelte'
-import { describe, expect, it, vi, beforeEach } from 'vitest'
-
-import ParticipantsRail from '../../../../routes/components/Rails/ParticipantsRail.svelte'
-import { openModal } from '$lib/modal'
-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', () => {
-  beforeEach(() => {
-    document.body.innerHTML = ''
-  })
-
-  it('Should render each given participant', async () => {
-    vi.mocked(fetchParticipantsForTitle).mockResolvedValueOnce(participants)
-
-    const { getByText } = render(ParticipantsRail, { title })
-
-    await waitFor(() => {
-      expect(getByText(participants[0].name)).toBeTruthy()
-      expect(getByText(participants[1].name)).toBeTruthy()
-    })
-  })
-
-  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)
-
-    const { getAllByTestId } = render(ParticipantsRail, { title })
-
-    await waitFor(() => {
-      expect(getAllByTestId('participant')[0].innerText).toContain(participants[2].name)
-      expect(getAllByTestId('participant')[1].innerText).toContain(participants[1].name)
-      expect(getAllByTestId('participant')[2].innerText).toContain(participants[0].name)
-    })
-  })
-
-  it('Should not render when no participants are returned', async () => {
-    vi.mocked(fetchParticipantsForTitle).mockResolvedValueOnce([])
-
-    const { container } = render(ParticipantsRail)
-
-    await waitFor(() => {
-      expect(container.querySelectorAll('.participant').length).toBe(0)
-    })
-  })
-
-  it('Should open modal 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(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 })
-  })
-})
+import { fireEvent, render, waitFor } from '@testing-library/svelte'
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+
+import ParticipantsRail from '../../../../routes/components/Rails/ParticipantsRail.svelte'
+import { openModal } from '$lib/modal'
+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', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+
+    // @ts-ignore
+    window.PlayPilotLinkInjections = {}
+    document.body.innerHTML = ''
+  })
+
+  it('Should render each given participant', async () => {
+    vi.mocked(fetchParticipantsForTitle).mockResolvedValueOnce(participants)
+
+    const { getByText } = render(ParticipantsRail, { title })
+
+    await waitFor(() => {
+      expect(getByText(participants[0].name)).toBeTruthy()
+      expect(getByText(participants[1].name)).toBeTruthy()
+    })
+  })
+
+  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)
+
+    const { getAllByTestId } = render(ParticipantsRail, { title })
+
+    await waitFor(() => {
+      expect(getAllByTestId('participant')[0].innerText).toContain(participants[2].name)
+      expect(getAllByTestId('participant')[1].innerText).toContain(participants[1].name)
+      expect(getAllByTestId('participant')[2].innerText).toContain(participants[0].name)
+    })
+  })
+
+  it('Should not render when no participants are returned', async () => {
+    vi.mocked(fetchParticipantsForTitle).mockResolvedValueOnce([])
+
+    const { container } = render(ParticipantsRail)
+
+    await waitFor(() => {
+      expect(container.querySelectorAll('.participant').length).toBe(0)
+    })
+  })
+
+  it('Should open modal 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(openModal).toHaveBeenCalledWith({ event: expect.any(Object), type: 'participant', data: participants[0] })
+  })
+
+  it('Should not open modal on click if if open_tpi_links_in_explore is true and instead set url', async () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = {
+      config: {
+        open_tpi_links_in_explore: true,
+      },
+    }
+
+    vi.mocked(fetchParticipantsForTitle).mockResolvedValueOnce(participants)
+
+    const { getAllByTestId } = render(ParticipantsRail, { title })
+
+    await waitFor(async () => {
+      await fireEvent.click(getAllByTestId('participant')[0])
+    })
+
+    expect(openModal).not.toHaveBeenCalled()
+    expect(window.location.href).toContain(participants[0].sid)
+  })
+
+  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 })
+  })
+})