@playpilot/tpi 8.32.0 → 8.33.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.32.0",
+	"version": "8.33.1",
 	"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/Icons/IconFullscreen.svelte

@@ -0,0 +1,3 @@
+<svg width="32px" height="32px" viewBox="0 -960 960 960">
+  <path fill="currentColor" d="M120-120v-200h80v120h120v80H120Zm520 0v-80h120v-120h80v200H640ZM120-640v-200h200v80H200v120h-80Zm640 0v-120H640v-80h200v200h-80Z" />
+</svg>

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

@@ -188,7 +188,7 @@
                   <div class="video-overlay" title="" {onclick}></div>
 
                   {#if !!title.embeddable_url}
-                    <YouTubeEmbed bind:this={embed} embeddable_url={title.embeddable_url!} muted loop captions showMuteControls />
+                    <YouTubeEmbed bind:this={embed} embeddable_url={title.embeddable_url!} muted loop captions showActions />
                   {:else}
                     <img class="video-fallback" src={title.medium_poster} alt="" />
                   {/if}

package/src/routes/components/YouTubeEmbed.svelte

@@ -1,7 +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
@@ -10,17 +12,19 @@
     loop?: boolean
     captions?: boolean
     autoplay?: boolean
-    showMuteControls?: boolean
+    showActions?: boolean
     fallbackStartTime?: number
+    clickToPlay?: boolean
   }
 
-  let { embeddable_url = '', controls = [], muted = false, loop = false, captions = false, autoplay = true, showMuteControls = 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)
   const color = window?.getComputedStyle(document.body).getPropertyValue('--playpilot-primary')?.replace('#', '') || 'fa548a'
 
   let element: HTMLElement | null = $state(null)
+  let fullscreen: boolean = $state(false)
   let player: any
 
   onMount(() => {
@@ -45,11 +49,12 @@
     element.style.setProperty('--plyr-color-main', '#' + color)
 
     player = new window.Plyr(element, {
-      controls,
+      controls: controls.length === 0 ? ['play', 'mute', 'fullscreen', 'progress', 'current-time'] : controls,
       playsinline: true,
       autoplay,
       muted,
-      clickToPlay: false,
+      clickToPlay,
+      storage: { enabled: false },
       youtube: {
         noCookie: true,
         cc_load_policy: captions ? 1 : 0,
@@ -62,6 +67,16 @@
       toggleMute(muted)
     })
 
+    player.on('enterfullscreen', () => {
+      fullscreen = true
+      toggleMute(false)
+    })
+
+    player.on('exitfullscreen', () => {
+      fullscreen = false
+      toggleMute(true)
+    })
+
     if (!loop) return
 
     player.on('statechange', (event: { detail: { code: number } }) => {
@@ -75,10 +90,19 @@
   }
 
   export function toggleMute(state = !muted): void {
+    muted = state
     player.muted = state
-    player.volume = muted ? 0 : 1
+    player.volume = state ? 0 : 1
+  }
 
-    muted = state
+  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 {
@@ -100,13 +124,19 @@
 </svelte:head>
 
 {#if videoId}
-  <div bind:this={element} class="player" data-plyr-provider="youtube" data-plyr-embed-id data-testid={embeddable_url}></div>
-
-  {#if showMuteControls}
-    <button class="mute" onclick={() => toggleMute()} aria-label="Mute">
-      <IconMute {muted} />
-    </button>
-  {/if}
+  <div class:fullscreen class:hide-controls={controls.length === 0 && !fullscreen}>
+    <div bind:this={element} class="player" data-plyr-provider="youtube" data-plyr-embed-id data-testid={embeddable_url}></div>
+
+    {#if showActions}
+      <button class="action" onclick={() => toggleMute()} aria-label="Mute">
+        <IconMute {muted} />
+      </button>
+
+      <button class="action secondary" onclick={enterFullscreen} aria-label="Fullscreen">
+        <IconFullscreen />
+      </button>
+    {/if}
+  </div>
 {:else}
   Something went wrong
 {/if}
@@ -123,7 +153,20 @@
     height: 100%;
   }
 
-  .mute {
+  .fullscreen :global(iframe) {
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    transform: none;
+  }
+
+  .hide-controls :global(.plyr__controls) {
+    display: none;
+    opacity: 0;
+  }
+
+  .action {
     z-index: 10;
     display: flex;
     align-items: center;
@@ -148,5 +191,9 @@
     &:active {
       transform: scale(0.95);
     }
+
+    &.secondary {
+      top: calc(margin(3) + var(--mute-top, 0px));
+    }
   }
 </style>

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 showMuteControls />
+  <YouTubeEmbed {embeddable_url} {autoplay} fallbackStartTime={5} muted loop showActions clickToPlay={false} />
 </div>
 
 <style lang="scss">

package/src/routes/elements/+page.svelte

@@ -48,7 +48,7 @@
 <h2>Youtube Embed</h2>
 
 <div class="video">
-  <YouTubeEmbed embeddable_url="https://www.youtube.com/watch?v=bBMajXwi6Cs" controls={['progress', 'play']} loop showMuteControls muted />
+  <YouTubeEmbed embeddable_url="https://www.youtube.com/watch?v=bBMajXwi6Cs" controls={['progress', 'play']} loop showActions muted />
 </div>
 
 <h2>Title</h2>

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

@@ -54,10 +54,10 @@ describe('YouTubeEmbed.svelte', () => {
     expect(Plyr).toHaveBeenCalledWith(
       playerElement,
       expect.objectContaining({
-        controls: [],
+        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' }),
       }),
@@ -145,4 +145,11 @@ describe('YouTubeEmbed.svelte', () => {
     expect(container.querySelector('.player')).not.toBeTruthy()
     expect(getByText('Something went wrong')).toBeTruthy()
   })
+
+  it('Should render actions when showActions is true', () => {
+    const { getByLabelText } = render(YouTubeEmbed, { embeddable_url: 'youtube.com/watch?v=abc', showActions: true })
+
+    expect(getByLabelText('Mute')).toBeTruthy()
+    expect(getByLabelText('Fullscreen')).toBeTruthy()
+  })
 })