@playpilot/tpi 8.22.0-beta.1 → 8.23.0-beta.1

package/src/routes/components/Title.svelte

@@ -1,24 +1,19 @@
 <script lang="ts">
-  import Genres from './Genres.svelte'
   import Playlinks from './Playlinks/Playlinks.svelte'
   import Description from './Description.svelte'
-  import IconIMDb from './Icons/IconIMDb.svelte'
   import ParticipantsRail from './Rails/ParticipantsRail.svelte'
   import SimilarRail from './Rails/SimilarRail.svelte'
   import TitlePoster from './TitlePoster.svelte'
   import Share from './Share.svelte'
   import Trailer from './Trailer.svelte'
-  import YouTubeEmbedBackground from './YouTubeEmbedBackground.svelte'
-  import { t } from '$lib/localization'
   import type { TitleData } from '$lib/types/title'
   import { heading } from '$lib/actions/heading'
-  import { removeImageUrlPrefix } from '$lib/image'
   import { titleUrl } from '$lib/routes'
   import { getContext, setContext } from 'svelte'
   import { track } from '$lib/tracking'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
-  import { isYouTubeVideoAvailableInRegion } from '$lib/api/youtubeAvailability'
-  import { getVideoId } from '$lib/trailer'
+  import TitleBackground from './TitleBackground.svelte'
+  import TitleInfo from './TitleInfo.svelte'
 
   interface Props {
     title: TitleData
@@ -36,18 +31,6 @@
   const showDescription = $derived((!small || noAffiliate) && title.description)
 
   let posterLoaded = $state(false)
-  let backgroundLoaded = $state(false)
-  let useBackgroundFallback = $state(false)
-  let hasYouTubeVideoAvailable = $state(false)
-
-  $effect(() => {
-    if (!useVideoBackground) return
-    if (!title.embeddable_url) return
-
-    isYouTubeVideoAvailableInRegion(getVideoId(title.embeddable_url)!).then(isAvailable => {
-      hasYouTubeVideoAvailable = isAvailable
-    })
-  })
 </script>
 
 <div class="content" class:small>
@@ -58,21 +41,7 @@
 
     <div class="heading" use:heading={2} class:truncate={small} id="heading">{title.title}</div>
 
-    <div class="info">
-      <div class="imdb">
-        <IconIMDb />
-        {title.imdb_score}
-      </div>
-
-      <Genres genres={title.genres} />
-
-      <div>{title.year}</div>
-      <div class="capitalize">{t(`Type: ${title.type}`)}</div>
-
-      {#if !small && title.length}
-        <div>{title.length} {t('Minutes')}</div>
-      {/if}
-    </div>
+    <TitleInfo {title} {small} />
 
     <div class="actions">
       {#if title.embeddable_url}
@@ -97,21 +66,7 @@
   </div>
 </div>
 
-<div class="background" class:small class:offset-mute={modal === 'title'}>
-  {#if useVideoBackground && hasYouTubeVideoAvailable}
-    <YouTubeEmbedBackground embeddable_url={title.embeddable_url!} />
-  {:else}
-    {#key useBackgroundFallback}
-      <img
-        src={removeImageUrlPrefix(useBackgroundFallback ? title.standing_poster : title.medium_poster)}
-        alt=""
-        class:loaded={backgroundLoaded}
-        class:blur={useBackgroundFallback}
-        onload={() => backgroundLoaded = true}
-        onerror={() => useBackgroundFallback = true} />
-    {/key}
-  {/if}
-</div>
+<TitleBackground {title} {small} {useVideoBackground} offsetMute={modal === 'title'} />
 
 <style lang="scss">
   $poster-width: margin(4.5);
@@ -199,45 +154,11 @@
     }
   }
 
-  .info {
-    z-index: 1;
-    position: relative;
-    grid-area: info;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: margin(0.25) margin(0.75);
-
-    @include desktop {
-      gap: margin(0.5) margin(1);
-    }
-
-    .small & {
-      gap: margin(0.5) margin(0.75);
-    }
-  }
-
   .main {
     z-index: 1;
     position: relative;
   }
 
-  .imdb {
-    display: flex;
-    align-items: center;
-    gap: margin(0.25);
-
-    :global(svg) {
-      margin-top: margin(-0.125);
-
-      .small & {
-        margin-top: 0;
-        width: margin(0.75);
-        height: margin(0.75);
-      }
-    }
-  }
-
   .actions {
     z-index: 1;
     position: relative;
@@ -247,65 +168,6 @@
     margin-top: margin(1);
   }
 
-  .background {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: theme(detail-background-height, margin(20));
-    border-radius: theme(detail-background-border-radius, 0px);
-    overflow: hidden;
-    background: theme(detail-background, lighter);
-    mask-image: linear-gradient(to bottom, black 40%, transparent);
-    opacity: theme(detail-background-opacity, 1);
-
-    @include desktop() {
-      height: theme(detail-background-height, margin(12));
-      mask-image: linear-gradient(to bottom, black 60%, transparent);
-    }
-
-    @include mobile {
-      :global(.video-background) {
-        width: 225%;
-      }
-    }
-
-    &.small {
-      :global(.video-background) {
-        width: 150%;
-      }
-    }
-
-    &.offset-mute {
-      --mute-top: #{margin(3)};
-      --mute-right: #{margin(0.25)};
-    }
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      object-position: center;
-      margin: 0;
-      opacity: 0;
-      z-index: 0;
-
-      &.loaded {
-        opacity: 1;
-      }
-
-      &.blur {
-        opacity: 0.5;
-        transform: scale(1.1);
-        filter: blur(0.75rem);
-      }
-    }
-  }
-
-  .capitalize {
-    text-transform: capitalize;
-  }
-
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;

package/src/routes/components/TitleBackground.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+  import { isYouTubeVideoAvailableInRegion } from '$lib/api/youtubeAvailability'
+  import { removeImageUrlPrefix } from '$lib/image'
+  import { getVideoId } from '$lib/trailer'
+  import type { TitleData } from '$lib/types/title'
+  import YouTubeEmbedBackground from './YouTubeEmbedBackground.svelte'
+
+  interface Props {
+    title: TitleData,
+    small?: boolean,
+    offsetMute?: boolean,
+    useVideoBackground?: boolean,
+    autoplay?: boolean,
+    inline?: boolean,
+  }
+
+  const { title, small = false, offsetMute = false, useVideoBackground = true, autoplay = true, inline = false }: Props = $props()
+
+  let backgroundLoaded = $state(false)
+  let useBackgroundFallback = $state(false)
+  let hasYouTubeVideoAvailable = $state(false)
+
+  $effect(() => {
+    if (!useVideoBackground) return
+    if (!title.embeddable_url) return
+
+    isYouTubeVideoAvailableInRegion(getVideoId(title.embeddable_url)!).then(isAvailable => {
+      hasYouTubeVideoAvailable = isAvailable
+    })
+  })
+</script>
+
+<div class="background" class:small class:inline class:offset-mute={offsetMute}>
+  {#if useVideoBackground && hasYouTubeVideoAvailable}
+    <YouTubeEmbedBackground embeddable_url={title.embeddable_url!} {autoplay} />
+  {:else}
+    {#key useBackgroundFallback}
+      <img
+        src={removeImageUrlPrefix(useBackgroundFallback ? title.standing_poster : title.medium_poster)}
+        alt=""
+        class:loaded={backgroundLoaded}
+        class:blur={useBackgroundFallback}
+        onload={() => backgroundLoaded = true}
+        onerror={() => useBackgroundFallback = true} />
+    {/key}
+  {/if}
+</div>
+
+<style lang="scss">
+  .background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: theme(detail-background-height, margin(20));
+    border-radius: theme(detail-background-border-radius, 0px);
+    overflow: hidden;
+    background: theme(detail-background, lighter);
+    mask-image: linear-gradient(to bottom, black 40%, transparent);
+    opacity: theme(detail-background-opacity, 1);
+
+    @include desktop() {
+      height: theme(detail-background-height, margin(12));
+      mask-image: linear-gradient(to bottom, black 60%, transparent);
+    }
+
+    @include mobile {
+      :global(.video-background) {
+        width: theme(detail-background-width, 225%);
+      }
+    }
+
+    &.small {
+      :global(.video-background) {
+        width: 150%;
+      }
+    }
+
+    &.inline {
+      overflow: visible;
+      position: unset;
+      mask-image: unset;
+    }
+
+    &.offset-mute {
+      --mute-top: #{margin(3)};
+      --mute-right: #{margin(0.25)};
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: center;
+      margin: 0;
+      opacity: 0;
+      z-index: 0;
+
+      &.loaded {
+        opacity: 1;
+      }
+
+      &.blur {
+        opacity: 0.5;
+        transform: scale(1.1);
+        filter: blur(0.75rem);
+      }
+    }
+  }
+</style>

package/src/routes/components/TitleInfo.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import { t } from '$lib/localization'
+  import type { TitleData } from '$lib/types/title'
+  import Genres from './Genres.svelte'
+  import IconIMDb from './Icons/IconIMDb.svelte'
+
+  interface Props {
+    title: TitleData,
+    small?: boolean,
+  }
+
+  const { title, small = false }: Props = $props()
+</script>
+
+<div class="info" class:small>
+  <div class="imdb">
+    <IconIMDb />
+    {title.imdb_score}
+  </div>
+
+  <Genres genres={title.genres} />
+
+  <div>{title.year}</div>
+  <div class="capitalize">{t(`Type: ${title.type}`)}</div>
+
+  {#if !small && title.length}
+    <div>{title.length} {t('Minutes')}</div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .info {
+    z-index: 1;
+    position: relative;
+    grid-area: info;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: margin(0.25) margin(0.75);
+
+    @include desktop {
+      gap: margin(0.5) margin(1);
+    }
+
+    &.small {
+      gap: margin(0.5) margin(0.75);
+    }
+  }
+
+  .imdb {
+    display: flex;
+    align-items: center;
+    gap: margin(0.25);
+
+    :global(svg) {
+      margin-top: margin(-0.125);
+
+      .small & {
+        margin-top: 0;
+        width: margin(0.75);
+        height: margin(0.75);
+      }
+    }
+  }
+
+  .capitalize {
+    text-transform: capitalize;
+  }
+</style>

package/src/routes/components/YouTubeEmbed.svelte

@@ -9,10 +9,11 @@
     muted?: boolean
     loop?: boolean
     captions?: boolean
+    autoplay?: boolean
     showMuteControls?: boolean
   }
 
-  const { embeddable_url = '', controls = [], muted = false, loop = false, captions = false, showMuteControls = false }: Props = $props()
+  const { embeddable_url = '', controls = [], muted = false, loop = false, captions = false, autoplay = true, showMuteControls = false }: Props = $props()
 
   const videoId = $derived(getVideoId(embeddable_url))
   const startTime = $derived((window?.PlayPilotLinkInjections?.video_playtimes?.[videoId || ''] || 1) - 1)
@@ -39,14 +40,24 @@
     if (isMuted != state) iframe?.contentWindow?.postMessage('mute', '*')
     isMuted = state
   }
+
+  export function play(event: CustomEvent): void {
+    if (event.detail === embeddable_url) iframe?.contentWindow?.postMessage('play', '*')
+  }
+
+  export function pause(event: CustomEvent): void {
+    if (event.detail === embeddable_url) iframe?.contentWindow?.postMessage('pause', '*')
+  }
 </script>
 
+<svelte:window onplayembed={play} onpauseembed={pause} />
+
 {#if videoId}
   <iframe
     bind:this={iframe}
     width="600"
     height="338"
-    src="https://video.playpilot.net/?video_id={videoId}&color={color}&muted={muted}&loop={loop}&captions={captions}&controls={controls.join(',')}&start_time={startTime}&autoplay=true&playsinline=true"
+    src="https://video.playpilot.net/?video_id={videoId}&color={color}&muted={muted}&loop={loop}&captions={captions}&controls={controls.join(',')}&start_time={startTime}&autoplay={autoplay}&playsinline=true"
     title="YouTube video player"
     frameborder="0"
     referrerpolicy="strict-origin-when-cross-origin"

package/src/routes/components/YouTubeEmbedBackground.svelte

@@ -3,9 +3,10 @@
 
   interface Props {
     embeddable_url: string
+    autoplay?: boolean
   }
 
-  const { embeddable_url = '' }: Props = $props()
+  const { embeddable_url = '', autoplay = true }: Props = $props()
 
   let clientWidth = $state(0)
   let clientHeight = $state(0)
@@ -14,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} muted loop showMuteControls />
+  <YouTubeEmbed {embeddable_url} {autoplay} muted loop showMuteControls />
 </div>
 
 <style lang="scss">

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

@@ -87,6 +87,16 @@
       <button onclick={() => openModal({ type: 'participant', data: participants[0] })}>Show participant modal</button>
     </div>
   </div>
+
+  <div>
+    <h3>TitlesReelModal.svelte</h3>
+
+    {#await fetchSimilarTitles(title) then titles}
+      <div class="item">
+        <button onclick={() => openModal({ type: 'titles-reel', data: titles })}>Show titles reel modal</button>
+      </div>
+    {/await}
+  </div>
 </div>
 
 <h2>Title elements</h2>

package/src/tests/routes/components/Explore/Routes/ExploreHome.test.js

@@ -1,34 +1,23 @@
-import { render, waitFor } from '@testing-library/svelte'
+import { render } from '@testing-library/svelte'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import ExploreHome from '../../../../../routes/components/Explore/Routes/ExploreHome.svelte'
 import { fetchTitles } from '$lib/api/titles'
-import { api } from '$lib/api/api'
 
 vi.mock('$lib/api/titles', () => ({
   fetchTitles: vi.fn(),
 }))
 
-vi.mock('$lib/api/api', () => ({
-  api: vi.fn(),
-}))
-
 describe('ExploreResults.svelte', () => {
   beforeEach(() => {
     vi.resetAllMocks()
   })
 
-  it('Should fetch rails endpoint and titles for each rail', async () => {
-    const rail = { headings: {}, properties: {}, params: {} }
-
-    vi.mocked(api).mockResolvedValue([rail, rail, rail, rail, rail])
+  it('Should fetch titles for each rail', () => {
     vi.mocked(fetchTitles).mockResolvedValue({ next: null, previous: null, results: [] })
 
     render(ExploreHome)
 
-    await waitFor(() => {
-      expect(api).toHaveBeenCalledOnce()
-      expect(fetchTitles).toHaveBeenCalledTimes(5)
-    })
+    expect(fetchTitles).toHaveBeenCalledTimes(5)
   })
 })

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

@@ -38,43 +38,6 @@ describe('Playlinks.svelte', () => {
     expect(getByText('Some other playlink')).toBeTruthy()
   })
 
-  it('Should show disclaimer text when playlinks are given', () => {
-    const playlinks = [
-      { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
-      { name: 'Some other playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
-    ]
-    // @ts-ignore
-    const { getByTestId, getByText } = render(Playlinks, { playlinks, title })
-
-    expect(getByTestId('commission-disclaimer')).toBeTruthy()
-    expect(getByText('We may earn a commission', { exact: false })).toBeTruthy()
-  })
-
-  it('Should replace default disclaimer text with config value when given', () => {
-    // @ts-ignore
-    window.PlayPilotLinkInjections = {
-      config: { playlinks_disclaimer_text: 'Some disclaimer' },
-    }
-
-    const playlinks = [
-      { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
-    ]
-
-    // @ts-ignore
-    const { getByText } = render(Playlinks, { playlinks, title })
-
-    expect(getByText('Some disclaimer')).toBeTruthy()
-  })
-
-  it('Should show empty state without commission disclaimer when no playlinks are given', () => {
-    /** @type {import('$lib/types/playlink').PlaylinkData[]} */
-    const playlinks = []
-    const { queryByTestId, getByText } = render(Playlinks, { playlinks, title })
-
-    expect(getByText('This title is not currently available to stream.')).toBeTruthy()
-    expect(queryByTestId('commission-disclaimer')).not.toBeTruthy()
-  })
-
   it('Should call track function when clicked', async () => {
     const playlinks = [
       { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },

package/src/tests/routes/components/Playlinks/PlaylinksDisclaimer.test.js

@@ -0,0 +1,49 @@
+import { render } from '@testing-library/svelte'
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import Playlinks from '../../../../routes/components/Playlinks/Playlinks.svelte'
+import { title } from '$lib/fakeData'
+
+describe('Playlinks.svelte', () => {
+  beforeEach(() => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = {}
+  })
+
+  it('Should show disclaimer text when playlinks are given', () => {
+    const playlinks = [
+      { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
+      { name: 'Some other playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
+    ]
+    // @ts-ignore
+    const { getByTestId, getByText } = render(Playlinks, { playlinks, title })
+
+    expect(getByTestId('commission-disclaimer')).toBeTruthy()
+    expect(getByText('We may earn a commission', { exact: false })).toBeTruthy()
+  })
+
+  it('Should replace default disclaimer text with config value when given', () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = {
+      config: { playlinks_disclaimer_text: 'Some disclaimer' },
+    }
+
+    const playlinks = [
+      { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
+    ]
+
+    // @ts-ignore
+    const { getByText } = render(Playlinks, { playlinks, title })
+
+    expect(getByText('Some disclaimer')).toBeTruthy()
+  })
+
+  it('Should show empty state without commission disclaimer when no playlinks are given', () => {
+    /** @type {import('$lib/types/playlink').PlaylinkData[]} */
+    const playlinks = []
+    const { queryByTestId, getByText } = render(Playlinks, { playlinks, title })
+
+    expect(getByText('This title is not currently available to stream.')).toBeTruthy()
+    expect(queryByTestId('commission-disclaimer')).not.toBeTruthy()
+  })
+})

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

@@ -40,6 +40,12 @@ describe('YouTubeEmbed.svelte', () => {
     expect(/** @type {HTMLIFrameElement} */ (container.querySelector('iframe')).src).toContain('&captions=true')
   })
 
+  it('Should render embed iframe with autoplay set to false if given', () => {
+    const { container } = render(YouTubeEmbed, { embeddable_url: 'youtube.com/watch?v=abc', autoplay: false })
+
+    expect(/** @type {HTMLIFrameElement} */ (container.querySelector('iframe')).src).toContain('&autoplay=false')
+  })
+
   it('Should render error message if embeddable_url is invalid', () => {
     const { container, getByText } = render(YouTubeEmbed, { embeddable_url: '-' })