@playpilot/tpi 8.13.0-beta.2 → 8.14.0-beta.2

package/events.md

@@ -100,11 +100,6 @@ Event | Action | Info | Payload
 `ali_display_ad_playlink_click` | _Fires any time the playlink linked to the display ad is clicked_ | | `campaign_name`
 `ali_ads_fetch_failed` | _Fires whenever ads tried to but failed to fetch_ | | `status` (Response status code)
 
-## Widgets
-Event | Action | Info | Payload
---- | --- | --- | ---
-`ali_widget_article_rail_title_click` | _Fires when a title in an tpi rail widget is clicked_ | | `Title`
-
 ### Various
 Event | Action | Info | Payload
 --- | --- | --- | ---

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.13.0-beta.2",
+	"version": "8.14.0-beta.2",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
@@ -36,7 +36,7 @@
 		"svelte": "5.44.1",
 		"svelte-check": "^4.0.0",
 		"svelte-preprocess": "^6.0.3",
-		"svelte-tiny-slider": "^2.7.2",
+		"svelte-tiny-slider": "^2.7.1",
 		"typescript": "^5.9.3",
 		"typescript-eslint": "^8.59.2",
 		"vite": "^5.4.21",

package/src/lib/api/titles.ts

@@ -27,3 +27,13 @@ export async function fetchSimilarTitles(title: TitleData): Promise<TitleData[]>
 
   return response.results
 }
+
+export async function fetchTitleBySid(sid: string): Promise<TitleData> {
+  const data = await fetchTitles({ sids: sid })
+
+  const title = data.results[0]
+
+  if (!title) throw new Error('No title was returned for sid: ' + sid)
+
+  return title
+}

package/src/lib/data/translations.ts

@@ -281,10 +281,10 @@ export const translations = {
     [Language.Swedish]: 'Utforska',
     [Language.Danish]: 'Udforsk',
   },
