@playpilot/tpi 7.1.0 → 8.0.0-beta.explore-home.2

package/events.md

@@ -94,6 +94,7 @@ Event | Action | Info | Payload
 `ali_trailer_button_click` | _Fires any time the trailer button is clicked for a title_ | | `Title`
 `ali_expand_title_description` | _Fires any time the "show more" button is clicked for a title description_ | | `Title`
 `ali_region_request_failed` | _Fires when requests to external service for getting the user region fails_ | | `message` (error message as returned by the request)
+`ali_youtube_availability_request_failed` | _Fires when requests to external service for getting the youtube availability fails_ | | `message` (error message as returned by the request)
 
 ### Explore
 Event | Action | Info | Payload

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "7.1.0",
+	"version": "8.0.0-beta.explore-home.2",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/api/youtubeAvailability.ts

@@ -0,0 +1,26 @@
+import { PUBLIC_YOUTUBE_AVAILABILITY_URL } from '$env/static/public'
+import { TrackingEvent } from '$lib/enums/TrackingEvent'
+import { track } from '$lib/tracking'
+
+export async function isYouTubeVideoAvailableInRegion(videoId: string): Promise<boolean> {
+  const region = window.PlayPilotLinkInjections?.region?.toUpperCase()
+
+  if (!region) return true
+
+  try {
+    const response = await fetch(`${PUBLIC_YOUTUBE_AVAILABILITY_URL}/?video_id=${videoId}`)
+
+    if (!response.ok) throw new Error('Response was not ok')
+
+    const data = await response.json()
+
+    if (data.blocked?.[region]) return false
+    if (!data.blocked && !!data.allowed && !data.allowed?.includes(region)) return false
+
+    return true
+  } catch (error: any) {
+    track(TrackingEvent.YouTubeAvailabilityRequestFailed, null, { message: error.message })
+
+    return false
+  }
+}

package/src/lib/enums/TrackingEvent.ts

