@playpilot/tpi 5.32.1 → 5.33.0-beta.explore.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "5.32.1",
+	"version": "5.33.0-beta.explore.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/api/titles.ts

@@ -1,9 +1,21 @@
 import { getApiToken } from '$lib/token'
+import type { APIPaginatedResult } from '$lib/types/api'
 import type { TitleData } from '../types/title'
 import { api } from './api'
 
+export async function fetchTitles(params: Record<string, string | number> = {}): Promise<APIPaginatedResult<TitleData>> {
+  const apiToken = getApiToken()
+
+  if (!apiToken) throw new Error('No token was provided')
+
+  const paramsAsString = Object.entries(params).map(([key, value]) => `${key}=${value}`).join('&')
+  const response = await api<APIPaginatedResult<TitleData>>(`/titles/browse?api-token=${apiToken}&` + paramsAsString)
+
+  return response
+}
+
 export async function fetchSimilarTitles(title: TitleData): Promise<TitleData[]> {
-  const response = await api<{ results: TitleData[] }>(`/titles/browse?api-token=${getApiToken()}&related_to_sid=${title.sid}`)
+  const response = await fetchTitles({ related_to_sid: title.sid })
 
   return response.results
 }

package/src/lib/data/translations.ts

@@ -126,6 +126,11 @@ export const translations = {
     [Language.Swedish]: 'Liknande filmer och serier',
     [Language.Danish]: 'Lignende film og serier',
   },
