@playpilot/tpi 8.0.1 → 8.1.0

package/package.json

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

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

@@ -120,7 +120,7 @@
   class="modal"
   class:wide
   class:tall
-  class:blur
+  class:background-blur={blur}
   class:has-bubble={!!bubble}
   class:has-prepend={!!prepend}
   style:--dialog-offset="{dialogOffset}px"
@@ -209,7 +209,7 @@
       --playpilot-detail-background-border-radius: 0;
     }
 
-    &.blur {
+    &.background-blur {
       backdrop-filter: blur(1.5rem);
     }
   }

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

@@ -124,13 +124,13 @@ describe('Modal.svelte', () => {
   it('Should not have blur class by default', () => {
     const { getByTestId } = render(Modal, { children })
 
-    expect(getByTestId('modal').classList).not.toContain('blur')
+    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('blur')
+    expect(getByTestId('modal').classList).toContain('background-blur')
   })
 
   it('Should not show back button by default', () => {