@playpilot/tpi 6.4.0-beta.6 → 6.4.0-beta.8

package/package.json

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

package/src/routes/components/PostersScrollReveal.svelte

@@ -6,6 +6,7 @@
   const targetThreshold = 0.7
   const posterSelector = '[data-playpilot-poster]'
 
+  let postersShownForLink: Record<string, HTMLElement> = {}
   let scrollTimeout: ReturnType<typeof setTimeout> | null = null
 
   onMount(() => {
@@ -33,18 +34,21 @@
     for (const link of linksWithinTargetViewport) {
       if (linksWithCurrentlyVisiblePosters.has(link)) continue
 
-      createPosterForLink(link)
+      const posterUrl = link.dataset.playpilotPosterUrl!
+
+      if (posterUrl in postersShownForLink && postersShownForLink[posterUrl] !== link) continue
+
+      createPosterForLink(link, posterUrl)
       linksWithCurrentlyVisiblePosters.add(link)
+      postersShownForLink[posterUrl] = link
     }
   }
 
-  function createPosterForLink(link: HTMLElement): void {
-    const posterUrl = link.dataset.playpilotPosterUrl!
-
+  function createPosterForLink(link: HTMLElement, src: string): void {
     const element = document.createElement('img')
     element.classList.add('playpilot-floating-poster')
     element.dataset.playpilotPoster = ''
-    element.src = posterUrl
+    element.src = src
     element.alt = ''
     element.onload = () => element.classList.add('loaded')
 
@@ -74,8 +78,9 @@
       for (const link of linksWithCurrentlyVisiblePosters) {
         destroyPosterForLink(link)
         linksWithCurrentlyVisiblePosters.delete(link)
+        postersShownForLink = {}
       }
-    }, 500)
+    }, 1000)
   }
 </script>
 

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

@@ -70,12 +70,12 @@ describe('FloatingPoster', () => {
   })
 
   it('Should create poster for each link in viewport', async () => {
-    createPosterLink(10)
-    createPosterLink(500)
-    createPosterLink(500)
-    createPosterLink(510)
-    createPosterLink(520)
-    createPosterLink(2000)
+    createPosterLink(10, '0.jpg')
+    createPosterLink(500, '1.jpg')
+    createPosterLink(500, '2.jpg')
+    createPosterLink(510, '3.jpg')
+    createPosterLink(520, '4.jpg')
+    createPosterLink(2000, '5.jpg')
 
     render(PostersScrollReveal)
 
@@ -84,6 +84,19 @@ describe('FloatingPoster', () => {
     expect(document.querySelectorAll('[data-playpilot-poster]')).toHaveLength(4)
   })
 
+  it('Should create poster only for unique poster urls', async () => {
+    createPosterLink(500, '1.jpg')
+    createPosterLink(500, '1.jpg')
+    createPosterLink(510, '2.jpg')
+    createPosterLink(520, '2.jpg')
+
+    render(PostersScrollReveal)
+
+    window.dispatchEvent(new Event('scroll'))
+
+    expect(document.querySelectorAll('[data-playpilot-poster]')).toHaveLength(2)
+  })
+
   it('Should hide poster after not scrolling for given timeout', async () => {
     createPosterLink(500)