@playpilot/tpi 8.19.1 → 8.21.0

package/package.json

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

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

@@ -15,7 +15,7 @@
   const rails: { heading: string, params: Record<string, any>, properties: Record<string, any> }[] = [{
     heading: 'List: Upcoming',
     params: { from_playlist_sid: 'li42wf', region: null, no_region_filter: true },
-    properties: {},
+    properties: { expandable: true },
   }, {
     heading: 'List: Trending',
     params: { ordering: Sorting.Popular },

package/src/routes/components/Modals/RailModal.svelte

@@ -7,6 +7,7 @@
   import RoundButton from '../RoundButton.svelte'
   import IconClose from '../Icons/IconClose.svelte'
   import IconArrow from '../Icons/IconArrow.svelte'
+  import Button from '../Button.svelte'
 
   interface Props {
     items: Record<string, any>[]
@@ -28,7 +29,7 @@
       if (initialIndex !== 0) slider?.setIndex(initialIndex)
 
       requestAnimationFrame(() => {
-        slider.reposition()
+        slider?.reposition()
 
         initialized = true
       })
@@ -75,6 +76,15 @@
       </TinySlider>
     </div>
 
+    {#if window.location.href.includes('route=modal')}
+      <div class="back">
+        <Button variant="link" onclick={() => { onclose(); destroyAllModals() }}>
+          <IconArrow direction="left" />
+          Streaming guide
+        </Button>
+      </div>
+    {/if}
+
     <div class="close" transition:scale|global>
       <RoundButton size="42px" onclick={() => { onclose(); destroyAllModals() }} aria-label="Close">
         <IconClose size={24} />
@@ -159,7 +169,7 @@
 
     @include desktop {
       height: auto;
-      max-height: 90vh;
+      max-height: 85vh;
       border-radius: theme(rail-modal-item-border-radius, border-radius-huge);
     }
 
@@ -176,6 +186,31 @@
     right: margin(1);
   }
 
+  .back {
+    position: absolute;
+    top: margin(1.5);
+    left: calc((100vw - $size) / 2);
+    font-family: theme(font-family);
+    transition: transform 50ms;
+
+    @include desktop {
+      left: margin(1);
+    }
+
+    &:hover {
+      transform: scale(1.025);
+
+      :global(button) {
+        text-decoration-thickness: 2px;
+      }
+    }
+
+    :global(button) {
+      text-decoration: underline;
+      color: white;
+    }
+  }
+
   .arrow {
     --offset: #{margin(-1.25)};
     --scale: 1;

package/src/routes/components/YouTubeEmbed.svelte

@@ -64,6 +64,8 @@
 
 <style lang="scss">
   iframe {
+    z-index: -1;
+    position: relative;
     width: 100%;
     height: 100%;
   }