@playpilot/tpi 8.14.0-beta.4 → 8.15.0

package/events.md

@@ -100,6 +100,11 @@ 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.14.0-beta.4",
+	"version": "8.15.0",
 	"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.1",
+		"svelte-tiny-slider": "^2.7.2",
 		"typescript": "^5.9.3",
 		"typescript-eslint": "^8.59.2",
 		"vite": "^5.4.21",

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/data/translations.ts

@@ -171,6 +171,11 @@ export const translations = {
     [Language.Swedish]: 'Upptäck och sök bland alla filmer och tv-serier',
     [Language.Danish]: 'Opdag og søg i alle film og tv-serier',
   },
+  'Streaming Guide Disclaimer': {
+    [Language.English]: 'In collaboration with <a href="https://www.playpilot.com/" target="_blank" rel="sponsored">PlayPilot.com</a>',
+    [Language.Swedish]: 'I samarbete med <a href="https://www.playpilot.com/" target="_blank" rel="sponsored">PlayPilot.com</a>',
+    [Language.Danish]: 'I samarbejde med <a href="https://www.playpilot.com/" target="_blank" rel="sponsored">PlayPilot.com</a>',
+  },
   'Streaming Guide Description': {
     [Language.English]: 'Find where to watch movies online - the ultimate guide that helps you find the best movies and shows across streaming services.',
     [Language.Swedish]: 'Sök bland alla filmer och serier för att ta reda på var du kan streama dem',
@@ -286,6 +291,11 @@ export const translations = {
     [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',
+    [Language.Danish]: 'Nævnt i denne artikel',
+  },
 
   // List titles
   'List: Trending': {

package/src/lib/enums/TrackingEvent.ts

@@ -55,6 +55,9 @@ 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,
+  title_details: { ...title, sid: '1' },
 }, {
   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,
+  title_details: { ...title, sid: '2' },
 }, {
   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,
+  title_details: { ...title, sid: '3' },
   manual: false,
 }, {
   sid: '4',

package/src/lib/inTextWidgets.ts

@@ -0,0 +1,43 @@
+import { mount, unmount } from 'svelte'
+import type { LinkInjection } from './types/injection'
+import InjectionsWidgetRail from '../routes/components/Widgets/InjectionsWidgetRail.svelte'
+
+const widgets: Record<string, any> = {
+  'tpi-rail': InjectionsWidgetRail,
+}
+
+export const inTextWidgetSelector = '[data-playpilot-widget]'
+
+export let inTextWidgetInsertedComponents: any[] = []
+
+export function insertInTextWidgets(linkInjections: LinkInjection[]): void {
+  clearInTextWidgets()
+
+  if (!linkInjections.length) return
+
+  const targets = document.querySelectorAll<HTMLElement>(inTextWidgetSelector)
+
+  targets.forEach(target => {
+    const widget = target.dataset.playpilotWidget || ''
+
+    const component = widgets[widget]
+
+    if (!component) return
+
+    const insertedComponent = mount(component, {
+      target,
+      props: {
+        linkInjections,
+      },
+    })
+
+    inTextWidgetInsertedComponents.push(insertedComponent)
+  })
+}
+
+export function clearInTextWidgets(): void {
+  inTextWidgetInsertedComponents.forEach(component => unmount(component))
+  document.querySelectorAll('[data-playpilot-widget]').forEach(element => element.innerHTML = '')
+
+  inTextWidgetInsertedComponents = []
+}

package/src/lib/injection.ts

@@ -6,6 +6,7 @@ import { clearCurrentlyHoveredInjection, destroyLinkPopover, destroyLinkPopoverO
 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'
 export const keySelector = `[${keyDataAttribute}]`
@@ -169,6 +170,8 @@ 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
@@ -343,6 +346,7 @@ export function clearLinkInjections(): void {
 
   clearAfterArticlePlaylinks()
   clearInTextDisclaimer()
+  clearInTextWidgets()
   destroyAllModals(false)
   destroyLinkPopover(false)
 }

package/src/lib/routes.ts

@@ -6,9 +6,5 @@ export function titleUrl(title: TitleData): string {
 }
 
 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}`
+  return window.PlayPilotLinkInjections?.config?.explore_navigation_path + `?route=modal&sid=${title.sid}`
 }

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

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

package/src/routes/+layout.svelte

@@ -70,6 +70,8 @@
         <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,11 +226,6 @@
 
     <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/ExploreLayout.svelte

@@ -52,6 +52,11 @@
         {t('Streaming Guide Subheading')}
       </div>
 
+      <p class="disclaimer">
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+        {@html t('Streaming Guide Disclaimer')}
+      </p>
+
       {#if !useExploreRouter()}
         <p class="description">
           {t('Streaming Guide Description')}
@@ -117,7 +122,7 @@
   .heading,
   .subheading {
     color: theme(text-color);
-    font-size: theme(explore-heading-size, clamp(margin(1.5), 5vw, margin(2)));
+    font-size: theme(explore-heading-font-size, clamp(margin(1.5), 5vw, margin(2)));
     font-weight: theme(explore-heading-font-weight, font-bold);
     text-transform: theme(explore-heading-text-transform, normal);
     line-height: theme(explore-heading-line-height, 1.5);
@@ -126,13 +131,25 @@
   .subheading {
     margin-top: margin(0.5);
     max-width: margin(15);
-    font-size: theme(explore-subheading-size, clamp(margin(1), 2.5vw, margin(1.25)));
+    font-size: theme(explore-subheading-font-size, clamp(margin(1), 2.5vw, margin(1.25)));
 
     @include desktop {
       max-width: 100%;
     }
   }
 
+  .disclaimer {
+    margin: theme(explore-disclaimer-margin, 0);
+    font-size: theme(explore-diclaimer-font-size, font-size-small);
+    color: theme(explore-disclaimer-color, text-color-alt);
+    opacity: 0.75;
+
+    :global(a) {
+      color: inherit;
+      font-style: inherit;
+    }
+  }
+
   .description {
     max-width: theme(explore-header-max-width, 600px);
     margin: 0;

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

@@ -8,9 +8,7 @@
   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'
+  import ExploreModal from './Routes/ExploreModal.svelte'
 
   const routes: ExploreRoute[] = [
     {
@@ -29,6 +27,12 @@
       key: 'title',
       component: ExploreTitle,
     })
+
+    routes.push({
+      key: 'modal',
+      component: ExploreHome,
+      appendComponent: ExploreModal,
+    })
   }
 
   const initialRouteKey = getCurrentRouteParam() || routes[0].key
@@ -38,8 +42,7 @@
   let filter: ExploreFilter = $state({})
 
   const CurrentRouteComponent = $derived(currentRoute.component)
-
-  if (initialRouteKey === 'modal') openModalViaRoute()
+  const CurrentAppendComponent = $derived(currentRoute.appendComponent)
 
   $effect(() => {
     if (searchQuery) currentRoute = routes.find(route => route.key === 'results')!
@@ -60,33 +63,12 @@
     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'),
-      },
-    })
+  function onhashchange(): void {
+    navigate(getCurrentRouteParam(), false)
   }
 </script>
 
@@ -94,4 +76,5 @@
 
 <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/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

@@ -16,7 +16,7 @@
     each: Snippet<[item: any, currentIndex: number]>
   }
 
-  const { items, initialIndex = 0, onchange = () => null, onclose = () => null, each }: Props = $props()
+  const { items, initialIndex = 0, onchange = () => null, onclose = () => null, each, ...restProps }: Props = $props()
 
   const transitionDuration = 300
 
@@ -36,7 +36,7 @@
   }
 </script>
 
-<Modal blur {onclose}>
+<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}>

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/Rails/Rail.svelte

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

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

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { TrackingEvent } from '$lib/enums/TrackingEvent'
+  import { t } from '$lib/localization'
+  import { track } from '$lib/tracking'
+  import type { LinkInjection } from '$lib/types/injection'
+  import type { TitleData } from '$lib/types/title'
+  import TitlesRail from '../Rails/TitlesRail.svelte'
+
+  interface Props {
+    linkInjections: LinkInjection[]
+  }
+
+  const { linkInjections }: Props = $props()
+
+  let element: HTMLElement | null = $state(null)
+
+  // @ts-ignore
+  const heading = $derived(element?.parentNode?.dataset.heading || t('Mentioned In This Article'))
+
+  const titles: TitleData[] = $derived.by(() => {
+    const uniqueTitles: TitleData[] = []
+
+    linkInjections.forEach(injection => {
+      const title = injection.title_details!
+
+      if (!title) return
+      if (uniqueTitles.some(t => t.sid === title.sid)) return
+
+      uniqueTitles.push(title)
+    })
+
+    return uniqueTitles
+  })
+</script>
+
+{#if titles.length}
+  <div class="widget" bind:this={element} data-testid="widget">
+    <TitlesRail {titles} {heading} onclick={(title) => track(TrackingEvent.WidgetArticleRailTitleClick, title)} />
+  </div>
+{/if}
+
+<style lang="scss">
+  .widget {
+    --rail-margin: 0;
+    --playpilot-rails-arrow-background: black;
+    --playpilot-detail-background-light: black;
+    --playpilot-rail-title-text-color: currentColor;
+    --playpilot-rail-text-color: currentColor;
+    margin: margin(1) 0;
+  }
+</style>

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()