@playpilot/tpi 8.2.2 → 8.3.1

package/package.json

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

package/src/routes/components/Debugger.svelte

@@ -18,6 +18,7 @@
   let data = $state(dataToReadable())
   let shown = $state(false)
   let interval: ReturnType<typeof setInterval> | null = null
+  let railSize = $state(136)
 
   onDestroy(() => {
     if (interval) clearInterval(interval)
@@ -182,6 +183,33 @@
         insertExplore()
       })}>Toggle new explore</button>
     {/if}
+
+    <hr />
+
+    <small>Region</small>
+    <input type="text" value={window.PlayPilotLinkInjections.region} onchange={event => {
+      destroyExplore()
+      window.PlayPilotLinkInjections.region = (event.target as HTMLInputElement).value
+      insertExplore()
+    }} />
+
+    <hr />
+
+    <div class="form-group">
+      <small>Desktop rail size</small>
+      <input
+        type="range"
+        min={80}
+        max={240}
+        step={8}
+        bind:value={railSize}
+        oninput={() => document.body.style.setProperty('--playpilot-rail-size-huge', `${railSize}px`)} />
+      <small>{railSize}</small>
+    </div>
+
+    <hr />
+
+    <button onclick={() => shown = false}>Close</button>
   </div>
 {/if}
 
@@ -211,6 +239,14 @@
     }
   }
 
+  input[type="text"] {
+    padding: margin(0.5);
+    border: 1px solid theme(primary);
+    background: black;
+    font-size: margin(1);
+    color: theme(primary);
+  }
+
   .debugger {
     z-index: 2147483647; // As high as she goes
     position: fixed;
@@ -233,6 +269,12 @@
     scrollbar-width: thin;
   }
 
+  .form-group {
+    display: flex;
+    align-items: center;
+    gap: margin(0.5);
+  }
+
   .data {
     color: gray;
   }

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

@@ -4,10 +4,14 @@
   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 },
@@ -35,8 +39,22 @@
   }
 </script>
 
+<svelte:window {onscroll} bind:innerWidth={windowWidth} />
+
 <div data-testid="explore-home"></div>
 
 {#each rails as { heading, params, properties }}
-  <TitlesRail {heading} titles={getListTitles(params)} {...properties} bind:expandedTitle bind:expandedRailKey />
+  <div class="rail">
+    <TitlesRail {heading} titles={getListTitles(params)} size={size || 'small'} {...properties} bind:expandedTitle bind:expandedRailKey />
+  </div>
 {/each}
+
+<style lang="scss">
+  .rail {
+    margin-top: theme(explore-rail-spacing-mobile, margin(1));
+
+    @include desktop {
+      margin-top: theme(explore-rail-spacing-desktop, margin(2));
+    }
+  }
+</style>

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

@@ -15,7 +15,7 @@
   interface Props {
     titles: Promise<TitleData[]> | TitleData[]
     heading?: string,
-    size?: 'small' | 'large'
+    size?: 'small' | 'large' | 'huge'
     aside?: boolean,
     expandable?: boolean,
     expandedTitle?: TitleData | null,
@@ -115,6 +115,16 @@
             <span class="skeleton">&nbsp;</span>
             <span class="skeleton">&nbsp;</span>
           </div>
+
+          {#if aside}
+            <div class="aside">
+              <div class="aside-skeleton">
+                {#each { length: 3 }}
+                  <div class="skeleton">&nbsp;</div>
+                {/each}
+              </div>
+            </div>
+          {/if}
         </div>
       {/each}
     </Rail>
@@ -169,7 +179,7 @@
 
 <style lang="scss">
   .titles {
-    --width: #{margin(6)};
+    --width: #{theme(rail-size-default, margin(6))};
     --image-height: #{calc(var(--width) * 3 / 2)};
     --expanded-width: #{calc(var(--image-height) / 9 * 16)};
     --border-radius: #{theme(rail-border-radius, border-radius)};
@@ -179,7 +189,11 @@
     }
 
     &.large {
-      --width: #{margin(7.5)};
+      --width: #{theme(rail-size-large, margin(7.5))};
+    }
+
+    &.huge {
+      --width: #{theme(rail-size-huge, margin(8.5))};
     }
   }
 
@@ -199,6 +213,7 @@
         "media heading"
         "media aside";
       grid-template-rows: 1lh auto;
+      grid-template-columns: 1fr 1fr;
       align-items: flex-start;
       gap: margin(0.25) margin(0.5);
       width: calc(var(--width) * 2);
@@ -290,6 +305,7 @@
     text-overflow: ellipsis;
 
     .with-aside & {
+      width: 100%;
       padding-top: 0;
       font-weight: theme(rail-aside-heading-font-weight, font-bold);
       line-clamp: 1;
@@ -314,10 +330,22 @@
     width: 100%;
     background: theme(detail-background-light, lighter);
     border-radius: margin(2);
+    color: transparent;
 
     &:last-child {
       margin-top: margin(0.3);
       width: 50%;
     }
   }
+
+  .aside-skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: margin(0.3);
+    width: 100%;
+
+    .skeleton {
+      margin: 0;
+    }
+  }
 </style>

package/src/routes/explore/+page.svelte

@@ -7,6 +7,7 @@
 
   import { browser } from '$app/environment'
   import { destroyExplore, insertExplore, insertExploreIntoNavigation, useExploreRouter } from '$lib/explore'
+  import Debugger from '../components/Debugger.svelte'
 
   if (browser) {
     // @ts-ignore
@@ -56,6 +57,8 @@
   </div>
 </main>
 
+<Debugger onrerender={() => null} />
+
 <style lang="scss">
   @import url('$lib/scss/global.scss');