@playpilot/tpi 8.4.2 → 8.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.4.2",
+	"version": "8.5.0",
 	"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,11 +15,11 @@
   }, {
     heading: t('List: Upcoming'),
     params: { from_playlist_sid: 'li42wf', region: null, no_region_filter: true },
-    properties: { expandable: true },
+    properties: { aside: true },
   }, {
     heading: t('List: New'),
     params: { from_playlist_sid: 'li42WR', include_playable_types: 'SVOD,FREE' },
-    properties: { aside: true, size: 'large' },
+    properties: { expandable: true },
   }, {
     heading: t('List: Demand'),
     params: { from_playlist_sid: 'licBS' },
@@ -31,7 +27,7 @@
   }, {
     heading: t('List: Cinema'),
     params: { from_playlist_sid: 'li42WS', region: null, no_region_filter: true },
-    properties: {},
+    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,6 +40,7 @@
 
   let element: HTMLElement | null = $state(null)
   let slider: ReturnType<typeof TinySlider> | null = $state(null)
+  let recentlyExpanded = false
 
   onMount(() => {
     if (expandable) expandFirstAvailableTrailer()
@@ -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
     }
 
@@ -100,6 +111,13 @@
   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 +151,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 +210,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 +237,11 @@
       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));
+      }
     }
   }
 
@@ -307,6 +330,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;
@@ -320,7 +344,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;')
     })
   })