@playpilot/tpi 5.33.0 → 5.34.1

package/package.json

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

package/src/lib/api/api.ts

@@ -16,7 +16,7 @@ export async function api<T>(path: string, { headers = {}, method = 'GET', body
   const useCache = !isEditorialModeEnabled() && method === 'GET'
   if (useCache && (path in cache)) return cache[path]
 
-  const baseHeaders = { 'Content-Type': 'application/json' }
+  const baseHeaders: Record<string, string> = method === 'GET' ? {} : { 'Content-Type': 'application/json' }
 
   const response = await fetch(apiBaseUrl + path, {
     method,

package/src/lib/color.ts

@@ -0,0 +1,19 @@
+/** Adjust the lightness of an RGB color. */
+export function colorLuminance(input: string, luminosity: number): string {
+	const match = input
+		.replace(/\s+/g, '')
+		.match(/^rgb\((\d+),(\d+),(\d+)\)$/i)
+
+	if (!match) return ''
+
+	const [, r, g, b] = match
+
+	const adjust = (v: string) => {
+		const color = parseInt(v, 10)
+		return Math.round(Math.min(Math.max(0, color + color * luminosity), 255))
+	}
+
+	return `rgb(${adjust(r)}, ${adjust(g)}, ${adjust(b)})`
+}
+
+

package/src/lib/enums/SplitTest.ts

@@ -9,6 +9,11 @@ export const SplitTest = {
     numberOfVariants: 2,
     variantNames: ['Image', 'Label'] as string[],
   },
+  InTextEngagement: {
+    key: 'in-text-engagement',
+    numberOfVariants: 4,
+    variantNames: ['Default', 'Clapper Icon', 'Play Icon', 'Animated Link'] as string[]
+  },
   UserTimeSpent: {
     key: 'user_time_spent',
     numberOfVariants: 10,

package/src/lib/injection.ts

@@ -1,9 +1,10 @@
-import { mount, unmount } from 'svelte'
 import { cleanPhrase, findNumberOfMatchesInString, findShortestMatchBetweenPhrases, findTextNodeContaining, getIndexOfPhraseInElement, getIndexOfPhraseInBoundary, getNumberOfLeadingAndTrailingSpaces, isNodeInLink, replaceBetween, replaceStartingFrom, findSurroundingPhrases } from './text'
 import type { LinkInjection, LinkInjectionTypes } from './types/injection'
 import { getNumberOfOccurrencesInArray } from './array'
 import { destroyAllModals, openModalForInjectedLink } from './modal'
-import InTextDisclaimer from '../routes/components/InTextDisclaimer.svelte'
+import { getSplitTestVariantName } from './splitTest'
+import { SplitTest } from './enums/SplitTest'
+import { colorLuminance } from './color'
 import { clearCurrentlyHoveredInjection, destroyLinkPopover, destroyLinkPopoverOnMouseleave, isPopoverActive, openPopoverForInjectedLink } from './popover'
 import { clearAfterArticlePlaylinks, insertAfterArticlePlaylinks } from './afterArticle'
 import { clearInTextDisclaimer, insertInTextDisclaimer } from './disclaimer'
@@ -11,6 +12,8 @@ import { clearInTextDisclaimer, insertInTextDisclaimer } from './disclaimer'
 export const keyDataAttribute = 'data-playpilot-injection-key'
 export const keySelector = `[${keyDataAttribute}]`
 
+const linksIntersectionObserver = typeof window !== 'undefined' ? new IntersectionObserver(animateLink) : null
+
 /**
  * Return a list of all valid text containing elements that may get injected into.
  * This excludes duplicates, empty elements, links, buttons, and header tags.
@@ -298,6 +301,19 @@ function createLinkInjectionElement(injection: LinkInjection): { injectionElemen
   linkElement.target = '_blank'
   linkElement.rel = 'noopener nofollow noreferrer'
 
+  // Part of a split test, insert an absolute positioned icon in the top right of links.
+  if (getSplitTestVariantName(SplitTest.InTextEngagement) === 'Clapper Icon' || getSplitTestVariantName(SplitTest.InTextEngagement) === 'Play Icon') {
+    const iconElement = document.createElement('span')
+    iconElement.classList.add('playpilot-injection-info-icon')
+    iconElement.dataset.playpilotElement = 'true'
+
+    const playIcon = '<svg width="8" height="8" viewBox="0 0 8 8" fill="none"><path d="M7.66011 4.53958C8.1133 4.31131 8.1133 3.68869 7.6601 3.46042L0.930122 0.0706345C0.507292 -0.142339 8.99396e-08 0.151949 8.42451e-08 0.610212L0 7.38979C-5.69452e-09 7.84805 0.507291 8.14234 0.930122 7.92937L7.66011 4.53958Z" fill="currentColor"/></svg>'
+    const clapperIcon = '<svg width="10" height="12" viewBox="0 0 13 16" fill="none"><rect x="0.950195" y="6.56641" width="12.0498" height="8.80563" rx="1" fill="currentColor" /><rect y="5.92969" width="12" height="2.4" rx="0.5" transform="rotate(-29.6116 0 5.92969)" fill="currentColor" /><path d="M8.82314 11.4484C9.02159 11.3443 9.02159 11.0602 8.82314 10.956L5.87605 9.40918C5.69089 9.312 5.46875 9.44629 5.46875 9.6554L5.46875 12.749C5.46875 12.9582 5.69089 13.0924 5.87605 12.9953L8.82314 11.4484Z" fill="white" /></svg>'
+
+    iconElement.innerHTML = getSplitTestVariantName(SplitTest.InTextEngagement) === 'Clapper Icon' ? clapperIcon : playIcon
+    linkElement.insertAdjacentElement('beforeend', iconElement)
+  }
+
   injectionElement.insertAdjacentElement('beforeend', linkElement)
 
   return { injectionElement, linkElement }
@@ -402,8 +418,10 @@ function addCSSVariablesToLinks(): void {
  * Add event listeners to all injected links. These events are for both the popover and the modal.
  */
 function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
-  window.addEventListener('click', (event) => openModalForInjectedLink(event, injections))
   window.addEventListener('mousemove', destroyLinkPopoverOnMouseleave)
+  window.addEventListener('click', (event) => {
+    openModalForInjectedLink(event, injections)
+  })
 
   const createdInjectionElements = document.querySelectorAll<HTMLElement>(keySelector)
 
@@ -419,6 +437,26 @@ function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
     })
 
     injectionElement.addEventListener('mouseleave', clearCurrentlyHoveredInjection)
+
+    linksIntersectionObserver!.observe(injectionElement)
+  })
+}
+
+export function animateLink(entries: IntersectionObserverEntry[]): void {
+  if (getSplitTestVariantName(SplitTest.InTextEngagement) !== 'Animated Link') return
+
+  entries.forEach(entry => {
+    if (!entry.isIntersecting) return
+
+    const linkElement = entry.target.querySelector('a')
+    if (!linkElement) return
+
+    const linkColor = window.getComputedStyle(linkElement).color
+
+    ;(entry.target as HTMLElement).style = `--animation-color: ${colorLuminance(linkColor, -0.5)}`
+
+    entry.target.classList.remove('animate-injection')
+    setTimeout(() => entry.target.classList.add('animate-injection'))
   })
 }
 
