@playpilot/tpi 8.12.2 → 8.13.0-beta.2

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.12.2",
+	"version": "8.13.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.1",
+		"svelte-tiny-slider": "^2.7.2",
 		"typescript": "^5.9.3",
 		"typescript-eslint": "^8.59.2",
 		"vite": "^5.4.21",

package/src/lib/data/translations.ts

@@ -281,6 +281,11 @@ 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',
+  },
 
   // 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

@@ -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 { clearInTextWidgets, insertInTextWidgets } from './inTextWidgets'
 
 export const keyDataAttribute = 'data-playpilot-injection-key'
 export const keySelector = `[${keyDataAttribute}]`
@@ -168,6 +169,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
@@ -333,6 +336,7 @@ export function clearLinkInjections(): void {
 
   clearAfterArticlePlaylinks()
   clearInTextDisclaimer()
+  clearInTextWidgets()
   destroyAllModals(false)
   destroyLinkPopover(false)
 }

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/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/tests/lib/inTextWidgets.test.js

@@ -0,0 +1,160 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { mount, unmount } from 'svelte'
+import { generateInjection } from '../helpers'
+import { insertInTextWidgets, clearInTextWidgets, inTextWidgetInsertedComponents } from '$lib/inTextWidgets'
+
+vi.mock('svelte', () => ({
+  mount: vi.fn(),
+  unmount: vi.fn(),
+}))
+
+describe('inTextWidgets.ts', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+    document.body.innerHTML = ''
+
+    clearInTextWidgets()
+  })
+
+  describe('insertInTextWidgets', () => {
+    it('Should not mount any component if no linkInjections are given', () => {
+      document.body.innerHTML = '<div data-playpilot-widget="tpi-rail"></div>'
+
+      insertInTextWidgets([])
+
+      expect(mount).not.toHaveBeenCalled()
+    })
+
+    it('Should not mount any component if no widget targets exist', () => {
+      document.body.innerHTML = '<div>No widgets here</div>'
+
+      const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+
+      insertInTextWidgets([injection])
+
+      expect(mount).not.toHaveBeenCalled()
+    })
+
+    it('Should mount a component for a known widget type', () => {
+      document.body.innerHTML = '<div data-playpilot-widget="tpi-rail"></div>'
+
+      const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+
+      insertInTextWidgets([injection])
+
+      expect(mount).toHaveBeenCalledOnce()
+      expect(mount).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({
+          target: document.querySelector('[data-playpilot-widget="tpi-rail"]'),
+          props: { linkInjections: [injection] },
+        }),
+      )
+    })
+
+    it('Should not mount a component for an unknown widget type', () => {
+      document.body.innerHTML = '<div data-playpilot-widget="unknown-widget"></div>'
+
+      const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+
+      insertInTextWidgets([injection])
+
+      expect(mount).not.toHaveBeenCalled()
+    })
+
+    it('Should mount components for multiple widget targets on the same page', () => {
+      document.body.innerHTML = `
+        <div data-playpilot-widget="tpi-rail"></div>
+        <div data-playpilot-widget="tpi-rail"></div>
+      `
+
+      const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+
+      insertInTextWidgets([injection])
+
+      expect(mount).toHaveBeenCalledTimes(2)
+    })
+
+    it('Should skip unknown widget targets and mount known ones', () => {
+      document.body.innerHTML = `
+        <div data-playpilot-widget="tpi-rail"></div>
+        <div data-playpilot-widget="unknown-widget"></div>
+      `
+
+      const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+
+      insertInTextWidgets([injection])
+
+      expect(mount).toHaveBeenCalledOnce()
+    })
+
+    it('Should track inserted components', () => {
+      document.body.innerHTML = `
+        <div data-playpilot-widget="tpi-rail"></div>
+        <div data-playpilot-widget="tpi-rail"></div>
+      `
+
+      const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+
+      insertInTextWidgets([injection])
+
+      expect(inTextWidgetInsertedComponents).toHaveLength(2)
+    })
+
+    it('Should clear previously inserted widgets before inserting new ones', () => {
+      document.body.innerHTML = '<div data-playpilot-widget="tpi-rail"></div>'
+
+      const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+
+      insertInTextWidgets([injection])
+      insertInTextWidgets([injection])
+
+      expect(unmount).toHaveBeenCalled()
+    })
+  })
+
+  describe('clearInTextWidgets', () => {
+    it('Should unmount all inserted components', () => {
+      document.body.innerHTML = `
+        <div data-playpilot-widget="tpi-rail"></div>
+        <div data-playpilot-widget="tpi-rail"></div>
+      `
+
+      const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+      insertInTextWidgets([injection])
+
+      clearInTextWidgets()
+
+      expect(unmount).toHaveBeenCalled()
+    })
+
+    it('Should clear innerHTML of all widget elements', () => {
+      document.body.innerHTML = `
+        <div data-playpilot-widget="tpi-rail"><span>leftover content</span></div>
+      `
+
+      clearInTextWidgets()
+
+      expect(/** @type {HTMLElement} */ (document.querySelector('[data-playpilot-widget]')).innerHTML).toBe('')
+    })
+
+    it('Should reset inTextWidgetInsertedComponents to empty array', () => {
+      document.body.innerHTML = '<div data-playpilot-widget="tpi-rail"></div>'
+
+      const injection = generateInjection('This is a sentence with an injection.', 'an injection')
+      insertInTextWidgets([injection])
+
+      expect(inTextWidgetInsertedComponents.length).toBe(1)
+
+      clearInTextWidgets()
+
+      expect(inTextWidgetInsertedComponents.length).toBe(0)
+    })
+
+    it('Should do nothing if no components are present', () => {
+      clearInTextWidgets()
+
+      expect(unmount).not.toHaveBeenCalled()
+    })
+  })
+})

package/src/tests/routes/components/Widgets/InjectionsWidgetRail.test.js

@@ -0,0 +1,28 @@
+import { render  } from '@testing-library/svelte'
+import { describe, expect, it } from 'vitest'
+
+import InjectionsWidgetRail from '../../../../routes/components/Widgets/InjectionsWidgetRail.svelte'
+import { linkInjections } from '$lib/fakeData'
+
+describe('InjectionsWidgetRail.svelte', () => {
+  it('Should render unique titles for given injections', () => {
+    const injections = [linkInjections[0], linkInjections[0], linkInjections[1], linkInjections[2], linkInjections[2]]
+
+    const { getAllByTestId } = render(InjectionsWidgetRail, { linkInjections: injections })
+
+    expect(getAllByTestId('title')).toHaveLength(3)
+  })
+
+  it('Should not render if no injections were given', () => {
+    const { queryByTestId } = render(InjectionsWidgetRail, { linkInjections: [] })
+
+    expect(queryByTestId('widget')).not.toBeTruthy()
+  })
+
+  it('Should not render if injections contained no valid titles', () => {
+    // @ts-ignore
+    const { queryByTestId } = render(InjectionsWidgetRail, { linkInjections: [{ ...linkInjections, title_details: null }] })
+
+    expect(queryByTestId('widget')).not.toBeTruthy()
+  })
+})