@playpilot/tpi 6.11.0 → 6.12.0

package/package.json

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

package/src/lib/api/ads.ts

@@ -30,6 +30,7 @@ export async function fetchAds(): Promise<Campaign[]> {
  */
 export function getFirstAdOfType(format: CampaignFormat): Campaign | null {
   if (!hasConsentedTo('ads')) return null
+  if (window.PlayPilotLinkInjections.no_affiliate) return null
 
   return (window.PlayPilotLinkInjections?.ads || []).find(i => i.campaign_format === format) || null
 }

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

@@ -44,6 +44,12 @@ export type ConfigResponse = {
    */
   playlinks_disclaimer_text?: string
 
+  /**
+   * Some partners may want to display titles without affiliate links, which currently comes down to no playlinks.
+   * This can also be set via the config on the script itself.
+   */
+  no_affiliate?: boolean
+
   /**
    * Whether or not we can insert retargeting pixels. Not all third parties allow this and it is disabled by default
    */

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

@@ -32,6 +32,8 @@ export type ScriptConfig = {
   evaluated_link_injections?: LinkInjection[]
   // By default the script requires consent from the user through tcfapi. Can be disabled using this setting.
   require_consent?: boolean
+  // Some partners may want to display titles without affiliate links, which currently comes down to no playlinks.
+  no_affiliate?: boolean
   // Used to check if a user has consented via tcfapi to various consent categories.
   consents?: ConsentOptions
   // The config response from the api, saved to the window object to be used without having to pass the response around.

package/src/main.ts

@@ -22,6 +22,7 @@ window.PlayPilotLinkInjections = {
   evaluated_link_injections: [],
   ads: [],
   require_consent: true,
+  no_affiliate: false,
   consents: {
     ads: false,
     pixels: false,
@@ -32,7 +33,7 @@ window.PlayPilotLinkInjections = {
   config: {},
   app: null,
 
-  initialize(options = { token: '', selector: '', after_article_selector: '', after_article_insert_position: '', language: null, region: null, organization_sid: null, domain_sid: null, editorial_token: '', require_consent: true }): void {
+  initialize(options = { token: '', selector: '', after_article_selector: '', after_article_insert_position: '', language: null, region: null, organization_sid: null, domain_sid: null, editorial_token: '', require_consent: true, no_affiliate: false }): void {
     if (!options.token) {
       console.error('An API token is required.')
       return
@@ -49,6 +50,7 @@ window.PlayPilotLinkInjections = {
     this.organization_sid = options.organization_sid
     this.domain_sid = options.domain_sid
     this.require_consent = options.require_consent
+    this.no_affiliate = options.no_affiliate
 
     if (this.require_consent === false) {
       setConsent({

package/src/routes/+page.svelte

@@ -58,6 +58,7 @@
     track(TrackingEvent.ArticlePageView)
 
     if (!aiInjections.length && !manualInjections.length) return
+    if (window.PlayPilotLinkInjections.no_affiliate) return
 
     window.PlayPilotLinkInjections.ads = await fetchAds()
   }
@@ -75,6 +76,7 @@
 
       if (config?.custom_style) insertCustomStyle(config.custom_style || '')
       if (config?.explore_navigation_selector) insertExploreIntoNavigation()
+      if (config?.no_affiliate) window.PlayPilotLinkInjections.no_affiliate = true
 
       isUrlExcluded = !!(config?.exclude_urls_pattern && url.match(new RegExp(config.exclude_urls_pattern)))
       if (isUrlExcluded) return

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

@@ -1,12 +1,9 @@
 <script lang="ts">
   import IconArrow from '../Icons/IconArrow.svelte'
-  import ImageTitlesList from '$lib/images/titles-list.webp'
   import { openModal } from '$lib/modal'
 </script>
 
 <button class="call-to-action" onclick={() => openModal({ type: 'explore' })}>
-  <img src={ImageTitlesList} alt="" width="70" height="57" />
-
   <div>
     <strong>Looking for something else?</strong>
     <div>Use our streamingguide</div>

package/src/routes/components/ListTitle.svelte

@@ -11,6 +11,8 @@
   }
 
   const { title, onclick = () => null }: Props = $props()
+
+  const noAffiliate = !!window.PlayPilotLinkInjections?.no_affiliate
 </script>
 
 <button class="title" {onclick} data-testid="title">
@@ -35,11 +37,13 @@
       {/if}
     </div>
 
-    <div class="description">
+    <div class="description" class:large={noAffiliate}>
       {title.description}
     </div>
 
-    <PlaylinksCompact playlinks={title.providers} />
+    {#if !noAffiliate}
+      <PlaylinksCompact playlinks={title.providers} />
+    {/if}
   </div>
 
   <div class="action">
@@ -129,6 +133,11 @@
     -webkit-box-orient: vertical;
     font-size: theme(detail-font-size-small, font-size-small);
     color: theme(list-item-description-text-color, text-color);
+
+    &.large {
+      line-clamp: 2;
+      -webkit-line-clamp: 2;
+    }
   }
 
   .action {

package/src/routes/components/Title.svelte

@@ -24,9 +24,11 @@
 
   const { title, small = false }: Props = $props()
 
+  const noAffiliate = !!window.PlayPilotLinkInjections?.no_affiliate
+
   setContext('title', title)
 
-  const showDescription = $derived(!small && title.description)
+  const showDescription = $derived((!small || noAffiliate) && title.description)
 
   let posterLoaded = $state(false)
   let backgroundLoaded = $state(false)
@@ -71,7 +73,9 @@
       <Description text={title.description!} blurb={title.blurb} onclick={() => track(TrackingEvent.ExpandTitleDescription, title)} />
     {/if}
 
-    <Playlinks playlinks={title.providers} {title} />
+    {#if !noAffiliate}
+      <Playlinks playlinks={title.providers} {title} />
+    {/if}
 
     <ParticipantsRail {title} />
     <SimilarRail {title} />

package/src/tests/lib/api/ads.test.js

@@ -81,7 +81,7 @@ describe('$lib/api/ads', () => {
       expect(getFirstAdOfType('top_scroll')).toBe(null)
     })
 
-    it('Should not return ads if valid ad was given but user did not consent to ads', async () => {
+    it('Should not return ads if valid ad was given but user did not consent to ads', () => {
       vi.mocked(hasConsentedTo).mockImplementation(() => false)
 
       // @ts-ignore
@@ -89,5 +89,12 @@ describe('$lib/api/ads', () => {
 
       expect(getFirstAdOfType('top_scroll')).toBe(null)
     })
+
+    it('Should not return ads even if given if no_affiliate is true', () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections = { ads: [{ campaign_format: 'top_scroll' }], no_affiliate: true }
+
+      expect(getFirstAdOfType('top_scroll')).toBe(null)
+    })
   })
 })

package/src/tests/routes/+page.test.js

@@ -459,6 +459,19 @@ describe('$routes/+page.svelte', () => {
     expect(fetchAds).not.toHaveBeenCalled()
   })
 
+  it('Should not fetch ads if no_affilite is true', async () => {
+    // @ts-ignore
+    vi.mocked(pollLinkInjections).mockResolvedValueOnce({ ai_injections: [{}], manual_injections: [{}] })
+    // @ts-ignore
+    window.PlayPilotLinkInjections = { no_affiliate: true }
+
+    render(page)
+
+    await new Promise(res => setTimeout(res, 100)) // Await possible fetches
+
+    expect(fetchAds).not.toHaveBeenCalled()
+  })
+
   describe('Config', () => {
     describe('exclude_urls_pattern', () => {
       it('Should not inject if config exclude_urls_pattern matches current url', async () => {
@@ -617,5 +630,25 @@ describe('$routes/+page.svelte', () => {
         expect(document.querySelector('#playpilot-custom-style')).not.toBeTruthy()
       })
     })
+
+    describe('no_affiliate', () => {
+      it('Should not set window object if value is not given', async () => {
+        vi.mocked(fetchConfig).mockResolvedValueOnce({})
+
+        render(page)
+
+        await new Promise(res => setTimeout(res, 100)) // Await all fetches
+        expect(window.PlayPilotLinkInjections.no_affiliate).not.toBe(true)
+      })
+
+      it('Should set window object if value is true', async () => {
+        vi.mocked(fetchConfig).mockResolvedValueOnce({ no_affiliate: true })
+
+        render(page)
+
+        await new Promise(res => setTimeout(res, 100)) // Await all fetches
+        expect(window.PlayPilotLinkInjections.no_affiliate).toBe(true)
+      })
+    })
   })
 })

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

@@ -15,6 +15,8 @@ vi.mock('svelte', async (importActual) => ({
 
 describe('ListTitle.svelte', () => {
   beforeEach(() => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = {}
     vi.resetAllMocks()
   })
 
@@ -80,5 +82,14 @@ describe('ListTitle.svelte', () => {
 
       expect(onclick).not.toHaveBeenCalled()
     })
+
+    it('Should not render playlinks if no_affiliate is given in window object', () => {
+      window.PlayPilotLinkInjections.no_affiliate = true
+
+      // @ts-ignore
+      const { container } = render(ListTitle, { title: { ...title, providers: playlinks } })
+
+      expect(container.querySelectorAll('.playlink')).toHaveLength(0)
+    })
   })
 })

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

@@ -26,6 +26,8 @@ vi.mock('svelte', async (importActual) => ({
 
 describe('Title.svelte', () => {
   beforeEach(() => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = {}
     vi.resetAllMocks()
   })
 
@@ -104,4 +106,26 @@ describe('Title.svelte', () => {
 
     expect(queryByText('Watch trailer')).not.toBeTruthy()
   })
+
+  it('Should render playlinks by default', () => {
+    const { getByText } = render(Title, { title })
+
+    expect(getByText('Where to stream online')).toBeTruthy()
+  })
+
+  it('Should not render playlinks if no_affiliate is true on config', () => {
+    window.PlayPilotLinkInjections.no_affiliate = true
+
+    const { queryByText } = render(Title, { title })
+
+    expect(queryByText('Where to stream online')).not.toBeTruthy()
+  })
+
+  it('Should render description if no_affiliate is true even if small is true', () => {
+    window.PlayPilotLinkInjections.no_affiliate = true
+
+    const { getByText } = render(Title, { title: { ...title, description: 'Some description' }, small: true })
+
+    expect(getByText('Some description')).toBeTruthy()
+  })
 })