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

package/events.md

@@ -9,11 +9,6 @@ All events share a common payload:
 - `organization_sid`: The sid for the related organization
 - `domain_sid`: The sid for the related domain
 - `device`: Basic device info containing the screen type, size, touch, and orientation
-  - `type`: "desktop" or "mobile"
-  - `width`: Screen width in pixels
-  - `height`: Screen height in pixels
-  - `touch`: Whether the device uses touch controls or not
-  - `orientation`: "landscape-primary", "landscape-secondary", "portrait-primary", "portrait-secondary", or "undefined"
 
 Events related to titles share an additional set of data (referred to below as `Title`):
 
@@ -99,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.3.0",
+	"version": "8.0.0-beta.explore-home.3",
 	"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,9 +1,8 @@
 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]'
-export const exploreCustomStyleId = 'playpilot-explore-custom-style'
 
 let exploreInsertedComponent: object | null = null
 
@@ -19,9 +18,7 @@ export function insertExplore(): void {
   document.querySelector<HTMLElement>(explorePreConsentSelector)?.remove()
 
   target.innerHTML = ''
-  exploreInsertedComponent = mount(Explore, { target })
-
-  insertExploreCustomStyle()
+  exploreInsertedComponent = mount(ExploreRouter, { target })
 }
 
 export function destroyExplore(): void {
@@ -29,8 +26,6 @@ export function destroyExplore(): void {
 
   unmount(exploreInsertedComponent)
   exploreInsertedComponent = null
-
-  document.querySelector('#' + exploreCustomStyleId)?.remove()
 }
 
 /**
@@ -42,7 +37,7 @@ export function insertExploreIntoNavigation(): boolean {
   const config = window.PlayPilotLinkInjections.config
   if (!config) return false
 
-  const { explore_navigation_selector: selector, explore_navigation_label: label, explore_navigation_path: path, explore_navigation_insert_position: insertPosition } = config
+  const { explore_navigation_selector: selector, explore_navigation_label: label, explore_navigation_path: path, explore_navigation_insert_position: insertPosition } = window.PlayPilotLinkInjections.config
   if (!selector) return false
 
   // Make sure to remove an element we created if it already exists. Should not be possible under normal circumstances.
@@ -64,16 +59,3 @@ export function insertExploreIntoNavigation(): boolean {
 
   return true
 }
-
-function insertExploreCustomStyle(): void {
-  const customStyleString = window.PlayPilotLinkInjections.config?.explore_custom_style
-
-  if (!customStyleString) return
-
-  const styleElement = document.createElement('style')
-
-  styleElement.textContent = customStyleString
-  styleElement.id = exploreCustomStyleId
-
-  document.body.appendChild(styleElement)
-}

package/src/lib/modal.ts

@@ -29,8 +29,8 @@ const modals: Modal[] = []
  * Ignore clicks that used modifier keys or that were not left click.
  */
 export function openModal(
-  { type = 'title', event = null, injection = null, data = null, scrollPosition = 0, returnToTitle = null }:
-  { type?: ModalType, event?: MouseEvent | null, injection?: LinkInjection | null, data?: TitleData | ParticipantData | null, scrollPosition?: number, returnToTitle?: TitleData | null } = {}): void {
+  { type = 'title', event = null, injection = null, data = null, scrollPosition = 0, returnToTitle = null, props = {} }:
+  { type?: ModalType, event?: MouseEvent | null, injection?: LinkInjection | null, data?: TitleData | ParticipantData | null, scrollPosition?: number, returnToTitle?: TitleData | null, props?: Record<string, any> } = {}): void {
   if (event && isHoldingSpecialKey(event)) return
 
   event?.preventDefault()
@@ -38,7 +38,7 @@ export function openModal(
   if (modals?.length) closeCurrentModal()
 
   const target = getPlayPilotWrapperElement()
-  const sharedProps = { initialScrollPosition: scrollPosition }
+  const sharedProps = { initialScrollPosition: scrollPosition, ...props }
   const component = getModalComponentByType({ type, target, data, props: sharedProps })
 
   // When a return title is given it is added to the list of modals but is not actually opened.

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/config.d.ts

@@ -100,5 +100,4 @@ export type ConfigResponse = {
   explore_navigation_path?: string
   explore_navigation_insert_position?: InsertPosition
   explore_insert_cta_in_tpi?: boolean
-  explore_custom_style?: string
 }

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,23 @@
+<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}
+  {#if titles}
+    <TitlesRail heading="Some titles" {titles} expandable />
+
+    {#if titles[1]}
+      <TitlesRail heading="Some other titles" titles={fetchSimilarTitles(titles[1])} expandable />
+    {/if}
+
+    {#if titles[5]}
+      <TitlesRail heading="Some more titles" titles={fetchSimilarTitles(titles[5])} expandable />
+    {/if}
+  {/if}
+{/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%;