@playpilot/tpi 6.3.0-beta.5 → 6.3.0

package/package.json

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

package/src/lib/injection.ts

@@ -291,7 +291,6 @@ 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,39 +99,3 @@ 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 500ms cubic-bezier(0.25, 1.75, 0.5, 1);
-    opacity: 1;
-  }
-
-  &.animating-out {
-    animation: playpilot-poster-fly-out 150ms forwards;
-  }
-}

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/+page.svelte

@@ -18,7 +18,6 @@
   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([])
@@ -73,12 +72,12 @@
 
       window.PlayPilotLinkInjections.config = config
 
-      isUrlExcluded = !!(config?.exclude_urls_pattern && url.match(new RegExp(config.exclude_urls_pattern)))
-      if (isUrlExcluded) return
-
       if (config?.custom_style) insertCustomStyle(config.custom_style || '')
       if (config?.explore_navigation_selector) insertExploreIntoNavigation()
 
+      isUrlExcluded = !!(config?.exclude_urls_pattern && url.match(new RegExp(config.exclude_urls_pattern)))
+      if (isUrlExcluded) return
+
       setElements(config?.html_selector || '', config?.exclude_elements_selector || '')
     } catch(error) {
       // We return if the config did not get fetched properly, as we can't determine what should and should
@@ -234,7 +233,6 @@
 
 {#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) {
-      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/Explore/Explore.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { heading } from '$lib/actions/heading'
+  import { fetchAds } from '$lib/api/ads'
   import { fetchTitles } from '$lib/api/titles'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { exploreParentSelector } from '$lib/explore'
@@ -46,7 +47,11 @@
     height = element?.closest<HTMLElement>(exploreParentSelector)?.style.height || null
   })
 
