@playpilot/tpi 6.3.0 → 6.4.0-beta.2

package/package.json

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

package/src/lib/injection.ts

@@ -291,6 +291,7 @@ function createLinkInjectionElement(injection: LinkInjection): { injectionElemen
   injectionElement.dataset.playpilotInjectionKey = injection.key
 
   const linkElement = document.createElement('a')
+  linkElement.dataset.playpilotPosterUrl = injection.title_details?.standing_poster
   linkElement.innerText = injection.title
   linkElement.href = injection.playpilot_url
   linkElement.target = '_blank'

package/src/lib/scss/global.scss

@@ -99,3 +99,39 @@ h1, h2, h3, h4, h5 {
 ::view-transition-new(playpilot-title-content) {
   height: 100%;
 }
+
+@keyframes playpilot-poster-fly-in {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(1.5rem);
+  }
+}
+
+@keyframes playpilot-poster-fly-out {
+  to {
+    opacity: 0;
+    transform: translateX(-50%) translateY(0.5rem);
+  }
+}
+
+.playpilot-floating-poster {
+  opacity: 0;
+  position: absolute;
+  bottom: calc(100% + 0.15em);
+  left: 50%;
+  transform: translateX(-50%);
+  width: 40px;
+  height: auto;
+  border-radius: theme(border-radius-small);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transform-origin: bottom center;
+
+  &.loaded {
+    animation: playpilot-poster-fly-in 600ms cubic-bezier(0.35, 1.75, 0.75, 1);
+    opacity: 1;
+  }
+
+  &.animating-out {
+    animation: playpilot-poster-fly-out 150ms forwards;
+  }
+}

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

@@ -10,12 +10,6 @@ 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,7 +8,6 @@ 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/+page.svelte

@@ -18,6 +18,7 @@
   import Consent from './components/Consent.svelte'
   import Debugger from './components/Debugger.svelte'
   import UserJourney from './components/UserJourney.svelte'
+  import PostersScrollReveal from './components/PostersScrollReveal.svelte'
 
   let parentElement: HTMLElement | null = $state(null)
   let elements: HTMLElement[] = $state([])
@@ -233,6 +234,7 @@
 
 {#key linkInjections}
   <UserJourney />
+  <PostersScrollReveal />
 {/key}
 
 <Consent onchange={afterConsent} />

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) {
-      update()
+      onchange()
       return
     }
 
@@ -66,15 +66,7 @@
         affiliate: consent(1) && consent(7),
       })
 
-      update()
+      onchange()
     })
   }
-
-  function update() {
-    window.dispatchEvent(new CustomEvent('updateconsent', {
-      bubbles: true,
-    }))
-
-    onchange()
-  }
 </script>

package/src/routes/components/Debugger.svelte

@@ -27,8 +27,6 @@
     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 },
