@playpilot/tpi 6.4.0-beta.1 → 6.4.0-beta.3

package/package.json

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

package/src/lib/enums/SplitTest.ts

@@ -4,9 +4,4 @@ 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/scss/global.scss

@@ -102,8 +102,7 @@ h1, h2, h3, h4, h5 {
 
 @keyframes playpilot-poster-fly-in {
   from {
-    opacity: 0;
-    transform: translateX(-50%) translateY(1.5rem);
+    transform: translateX(-50%) translateY(1.5rem) rotateX(90deg);
   }
 }
 
@@ -127,7 +126,7 @@ h1, h2, h3, h4, h5 {
   transform-origin: bottom center;
 
   &.loaded {
-    animation: playpilot-poster-fly-in 500ms cubic-bezier(0.25, 1.75, 0.5, 1);
+    animation: playpilot-poster-fly-in 600ms cubic-bezier(0.35, 1.75, 0.75, 1);
     opacity: 1;
   }
 

package/src/routes/components/PostersScrollReveal.svelte

@@ -1,45 +1,18 @@
 <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]'))
   const linksWithCurrentlyVisiblePosters = new Set<HTMLElement>()
-  const targetThreshold = 0.6
+  const targetThreshold = 0.7
   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
@@ -57,13 +30,6 @@
       linksWithinTargetViewport.add(link)
     }
 
-    for (const link of linksWithCurrentlyVisiblePosters) {
-      if (linksWithinTargetViewport.has(link)) continue
-
-      destroyPosterForLink(link)
-      linksWithCurrentlyVisiblePosters.delete(link)
-    }
-
     for (const link of linksWithinTargetViewport) {
       if (linksWithCurrentlyVisiblePosters.has(link)) continue
 
@@ -113,4 +79,4 @@
   }
 </script>
 
-<svelte:window {onscroll} bind:innerWidth={windowWidth} />
+<svelte:window {onscroll} />

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

@@ -1,14 +1,6 @@
-import { fireEvent, render } from '@testing-library/svelte'
+import { 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')
@@ -30,15 +22,8 @@ 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 () => {
@@ -53,21 +38,6 @@ 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)
 
@@ -134,16 +104,4 @@ 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()
-  })
 })