@playpilot/tpi 5.31.3 → 5.32.0-beta.1

package/package.json

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

package/src/lib/data/translations.ts

@@ -61,6 +61,11 @@ export const translations = {
     [Language.Swedish]: 'minuter',
     [Language.Danish]: 'minutter',
   },
+  'Minutes Short': {
+    [Language.English]: 'min.',
+    [Language.Swedish]: 'min.',
+    [Language.Danish]: 'min.',
+  },
   'Type: movie': {
     [Language.English]: 'Movie',
     [Language.Swedish]: 'Film',

package/src/lib/enums/SplitTest.ts

@@ -9,4 +9,9 @@ export const SplitTest = {
     numberOfVariants: 2,
     variantNames: ['Image', 'Label'] as string[],
   },
+  InTextEngagement: {
+    key: 'in-text-engagement',
+    numberOfVariants: 4,
+    variantNames: ['Default', '(i) Icon', 'Providers', 'Highlight'] as string[]
+  }
 } as const

package/src/lib/injection.ts

@@ -13,6 +13,9 @@ import { destroyAllModals, openModal } from './modal'
 import { track } from './tracking'
 import { TrackingEvent } from './enums/TrackingEvent'
 import InTextDisclaimer from '../routes/components/InTextDisclaimer.svelte'
+import { getSplitTestVariantName, trackSplitTestAction } from './splitTest'
+import { SplitTest } from './enums/SplitTest'
+import { mergePlaylinks } from './playlink'
 
 const keyDataAttribute = 'data-playpilot-injection-key'
 const keySelector = `[${keyDataAttribute}]`
