@playpilot/tpi 8.29.0-beta.1 → 8.29.0-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.29.0-beta.1",
+	"version": "8.29.0-beta.10",
 	"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,11 @@ export async function fetchParticipantsForTitle(title: TitleData): Promise<Parti
 
   return response.results
 }
+
+export async function fetchParticipantBySid(sid: string): Promise<ParticipantData> {
+  const participant = await api<ParticipantData>(`/participants/${sid}?api-token=${getApiToken()}`)
+
+  if (!participant) throw new Error('No participant was returned for sid: ' + sid)
+
+  return participant
+}

package/src/lib/injection.ts

@@ -5,8 +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 { encodeHtmlEntities } from './html'
 
 export const keyDataAttribute = 'data-playpilot-injection-key'
 export const keySelector = `[${keyDataAttribute}]`
@@ -31,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++
 
@@ -84,9 +83,21 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
       // We insert the html here separately from below, where it's done with replacementIndex because we need to capture all html
       // that may have been inside of the match.
       if (replacementIndex === -1) {
-        const match = findShortestMatchBetweenPhrases(element.innerHTML, injection.title, phrase_before || '', phrase_after || '')
+        let match = findShortestMatchBetweenPhrases(element.innerHTML, injection.title, phrase_before || '', phrase_after || '')
 
         if (match) {
+          // This is a crude way of checking if a match contains HTML elements
+          // If the title is directly inside of an element we discard the rest.
+          // This happens sometimes in lists that consists of nothing but titles and may contain special characters
+          if (match.match.includes(">") && match.match.includes("<")) {
+            const encodedTitle = encodeHtmlEntities(injection.title)
+            const matchInsideHTMLIndex = match.match.search(new RegExp(`>\s*${encodedTitle}\s*<`)) + 1
+
+            if (matchInsideHTMLIndex > 0) {
+              match = { match: match.match.slice(matchInsideHTMLIndex, matchInsideHTMLIndex + encodedTitle.length), index: matchInsideHTMLIndex }
+            }
+          }
+
           const { leadingSpaces, trailingSpaces } = getNumberOfLeadingAndTrailingSpaces(match.match)
 
           linkElement.innerHTML = match.match.trim()
@@ -205,15 +216,17 @@ function createLinkInjectionElement(injection: LinkInjection): { injectionElemen
 
   const openInExplore = !!window.PlayPilotLinkInjections?.config?.open_tpi_links_in_explore
 
-  const href = openInExplore ? exploreTitleUrl(injection.title_details!) : titleUrl(injection.title_details!)
+  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.dataset.playpilotPosterUrl = injection.title_details?.standing_poster
   linkElement.innerText = injection.title
   linkElement.href = href
   linkElement.target = openInExplore ? '' : '_blank'
   linkElement.rel = 'noopener nofollow noreferrer'
 
+  if (injection.type === 'title') linkElement.dataset.playpilotPosterUrl = injection.title_details?.standing_poster
+
   injectionElement.insertAdjacentElement('beforeend', linkElement)
 
   return { injectionElement, linkElement }

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
 }

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,9 +1,10 @@
 <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 } from '$lib/modal'
+  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'
@@ -20,20 +21,27 @@
 
     if (!sid) return
 
-    const isMobile = window.innerWidth < mobileBreakpoint
-    const isInReelSplitTest = isMobile && getSplitTestVariantName(SplitTest.Reels) === 'Reel'
-    const type = isMobile && isInReelSplitTest ? 'titles-reel' : 'titles-rail'
+    let type: ModalType = sid.startsWith('pr') ? 'participant' : 'title' // Sids with with `pr` for participants, `ti` for titles
+    let data: any = null
 
-    if (isMobile) trackSplitTestView(SplitTest.Reels)
+    if (type === 'title') {
+      const isMobile = window.innerWidth < mobileBreakpoint
+      const isInReelSplitTest = isMobile && getSplitTestVariantName(SplitTest.Reels) === 'Reel'
 
-    const [title, railTitles] = (await Promise.allSettled([
-      fetchTitleBySid(sid),
-      fetchSimilarTitles({ sid } as unknown as TitleData)])
-    ).map(promise => (promise.status === 'fulfilled' ? promise.value : null))
+      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: [(title as TitleData), ...(railTitles as TitleData[])],
+      data,
       props: {
         onclose: () => navigate('home'),
         pushState: false,

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/Participants/Participant.svelte

@@ -107,6 +107,7 @@
     }
 
     &.small {
+      --participant-image-size: #{margin(6)};
       padding: margin(1);
     }
   }

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/injection.test.js

@@ -867,6 +867,26 @@ describe('injection.ts', () => {
       expect(document.querySelectorAll('a')).toHaveLength(4)
     })
 
+    it('Should properly inject into lists of titles that contain special characters', () => {
+      document.body.innerHTML = `<section>
+          <ul>
+            <li>Daisy Jones & The Six</li>
+            <li>Love & Death</li>
+          </ul>
+        </section>
+      `
+
+      const elements = getLinkInjectionElements(/** @type {HTMLElement} */ (document.querySelector('section')))
+      const injections = [
+        generateInjection('Daisy Jones & The Six', 'Daisy Jones & The Six'),
+        generateInjection('Love & Death', 'Love & Death'),
+      ]
+
+      injectLinksInDocument(elements, { aiInjections: [], manualInjections: injections })
+
+      expect(document.querySelectorAll('a')).toHaveLength(2)
+    })
+
     it('Should properly inject into titles that are split up by multiple elements when phrase_before and phrase_after are given', () => {
       document.body.innerHTML = '<section>Some text with a <strong>phra</strong><strong>se</strong> in it</section>'
 

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}`)
     })
   })
 })