@playpilot/tpi 8.4.3 → 8.5.1

package/package.json

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

package/src/lib/scss/_functions.scss

@@ -18,3 +18,8 @@
     @return var(--playpilot-#{$scope}, $fallback);
   }
 }
+
+// Alternative to `vw` but scaled by the explore width instead.
+@function explore-width($percentage) {
+  @return calc(theme(explore-width, 1000px) * ($percentage / 100))
+}

package/src/routes/components/Debugger.svelte

@@ -20,7 +20,7 @@
   let data = $state(dataToReadable())
   let shown = $state(false)
   let interval: ReturnType<typeof setInterval> | null = null
-  let railSize = $state(136)
+  let railSize = $state(184)
 
   onDestroy(() => {
     if (interval) clearInterval(interval)
@@ -220,7 +220,7 @@
         max={240}
         step={8}
         bind:value={railSize}
-        oninput={() => document.body.style.setProperty('--playpilot-rail-size-huge', `${railSize}px`)} />
+        oninput={() => document.body.style.setProperty('--playpilot-rail-size-flexible', `${railSize}px`)} />
       <small>{railSize}</small>
     </div>
 

package/src/routes/components/Explore/ExploreLayout.svelte

@@ -22,6 +22,7 @@
 
   let element: HTMLElement | null = null
   let height: string | null = $state(null)
+  let clientWidth: number = $state(0)
 
   $effect(() => {
     // Set the height of this element to match that of it's container. That way we can
@@ -36,7 +37,7 @@
   })
 </script>
 
-<div class="explore playpilot-styled-scrollbar" bind:this={element} style:height>
+<div class="explore playpilot-styled-scrollbar" bind:this={element} bind:clientWidth style:height style:--playpilot-explore-width="{clientWidth}px">
   <div class="header" role="banner">
     <div>
       <div class="divider"></div>

package/src/routes/components/Explore/Routes/ExploreHome.svelte

@@ -4,14 +4,10 @@
   import TitlesRail from '../../Rails/TitlesRail.svelte'
   import { t } from '$lib/localization'
   import { Sorting } from '$lib/enums/Sorting'
-  import { mobileBreakpoint } from '$lib/constants'
 
-  let windowWidth = $state(0)
   let expandedTitle: TitleData | null = $state(null)
   let expandedRailKey: string | null = $state(null)
 
-  const size = $derived(windowWidth >= mobileBreakpoint ? 'huge' : null)
-
   const rails: { heading: string, params: Record<string, any>, properties: Record<string, any> }[] = [{
     heading: t('List: Trending'),
     params: { ordering: Sorting.Popular },
@@ -19,7 +15,7 @@
   }, {
     heading: t('List: Upcoming'),
     params: { from_playlist_sid: 'li42wf', region: null, no_region_filter: true },
-    properties: { aside: true, size: 'large' },
+    properties: { aside: true },
   }, {
     heading: t('List: New'),
     params: { from_playlist_sid: 'li42WR', include_playable_types: 'SVOD,FREE' },
@@ -31,7 +27,7 @@
   }, {
     heading: t('List: Cinema'),
     params: { from_playlist_sid: 'li42WS', region: null, no_region_filter: true },
-    properties: { aside: true, size: 'large' },
+    properties: { aside: true },
   }]
 
   async function getListTitles(params: Record<string, any> = {}): Promise<TitleData[]> {
@@ -39,13 +35,13 @@
   }
 </script>
 
-<svelte:window {onscroll} bind:innerWidth={windowWidth} />
+<svelte:window {onscroll} />
 
 <div data-testid="explore-home"></div>
 
 {#each rails as { heading, params, properties }}
   <div class="rail">
-    <TitlesRail {heading} titles={getListTitles(params)} size={size || 'small'} {...properties} bind:expandedTitle bind:expandedRailKey />
+    <TitlesRail {heading} titles={getListTitles(params)} size="flexible" {...properties} bind:expandedTitle bind:expandedRailKey />
   </div>
 {/each}
 

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

@@ -15,7 +15,7 @@
   interface Props {
     titles: Promise<TitleData[]> | TitleData[]
     heading?: string,
-    size?: 'small' | 'large' | 'huge'
+    size?: 'small' | 'large' | 'flexible'
     aside?: boolean,
     expandable?: boolean,
     expandedTitle?: TitleData | null,
@@ -40,9 +40,10 @@
 
   let element: HTMLElement | null = $state(null)
   let slider: ReturnType<typeof TinySlider> | null = $state(null)
+  let recentlyExpanded = false
 
   onMount(() => {
-    if (expandable) expandFirstAvailableTrailer()
+    if (expandable) expandWhenFirstInView()
   })
 
   function openTitle(event: MouseEvent | null, titles: TitleData[], index: number): void {
@@ -51,7 +52,17 @@
     const title = titles[index]
 
     if (expandable && !isExpanded(title)) {
+      const activeElement = element!.querySelectorAll('.title')[index]!
+      const parentOffset = element!.getBoundingClientRect().right
+      const elementOffsetInParent = parentOffset - activeElement.getBoundingClientRect().right
+
+      recentlyExpanded = true
+      setTimeout(() => recentlyExpanded = false, 500)
+
+      if (elementOffsetInParent < activeElement.clientWidth * 2) slider?.setIndex(index - 2)
+
       expandTitleIntoTrailer(title)
+
       return
     }
 
@@ -64,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 {
@@ -87,19 +95,26 @@
     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 {
     return expandedRailKey === key && title.sid === expandedTitle?.sid
   }
+
+  function onchange(titles: TitleData[], index: number): void {
+    if (!expandable) return
+    if (recentlyExpanded) return
+
+    setTimeout(() => openTitle(null, titles, index), 250)
+  }
 </script>
 
 <svelte:window onscroll={expandWhenFirstInView} />
@@ -133,7 +148,7 @@
       <Rail
         bind:slider
         {heading}
-        onchange={(index) => { if (expandable) setTimeout(() => openTitle(null, titles, index), 250) }}
+        onchange={(index) => onchange(titles, index)}
         onresize={() => slider?.reposition()}>
         {#each titles as title, index}
           {@const expanded = isExpanded(title)}
@@ -192,8 +207,8 @@
       --width: #{theme(rail-size-large, margin(7.5))};
     }
 
-    &.huge {
-      --width: #{theme(rail-size-huge, margin(8.5))};
+    &.flexible {
+      --width: #{theme(rail-size-flexible, clamp(margin(6), explore-width(18), margin(11.5)))};
     }
   }
 
@@ -219,6 +234,7 @@
       width: calc(var(--width) * 2);
       height: var(--image-height);
       overflow: hidden;
+      font-size: clamp(theme(font-size-small), explore-width(1.5), theme(font-size-base));
 
       &.expanded {
         width: calc(var(--expanded-width) + var(--width));
@@ -311,6 +327,7 @@
     .with-aside & {
       width: 100%;
       padding-top: 0;
+      color: theme(text-color) !important;
       font-weight: theme(rail-aside-heading-font-weight, font-bold);
       line-clamp: 1;
       -webkit-line-clamp: 1;
@@ -324,7 +341,7 @@
     mask-image: linear-gradient(to top, transparent 0.5lh, white 1.5lh);
     overflow: hidden;
     color: theme(rail-text-color, text-color-alt) !important;
-    font-size: theme(rail-aside-font-size, 11px);
+    font-size: 0.9em;
     line-height: 1.2;
   }
 

package/src/tests/routes/components/Explore/ExploreLayout.test.js

@@ -64,7 +64,7 @@ describe('ExploreLayout.svelte', () => {
       })
 
     await waitFor(() => {
-      expect(container.querySelector('.explore')?.getAttribute('style')).toBe('height: 500px;')
+      expect(container.querySelector('.explore')?.getAttribute('style')).toContain('height: 500px;')
     })
   })
 

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')
   })