@playpilot/tpi 6.10.7 → 6.11.0

package/package.json

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

package/src/lib/api/externalPages.ts

@@ -50,7 +50,7 @@ export async function fetchLinkInjections(
   }
 
   // This is used when debugging (using window.PlayPilotLinkInjections.debug())
-  window.PlayPilotLinkInjections.successful_fetches?.push(response)
+  window.PlayPilotLinkInjections.last_successful_fetch = response
 
   return response
 }

package/src/lib/data/translations.ts

@@ -101,6 +101,31 @@ export const translations = {
     [Language.Swedish]: 'Titta nu',
     [Language.Danish]: 'Se nu',
   },
+  'Category: AVOD': {
+    [Language.English]: 'Stream for free',
+    [Language.Swedish]: 'Streama gratis',
+    [Language.Danish]: 'Stream gratis',
+  },
+  'Category: SVOD': {
+    [Language.English]: 'Streaming services',
+    [Language.Swedish]: 'Streamingtjänster',
+    [Language.Danish]: 'Streamingtjenester',
+  },
+  'Category: RENT': {
+    [Language.English]: 'Rent it',
+    [Language.Swedish]: 'Hyr den',
+    [Language.Danish]: 'Lej den',
+  },
+  'Category: BUY': {
+    [Language.English]: 'Buy it',
+    [Language.Swedish]: 'Köp den',
+    [Language.Danish]: 'Køb den',
+  },
+  'Category: Other': {
+    [Language.English]: 'Other',
+    [Language.Swedish]: 'Annat',
+    [Language.Danish]: 'Andet',
+  },
   'Share': {
     [Language.English]: 'Share',
     [Language.Swedish]: 'Dela',

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

@@ -59,6 +59,11 @@ export type ConfigResponse = {
    */
   disable_scroll_reveal_posters?: boolean
 
+  /**
+   * Playlinks are merged by default, when this option is enabled playlinks will instead be shown categorized.
+   */
+  categorize_playlinks?: boolean
+
   /**
    * The following options are all relevant for in text disclaimers, which renders as a disclaimer text within the article,
    * rather than only inside of title cards.

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

@@ -14,4 +14,4 @@ export type PlaylinkData = {
   }
 }
 
-export type PlaylinkCategory = 'SVOD' | 'BUY' | 'RENT' | 'TVOD'
+export type PlaylinkCategory = 'SVOD' | 'BUY' | 'RENT' | 'TVOD' | 'AVOD'

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

@@ -20,8 +20,8 @@ export type ScriptConfig = {
   after_article_insert_position?: InsertPosition | ''
   // The language of the page will be inferred from the html `lang` attribute. Can be set manually using this option in the config object.
   language?: string | null
-  // Lists all fetches to external pages
-  successful_fetches?: LinkInjectionResponse[]
+  // Set to the last success external-pages fetch.
+  last_successful_fetch?: LinkInjectionResponse | null
   // Lists all tracked events through the `track()` function.
   tracked_events?: { event: string, payload: Record<string, any> }[]
   // Queued tracking events that were fired before consent was given. These might be fired later if the user consents.

package/src/main.ts

@@ -15,7 +15,7 @@ window.PlayPilotLinkInjections = {
   region: null,
   organization_sid: null,
   domain_sid: null,
-  successful_fetches: [],
+  last_successful_fetch: null,
   tracked_events: [],
   queued_tracking_events: [],
   split_test_identifiers: {},
@@ -94,8 +94,8 @@ window.PlayPilotLinkInjections = {
     console.log('Valid elements', elements)
     console.groupEnd()
 
-    console.groupCollapsed('Successful fetches')
-    console.log(this.successful_fetches)
+    console.groupCollapsed('Last fetch')
+    console.log(this.last_successful_fetch)
     console.groupEnd()
 
     console.groupCollapsed('Meta')

package/src/routes/components/Debugger.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { SplitTest } from '$lib/enums/SplitTest'
-  import { getPageMetaData } from '$lib/meta'
   import { getFullUrlPath } from '$lib/url'
   import { onDestroy } from 'svelte'
 
@@ -13,7 +12,6 @@
   const secrets = ['tpidebug', 'debugtpi']
   const lastInputs: string[] = []
   const isUsingBetaScript = !!document.querySelector('script[src*="scripts.playpilot.com/link-injection@next"]')
-  const metadata = getPageMetaData()
 
   let data = $state(dataToReadable())
   let shown = $state(false)
@@ -26,7 +24,7 @@
   function dataToReadable(): Record<string, undefined | Record<string, any>[]> {
     const data = window.PlayPilotLinkInjections
 
-    const successfulInjections = data.evaluated_link_injections?.filter(injection => !injection.failed) || []
+    const succesfulInjections = data.evaluated_link_injections?.filter(injection => !injection.failed) || []
     const failedInjections = data.evaluated_link_injections?.filter(injection => injection.failed) || []
 
     const visiblePixels = Array.from(document.querySelectorAll<HTMLImageElement>('[data-playpilot-pixel]'))
@@ -38,8 +36,7 @@
         { label: 'HTML selector', data: data.selector },
       ],
       'API Config': Object.entries(window.PlayPilotLinkInjections.config || {}).map(([label, data]) => ({ label, data })),
-      'External pages responses': window.PlayPilotLinkInjections.successful_fetches?.map((item, index) => ({ label: index + 1, data: item })),
-      [`Successful injections (${successfulInjections.length})`]: successfulInjections.map(injection => ({ label: injection.title, data: injection.sentence })),
+      [`Succesful injections (${succesfulInjections.length})`]: succesfulInjections.map(injection => ({ label: injection.title, data: injection.sentence })),
       [`Failed injections (${failedInjections.length})`]: failedInjections.map(injection => ({ label: injection.title, data: `Reason: ${injection.failed_message} | Sentence: ${injection.sentence}` })),
       [`Fetched ads (${data.ads?.length || 0})`]: data.ads?.map(ad => ({ label: ad.campaign_name, data: ad })),
       [`Tracking events (${data.tracked_events?.length || 0})`]: data.tracked_events?.map(event => ({ label: event.event, data: event.payload })),
@@ -124,14 +121,6 @@
 
     <hr />
 
-    <div class="meta">
-      {metadata.content_heading}<br>
-      modified_time: {metadata.content_modified_time}<br>
-      published_time: {metadata.content_published_time}
-    </div>
-
-    <hr />
-
     {#if !!(window.PlayPilotLinkInjections.config?.exclude_urls_pattern && getFullUrlPath().match(window.PlayPilotLinkInjections?.config?.exclude_urls_pattern))}
       <span class="error">The current URL is excluded via the config</span>
       <hr />
@@ -188,7 +177,6 @@
   }
 
   hr {
-    margin: margin(0.5) 0;
     border-color: theme(primary);
   }
 
@@ -218,16 +206,11 @@
     border: 1px solid theme(primary);
     background: black;
     overflow: auto;
+    color: white;
     font-family: "Consolas", monospace;
-    font-size: theme(font-size-base);
-    line-height: 1.5em;
     color: theme(primary);
   }
 
-  .meta {
-    font-size: theme(font-size-small);
-  }
-
   .item {
     white-space: nowrap;
     overflow-x: auto;

package/src/routes/components/Playlinks/Playlink.svelte

@@ -23,6 +23,7 @@
   const usePixel = $derived(isPixelAllowed() && !highlighted)
 
   const categoryStrings = {
+    AVOD: t('Stream'),
     SVOD: t('Stream'),
     BUY: t('Buy'),
     RENT: t('Rent'),

package/src/routes/components/Playlinks/Playlinks.svelte

@@ -3,13 +3,17 @@
   import { t } from '$lib/localization'
   import { mergePlaylinks } from '$lib/playlink'
 	import { track } from '$lib/tracking'
-  import type { PlaylinkData } from '$lib/types/playlink'
+  import type { PlaylinkCategory, PlaylinkData } from '$lib/types/playlink'
   import type { TitleData } from '$lib/types/title'
   import { heading } from '$lib/actions/heading'
   import { campaignToPlaylink, getFirstAdOfType } from '$lib/api/ads'
   import { getContext } from 'svelte'
   import Playlink from './Playlink.svelte'
 
+  type Category = PlaylinkCategory | '' | 'Other'
+  type CategorizedPlaylinks = Partial<Record<Category, PlaylinkData[]>>
+  type SortedPlaylinks = [Category, PlaylinkData[]][]
+
   interface Props {
     playlinks: PlaylinkData[]
     title: TitleData
@@ -19,10 +23,13 @@
 
   const isModal = getContext('scope') === 'modal'
   const displayAd = getFirstAdOfType('card')
+  const categorize = !!window.PlayPilotLinkInjections?.config?.categorize_playlinks
 
   let outerWidth = $state(0)
 
   const mergedPlaylinks = $derived(mergePlaylinks(playlinks))
+  const categorizedPlaylinks = $derived(categorizePlaylinks(playlinks))
+  const shownPlaylinks: SortedPlaylinks = $derived(categorize ? sortCategories(categorizedPlaylinks) : [['' as Category, mergedPlaylinks]])
 
   // Grid turns into a list when the playlinks container is small enough
   // It is also a list by default if a display ad is present, as that would
@@ -32,6 +39,37 @@
   function onclick(playlink: string): void {
     track(isModal ? TrackingEvent.TitleModalPlaylinkClick : TrackingEvent.TitlePopoverPlaylinkClick, title, { playlink })
   }
+
+  function categorizePlaylinks(playlinks: PlaylinkData[]): CategorizedPlaylinks {
+    const categories: CategorizedPlaylinks = {}
+
+    for (const playlink of playlinks) {
+      const { category } = playlink.extra_info
+
+      if (!(category in categories)) categories[category] = []
+      categories[category]!.push(playlink)
+    }
+
+    return categories
+  }
+
+  function sortCategories(categorizedPlaylinks: CategorizedPlaylinks): SortedPlaylinks {
+    const order: Partial<PlaylinkCategory>[] = ['AVOD', 'SVOD', 'RENT', 'BUY']
+    const sortedCategories: SortedPlaylinks = []
+
+    for (const category of order) {
+      if (categorizedPlaylinks[category]) sortedCategories.push([category, categorizedPlaylinks[category]])
+    }
+
+    const restPlaylinks: PlaylinkData[] = []
+    for (const playlinks of Object.values(categorizedPlaylinks)) {
+      for (const playlink of playlinks) {
+        if (!order.includes(playlink.extra_info.category)) restPlaylinks.push(playlink)
+      }
+    }
+
+    return [...sortedCategories, ['Other', restPlaylinks]]
+  }
 </script>
 
 
@@ -42,24 +80,28 @@
     {window?.PlayPilotLinkInjections?.config?.playlinks_disclaimer_text || t('Commission Disclaimer')}
     <a href="https://playpilot.com/" target="_blank" rel="sponsored">PlayPilot.com</a>
   </div>
+{:else}
+  <div class="empty" data-testid="playlinks-empty">
+    {t('Title Unavailable')}
+  </div>
 {/if}
 
-<div class="playlinks" class:list bind:clientWidth={outerWidth}>
-  {#each mergedPlaylinks as playlink, index}
-    <Playlink {playlink} onclick={() => onclick(playlink.name)} />
+{#each shownPlaylinks as [category, playlinks]}
+  {#if category && playlinks.length}
+    <div class="heading category" use:heading={4}>{t(`Category: ${category}`)}</div>
+  {/if}
 
-    <!-- A fake highlighted playlink as part of the display ad, to be shown after the first playlink -->
-    {#if displayAd && (index === 0)}
-      <Playlink playlink={campaignToPlaylink(displayAd)} onclick={() => track(TrackingEvent.DisplayedAdPlaylickClick, title, { campaign_name: displayAd.campaign_name })} hideCategory disclaimer={displayAd.disclaimer || ''} />
-    {/if}
-  {/each}
+  <div class="playlinks" data-testid="category-{category}" class:list bind:clientWidth={outerWidth}>
+    {#each playlinks as playlink, index}
+      <Playlink {playlink} onclick={() => onclick(playlink.name)} />
 
-  {#if !mergedPlaylinks.length}
-    <div class="empty" data-testid="playlinks-empty">
-      {t('Title Unavailable')}
-    </div>
-  {/if}
-</div>
+      <!-- A fake highlighted playlink as part of the display ad, to be shown after the first playlink -->
+      {#if displayAd && (index === 0)}
+        <Playlink playlink={campaignToPlaylink(displayAd)} onclick={() => track(TrackingEvent.DisplayedAdPlaylickClick, title, { campaign_name: displayAd.campaign_name })} hideCategory disclaimer={displayAd.disclaimer || ''} />
+      {/if}
+    {/each}
+  </div>
+{/each}
 
 <style lang="scss">
   .heading {
@@ -71,6 +113,11 @@
     line-height: normal;
   }
 
+  .category {
+    margin: margin(0.5) 0 margin(0.25);
+    font-size: theme(playlinks-category-font-size, font-size-small);
+  }
+
   .playlinks {
     box-sizing: border-box;
     display: grid;
@@ -105,7 +152,6 @@
   }
 
   .empty {
-    grid-column: span 2;
     padding: margin(0.75);
     margin-top: margin(0.5);
     background: theme(playlink-background, lighter);
@@ -113,9 +159,5 @@
     border-radius: theme(playlink-border-radius, border-radius);
     white-space: initial;
     line-height: 1.35;
-
-    .list & {
-      grid-column: 1;
-    }
   }
 </style>

package/src/tests/routes/components/Playlinks/Playlinks.test.js

@@ -112,7 +112,7 @@ describe('Playlinks.svelte', () => {
     expect(getAllByText('Some playlink')).toHaveLength(1)
   })
 
-  it('Should render as list when only one playlink is present', async () => {
+  it('Should render as list when only one playlink is present', () => {
     const playlinks = [
       { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
     ]
@@ -122,4 +122,55 @@ describe('Playlinks.svelte', () => {
     // @ts-ignore
     expect(container.querySelector('.playlinks').classList).toContain('list')
   })
+
+  it('Should categorize and sort playlinks if config option is given', () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = {
+      config: { categorize_playlinks: true },
+    }
+
+    const playlinks = [
+      { name: 'Some svod playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
+      { name: 'Some rent playlink', extra_info: { category: 'RENT' } },
+      { name: 'Some other rent playlink', logo_url: '', extra_info: { category: 'RENT' } },
+      { name: 'Some free playlink', logo_url: null, extra_info: { category: 'AVOD' } },
+    ]
+
+    // @ts-ignore
+    const { container, getByText } = render(Playlinks, { playlinks, title })
+
+    const elements = /** @type {HTMLElement[]} */ (Array.from(container.querySelectorAll('[data-playlink]')))
+
+    expect(elements[0].innerText).toContain(playlinks[3].name)
+    expect(elements[1].innerText).toContain(playlinks[0].name)
+    expect(elements[2].innerText).toContain(playlinks[1].name)
+    expect(elements[3].innerText).toContain(playlinks[2].name)
+
+    expect(getByText('Streaming services')).toBeTruthy()
+    expect(getByText('Rent it')).toBeTruthy()
+    expect(getByText('Stream for free')).toBeTruthy()
+  })
+
+  it('Should list uncategorized playlinks under "other" category', () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = {
+      config: { categorize_playlinks: true },
+    }
+
+    const playlinks = [
+      { name: 'Some udef playlink', logo_url: 'logo', extra_info: { category: 'UDEF' } },
+      { name: 'Some empty playlink', extra_info: { category: '' } },
+      { name: 'Some svod playlink', logo_url: '', extra_info: { category: 'SVOD' } },
+      { name: 'Some tvod playlink', logo_url: null, extra_info: { category: 'TVOD' } },
+    ]
+
+    // @ts-ignore
+    const { getByTestId, getByText } = render(Playlinks, { playlinks, title })
+
+    expect(getByText('Other')).toBeTruthy()
+    expect(getByTestId('category-Other').querySelectorAll('[data-playlink]')).toHaveLength(3)
+
+    expect(getByText('Streaming services'))
+    expect(getByTestId('category-SVOD').querySelectorAll('[data-playlink]')).toHaveLength(1)
+  })
 })