@playpilot/tpi 8.14.0-beta.1 → 8.14.0-beta.3

package/package.json

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

package/src/lib/api/titles.ts

@@ -33,7 +33,7 @@ export async function fetchTitleBySid(sid: string): Promise<TitleData> {
 
   const title = data.results[0]
 
-  if (!title) throw new Error('No title was returned')
+  if (!title) throw new Error('No title was returned for sid: ' + sid)
 
   return title
 }

package/src/lib/injection.ts

@@ -5,6 +5,7 @@ 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'
 
 export const keyDataAttribute = 'data-playpilot-injection-key'
 export const keySelector = `[${keyDataAttribute}]`
@@ -199,11 +200,15 @@ function createLinkInjectionElement(injection: LinkInjection): { injectionElemen
   const injectionElement = document.createElement('span')
   injectionElement.dataset.playpilotInjectionKey = injection.key
 
+  const openInExplore = !!window.PlayPilotLinkInjections?.config?.open_tpi_links_in_explore
+
+  const href = openInExplore ? exploreTitleUrl(injection.title_details!) : titleUrl(injection.title_details!)
+
   const linkElement = document.createElement('a')
   linkElement.dataset.playpilotPosterUrl = injection.title_details?.standing_poster
   linkElement.innerText = injection.title
-  linkElement.href = injection.playpilot_url
-  linkElement.target = '_blank'
+  linkElement.href = href
+  linkElement.target = openInExplore ? '' : '_blank'
   linkElement.rel = 'noopener nofollow noreferrer'
 
   injectionElement.insertAdjacentElement('beforeend', linkElement)
@@ -308,7 +313,12 @@ function addCSSVariablesToLinks(): void {
 
 function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
   window.addEventListener('mousemove', destroyLinkPopoverOnMouseleave)
-  window.addEventListener('click', (event) => openModalForInjectedLink(event, injections))
+
+  window.addEventListener('click', (event) => {
+    if (window.PlayPilotLinkInjections?.config?.open_tpi_links_in_explore) return
+
+    openModalForInjectedLink(event, injections)
+  })
 
   const createdInjectionElements = document.querySelectorAll<HTMLElement>(keySelector)
 

package/src/lib/routes.ts

@@ -4,3 +4,11 @@ import type { TitleData } from './types/title'
 export function titleUrl(title: TitleData): string {
   return `${playPilotBaseUrl}/${title.type}/${title.slug}/`
 }
+
+export function exploreTitleUrl(title: TitleData): string {
+  if (localStorage.getItem('tpi-open-explore-as-modal') === 'true') {
+    return window.PlayPilotLinkInjections?.config?.explore_navigation_path + `?route=modal&sid=${title.sid}`
+  }
+
+  return window.PlayPilotLinkInjections?.config?.explore_navigation_path + `?route=title&sid=${title.sid}`
+}

package/src/lib/types/config.d.ts

@@ -97,6 +97,11 @@ export type ConfigResponse = {
   in_text_disclaimer_selector?: string
   in_text_disclaimer_insert_position?: InsertPosition
 
+  /**
+   * Open TPI links in explore rather than in modals in the article
+   */
+  open_tpi_links_in_explore?: boolean
+
   /**
    * These options are all relevant for the Explore component, which can be inserted as a widget on any page or as a modal.
    * `explore_navigation_selector` is used to select the navigation element that should be copied and inserted _after_.

package/src/routes/components/Debugger.svelte

@@ -226,6 +226,11 @@
 
     <hr />
 
+    <button onclick={() => { localStorage.setItem('tpi-open-explore-as-modal', 'true'); onrerender() }}>Open links as modal in explore</button>
+    <button onclick={() => { localStorage.setItem('tpi-open-explore-as-modal', 'false'); onrerender() }}>Open links as separate page in explore</button>
+
+    <hr />
+
     <button onclick={() => shown = false}>Close</button>
   </div>
 {/if}

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

@@ -8,6 +8,9 @@
   import ExploreResults from './Routes/ExploreResults.svelte'
   import ExploreLayout from './ExploreLayout.svelte'
   import ExploreTitle from './Routes/ExploreTitle.svelte'
+  import { fetchSimilarTitles, fetchTitleBySid } from '$lib/api/titles'
+  import { openModal } from '$lib/modal'
+  import type { TitleData } from '$lib/types/title'
 
   const routes: ExploreRoute[] = [
     {
@@ -36,30 +39,58 @@
 
   const CurrentRouteComponent = $derived(currentRoute.component)
 
+  if (initialRouteKey === 'modal') openModalViaRoute()
+
   $effect(() => {
     if (searchQuery) currentRoute = routes.find(route => route.key === 'results')!
   })
 
-  function navigate(key: string): void {
+  function navigate(key: string, pushState: boolean = true): void {
     currentRoute = routes.find(route => route.key === key) || routes[0]
 
     const currentUrl = new URL(document.location.toString())
 
+    if (key !== 'title' && key !== 'modal') currentUrl.searchParams.delete('sid')
+
     if (key === routes[0].key) currentUrl.searchParams.delete('route')
     else currentUrl.searchParams.set('route', currentRoute.key)
 
-    history.pushState({}, '', currentUrl)
+    if (pushState) {
+      history.pushState({}, '', currentUrl)
+      console.log('navigate push state')
+    }
 
     track(TrackingEvent.ExploreNavigate, null, { route: currentRoute.key })
   }
 
   function onhashchange(): void {
-    navigate(getCurrentRouteParam())
+    navigate(getCurrentRouteParam(), false)
   }
 
   function getCurrentRouteParam(): string {
     return new URL(document.location.toString()).searchParams.get('route') || routes[0].key
   }
+
+  // This is temporary while testing, please clean me up later
+  async function openModalViaRoute(): Promise<void> {
+    const currentUrl = new URL(document.location.toString())
+    const sid = currentUrl.searchParams.get('sid')
+
+    if (!sid) return
+
+    const [title, railTitles] = (await Promise.allSettled([
+      fetchTitleBySid(sid),
+      fetchSimilarTitles({ sid } as unknown as TitleData)])
+    ).map(promise => (promise.status === 'fulfilled' ? promise.value : null))
+
+    openModal({
+      type: 'titles-rail',
+      data: [(title as TitleData), ...(railTitles as TitleData[])],
+      props: {
+        onclose: () => navigate('home'),
+      },
+    })
+  }
 </script>
 
 <svelte:window on:popstate={onhashchange} />

package/src/routes/components/Modals/RailModal.svelte

@@ -12,13 +12,16 @@
     items: Record<string, any>[]
     initialIndex?: number
     onchange?: (index: number) => void
+    onclose?: () => void
     each: Snippet<[item: any, currentIndex: number]>
   }
 
-  const { items, initialIndex = 0, onchange = () => null, each }: Props = $props()
+  const { items, initialIndex = 0, onchange = () => null, onclose = () => null, each }: Props = $props()
 
   const transitionDuration = 300
 
+  console.log({onclose})
+
   let slider: TinySlider
   let initialized = $state(false)
 
@@ -35,7 +38,7 @@
   }
 </script>
 
-<Modal blur>
+<Modal blur {onclose}>
   {#snippet dialog()}
     <div class="rail-modal" style:--transition-duration="{transitionDuration}ms">
       <TinySlider threshold={40} moveThreshold={40} transitionDuration={initialized ? transitionDuration : 0} bind:this={slider}>
@@ -70,7 +73,7 @@
     </div>
 
     <div class="close" transition:scale|global>
-      <RoundButton size="42px" onclick={() => destroyAllModals()} aria-label="Close">
+      <RoundButton size="42px" onclick={() => { onclose(); destroyAllModals() }} aria-label="Close">
         <IconClose size={24} />
       </RoundButton>
     </div>

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

@@ -6,6 +6,7 @@ import { mount, unmount } from 'svelte'
 import { fakeFetch, generateInjection } from '../helpers'
 import { openModalForInjectedLink } from '$lib/modal'
 import { getLinkInjectionElements } from '$lib/injectionElements'
+import { titleUrl } from '$lib/routes'
 
 vi.mock('svelte', () => ({
   mount: vi.fn(),
@@ -64,8 +65,9 @@ describe('injection.ts', () => {
 
       const link = /** @type {HTMLAnchorElement} */ (document.querySelector('a'))
 
+      // @ts-ignore
+      expect(link.href).toBe(titleUrl(injection.title_details))
       expect(link.innerText).toBe(injection.title)
-      expect(link.href).toBe(injection.playpilot_url)
     })
 
     it('Should replace given words as expected when more than 1 injection per sentence is present', () => {
@@ -83,11 +85,13 @@ describe('injection.ts', () => {
 
       const links = /** @type {HTMLAnchorElement[]} */ (Array.from(document.querySelectorAll('a')))
 
+      // @ts-ignore
+      expect(links[0].href).toBe(titleUrl(linkInjections[0].title_details))
       expect(links[0].innerText).toBe(linkInjections[0].title)
-      expect(links[0].href).toBe(linkInjections[0].playpilot_url)
 
+      // @ts-ignore
+      expect(links[1].href).toBe(titleUrl(linkInjections[1].title_details))
       expect(links[1].innerText).toBe(linkInjections[1].title)
-      expect(links[1].href).toBe(linkInjections[1].playpilot_url)
     })
 
     it('Should ignore injections that are marked as inactive', () => {
@@ -946,6 +950,43 @@ describe('injection.ts', () => {
 
       expect(document.querySelector('a')?.closest('[data-playpilot-injection-key]')).toBeTruthy()
     })
+
+    describe('config.open_tpi_links_in_explore', () => {
+      beforeEach(() => {
+        window.PlayPilotLinkInjections.config = {
+          open_tpi_links_in_explore: true,
+          explore_navigation_path: 'https://some-path.com/explore',
+        }
+      })
+
+      it('Should use href with explore links if open_tpi_links_in_explore is true', () => {
+        const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+
+        document.body.innerHTML = `<p>${injection.sentence}</p>`
+
+        const elements = Array.from(document.querySelectorAll('p'))
+
+        injectLinksInDocument(elements, { aiInjections: [injection], manualInjections: [] })
+
+        const link = /** @type {HTMLAnchorElement} */ (document.querySelector('a'))
+        expect(link.href).toBe(window.PlayPilotLinkInjections.config.explore_navigation_path + `?route=title&sid=${injection.title_details?.sid}`)
+        expect(link.target).not.toBeTruthy()
+      })
+
+      it('Should not open modal when link is clicked when open_tpi_links_in_explore is true', async () => {
+        document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
+
+        const elements = Array.from(document.body.querySelectorAll('p'))
+        const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+
+        injectLinksInDocument(elements, { aiInjections: [injection], manualInjections: [] })
+
+        const link = /** @type {HTMLAnchorElement} */ (document.querySelector('a'))
+        await fireEvent.click(link)
+
+        expect(openModalForInjectedLink).not.toHaveBeenCalled()
+      })
+    })
   })
 
   describe('clearLinkInjections', () => {

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

@@ -1,9 +1,10 @@
 import { describe, it, expect } from 'vitest'
-import { titleUrl } from '$lib/routes'
+import { exploreTitleUrl, titleUrl } from '$lib/routes'
 import { playPilotBaseUrl } from '$lib/constants'
+import { title } from '$lib/fakeData'
 
 describe('$lib/routes', () => {
-  describe('mergePlaylinks', () => {
+  describe('titleUrl', () => {
     it('Should return url for given title', () => {
       // @ts-ignore
       expect(titleUrl({ type: 'series', slug: 'some-slug' })).toBe(`${playPilotBaseUrl}/series/some-slug/`)
@@ -12,4 +13,15 @@ describe('$lib/routes', () => {
       expect(titleUrl({ type: 'movie', slug: 'some-other-slug' })).toBe(`${playPilotBaseUrl}/movie/some-other-slug/`)
     })
   })
+
+  describe('exploreTitleUrl', () => {
+    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=title&sid=${title.sid}`)
+    })
+  })
 })