@playpilot/tpi 5.15.0 → 5.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "5.15.0",
+	"version": "5.16.0",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
@@ -32,6 +32,7 @@
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
 		"svelte-preprocess": "^6.0.3",
+		"svelte-tiny-slider": "^2.3.0",
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.32.1",
 		"vite": "^5.0.3",

package/src/lib/enums/SplitTest.ts

@@ -4,4 +4,8 @@ export const SplitTest = {
     numberOfVariants: 2,
     variantNames: ['Separated', 'Inline'] as string[]
   },
+  ParticipantPlaylinkFormat: {
+    key: 'participant_playlink_format',
+    numberOfVariants: 2,
+  }
 } as const

package/src/lib/fakeData.ts

@@ -1,5 +1,6 @@
 import type { Campaign } from "./types/campaign"
 import type { LinkInjection } from "./types/injection"
+import type { ParticipantData } from "./types/participant"
 import type { TitleData } from "./types/title"
 
 export const title: TitleData = {
@@ -71,6 +72,75 @@ export const linkInjections: LinkInjection[] = [{
   key: 'some-key-4',
 }]
 
+export const participants: ParticipantData[] = [
+  {
+    sid: 'pr5C5W',
+    name: 'James Franco',
+    birth_date: '1978-04-19',
+    death_date: null,
+    jobs: ['actor'],
+    image: null,
+    image_uuid: null,
+    gender: 'Male',
+    character: 'Will Rodman (archive footage) (uncredited)',
+  },
+  {
+    sid: 'pr8bZm',
+    name: 'Thomas Rosales Jr.',
+    birth_date: '1948-02-03',
+    death_date: null,
+    jobs: ['actor'],
+    image: null,
+    image_uuid: null,
+    gender: 'Male',
+    character: 'Old Man',
+  },
+  {
+    sid: 'pr45Dp',
+    name: 'Barack Obama',
+    birth_date: '1961-08-04',
+    death_date: null,
+    jobs: ['actor'],
+    image: null,
+    image_uuid: null,
+    gender: 'Male',
+    character: 'Self (archive footage) (uncredited)',
+  },
+  {
+    sid: 'pr6DnN',
+    name: 'Gary Oldman',
+    birth_date: '1958-03-21',
+    death_date: null,
+    jobs: ['actor'],
+    image: null,
+    image_uuid: null,
+    gender: 'Male',
+    character: 'Dreyfus',
+  },
+  {
+    sid: 'pr7GK8',
+    name: 'Michael Papajohn',
+    birth_date: '1964-11-07',
+    death_date: null,
+    jobs: ['actor'],
+    image: null,
+    image_uuid: null,
+    gender: 'Male',
+    character: 'Cannon-Gunner',
+  },
+  {
+    sid: 'pr88KG',
+    name: 'Judy Greer',
+    birth_date: '1975-07-20',
+    death_date: null,
+    jobs: ['actor'],
+    image: null,
+    image_uuid: null,
+    gender: 'Female',
+    character: 'Cornelia',
+  },
+]
+
 export const campaign: Campaign = {
   campaign_format: 'card',
   campaign_type: 'image',

package/src/lib/linkInjection.ts

@@ -1,5 +1,4 @@
 import { mount, unmount } from 'svelte'
-import TitleModal from '../routes/components/TitleModal.svelte'
 import TitlePopover from '../routes/components/TitlePopover.svelte'
 import AfterArticlePlaylinks from '../routes/components/AfterArticlePlaylinks.svelte'
 import { cleanPhrase, findNumberOfMatchesInString, findShortestMatchBetweenPhrases, findTextNodeContaining, getIndexOfPhraseInElement, getNumberOfLeadingAndTrailingSpaces, isNodeInLink, replaceBetween, replaceStartingFrom } from './text'
@@ -9,6 +8,7 @@ import { playFallbackViewTransition } from './viewTransition'
 import { prefersReducedMotion } from 'svelte/motion'
 import { getNumberOfOccurrencesInArray } from './array'
 import { mobileBreakpoint } from './constants'
+import { destroyAllModals, openModal } from './modal'
 import { isEditorialModeEnabled } from './auth'
 import { track } from './tracking'
 import { TrackingEvent } from './enums/TrackingEvent'
@@ -21,7 +21,6 @@ const linksIntersectionObserver = typeof window !== 'undefined' ? new Intersecti
 let currentlyHoveredInjection: EventTarget | null = null
 let activePopoverInsertedComponent: object | null = null
 let afterArticlePlaylinkInsertedComponent: object | null = null
-let activeModalInsertedComponent: object | null = null
 
 /**
  * Return a list of all valid text containing elements that may get injected into.
@@ -353,7 +352,7 @@ function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
 
     playFallbackViewTransition(() => {
       destroyLinkPopover(false)
-      openLinkModal(event, injection)
+      openModal({ event, injection, data: injection.title_details })
     }, !prefersReducedMotion.current && window.innerWidth >= mobileBreakpoint && !window.matchMedia("(pointer: coarse)").matches)
   })
 
@@ -403,29 +402,6 @@ export function trackLinkIntersection(entries: IntersectionObserverEntry[]): voi
   })
 }
 
-/**
- * Open modal for the corresponding injection by mounting the component and saving it to a variable.
- * Ignore clicks that used modifier keys or that were not left click.
- */
-function openLinkModal(event: MouseEvent, injection: LinkInjection): void {
-  if (isHoldingSpecialKey(event)) return
-  if (activeModalInsertedComponent) return
-
-  event.preventDefault()
-
-  activeModalInsertedComponent = mount(TitleModal, { target: getPlayPilotWrapperElement(), props: { title: injection.title_details!, onclose: destroyLinkModal } })
-}
-
-/**
- * Unmount the modal, removing it from the dom
- */
-function destroyLinkModal(outro: boolean = true): void {
-  if (!activeModalInsertedComponent) return
-
-  unmount(activeModalInsertedComponent, { outro })
-  activeModalInsertedComponent = null
-}
-
 /**
  * When a link is hovered, it is shown as a popover. The component is mounted when a mouse enters the link,
  * and removed when clicked or on mouseleave.
@@ -483,7 +459,13 @@ export function insertAfterArticlePlaylinks(elements: HTMLElement[], injections:
   target.dataset.playpilotAfterArticlePlaylinks = 'true'
   insertElement.insertAdjacentElement(insertPosition, target)
 
-  afterArticlePlaylinkInsertedComponent = mount(AfterArticlePlaylinks, { target, props: { linkInjections: injections, onclickmodal: (event, injection) => openLinkModal(event, injection) } })
+  afterArticlePlaylinkInsertedComponent = mount(AfterArticlePlaylinks, {
+    target,
+    props: {
+      linkInjections: injections,
+      onclickmodal: (event, injection) => openModal({ event, injection, data: injection.title_details })
+    }
+  })
 }
 
 function clearAfterArticlePlaylinks(): void {
@@ -502,7 +484,7 @@ export function clearLinkInjections(): void {
   elements.forEach((element) => clearLinkInjection(element.getAttribute(keyDataAttribute) || ''))
 
   clearAfterArticlePlaylinks()
-  destroyLinkModal(false)
+  destroyAllModals(false)
   destroyLinkPopover(false)
 
   linksIntersectionObserver?.disconnect()
@@ -611,6 +593,6 @@ export function isEquivalentInjection(injection1: LinkInjection, injection2: Lin
   return injection1.title === injection2.title && cleanPhrase(injection1.sentence) === cleanPhrase(injection2.sentence)
 }
 
-function getPlayPilotWrapperElement(): Element {
+export function getPlayPilotWrapperElement(): Element {
   return document.querySelector('[data-playpilot-link-injections]') || document.body
 }

package/src/lib/modal.ts

@@ -0,0 +1,97 @@
+import { mount, unmount } from "svelte"
+import { isHoldingSpecialKey } from "./event"
+import TitleModal from "../routes/components/TitleModal.svelte"
+import type { LinkInjection } from "./types/injection"
+import { getPlayPilotWrapperElement } from "./linkInjection"
+import ParticipantModal from "../routes/components/ParticipantModal.svelte"
+import type { TitleData } from "./types/title"
+import type { ParticipantData } from "./types/participant"
+import { mobileBreakpoint } from "./constants"
+
+type ModalType = 'title' | 'participant'
+
+type Modal = {
+  injection?: LinkInjection | null
+  component: object
+  type: ModalType
+  data: TitleData | ParticipantData | null
+  scrollPosition?: number
+}
+
+const modals: Modal[] = []
+
+/**
+ * Open modal for the corresponding injection by mounting the component and saving it to a variable.
+ * 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 }:
+  { type?: ModalType, event?: MouseEvent | null, injection?: LinkInjection | null, data?: TitleData | ParticipantData | null, scrollPosition?: number } = {}): void {
+  if (event && isHoldingSpecialKey(event)) return
+
+  event?.preventDefault()
+
+  if (modals?.length) closeCurrentModal()
+
+  const target = getPlayPilotWrapperElement()
+  const sharedProps = { initialScrollPosition: scrollPosition }
+  const component = type === 'title' ?
+    mount(TitleModal, { target, props: { title: data as TitleData, ...sharedProps } }) :
+    mount(ParticipantModal, { target, props: { participant: data as ParticipantData, ...sharedProps  } })
+
+  modals.push({ type, injection, data, scrollPosition, component })
+}
+
+/** Unmount the last modal is the list of modals but keep it in the list of active modals */
+export function closeCurrentModal(outro: boolean = true): void {
+  if (!modals.length) return
+
+  saveCurrentModalScrollPosition()
+
+  unmount(modals[modals.length - 1].component, { outro })
+}
+
+/** Unmount the last modal is the list of modals and remove it from the list */
+export function destroyCurrentModal(outro: boolean = true): void {
+  closeCurrentModal(outro)
+
+  modals.pop()
+}
+
+export function destroyAllModals(outro: boolean = true): void {
+  closeCurrentModal(outro)
+
+  while (modals.length > 0) modals.pop()
+}
+
+/** @returns The modal before the currently active modal, if any */
+export function getPreviousModal(): Modal | null {
+  return modals[modals.length - 2] || null
+}
+
+export function goBackToPreviousModal(): void {
+  if (modals.length < 2) return
+
+  destroyCurrentModal()
+
+  // Get the previous modal from the array by removing it, we're re-adding it when calling openModal
+  const previousModal = modals.pop()
+  if (!previousModal) return
+
+  openModal({ ...previousModal })
+}
+
+export function getAllModals(): Modal[] {
+  return modals
+}
+
+function saveCurrentModalScrollPosition(): void {
+  // The scrollable element differs on mobile and desktop.
+  // On desktop you scroll the entire parent but on mobile you scroll the dialog itself.
+  const selector = `[data-playpilot-link-injections] ${window.innerWidth > mobileBreakpoint ? '.modal' : '.dialog'}`
+  const element = document.querySelector(selector)
+
+  if (!element?.scrollTop) return
+
+  modals[modals.length - 1].scrollPosition = element.scrollTop
+}

package/src/lib/playlink.ts

@@ -2,11 +2,14 @@ import type { PlaylinkData } from "./types/playlink"
 
 /**
  * Merge playlinks of the same provider of BUY and RENT categories into a shared TVOD category.
+ * Also remove playlinks without logos, as these are likely sub providers.
  */
 export function mergePlaylinks(playlinks: PlaylinkData[]): PlaylinkData[] {
+  const filtered = playlinks.filter(playlink => !!playlink.logo_url)
+
   let merged: PlaylinkData[] = []
 
-  for (const playlink of playlinks) {
+  for (const playlink of filtered) {
     let newPlaylink = playlink
     const existingPlaylink = merged.find(p => p.name === newPlaylink.name)
 

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

@@ -0,0 +1,14 @@
+export type ParticipantData = {
+  sid: string
+  name: string
+  birth_date: string
+  death_date: string | null
+  jobs: Job[]
+  image: string | null
+  image_uuid: string | null
+  gender: string
+  character?: string | null
+  bio?: string | null
+}
+
+export type Job = 'actor' | 'writer' | 'director'

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

@@ -1,3 +1,4 @@
+import type { ParticipantData } from "./participant"
 import type { PlaylinkData } from "./playlink"
 
 export type TitleData = {
@@ -18,4 +19,5 @@ export type TitleData = {
   original_title: string
   length?: number
   blurb?: string
+  participants?: ParticipantData[]
 }

package/src/routes/+page.svelte

@@ -15,6 +15,7 @@
   import Consent from './components/Consent.svelte'
   import Debugger from './components/Debugger.svelte'
   import { fetchAds } from '$lib/ads'
+  import ParticipantModal from './components/ParticipantModal.svelte';
 
   let parentElement: HTMLElement | null = $state(null)
   let elements: HTMLElement[] = $state([])

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+  interface Props {
+    direction?: 'left' | 'right'
+  }
+
+  const { direction = 'right' }: Props = $props()
+</script>
+
+<svg class="{direction}" height="16px" viewBox="0 -960 960 960" width="16px">
+  <path d="m288-96-68-68 316-316-316-316 68-68 384 384L288-96Z" fill="currentColor" />
+</svg>
+
+<style lang="scss">
+  .right {
+    margin-left: margin(0.125);
+  }
+
+  .left {
+    margin-right: margin(0.125);
+    transform: rotate(180deg);
+  }
+</style>

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

@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-  <path d="M14 2L2 14M2 2L14 14" stroke="currentColor" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M14 2L2 14M2 2L14 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

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

@@ -1,3 +1,11 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<script lang="ts">
+  interface Props {
+    size?: number
+  }
+
+  const { size = 14 }: Props = $props()
+</script>
+
+<svg width={size} height={size} viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M7 0.351929L9.163 4.72803L14 5.43408L10.5 8.8385L11.326 13.648L7 11.3761L2.674 13.648L3.5 8.8385L0 5.43408L4.837 4.72803L7 0.351929Z" fill="#F6C045"/>
 </svg>

package/src/routes/components/ListTitle.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">
+  import { playPilotBaseUrl } from '$lib/constants'
+  import { SplitTest } from '$lib/enums/SplitTest'
+  import { t } from '$lib/localization'
+  import { mergePlaylinks } from '$lib/playlink'
+  import { isInSplitTestVariant, trackSplitTestAction } from '$lib/splitTest'
+  import type { TitleData } from '$lib/types/title'
+  import IconArrow from './Icons/IconArrow.svelte'
+  import IconIMDb from './Icons/IconIMDb.svelte'
+  import PlaylinkIcon from './PlaylinkIcon.svelte'
+  import PlaylinkLabel from './PlaylinkLabel.svelte'
+  import TitlePoster from './TitlePoster.svelte'
+
+  interface Props {
+    title: TitleData
+    // eslint-disable-next-line no-unused-vars
+    onclick?: (event: MouseEvent) => void
+  }
+
+  const { title, onclick = () => null }: Props = $props()
+
+  const playlinks = $derived(mergePlaylinks(title.providers))
+  const limitedPlaylinks = $derived(playlinks.slice(0, 3))
+  const playlinksAsLabels = isInSplitTestVariant(SplitTest.ParticipantPlaylinkFormat, 1)
+
+  function onPlaylinkClick(event: MouseEvent) {
+    event.stopPropagation()
+    trackSplitTestAction(SplitTest.ParticipantPlaylinkFormat, 'click')
+  }
+</script>
+
+<a class="title" href="{playPilotBaseUrl}/{title.type}/{title.slug}" {onclick}>
+  <div class="poster">
+    <TitlePoster {title} width={30} height={43} />
+  </div>
+
+  <div class="content">
+    <div class="heading">{title.title}</div>
+
+    <div class="meta">
+      <div class="imdb">
+        <IconIMDb size={11} />
+        {title.imdb_score}
+      </div>
+
+      <div>{title.year}</div>
+      <div>{title.type}</div>
+
+      {#if title.length}
+        <div>{title.length} min</div>
+      {/if}
+    </div>
+
+    <div class="description">
+      {title.description}
+    </div>
+
+    <div class="playlinks">
+      {#each limitedPlaylinks as playlink}
+        {#if playlinksAsLabels}
+          <PlaylinkLabel {playlink} onclick={onPlaylinkClick} />
+        {:else}
+          <PlaylinkIcon {playlink} onclick={onPlaylinkClick} />
+        {/if}
+      {/each}
+
+      {#if playlinks.length > limitedPlaylinks.length}
+        <span class="more">
+          +{playlinks.length - limitedPlaylinks.length}
+        </span>
+      {/if}
+
+      {#if !playlinks.length}
+        <div class="empty" data-testid="playlinks-empty">
+          {t('Title Unavailable')}
+        </div>
+      {/if}
+    </div>
+  </div>
+
+  <div class="action">
+    <IconArrow />
+  </div>
+</a>
+
+<style lang="scss">
+  .title {
+    appearance: none;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    background: var(--playpilot-list-item-background, var(--playpilot-lighter));
+    padding: margin(0.5);
+    border: 0;
+    border-radius: var(--playpilot-list-item-border-radius, margin(0.5));
+    text-decoration: none;
+    font-style: normal !important;
+
+    &:hover {
+      background: var(--playpilot-list-item-hover-background, var(--playpilot-content));
+    }
+
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+
+  .poster {
+    flex: 0 0 auto;
+    height: auto;
+    align-self: start;
+    width: margin(4.125);
+    aspect-ratio: 2/3;
+    border-radius: var(--playpilot-detail-image-border-radius, margin(0.5));
+    background: var(--playpilot-detail-image-background, var(--playpilot-content));
+    overflow: hidden;
+  }
+
+  .content {
+    padding-left: margin(1);
+    font-family: inherit;
+    text-align: left;
+    color: var(--playpilot-list-item-text-color, var(--playpilot-text-color));
+    font-size: var(--playpilot-detail-font-size, 14px);
+    line-height: normal;
+
+    @media (min-width: 600px) {
+      padding-right: margin(1);
+    }
+  }
+
+  .heading {
+    color: var(--playpilot-list-item-title-text-color, var(--playpilot-detail-title-text-color, var(--playpilot-text-color)));
+    font-weight: var(--playpilot-list-item-title-font-weight, var(--playpilot-detail-title-font-weight, 500));
+  }
+
+  .meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0 margin(0.5);
+    margin: margin(0.125) 0;
+    font-size: var(--playpilot-detail-font-size-small, 12px);
+    font-weight: var(--playpilot-list-item-meta-font-weight, var(--playpilot-detail-title-font-weight, 500));
+    color: var(--playpilot-list-item-meta-text-color, var(--playpilot-text-color-alt));
+
+    > div {
+      text-transform: capitalize;
+    }
+  }
+
+  .imdb {
+    display: flex;
+    align-items: center;
+    gap: margin(0.25);
+  }
+
+  .description {
+    margin-bottom: margin(0.375);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    line-clamp: 1;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    font-size: var(--playpilot-detail-font-size-small, 12px);
+    color: var(--playpilot-list-item-description-text-color, var(--playpilot-text-color));
+  }
+
+  .playlinks {
+    display: flex;
+    flex-wrap: wrap;
+    gap: margin(0.25);
+    margin-top: auto;
+  }
+
+  .more {
+    display: flex;
+    align-items: center;
+    padding: 0 margin(0.25);
+    color: var(--playpilot-list-item-more-text-color, var(--playpilot-text-color-alt));
+    font-size: var(--playpilot-detail-font-size-small, 12px);
+  }
+
+  .empty {
+    margin-top: margin(0.5);
+    opacity: 0.65;
+    font-style: italic;
+    font-size: 0.85em;
+    white-space: initial;
+  }
+
+  .action {
+    display: flex;
+    margin: 0 margin(0.5) 0 auto;
+    padding-left: margin(0.5);
+    align-self: center;
+    color: var(--playpilot-list-item-action-color, var(--playpilot-detail-text-color, var(--playpilot-text-color-alt)));
+
+    &:hover,
+    &:active {
+      color: var(--playpilot-list-item-action-hover-color, var(--playpilot-detail-text-color, var(--playpilot-text-color)));
+    }
+  }
+</style>