@@ -40,7 +38,6 @@
       [`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,6 +1,5 @@
 <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'
@@ -15,7 +14,7 @@
 
   const { playlink, disclaimer = '', hideCategory = false, onclick = () => null }: Props = $props()
 
-  const { name, url, logo_url, highlighted, cta_text, action_text, pixels, extra_info: { category } } = $derived(playlink)
+  const { name, url, logo_url, highlighted, cta_text, action_text, extra_info: { category } } = $derived(playlink)
 
   const categoryStrings = {
     SVOD: t('Stream'),
@@ -34,7 +33,6 @@
   class="playlink"
   class:highlighted={highlighted && cta_text}
   class:no-category={hideCategory}
-  class:no-subtext={!cta_text && hideCategory}
   data-playlink={name}
   rel="sponsored">
 
@@ -59,10 +57,6 @@
       <Disclaimer {disclaimer} small />
     {/if}
   </div>
-
-  {#if pixels?.length}
-    <TrackingPixels {pixels} />
-  {/if}
 </svelte:element>
 
 <style lang="scss">
@@ -168,10 +162,6 @@
     .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,5 +1,4 @@
 <script lang="ts">
-  import TrackingPixels from '../TrackingPixels.svelte'
   import { removeImageUrlPrefix } from '$lib/image'
   import type { PlaylinkData } from '$lib/types/playlink'
 
@@ -12,18 +11,13 @@
 
   const { playlink, size = 30, onclick = () => null }: Props = $props()
 
-  const { name, url, logo_url, pixels } = $derived(playlink)
+  const { name, url, logo_url } = $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

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+
+  const linksWithPosters = Array.from(document.querySelectorAll<HTMLElement>('[data-playpilot-poster-url]'))
+  const linksWithCurrentlyVisiblePosters = new Set<HTMLElement>()
+  const targetThreshold = 0.7
+  const posterSelector = '[data-playpilot-poster]'
+
+  let scrollTimeout: ReturnType<typeof setTimeout> | null = null
+
+  onMount(() => {
+    return destroyAllPosters
+  })
+
+  function onscroll(): void {
+    setScrollTimeout()
+
+    const windowHeight = window.innerHeight
+    const linksWithinTargetViewport = new Set<HTMLElement>()
+    const targetFromBottom = windowHeight * targetThreshold
+    const targetFromTop = windowHeight - targetFromBottom
+
+    for (const link of linksWithPosters) {
+      const { top } = link.getBoundingClientRect()
+
+      const isInsideTargetViewport = top < targetFromBottom && top > targetFromTop
+
+      if (!isInsideTargetViewport) continue
+
+      linksWithinTargetViewport.add(link)
+    }
+
+    for (const link of linksWithinTargetViewport) {
+      if (linksWithCurrentlyVisiblePosters.has(link)) continue
+
+      createPosterForLink(link)
+      linksWithCurrentlyVisiblePosters.add(link)
+    }
+  }
+
+  function createPosterForLink(link: HTMLElement): void {
+    const posterUrl = link.dataset.playpilotPosterUrl!
+
+    const element = document.createElement('img')
+    element.classList.add('playpilot-floating-poster')
+    element.dataset.playpilotPoster = ''
+    element.src = posterUrl
+    element.alt = ''
+    element.onload = () => element.classList.add('loaded')
+
+    link.insertAdjacentElement('afterbegin', element)
+  }
+
+  function destroyPosterForLink(link: HTMLElement): void {
+    const poster = link.querySelector(posterSelector)
+
+    if (!poster) return
+
+    poster.classList.add('animating-out')
+
+    setTimeout(() => poster.remove(), 500)
+  }
+
+  function destroyAllPosters(): void {
+    for (const poster of Array.from(document.querySelectorAll(posterSelector))) {
+      poster.remove()
+    }
+  }
+
+  function setScrollTimeout() {
+    if (scrollTimeout) clearTimeout(scrollTimeout)
+
+    scrollTimeout = setTimeout(() => {
+      for (const link of linksWithCurrentlyVisiblePosters) {
+        destroyPosterForLink(link)
+        linksWithCurrentlyVisiblePosters.delete(link)
+      }
+    }, 500)
+  }
+</script>
+
+<svelte:window {onscroll} />

package/src/routes/components/TitlePopover.svelte

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

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

@@ -15,13 +15,10 @@ describe('Consent.svelte', () => {
     expect(onchange).toHaveBeenCalled()
   })
 
-  it('Should call onchange and fire window event after user has consented', () => {
+  it('Should call onchange 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
@@ -42,7 +39,6 @@ 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

@@ -131,36 +131,4 @@ 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,10 +3,6 @@ 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' } }
 
@@ -28,12 +24,4 @@ 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

@@ -0,0 +1,107 @@
+import { render } from '@testing-library/svelte'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import PostersScrollReveal from '../../../routes/components/PostersScrollReveal.svelte'
+
+function createPosterLink(top = 0, url = 'poster.jpg') {
+  const link = document.createElement('a')
+  link.dataset.playpilotPosterUrl = url
+
+  // @ts-ignore
+  link.getBoundingClientRect = () => ({ top })
+
+  document.body.appendChild(link)
+  return link
+}
+
+describe('FloatingPoster', () => {
+  beforeEach(() => {
+    document.body.innerHTML = ''
+
+    Object.defineProperty(window, 'innerHeight', {
+      value: 1000,
+      writable: true,
+    })
+
+    vi.useFakeTimers()
+    vi.resetAllMocks()
+  })
+
+  it('Should create poster when link is in viewport', async () => {
+    createPosterLink(500)
+
+    render(PostersScrollReveal)
+
+    window.dispatchEvent(new Event('scroll'))
+
+    const poster = document.querySelector('[data-playpilot-poster]')
+    expect(poster).toBeTruthy()
+    expect(poster?.getAttribute('src')).toBe('poster.jpg')
+  })
+
+  it('Should not create poster when link is below in viewport', async () => {
+    createPosterLink(2000)
+
+    render(PostersScrollReveal)
+
+    window.dispatchEvent(new Event('scroll'))
+
+    expect(document.querySelector('[data-playpilot-poster]')).not.toBeTruthy()
+  })
+
+  it('Should not create poster when link is above in viewport', async () => {
+    createPosterLink(-100)
+
+    render(PostersScrollReveal)
+
+    window.dispatchEvent(new Event('scroll'))
+
+    expect(document.querySelector('[data-playpilot-poster]')).not.toBeTruthy()
+  })
+
+  it('Should not create poster when link is in viewport but before threshold', async () => {
+    createPosterLink(50)
+    createPosterLink(900)
+
+    render(PostersScrollReveal)
+
+    window.dispatchEvent(new Event('scroll'))
+
+    expect(document.querySelector('[data-playpilot-poster]')).not.toBeTruthy()
+  })
+
+  it('Should create poster for each link in viewport', async () => {
+    createPosterLink(10)
+    createPosterLink(500)
+    createPosterLink(500)
+    createPosterLink(510)
+    createPosterLink(520)
+    createPosterLink(2000)
+
+    render(PostersScrollReveal)
+
+    window.dispatchEvent(new Event('scroll'))
+
+    expect(document.querySelectorAll('[data-playpilot-poster]')).toHaveLength(4)
+  })
+
+  it('Should hide poster after not scrolling for given timeout', async () => {
+    createPosterLink(500)
+
+    render(PostersScrollReveal)
+
+    window.dispatchEvent(new Event('scroll'))
+    expect(document.querySelector('[data-playpilot-poster]')).toBeTruthy()
+
+    vi.advanceTimersByTime(200)
+    expect(document.querySelector('[data-playpilot-poster]')).toBeTruthy()
+
+    vi.advanceTimersByTime(400)
+    expect(document.querySelector('[data-playpilot-poster]')).toBeTruthy()
+
+    vi.advanceTimersByTime(1000)
+    expect(document.querySelector('[data-playpilot-poster]')).not.toBeTruthy()
+
+    window.dispatchEvent(new Event('scroll'))
+    expect(document.querySelector('[data-playpilot-poster]')).toBeTruthy()
+  })
+})

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

@@ -1,4 +1,4 @@
-import { render, waitFor  } from '@testing-library/svelte'
+import { render  } from '@testing-library/svelte'
 import { describe, expect, it, vi } from 'vitest'
 
 import TrackingPixels from '../../../routes/components/TrackingPixels.svelte'
@@ -26,22 +26,4 @@ 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()
-    })
-  })
 })