@playpilot/tpi 6.4.0-beta.8 → 6.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "6.4.0-beta.8",
+	"version": "6.4.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/actions/focustrap.ts

@@ -1,4 +1,4 @@
-export function focustrap(node: HTMLElement) {
+export function focustrap(node: HTMLElement): { destroy(): void } {
   function getFocusableElements(): HTMLElement[] {
     return Array.from(node.querySelectorAll<HTMLElement>('button:not([disabled]), [href], [tabindex]:not([tabindex="-1"])'))
   }

package/src/lib/enums/SplitTest.ts

@@ -4,4 +4,9 @@ export const SplitTest = {
     numberOfVariants: 2,
     variantNames: ['Separated', 'Inline'] as string[],
   },
+  PostersScrollReveal: {
+    key: 'posters_scroll_reveal',
+    numberOfVariants: 2,
+    variantNames: ['Default', 'With Posters'] as string[],
+  },
 } as const

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

@@ -10,6 +10,12 @@ declare global {
       mockAd(override?: Record<any, any> = {}): void
     }
   }
+
+  declare namespace svelteHTML {
+    interface HTMLAttributes<T> {
+      'onupdateconsent'?: (event: CustomEvent<{}>) => void
+    }
+  }
 }
 
 export { }

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

@@ -8,6 +8,7 @@ export type PlaylinkData = {
   cta_text?: string | null
   // This doesn't actually exists on the API objects, it's only present from ads
   action_text?: string | null,
+  pixels?: string[]
   extra_info: {
     category: PlaylinkCategory
   }

package/src/routes/components/Consent.svelte

@@ -17,7 +17,7 @@
     // If require_consent has been explicitely turned off we return right away and call `onchange`.
     // We don't need to set consent values as require_consent=false will mean all consent is true.
     if (window.PlayPilotLinkInjections.require_consent === false) {
-      onchange()
+      update()
       return
     }
 
@@ -66,7 +66,15 @@
         affiliate: consent(1) && consent(7),
       })
 
-      onchange()
+      update()
     })
   }
+
+  function update() {
+    window.dispatchEvent(new CustomEvent('updateconsent', {
+      bubbles: true,
+    }))
+
+    onchange()
+  }
 </script>

package/src/routes/components/Debugger.svelte

@@ -27,6 +27,8 @@
     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]'))
