@playpilot/tpi 8.17.1 → 8.18.0

package/package.json

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

package/src/lib/api/titles.ts

@@ -18,9 +18,9 @@ export async function fetchTitles(params: Record<string, any> = {}): Promise<API
   }
 
   if (params.region !== null) {
-    const region = params.region || await getRegionBasedOnIp()
+    let region = params.region || await getRegionBasedOnIp()
 
-    if (!await isUserRegionSupported(region)) return { next: '', previous: '', results: [] }
+    if (!await isUserRegionSupported(region)) region = 'gl'
 
     params.region = region
   }

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: '1' },
-}, {
-  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: '2' },
-}, {
-  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, sid: '3' },
-  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, sid: '1' },
+  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, sid: '2' },
+  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, sid: '3' },
+  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

@@ -172,7 +172,7 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
 
   insertInTextWidgets(foundInjections)
 
-  return mergedInjections.filter(i => i.title_details).map((injection, index) => {
+  return mergedInjections.filter(injection => hasValidTypeData(injection)).map((injection, index) => {
     const hasManualEquivalent = !injection.manual && isAvailableAsManualInjection(injection, index, mergedInjections)
     const duplicate = injection.duplicate ?? hasManualEquivalent
 
@@ -390,11 +390,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 {
@@ -402,16 +402,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))
 }
@@ -456,6 +450,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

@@ -131,7 +131,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/scss/_mixins.scss

@@ -37,3 +37,30 @@
     @content;
   }
 }
+
+@mixin styled-scrollbar() {
+  scrollbar-color: var(--playpilot-content-light) transparent;
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    width: margin(0.75);
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--playpilot-light);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border: 2px solid var(--playpilot-light);
+    border-radius: margin(1);
+    background: transparent;
+
+    &:hover {
+      background: var(--playpilot-content-light);
+    }
+
+    &:active {
+      background: var(--playpilot-text-color-alt);
+    }
+  }
+}

package/src/lib/scss/global.scss

@@ -18,33 +18,6 @@
   scroll-margin: margin(5);
 }
 
-.playpilot-styled-scrollbar {
-  scrollbar-color: var(--playpilot-content-light) var(--playpilot-lighter);
-  scrollbar-width: thin;
-
-  &::-webkit-scrollbar {
-    width: margin(0.75);
-  }
-
-  &::-webkit-scrollbar-track {
-    background: var(--playpilot-light);
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border: 2px solid var(--playpilot-light);
-    border-radius: margin(1);
-    background: var(--playpilot-lighter);
-
-    &:hover {
-      background: var(--playpilot-content-light);
-    }
-
-    &:active {
-      background: var(--playpilot-text-color-alt);
-    }
-  }
-}
-
 .playpilot-modal-open {
   overflow-y: hidden !important;
 }

package/src/lib/tracking.ts

@@ -23,6 +23,8 @@ export async function track(event: string, title: TitleData | null = null, paylo
     return
   }
 
+  if ((window.PlayPilotLinkInjections.tracked_events?.length || 0) > 500) return
+
   const headers = new Headers({ 'Content-Type': 'application/json' })
 
   if (title) {

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

@@ -59,8 +59,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))
 
@@ -76,7 +75,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)!)
     })
   }
 
@@ -147,7 +146,7 @@
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:400,600,700">
 </svelte:head>
 
-<section class="editor playpilot-styled-scrollbar" class:panel-open={manualInjectionActive} class:loading bind:this={editorElement} {onscroll}>
+<section class="editor" class:panel-open={manualInjectionActive} class:loading bind:this={editorElement} {onscroll}>
   {#if editorElement && !loading}
     <div class="handles">
       <div class="handle">
@@ -227,7 +226,7 @@
 
   {#if manualInjectionActive}
     <div
-      class="panel playpilot-styled-scrollbar"
+      class="panel"
       style:top="{scrollDistance}px"
       transition:fly={{ x: Math.min(window.innerWidth, 320), duration: 200, opacity: 1 }}>
       <ManualInjection
@@ -260,6 +259,8 @@
     overflow-y: auto;
     overflow-x: hidden;
     line-height: normal;
+
+    @include styled-scrollbar;
   }
 
   .panel-open {
@@ -389,5 +390,7 @@
     padding: margin(1.5);
     background: theme(dark);
     overflow-y: auto;
+
+    @include styled-scrollbar;
   }
 </style>

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

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

package/src/routes/components/Explore/ExploreLayout.svelte

@@ -40,7 +40,7 @@
   })
 </script>
 
-<div class="explore playpilot-styled-scrollbar" bind:this={element} bind:clientWidth style:height style:--playpilot-explore-width="{clientWidth}px">
+<div class="explore" bind:this={element} bind:clientWidth style:height style:--playpilot-explore-width="{clientWidth}px">
   <div class="header" role="banner">
     <div>
       <div class="divider"></div>
@@ -108,6 +108,8 @@
     font-weight: theme(detail-font-weight, normal);
     font-size: theme(detail-font-size, font-size-base);
 
+    @include styled-scrollbar;
+
     :global(*) {
       box-sizing: border-box;
     }

package/src/routes/components/Explore/Filter/Dropdown.svelte

@@ -68,7 +68,7 @@
 
   {#if active}
     <div
-      class="content playpilot-styled-scrollbar"
+      class="content"
       style:--max-height={maxHeight ? `${maxHeight}px` : null}
       style:--offset={offset ? `${offset}px` : null}
       bind:this={contentElement}
@@ -96,6 +96,8 @@
     overflow-y: auto;
     overflow-x: hidden;
 
+    @include styled-scrollbar;
+
     .left & {
       right: auto;
       left: var(--offset, 0px);

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>