@playpilot/tpi 7.3.0 → 8.0.0-beta.explore-home.3

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

@@ -1,32 +1,68 @@
 <script lang="ts">
+  import { fade } from 'svelte/transition'
   import TitlePoster from '../TitlePoster.svelte'
+  import YouTubeEmbed from '../YouTubeEmbed.svelte'
   import Rail from './Rail.svelte'
   import type { TitleData } from '$lib/types/title'
   import { openModal } from '$lib/modal'
   import { titleUrl } from '$lib/routes'
-  import { getContext } from 'svelte'
+  import { getFirstTitleWithAvailableTrailer } from '$lib/trailer'
+  import { getContext, onMount } from 'svelte'
 
   interface Props {
     titles: Promise<TitleData[]> | TitleData[]
     heading?: string,
+    expandable?: boolean,
     onclick?: (title: TitleData) => void
   }
 
-  const { titles, heading = '', onclick = () => null }: Props = $props()
+  const { titles, heading = '', expandable = false, onclick = () => null }: Props = $props()
 
   const isPopover = getContext('scope') === 'popover'
   const returnToTitle: TitleData | null = isPopover ? getContext('title') : null
 
+  let expandedTitle: TitleData | null = $state(null)
+
+  onMount(() => {
+    if (expandable) expandFirstAvailableTrailer()
+  })
+
   function openTitle(event: MouseEvent, title: TitleData): void {
-    openModal({ event, data: title, returnToTitle })
+    event.preventDefault()
+
+    if (expandable && !isExpanded(title)) {
+      expandTitleIntoTrailer(title)
+      return
+    }
+
+    openModal({ event, data: title, returnToTitle, props: { useVideoBackground: expandable } })
     onclick(title)
   }
