@playpilot/tpi 8.14.0 → 8.15.0

package/package.json

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

package/src/lib/api/externalPages.ts

@@ -26,8 +26,6 @@ export async function fetchLinkInjections(
   const apiUrl = `/external-pages/?api-token=${apiToken}&include_title_details=true${isEditorialMode ? '&editorial_mode_enabled=true' : ''}&language=${language}`
   let response: LinkInjectionResponse
 
-  // We use separate requests when running the AI or setting the editor session vs when only getting the results.
-  // For regular requests we use a GET endpoint, but when saving data we POST to the same url.
   if (method === 'POST') {
     const { pageText } = getPageTextAndElements()
 
@@ -44,14 +42,11 @@ export async function fetchLinkInjections(
       body: params,
     })
   } else {
-    // When getting injections without posting we append the URL of the page to the URL for the request.
-    // All other params are only relevant during the POST request.
     response = await api<LinkInjectionResponse>(apiUrl + `&url=${url}`, {
       method: 'GET',
     })
   }
 
-  // This is used when debugging (using window.PlayPilotLinkInjections.debug())
   window.PlayPilotLinkInjections.last_successful_fetch = response
 
   return response
@@ -67,8 +62,6 @@ export async function pollLinkInjections(
 ): Promise<LinkInjectionResponse> {
   let currentTry = 0
 
-  // Clear pollTimeout if it is already running to prevent multiple timeouts from running at the same time
-  // This is mostly handy during HMR, but also during navigation changes
   if (pollTimeout) clearTimeout(pollTimeout)
 
   const poll = async (resolve: Function, reject: Function): Promise<void> => {

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, no_region_filter: true })
+
+  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

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

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'
 import { clearInTextWidgets, insertInTextWidgets } from './inTextWidgets'
 
 export const keyDataAttribute = 'data-playpilot-injection-key'
@@ -202,11 +203,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 +316,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,7 @@ 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}`
+}

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/lib/types/explore.d.ts

@@ -1,4 +1,5 @@
 export type ExploreRoute = {
   key: string
   component: any
+  appendComponent?: any
 }

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,8 @@
   import ExploreHome from './Routes/ExploreHome.svelte'
   import ExploreResults from './Routes/ExploreResults.svelte'
   import ExploreLayout from './ExploreLayout.svelte'
+  import ExploreTitle from './Routes/ExploreTitle.svelte'
+  import ExploreModal from './Routes/ExploreModal.svelte'
 
   const routes: ExploreRoute[] = [
     {
@@ -20,25 +22,59 @@
       key: 'home',
       component: ExploreHome,
     })
+
+    routes.push({
+      key: 'title',
+      component: ExploreTitle,
+    })
+
+    routes.push({
+      key: 'modal',
+      component: ExploreHome,
+      appendComponent: ExploreModal,
+    })
   }
 
-  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)
+  const CurrentAppendComponent = $derived(currentRoute.appendComponent)
 
   $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)
+
     track(TrackingEvent.ExploreNavigate, null, { route: currentRoute.key })
   }
+
+  function getCurrentRouteParam(): string {
+    return new URL(document.location.toString()).searchParams.get('route') || routes[0].key
+  }
+
+  function onhashchange(): void {
+    navigate(getCurrentRouteParam(), false)
+  }
 </script>
 
+<svelte:window on:popstate={onhashchange} />
+
 <ExploreLayout {navigate} bind:searchQuery bind:filter>
   <CurrentRouteComponent {searchQuery} {filter} {navigate} />
+  <CurrentAppendComponent {navigate} />
 </ExploreLayout>

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { fetchSimilarTitles, fetchTitleBySid } from '$lib/api/titles'
+  import { openModal } from '$lib/modal'
+  import type { TitleData } from '$lib/types/title'
+
+  interface Props {
+    navigate?: (key: string, pushState?: boolean) => void
+  }
+
+  const { navigate = () => null }: Props = $props()
+
+  openModalViaRoute()
+
+  async function openModalViaRoute(): Promise<void> {
+    const currentUrl = new URL(document.location.toString())
+    const sid = currentUrl.searchParams.get('sid')
+
+    if (!sid) return
+
+    try {
+      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'),
+          pushState: false,
+        },
+      })
+    } catch {
+      navigate('home')
+    }
+  }
+</script>

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/Modal.svelte

@@ -21,6 +21,7 @@
     blur?: boolean
     closeButtonStyle?: 'shadow' | 'flat'
     initialScrollPosition?: number
+    pushState?: boolean
     onscroll?: () => void
     onclose?: () => void
   }
@@ -35,6 +36,7 @@
     blur = false,
     closeButtonStyle = 'shadow',
     initialScrollPosition = 0,
+    pushState = true,
     onscroll = () => null,
     onclose = () => null,
   }: Props = $props()
@@ -63,7 +65,7 @@
 
     // Add modal state to the browser history. This allows us to close to modal when using the back button.
     // Only do this for the very first modal opened in the stack. The back button always fully closes all modals.
-    if (!hasPreviousModal) window.history.pushState({ modal: true }, '', historyHash)
+    if (pushState && !hasPreviousModal) window.history.pushState({ modal: true }, '', historyHash)
 
     requestAnimationFrame(setInitialScrollPosition)
 

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

@@ -12,10 +12,11 @@
     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, ...restProps }: Props = $props()
 
   const transitionDuration = 300
 
@@ -35,7 +36,7 @@
   }
 </script>
 
-<Modal blur>
+<Modal blur {onclose} {...restProps}>
   {#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 +71,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/Modals/TitlesRailModal.svelte

@@ -6,14 +6,15 @@
   import RailModal from './RailModal.svelte'
 
   interface Props {
-    titles: TitleData[]
-    initialIndex?: number
+    titles: TitleData[],
+    initialIndex?: number,
+    onclose?: () => void
   }
 
-  const { titles, initialIndex = 0 }: Props = $props()
+  const { titles, initialIndex = 0, onclose = () => null, ...restProps }: Props = $props()
 </script>
 
-<RailModal items={titles} {initialIndex} onchange={(index) => track(TrackingEvent.ExploreTitleRailSetIndex, titles[index], { index })}>
+<RailModal items={titles} {initialIndex} {onclose} onchange={(index) => track(TrackingEvent.ExploreTitleRailSetIndex, titles[index], { index })} {...restProps}>
   {#snippet each(title, currentIndex)}
     <Title {title} useVideoBackground={title.sid === titles[currentIndex]?.sid} />
   {/snippet}

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/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/routes/explore/+page.svelte

@@ -29,6 +29,10 @@
   setTimeout(insertExplore, 100)
 </script>
 
+<svelte:head>
+  <title>PlayPilot Link Injections - Explore</title>
+</svelte:head>
+
 <button onclick={(() => {
   destroyExplore()
   window.PlayPilotLinkInjections.config.explore_use_router = !useExploreRouter()

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}&no_region_filter=true&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', () => {