@playpilot/tpi 8.29.0-beta.4 → 8.29.0-beta.6

package/package.json

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

package/src/lib/api/participants.ts

@@ -1,3 +1,4 @@
+import { participants } from '$lib/fakeData'
 import { getLanguage } from '$lib/language'
 import { getApiToken } from '$lib/token'
 import type { ParticipantData } from '$lib/types/participant'
@@ -25,3 +26,17 @@ export async function fetchParticipantsForTitle(title: TitleData): Promise<Parti
 
   return response.results
 }
+
+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]
+
+  if (!participant) throw new Error('No participant was returned for sid: ' + sid)
+
+  return participant
+}

package/src/lib/injection.ts

@@ -5,9 +5,9 @@ import { destroyAllModals, openModalForInjectedLink } from './modal'
 import { clearCurrentlyHoveredInjection, destroyLinkPopover, destroyLinkPopoverOnMouseleave, isPopoverActive, openPopoverForInjectedLink } from './popover'
 import { clearAfterArticlePlaylinks, insertAfterArticlePlaylinks } from './afterArticle'
 import { clearInTextDisclaimer, insertInTextDisclaimer } from './disclaimer'
-import { exploreTitleUrl, titleUrl } from './routes'
+import { exploreModalUrl, participantUrl, titleUrl } from './routes'
 import { clearInTextWidgets, insertInTextWidgets } from './inTextWidgets'
-import { decodeHtmlEntities, encodeHtmlEntities } from './html'
+import { encodeHtmlEntities } from './html'
 
 export const keyDataAttribute = 'data-playpilot-injection-key'
 export const keySelector = `[${keyDataAttribute}]`
@@ -32,9 +32,7 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
 
   const failedMessages: Record<string, string> = {}
 