@@ -307,6 +310,33 @@ function createLinkInjectionElement(injection: LinkInjection): { injectionElemen
   linkElement.target = '_blank'
   linkElement.rel = 'noopener nofollow noreferrer'
 
+  // Part of a split test, insert an absolute positioned (i) icon in the top right of links.
+  if (getSplitTestVariantName(SplitTest.InTextEngagement) === '(i) Icon') {
+    const iconElement = document.createElement('span')
+    iconElement.classList.add('playpilot-injection-info-icon')
+    iconElement.dataset.playpilotElement = 'true'
+
+    linkElement.insertAdjacentElement('beforeend', iconElement)
+  }
+
+  // Part of a split test, insert a list of max 3 provider icons after the link, these are inline and cause page shift.
+  if (getSplitTestVariantName(SplitTest.InTextEngagement) === 'Providers') {
+    const size = parseFloat(getComputedStyle(document.documentElement).fontSize) * 0.875 // 0.875 rem, 14 pixels if 1rem is 16 pixels
+
+    for (const provider of mergePlaylinks(injection.title_details!.providers).slice(0, 3)) {
+      const imageElement = document.createElement('img')
+      imageElement.loading = 'lazy'
+      imageElement.src = provider.logo_url
+      imageElement.alt = '' // Intentionally ignore the image or TTS would make a mess of the sentence
+      imageElement.width = size
+      imageElement.height = size
+      imageElement.dataset.playpilotElement = 'true'
+      imageElement.classList.add('playpilot-injection-provider-icon')
+
+      linkElement.insertAdjacentElement('beforeend', imageElement)
+    }
+  }
+
   injectionElement.insertAdjacentElement('beforeend', linkElement)
 
   return { injectionElement, linkElement }
@@ -422,6 +452,8 @@ function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
 
     event.preventDefault()
 
+    trackSplitTestAction(SplitTest.InTextEngagement, 'click')
+
     playFallbackViewTransition(() => {
       destroyLinkPopover(false)
       openModal({ event, injection, data: injection.title_details })
@@ -602,6 +634,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/scss/global.scss

@@ -11,6 +11,45 @@
   position: relative;
 }
 
+.playpilot-injection-info-icon {
+  position: relative;
+  display: inline-block;
+  height: 1em;
+
+  &::before {
+    content: "i";
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: -0.25em;
+    right: -1em;
+    width: 0.75em;
+    height: 0.75em;
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px currentColor;
+    line-height: 1;
+    font-size: 0.65em;
+    text-align: center;
+  }
+
+  h1 &, h2 &, h3 &, h4 &, h5 &, h6 & {
+    display: none
+  }
+}
+
+.playpilot-injection-provider-icon {
+  display: inline-block;
+  margin-left: margin(0.25);
+  border-radius: 2px;
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.25);
+  overflow: hidden;
+
+  h1 &, h2 &, h3 &, h4 &, h5 &, h6 & {
+    display: none
+  }
+}
+
 .playpilot-injection-highlight {
   outline: margin(0.25) solid var(--playpilot-primary) !important;
   outline-offset: margin(0.5) !important;

package/src/routes/+page.svelte

@@ -9,6 +9,8 @@
   import { fetchAds } from '$lib/api/ads'
   import { fetchConfig } from '$lib/api/config'
   import { authorize, getAuthToken, isEditorialModeEnabled, removeAuthCookie, setEditorialParamInUrl } from '$lib/api/auth'
+  import { getSplitTestVariantName, trackSplitTestView } 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'
   import EditorTrigger from './components/Editorial/EditorTrigger.svelte'
@@ -16,6 +18,7 @@
   import TrackingPixels from './components/TrackingPixels.svelte'
   import Consent from './components/Consent.svelte'
   import Debugger from './components/Debugger.svelte'
+  import HighlightedInjection from './components/HighlightedInjection.svelte'
 
   let parentElement: HTMLElement | null = $state(null)
   let elements: HTMLElement[] = $state([])
@@ -54,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> {
@@ -225,7 +232,11 @@
     </svelte:boundary>
   {/if}
 
-  <Debugger />
+  {#if linkInjections.length && getSplitTestVariantName(SplitTest.InTextEngagement) === 'Highlight'}
+    <HighlightedInjection {linkInjections} />
+  {/if}
+
+  <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"]')
@@ -92,8 +98,6 @@
       newScriptTag.setAttribute(attribute.name, attribute.value)
     }
 
-    console.log(newScriptTag, newScriptTag.getAttribute('onload'))
-
     // If no onload attribute is given we add our own and load it straight up. This can happen when the third party loads their
     // script through other means. That's fine, this beta script is meant to be an approximation and how they load the script
     // exactly does not matter in this case.
@@ -153,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/HighlightedInjection.svelte

@@ -0,0 +1,222 @@
+<script lang="ts">
+  import { filterRemovedAndInactiveInjections, sortInjections } from '$lib/injection'
+  import { t } from '$lib/localization'
+  import { titleUrl } from '$lib/routes'
+  import { cleanPhrase } from '$lib/text'
+  import type { LinkInjection } from '$lib/types/injection'
+  import { openModal } from '$lib/modal'
+  import { trackSplitTestAction } from '$lib/splitTest'
+  import { SplitTest } from '$lib/enums/SplitTest'
+  import { scale } from 'svelte/transition'
+  import IconIMDb from './Icons/IconIMDb.svelte'
+  import TitlePoster from './TitlePoster.svelte'
+  import RoundButton from './RoundButton.svelte'
+  import IconClose from './Icons/IconClose.svelte'
+
+  interface Props {
+    linkInjections: LinkInjection[]
+  }
+
+  const { linkInjections }: Props = $props()
+
+  const scrollThreshold = Math.min(window.innerHeight, 800)
+
+  const filteredInjections = $derived(filterRemovedAndInactiveInjections(linkInjections))
+  const sortedInjections: LinkInjection[] = $derived(sortInjections(filteredInjections))
+
+  // Get title injection that might relate the most the overall article.
+  // If any is found it is used as the primary display, highlighting that injection over others.
+  // If none are found we simply use the first active injection and hope for the best.
+  const primaryInjection = $derived.by(() => {
+    const pageTitle = cleanPhrase(document.querySelector('h1')?.innerText || document.title || '')
+    return sortedInjections.find(injection => pageTitle.includes(cleanPhrase(injection.title))) || filteredInjections[0]
+  })
+
+  let shown = $state(false)
+  let closed = $state(false)
+  let offsetBottom = $state(0)
+
+  // Only show the element once the user has scroll past a threshold. From here we check the offset from the bottom of
+  // the page to make sure we don't overlay the element on top of other elements on the page, such as ads or menus
+  function onscroll(): void {
+    if (shown || closed) return
+    if (window.scrollY < scrollThreshold) return
+
+    const bottomFixedElementOffsets = getBottomFixedElementOffsets()
+    const largestOffset = Math.max(...bottomFixedElementOffsets, 0)
+
+    offsetBottom = largestOffset + parseFloat(getComputedStyle(document.documentElement).fontSize) // 1 rem
+    shown = true
+
+    trackSplitTestAction(SplitTest.InTextEngagement, 'shown')
+  }
+
+  // Get all elements that are seemingly fixed to the bottom. This is used to determine the position of the element to try
+  // and make sure it does not overlap ads or other elements at the bottom of the screen.
+  // This is determined by them being fixed (duh) and being close to the bottom of the screen. This might turn out to be unreliable.
+  // It does not account for elements that are added after this function is called, which is often the case for ads.
+  function getBottomFixedElementOffsets(): number[] {
+    const fixedElements = Array.from(document.querySelectorAll('*')).filter((element) => {
+      const style = getComputedStyle(element)
+      return style.position === 'fixed' && window.innerHeight - element.getBoundingClientRect().bottom < 50
+    })
+
+    return fixedElements.map((element) => element.clientHeight + (window.innerHeight - element.getBoundingClientRect().bottom))
+  }
+
+  function onclick(event: MouseEvent): void {
+    event.preventDefault()
+
+    closed = true
+
+    openModal({ event, injection: primaryInjection, data: primaryInjection.title_details })
+    trackSplitTestAction(SplitTest.InTextEngagement, 'click-highlight')
+  }
+
+  function close(event: MouseEvent): void {
+    event.preventDefault()
+
+    closed = true
+
+    trackSplitTestAction(SplitTest.InTextEngagement, 'close')
+  }
+</script>
+
+<svelte:window {onscroll} />
+
+{#if primaryInjection && shown && !closed}
+  {@const title = primaryInjection.title_details!}
+
+  <div class="highlighted-injection" style:bottom="{offsetBottom}px" in:scale={{ start: 0.85, duration: 100 }}>
+    <a {onclick} class="link" href={titleUrl(title)} target="_blank" aria-label="{title.title} (opens in a new tab)">
+      <div class="poster">
+        <TitlePoster {title} width={30} height={43} />
+      </div>
+
+      <div class="content">
+        <div class="details">
+          <div class="heading">{title.title}</div>
+
+          <div class="meta">
+            <div class="imdb">
+              <IconIMDb />
+              {title.imdb_score || '-'}
+            </div>
+
+            <div>{title.year}</div>
+
+            <div class="capitalize">{t(`Type: ${title.type}`)}</div>
+
+            {#if title.length}
+              <div>{title.length} {t('Minutes Short')}</div>
+            {/if}
+          </div>
+        </div>
+
+        <div class="action">
+          {t('Watch')}
+        </div>
+      </div>
+    </a>
+
+    <div class="close">
+      <RoundButton onclick={close} aria-label="Close">
+        <IconClose />
+      </RoundButton>
+    </div>
+  </div>
+{/if}
+
+<style lang="scss">
+  .highlighted-injection {
+    position: fixed;
+    bottom: margin(1);
+    left: margin(1);
+    width: calc(100% - margin(2));
+
+    @include desktop {
+      max-width: 400px;
+    }
+  }
+
+  .link {
+    display: flex;
+    gap: margin(1);
+    align-items: flex-start;
+    border-radius: theme(border-radius);
+    padding: margin(0.5) margin(1) margin(0.5) margin(0.5);
+    background: theme(dark);
+    box-shadow: theme(shadow-large);
+    text-decoration: none;
+
+    &:hover,
+    &:active {
+      transform: scale(1.025);
+      transition: transform 50ms;
+      filter: brightness(theme(hover-filter-brightness));
+    }
+
+    &:active {
+      transform: scale(0.975);
+    }
+  }
+
+  .poster {
+    flex: 0 0 margin(2);
+    width: margin(2);
+    box-shadow: 0 0 2px 1px theme(content);
+    border-radius: theme(border-radius-small);
+    background: theme(content);
+    overflow: hidden;
+  }
+
+  .content {
+    display: flex;
+    align-items: center;
+    gap: margin(0.5);
+    margin: auto 0;
+    color: theme(text-color-alt);
+    font-family: theme(font-family);
+    font-size: 12px;
+    line-height: 1.5;
+    font-style: normal;
+  }
+
+  .heading {
+    margin-bottom: margin(0.25);
+    font-size: theme(font-size-base);
+    font-weight: theme(font-bold);
+    color: theme(text-color);
+  }
+
+  .meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0 margin(0.5);
+    white-space: nowrap;
+    color: theme(text-color-alt);
+  }
+
+  .imdb {
+    display: flex;
+    align-items: center;
+    gap: margin(0.25);
+  }
+
+  .action {
+    grid-area: action;
+    margin-left: auto;
+    padding: margin(0.5);
+    border: theme(playlinks-action-border, 1px solid currentColor);
+    border-radius: theme(playlinks-action-border-radius, margin(2));
+    font-weight: theme(playlinks-action-font-weight, 500);
+    color: theme(playlinks-action-text-color, text-color);
+    line-height: 1;
+  }
+
+  .close {
+    position: absolute;
+    top: margin(-0.75);
+    right: margin(-0.75);
+  }
+</style>

package/src/routes/components/RoundButton.svelte

@@ -2,10 +2,11 @@
   import type { Snippet } from 'svelte'
 
   interface Props {
-    size?: string;
-    children?: Snippet;
-    onclick?: () => void;
-    [key: string]: any;
+    size?: string
+    children?: Snippet
+    // eslint-disable-next-line no-unused-vars
+    onclick?: (event: MouseEvent) => void
+    [key: string]: any
   }
 
   const { children, size = '32px', onclick = () => null, ...rest }: Props = $props()

package/src/tests/routes/+page.test.js

@@ -13,6 +13,7 @@ import { getFullUrlPath } from '$lib/url'
 import { fetchAds } from '$lib/api/ads'
 import { fetchConfig } from '$lib/api/config'
 import { hasConsentedTo } from '$lib/consent'
+import { getSplitTestVariantName } from '$lib/splitTest'
 
 vi.mock('$lib/api/externalPages', () => ({
   fetchLinkInjections: vi.fn(() => {}),
@@ -66,6 +67,7 @@ vi.mock('$lib/url', () => ({
 
 vi.mock('$lib/splitTest', () => ({
   trackSplitTestView: vi.fn(),
+  getSplitTestVariantName: vi.fn(),
 }))
 
 vi.mock('$lib/api/ads', () => ({

package/src/tests/routes/components/HighlightedInjection.test.js

@@ -0,0 +1,98 @@
+import { render, fireEvent, waitFor } from '@testing-library/svelte'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import HighlightedInjection from '../../../routes/components/HighlightedInjection.svelte'
+import { generateInjection } from '../../helpers'
+import { title } from '$lib/fakeData'
+import { openModal } from '$lib/modal'
+
+vi.mock('$lib/modal', () => ({
+  openModal: vi.fn(),
+}))
+
+/**
+ * @param {number} value
+ */
+async function mockScroll(value) {
+  Object.defineProperty(window, 'scrollY', { value, configurable: true })
+  window.dispatchEvent(new Event('scroll'))
+
+  return new Promise(res => setTimeout(res))
+}
+
+describe('HighlightedInjection.svelte', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+  })
+
+  const linkInjections = [
+    generateInjection('Some sentence', 'Some title'),
+    { ...generateInjection('Some sentence', 'Some title'), title_details: { ...title, title: 'Some second injection' } },
+  ]
+
+  it('Should show after scrolling the required distance', async () => {
+    const { queryByRole } = render(HighlightedInjection, { linkInjections })
+
+    await mockScroll(0)
+    expect(queryByRole('link')).not.toBeTruthy()
+
+    await mockScroll(200)
+    expect(queryByRole('link')).not.toBeTruthy()
+
+    await mockScroll(1000)
+    expect(queryByRole('link')).toBeTruthy()
+  })
+
+  it('Should not hide after being shown by scrolling', async () => {
+    const { queryByRole } = render(HighlightedInjection, { linkInjections })
+
+    await mockScroll(1000)
+    expect(queryByRole('link')).toBeTruthy()
+
+    await mockScroll(0)
+    expect(queryByRole('link')).toBeTruthy()
+  })
+
+  it('Should render the first injection in the list', async () => {
+    const { getByText } = render(HighlightedInjection, { linkInjections })
+
+    await mockScroll(1000)
+
+    // @ts-ignore
+    expect(getByText(linkInjections[0].title_details.title)).toBeTruthy()
+  })
+
+  it('Should render the injection most relevant to the document title', async () => {
+    // @ts-ignore
+    document.body.innerHTML = `<h1>${linkInjections[1].title_details.title}</h1>`
+
+    const { getByText } = render(HighlightedInjection, { linkInjections })
+
+    await mockScroll(1000)
+
+    // @ts-ignore
+    expect(getByText(linkInjections[1].title_details.title)).toBeTruthy()
+  })
+
+  it('Should open modal on click', async () => {
+    const { getByRole } = render(HighlightedInjection, { linkInjections })
+
+    await mockScroll(1000)
+    await fireEvent.click(getByRole('link'))
+
+    expect(openModal).toHaveBeenCalled()
+  })
+
+  it('Should close elements when close button is closed', async () => {
+    const { getByLabelText, queryByRole } = render(HighlightedInjection, { linkInjections })
+
+    await mockScroll(1000)
+    await fireEvent.click(getByLabelText('Close'))
+
+    await waitFor(() => {
+      expect(queryByRole('link')).not.toBeTruthy()
+    })
+
+    expect(openModal).not.toHaveBeenCalled()
+  })
+})