+
     return {
       'Config': [
         { label: 'Domain', data: data.domain_sid },
@@ -38,6 +40,7 @@
       [`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 })),
+      [`Visible pixels (${visiblePixels.length})`]: visiblePixels.map((pixel, index) => ({ label: index + 1, data: pixel.src })),
     }
   }
 

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import Disclaimer from '../Ads/Disclaimer.svelte'
+  import TrackingPixels from '../TrackingPixels.svelte'
   import { hasConsentedTo } from '$lib/consent'
   import { removeImageUrlPrefix } from '$lib/image'
   import { t } from '$lib/localization'
@@ -14,7 +15,7 @@
 
   const { playlink, disclaimer = '', hideCategory = false, onclick = () => null }: Props = $props()
 
-  const { name, url, logo_url, highlighted, cta_text, action_text, extra_info: { category } } = $derived(playlink)
+  const { name, url, logo_url, highlighted, cta_text, action_text, pixels, extra_info: { category } } = $derived(playlink)
 
   const categoryStrings = {
     SVOD: t('Stream'),
@@ -31,8 +32,9 @@
   href={url}
   target="_blank"
   class="playlink"
-  class:highlighted={highlighted && cta_text}
+  class:highlighted={highlighted}
   class:no-category={hideCategory}
+  class:no-subtext={!cta_text && hideCategory}
   data-playlink={name}
   rel="sponsored">
 
@@ -57,6 +59,10 @@
       <Disclaimer {disclaimer} small />
     {/if}
   </div>
+
+  {#if pixels?.length}
+    <TrackingPixels {pixels} />
+  {/if}
 </svelte:element>
 
 <style lang="scss">
@@ -162,6 +168,10 @@
     .no-category & {
       grid-template-areas: "image name action" "image cta action";
     }
+
+    .no-subtext & {
+      grid-template-areas: "image name action";
+    }
   }
 
   .name {

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import TrackingPixels from '../TrackingPixels.svelte'
   import { removeImageUrlPrefix } from '$lib/image'
   import type { PlaylinkData } from '$lib/types/playlink'
 
@@ -11,13 +12,18 @@
 
   const { playlink, size = 30, onclick = () => null }: Props = $props()
 
-  const { name, url, logo_url } = $derived(playlink)
+  const { name, url, logo_url, pixels } = $derived(playlink)
 </script>
 
 <a href={url} target="_blank" class="playlink" data-playlink={name} rel="sponsored" {onclick} style:--size="{size}px">
   <img src={removeImageUrlPrefix(logo_url)} alt={name} height={size} width={size} />
+
+  {#if pixels?.length}
+    <TrackingPixels {pixels} />
+  {/if}
 </a>
 
+
 <style lang="scss">
   .playlink {
     display: inline-block;

package/src/routes/components/PostersScrollReveal.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+  import { mobileBreakpoint } from '$lib/constants'
+  import { SplitTest } from '$lib/enums/SplitTest'
+  import { isInSplitTestVariant, trackSplitTestAction, trackSplitTestView } from '$lib/splitTest'
   import { onMount } from 'svelte'
 
   const linksWithPosters = Array.from(document.querySelectorAll<HTMLElement>('[data-playpilot-poster-url]'))
@@ -6,14 +9,39 @@
   const targetThreshold = 0.7
   const posterSelector = '[data-playpilot-poster]'
 
+  let windowWidth = $state(0)
   let postersShownForLink: Record<string, HTMLElement> = {}
   let scrollTimeout: ReturnType<typeof setTimeout> | null = null
 
+  const isMobile = $derived(windowWidth < mobileBreakpoint)
+
   onMount(() => {
+    if (!isMobile) return
+
+    trackSplitTestView(SplitTest.PostersScrollReveal)
+
     return destroyAllPosters
   })
 
+  $effect(() => {
+    if (!isMobile) return
+    if (!linksWithPosters.length) return
+
+    const onclick = () => trackSplitTestAction(SplitTest.PostersScrollReveal, 'click')
+
+    if (!isInSplitTestVariant(SplitTest.PostersScrollReveal)) return
+
+    for(const link of linksWithPosters) link.addEventListener('click', onclick)
+
+    return () => {
+      for(const link of linksWithPosters) link.removeEventListener('click', onclick)
+    }
+  })
+
   function onscroll(): void {
+    if (!isMobile) return
+    if (!isInSplitTestVariant(SplitTest.PostersScrollReveal)) return
+
     setScrollTimeout()
 
     const windowHeight = window.innerHeight
@@ -84,4 +112,4 @@
   }
 </script>
 
-<svelte:window {onscroll} />
+<svelte:window {onscroll} bind:innerWidth={windowWidth} />

package/src/routes/components/TitlePopover.svelte

@@ -8,7 +8,6 @@
   import Title from './Title.svelte'
   import TopScroll from './Ads/TopScroll.svelte'
   import Display from './Ads/Display.svelte'
-  import TrackingPixels from './TrackingPixels.svelte'
 
   interface Props {
     event: MouseEvent
@@ -68,9 +67,6 @@
 <div class="title-popover" bind:this={element} data-playpilot-title-popover role="region" aria-labelledby="title">
   <Popover append={displayAd ? append : null} bubble={topScroll ? bubble : null}>
     <Title {title} small  />
-
-    <!-- Temporary tracking pixel to verify our own tracking works as expected. The random id exists to bypass cache on subsequent requests. -->
-    <TrackingPixels pixels={[`https://imp.pxf.io/i/2439446/837174/9358?id=${Math.random()}`]} />
   </Popover>
 </div>
 

package/src/routes/components/TrackingPixels.svelte

@@ -6,13 +6,19 @@
   }
 
   const { pixels }: Props = $props()
+
+  let key = $state(Math.random())
 </script>
 
-{#if hasConsentedTo('pixels')}
-  {#each pixels as src}
-    <img {src} alt="" />
-  {/each}
-{/if}
+<svelte:window onupdateconsent={() => key = Math.random()} />
+
+{#key key}
+  {#if hasConsentedTo('pixels')}
+    {#each pixels as src}
+      <img {src} alt="" data-playpilot-pixel />
+    {/each}
+  {/if}
+{/key}
 
 <style lang="scss">
   img {

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

@@ -15,10 +15,13 @@ describe('Consent.svelte', () => {
     expect(onchange).toHaveBeenCalled()
   })
 
-  it('Should call onchange after user has consented', () => {
+  it('Should call onchange and fire window event after user has consented', () => {
     // @ts-ignore
     window.PlayPilotLinkInjections = { require_consent: true }
 
+    const mock = vi.fn()
+    window.addEventListener('updateconsent', mock)
+
     // @ts-ignore
     window.__tcfapi = (command, _version, callback) => {
       if (command !== 'addEventListener') return
@@ -39,6 +42,7 @@ describe('Consent.svelte', () => {
     window.__tcfapi()
 
     expect(onchange).toHaveBeenCalled()
+    expect(mock).toHaveBeenCalled()
   })
 
   it('Should not call onchange after user has consented but eventStatus is invalid', () => {

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

@@ -79,12 +79,11 @@ describe('Playlink.svelte', () => {
     expect(getByText('Some CTA')).toBeTruthy()
   })
 
-  it('Should not highlight or show category text for playlinks that have highlighted as true but have no cta_text', () => {
+  it('Should highlight playlinks that have highlighted as true even if they have no cta_text', () => {
     // @ts-ignore
-    const { getByText, queryByText } = render(Playlink, { playlink: { name: 'Some playlink', logo_url: 'logo', highlighted: true, cta_text: '', extra_info: { category: 'BUY' } } })
+    const { getByText } = render(Playlink, { playlink: { name: 'Some playlink', logo_url: 'logo', highlighted: true, cta_text: '', extra_info: { category: 'BUY' } } })
 
-    expect(getByText('Some playlink').closest('.playlink')?.classList).not.toContain('highlighted')
-    expect(queryByText('Some CTA')).not.toBeTruthy()
+    expect(getByText('Some playlink').closest('.playlink')?.classList).toContain('highlighted')
   })
 
   it('Should not highlight playlinks that do not have highlighted set to true', () => {
@@ -131,4 +130,36 @@ describe('Playlink.svelte', () => {
 
     expect(getByTestId('disclaimer')).toBeTruthy()
   })
+
+
+  it('Should render given tracking pixels', () => {
+    vi.mocked(hasConsentedTo).mockImplementation(() => true)
+
+    const playlink = { name: 'Some playlink', logo_url: 'logo', pixels: ['https://some-pixel.com/a.jpg'], extra_info: { category: 'SVOD' } }
+    // @ts-ignore
+    const { container } = render(Playlink, { playlink })
+
+    expect(container.querySelector('img[src*="https://some-pixel.com/a.jpg"]')).toBeTruthy()
+  })
+
+  it('Should include no-subtext class if no cta_text is given and hideCategory is true', () => {
+    // @ts-ignore
+    const { container } = render(Playlink, { playlink: { ...playlink, cta_text: '' }, hideCategory: true })
+
+    expect(container.querySelector('.no-subtext')).toBeTruthy()
+  })
+
+  it('Should not include no-subtext class if no cta_text is given but hideCategory is false', () => {
+    // @ts-ignore
+    const { container } = render(Playlink, { playlink: { ...playlink, cta_text: '' }, hideCategory: false })
+
+    expect(container.querySelector('.no-subtext')).not.toBeTruthy()
+  })
+
+  it('Should not include no-subtext class if cta_text is given and hideCategory is true', () => {
+    // @ts-ignore
+    const { container } = render(Playlink, { playlink: { ...playlink, cta_text: 'Some text' }, hideCategory: true })
+
+    expect(container.querySelector('.no-subtext')).not.toBeTruthy()
+  })
 })

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

@@ -3,6 +3,10 @@ import { describe, expect, it, vi } from 'vitest'
 
 import PlaylinkIcon from '../../../../routes/components/Playlinks/PlaylinkIcon.svelte'
 
+vi.mock('$lib/consent', () => ({
+  hasConsentedTo: vi.fn(() => true),
+}))
+
 describe('PlaylinkIcon.svelte', () => {
   const playlink = { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } }
 
@@ -24,4 +28,12 @@ describe('PlaylinkIcon.svelte', () => {
     expect(getByAltText(playlink.name).getAttribute('width')).toBe('20')
     expect(getByAltText(playlink.name).getAttribute('height')).toBe('20')
   })
+
+  it('Should render given tracking pixels', () => {
+    const playlink = { name: 'Some playlink', logo_url: 'logo', pixels: ['https://some-pixel.com/a.jpg'], extra_info: { category: 'SVOD' } }
+    // @ts-ignore
+    const { container } = render(PlaylinkIcon, { playlink })
+
+    expect(container.querySelector('img[src*="https://some-pixel.com/a.jpg"]')).toBeTruthy()
+  })
 })

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

@@ -1,6 +1,14 @@
-import { render } from '@testing-library/svelte'
+import { fireEvent, render } from '@testing-library/svelte'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import PostersScrollReveal from '../../../routes/components/PostersScrollReveal.svelte'
+import { mobileBreakpoint } from '$lib/constants'
+import { isInSplitTestVariant, trackSplitTestAction } from '$lib/splitTest'
+
+vi.mock('$lib/splitTest', () => ({
+  trackSplitTestView: vi.fn(),
+  trackSplitTestAction: vi.fn(),
+  isInSplitTestVariant: vi.fn(() => true),
+}))
 
 function createPosterLink(top = 0, url = 'poster.jpg') {
   const link = document.createElement('a')
@@ -22,8 +30,15 @@ describe('FloatingPoster', () => {
       writable: true,
     })
 
+    Object.defineProperty(window, 'innerWidth', {
+      value: mobileBreakpoint - 1,
+      writable: true,
+    })
+
     vi.useFakeTimers()
     vi.resetAllMocks()
+
+    vi.mocked(isInSplitTestVariant).mockReturnValue(true)
   })
 
   it('Should create poster when link is in viewport', async () => {
@@ -38,6 +53,21 @@ describe('FloatingPoster', () => {
     expect(poster?.getAttribute('src')).toBe('poster.jpg')
   })
 
+  it('Should not create posters on desktop when link is in viewport', async () => {
+    createPosterLink(500)
+
+    Object.defineProperty(window, 'innerWidth', {
+      value: mobileBreakpoint + 1,
+      writable: true,
+    })
+
+    render(PostersScrollReveal)
+
+    window.dispatchEvent(new Event('scroll'))
+
+    expect(document.querySelector('[data-playpilot-poster]')).not.toBeTruthy()
+  })
+
   it('Should not create poster when link is below in viewport', async () => {
     createPosterLink(2000)
 
@@ -117,4 +147,16 @@ describe('FloatingPoster', () => {
     window.dispatchEvent(new Event('scroll'))
     expect(document.querySelector('[data-playpilot-poster]')).toBeTruthy()
   })
+
+  it('Should fire split test tracking on click', async () => {
+    createPosterLink(500)
+
+    render(PostersScrollReveal)
+
+    window.dispatchEvent(new Event('scroll'))
+
+    await fireEvent.click(/** @type {HTMLElement} */ (document.querySelector('[data-playpilot-poster]')))
+
+    expect(trackSplitTestAction).toHaveBeenCalled()
+  })
 })

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

@@ -1,4 +1,4 @@
-import { render  } from '@testing-library/svelte'
+import { render, waitFor  } from '@testing-library/svelte'
 import { describe, expect, it, vi } from 'vitest'
 
 import TrackingPixels from '../../../routes/components/TrackingPixels.svelte'
@@ -26,4 +26,22 @@ describe('TrackingPixels.svelte', () => {
 
     expect(queryByRole('presentation')).not.toBeTruthy()
   })
+
+  it('Should re-render when updateconsent is fired', async () => {
+    vi.mocked(hasConsentedTo).mockImplementation(() => false)
+
+    const pixels = ['https://image.com/a.jpg']
+    const { queryByRole } = render(TrackingPixels, { pixels })
+
+    expect(queryByRole('presentation')).not.toBeTruthy()
+
+    vi.mocked(hasConsentedTo).mockImplementation(() => true)
+    window.dispatchEvent(new CustomEvent('updateconsent', {
+      bubbles: true,
+    }))
+
+    await waitFor(() => {
+      expect(queryByRole('presentation')).toBeTruthy()
+    })
+  })
 })