-  // Start at -1 so that we can add +1 right at the top of the loop, making it start at 0.
-  // This index is used in Option 3 below.
-  let injectionIndex = -1
+  let injectionIndex = -1 // This index is used in Option 3 below.
   for (const injection of sortInjections(foundInjections)) {
     injectionIndex++
 
@@ -218,10 +216,8 @@ function createLinkInjectionElement(injection: LinkInjection): { injectionElemen
 
   const openInExplore = !!window.PlayPilotLinkInjections?.config?.open_tpi_links_in_explore
 
-  const href =
-    injection.type === 'title' ?
-      openInExplore ? exploreTitleUrl(injection.title_details!) : titleUrl(injection.title_details!) :
-      '' // FIXME: We don't have participant streaming guide pages yet
+  const sid = injection.title_details?.sid || injection.participant_details?.sid
+  const href = openInExplore ? exploreModalUrl(sid!) : (injection.type === 'title' ? titleUrl(injection.title_details!) : participantUrl(injection.participant_details!))
 
   const linkElement = document.createElement('a')
   linkElement.innerText = injection.title

package/src/lib/modal.ts

@@ -13,10 +13,12 @@ import { prefersReducedMotion } from 'svelte/motion'
 import TitlesRailModal from '../routes/components/Modals/TitlesRailModal.svelte'
 import TitlesReelModal from '../routes/components/Modals/TitlesReelModal.svelte'
 
+export type ModalType = 'title' | 'participant' | 'titles-rail' | 'titles-reel'
+
 type Modal = {
   injection?: LinkInjection | null
   component?: object
-  type: 'title' | 'participant' | 'titles-rail' | 'titles-reel'
+  type: ModalType
   data: TitleData | TitleData[] | ParticipantData | null
   scrollPosition?: number
 }
@@ -65,6 +67,8 @@ function addModalToList({ type = 'title', injection = null, data, scrollPosition
 export function closeCurrentModal(outro: boolean = true): void {
   if (!modals.length) return
 
+  console.trace('closeCurrentModal')
+
   saveCurrentModalScrollPosition()
 
   unmount(modals[modals.length - 1].component!, { outro })

package/src/lib/routes.ts

@@ -1,10 +1,15 @@
 import { playPilotBaseUrl } from './constants'
+import type { ParticipantData } from './types/participant'
 import type { TitleData } from './types/title'
 
 export function titleUrl(title: TitleData): string {
   return `${playPilotBaseUrl}/${title.type}/${title.slug}/`
 }
 
-export function exploreTitleUrl(title: TitleData): string {
-  return window.PlayPilotLinkInjections?.config?.explore_navigation_path + `?route=modal&sid=${title.sid}`
+export function participantUrl(participant: ParticipantData): string {
+  return `${playPilotBaseUrl}/name/${participant.sid}/`
+}
+
+export function exploreModalUrl(sid: string): string {
+  return window.PlayPilotLinkInjections?.config?.explore_navigation_path + `?route=modal&sid=${sid}`
 }

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

@@ -1,98 +1,106 @@
-<script lang="ts">
-  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 } 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
-
-    const isMobile = window.innerWidth < mobileBreakpoint
-    const isInReelSplitTest = isMobile && getSplitTestVariantName(SplitTest.Reels) === 'Reel'
-    const type = isMobile && isInReelSplitTest ? 'titles-reel' : 'titles-rail'
-
-    if (isMobile) trackSplitTestView(SplitTest.Reels)
-
-    const [title, railTitles] = (await Promise.allSettled([
-      fetchTitleBySid(sid),
-      fetchSimilarTitles({ sid } as unknown as TitleData)])
-    ).map(promise => (promise.status === 'fulfilled' ? promise.value : null))
-
-    openModal({
-      type,
-      data: [(title as TitleData), ...(railTitles as TitleData[])],
-      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 = 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/Modals/ParticipantModal.svelte

@@ -12,7 +12,7 @@
     initialScrollPosition?: number
   }
 
-  const { participant, initialScrollPosition = 0 }: Props = $props()
+  const { participant, initialScrollPosition = 0, ...restProps }: Props = $props()
 
   let windowWidth = $state(0)
 
@@ -27,6 +27,6 @@
 
 <svelte:window bind:innerWidth={windowWidth} />
 
-<Modal {initialScrollPosition} closeButtonStyle="flat" tall>
+<Modal {initialScrollPosition} {...restProps} closeButtonStyle="flat" tall>
   <Participant {participant} />
 </Modal>

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

@@ -5,7 +5,7 @@
   import Rail from './Rail.svelte'
   import type { TitleData } from '$lib/types/title'
   import { openModal } from '$lib/modal'
-  import { exploreTitleUrl } from '$lib/routes'
+  import { exploreModalUrl } from '$lib/routes'
   import { generateRandomHash } from '$lib/hash'
   import { getFirstTitleWithAvailableTrailer } from '$lib/trailer'
   import { useExploreRouter } from '$lib/explore'
@@ -88,7 +88,7 @@
     onclick(title)
 
     if (navigateToExplore) {
-      window.location.href = exploreTitleUrl(title)
+      window.location.href = exploreModalUrl(title.sid)
       return
     }
 

package/src/tests/lib/routes.test.js

@@ -1,7 +1,7 @@
 import { describe, it, expect } from 'vitest'
-import { exploreTitleUrl, titleUrl } from '$lib/routes'
+import { exploreModalUrl, participantUrl, titleUrl } from '$lib/routes'
 import { playPilotBaseUrl } from '$lib/constants'
-import { title } from '$lib/fakeData'
+import { participants, title } from '$lib/fakeData'
 
 describe('$lib/routes', () => {
   describe('titleUrl', () => {
@@ -14,14 +14,19 @@ describe('$lib/routes', () => {
     })
   })
 
-  describe('exploreTitleUrl', () => {
+  describe('participantUrl', () => {
+    it('Should return url for given title', () => {
+      expect(participantUrl(participants[0])).toBe(`${playPilotBaseUrl}/name/${participants[0].sid}/`)
+    })
+  })
+
+  describe('exploreModalUrl', () => {
     it('Should return url for given title', () => {
       window.PlayPilotLinkInjections.config = {
-        open_tpi_links_in_explore: true,
         explore_navigation_path: 'https://some-path.com/explore',
       }
 
-      expect(exploreTitleUrl(title)).toBe(`https://some-path.com/explore?route=modal&sid=${title.sid}`)
+      expect(exploreModalUrl(title.sid)).toBe(`https://some-path.com/explore?route=modal&sid=${title.sid}`)
     })
   })
 })