@playpilot/tpi 8.15.0 → 8.15.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.15.0",
+	"version": "8.15.2",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
@@ -16,7 +16,7 @@
 		"release": "node release.js"
 	},
 	"devDependencies": {
-		"@playpilot/retargeting-tracking": "^0.1.0",
+		"@playpilot/retargeting-tracking": "^1.0.0",
 		"@sveltejs/adapter-auto": "^7.0.1",
 		"@sveltejs/kit": "^2.56.1",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",

package/src/lib/modal.ts

@@ -6,7 +6,6 @@ import type { ParticipantData } from './types/participant'
 import { mobileBreakpoint } from './constants'
 import TitleModal from '../routes/components/Modals/TitleModal.svelte'
 import ParticipantModal from '../routes/components/Modals/ParticipantModal.svelte'
-import ExploreModal from '../routes/components/Modals/ExploreModal.svelte'
 import { getPlayPilotWrapperElement, keyDataAttribute, keySelector } from './injection'
 import { playFallbackViewTransition } from './viewTransition'
 import { destroyLinkPopover } from './popover'
@@ -16,7 +15,7 @@ import TitlesRailModal from '../routes/components/Modals/TitlesRailModal.svelte'
 type Modal = {
   injection?: LinkInjection | null
   component?: object
-  type: 'title' | 'participant' | 'explore' | 'titles-rail'
+  type: 'title' | 'participant' | 'titles-rail'
   data: TitleData | TitleData[] | ParticipantData | null
   scrollPosition?: number
 }
@@ -52,7 +51,6 @@ function getModalComponentByType(
   { type = 'title', target, data, props = {} }:
   { type: Modal['type'], target: Element, data: Modal['data'], props?: Record<string, any> }): ReturnType<typeof mount> {
   if (type === 'participant') return mount(ParticipantModal, { target, props: { participant: data as ParticipantData, ...props  } })
-  if (type === 'explore') return mount(ExploreModal, { target, props: { ...props  } })
   if (type === 'titles-rail') return mount(TitlesRailModal, { target, props: { titles: data as TitleData[], ...props } })
   return mount(TitleModal, { target, props: { title: data as TitleData, ...props } })
 }

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 { titleUrl } from '$lib/routes'
+  import { exploreTitleUrl, titleUrl } from '$lib/routes'
   import { generateRandomHash } from '$lib/hash'
   import { getFirstTitleWithAvailableTrailer } from '$lib/trailer'
   import { useExploreRouter } from '$lib/explore'
@@ -19,6 +19,7 @@
     size?: 'small' | 'large' | 'huge' | 'flexible'
     aside?: boolean,
     expandable?: boolean,
+    navigateToExplore?: boolean,
     expandedTitle?: TitleData | null,
     expandedRailKey?: string | null,
     onclick?: (title: TitleData) => void,
@@ -32,6 +33,7 @@
     size = 'small',
     aside = false,
     expandable = false,
+    navigateToExplore = false,
     expandedTitle = $bindable(null),
     expandedRailKey = $bindable(null),
     onclick = () => null,
@@ -80,14 +82,19 @@
 
     if (!event) return
 
+    embed?.toggleMute(true)
+    onclick(title)
+
+    if (navigateToExplore) {
+      window.location.href = exploreTitleUrl(title)
+      return
+    }
+
     if (useExploreRouter()) {
       openModal({ event, type: 'titles-rail', data: titles as TitleData[], returnToTitle, props: { initialIndex: index } })
     } else {
       openModal({ event, data: title, returnToTitle })
     }
-
-    embed?.toggleMute(true)
-    onclick(title)
   }
 
   async function expandFirstAvailableTrailer(): Promise<void> {
@@ -167,7 +174,7 @@
         onresize={() => slider?.reposition()}>
         {#each titles as title, index}
           {@const expanded = isExpanded(title)}
-          {@const href = titleUrl(title)}
+          {@const href = navigateToExplore ? exploreTitleUrl(title) : titleUrl(title)}
           {@const onclick = (event: MouseEvent): void => openTitle(event, titles, index)}
 
           <div class="title" class:expanded data-testid="title">

package/src/routes/components/Widgets/InjectionsWidgetRail.svelte

@@ -35,7 +35,11 @@
 
 {#if titles.length}
   <div class="widget" bind:this={element} data-testid="widget">
-    <TitlesRail {titles} {heading} onclick={(title) => track(TrackingEvent.WidgetArticleRailTitleClick, title)} />
+    <TitlesRail
+      {titles}
+      {heading}
+      navigateToExplore={!!window.PlayPilotLinkInjections?.config?.open_tpi_links_in_explore}
+      onclick={(title) => track(TrackingEvent.WidgetArticleRailTitleClick, title)} />
   </div>
 {/if}
 

package/src/routes/elements/+page.svelte

@@ -197,10 +197,6 @@
     {/key}
   </div>
 
-  <div class="item">
-    <button onclick={() => openModal({ type: 'explore' })}>Show explore modal</button>
-  </div>
-
   <div class="item">
     <button onclick={insertExplore}>Insert explore component</button>
     <button onclick={insertExploreIntoNavigation}>Insert explore into navigation</button>

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

@@ -969,7 +969,7 @@ describe('injection.ts', () => {
         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.href).toBe(window.PlayPilotLinkInjections.config.explore_navigation_path + `?route=modal&sid=${injection.title_details?.sid}`)
         expect(link.target).not.toBeTruthy()
       })
 

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

@@ -21,7 +21,7 @@ describe('$lib/routes', () => {
         explore_navigation_path: 'https://some-path.com/explore',
       }
 
-      expect(exploreTitleUrl(title)).toBe(`https://some-path.com/explore?route=title&sid=${title.sid}`)
+      expect(exploreTitleUrl(title)).toBe(`https://some-path.com/explore?route=modal&sid=${title.sid}`)
     })
   })
 })

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

@@ -213,4 +213,14 @@ describe('TitlesRail.svelte', () => {
 
     expect(container.querySelector('.titles .slider')).toBeTruthy()
   })
+
+  it('Should navigate to explore page rather than open modal when navigateToExplore is true', async () => {
+    const { getAllByRole } = render(TitlesRail, { titles: [title], navigateToExplore: true })
+
+    await fireEvent.click(getAllByRole('link')[0])
+
+    expect(getAllByRole('link')[0].getAttribute('href')).toContain(`?route=modal&sid=${title.sid}`)
+    expect(window.location.href).toContain(`?route=modal&sid=${title.sid}`)
+    expect(openModal).not.toHaveBeenCalledWith()
+  })
 })

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

@@ -1,23 +0,0 @@
-
-<script lang="ts">
-  import Modal from './Modal.svelte'
-  import ExploreRouter from '../Explore/ExploreRouter.svelte'
-
-  interface Props {
-    initialScrollPosition?: number
-  }
-
-  const { initialScrollPosition = 0 }: Props = $props()
-</script>
-
-<Modal {initialScrollPosition} closeButtonStyle="flat" wide>
-  <div class="content">
-    <ExploreRouter />
-  </div>
-</Modal>
-
-<style lang="scss">
-  .content {
-    padding-top: margin(2);
-  }
-</style>