@playpilot/tpi 8.33.0 → 8.33.2

package/package.json

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

package/src/lib/scss/_mixins.scss

@@ -66,3 +66,16 @@
     }
   }
 }
+
+@mixin safari() {
+  @media not all and (min-resolution: 0.001dpcm) {
+    @supports (-webkit-appearance: none) {
+      @content;
+    }
+  }
+
+  @supports (hanging-punctuation: first) and (font: -apple-system-body) and
+    (-webkit-appearance: none) {
+    @content;
+  }
+}

package/src/routes/components/YouTubeEmbed.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { getVideoId } from '$lib/trailer'
+  import { getVideoId, openTrailerOverlay } from '$lib/trailer'
   import { onMount } from 'svelte'
   import IconMute from './Icons/IconMute.svelte'
   import IconFullscreen from './Icons/IconFullscreen.svelte'
+  import type { TitleData } from '$lib/types/title'
 
   interface Props {
     embeddable_url: string
@@ -13,9 +14,10 @@
     autoplay?: boolean
     showActions?: boolean
     fallbackStartTime?: number
+    clickToPlay?: boolean
   }
 
-  let { embeddable_url = '', controls = [], muted = false, loop = false, captions = false, autoplay = true, showActions = false, fallbackStartTime = 0 }: Props = $props()
+  let { embeddable_url = '', controls = [], muted = false, loop = false, captions = false, autoplay = true, showActions = false, fallbackStartTime = 0, clickToPlay = true }: Props = $props()
 
   const videoId = $derived(getVideoId(embeddable_url))
   const startTime = $derived((window?.PlayPilotLinkInjections?.video_playtimes?.[videoId || ''] || (fallbackStartTime + 1)) - 1)
@@ -51,7 +53,7 @@
       playsinline: true,
       autoplay,
       muted,
-      clickToPlay: false,
+      clickToPlay,
       storage: { enabled: false },
       youtube: {
         noCookie: true,
@@ -93,6 +95,16 @@
     player.volume = state ? 0 : 1
   }
 
+  export function enterFullscreen(): void {
+    if (/iPad|iPhone|iPod/.test(navigator.platform) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) {
+      openTrailerOverlay({ embeddable_url } as TitleData)
+      toggleMute(true)
+      return
+    }
+
+    player.fullscreen.enter()
+  }
+
   export function play(event: CustomEvent): void {
     if (event.detail === embeddable_url) player?.play()
   }
@@ -120,7 +132,7 @@
         <IconMute {muted} />
       </button>
 
-      <button class="action secondary" onclick={() => player.fullscreen.enter()} aria-label="Fullscreen">
+      <button class="action secondary" onclick={enterFullscreen} aria-label="Fullscreen">
         <IconFullscreen />
       </button>
     {/if}

package/src/routes/components/YouTubeEmbedBackground.svelte

@@ -15,7 +15,7 @@
 </script>
 
 <div class="video-background" style="--height: {height}px; --width: {clientWidth}px;" bind:clientWidth bind:clientHeight data-testid="video-background">
-  <YouTubeEmbed {embeddable_url} {autoplay} fallbackStartTime={5} muted loop showActions />
+  <YouTubeEmbed {embeddable_url} {autoplay} fallbackStartTime={5} muted loop showActions clickToPlay={false} />
 </div>
 
 <style lang="scss">

package/src/routes/components/YouTubeEmbedOverlay.svelte

@@ -9,9 +9,15 @@
   }
 
   const { embeddable_url = '', onclose }: Props = $props()
+
+  let windowHeight = $state(window.innerHeight)
+  let windowWidth = $state(window.innerWidth)
+  let portrait = $derived(windowWidth < windowHeight)
 </script>
 
-<div class="overlay" transition:fade={{ duration: 100 }}>
+<svelte:window bind:innerWidth={windowWidth} bind:innerHeight={windowHeight} />
+
+<div class="overlay" class:portrait transition:fade={{ duration: 100 }}>
   <YouTubeEmbed {embeddable_url} controls={['current-time', 'fullscreen', 'mute', 'play', 'progress']} />
 
   <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -41,12 +47,18 @@
       z-index: 1;
       position: relative;
       display: block;
-      width: 95vmin;
+      width: 95vmax;
       height: auto;
+      max-height: 95vh;
       aspect-ratio: 16/9;
       box-shadow: 0 0 margin(4) rgba(255, 255, 255, 0.15);
       background: black;
     }
+
+    &.portrait :global(.plyr) {
+      width: 95vw;
+      height: auto;
+    }
   }
 
   .backdrop {

package/src/tests/routes/components/YouTubeEmbed.test.js

@@ -57,7 +57,7 @@ describe('YouTubeEmbed.svelte', () => {
         controls: ['play', 'mute', 'fullscreen', 'progress', 'current-time'],
         autoplay: true,
         muted: false,
-        clickToPlay: false,
+        clickToPlay: true,
         playsinline: true,
         youtube: expect.objectContaining({ noCookie: true, cc_load_policy: 0, cc_lang_pref: 'auto' }),
       }),