-  'Mentioned In This Article': {
-    [Language.English]: 'Mentioned in this article',
-    [Language.Swedish]: 'Nämnda i den här artikeln',
-    [Language.Danish]: 'Nævnt i denne artikel',
+  'Page Not Found': {
+    [Language.English]: 'Page not found',
+    [Language.Swedish]: 'Sidan hittades inte',
+    [Language.Danish]: 'Siden blev ikke fundet',
   },
 
   // List titles

package/src/lib/enums/TrackingEvent.ts

@@ -55,9 +55,6 @@ export const TrackingEvent = {
   SplitTestView: 'ali_split_test_view',
   SplitTestAction: 'ali_split_test_action',
 
-  // Widgets
-  WidgetArticleRailTitleClick: 'ali_widget_article_rail_title_click',
-
   // Various
   ShareTitle: 'ali_share_title',
   SaveTitle: 'ali_save_title',

package/src/lib/fakeData.ts

@@ -49,7 +49,7 @@ export const linkInjections: LinkInjection[] = [{
   sentence: 'In an interview with Epire Magazine, Quan reveals he quested starring in Love Hurts',
   playpilot_url: 'https://playpilot.com/movie/example/',
   key: 'some-key-1',
-  title_details: { ...title, sid: '1' },
+  title_details: title,
 }, {
   sid: '2',
   title: 'The Long Kiss Goodnight',
@@ -57,7 +57,7 @@ export const linkInjections: LinkInjection[] = [{
   playpilot_url: 'https://playpilot.com/movie/example-2/',
   key: 'some-key-2',
   after_article: false,
-  title_details: { ...title, sid: '2' },
+  title_details: title,
 }, {
   sid: '3',
   title: 'Nobody',
@@ -65,7 +65,7 @@ export const linkInjections: LinkInjection[] = [{
   playpilot_url: 'https://playpilot.com/movie/example-3/',
   key: 'some-key-3',
   after_article: true,
-  title_details: { ...title, sid: '3' },
+  title_details: title,
   manual: false,
 }, {
   sid: '4',

package/src/lib/injection.ts

@@ -5,7 +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 { clearInTextWidgets, insertInTextWidgets } from './inTextWidgets'
+import { exploreTitleUrl, titleUrl } from './routes'
 
 export const keyDataAttribute = 'data-playpilot-injection-key'
 export const keySelector = `[${keyDataAttribute}]`
@@ -169,8 +169,6 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
   // The function itself will decide whether or not it should actually insert the component based on the config.
   if (document.querySelector(keySelector)) insertInTextDisclaimer(elements)
 
-  insertInTextWidgets(foundInjections)
-
   return mergedInjections.filter(i => i.title_details).map((injection, index) => {
     const hasManualEquivalent = !injection.manual && isAvailableAsManualInjection(injection, index, mergedInjections)
     const duplicate = injection.duplicate ?? hasManualEquivalent
@@ -202,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)
@@ -311,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)
 
@@ -336,7 +343,6 @@ export function clearLinkInjections(): void {
 
   clearAfterArticlePlaylinks()
   clearInTextDisclaimer()
-  clearInTextWidgets()
   destroyAllModals(false)
   destroyLinkPopover(false)
 }

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/+layout.svelte

@@ -70,8 +70,6 @@
         <p>De tre ’Jurassic World’-film kunne have givet indtryk af, at der ikke skal meget til, før dinosaurer igen ville kunne dominere kloden. Men det har vist sig ikke at holde stik.</p>
         <p>Het komt elk jaar voor dat films met torenhoge budgetten flink floppen aan de box-office, ongeacht de kwaliteit van de film. Dit is het geval bij een aantal films die dit jaar zijn uitgekomen. Denk aan Mickey 17, Black Bag en de onlangs uitgebrachte animatiefilm Elio. In 2015 was de superheldenfilm Fantastic Four een van de grootste flops.</p>
 
-        <div data-playpilot-widget="tpi-rail"></div>
-
         <h2>A matching link is already present</h2>
         <p>Following their post-credits scene in <a href="/">John Wick</a>, in a new John Wick spinoff.</p>
 

package/src/routes/components/Debugger.svelte

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

package/src/routes/components/Description.svelte

@@ -35,6 +35,7 @@
 <style lang="scss">
   .description:first-child {
     margin: margin(-1) 0 margin(1);
+    max-width: theme(description-max-width, 100%);
   }
 
   .paragraph {

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

@@ -7,6 +7,10 @@
   import ExploreHome from './Routes/ExploreHome.svelte'
   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[] = [
     {
@@ -20,25 +24,77 @@
       key: 'home',
       component: ExploreHome,
     })
+
+    routes.push({
+      key: 'title',
+      component: ExploreTitle,
+    })
   }
 
-  let currentRoute: ExploreRoute = $state(routes[0])
+  const initialRouteKey = getCurrentRouteParam() || routes[0].key
+
+  let currentRoute: ExploreRoute = $state(routes.find(({ key }) => key === initialRouteKey) || routes[0])
   let searchQuery: string = $state('')
   let filter: ExploreFilter = $state({})
 
   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)
+
+    if (pushState) {
+      history.pushState({}, '', currentUrl)
+      console.log('navigate push state')
+    }
+
     track(TrackingEvent.ExploreNavigate, null, { route: currentRoute.key })
   }
+
+  function onhashchange(): void {
+    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} />
+
 <ExploreLayout {navigate} bind:searchQuery bind:filter>
   <CurrentRouteComponent {searchQuery} {filter} {navigate} />
 </ExploreLayout>

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { onDestroy } from 'svelte'
   import { fetchTitles } from '$lib/api/titles'
   import { MetaEvent, TrackingEvent } from '$lib/enums/TrackingEvent'
   import { openModal } from '$lib/modal'
@@ -18,8 +19,7 @@
 
   interface Props {
     searchQuery?: string,
-    filter?: ExploreFilter,
-    navigate?: (key: string) => void
+    filter?: ExploreFilter
   }
 
   const { searchQuery = '', filter = {} }: Props = $props()
@@ -51,6 +51,10 @@
     if (filter) setFilter()
   })
 
+  onDestroy(() => {
+    emptyFilter()
+  })
+
   async function getTitlesForFilter(): Promise<APIPaginatedResult<TitleData>> {
     latestRequestId += 1
     const requestId = latestRequestId
@@ -108,6 +112,12 @@
     promise = getTitlesForFilter()
   }
 
+  function emptyFilter(): void {
+    for (const key of Object.keys(filter)) {
+      delete filter[key]
+    }
+  }
+
   function resetTitles(): void {
     page = 1
     titles = []

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

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import { fetchTitleBySid } from '$lib/api/titles'
+  import { mobileBreakpoint } from '$lib/constants'
+  import { t } from '$lib/localization'
+  import Button from '../../Button.svelte'
+  import IconArrow from '../../Icons/IconArrow.svelte'
+  import Title from '../../Title.svelte'
+
+  interface Props {
+    navigate?: (key: string) => void
+  }
+
+  const { navigate = () => null }: Props = $props()
+
+  let screenWidth = $state(window.innerWidth)
+
+  const isMobile = $derived(screenWidth < mobileBreakpoint)
+  const sid = new URL(document.location.toString()).searchParams.get('sid')
+</script>
+
+<svelte:window bind:innerWidth={screenWidth} />
+
+{#snippet empty()}
+  {@render back()}
+
+  <p class="empty">{t('Page Not Found')}</p>
+{/snippet}
+
+{#snippet back(offset = false)}
+  <div class="back" class:offset>
+    <Button variant="link" onclick={() => { navigate('home') }}>
+      <IconArrow direction="left" />
+      {t('Home')}
+    </Button>
+  </div>
+{/snippet}
+
+{#if sid}
+  {#await fetchTitleBySid(sid)}
+    {@render back()}
+
+    Loading...
+  {:then title}
+    {@render back(true)}
+
+    <div class="title" data-testid="title">
+      <Title {title} useVideoBackground={isMobile} />
+    </div>
+  {:catch}
+    {@render empty()}
+  {/await}
+{:else}
+  {@render empty()}
+{/if}
+
+<style lang="scss">
+  .title {
+    --playpilot-description-max-width: 600px;
+    --playpilot-playlinks-max-width: 600px;
+    position: relative;
+    border-radius: theme(border-radius);
+    overflow: hidden;
+    margin-top: margin(1);
+
+    @include desktop() {
+      --playpilot-detail-header-offset: #{margin(5)};
+      --playpilot-detail-background-height: #{margin(35)};
+      --playpilot-detail-background-opacity: 0.5;
+    }
+  }
+
+  .back {
+    --playpilot-button-text-color: white;
+    font-weight: theme(font-bold);
+
+    &.offset {
+      z-index: 1;
+      position: absolute;
+      margin-left: margin(1);
+      margin-top: margin(1);
+    }
+  }
+
+  .empty {
+    margin-top: margin(1);
+    padding: margin(1);
+    border: 1px solid theme(content);
+    max-width: margin(20);
+    border-radius: theme(border-radius);
+    font-size: theme(font-size-large);
+    font-weight: theme(font-bold);
+    color: theme(text-color);
+  }
+</style>

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/routes/components/Playlinks/Playlinks.svelte

@@ -123,6 +123,7 @@
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(margin(15), 1fr));
     gap: margin(0.5);
+    max-width: theme(playlinks-max-width, 100%);
 
     &.list {
       grid-template-columns: 1fr;

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

@@ -58,15 +58,15 @@
   .rail {
     --gap: var(--rail-gap, #{margin(0.5)});
     position: relative;
-    width: calc(100% + var(--rail-margin, margin(1)) * 2);
-    margin: 0 calc(var(--rail-margin, margin(1)) * -1);
+    width: calc(100% + margin(2));
+    margin: 0 margin(-1);
 
     :global(.slider) {
-      padding: 0 var(--rail-margin, margin(1));
+      padding: 0 margin(1);
     }
 
     :global(.slider-content > :last-child) {
-      margin-right: calc(var(--rail-margin, margin(1)) * 2);
+      margin-right: margin(2);
     }
   }
 

package/src/routes/components/Title.svelte

@@ -135,7 +135,7 @@
 
   .content {
     position: relative;
-    padding: margin(1);
+    padding: theme(detail-padding, margin(1));
     color: theme(detail-text-color, text-color);
     font-family: theme(detail-font-family, font-family);
     font-weight: theme(detail-font-weight, normal);
@@ -172,7 +172,7 @@
 
     @include desktop {
       display: block;
-      padding-top: margin(3);
+      padding-top: theme(title-header-offset, margin(3));
     }
 
     .small & {
@@ -217,6 +217,11 @@
     }
   }
 
+  .main {
+    z-index: 1;
+    position: relative;
+  }
+
   .imdb {
     display: flex;
     align-items: center;
@@ -234,6 +239,8 @@
   }
 
   .actions {
+    z-index: 1;
+    position: relative;
     grid-area: actions;
     display: flex;
     gap: margin(0.5);
@@ -245,14 +252,15 @@
     top: 0;
     left: 0;
     width: 100%;
-    height: margin(20);
+    height: theme(detail-background-height, margin(20));
     border-radius: theme(detail-background-border-radius, 0px);
     overflow: hidden;
     background: theme(detail-background, lighter);
     mask-image: linear-gradient(to bottom, black 40%, transparent);
+    opacity: theme(detail-background-opacity, 1);
 
     @include desktop() {
-      height: margin(12);
+      height: theme(detail-background-height, margin(12));
       mask-image: linear-gradient(to bottom, black 60%, transparent);
     }
 

package/src/tests/lib/api/titles.test.js

@@ -1,7 +1,7 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 
 import { api } from '$lib/api/api'
-import { fetchSimilarTitles, fetchTitles } from '$lib/api/titles'
+import { fetchSimilarTitles, fetchTitleBySid, fetchTitles } from '$lib/api/titles'
 import { title } from '$lib/fakeData'
 import { getApiToken } from '$lib/token'
 import { fakeFetch } from '../../helpers'
@@ -74,4 +74,26 @@ describe('$lib/api/titles', () => {
       await expect(async () => await fetchSimilarTitles(title)).rejects.toThrow()
     })
   })
+
+  describe('fetchTitleBySid', () => {
+    it('Should call api with given sid and return the first result', async () => {
+      vi.mocked(api).mockResolvedValueOnce({ results: [title] })
+
+      const response = await fetchTitleBySid(title.sid)
+
+      expect(api).toHaveBeenCalledWith(`/titles/browse?api-token=some-token&sids=${title.sid}&language=en-US&include_count=false`)
+      expect(response).toEqual(title)
+    })
+
+    it('Should throw when no title is returned', async () => {
+      vi.mocked(api).mockResolvedValueOnce({ results: [] })
+
+      await expect(async () => await fetchTitleBySid(title.sid)).rejects.toThrow('No title was returned')
+    })
+
+    it('Should throw when api returns error', async () => {
+      vi.mocked(api).mockRejectedValueOnce({ error: 'message' })
+      await expect(async () => await fetchTitleBySid(title.sid)).rejects.toThrow()
+    })
+  })
 })

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', () => {