@playpilot/tpi 8.12.0 → 8.12.2

package/package.json

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

package/src/lib/data/translations.ts

@@ -166,7 +166,7 @@ export const translations = {
     [Language.Swedish]: 'Streaming Guide',
     [Language.Danish]: 'Streaming Guide',
   },
-  'Streaming Guide Heading': {
+  'Streaming Guide Subheading': {
     [Language.English]: 'Discover and search all movies and tv-shows',
     [Language.Swedish]: 'Upptäck och sök bland alla filmer och tv-serier',
     [Language.Danish]: 'Opdag og søg i alle film og tv-serier',

package/src/routes/components/Explore/ExploreLayout.svelte

@@ -45,7 +45,11 @@
       <div class="divider"></div>
 
       <div class="heading" use:heading>
-        {t('Streaming Guide Heading')}
+        {t('Streaming Guide')}
+      </div>
+
+      <div class="subheading" use:heading={2}>
+        {t('Streaming Guide Subheading')}
       </div>
 
       {#if !useExploreRouter()}
@@ -101,11 +105,6 @@
     gap: margin(0.5);
     margin: theme(explore-header-margin, 0 0 margin(1));
     width: 100%;
-    max-width: margin(12);
-
-    @include desktop {
-      max-width: margin(20);
-    }
   }
 
   .divider {
@@ -115,15 +114,25 @@
     background: theme(explore-divider-background, text-color);
   }
 
-  .heading {
-    margin: theme(explore-heading-margin, margin(0.25) 0);
+  .heading,
+  .subheading {
     color: theme(text-color);
-    font-size: theme(explore-heading-size, clamp(margin(1), 2.5vw, margin(1.5)));
+    font-size: theme(explore-heading-size, clamp(margin(1.5), 5vw, margin(2)));
     font-weight: theme(explore-heading-font-weight, font-bold);
     text-transform: theme(explore-heading-text-transform, normal);
     line-height: theme(explore-heading-line-height, 1.5);
   }
 
+  .subheading {
+    margin-top: margin(0.5);
+    max-width: margin(15);
+    font-size: theme(explore-subheading-size, clamp(margin(1), 2.5vw, margin(1.25)));
+
+    @include desktop {
+      max-width: 100%;
+    }
+  }
+
   .description {
     max-width: theme(explore-header-max-width, 600px);
     margin: 0;

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

@@ -4,7 +4,7 @@
   import type { TitleData } from '$lib/types/title'
   import { getFirstAdOfType } from '$lib/api/ads'
   import { exploreParentSelector } from '$lib/explore'
-  import { onMount } from 'svelte'
+  import { onMount, setContext } from 'svelte'
   import { isPixelAllowed } from '$lib/pixel'
   import { trackViaPixel } from '@playpilot/retargeting-tracking'
   import Modal from './Modal.svelte'
@@ -20,6 +20,8 @@
 
   const { title, initialScrollPosition = 0, ...restProps }: Props = $props()
 
+  setContext('modal', 'title')
+
   const topScrollAd = getFirstAdOfType('top_scroll')
   const displayAd = getFirstAdOfType('card')
   const insertExploreCta = window.PlayPilotLinkInjections?.config?.explore_insert_cta_in_tpi

package/src/routes/components/Title.svelte

@@ -14,7 +14,7 @@
   import { heading } from '$lib/actions/heading'
   import { removeImageUrlPrefix } from '$lib/image'
   import { titleUrl } from '$lib/routes'
-  import { setContext } from 'svelte'
+  import { getContext, setContext } from 'svelte'
   import { track } from '$lib/tracking'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { isYouTubeVideoAvailableInRegion } from '$lib/api/youtubeAvailability'
@@ -32,6 +32,7 @@
 
   setContext('title', title)
 
+  const modal = getContext('modal')
   const showDescription = $derived((!small || noAffiliate) && title.description)
 
   let posterLoaded = $state(false)
@@ -96,7 +97,7 @@
   </div>
 </div>
 
-<div class="background" class:small>
+<div class="background" class:small class:offset-mute={modal === 'title'}>
   {#if useVideoBackground && hasYouTubeVideoAvailable}
     <YouTubeEmbedBackground embeddable_url={title.embeddable_url!} />
   {:else}
@@ -116,6 +117,8 @@
   $poster-width: margin(4.5);
 
   .heading {
+    z-index: 1;
+    position: relative;
     grid-area: heading;
     margin: margin(0.5) 0;
     color: theme(detail-title-text-color, text-color);
@@ -131,7 +134,6 @@
   }
 
   .content {
-    z-index: 1;
     position: relative;
     padding: margin(1);
     color: theme(detail-text-color, text-color);
@@ -179,6 +181,8 @@
   }
 
   .poster {
+    z-index: 1;
+    position: relative;
     grid-area: poster;
     display: block;
     width: $poster-width;
@@ -196,6 +200,8 @@
   }
 
   .info {
+    z-index: 1;
+    position: relative;
     grid-area: info;
     display: flex;
     flex-wrap: wrap;
@@ -244,7 +250,6 @@
     overflow: hidden;
     background: theme(detail-background, lighter);
     mask-image: linear-gradient(to bottom, black 40%, transparent);
-    z-index: 0;
 
     @include desktop() {
       height: margin(12);
@@ -263,6 +268,11 @@
       }
     }
 
+    &.offset-mute {
+      --mute-top: #{margin(3)};
+      --mute-right: #{margin(0.25)};
+    }
+
     img {
       width: 100%;
       height: 100%;

package/src/routes/components/YouTubeEmbed.svelte

@@ -74,8 +74,8 @@
     align-items: center;
     justify-content: center;
     position: absolute;
-    top: margin(0.5);
-    right: margin(0.5);
+    top: calc(margin(0.5) + var(--mute-top, 0px));
+    right: calc(margin(0.5) + var(--mute-right, 0px));
     padding: margin(0.25);
     border: 0;
     border-radius: 50%;

package/src/routes/components/YouTubeEmbedBackground.svelte

@@ -14,15 +14,11 @@
 </script>
 
 <div class="video-background" style="--height: {height}px; --width: {clientWidth}px;" bind:clientWidth bind:clientHeight data-testid="video-background">
-  <YouTubeEmbed {embeddable_url} muted loop />
+  <YouTubeEmbed {embeddable_url} muted loop showMuteControls />
 </div>
 
 <style lang="scss">
   .video-background {
-    width: 100%;
-    height: 100%;
-    margin-left: 50%;
-    transform: translateX(-50%);
     background: black;
 
     :global(iframe) {