@playpilot/tpi 6.3.0-beta.5 → 6.4.0-beta.1

package/package.json

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

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

@@ -73,12 +73,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

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/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,13 +9,37 @@
   const targetThreshold = 0.6
   const posterSelector = '[data-playpilot-poster]'
 
+  let windowWidth = $state(0)
   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 (!isInSplitTestVariant(SplitTest.PostersScrollReveal)) return
+    if (!linksWithPosters.length) return
+
+    const onclick = () => trackSplitTestAction(SplitTest.PostersScrollReveal, 'click')
+
+    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
@@ -82,8 +109,8 @@
         destroyPosterForLink(link)
         linksWithCurrentlyVisiblePosters.delete(link)
       }
-    }, 800)
+    }, 500)
   }
 </script>
 
-<svelte:window {onscroll} />
+<svelte:window {onscroll} bind:innerWidth={windowWidth} />

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/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/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)
 
@@ -104,4 +134,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()
+  })
 })