@playpilot/tpi 8.0.0 → 8.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.0.0",
+	"version": "8.1.0",
 	"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:background-blur={blur}
   class:has-bubble={!!bubble}
   class:has-prepend={!!prepend}
   style:--dialog-offset="{dialogOffset}px"
@@ -195,7 +197,6 @@
     bottom: 0;
     left: 0;
     background: theme(detail-backdrop, rgba(0, 0, 0, 0.65));
-    backdrop-filter: blur(1.5rem);
 
     @include desktop() {
       overflow-y: auto;
@@ -207,6 +208,10 @@
     &.has-bubble {
       --playpilot-detail-background-border-radius: 0;
     }
+
+    &.background-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/Title.svelte

@@ -26,7 +26,7 @@
     useVideoBackground?: boolean
   }
 
-  const { title, small = false, useVideoBackground = !small }: Props = $props()
+  const { title, small = false, useVideoBackground = true }: Props = $props()
 
   const noAffiliate = !!window.PlayPilotLinkInjections?.no_affiliate
 
@@ -96,7 +96,7 @@
   </div>
 </div>
 
-<div class="background">
+<div class="background" class:small>
   {#if useVideoBackground && hasYouTubeVideoAvailable}
     <YouTubeEmbedBackground embeddable_url={title.embeddable_url!} />
   {:else}
@@ -248,10 +248,21 @@
 
     @include desktop() {
       height: margin(12);
-      aspect-ratio: unset;
       mask-image: linear-gradient(to bottom, black 60%, transparent);
     }
 
+    @include mobile {
+      :global(.video-background) {
+        width: 225%;
+      }
+    }
+
+    &.small {
+      :global(.video-background) {
+        width: 150%;
+      }
+    }
+
     img {
       width: 100%;
       height: 100%;
@@ -271,18 +282,6 @@
         filter: blur(0.75rem);
       }
     }
-
-    @include mobile {
-      :global(.video-background) {
-        width: 225%;
-        margin-left: 50%;
-        transform: translateX(-50%);
-
-        :global(> iframe) {
-          transform: translateX(-50%) translateY(-50%);
-        }
-      }
-    }
   }
 
   .capitalize {

package/src/routes/components/YouTubeEmbedBackground.svelte

@@ -21,6 +21,8 @@
   .video-background {
     width: 100%;
     height: 100%;
+    margin-left: 50%;
+    transform: translateX(-50%);
     background: black;
 
     :global(iframe) {

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('background-blur')
+  })
+
+  it('Should have blur class when prop is given', () => {
+    const { getByTestId } = render(Modal, { children, blur: true })
+
+    expect(getByTestId('modal').classList).toContain('background-blur')
+  })
+
   it('Should not show back button by default', () => {
     const { queryByLabelText } = render(Modal, { children })