@playpilot/tpi 7.0.0-beta.7 → 7.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "7.0.0-beta.7",
+	"version": "7.0.1",
 	"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/api/auth.ts

@@ -5,7 +5,7 @@ const cookieName = 'EncryptedToken'
 const urlParam = 'articleReplacementEditToken'
 const editorialParam = 'playpilot-editorial-mode'
 
-export async function authorize({ href, throwError }: { href?: string, throwError?: boolean } = { href: window.location.href, throwError: false }): Promise<boolean> {
+export async function authorize({ href = window.location.href, throwError = false }: { href?: string, throwError?: boolean } = {}): Promise<boolean> {
   try {
     const apiToken = getApiToken()
     if (!apiToken) throw new Error('No token was provided')

package/src/lib/tracking.ts

@@ -37,6 +37,7 @@ export async function track(event: string, title: TitleData | null = null, paylo
   }
 
   payload.version = __SCRIPT_VERSION__
+  payload.time_since_initialize = window.PlayPilotLinkInjections?.time_at_initialize ? Date.now() - window.PlayPilotLinkInjections.time_at_initialize : 0
   payload.url = getFullUrlPath()
   payload.organization_sid = window.PlayPilotLinkInjections?.organization_sid || 'undefined'
   payload.domain_sid = window.PlayPilotLinkInjections?.domain_sid || 'undefined'

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

@@ -34,6 +34,8 @@ export type ScriptConfig = {
   initial_link_injections_promise?: Promise<LinkInjectionResponse> | null
   // 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.
@@ -42,4 +44,6 @@ export type ScriptConfig = {
   ads?: Campaign[]
   // The region the user is in, either fetched from an external service or based on the default region in the config object
   region?: string | null
+  // The time at which the script was initialized
+  time_at_initialize?: number
 }

package/src/main.ts

@@ -22,8 +22,10 @@ window.PlayPilotLinkInjections = {
   split_test_identifiers: {},
   evaluated_link_injections: [],
   initial_link_injections_promise: null,
+  time_at_initialize: 0,
   ads: [],
   require_consent: true,
+  no_affiliate: false,
   consents: {
     ads: false,
     pixels: false,
@@ -34,7 +36,7 @@ window.PlayPilotLinkInjections = {
   config: {},
   app: null,
 
-  async 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 }): Promise<void> {
+  async 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 }): Promise<void> {
     if (!options.token) {
       console.error('An API token is required.')
       return
@@ -51,6 +53,8 @@ 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
+    this.time_at_initialize = Date.now()
 
     if (this.require_consent === false) {
       setConsent({
@@ -82,12 +86,13 @@ window.PlayPilotLinkInjections = {
 
     const script = document.createElement('script')
 
+    script.id = 'playpilot-mount'
     script.src = `https://cdn.jsdelivr.net/npm/@playpilot/tpi@${__SCRIPT_VERSION__}/dist/${shouldLoadEditorial ? 'editorial.' : ''}mount.js`
     // script.src = './dist/mount.js' // Use me during development of this script
 
     script.onload = () => window.PlayPilotMount?.mount()
 
-    document.body.insertAdjacentElement('beforeend', script)
+    document.body.appendChild(script)
   },
 }
 

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()
   }
@@ -77,6 +78,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 = isUrlExcludedViaConfig(config)
       if (isUrlExcluded) return

package/src/routes/components/Debugger.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { SplitTest } from '$lib/enums/SplitTest'
+  import { getPageTextAndElements } from '$lib/injectionElements'
   import { getFullUrlPath } from '$lib/url'
   import { onDestroy } from 'svelte'
 
@@ -160,6 +161,11 @@
 
     <hr />
 
+    <button onclick={() => console.log(getPageTextAndElements(window.PlayPilotLinkInjections.config))}>Output elements in console</button>
+    <button onclick={() => console.log(getPageTextAndElements(window.PlayPilotLinkInjections.config).pageText)}>Output text in console</button>
+
+    <hr />
+
     <button onclick={onrerender}>Re-inject</button>
 
     {#if isUsingBetaScript}

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

@@ -21,6 +21,7 @@ describe('$lib/tracking', () => {
     window.PlayPilotLinkInjections = {}
 
     vi.resetAllMocks()
+    vi.useRealTimers()
 
     fakeFetch()
     vi.mocked(hasConsentedTo).mockImplementation(() => true)
@@ -72,7 +73,7 @@ describe('$lib/tracking', () => {
       expect(global.fetch).toHaveBeenCalledWith(
         expect.any(String),
         expect.objectContaining({
-          // eslint-disable-next-line no-undef
+
           body: expect.stringContaining(`"version":"${__SCRIPT_VERSION__}"`),
         }),
       )
@@ -175,6 +176,36 @@ describe('$lib/tracking', () => {
 
       expect(global.fetch).not.toHaveBeenCalled()
     })
+
+    it('Should include time_since_initialize', async () => {
+      vi.useFakeTimers()
+
+      window.PlayPilotLinkInjections.time_at_initialize = Date.now()
+
+      vi.advanceTimersByTime(150)
+
+      track('Some Event')
+      expect(global.fetch).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          body: expect.stringContaining('"time_since_initialize":150'),
+        }),
+      )
+    })
+
+    it('Should include time_since_initialize set to 0 if window object was not present', async () => {
+      vi.useFakeTimers()
+
+      vi.advanceTimersByTime(150)
+
+      track('Some Event')
+      expect(global.fetch).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          body: expect.stringContaining('"time_since_initialize":0'),
+        }),
+      )
+    })
   })
 
   describe('setTrackingSids', () => {

package/src/tests/main.test.js

@@ -1,48 +1,143 @@
 import { setConsent } from '$lib/consent'
 import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
+import { fakeFetch } from './helpers'
+import { fetchConfig } from '$lib/api/config'
+import { waitFor } from '@testing-library/svelte'
+import { isUrlExcludedViaConfig } from '$lib/url'
+import { pollLinkInjections } from '$lib/api/externalPages'
+import { getAuthToken, isEditorialModeEnabled } from '$lib/api/auth'
 
 vi.mock('$lib/consent', () => ({
   setConsent: vi.fn(),
   hasConsentedTo: vi.fn(),
 }))
 
+vi.mock('$lib/api/config', () => ({
+  fetchConfig: vi.fn(),
+}))
+
+vi.mock('$lib/api/externalPages', () => ({
+  pollLinkInjections: vi.fn(),
+}))
+
+vi.mock('$lib/url', () => ({
+  isUrlExcludedViaConfig: vi.fn(),
+}))
+
+vi.mock('$lib/api/auth', () => ({
+  getAuthToken: vi.fn(),
+  isEditorialModeEnabled: vi.fn(),
+}))
+
 describe('main.ts', () => {
-  beforeEach(() => {
+  beforeEach(async () => {
+    document.body.innerHTML = ''
+
+    fakeFetch()
+
     vi.resetModules()
     vi.resetAllMocks()
+
+    await import('../main')
   })
 
   afterAll(() => {
     vi.resetModules()
   })
 
-  it('Should not call setConsent when only a token is passed', async () => {
-    await import('../main')
+  describe('initialize', () => {
+    it('Should not call setConsent when only a token is passed', () => {
+      window.PlayPilotLinkInjections.initialize({ token: 'a' })
+
+      expect(setConsent).not.toHaveBeenCalled()
+
+      expect(window.PlayPilotLinkInjections.consents).toEqual({
+        ads: false,
+        pixels: false,
+        tracking: false,
+        split_tests: false,
+        affiliate: false,
+      })
+    })
 
-    window.PlayPilotLinkInjections.initialize({ token: 'a' })
+    it('Should call setConsent when require_consent is false', () => {
+      window.PlayPilotLinkInjections.initialize({ token: 'a', require_consent: false })
 
-    expect(setConsent).not.toHaveBeenCalled()
+      expect(setConsent).toHaveBeenCalledWith({
+        ads: true,
+        pixels: true,
+        tracking: true,
+        split_tests: true,
+        affiliate: true,
+      })
+    })
+
+    it('Should call config object and set the result to the window object', async () => {
+      vi.mocked(fetchConfig).mockResolvedValue({ html_selector: 'some_value' })
+
+      window.PlayPilotLinkInjections.initialize({ token: 'a' })
 
-    expect(window.PlayPilotLinkInjections.consents).toEqual({
-      ads: false,
-      pixels: false,
-      tracking: false,
-      split_tests: false,
-      affiliate: false,
+      expect(fetchConfig).toHaveBeenCalled()
+
+      await waitFor(() => {
+        expect(window.PlayPilotLinkInjections.config).toEqual({ html_selector: 'some_value' })
+      })
+    })
+
+    it('Should not call pollLinkInjections if config object excludes page', async () => {
+      vi.mocked(isUrlExcludedViaConfig).mockReturnValue(true)
+
+      window.PlayPilotLinkInjections.initialize({ token: 'a' })
+
+      expect(fetchConfig).toHaveBeenCalled()
+
+      await new Promise(res => setTimeout(res))
+
+      expect(pollLinkInjections).not.toHaveBeenCalled()
+    })
+
+    it('Should call pollLinkInjections if config object does not page', async () => {
+      vi.mocked(isUrlExcludedViaConfig).mockReturnValue(false)
+
+      window.PlayPilotLinkInjections.initialize({ token: 'a' })
+
+      expect(fetchConfig).toHaveBeenCalled()
+
+      await new Promise(res => setTimeout(res))
+
+      expect(pollLinkInjections).toHaveBeenCalled()
     })
   })
 
-  it('Should call setConsent when require_consent is false', async () => {
-    await import('../main')
+  describe('mount', () => {
+    it('Should insert script tag', () => {
+      window.PlayPilotLinkInjections.mount()
+
+      expect(document.querySelector('script#playpilot-mount')).toBeTruthy()
+    })
+
+    it('Should insert script tag with editorial mode if editiorial mode is enabled', () => {
+      vi.mocked(isEditorialModeEnabled).mockReturnValueOnce(true)
+
+      window.PlayPilotLinkInjections.mount()
+      expect(/** @type {HTMLScriptElement} */(document.querySelector('script#playpilot-mount')).src).toContain('editorial.mount.js')
+    })
+
+    it('Should insert script tag with editorial mode if editiorial mode is disabled but auth token is present', () => {
+      vi.mocked(isEditorialModeEnabled).mockReturnValueOnce(false)
+      vi.mocked(getAuthToken).mockReturnValueOnce('abc')
+
+      window.PlayPilotLinkInjections.mount()
+      expect(/** @type {HTMLScriptElement} */(document.querySelector('script#playpilot-mount')).src).toContain('editorial.mount.js')
+    })
 
-    window.PlayPilotLinkInjections.initialize({ token: 'a', require_consent: false })
+    it('Should insert script tag without editorial mode if editiorial mode is disabled but auth token is present', () => {
+      vi.mocked(isEditorialModeEnabled).mockReturnValueOnce(false)
+      vi.mocked(getAuthToken).mockReturnValueOnce('')
 
-    expect(setConsent).toHaveBeenCalledWith({
-      ads: true,
-      pixels: true,
-      tracking: true,
-      split_tests: true,
-      affiliate: true,
+      window.PlayPilotLinkInjections.mount()
+      expect(/** @type {HTMLScriptElement} */(document.querySelector('script#playpilot-mount')).src).not.toContain('editorial.mount.js')
+      expect(/** @type {HTMLScriptElement} */(document.querySelector('script#playpilot-mount')).src).toContain('mount.js')
     })
   })
 })

package/src/tests/mount.test.js

@@ -0,0 +1,63 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fakeFetch } from './helpers'
+import { clearLinkInjections } from '$lib/injection'
+import { mount } from 'svelte'
+
+vi.mock('$lib/injection', () => ({
+  clearLinkInjections: vi.fn(),
+}))
+
+vi.mock('svelte', () => ({
+  mount: vi.fn(),
+}))
+
+describe('mount.ts', () => {
+  beforeEach(async () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = {}
+    document.body.innerHTML = ''
+
+    fakeFetch()
+
+    vi.resetModules()
+    vi.resetAllMocks()
+
+    await import('../mount')
+  })
+
+  describe('mount', () => {
+    it('Should mount app', () => {
+      window.PlayPilotMount.mount()
+
+      expect(mount).toHaveBeenCalledWith(expect.any(Function), { target: expect.any(HTMLElement) })
+    })
+
+    it('Should assign app to window PlayPilotLinkInjections object', () => {
+      vi.mocked(mount).mockReturnValueOnce({ some_key: 'Some value' })
+
+      window.PlayPilotMount.mount()
+
+      expect(window.PlayPilotLinkInjections.app).toEqual({ some_key: 'Some value' })
+    })
+  })
+
+  describe('destroy', () => {
+    it('Should call clearLinkInjections and remove link injections element', () => {
+      document.body.innerHTML = '<div id="playpilot-link-injection"></div>'
+
+      window.PlayPilotMount.destroy()
+
+      expect(document.body.innerHTML).toBe('')
+      expect(clearLinkInjections).toHaveBeenCalled()
+    })
+
+    it('Should clear app on window PlayPilotLinkInjections object', () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections = { app: {} }
+
+      window.PlayPilotMount.destroy()
+
+      expect(window.PlayPilotLinkInjections.app).toBe(null)
+    })
+  })
+})

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

@@ -475,6 +475,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 () => {
@@ -633,5 +646,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()
+  })
 })