@@ -443,6 +481,9 @@ export function clearLinkInjection(key: string): void {
   const element: HTMLAnchorElement | null = document.querySelector(`[${keyDataAttribute}="${key}"]`)
   if (!element) return
 
+  const playpilotElements = element.querySelectorAll('[data-playpilot-element]')
+  playpilotElements.forEach(element => element.remove())
+
   const linkContent = element.querySelector('a')?.innerHTML
   element.outerHTML = linkContent || ''
 }

package/src/lib/modal.ts

@@ -10,6 +10,8 @@ import { getPlayPilotWrapperElement, keyDataAttribute, keySelector } from "./inj
 import { playFallbackViewTransition } from "./viewTransition"
 import { destroyLinkPopover } from "./popover"
 import { prefersReducedMotion } from "svelte/motion"
+import { trackSplitTestAction } from "./splitTest"
+import { SplitTest } from "./enums/SplitTest"
 
 type ModalType = 'title' | 'participant'
 
@@ -129,6 +131,8 @@ export function openModalForInjectedLink(event: MouseEvent, injections: LinkInje
 
   event.preventDefault()
 
+  trackSplitTestAction(SplitTest.InTextEngagement, 'click')
+
   playFallbackViewTransition(() => {
     destroyLinkPopover(false)
     openModal({ event, injection, data: injection.title_details })

package/src/lib/scss/global.scss

@@ -7,8 +7,47 @@
   }
 }
 
+@keyframes animate-injection {
+  0% {
+    background-position: 0% 0%;
+  }
+
+  100% {
+    background-position: -200% 0%;
+  }
+}
+
 [data-playpilot-injection-key] {
   position: relative;
+
+  &.animate-injection a {
+    background: linear-gradient(to right, currentColor 50%, var(--animation-color), currentcolor);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-size: 200% auto;
+    animation: animate-injection 650ms 500ms ease-in-out forwards;
+  }
+}
+
+.playpilot-injection-info-icon {
+  position: relative;
+  display: inline-block;
+  height: 1em;
+
+  svg {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: -0.5em;
+    right: -0.25em;
+    font-size: 0.65em;
+  }
+
+  h1 &, h2 &, h3 &, h4 &, h5 &, h6 & {
+    display: none
+  }
 }
 
 .playpilot-injection-highlight {

package/src/routes/+page.svelte

@@ -9,7 +9,7 @@
   import { fetchAds } from '$lib/api/ads'
   import { fetchConfig } from '$lib/api/config'
   import { authorize, getAuthToken, isEditorialModeEnabled, removeAuthCookie, setEditorialParamInUrl } from '$lib/api/auth'
-  import { getSplitTestVariantName } from '$lib/splitTest'
+  import { trackSplitTestView, getSplitTestVariantName } from '$lib/splitTest'
   import { SplitTest } from '$lib/enums/SplitTest'
   import type { LinkInjectionResponse, LinkInjection, LinkInjectionTypes } from '$lib/types/injection'
   import Editor from './components/Editorial/Editor.svelte'
@@ -57,7 +57,11 @@
     fireQueuedTrackingEvents()
     track(TrackingEvent.ArticlePageView)
 
-    if (aiInjections.length || manualInjections.length) window.PlayPilotLinkInjections.ads = await fetchAds()
+    if (!aiInjections.length && !manualInjections.length) return
+
+    window.PlayPilotLinkInjections.ads = await fetchAds()
+
+    trackSplitTestView(SplitTest.InTextEngagement)
   }
 
   async function initialize(): Promise<void> {
@@ -234,7 +238,7 @@
     </svelte:boundary>
   {/if}
 
-  <Debugger />
+  <Debugger onrerender={rerender} />
 </div>
 
 {#if response?.pixels?.length}

package/src/routes/components/Debugger.svelte

@@ -3,6 +3,12 @@
   import { getFullUrlPath } from '$lib/url'
   import { onDestroy } from 'svelte'
 
+  interface Props {
+    onrerender: () => void
+  }
+
+  const { onrerender }: Props = $props()
+
   const secrets = ['tpidebug', 'debugtpi']
   const lastInputs: string[] = []
   const isUsingBetaScript = !!document.querySelector('script[src*="scripts.playpilot.com/link-injection@next"]')
@@ -151,6 +157,8 @@
 
     <hr />
 
+    <button onclick={onrerender}>Re-inject</button>
+
     {#if isUsingBetaScript}
       <small>You are using the beta version of TPI</small>
     {:else}

package/src/routes/components/Participant.svelte

@@ -82,8 +82,6 @@
 <style lang="scss">
   .header {
     padding: margin(4) margin(1) margin(2);
-    background: linear-gradient(to bottom, theme(detail-background-light, lighter), transparent);
-    border-radius: theme(detail-border-radius, margin(1) margin(1) 0 0);
     font-family: theme(detail-font-family, font-family);
     font-weight: theme(detail-font-weight, normal);
     font-size: theme(detail-font-size, font-size-base);