+  'Watch Trailer': {
+    [Language.English]: 'Watch trailer',
+    [Language.Swedish]: 'Se trailer',
+    [Language.Danish]: 'Se trailer',
+  },
 
   // Genres
   'All': {

package/src/lib/explore.ts

@@ -0,0 +1,26 @@
+import { mount, unmount } from 'svelte'
+import Explore from '../routes/components/Explore/Explore.svelte'
+
+const exploreParentSelector = `[data-playpilot-explore]`
+
+let exploreInsertedComponent: object | null = null
+
+/**
+ * Insert the Explore component inside of the needed selector. If no element is found, do nothing.
+ * Only one Explore component can exist per page.
+ */
+export function insertExplore(): void {
+  const target = document.querySelector<HTMLElement>(exploreParentSelector)
+  if (!target) return
+
+  destroyExplore()
+
+  exploreInsertedComponent = mount(Explore, { target })
+}
+
+export function destroyExplore(): void {
+  if (!exploreInsertedComponent) return
+
+  unmount(exploreInsertedComponent)
+  exploreInsertedComponent = null
+}

package/src/lib/fakeData.ts

@@ -38,6 +38,7 @@ export const title: TitleData = {
   standing_poster: 'https://img.playpilot.tech/6239ee86a58f11efb0b50a58a9feac02/src/img?optimizer=image&class=2by3x18',
   title: 'Dune: Prophecy',
   original_title: 'Dune: Prophecy',
+  embeddable_url: null,
 }
 
 export const linkInjections: LinkInjection[] = [{

package/src/lib/modal.ts

@@ -1,14 +1,15 @@
 import { mount, unmount } from "svelte"
 import { isHoldingSpecialKey } from "./event"
-import TitleModal from "../routes/components/TitleModal.svelte"
 import type { LinkInjection } from "./types/injection"
-import ParticipantModal from "../routes/components/ParticipantModal.svelte"
 import type { TitleData } from "./types/title"
 import type { ParticipantData } from "./types/participant"
 import { mobileBreakpoint } from "./constants"
 import { getPlayPilotWrapperElement } from "./injection"
+import TitleModal from "../routes/components/TitleModal.svelte"
+import ParticipantModal from "../routes/components/ParticipantModal.svelte"
+import ExploreModal from "../routes/components/Explore/ExploreModal.svelte"
 
-type ModalType = 'title' | 'participant'
+type ModalType = 'title' | 'participant' | 'explore'
 
 type Modal = {
   injection?: LinkInjection | null
@@ -46,9 +47,9 @@ export function openModal(
 }
 
 function getModalComponentByType({ type = 'title', target, data, props = {} }: { type: ModalType, target: Element, data: TitleData | ParticipantData | null, props?: Record<string, any> }) {
-  return type === 'title' ?
-    mount(TitleModal, { target, props: { title: data as TitleData, ...props } }) :
-    mount(ParticipantModal, { target, props: { participant: data as ParticipantData, ...props  } })
+  if (type === 'participant') return mount(ParticipantModal, { target, props: { participant: data as ParticipantData, ...props  } })
+  if (type === 'explore') return mount(ExploreModal, { target, props: { ...props  } })
+  return mount(TitleModal, { target, props: { title: data as TitleData, ...props } })
 }
 
 function addModalToList({ type = 'title', injection = null, data, scrollPosition = 0, component }: Modal) {

package/src/lib/trailer.ts

@@ -0,0 +1,22 @@
+import { mount, unmount } from "svelte"
+import { getPlayPilotWrapperElement } from "./injection"
+import type { TitleData } from "./types/title"
+import YouTubeEmbedOverlay from "../routes/components/YouTubeEmbedOverlay.svelte"
+
+let currentTrailerComponent: object | null = {}
+
+export function openTrailerOverlay(title: TitleData) {
+  const target = getPlayPilotWrapperElement()
+  // !! Temporarily falls back to a placeholder is while embeddable_url is not yet present
+  const props = { onclose: closeTrailerOverlay, embeddable_url: title.embeddable_url || 'https://www.youtube.com/watch?v=xGTq0blCPVQ' }
+
+  currentTrailerComponent = mount(YouTubeEmbedOverlay, { target, props })
+}
+
+export function closeTrailerOverlay(): void {
+  if (!currentTrailerComponent) return
+
+  unmount(currentTrailerComponent, { outro: true })
+
+  currentTrailerComponent = null
+}

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

@@ -0,0 +1,6 @@
+export type APIPaginatedResult<T> = {
+  next: string | null
+  previous: string | null
+  results: T[]
+  count?: number
+}

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

@@ -1,6 +1,8 @@
 import type { ParticipantData } from './participant'
 import type { PlaylinkData } from './playlink'
 
+export type ContentType = 'movie' | 'series'
+
 export type TitleData = {
   sid: string
   slug: string
@@ -9,7 +11,7 @@ export type TitleData = {
   genres: string[]
   year: number
   imdb_score: number
-  type: 'movie' | 'series'
+  type: ContentType
   providers: PlaylinkData[]
   description: string | null
   small_poster: string
@@ -17,6 +19,7 @@ export type TitleData = {
   standing_poster: string
   title: string
   original_title: string
+  embeddable_url: string | null
   length?: number
   blurb?: string
   participants?: ParticipantData[]

package/src/routes/+page.svelte

@@ -17,6 +17,7 @@
   import Consent from './components/Consent.svelte'
   import Debugger from './components/Debugger.svelte'
   import UserJourney from './components/UserJourney.svelte'
+  import { insertExplore } from '$lib/explore';
 
   let parentElement: HTMLElement | null = $state(null)
   let elements: HTMLElement[] = $state([])
@@ -42,6 +43,8 @@
     if (isEditorialMode && !loading) rerender()
   })
 
+  insertExplore()
+
   onDestroy(clearLinkInjections)
 
   // This function is called when a user has properly consented via tcfapi or if no consent is required.
@@ -242,7 +245,8 @@
 <style lang="scss">
   @import url('$lib/scss/global.scss');
 
-  .playpilot-link-injections {
+  .playpilot-link-injections,
+  :global([data-playpilot-explore]) {
     :global(*) {
       box-sizing: border-box;
     }

package/src/routes/components/Ads/TopScroll.svelte

@@ -4,7 +4,7 @@
   import { SplitTest } from '$lib/enums/SplitTest'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { imageFromUUID } from '$lib/image'
-  import { isInSplitTestVariant, trackSplitTestView } from '$lib/splitTest'
+  import { trackSplitTestView } from '$lib/splitTest'
   import { track } from '$lib/tracking'
   import type { Campaign } from '$lib/types/campaign'
   import Disclaimer from './Disclaimer.svelte'
@@ -22,7 +22,6 @@
   const { format, header, header_logo: logo, image_uuid: backgroundImageUUID } = $derived(content)
   const { header: buttonLabel, url: href } = $derived(cta)
 
-  const inline = isInSplitTestVariant(SplitTest.TopScrollFormat, 1)
   const simple = $derived(format === 'large')
 
   const backgroundImage = $derived(imageFromUUID(backgroundImageUUID, ImageDimensions.TopScrollBackground))
@@ -43,7 +42,6 @@
   target="_blank"
   class="top-scroll"
   class:simple
-  class:inline
   tabindex="-1"
   rel="sponsored"
   style:--width="{clientWidth}px">
@@ -81,17 +79,13 @@
     position: relative;
     display: block;
     width: 100%;
-    border-radius: $border-radius-size;
+    border-radius: $border-radius-size $border-radius-size 0 0;
     background: black;
     color: theme(top-scroll-text-color, white);
     font-family: theme(top-scroll-font-family, font-family);
     font-size: theme(top-scroll-font-size, font-size-base);
     text-decoration: none;
     line-height: 1.35;
-
-    &.inline {
-      border-radius: $border-radius-size $border-radius-size 0 0;
-    }
   }
 
   .content {
@@ -152,7 +146,7 @@
     right: 0;
     bottom: 0;
     left: 0;
-    border-radius: $border-radius-size;
+    border-radius: $border-radius-size $border-radius-size 0 0;
     background-image: var(--background);
     background-position: center;
     background-size: cover;
@@ -161,10 +155,6 @@
     .top-scroll:hover & {
       filter: brightness(1.15);
     }
-
-    .inline & {
-      border-radius: $border-radius-size $border-radius-size 0 0;
-    }
   }
 
   .content-image {
@@ -172,14 +162,10 @@
     max-width: 100%;
     height: auto;
     background: black;
-    border-radius: $border-radius-size;
+    border-radius: $border-radius-size $border-radius-size 0 0;
 
     .top-scroll:hover & {
       filter: brightness(1.15);
     }
-
-    .inline & {
-      border-radius: $border-radius-size $border-radius-size 0 0;
-    }
   }
 </style>

package/src/routes/components/Button.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    variant?: 'filled' | 'border'
+    size?: 'base' | 'large'
+    active?: boolean
+    // eslint-disable-next-line no-unused-vars
+    onclick?: (event: MouseEvent) => void
+    children?: Snippet
+  }
+
+  const { variant = 'filled', size = 'base', active = false, onclick, children }: Props = $props()
+</script>
+
+<button class="button {variant} {size}" class:active {onclick}>
+  {@render children?.()}
+</button>
+
+<style lang="scss">
+  .button {
+    appearance: none;
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    gap: margin(0.25);
+    border: 0;
+    padding: 0.25em 0.5em;
+    background: transparent;
+    border-radius: theme(button-border-radius, border-radius);
+    color: theme(button-text-color, text-color-alt);
+    font-size: inherit;
+    font-family: inherit;
+    font-weight: theme(button-font-weight, normal);
+    cursor: pointer;
+
+    :global(svg) {
+      width: 1.5em;
+      height: 1.5em;
+      opacity: 0.75;
+    }
+  }
+
+  .filled {
+    background: theme(button-filled-background, content);
+
+    &:hover,
+    &:active {
+      background: theme(button-filled-hover-background, content-light);
+      color: theme(button-filled-hover-text-color, text-color);
+    }
+
+    &.active {
+      box-shadow: inset 0 0 0 1px currentColor;
+    }
+  }
+
+  .border {
+    box-shadow: inset 0 0 0 1px theme(button-border-color, content-light);
+
+    &:hover,
+    &:active {
+      background: theme(button-border-color, content);
+      color: theme(button-hover-text-color, text-color);
+    }
+  }
+
+  .large {
+    padding: 0.5em 1.5em;
+  }
+</style>
+

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

@@ -0,0 +1,178 @@
+<script lang="ts">
+  import { heading } from '$lib/actions/heading'
+  import { searchTitles } from '$lib/api/search'
+  import { fetchTitles } from '$lib/api/titles'
+  import type { APIPaginatedResult } from '$lib/types/api'
+  import type { ContentType, TitleData } from '$lib/types/title'
+  import Button from '../Button.svelte'
+  import ListTitle from '../ListTitle.svelte'
+  import ListTitleSkeleton from '../ListTitleSkeleton.svelte'
+  import Filter from './Filter.svelte'
+  import Search from './Search.svelte'
+
+  type ExploreFilter = {
+    content_type?: ContentType
+  }
+
+  const filter: ExploreFilter = $state({})
+
+  let titles: TitleData[] = $state([])
+  let page = 1
+  let searchQuery = ''
+  let debounce: ReturnType<typeof setTimeout> | null = null
+  let promise = $state(getTitlesForFilter())
+
+  async function getTitlesForFilter(): Promise<APIPaginatedResult<TitleData>> {
+    let response
+
+    // If a search query is given we use searchTitles with just the query.
+    // If not, we use fetchTitles with the given params for the filter.
+    // This is because the backend does not support filters for search results yet.
+    // In the future we will likely merge these two, either by adding filters in the backend
+    // or by filtering results in the frontend (this seems like the less good option).
+    if (searchQuery) {
+      const results: TitleData[] = await searchTitles(searchQuery)
+      response = { results, next: null, previous: null }
+
+      titles = results
+    } else {
+      const params = { page_size: 24, page, ...filter }
+
+      response = await fetchTitles(params)
+      if (!response?.results) throw new Error('Something went wrong when fetching titles in Explore')
+
+      titles = [...titles, ...response.results]
+    }
+
+    return response
+  }
+
+  async function search(query: string): Promise<void> {
+    searchQuery = query
+
+    if (debounce) clearTimeout(debounce)
+
+    debounce = setTimeout(() => {
+      resetTitles()
+      promise = getTitlesForFilter()
+    }, 100)
+  }
+
+  function setFilter(key: keyof ExploreFilter, value: any): void {
+    // If the value was previous present in the filter and a falsey value is given we remove it from
+    // the filter entirely so it will no longer be used as a param
+    if (!value && (key in filter)) {
+      delete filter[key]
+    } else if (value) {
+      filter[key] = value
+    }
+
+    resetTitles()
+    promise = getTitlesForFilter()
+  }
+
+  function resetTitles(): void {
+    page = 1
+    titles = []
+  }
+
+  function fetchMoreTitles(): void {
+    page++
+    promise = getTitlesForFilter()
+  }
+</script>
+
+<div class="explore">
+  <div class="header" role="banner">
+    <div class="heading" use:heading>
+      <strong>Site Name</strong>
+      <div class="divider"></div>
+      Streaming Guide
+    </div>
+
+    <div class="categories" role="navigation">
+      <Button size="large" active={!filter.content_type} onclick={() => setFilter('content_type', '')}>All</Button>
+      <Button size="large" active={filter.content_type === 'movie'} onclick={() => setFilter('content_type', 'movie')}>Movies</Button>
+      <Button size="large" active={filter.content_type === 'series'} onclick={() => setFilter('content_type', 'series')}>Shows</Button>
+    </div>
+
+    <Search oninput={search} />
+    <Filter />
+  </div>
+
+  <div class="titles" role="main">
+    {#each titles as title}
+      <ListTitle {title} />
+    {/each}
+
+    {#await promise}
+      {#each { length: 12 } as _}
+        <ListTitleSkeleton />
+      {/each}
+    {:then { next }}
+      {#if next}
+        <div class="show-more">
+          <Button size="large" onclick={fetchMoreTitles}>Show more</Button>
+        </div>
+      {/if}
+    {:catch}
+      Something went wrong
+    {/await}
+  </div>
+</div>
+
+<style lang="scss">
+  .explore {
+    background: theme(explore-background, light);
+    border-radius: theme(border-radius-large);
+    padding: margin(1);
+    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);
+  }
+
+  .header {
+    display: flex;
+    flex-direction: column;
+    gap: margin(0.5);
+    margin-bottom: margin(2);
+  }
+
+  .heading {
+    display: flex;
+    justify-content: center;
+    gap: margin(0.5);
+    margin: margin(1) 0;
+    color: theme(text-color);
+  }
+
+  .divider {
+    width: 2px;
+    height: 0.5lh;
+    margin-top: 0.25lh;
+    background: currentColor;
+  }
+
+  .categories {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: margin(0.5);
+  }
+
+  .titles {
+    --playpilot-list-item-padding: 0;
+    --playpilot-list-item-background: transparent;
+    --playpilot-list-item-hover-shadow: 0 0 0 #{margin(0.25)} #{theme(lighter)};
+    --playpilot-detail-image-background: #{theme(content)};
+    display: flex;
+    flex-direction: column;
+    gap: margin(0.5);
+  }
+
+  .show-more {
+    flex: 0 0 100%;
+    display: grid;
+    margin-top: margin(0.5);
+  }
+</style>

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

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import IconArrow from '../Icons/IconArrow.svelte'
+  import ImageTitlesList from '$lib/images/titles-list.webp'
+  import { openModal } from '$lib/modal'
+</script>
+
+<button class="call-to-action" onclick={() => openModal({ type: 'explore' })}>
+  <img src={ImageTitlesList} alt="" width="70" height="57" />
+
+  <div>
+    <strong>Looking for something else?</strong>
+    <div>Use our streamingguide</div>
+  </div>
+
+  <div class="arrow">
+    <IconArrow />
+  </div>
+</button>
+
+<style lang="scss">
+  strong {
+    color: theme(text-color);
+    font-size: theme(font-size-base);
+    font-weight: normal;
+  }
+
+  .call-to-action {
+    appearance: none;
+    display: flex;
+    align-items: center;
+    gap: margin(1);
+    width: 100%;
+    padding: margin(1);
+    border: 0;
+    border-radius: theme(border-radius-large) theme(border-radius-large) 0 0;
+    background: theme(light);
+    font-family: theme(font-family);
+    color: theme(text-color-alt);
+    font-size: theme(font-size-small);
+    line-height: 1.5;
+    text-align: left;
+    cursor: pointer;
+
+    &:hover {
+      filter: brightness(theme(hover-filter-brightness));
+    }
+  }
+
+  .arrow {
+    margin-left: auto;
+
+    :global(svg) {
+      display: block;
+      height: margin(1.25);
+      width: auto;
+    }
+  }
+</style>

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

@@ -0,0 +1,15 @@
+
+<script lang="ts">
+  import Modal from '../Modal.svelte'
+  import Explore from './Explore.svelte'
+
+  interface Props {
+    initialScrollPosition?: number
+  }
+
+  const { initialScrollPosition = 0 }: Props = $props()
+</script>
+
+<Modal {initialScrollPosition} closeButtonStyle="flat">
+  <Explore />
+</Modal>

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

@@ -0,0 +1,3 @@
+<div class="filter" role="navigation">
+  Filter
+</div>

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

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import IconSearch from '../Icons/IconSearch.svelte'
+
+  interface Props {
+    // eslint-disable-next-line no-unused-vars
+    oninput: (query: string) => void
+  }
+
+  const { oninput }: Props = $props()
+
+  let query = $state('')
+</script>
+
+<div class="search" role="search">
+  <div class="icon">
+    <IconSearch />
+  </div>
+
+  <input bind:value={query} oninput={() => oninput(query)} class="input" type="search" placeholder="Search movies and shows" />
+</div>
+
+<style lang="scss">
+  .search {
+    position: relative;
+  }
+
+  .icon {
+    position: absolute;
+    top: margin(0.6);
+    left: margin(1);
+    color: theme(text-color-alt);
+    opacity: 0.75;
+  }
+
+  .input {
+    width: 100%;
+    padding: margin(0.75) margin(1) margin(0.75) margin(3);
+    border: 0;
+    border-radius: theme(border-radius);
+    background: theme(content);
+    color: theme(text-color-alt);
+    font-size: theme(font-size-base);
+    font-family: theme(font-family);
+
+    &:focus {
+      outline: 1px solid white;
+    }
+
+    &::placeholder {
+      color: theme(text-color-alt);
+      opacity: 0.75;
+    }
+  }
+</style>

package/src/routes/components/Icons/IconClose.svelte

@@ -1,3 +1,11 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+<script lang="ts">
+  interface Props {
+    size?: number
+  }
+
+  const { size = 16 }: Props = $props()
+</script>
+
+<svg width={size} height={size} viewBox="0 0 16 16" fill="none">
   <path d="M14 2L2 14M2 2L14 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/routes/components/Icons/IconPlay.svelte

@@ -0,0 +1,3 @@
+<svg width="24px" height="24px" viewBox="0 -960 960 960">
+  <path fill="currentColor" d="m380-300 280-180-280-180v360ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
+</svg>