-  onMount(() => track(TrackingEvent.ExplorePageView))
+  onMount(async () => {
+    track(TrackingEvent.ExplorePageView)
+
+    if (!window.PlayPilotLinkInjections.ads?.length) window.PlayPilotLinkInjections.ads = await fetchAds()
+  })
 
   async function getTitlesForFilter(): Promise<APIPaginatedResult<TitleData>> {
     latestRequestId += 1

package/src/routes/components/Explore/Filter/Search.svelte

@@ -41,12 +41,14 @@
     border: theme(explore-search-border, 0);
     border-radius: theme(exlore-search-border-radius, border-radius);
     background: theme(explore-search-background, content);
+    transition: none;
     color: theme(text-color-alt);
-    font-size: theme(font-size-base);
+    font-size: theme(font-size-large);
     font-family: theme(font-family);
 
     &:focus {
-      outline: 1px solid white;
+      outline: theme(explore-search-focus-outline, 1px solid white);
+      outline-offset: 0;
     }
 
     &::placeholder {

package/src/routes/components/Modal.svelte

@@ -41,9 +41,9 @@
   let windowWidth = $state(0)
   let modalElement: HTMLElement | null = $state(null)
   let dialogElement: HTMLElement | null = $state(null)
+  let closeElement: HTMLElement | null = $state(null)
   let dialogOffset: number = $state(0)
   let hasPreviousModal = $state(false)
-  let isTransitioningIn = $state(false)
 
   const isMobile = $derived(windowWidth < mobileBreakpoint)
 
@@ -79,10 +79,10 @@
     scrollableElement?.scrollTo(0, initialScrollPosition)
   }
 
-  function scaleOrFly(node: Element, options: { y: number } = { y: 0 }): TransitionConfig {
+  function scaleOrFly(node: Element): TransitionConfig {
     if (prefersReducedMotion.current) return fade(node, { duration: 0 })
 
-    if (isMobile) return fly(node, { duration: 250, ...options })
+    if (isMobile) return fly(node, { duration: 250, y: window.innerHeight, opacity: 1 })
     return scale(node, { duration: 150, start: 0.85 })
   }
 
@@ -103,6 +103,14 @@
   onhashchange={close}
   bind:innerWidth={windowWidth} />
 
+{#snippet closeButton()}
+  <div class="close {closeButtonStyle}" transition:scaleOrFly|global bind:this={closeElement}>
+    <RoundButton onclick={close} aria-label="Close">
+      <IconClose />
+    </RoundButton>
+  </div>
+{/snippet}
+
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
@@ -114,38 +122,38 @@
   style:--dialog-offset="{dialogOffset}px"
   onclick={closeOnBackdropClick}
   data-testid="modal"
-  transition:fade|global={{ duration: 150 }}
+  in:fade|global={{ duration: 150 }}
+  out:fade|global={{ duration: 150, delay: 100 }}
   bind:this={modalElement}
   use:focustrap>
   {#if prepend}
-    <div class="prepend" transition:scaleOrFly|global={{ y: window.innerHeight }} data-view-transition-new="playpilot-title-extra">
+    <div class="prepend" transition:scaleOrFly|global data-view-transition-new="playpilot-title-extra">
       {@render prepend()}
     </div>
   {/if}
 
   {#if bubble}
-    <div class="bubble" transition:scaleOrFly|global={{ y: window.innerHeight }} data-view-transition-new="playpilot-title-extra">
+    <div class="bubble" transition:scaleOrFly|global data-view-transition-new="playpilot-title-extra">
       {@render bubble()}
     </div>
   {/if}
 
   {#if isMobile}
     <div class="swipe-handle" transition:scaleOrFly|global>
-      <SwipeHandle target={dialogElement!} onpassed={close} />
+      {#if dialogElement && closeElement}
+        <SwipeHandle targets={[dialogElement, closeElement]} onpassed={close} />
+      {/if}
     </div>
   {/if}
 
   <div
     class="dialog"
-    class:transitioning={isTransitioningIn}
     {onscroll}
     bind:this={dialogElement}
     role="dialog"
     aria-labelledby="title"
     data-view-transition-new="playpilot-title-content"
-    onintrostart={() => isTransitioningIn = true}
-    onintroend={() => isTransitioningIn = false}
-    transition:scaleOrFly|global={{ y: window.innerHeight }}>
+    transition:scaleOrFly|global>
     {#if hasPreviousModal}
       <div class="close back {closeButtonStyle}">
         <RoundButton onclick={() => goBackToPreviousModal()} aria-label="Back">
@@ -154,14 +162,16 @@
       </div>
     {/if}
 
-    <div class="close {closeButtonStyle}">
-      <RoundButton onclick={close} aria-label="Close">
-        <IconClose />
-      </RoundButton>
-    </div>
-
     {@render children()}
+
+    {#if !isMobile}
+      {@render closeButton()}
+    {/if}
   </div>
+
+  {#if isMobile}
+    {@render closeButton()}
+  {/if}
 </div>
 
 <style lang="scss">
@@ -174,7 +184,6 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
-    overflow: auto;
     top: 0;
     right: 0;
     bottom: 0;
@@ -182,6 +191,8 @@
     background: theme(detail-backdrop, rgba(0, 0, 0, 0.65));
 
     @include desktop() {
+      overflow: auto;
+      overscroll-behavior: contain;
       padding: margin(2) 0;
     }
 
@@ -208,9 +219,11 @@
     margin-top: auto;
     padding-bottom: env(safe-area-inset-bottom);
     overflow: auto;
+    overscroll-behavior: contain;
     border-radius: theme(detail-border-radius, margin(1) margin(1) 0 0);
     background: theme(detail-background, light);
-    transition: transform 200ms;
+    will-change: top;
+    transition: top 200ms;
 
     @supports (height: 1dvh) {
       height: 80dvh;
@@ -218,7 +231,7 @@
 
     @include desktop() {
       height: unset;
-      margin-top: 0;
+      margin: auto 0;
       padding-bottom: 0;
       overflow: visible;
       border-radius: theme(detail-border-radius, border-radius-large);
@@ -262,11 +275,14 @@
     --playpilot-button-text-color: #{theme(modal-close-button-text-color, text-color-alt)};
     z-index: 5;
     position: fixed;
-    top: calc(var(--dialog-offset) + margin(1));
+    margin-top: calc(var(--dialog-offset) + margin(1));
+    top: 0;
     right: margin(1);
+    transition: top 200ms;
 
     @include desktop() {
       position: absolute;
+      margin-top: 0;
       top: margin(1);
     }
 
@@ -291,10 +307,6 @@
         }
       }
     }
-
-    .transitioning & {
-      top: margin(1);
-    }
   }
 
   .prepend {

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'),
@@ -33,6 +34,7 @@
   class="playlink"
   class:highlighted={highlighted && cta_text}
   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/SwipeHandle.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   interface Props {
-    target?: HTMLElement
+    targets: HTMLElement[]
     threshold?: number
     isDragging?: boolean
     passedThreshold?: boolean
@@ -8,7 +8,7 @@
   }
 
   let {
-    target,
+    targets,
     threshold = 100,
     isDragging = $bindable(false),
     passedThreshold = $bindable(false),
@@ -28,28 +28,33 @@
 
   export function start(event: TouchEvent): void {
     if (!event) return
-    if (!target) return
 
     isDragging = true
     hasBeenDragged = true
 
     movementStartY = event.touches[0].pageY
-    target.style.transitionDuration = '0ms'
+
+    for (const target of targets) {
+      target.style.transitionDuration = '0ms'
+    }
   }
 
   export function move(event: TouchEvent): void {
     if (!event) return
-    if (!target) return
     if (!isDragging) return
 
+    event.preventDefault()
+
     movementCurrentY = event.touches[0].pageY
 
-    target.style.transform = `translateY(${difference}px)`
     handleElement!.style.transform = `translateY(${difference}px)`
+
+    for (const target of targets) {
+      target.style.top = `${difference}px`
+    }
   }
 
   export function end(): void {
-    if (!target) return
     if (!isDragging) return
 
     isDragging = false
@@ -57,8 +62,12 @@
     if (passedThreshold) {
       onpassed()
     } else {
-      target.removeAttribute('style')
       handleElement!.removeAttribute('style')
+
+      for (const target of targets) {
+        target.style.removeProperty('transition')
+        requestAnimationFrame(() => target.style.top = '0px')
+      }
     }
 
     movementStartY = 0

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

@@ -6,6 +6,7 @@ import { fetchTitles } from '$lib/api/titles'
 import { title } from '$lib/fakeData'
 import { TrackingEvent } from '$lib/enums/TrackingEvent'
 import { track } from '$lib/tracking'
+import { fetchAds } from '$lib/api/ads'
 
 vi.mock('$lib/api/titles', () => ({
   fetchTitles: vi.fn(),
@@ -19,8 +20,15 @@ vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
 }))
 
+vi.mock('$lib/api/ads', () => ({
+  fetchAds: vi.fn(),
+}))
+
 describe('Explore.svelte', () => {
   beforeEach(() => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = {}
+
     vi.resetAllMocks()
   })
 
@@ -30,10 +38,23 @@ describe('Explore.svelte', () => {
     expect(fetchTitles).toHaveBeenCalledWith({ page_size: 24, page: 1 })
   })
 
-  it('Should call tracking event on mount', () => {
+  it('Should call tracking event and fetchAds on mount', () => {
     render(Explore)
 
     expect(track).toHaveBeenCalledWith(TrackingEvent.ExplorePageView)
+    expect(fetchAds).toHaveBeenCalled()
+  })
+
+  it('Should not call fetchAds on mount if ads are already present', () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = {
+      // @ts-ignore
+      ads: ['a'],
+    }
+
+    render(Explore)
+
+    expect(fetchAds).not.toHaveBeenCalled()
   })
 
   it('Should render all returned titles', async () => {

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

@@ -131,4 +131,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()
+  })
 })