@playpilot/tpi 5.12.0-beta.similar.1 → 5.12.1

package/events.md

@@ -23,6 +23,7 @@ Event | Action | Info | Payload
 --- | --- | --- | ---
 `ali_article_page_view` | _Fires any time an article is visited_ | This event will fire right after all data is fetched and will fire regardless of if there are injections or not | It will fire even on pages where injections are disabled. | -
 `ali_links_injected` | _Fires as long as any injections are injected into the article_ | Includes an object with the number of injections for this article with `manual` and `ai` as two separate numbers. | `manual` (number of manual injection), `ai` (number of ai injections)
+`ali_injection_visible` | _Fires as soon as a link is visible on the screen_ | Fires once for each link in an article. | |
 
 ### Modal
 Event | Action | Info | Payload

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "5.12.0-beta.similar.1",
+	"version": "5.12.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
@@ -32,7 +32,6 @@
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
 		"svelte-preprocess": "^6.0.3",
-		"svelte-tiny-slider": "^2.2.0",
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.32.1",
 		"vite": "^5.0.3",

package/src/lib/enums/SplitTest.ts

@@ -2,7 +2,6 @@ export const SplitTest = {
   TopScrollFormat: {
     key: 'top_scroll_format',
     numberOfVariants: 2,
-    // Variant 0 is separate bubble
-    // Variant 1 is inline bubble
+    variantNames: ['Separated', 'Inline'] as string[]
   },
 } as const

package/src/lib/enums/TrackingEvent.ts

@@ -2,6 +2,7 @@
 export const TrackingEvent = Object.freeze({
   ArticlePageView: 'ali_article_page_view',
   ArticleInjected: 'ali_links_injected',
+  InjectionVisible: 'ali_injection_visible',
 
   TitleModalView: 'ali_title_modal_view',
   TitleModalClose: 'ali_title_modal_close',
@@ -33,5 +34,5 @@ export const TrackingEvent = Object.freeze({
   DisplayedAdPlaylickClick: 'ali_display_ad_playlink_click',
 
   SplitTestView: 'ali_split_test_view',
-  SplitTestAction: 'ali_split_test_action'
+  SplitTestAction: 'ali_split_test_action',
 })

package/src/lib/fakeData.ts

@@ -1,5 +1,4 @@
 import type { LinkInjection } from "./types/injection"
-import type { ParticipantData } from "./types/participant"
 import type { TitleData } from "./types/title"
 
 export const title: TitleData = {
@@ -70,72 +69,3 @@ export const linkInjections: LinkInjection[] = [{
   playpilot_url: 'https://playpilot.com/movie/example-4/',
   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',
-  },
-]

package/src/lib/linkInjection.ts

@@ -1,4 +1,5 @@
 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'
@@ -8,14 +9,19 @@ 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'
 
 const keyDataAttribute = 'data-playpilot-injection-key'
 const keySelector = `[${keyDataAttribute}]`
 
+const linksIntersectionObserver = typeof window !== 'undefined' ? new IntersectionObserver(trackLinkIntersection) : null
+
 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.
@@ -347,7 +353,7 @@ function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
 
     playFallbackViewTransition(() => {
       destroyLinkPopover(false)
-      openModal({ event, injection, data: injection.title_details })
+      openLinkModal(event, injection)
     }, !prefersReducedMotion.current && window.innerWidth >= mobileBreakpoint && !window.matchMedia("(pointer: coarse)").matches)
   })
 
@@ -365,7 +371,7 @@ function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
 
   const createdInjectionElements = Array.from(document.querySelectorAll(keySelector)) as HTMLElement[]
 
-  // Open and close popover on mouseenter/mouseleave
+  // Open and close popover on mouseenter/mouseleave and add link to intersection observer
   createdInjectionElements.forEach((injectionElement) => {
     const key = injectionElement.dataset.playpilotInjectionKey
     const injection = injections.find(injection => key === injection.key)
@@ -376,9 +382,50 @@ function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
       if (!activePopoverInsertedComponent) openLinkPopover(event, injection)
     })
     injectionElement.addEventListener('mouseleave', () => currentlyHoveredInjection = null)
+
+    // Add link to observer, this is used to track when a link enters the viewport
+    linksIntersectionObserver!.observe(injectionElement)
+  })
+}
+
+/**
+ * Track each link as it enters the viewport. The link is removed from the list as soon as it has been tracked once.
+ * Does not fire at all in editorial mode.
+ */
+export function trackLinkIntersection(entries: IntersectionObserverEntry[]): void {
+  if (isEditorialModeEnabled()) return
+
+  entries.forEach(entry => {
+    if (!entry.isIntersecting) return
+
+    track(TrackingEvent.InjectionVisible)
+    linksIntersectionObserver!.unobserve(entry.target)
   })
 }
 