@@ -60,6 +60,7 @@ export const TrackingEvent = {
   TrailerClick: 'ali_trailer_button_click',
   ExpandTitleDescription: 'ali_expand_title_description',
   RegionRequestFailed: 'ali_region_request_failed',
+  YouTubeAvailabilityRequestFailed: 'ali_youtube_availability_request_failed',
 
   // Explore
   // These deliberately do not use the `ali_` prefix. We might want to separate this from TPI at some point

package/src/lib/explore.ts

@@ -1,5 +1,5 @@
 import { mount, unmount } from 'svelte'
-import Explore from '../routes/components/Explore/Explore.svelte'
+import ExploreRouter from '../routes/components/Explore/ExploreRouter.svelte'
 
 export const exploreParentSelector = '[data-playpilot-explore]'
 export const explorePreConsentSelector = '[data-playpilot-pre-consent-explore]'
@@ -18,7 +18,7 @@ export function insertExplore(): void {
   document.querySelector<HTMLElement>(explorePreConsentSelector)?.remove()
 
   target.innerHTML = ''
-  exploreInsertedComponent = mount(Explore, { target })
+  exploreInsertedComponent = mount(ExploreRouter, { target })
 }
 
 export function destroyExplore(): void {

package/src/lib/trailer.ts

@@ -2,6 +2,7 @@ import { mount, unmount } from 'svelte'
 import { getPlayPilotWrapperElement } from './injection'
 import type { TitleData } from './types/title'
 import YouTubeEmbedOverlay from '../routes/components/YouTubeEmbedOverlay.svelte'
+import { isYouTubeVideoAvailableInRegion } from './api/youtubeAvailability'
 
 let currentTrailerComponent: object | null = {}
 
@@ -19,3 +20,33 @@ export function closeTrailerOverlay(): void {
 
   currentTrailerComponent = null
 }
+
+// Gets the YouTube ID from a url, can be a large number of different formats
+// https://stackoverflow.com/a/54200105/1665157
+export 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
+}
+
+export async function getFirstTitleWithAvailableTrailer(titles: TitleData[], limit = 3): Promise<TitleData | null> {
+  let index = 0
+  let titleWithAvailableTrailer: TitleData | null = null
+
+  while (index < limit && !titleWithAvailableTrailer) {
+    const title = titles[index]
+    const videoId = title?.embeddable_url && getVideoId(title.embeddable_url)
+
+    try {
+      const isTrailerAvailable = videoId && await isYouTubeVideoAvailableInRegion(videoId)
+      if (isTrailerAvailable) titleWithAvailableTrailer = title
+    } catch {
+      // ignore
+    }
+
+    index++
+  }
+
+  return titleWithAvailableTrailer
+}

package/src/lib/types/explore.d.ts

@@ -0,0 +1,5 @@
+export type ExploreRoute = {
+  key: string
+  label: string
+  component: any
+}

package/src/routes/components/Button.svelte

@@ -67,11 +67,12 @@
     &:hover,
     &:active,
     &.active {
-      background: theme(button-border-color, lighter);
+      background: theme(button-hover-border-color, lighter);
       color: theme(button-hover-text-color, text-color);
     }
 
     &.active {
+      box-shadow: inset 0 0 0 1px theme(button-active-border-color, text-color-alt);
       filter: brightness(theme(hover-filter-brightness));
     }
   }

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

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import { heading } from '$lib/actions/heading'
+  import { exploreParentSelector } from '$lib/explore'
+  import { t } from '$lib/localization'
+  import type { ExploreRoute } from '$lib/types/explore'
+  import type { Snippet } from 'svelte'
+  import Search from './Filter/Search.svelte'
+  import Button from '../Button.svelte'
+
+  interface Props {
+    routes: ExploreRoute[]
+    currentRoute: ExploreRoute
+    navigate?: (route: ExploreRoute) => void
+    searchQuery?: string
+    children: Snippet
+  }
+
+  let { routes, currentRoute, navigate = () => null, searchQuery = $bindable(''), children }: Props = $props()
+
+  let element: HTMLElement | null = null
+  let height: string | null = $state(null)
+
+  $effect(() => {
+    // Set the height of this element to match that of it's container. That way we can
+    // allow our element to be scrollable, rather than the parent needing to be scrollable.
+    height = element?.closest<HTMLElement>(exploreParentSelector)?.style.height || null
+  })
+</script>
+
+<div class="explore playpilot-styled-scrollbar" bind:this={element} style:height>
+  <div class="header" role="banner">
+    <div>
+      <div class="divider"></div>
+
+      <div class="heading" use:heading>
+        {t('Streaming Guide')}
+      </div>
+    </div>
+  </div>
+
+  <div class="navigation" role="navigation">
+    {#each routes as route}
+      <Button variant="border" size="large" active={currentRoute.key === route.key} onclick={() => navigate(route)}>
+        {t(route.label)}
+      </Button>
+    {/each}
+  </div>
+
+  <Search oninput={(query) => searchQuery = query} />
+
+  {@render children()}
+</div>
+
+<style lang="scss">
+  .explore {
+    background: theme(explore-background, light);
+    border-radius: theme(border-radius-large);
+    max-width: theme(explore-max-width, 1200px);
+    min-height: 75vh;
+    margin: 0 auto;
+    padding: theme(explore-padding, margin(1) margin(1) margin(6));
+    overflow: auto;
+    font-family: theme(font-family);
+    font-family: theme(detail-font-family, font-family);
+    font-weight: theme(detail-font-weight, normal);
+    font-size: theme(detail-font-size, font-size-base);
+
+    :global(*) {
+      box-sizing: border-box;
+    }
+  }
+
+  .header {
+    display: flex;
+    flex-direction: column;
+    gap: margin(0.5);
+    margin: theme(explore-header-margin, 0 0 margin(2));
+    width: 100%;
+  }
+
+  .divider {
+    width: 100%;
+    height: theme(explore-divider-height, 0);
+    max-width: theme(explore-header-max-width, 600px);
+    background: theme(explore-divider-background, text-color);
+  }
+
+  .heading {
+    margin: theme(explore-heading-margin, margin(0.25) 0);
+    color: theme(text-color);
+    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);
+  }
+
+  .navigation {
+    display: flex;
+    gap: margin(0.5);
+    margin-bottom: margin(0.5);
+  }
+</style>

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