+
+  async function expandFirstAvailableTrailer(): Promise<void> {
+    const response = await titles
+
+    const title = await getFirstTitleWithAvailableTrailer(response)
+    if (!title) return
+
+    setTimeout(() => {
+      expandTitleIntoTrailer(title)
+    }, 500)
+  }
+
+  function expandTitleIntoTrailer(title: TitleData): void {
+    expandedTitle = title
+  }
+
+  function isExpanded(title: TitleData): boolean {
+    return title.sid === expandedTitle?.sid
+  }
 </script>
 
 <div class="titles">
   <Rail {heading}>
     {#await titles}
-      {#each { length: 8 }}
+      {#each { length: 12 }}
         <div class="title" data-testid="skeleton">
           <div class="poster"></div>
 
@@ -38,12 +74,30 @@
       {/each}
     {:then titles}
       {#each titles as title}
-        <div class="title" data-testid="title">
-          <a class="poster" href={titleUrl(title)} onclick={(event) => openTitle(event, title)}>
-            <TitlePoster {title} width={96} height={144} />
-          </a>
+        {@const expanded = isExpanded(title)}
+        {@const href = titleUrl(title)}
+        {@const onclick = (event: MouseEvent): void => openTitle(event, title)}
+
+        <div class="title" class:expanded data-testid="title">
+          <div class="media">
+            {#if expanded}
+              <div class="video" out:fade={{ delay: 200, duration: 200 }}>
+                <a class="video-overlay" title="" {href} {onclick}></a>
+
+                {#if !!title.embeddable_url}
+                  <YouTubeEmbed embeddable_url={title.embeddable_url!} muted />
+                {:else}
+                  <img class="video-fallback" src={title.medium_poster} alt="" />
+                {/if}
+              </div>
+            {:else}
+              <a class="poster" {href} {onclick}>
+                <TitlePoster {title} width={96} height={144} />
+              </a>
+            {/if}
+          </div>
 
-          <a href={titleUrl(title)} class="heading" onclick={(event) => openTitle(event, title)}>
+          <a class="heading" {href} {onclick} data-testid="heading">
             {title.title}
           </a>
         </div>
@@ -54,30 +108,87 @@
 
 <style lang="scss">
   $width: margin(6);
+  $image-height: #{calc($width * 3 / 2)};
+  $expanded-width: #{calc($image-height / 9 * 16)};
+  $border-radius: #{theme(rail-border-radius, border-radius)};
 
   .title {
-    width: $width;
-
     &:hover,
     &:active {
       filter: brightness(1.1);
     }
   }
 
+  .media {
+    width: $width;
+    border-radius: $border-radius;
+    transition: width 200ms;
+    overflow: hidden;
+
+    .expanded & {
+      width: $expanded-width;
+    }
+  }
+
+  @keyframes fade-iframe {
+    to {
+      opacity: 1;
+    }
+  }
+
+  .video {
+    position: relative;
+    height: $image-height;
+    width: $expanded-width;
+    aspect-ratio: 16/9;
+    border-radius: $border-radius;
+    overflow: hidden;
+    background: black;
+    z-index: 1;
+
+    :global(iframe) {
+      opacity: 0;
+      animation: fade-iframe 500ms 500ms forwards;
+    }
+
+    :global(+ .poster) {
+      position: absolute;
+      top: 0;
+    }
+  }
+
+  .video-overlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+  }
+
+  .video-fallback {
+    position: absolute;
+    object-fit: cover;
+    height: $image-height;
+    width: $expanded-width;
+  }
+
   .poster {
     display: block;
-    border-radius: theme(rail-border-radius, border-radius);
-    overflow: hidden;
-    width: 100%;
+    height: $image-height;
+    width: $width;
     aspect-ratio: 2 / 3;
+    border-radius: $border-radius;
     background: theme(detail-background-light, lighter);
     text-decoration: none;
+    overflow: hidden;
   }
 
   .heading {
     display: -webkit-box;
     padding-top: margin(0.5);
     overflow: hidden;
+    max-width: $width;
     text-decoration: none;
     color: theme(rail-text-color, text-color-alt) !important;
     font-size: theme(rail-font-size, font-size-small);

package/src/routes/components/Title.svelte

@@ -8,21 +8,25 @@
   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 { setContext } from 'svelte'
+  import { onMount, 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'
 
   interface Props {
     title: TitleData
     small?: boolean
+    useVideoBackground?: boolean
   }
 
-  const { title, small = false }: Props = $props()
+  const { title, small = false, useVideoBackground = false }: Props = $props()
 
   const noAffiliate = !!window.PlayPilotLinkInjections?.no_affiliate
 
@@ -33,6 +37,14 @@
   let posterLoaded = $state(false)
   let backgroundLoaded = $state(false)
   let useBackgroundFallback = $state(false)
+  let hasYouTubeVideoAvailable = $state(false)
+
+  onMount(async () => {
+    if (!useVideoBackground) return
+    if (!title.embeddable_url) return
+
+    hasYouTubeVideoAvailable = await isYouTubeVideoAvailableInRegion(getVideoId(title.embeddable_url)!)
+  })
 </script>
 
 <div class="content" class:small>
@@ -83,15 +95,19 @@
 </div>
 
 <div class="background">
-  {#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 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>
 
 <style lang="scss">

package/src/routes/components/TitleModal.svelte

@@ -15,7 +15,7 @@
     initialScrollPosition?: number
   }
 
-  const { title, initialScrollPosition = 0 }: Props = $props()
+  const { title, initialScrollPosition = 0, ...restProps }: Props = $props()
 
   const topScrollAd = getFirstAdOfType('top_scroll')
   const displayAd = getFirstAdOfType('card')
@@ -54,5 +54,5 @@
 {/snippet}
 
 <Modal {onscroll} {initialScrollPosition} bubble={!!topScrollAd || insertExploreCta ? bubble : null} prepend={displayAd ? prepend : null} tall>
-  <Title {title} />
+  <Title {title} {...restProps} />
 </Modal>

package/src/routes/components/YouTubeEmbed.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { getVideoId } from '$lib/trailer'
+
+  interface Props {
+    embeddable_url: string
+    controls?: ('play' | 'mute' | 'fullscreen' | 'progress' | 'current-time')[]
+    muted?: boolean
+    loop?: boolean
+  }
+
+  const { embeddable_url = '', controls = [], muted = false, loop = false }: Props = $props()
+
+  const videoId = $derived(getVideoId(embeddable_url))
+  const color = window?.getComputedStyle(document.body).getPropertyValue('--playpilot-primary')?.replace('#', '') || 'fa548a'
+</script>
+
+{#if videoId}
+  <iframe
+    width="600"
+    height="338"
+    src="https://video.playpilot.net/?video_id={videoId}&color={color}&muted={muted}&loop={loop}&controls={controls.join(',')}&autoplay=true&playsinline=true"
+    title="YouTube video player"
+    frameborder="0"
+    referrerpolicy="strict-origin-when-cross-origin"
+    allowfullscreen>
+  </iframe>
+{:else}
+  Something went wrong
+{/if}
+
+<style lang="scss">
+  iframe {
+    width: 100%;
+    height: 100%;
+  }
+</style>

package/src/routes/components/YouTubeEmbedBackground.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import YouTubeEmbed from './YouTubeEmbed.svelte'
+
+  interface Props {
+    embeddable_url: string
+  }
+
+  const { embeddable_url = '' }: Props = $props()
+
+  let clientWidth = $state(0)
+  let clientHeight = $state(0)
+
+  const height = $derived(Math.max(clientWidth, clientHeight))
+</script>
+
+<div class="video-background" style:--height="{height}px" bind:clientWidth bind:clientHeight data-testid="video-background">
+  <YouTubeEmbed {embeddable_url} muted />
+</div>
+
+<style lang="scss">
+  .video-background {
+    width: 100%;
+    height: 100%;
+
+    :global(iframe) {
+      position: absolute;
+      height: var(--height);
+      width: 100%;
+      top: 50%;
+      left: 50%;
+      transform: translateX(-50%) translateY(-50%);
+    }
+  }
+</style>

package/src/routes/components/YouTubeEmbedOverlay.svelte

@@ -1,33 +1,18 @@
 <script lang="ts">
   import { fade } from 'svelte/transition'
   import IconClose from './Icons/IconClose.svelte'
+  import YouTubeEmbed from './YouTubeEmbed.svelte'
 
   interface Props {
-    embeddable_url?: string,
+    embeddable_url: string,
     onclose: () => void
   }
 
   const { embeddable_url = '', onclose }: Props = $props()
-
-  const videoId = $derived(getVideoId(embeddable_url))
-  const color = window?.getComputedStyle(document.body).getPropertyValue('--playpilot-primary')?.replace('#', '') || 'fa548a'
-
-  // Gets the YouTube ID from a url, can be a large number of different formats
-  // https://stackoverflow.com/a/54200105/1665157
-  function getVideoId(url: string): string | null {
-    const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/
-    const match = url.match(regExp)
-
-    return match?.[7] || null
-  }
 </script>
 
 <div class="overlay" transition:fade={{ duration: 100 }}>
-  {#if videoId}
-    <iframe width="600" height="338" src="https://video.playpilot.net/?video_id={videoId}&color={color}&autoplay=true&playsinline=true&controls=play,mute,fullscreen,progress,current-time" title="YouTube video player" frameborder="0" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-  {:else}
-    Something went wrong
-  {/if}
+  <YouTubeEmbed {embeddable_url} controls={['current-time', 'fullscreen', 'mute', 'play', 'progress']} />
 
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -39,17 +24,6 @@
 </div>
 
 <style lang="scss">
-  iframe {
-    z-index: 1;
-    position: relative;
-    display: block;
-    width: 95vmin;
-    height: auto;
-    aspect-ratio: 16/9;
-    box-shadow: 0 0 margin(4) rgba(255, 255, 255, 0.15);
-    background: black;
-  }
-
   .overlay {
     z-index: 2147483647; // As high as she goes
     box-sizing: border-box;
@@ -62,6 +36,17 @@
     bottom: 0;
     left: 0;
     background: theme(detail-backdrop, rgba(0, 0, 0, 0.95));
+
+    :global(iframe) {
+      z-index: 1;
+      position: relative;
+      display: block;
+      width: 95vmin;
+      height: auto;
+      aspect-ratio: 16/9;
+      box-shadow: 0 0 margin(4) rgba(255, 255, 255, 0.15);
+      background: black;
+    }
   }
 
   .backdrop {

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

@@ -3,6 +3,7 @@
   import { title, linkInjections, campaign, participants } from '$lib/fakeData'
   import { openModal } from '$lib/modal'
   import { insertExplore, insertExploreIntoNavigation } from '$lib/explore'
+  import { fetchSimilarTitles } from '$lib/api/titles'
   import Disclaimer from '../components/Ads/Disclaimer.svelte'
   import Display from '../components/Ads/Display.svelte'
   import TopScroll from '../components/Ads/TopScroll.svelte'
@@ -17,7 +18,8 @@
   import Title from '../components/Title.svelte'
   import TitlePopover from '../components/TitlePopover.svelte'
   import Tooltip from '../components/Tooltip.svelte'
-  import Explore from '../components/Explore/Explore.svelte'
+  import ExploreRouter from '../components/Explore/ExploreRouter.svelte'
+  import TitlesRail from '../components/Rails/TitlesRail.svelte'
 
   if (browser) {
     // @ts-ignore
@@ -121,6 +123,14 @@
   </div>
 </div>
 
+<h2>Rails</h2>
+
+<button onclick={() => renderKey = Math.random()}>Rerender</button>
+
+{#key renderKey}
+  <TitlesRail titles={fetchSimilarTitles(title)} expandable />
+{/key}
+
 <h2>Ads</h2>
 
 <div class="group">
@@ -174,7 +184,7 @@
     <button onclick={() => renderKey = Math.random()}>Rerender</button>
 
     {#key renderKey}
-      <Explore />
+      <ExploreRouter />
     {/key}
   </div>
 

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

@@ -16,14 +16,13 @@
         explore_navigation_selector: 'nav a:last-child',
         explore_navigation_label: 'Streaming guide',
         explore_navigation_path: '/explore',
-        explore_custom_style: 'main { border: 2px solid white }',
       },
     }
   }
 
   insertExploreIntoNavigation()
   // Pretend there is some loading time, as there would be on a real page
-  setTimeout(insertExplore, 1500)
+  setTimeout(insertExplore, 100)
 </script>
 
 <main>

package/src/tests/lib/api/youtubeAvailability.test.js

@@ -0,0 +1,70 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { isYouTubeVideoAvailableInRegion } from '$lib/api/youtubeAvailability'
+import { fakeFetch } from '../../helpers'
+import { track } from '$lib/tracking'
+import { TrackingEvent } from '$lib/enums/TrackingEvent'
+
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+vi.mock('$env/static/public', () => ({
+  PUBLIC_YOUTUBE_AVAILABILITY_URL: 'https://some-path.com',
+}))
+
+describe('youtubeAvailability', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+    fakeFetch()
+
+    // @ts-ignore
+    window.PlayPilotLinkInjections = { region: 'nl' }
+  })
+
+  describe('isYouTubeVideoAvailableInRegion', () => {
+    it('Should return true if no region is set', async () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections = {}
+
+      expect(await isYouTubeVideoAvailableInRegion('video-id')).toBe(true)
+      expect(global.fetch).not.toHaveBeenCalled()
+    })
+
+    it('Should return false if region is in blocked list', async () => {
+      fakeFetch({ response: { blocked: { NL: true } } })
+
+      expect(await isYouTubeVideoAvailableInRegion('video-id')).toBe(false)
+    })
+
+    it('Should return true if region is not in blocked list', async () => {
+      fakeFetch({ response: { blocked: { US: true } } })
+
+      expect(await isYouTubeVideoAvailableInRegion('video-id')).toBe(true)
+    })
+
+    it('Should return false if allowed list exists but region is not in it', async () => {
+      fakeFetch({ response: { allowed: ['US', 'GB'] } })
+
+      expect(await isYouTubeVideoAvailableInRegion('video-id')).toBe(false)
+    })
+
+    it('Should return true if allowed list exists and region is in it', async () => {
+      fakeFetch({ response: { allowed: ['US', 'NL'] } })
+
+      expect(await isYouTubeVideoAvailableInRegion('video-id')).toBe(true)
+    })
+
+    it('Should return true if no restrictions are returned', async () => {
+      fakeFetch({ response: {} })
+
+      expect(await isYouTubeVideoAvailableInRegion('video-id')).toBe(true)
+    })
+
+    it('Should return false and track event if fetch throws', async () => {
+      fakeFetch({ ok: false, status: 500 })
+
+      expect(await isYouTubeVideoAvailableInRegion('video-id')).toBe(false)
+      expect(track).toHaveBeenCalledWith(TrackingEvent.YouTubeAvailabilityRequestFailed, null, { message: expect.any(String) })
+    })
+  })
+})

package/src/tests/lib/explore.test.js

@@ -1,7 +1,6 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { destroyExplore, exploreCustomStyleId, explorePreConsentSelector, insertExplore, insertExploreIntoNavigation } from '$lib/explore'
+import { destroyExplore, explorePreConsentSelector, insertExplore, insertExploreIntoNavigation } from '$lib/explore'
 import { mount, unmount } from 'svelte'
-import { waitFor } from '@testing-library/svelte'
 vi.mock('svelte', () => ({
   mount: vi.fn(() => true),
   unmount: vi.fn(),
@@ -50,34 +49,6 @@ describe('explore.js', () => {
 
       expect(document.querySelector(explorePreConsentSelector)).not.toBeTruthy()
     })
-
-    it('Should insert custom style tag if config object is given', async () => {
-      // @ts-ignore
-      window.PlayPilotLinkInjections = {
-        config: {
-          explore_custom_style: 'main { color: red; }',
-        },
-      }
-
-      insertExplore()
-
-      await waitFor(() => {
-        expect(document.querySelector('#' + exploreCustomStyleId)).toBeTruthy()
-      })
-    })
-
-    it('Should not insert custom style tag if config value is not given', async () => {
-      // @ts-ignore
-      window.PlayPilotLinkInjections = {
-        config: {
-          explore_custom_style: '',
-        },
-      }
-
-      insertExplore()
-
-      expect(document.querySelector('#' + exploreCustomStyleId)).not.toBeTruthy()
-    })
   })
 
   describe('destroyExplore', () => {
@@ -93,14 +64,6 @@ describe('explore.js', () => {
 
       expect(unmount).toHaveBeenCalled()
     })
-
-    it('Should remove custom style tag', () => {
-      document.body.innerHTML = `<script id="${exploreCustomStyleId}"></script>`
-
-      destroyExplore()
-
-      expect(document.querySelector('#' + exploreCustomStyleId)).not.toBeTruthy()
-    })
   })
 
   describe('insertExploreIntoNavigation', () => {