@playpilot/tpi 8.0.0-beta.explore-home.12 → 8.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.0.0-beta.explore-home.12",
+	"version": "8.0.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

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

@@ -18,7 +18,7 @@
     prepend?: Snippet | null
     tall?: boolean
     wide?: boolean
-    width?: boolean
+    blur?: boolean
     closeButtonStyle?: 'shadow' | 'flat'
     initialScrollPosition?: number
     onscroll?: () => void
@@ -32,6 +32,7 @@
     dialog,
     tall = false,
     wide = false,
+    blur = false,
     closeButtonStyle = 'shadow',
     initialScrollPosition = 0,
     onscroll = () => null,
@@ -119,6 +120,7 @@
   class="modal"
   class:wide
   class:tall
+  class:blur
   class:has-bubble={!!bubble}
   class:has-prepend={!!prepend}
   style:--dialog-offset="{dialogOffset}px"
@@ -206,6 +208,10 @@
     &.has-bubble {
       --playpilot-detail-background-border-radius: 0;
     }
+
+    &.blur {
+      backdrop-filter: blur(1.5rem);
+    }
   }
 
   .dialog,

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

@@ -29,7 +29,7 @@
   })
 </script>
 
-<Modal>
+<Modal blur>
   {#snippet dialog()}
     <div class="rail-modal" style:--transition-duration="{transitionDuration}ms">
       <TinySlider threshold={40} moveThreshold={40} transitionDuration={initialized ? transitionDuration : 0} bind:this={slider}>

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

@@ -115,41 +115,43 @@
       {/each}
     </Rail>
   {:then titles}
-    <Rail
-      bind:slider
-      {heading}
-      onchange={(index) => setTimeout(() => openTitle(null, titles, index), 250)}
-      onresize={() => slider?.reposition()}>
-      {#each titles as title, index}
-        {@const expanded = isExpanded(title)}
-        {@const href = titleUrl(title)}
-        {@const onclick = (event: MouseEvent): void => openTitle(event, titles, index)}
-
-        <div class="title" class:expanded data-testid="title">
-          <div class="media">
-            {#if expanded}
-              <div class="video" out:fade={{ delay: 200, duration: 200 }}>
-                <a class="video-overlay" title="" {href} {onclick}></a>
-
-                {#if !!title.embeddable_url}
-                  <YouTubeEmbed embeddable_url={title.embeddable_url!} muted loop />
-                {:else}
-                  <img class="video-fallback" src={title.medium_poster} alt="" />
-                {/if}
-              </div>
-            {:else}
-              <a class="poster" {href} {onclick}>
-                <TitlePoster {title} width={96} height={144} />
-              </a>
-            {/if}
+    {#if titles?.length}
+      <Rail
+        bind:slider
+        {heading}
+        onchange={(index) => setTimeout(() => openTitle(null, titles, index), 250)}
+        onresize={() => slider?.reposition()}>
+        {#each titles as title, index}
+          {@const expanded = isExpanded(title)}
+          {@const href = titleUrl(title)}
+          {@const onclick = (event: MouseEvent): void => openTitle(event, titles, index)}
+
+          <div class="title" class:expanded data-testid="title">
+            <div class="media">
+              {#if expanded}
+                <div class="video" out:fade={{ delay: 200, duration: 200 }}>
+                  <a class="video-overlay" title="" {href} {onclick}></a>
+
+                  {#if !!title.embeddable_url}
+                    <YouTubeEmbed embeddable_url={title.embeddable_url!} muted loop />
+                  {:else}
+                    <img class="video-fallback" src={title.medium_poster} alt="" />
+                  {/if}
+                </div>
+              {:else}
+                <a class="poster" {href} {onclick}>
+                  <TitlePoster {title} width={96} height={144} />
+                </a>
+              {/if}
+            </div>
+
+            <a class="heading" {href} {onclick} data-testid="heading">
+              {title.title}
+            </a>
           </div>
-
-          <a class="heading" {href} {onclick} data-testid="heading">
-            {title.title}
-          </a>
-        </div>
-      {/each}
-    </Rail>
+        {/each}
+      </Rail>
+    {/if}
   {/await}
 </div>
 

package/src/tests/routes/components/Modals/Modal.test.js

@@ -121,6 +121,18 @@ describe('Modal.svelte', () => {
     expect(getByTestId('modal').classList).toContain('wide')
   })
 
+  it('Should not have blur class by default', () => {
+    const { getByTestId } = render(Modal, { children })
+
+    expect(getByTestId('modal').classList).not.toContain('blur')
+  })
+
+  it('Should have blur class when prop is given', () => {
+    const { getByTestId } = render(Modal, { children, blur: true })
+
+    expect(getByTestId('modal').classList).toContain('blur')
+  })
+
   it('Should not show back button by default', () => {
     const { queryByLabelText } = render(Modal, { children })