@@ -1,7 +1,7 @@
 
 <script lang="ts">
   import Modal from '../Modal.svelte'
-  import Explore from './Explore.svelte'
+  import ExploreRouter from './ExploreRouter.svelte'
 
   interface Props {
     initialScrollPosition?: number
@@ -12,7 +12,7 @@
 
 <Modal {initialScrollPosition} closeButtonStyle="flat" wide>
   <div class="content">
-    <Explore />
+    <ExploreRouter />
   </div>
 </Modal>
 

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

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import ExploreHome from './Routes/ExploreHome.svelte'
+  import ExploreResults from './Routes/ExploreResults.svelte'
+  import type { ExploreRoute } from '$lib/types/explore'
+  import ExploreLayout from './ExploreLayout.svelte'
+
+  const routes: ExploreRoute[] = [
+    {
+      key: 'home',
+      label: 'Home',
+      component: ExploreHome,
+    }, {
+      key: 'results',
+      label: 'Explore',
+      component: ExploreResults,
+    },
+  ]
+
+  let currentRoute: ExploreRoute = $state(routes[0])
+  let searchQuery: string = $state('')
+
+  const CurrentRouteComponent = $derived(currentRoute.component)
+
+  $effect(() => {
+    if (searchQuery) currentRoute = routes.find(route => route.key === 'results')!
+  })
+
+  function navigate(route: ExploreRoute): void {
+    currentRoute = route
+  }
+</script>
+
+<ExploreLayout {routes} {currentRoute} {navigate} bind:searchQuery>
+  <CurrentRouteComponent {searchQuery} />
+</ExploreLayout>

package/src/routes/components/Explore/Routes/ExploreHome.svelte

@@ -0,0 +1,15 @@
+<script>
+  import { fetchSimilarTitles } from '$lib/api/titles'
+  import { title } from '$lib/fakeData'
+  import TitlesRail from '../../Rails/TitlesRail.svelte'
+</script>
+
+<div data-testid="explore-home"></div>
+
+{#await fetchSimilarTitles(title)}
+  Loading...
+{:then titles}
+  <TitlesRail heading="Some titles" {titles} expandable />
+  <TitlesRail heading="Some other titles" titles={fetchSimilarTitles(titles[1])} expandable />
+  <TitlesRail heading="Some more titles" titles={fetchSimilarTitles(titles[5])} expandable />
+{/await}

package/src/routes/components/Explore/{Explore.svelte → Routes/ExploreResults.svelte}

@@ -1,9 +1,7 @@
 <script lang="ts">
-  import { heading } from '$lib/actions/heading'
   import { fetchAds } from '$lib/api/ads'
   import { fetchTitles } from '$lib/api/titles'
   import { MetaEvent, TrackingEvent } from '$lib/enums/TrackingEvent'
-  import { exploreParentSelector } from '$lib/explore'
   import { openModal } from '$lib/modal'
   import { track } from '$lib/tracking'
   import type { APIPaginatedResult } from '$lib/types/api'
@@ -13,25 +11,27 @@
   import { trackViaPixel } from '@playpilot/retargeting-tracking'
   import { onMount } from 'svelte'
   import { t } from '$lib/localization'
-  import Button from '../Button.svelte'
-  import GridTitle from '../GridTitle.svelte'
-  import GridTitleSkeleton from '../GridTitleSkeleton.svelte'
-  import ListTitle from '../ListTitle.svelte'
-  import ListTitleSkeleton from '../ListTitleSkeleton.svelte'
-  import Filter from './Filter/Filter.svelte'
-  import Search from './Filter/Search.svelte'
-  import Empty from './Empty.svelte'
+  import Button from '../../Button.svelte'
+  import GridTitle from '../../GridTitle.svelte'
+  import GridTitleSkeleton from '../../GridTitleSkeleton.svelte'
+  import ListTitle from '../../ListTitle.svelte'
+  import ListTitleSkeleton from '../../ListTitleSkeleton.svelte'
+  import Filter from '../Filter/Filter.svelte'
+  import Empty from '../Empty.svelte'
+
+  interface Props {
+    searchQuery?: string
+  }
+
+  const { searchQuery = '' }: Props = $props()
 
   const filter: ExploreFilter = $state({})
 
-  let element: HTMLElement | null = null
   let titles: TitleData[] = $state([])
   let page = $state(1)
   let debounce: ReturnType<typeof setTimeout> | null = null
   let latestRequestId = 0
-  let searchQuery = $state('')
   let promise = $state(getTitlesForFilter())
-  let height: string | null = $state(null)
   let width = $state(0)
 
   const grid = $derived(width > 500)
@@ -45,9 +45,7 @@
   const SkeletonComponent = $derived(grid ? GridTitleSkeleton : ListTitleSkeleton)
 
   $effect(() => {
-    // Set the height of this element to match that of it's container. That way we can
-    // allow our element to be scrollable, rather than the parent needing to be scrollable.
-    height = element?.closest<HTMLElement>(exploreParentSelector)?.style.height || null
+    if (searchQuery) search(searchQuery)
   })
 
   onMount(async () => {
@@ -85,8 +83,6 @@
   }
 
   async function search(query: string): Promise<void> {
-    searchQuery = query
-
     if (debounce) clearTimeout(debounce)
 
     debounce = setTimeout(() => {
@@ -123,114 +119,49 @@
   }
 </script>
 
-<div class="explore playpilot-styled-scrollbar" class:grid bind:this={element} bind:clientWidth={width} style:height>
-  <div class="header" role="banner">
-    <div>
-      <div class="divider"></div>
-
-      <div class="heading" use:heading>
-        {t('Streaming Guide')}
-      </div>
-
-      <p class="description">
-        {t('Streaming Guide Description')}
-      </p>
-    </div>
+{#key grid}
+  <div class="filter">
+    <Filter {filter} limit={!grid} onchange={setFilter} showSorting={!searchQuery} />
+  </div>
+{/key}
 
-    {#key grid}
-      <Search oninput={search} />
-      <Filter {filter} limit={!grid} onchange={setFilter} showSorting={!searchQuery} />
+<div class="titles" class:grid role="main" style:--grid-columns={gridColumns} bind:clientWidth={width} data-testid="explore-results">
+  {#each titles as title}
+    {#key title.sid}
+      <TitleComponent {title} onclick={(event: MouseEvent) => openTitle(event, title)} />
     {/key}
-  </div>
+  {/each}
 
-  <div class="titles" role="main" style:--grid-columns={gridColumns}>
-    {#each titles as title}
-      {#key title.sid}
-        <TitleComponent {title} onclick={(event: MouseEvent) => openTitle(event, title)} />
-      {/key}
+  {#await promise}
+    {#each { length: 24 } as _}
+      <SkeletonComponent />
     {/each}
-
-    {#await promise}
-      {#each { length: 24 } as _}
-        <SkeletonComponent />
-      {/each}
-    {:catch}
-      <!-- This is handled below -->
-    {/await}
-  </div>
-
-  {#await promise then { next }}
-    {#if next}
-      <div class="show-more">
-        <Button size="large" onclick={fetchMoreTitles}>{t('Show More')}</Button>
-      </div>
-    {/if}
-
-    {#if !titles?.length && page === 1}
-      <Empty />
-    {/if}
   {:catch}
-    <p>Something went wrong</p>
+    <!-- This is handled below -->
   {/await}
 </div>
 
-<style lang="scss">
-  .explore {
-    background: theme(explore-background, light);
-    border-radius: theme(border-radius-large);
-    max-width: theme(explore-max-width, 1200px);
-    min-height: 75vh;
-    margin: 0 auto;
-    padding: theme(explore-padding, margin(1) margin(1) margin(6));
-    overflow: auto;
-    font-family: theme(font-family);
-    font-family: theme(detail-font-family, font-family);
-    font-weight: theme(detail-font-weight, normal);
-    font-size: theme(detail-font-size, font-size-base);
-
-    :global(*) {
-      box-sizing: border-box;
-    }
-  }
+{#await promise then { next }}
+  {#if next}
+    <div class="show-more" class:grid>
+      <Button size="large" onclick={fetchMoreTitles}>{t('Show More')}</Button>
+    </div>
+  {/if}
+
+  {#if !titles?.length && page === 1}
+    <Empty />
+  {/if}
+{:catch}
+  <p>Something went wrong</p>
+{/await}
 
-  .header {
+<style lang="scss">
+  .filter {
     display: flex;
     flex-direction: column;
     gap: margin(0.5);
-    margin: theme(explore-header-margin, 0 0 margin(2));
     width: 100%;
-
-    .grid & {
-      gap: margin(1);
-    }
-  }
-
-  .divider {
-    width: 100%;
-    height: theme(explore-divider-height, 0);
-    max-width: theme(explore-header-max-width, 600px);
-    background: theme(explore-divider-background, text-color);
-  }
-
-  .heading {
-    margin: theme(explore-heading-margin, margin(0.25) 0);
-    color: theme(text-color);
-    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);
-  }
-
-  .description {
-    max-width: theme(explore-header-max-width, 600px);
-    margin: theme(explore-description-margin, 0 0 margin(1));
-    color: theme(text-color-alt);
-    font-size: theme(font-size-small);
-    line-height: 1.35;
-
-    .grid & {
-      font-size: theme(font-size-base);
-    }
+    margin: margin(0.5) 0 margin(2);
   }
 
   .titles {
@@ -242,7 +173,7 @@
     flex-direction: column;
     gap: margin(0.5);
 
-    .grid & {
+    &.grid {
       display: grid;
       grid-template-columns: repeat(var(--grid-columns), minmax(120px, 1fr));
       gap: margin(1);
@@ -254,7 +185,7 @@
     display: grid;
     margin-top: margin(1);
 
-    .grid & {
+    &.grid {
       margin: margin(2) auto 0;
       max-width: 600px;
       width: 100%;

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

@@ -1,32 +1,53 @@
 <script lang="ts">
+  import { slide } 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) expandTitleIntoTrailer()
+  })
+
   function openTitle(event: MouseEvent, title: TitleData): void {
     openModal({ event, data: title, returnToTitle })
     onclick(title)
   }
+
+  async function expandTitleIntoTrailer(): Promise<void> {
+    const response = await titles
+
+    const title = await getFirstTitleWithAvailableTrailer(response)
+    if (!title) return
+
+    setTimeout(() => {
+      expandedTitle = title
+    }, 1500)
+  }
 </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,10 +59,18 @@
       {/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 = title.sid === expandedTitle?.sid && title.embeddable_url}
+
+        <div class="title" class:expanded data-testid="title">
+          {#if expanded}
+            <div class="video" transition:slide={{ axis: 'x' }}>
+              <YouTubeEmbed embeddable_url={title.embeddable_url!} muted />
+            </div>
+          {:else}
+            <a class="poster" href={titleUrl(title)} onclick={(event) => openTitle(event, title)}>
+              <TitlePoster {title} width={96} height={144} />
+            </a>
+          {/if}
 
           <a href={titleUrl(title)} class="heading" onclick={(event) => openTitle(event, title)}>
             {title.title}
@@ -62,16 +91,39 @@
     &:active {
       filter: brightness(1.1);
     }
+
+    &.expanded {
+      width: auto;
+    }
   }
 
-  .poster {
-    display: block;
+  @keyframes fade-iframe {
+    to {
+      opacity: 1;
+    }
+  }
+
+  .video {
+    height: calc($width * 3 / 2);
+    aspect-ratio: 16/9;
     border-radius: theme(rail-border-radius, border-radius);
     overflow: hidden;
+    background: black;
+
+    :global(iframe) {
+      opacity: 0;
+      animation: fade-iframe 500ms 500ms forwards;
+    }
+  }
+
+  .poster {
+    display: block;
     width: 100%;
     aspect-ratio: 2 / 3;
+    border-radius: theme(rail-border-radius, border-radius);
     background: theme(detail-background-light, lighter);
     text-decoration: none;
+    overflow: hidden;
   }
 
   .heading {