@playpilot/tpi 8.5.0 → 8.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.5.0",
+	"version": "8.5.2",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/routes/components/Rails/TitlesRail.svelte

@@ -43,7 +43,7 @@
   let recentlyExpanded = false
 
   onMount(() => {
-    if (expandable) expandFirstAvailableTrailer()
+    if (expandable) expandWhenFirstInView()
   })
 
   function openTitle(event: MouseEvent | null, titles: TitleData[], index: number): void {
@@ -75,18 +75,15 @@
     onclick(title)
   }
 
-  async function expandFirstAvailableTrailer(delay = 500): Promise<void> {
+  async function expandFirstAvailableTrailer(): Promise<void> {
     const response = await titles
-
     const title = await getFirstTitleWithAvailableTrailer(response)
-    if (!title) return
 
-    setTimeout(() => {
-      if (expandedTitle) return
-      if (expandedRailKey && expandedRailKey !== key) return
+    if (!title) return
+    if (expandedTitle) return
+    if (expandedRailKey && expandedRailKey !== key) return
 
-      expandTitleIntoTrailer(title)
-    }, delay)
+    expandTitleIntoTrailer(title)
   }
 
   function expandTitleIntoTrailer(title: TitleData): void {
@@ -98,14 +95,14 @@
     if (expandedRailKey === key) return
 
     const elements = Array.from(document.querySelectorAll('[data-role="expandable-rail"]')) as HTMLElement[]
-    const elementsInView = elements.filter(element => element.getBoundingClientRect().top > 0)
+    const elementsInView = elements.filter(element => element.getBoundingClientRect().top >= 0)
     const elementsSortedByDistance = elementsInView.sort((a, b) => a.getBoundingClientRect().top - b.getBoundingClientRect().top)
 
     if (elementsSortedByDistance[0] !== element) return
 
     expandedTitle = null
     expandedRailKey = null
-    expandFirstAvailableTrailer(0)
+    expandFirstAvailableTrailer()
   }
 
   function isExpanded(title: TitleData): boolean {
@@ -185,7 +182,7 @@
               <!-- svelte-ignore a11y_click_events_have_key_events -->
               <!-- svelte-ignore a11y_no_static_element_interactions -->
               <div class="aside" {onclick} data-testid="aside">
-                {title.description}
+                {title.blurb || title.description}
               </div>
             {/if}
           </div>
@@ -345,7 +342,7 @@
     overflow: hidden;
     color: theme(rail-text-color, text-color-alt) !important;
     font-size: 0.9em;
-    line-height: 1.2;
+    line-height: 1.3;
   }
 
   .skeleton {

package/src/tests/routes/components/Rails/TitlesRail.test.js

@@ -69,7 +69,7 @@ describe('TitlesRail.svelte', () => {
 
     expect(getByTestId('title').classList).not.toContain('expanded')
 
-    await new Promise(res => setTimeout(res, 1000))
+    await new Promise(res => setTimeout(res, 200))
 
     expect(getByTestId('title').classList).toContain('expanded')
   })
@@ -79,7 +79,7 @@ describe('TitlesRail.svelte', () => {
 
     expect(getByTestId('title').classList).not.toContain('expanded')
 
-    await new Promise(res => setTimeout(res, 1000))
+    await new Promise(res => setTimeout(res, 200))
 
     expect(getByTestId('title').classList).not.toContain('expanded')
   })
@@ -89,32 +89,24 @@ describe('TitlesRail.svelte', () => {
 
     expect(getByTestId('title').classList).not.toContain('expanded')
 
-    await new Promise(res => setTimeout(res, 1000))
-
     expect(getByTestId('title').classList).not.toContain('expanded')
   })
 
   it('Should not expand if a different rail key is given', async () => {
     const { getAllByTestId } = render(TitlesRail, { titles: [title], expandable: true, expandedRailKey: 'Not this rail' })
 
-    await new Promise(res => setTimeout(res, 1000))
-
     expect(getAllByTestId('title')[0].classList).not.toContain('expanded')
   })
 
   it('Should not expand if a title is given that is not present in this rail', async () => {
     const { getAllByTestId } = render(TitlesRail, { titles: [title], expandable: true, expandedTitle: { ...title, sid: 'not' } })
 
-    await new Promise(res => setTimeout(res, 1000))
-
     expect(getAllByTestId('title')[0].classList).not.toContain('expanded')
   })
 
   it('Should not expand if a title is given that is in this rail but expandedRailKey is not this rail', async () => {
     const { getAllByTestId } = render(TitlesRail, { titles: [title], expandable: true, expandedTitle: title, expandedRailKey: 'Not this rail' })
 
-    await new Promise(res => setTimeout(res, 1000))
-
     expect(getAllByTestId('title')[0].classList).not.toContain('expanded')
   })