@playpilot/tpi 6.10.6 → 6.11.0

package/package.json

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

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/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)
+  })
 })