+/**
+ * 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.
@@ -436,13 +483,7 @@ export function insertAfterArticlePlaylinks(elements: HTMLElement[], injections:
   target.dataset.playpilotAfterArticlePlaylinks = 'true'
   insertElement.insertAdjacentElement(insertPosition, target)
 
-  afterArticlePlaylinkInsertedComponent = mount(AfterArticlePlaylinks, {
-    target,
-    props: {
-      linkInjections: injections,
-      onclickmodal: (event, injection) => openModal({ event, injection, data: injection.title_details })
-    }
-  })
+  afterArticlePlaylinkInsertedComponent = mount(AfterArticlePlaylinks, { target, props: { linkInjections: injections, onclickmodal: (event, injection) => openLinkModal(event, injection) } })
 }
 
 function clearAfterArticlePlaylinks(): void {
@@ -461,8 +502,10 @@ export function clearLinkInjections(): void {
   elements.forEach((element) => clearLinkInjection(element.getAttribute(keyDataAttribute) || ''))
 
   clearAfterArticlePlaylinks()
-  destroyAllModals(false)
+  destroyLinkModal(false)
   destroyLinkPopover(false)
+
+  linksIntersectionObserver?.disconnect()
 }
 
 /**
@@ -568,6 +611,6 @@ export function isEquivalentInjection(injection1: LinkInjection, injection2: Lin
   return injection1.title === injection2.title && cleanPhrase(injection1.sentence) === cleanPhrase(injection2.sentence)
 }
 
-export function getPlayPilotWrapperElement(): Element {
+function getPlayPilotWrapperElement(): Element {
   return document.querySelector('[data-playpilot-link-injections]') || document.body
 }

package/src/lib/playlink.ts

@@ -2,14 +2,11 @@ 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 filtered) {
+  for (const playlink of playlinks) {
     let newPlaylink = playlink
     const existingPlaylink = merged.find(p => p.name === newPlaylink.name)
 

package/src/lib/splitTest.ts

@@ -4,6 +4,7 @@ import { track } from "./tracking"
 type SplitTest = {
   key: string
   numberOfVariants: number
+  variantNames?: string[]
 }
 
 /**
@@ -28,18 +29,24 @@ export function getSplitTestVariantIndex(test: SplitTest): number {
   return Math.floor(identifier * test.numberOfVariants)
 }
 
+export function getSplitTestVariantName(test: SplitTest): string {
+  const variantIndex = getSplitTestVariantIndex(test)
+
+  return test.variantNames?.[variantIndex] || variantIndex.toString()
+}
+
 export function isInSplitTestVariant(test: SplitTest, variant = 1): boolean {
   return getSplitTestVariantIndex(test) === variant
 }
 
 export function trackSplitTestView(test: SplitTest): void {
-  const variant = getSplitTestVariantIndex(test)
+  const variant = getSplitTestVariantName(test)
 
   track(TrackingEvent.SplitTestView, null, { key: test.key, variant })
 }
 
 export function trackSplitTestAction(test: SplitTest, action: string): void {
-  const variant = getSplitTestVariantIndex(test) ? 1 : 0
+  const variant = getSplitTestVariantName(test)
 
   track(TrackingEvent.SplitTestAction, null, { key: test.key, variant, action })
 }

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

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

package/src/routes/+page.svelte

@@ -14,7 +14,6 @@
   import TrackingPixels from './components/TrackingPixels.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/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="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M14 2L2 14M2 2L14 14" stroke="currentColor" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

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

@@ -0,0 +1,3 @@
+<svg viewBox="0 -960 960 960" width="24px" height="24px" fill="currentColor">
+  <path d="m480-320 160-160-56-56-64 64v-168h-80v168l-64-64-56 56 160 160Zm0 240q-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>

package/src/routes/components/Modal.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { fade, fly, scale, type TransitionConfig } from 'svelte/transition'
   import IconClose from './Icons/IconClose.svelte'
-  import IconArrow from './Icons/IconArrow.svelte'
   import RoundButton from './RoundButton.svelte'
   import DragHandle from './DragHandle.svelte'
   import { onMount, setContext, type Snippet } from 'svelte'
@@ -9,32 +8,23 @@
   import { isInSplitTestVariant } from '$lib/splitTest'
   import { SplitTest } from '$lib/enums/SplitTest'
   import { mobileBreakpoint } from '$lib/constants'
-  import { destroyAllModals, getPreviousModal, goBackToPreviousModal } from '$lib/modal'
 
   interface Props {
     children: Snippet
     bubble?: Snippet | null
     prepend?: Snippet | null
     tall?: boolean
-    closeButtonStyle?: 'shadow' | 'flat'
+    onclose?: () => void
     onscroll?: () => void
   }
 
-  const {
-    children,
-    bubble,
-    prepend,
-    tall = false,
-    closeButtonStyle = 'shadow',
-    onscroll = () => null,
-  }: Props = $props()
+  const { children, bubble, prepend, tall = false, onclose = () => null, onscroll = () => null }: Props = $props()
 
   const inlineBubble = isInSplitTestVariant(SplitTest.TopScrollFormat, 1)
 
   let windowWidth = $state(0)
   let dialogElement: HTMLElement | null = $state(null)
   let dialogOffset: number = $state(0)
-  let hasPreviousModal = $state(false)
 
   const isMobile = $derived(windowWidth < mobileBreakpoint)
 
@@ -47,8 +37,6 @@
     const baseOverflowStyle = document.body.style.overflowY
     document.body.style.overflowY = 'hidden'
 
-    hasPreviousModal = !!getPreviousModal()
-
     return () => document.body.style.overflowY = baseOverflowStyle || ''
   })
 
@@ -60,7 +48,7 @@
   }
 </script>
 
-<svelte:window onkeydown={({ key }) => { if (key === 'Escape') destroyAllModals() }} bind:innerWidth={windowWidth} />
+<svelte:window onkeydown={({ key }) => { if (key === 'Escape') onclose() }} bind:innerWidth={windowWidth} />
 
 <div class="modal" style:--dialog-offset="{dialogOffset}px" transition:fade|global={{ duration: 150 }} class:has-bubble={!!bubble && inlineBubble} class:has-prepend={!!prepend}>
   {#if prepend}
@@ -77,21 +65,13 @@
 
   {#if isMobile}
     <div class="drag-handle" transition:scaleOrFly|global>
-      <DragHandle target={dialogElement!} onpassed={() => destroyAllModals()} />
+      <DragHandle target={dialogElement!} onpassed={() => onclose()} />
     </div>
   {/if}
 
   <div class="dialog" class:tall {onscroll} bind:this={dialogElement} role="dialog" aria-labelledby="title" transition:scaleOrFly|global={{ y: window.innerHeight }} data-view-transition-new>
-    {#if hasPreviousModal}
-      <div class="close back {closeButtonStyle}">
-        <RoundButton onclick={() => goBackToPreviousModal()} aria-label="Back">
-          <IconArrow direction="left" />
-        </RoundButton>
-      </div>
-    {/if}
-
-    <div class="close {closeButtonStyle}">
-      <RoundButton onclick={() => destroyAllModals()} aria-label="Close">
+    <div class="close">
+      <RoundButton onclick={() => onclose()}>
         <IconClose />
       </RoundButton>
     </div>
@@ -101,7 +81,7 @@
 
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div class="backdrop" onclick={() => destroyAllModals()}></div>
+  <div class="backdrop" onclick={() => onclose()}></div>
 </div>
 
 <style lang="scss">
@@ -213,20 +193,6 @@
     &:hover {
       filter: brightness(1.1);
     }
-
-    &.flat {
-      --playpilot-button-background: transparent;
-      --playpilot-button-shadow: none;
-    }
-
-    &.back {
-      right: auto;
-      left: margin(1);
-
-      &.flat {
-        left: margin(0.5);
-      }
-    }
   }
 
   .prepend {

package/src/routes/components/Playlinks.svelte

@@ -8,7 +8,6 @@
   import { heading } from '$lib/actions/heading'
   import { getContext } from 'svelte'
   import Playlink from './Playlink.svelte'
-  import Display from './Ads/Display.svelte'
   import { campaignToPlaylink, getFirstAdOfType } from '$lib/ads'
 
   interface Props {
@@ -28,7 +27,9 @@
   // otherwise break the layout in ways that don't make sense to fix.
   const list = $derived(outerWidth < 500 || !!displayAd)
 
-  const mergedPlaylink = $derived(mergePlaylinks(playlinks))
+  // Remove any playlinks without logos, these are likely sub providers.
+  const filteredPlaylinks = $derived(playlinks.filter(playlink => !!playlink.logo_url))
+  const mergedPlaylink = $derived(mergePlaylinks(filteredPlaylinks))
 
   function onclick(playlink: string): void {
     track(isModal ? TrackingEvent.TitleModalPlaylinkClick : TrackingEvent.TitlePopoverPlaylinkClick, title, { playlink })
@@ -58,10 +59,6 @@
     <div class="empty" data-testid="playlinks-empty">
       {t('Title Unavailable')}
     </div>
-
-    {#if displayAd}
-      <Display campaign={displayAd} compact={!isModal} />
-    {/if}
   {/if}
 </div>