@playpilot/tpi 6.2.2 → 6.3.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "6.2.2",
+	"version": "6.3.0-beta.1",
 	"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,34 @@ 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(0.5rem) scale(0.5);
+  }
+}
+
+@keyframes playpilot-poster-fly-out {
+  to {
+    opacity: 0;
+    transform: translateX(-50%) translateY(0.5rem) scale(0.5);
+  }
+}
+
+.playpilot-floating-poster {
+  position: absolute;
+  bottom: calc(100% + 0.5rem);
+  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);
+  animation: playpilot-poster-fly-in 150ms;
+  transform-origin: bottom center;
+
+  &.animating-out {
+    animation: playpilot-poster-fly-out 150ms forwards;
+  }
+}

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/PostersScrollReveal.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+
+  const linksWithPosters = Array.from(document.querySelectorAll<HTMLElement>('[data-playpilot-poster-url]'))
+  const linksWithCurrentlyVisiblePosters: Set<HTMLElement> = new Set()
+  const targetThreshold = 0.8
+  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: 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.push(link)
+    }
+
+    for (const link of linksWithCurrentlyVisiblePosters) {
+      if (linksWithinTargetViewport.some(l => link === l)) continue
+
+      destroyPosterForLink(link)
+      linksWithCurrentlyVisiblePosters.delete(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 = ''
+
+    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/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(550)
+    createPosterLink(600)
+    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(500)
+    expect(document.querySelector('[data-playpilot-poster]')).not.toBeTruthy()
+
+    window.dispatchEvent(new Event('scroll'))
+    expect(document.querySelector('[data-playpilot-poster]')).toBeTruthy()
+  })
+})