@playpilot/tpi 8.10.0 → 8.10.2

package/package.json

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

package/src/lib/api/youtubeAvailability.ts

@@ -1,6 +1,4 @@
 import { PUBLIC_YOUTUBE_AVAILABILITY_URL } from '$env/static/public'
-import { TrackingEvent } from '$lib/enums/TrackingEvent'
-import { track } from '$lib/tracking'
 
 export async function isYouTubeVideoAvailableInRegion(videoId: string): Promise<boolean> {
   const region = window.PlayPilotLinkInjections?.region?.toUpperCase()
@@ -18,8 +16,9 @@ export async function isYouTubeVideoAvailableInRegion(videoId: string): Promise<
     if (!data.blocked && !!data.allowed && !data.allowed?.includes(region)) return false
 
     return true
-  } catch (error: any) {
-    track(TrackingEvent.YouTubeAvailabilityRequestFailed, null, { message: error.message })
+  } catch {
+    // Silently fail for now
+    // track(TrackingEvent.YouTubeAvailabilityRequestFailed, null, { message: error.message })
 
     return false
   }

package/src/lib/enums/TrackingEvent.ts

@@ -16,10 +16,10 @@ export const TrackingEvent = {
   ParticipantModalClose: 'ali_participant_modal_close',
 
   // Popover
-  TitlePopoverView: 'ali_title_popover_view',
-  TitlePopoverClose: 'ali_title_popover_close',
-  TitlePopoverSaveClick: 'ali_title_popover_save_click',
-  TitlePopoverPlaylinkClick: 'ali_title_popover_playlink_click',
+  InjectionPopoverView: 'ali_injection_popover_view',
+  InjectionPopoverClose: 'ali_injection_popover_close',
+  InjectionPopoverSaveClick: 'ali_injection_popover_save_click',
+  InjectionPopoverPlaylinkClick: 'ali_injection_popover_playlink_click',
 
   // Rails
   SimilarTitleClick: 'ali_similar_title_click',

package/src/lib/fakeData.ts

@@ -43,38 +43,6 @@ export const title: TitleData = {
   embeddable_url: null,
 }
 
-export const linkInjections: LinkInjection[] = [{
-  sid: '1',
-  title: 'Quan',
-  sentence: 'In an interview with Epire Magazine, Quan reveals he quested starring in Love Hurts',
-  playpilot_url: 'https://playpilot.com/movie/example/',
-  key: 'some-key-1',
-  title_details: title,
-}, {
-  sid: '2',
-  title: 'The Long Kiss Goodnight',
-  sentence: 'The movie is in a similar vein to successful films such as The Long Kiss Goodnight and Nobody',
-  playpilot_url: 'https://playpilot.com/movie/example-2/',
-  key: 'some-key-2',
-  after_article: false,
-  title_details: title,
-}, {
-  sid: '3',
-  title: 'Nobody',
-  sentence: 'The movie is in a similar vein to successful films such as The Long Kiss Goodnight and Nobody',
-  playpilot_url: 'https://playpilot.com/movie/example-3/',
-  key: 'some-key-3',
-  after_article: true,
-  title_details: title,
-  manual: false,
-}, {
-  sid: '4',
-  title: 'The Wheel of Time',
-  sentence: '(The more I think about the Bene Gesserit the more I see how much they influenced not just the Jedi in Star Wars but also the Aes Sedai in The Wheel of Time and even the sorceresses in The Witcher books, though Herbert\'s order is the most ominous and terrifying of them all)',
-  playpilot_url: 'https://playpilot.com/movie/example-4/',
-  key: 'some-key-4',
-}]
-
 export const participants: ParticipantData[] = [
   {
     sid: 'pr5C5W',
@@ -144,6 +112,50 @@ export const participants: ParticipantData[] = [
   },
 ]
 
+export const linkInjections: LinkInjection[] = [{
+  sid: '1',
+  title: 'Quan',
+  sentence: 'In an interview with Epire Magazine, Quan reveals he quested starring in Love Hurts',
+  playpilot_url: 'https://playpilot.com/movie/example/',
+  key: 'some-key-1',
+  title_details: title,
+  type: 'title',
+}, {
+  sid: '2',
+  title: 'The Long Kiss Goodnight',
+  sentence: 'The movie is in a similar vein to successful films such as The Long Kiss Goodnight and Nobody',
+  playpilot_url: 'https://playpilot.com/movie/example-2/',
+  key: 'some-key-2',
+  after_article: false,
+  title_details: title,
+  type: 'title',
+}, {
+  sid: '3',
+  title: 'Nobody',
+  sentence: 'The movie is in a similar vein to successful films such as The Long Kiss Goodnight and Nobody',
+  playpilot_url: 'https://playpilot.com/movie/example-3/',
+  key: 'some-key-3',
+  after_article: true,
+  title_details: title,
+  manual: false,
+  type: 'title',
+}, {
+  sid: '4',
+  title: 'The Wheel of Time',
+  sentence: '(The more I think about the Bene Gesserit the more I see how much they influenced not just the Jedi in Star Wars but also the Aes Sedai in The Wheel of Time and even the sorceresses in The Witcher books, though Herbert\'s order is the most ominous and terrifying of them all)',
+  playpilot_url: 'https://playpilot.com/movie/example-4/',
+  key: 'some-key-4',
+  type: 'title',
+}, {
+  sid: '5',
+  title: 'Jack Black',
+  sentence: 'Jason Momoa (”Aquaman”), Jack Black (”Nacho Libre”) och Jennifer Coolidge (”The White Lotus”) medverkar i den Jared Hess-regisserade (”Napolen Dynamite”) filmen.',
+  playpilot_url: 'https://playpilot.com/name/pr875J-jack-black/',
+  key: 'some-key-5',
+  participant_details: participants[2],
+  type: 'participant',
+}]
+
 export const campaign: Campaign = {
   campaign_format: 'card',
   campaign_type: 'image',

package/src/lib/injection.ts

@@ -168,8 +168,7 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
   // The function itself will decide whether or not it should actually insert the component based on the config.
   if (document.querySelector(keySelector)) insertInTextDisclaimer(elements)
 
-  return mergedInjections.filter(i => i.title_details).map((injection, index) => {
-    // Favour manual injections over AI injections
+  return mergedInjections.filter(injection => hasValidTypeData(injection)).map((injection, index) => {
     const hasManualEquivalent = !injection.manual && isAvailableAsManualInjection(injection, index, mergedInjections)
     const duplicate = injection.duplicate ?? hasManualEquivalent
 
@@ -307,9 +306,6 @@ 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('mousemove', destroyLinkPopoverOnMouseleave)
   window.addEventListener('click', (event) => openModalForInjectedLink(event, injections))
@@ -341,10 +337,6 @@ export function clearLinkInjections(): void {
   destroyLinkPopover(false)
 }
 
-/**
- * Clear specific link injection from the page
- * @param key Given of the injection to be removed from the page
- */
 export function clearLinkInjection(key: string): void {
   const element: HTMLAnchorElement | null = document.querySelector(`[${keyDataAttribute}="${key}"]`)
   if (!element) return
@@ -384,11 +376,11 @@ export function separateLinkInjectionTypes(injections: LinkInjection[]): LinkInj
 }
 
 export function isValidInjection(injection: LinkInjection): boolean {
-  return !injection.inactive && !injection.removed && !injection.duplicate && !!injection.title_details && isValidPlaylinkType(injection)
+  return !injection.inactive && !injection.removed && !injection.duplicate && hasValidTypeData(injection) && isValidPlaylinkType(injection)
 }
 
 /**
- * An injection can have be of various playlink types, when all are false equivalent, the link is not valid.
+ * An injection can be of various playlink types, when all are false equivalent, the link is not valid.
  * It should be treated similar to an inactive playlink in this case.
  */
 export function isValidPlaylinkType(injection: LinkInjection): boolean {
@@ -396,16 +388,10 @@ export function isValidPlaylinkType(injection: LinkInjection): boolean {
   return !!injection.after_article
 }
 
-/**
- * Filter links for in-text injections, removing after article, inactive, removed, duplicate, and items without title_details
- */
 export function filterInvalidInTextInjections(injections: LinkInjection[]): LinkInjection[] {
   return filterRemovedAndInactiveInjections(injections).filter(i => i.in_text !== false && isValidInjection(i))
 }
 
-/**
- * Filter links for after article injections, removing in-text only, inactive, removed, duplicate, and items without title_details
- */
 export function filterInvalidAfterArticleInjections(injections: LinkInjection[]): LinkInjection[] {
   return filterRemovedAndInactiveInjections(injections).filter(i => i.after_article === true && isValidInjection(i))
 }
@@ -450,6 +436,13 @@ export function isEquivalentInjection(injection1: LinkInjection, injection2: Lin
   return injection1.title === injection2.title && cleanPhrase(injection1.sentence) === cleanPhrase(injection2.sentence)
 }
 
+export function hasValidTypeData(injection: LinkInjection): boolean {
+  if (injection.type === 'title' && !!injection.title_details) return true
+  if (injection.type === 'participant' && !!injection.participant_details) return true
+
+  return false
+}
+
 export function getPlayPilotWrapperElement(): Element {
   return document.querySelector('[data-playpilot-link-injections]') || document.body
 }

package/src/lib/modal.ts

@@ -133,7 +133,9 @@ export function openModalForInjectedLink(event: MouseEvent, injections: LinkInje
   event.preventDefault()
 
   playFallbackViewTransition(() => {
+    const data = injection.title_details || injection.participant_details
+
     destroyLinkPopover(false)
-    openModal({ event, injection, data: injection.title_details })
+    openModal({ event, injection, data, type: injection.type })
   }, !prefersReducedMotion.current && window.innerWidth >= mobileBreakpoint && !window.matchMedia('(pointer: coarse)').matches)
 }

package/src/lib/popover.ts

@@ -1,29 +1,30 @@
 import { mount, unmount } from 'svelte'
-import TitlePopover from '../routes/components/TitlePopover.svelte'
 import { getPlayPilotWrapperElement, keyDataAttribute, keySelector } from './injection'
 import type { LinkInjection } from './types/injection'
+import InjectionPopover from '../routes/components/InjectionPopover.svelte'
 
 export let currentlyHoveredInjection: EventTarget | null = null
 export let activePopoverInsertedComponent: object | null = 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.
- */
 export function openPopoverForInjectedLink(event: MouseEvent, injection: LinkInjection): void {
-  // Skip touch devices
   if (window.matchMedia('(pointer: coarse)').matches) return
   if (activePopoverInsertedComponent) destroyLinkPopover()
 
-  const target = event.currentTarget as Element
-  currentlyHoveredInjection = target
+  const currentTarget = event.currentTarget as Element
+  currentlyHoveredInjection = currentTarget
 
   // Only show if the link is hovered for more than 100ms. This is to prevent the popover from showing
   // when a user just happens to mouseover as they are moving their mouse about.
   setTimeout(() => {
-    if (currentlyHoveredInjection !== target) return // User is no longer hovering this link
+    if (currentlyHoveredInjection !== currentTarget) return
 
-    activePopoverInsertedComponent = mount(TitlePopover, { target: getPlayPilotWrapperElement(), props: { event, title: injection.title_details! } })
+    const target = getPlayPilotWrapperElement()
+
+    if (injection.type === 'title') {
+      activePopoverInsertedComponent = mount(InjectionPopover, { target, props: { event, type: 'title', data: injection.title_details! } })
+    } else if (injection.type === 'participant') {
+      activePopoverInsertedComponent = mount(InjectionPopover, { target, props: { event, type: 'participant', data: injection.participant_details! } })
+    }
   }, 100)
 }
 
@@ -44,7 +45,7 @@ export async function destroyLinkPopover(outro: boolean = true): Promise<void> {
   // In that case we remove the element straight from the dom.
   // Doing this will prevent the outro animation from playing, but this being a fallback, that's ok.
   // TODO: Find the actual cause of this bug.
-  document.querySelectorAll<HTMLElement>('[data-playpilot-title-popover]').forEach(element => element.remove())
+  document.querySelectorAll<HTMLElement>('[data-playpilot-injection-popover]').forEach(element => element.remove())
 }
 
 export function destroyLinkPopoverOnMouseleave(event: MouseEvent): void {
@@ -53,7 +54,7 @@ export function destroyLinkPopoverOnMouseleave(event: MouseEvent): void {
   const target = event.target as Element
 
   // Mousemove is inside of popover or link that popover
-  if (target.hasAttribute('data-playpilot-title-popover') || target.closest('[data-playpilot-title-popover]') ||
+  if (target.hasAttribute('data-playpilot-injection-popover') || target.closest('[data-playpilot-injection-popover]') ||
     target.hasAttribute(keyDataAttribute) || target.closest(keySelector)) return
 
   destroyLinkPopover()

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

@@ -1,5 +1,8 @@
+import type { ParticipantData } from './participant'
 import type { TitleData } from './title'
 
+export type LinkInjectionDataType = 'title' | 'participant'
+
 export type LinkInjection = {
   sid: string
   title: string
@@ -7,6 +10,7 @@ export type LinkInjection = {
   playpilot_url: string
   key: string
   title_details?: TitleData
+  participant_details?: ParticipantData
   phrase_before?: string | null
   phrase_after?: string | null
   inactive?: boolean
@@ -19,6 +23,7 @@ export type LinkInjection = {
   removed?: boolean
   duplicate?: boolean
   matchingElement?: null | Element
+  type: LinkInjectionDataType
 }
 
 export type LinkInjectionRanges = Record<string, { elementIndex: number, from: number, to: number }>

package/src/routes/components/Editorial/Editor.svelte

@@ -58,8 +58,7 @@
   const linkInjectionsString = $derived(JSON.stringify(linkInjections))
   const showControls = $derived(!aiRunning && allowEditing)
   const hasChanged = $derived(initialStateString && initialStateString !== linkInjectionsString)
-  // Filter out injections without title_details, injections that are removed, duplicate, or are AI injections that failed to inject
-  const filteredInjections = $derived(linkInjections.filter((i) => i.title_details && !i.removed && !i.duplicate && (i.manual || (!i.manual && !i.failed))))
+  const filteredInjections = $derived(linkInjections.filter((i) => (i.title_details || i.participant_details) && !i.removed && !i.duplicate && (i.manual || (!i.manual && !i.failed))))
   const sortedInjections = $derived(sortInjections(filteredInjections))
   const initialAiRunning = $derived(!loading && untrack(() => aiStatus.aiRunning))
 
@@ -75,7 +74,7 @@
   function sortInjections(injections: LinkInjection[]): LinkInjection[] {
     return injections.sort((a, b) => {
       if (a.failed !== b.failed) return a.failed ? 1 : -1
-      return a.title_details!.title.localeCompare(b.title_details!.title)
+      return (a.title_details?.title || a.participant_details?.name)!.localeCompare((b.title_details?.title || b.participant_details?.name)!)
     })
   }
 

package/src/routes/components/Editorial/EditorItem.svelte

@@ -11,7 +11,6 @@
   import { track } from '$lib/tracking'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import type { LinkInjection } from '$lib/types/injection'
-  import type { TitleData } from '$lib/types/title'
   import { cleanPhrase, truncateAroundPhrase } from '$lib/text'
   import { isValidPlaylinkType } from '$lib/injection'
   import { getLinkInjectionElements, getLinkInjectionsParentElement } from '$lib/injectionElements'
@@ -27,9 +26,8 @@
 
   const { linkInjection = $bindable(), onremove = () => null, onhighlight = () => null }: Props = $props()
 
-  const { key, sentence, title_details, failed, failed_message, inactive } = $derived(linkInjection || {})
+  const { key, type, sentence, title_details, participant_details, failed, failed_message, inactive } = $derived(linkInjection || {})
 
-  const title: TitleData = $derived(title_details!)
   const truncatedSentence = $derived(truncateAroundPhrase(linkInjection.sentence, linkInjection.title, 60))
 
   let expanded = $state(false)
@@ -38,7 +36,7 @@
   let element: HTMLElement | null = $state(null)
 
   onMount(() => {
-    if (failed) track(TrackingEvent.InjectionFailed, title, { phrase: linkInjection.title, sentence})
+    if (failed) track(TrackingEvent.InjectionFailed, type === 'title' ? title_details : null, { phrase: linkInjection.title, sentence})
   })
 
   /**
@@ -113,10 +111,14 @@
   bind:this={element}
   out:slide|global={{ duration: 200 }}>
   <div class="header">
-    <img class="poster" src={removeImageUrlPrefix(title.standing_poster)} alt="" width="32" height="48" onerror={({ target }) => (target as HTMLImageElement).src = imagePlaceholderDataUrl} />
+    {#if type === 'title'}
+      <img class="poster" src={removeImageUrlPrefix(title_details!.standing_poster)} alt="" width="32" height="48" onerror={({ target }) => (target as HTMLImageElement).src = imagePlaceholderDataUrl} />
+    {:else}
+      <div class="placeholder-image"></div>
+    {/if}
 
     <div class="info">
-      <div class="title">{title.title}</div>
+      <div class="title">{title_details?.title || participant_details?.name}</div>
 
       <div class="sentence">
         <!-- eslint-disable-next-line svelte/no-at-html-tags -->
@@ -143,9 +145,13 @@
       <Alert>{failed_message}</Alert>
     {:else}
       <div class="actions">
-        <button class="expand" onclick={() => expanded = !expanded} aria-label="Expand" aria-expanded={expanded}>
-          <IconChevron {expanded} />
-        </button>
+        {#if type === 'title'}
+          <button class="expand" onclick={() => expanded = !expanded} aria-label="Expand" aria-expanded={expanded}>
+            <IconChevron {expanded} />
+          </button>
+        {:else}
+          <div></div>
+        {/if}
 
         {#if !isValidPlaylinkType(linkInjection)}
           <div class="warning" transition:fade={{ duration: 100 }} aria-label="Invalid playlink settings">
@@ -210,6 +216,14 @@
     }
   }
 
+  .placeholder-image {
+    flex: 0 0 margin(2);
+    width: margin(2);
+    height: margin(2);
+    border-radius: 50%;
+    background: theme(content);
+  }
+
   .title {
     font-size: margin(0.875);
     word-break: break-word;

package/src/routes/components/Editorial/ManualInjection.svelte

@@ -169,6 +169,7 @@
       key: generateInjectionKey(selectedTitle.sid),
       title_details: selectedTitle,
       manual: true,
+      type: 'title',
     }
 
     onsave(linkInjection)

package/src/routes/components/{TitlePopover.svelte → InjectionPopover.svelte}

@@ -3,35 +3,48 @@
   import { track } from '$lib/tracking'
   import { getFirstAdOfType } from '$lib/api/ads'
   import type { TitleData } from '$lib/types/title'
-  import { onMount } from 'svelte'
+  import type { ParticipantData } from '$lib/types/participant'
+  import type { LinkInjectionDataType } from '$lib/types/injection'
+  import { onMount, setContext } from 'svelte'
   import { isPixelAllowed } from '$lib/pixel'
   import { trackViaPixel } from '@playpilot/retargeting-tracking'
   import Popover from './Popover.svelte'
   import Title from './Title.svelte'
+  import Participant from './Participant.svelte'
   import TopScroll from './Ads/TopScroll.svelte'
   import Display from './Ads/Display.svelte'
 
   interface Props {
     event: MouseEvent
-    title: TitleData
+    data: TitleData | ParticipantData
+    type?: LinkInjectionDataType
   }
 
-  const { event, title }: Props = $props()
+  const { event, data, type = 'title' }: Props = $props()
+
+  setContext('type', type)
 
   const topScroll = getFirstAdOfType('top_scroll')
   const displayAd = getFirstAdOfType('card')
 
   let element: HTMLElement | null = $state(null)
 
-  track(TrackingEvent.TitlePopoverView, title)
+  if (type === 'title') track(TrackingEvent.InjectionPopoverView, data as TitleData, { type })
+  if (type === 'participant') track(TrackingEvent.InjectionPopoverView, null, { type, participant: (data as ParticipantData).name })
 
-  if (isPixelAllowed()) trackViaPixel(MetaEvent.TitleInterest, { title: title.title, source: MetaSource.Card })
+  if (isPixelAllowed() && type === 'title') trackViaPixel(MetaEvent.TitleInterest, { title: (data as TitleData).title, source: MetaSource.Card })
 
   onMount(() => {
     setOffset()
 
     const openTimestamp = Date.now()
-    return () => track(TrackingEvent.TitlePopoverClose, title, { time_spent: Date.now() - openTimestamp })
+
+    return () => {
+      const endTimestamp = Date.now() - openTimestamp
+
+      if (type === 'title') track(TrackingEvent.InjectionPopoverClose, data as TitleData, { type, time_spent: endTimestamp })
+      if (type === 'participant') track(TrackingEvent.InjectionPopoverClose, null, { type, participant: (data as ParticipantData).name, time_spent: endTimestamp })
+    }
   })
 
   /**
@@ -68,14 +81,18 @@
   {/if}
 {/snippet}
 
-<div class="title-popover" bind:this={element} data-playpilot-title-popover role="region" aria-labelledby="title">
+<div class="injection-popover" bind:this={element} data-playpilot-injection-popover role="region" aria-labelledby="heading">
   <Popover append={displayAd ? append : null} bubble={topScroll ? bubble : null}>
-    <Title {title} small  />
+    {#if type === 'title'}
+      <Title title={data as TitleData} small />
+    {:else if type === 'participant'}
+      <Participant participant={data as ParticipantData} small />
+    {/if}
   </Popover>
 </div>
 
 <style lang="scss">
-  .title-popover {
+  .injection-popover {
     position: absolute;
   }
 </style>

package/src/routes/components/ListTitle.svelte

@@ -8,15 +8,16 @@
 
   interface Props {
     title: TitleData
+    compact?: boolean
     onclick?: (event: MouseEvent) => void
   }
 
-  const { title, onclick = () => null }: Props = $props()
+  const { title, compact = false, onclick = () => null }: Props = $props()
 
   const noAffiliate = !!window.PlayPilotLinkInjections?.no_affiliate
 </script>
 
-<button class="title" {onclick} data-testid="title">
+<button class="title" class:compact {onclick} data-testid="title">
   <div class="poster">
     <TitlePoster {title} width={30} height={43} lazy />
   </div>
@@ -38,12 +39,14 @@
       {/if}
     </div>
 
-    <div class="description" class:large={noAffiliate}>
-      {title.description}
-    </div>
+    {#if !compact}
+      <div class="description" class:large={noAffiliate}>
+        {title.description}
+      </div>
+    {/if}
 
     {#if !noAffiliate}
-      <PlaylinksCompact playlinks={title.providers} />
+      <PlaylinksCompact playlinks={title.providers} size={compact ? 24 : 30} />
     {/if}
   </div>
 
@@ -84,6 +87,10 @@
     border-radius: theme(detail-image-border-radius, border-radius);
     background: theme(detail-image-background, content);
     overflow: hidden;
+
+    .compact & {
+      width: margin(3.5);
+    }
   }
 
   .content {
@@ -97,11 +104,17 @@
     @include desktop() {
       padding-right: margin(1);
     }
+
+    .compact & {
+      padding-left: margin(0.75);
+      padding-right: 0;
+    }
   }
 
   .heading {
     color: theme(list-item-title-text-color, text-color);
     font-weight: theme(list-item-title-font-weight, font-bold);
+    line-height: 1.2;
   }
 
   .meta {
@@ -116,6 +129,10 @@
     > div {
       text-transform: capitalize;
     }
+
+    .compact & {
+      margin: margin(0.125) 0 margin(0.25) 0;
+    }
   }
 
   .imdb {
@@ -152,5 +169,9 @@
     &:active {
       color: theme(list-item-action-hover-color, text-color);
     }
+
+    .compact & {
+      display: none;
+    }
   }
 </style>

package/src/routes/components/Participant.svelte

@@ -13,9 +13,10 @@
 
   interface Props {
     participant: ParticipantData
+    small?: boolean
   }
 
-  const { participant }: Props = $props()
+  const { participant, small = false }: Props = $props()
 
   const { name, birth_date, death_date } = $derived(participant)
 
@@ -52,8 +53,8 @@
   }
 </script>
 
-<div class="header">
-  <div class="heading" use:heading={2} id="name">{name}</div>
+<div class="header" class:small>
+  <div class="heading" use:heading={2} id="heading">{name}</div>
 
   {#if birth_date}
     <p class="dates">
@@ -63,11 +64,13 @@
 </div>
 
 <div class="content">
-  <div class="heading small" use:heading={3} id="credits">{t('Credits')}</div>
+  {#if !small}
+    <div class="heading subheading" use:heading={3} id="credits">{t('Credits')}</div>
+  {/if}
 
   <div class="list">
     {#each titles as title}
-      <ListTitle {title} onclick={(event) => openModal({ event, data: title })} />
+      <ListTitle {title} compact={small} onclick={(event) => openModal({ event, data: title })} />
     {/each}
 
     {#if loading}
@@ -88,6 +91,10 @@
     font-size: theme(detail-font-size, font-size-base);
     line-height: theme(participant-description-line-height, normal);
     color: theme(detail-text-color, text-color);
+
+    &.small {
+      padding: margin(1);
+    }
   }
 
   .heading {
@@ -98,7 +105,7 @@
     line-height: normal;
     font-style: theme(detail-title-font-style, normal);
 
-    &.small {
+    &.subheading {
       margin: 0 0 margin(0.5);
       font-size: theme(detail-title-small-font-size, margin(1.25));
     }
@@ -116,6 +123,11 @@
     font-size: theme(detail-font-size, font-size-base);
     line-height: normal;
     font-style: normal;
+
+    ::view-transition-old(content),
+    ::view-transition-new(content) {
+      height: 100%;
+    }
   }
 
   .list {

package/src/routes/components/Playlinks/Playlinks.svelte

@@ -22,6 +22,7 @@
   const { playlinks, title }: Props = $props()
 
   const isModal = getContext('scope') === 'modal'
+  const type = getContext('type')
   const displayAd = getFirstAdOfType('card')
   const categorize = !!window.PlayPilotLinkInjections?.config?.categorize_playlinks
 
@@ -37,7 +38,7 @@
   const list = $derived(outerWidth < 500 || !!displayAd || mergedPlaylinks.length === 1)
 
   function onclick(playlink: string): void {
-    track(isModal ? TrackingEvent.TitleModalPlaylinkClick : TrackingEvent.TitlePopoverPlaylinkClick, title, { playlink })
+    track(isModal ? TrackingEvent.TitleModalPlaylinkClick : TrackingEvent.InjectionPopoverPlaylinkClick, title, { playlink, type })
   }
 
   function categorizePlaylinks(playlinks: PlaylinkData[]): CategorizedPlaylinks {