@playpilot/tpi 8.10.2 → 8.11.0-beta.1

package/package.json

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

package/src/lib/data/translations.ts

@@ -166,6 +166,11 @@ export const translations = {
     [Language.Swedish]: 'Streaming Guide',
     [Language.Danish]: 'Streaming Guide',
   },
+  'Streaming Guide Heading': {
+    [Language.English]: 'Discover and search all movies and tv-shows',
+    [Language.Swedish]: 'Upptäck och sök bland alla filmer och tv-serier',
+    [Language.Danish]: 'Opdag og søg i alle film og tv-serier',
+  },
   'Streaming Guide Description': {
     [Language.English]: 'Find where to watch movies online - the ultimate guide that helps you find the best movies and shows across streaming services.',
     [Language.Swedish]: 'Sök bland alla filmer och serier för att ta reda på var du kan streama dem',

package/src/lib/enums/TrackingEvent.ts

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

package/src/lib/fakeData.ts

@@ -43,6 +43,38 @@ 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',
@@ -112,50 +144,6 @@ 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,7 +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(injection => hasValidTypeData(injection)).map((injection, index) => {
+  return mergedInjections.filter(i => i.title_details).map((injection, index) => {
     const hasManualEquivalent = !injection.manual && isAvailableAsManualInjection(injection, index, mergedInjections)
     const duplicate = injection.duplicate ?? hasManualEquivalent
 
@@ -376,11 +376,11 @@ export function separateLinkInjectionTypes(injections: LinkInjection[]): LinkInj
 }
 
 export function isValidInjection(injection: LinkInjection): boolean {
-  return !injection.inactive && !injection.removed && !injection.duplicate && hasValidTypeData(injection) && isValidPlaylinkType(injection)
+  return !injection.inactive && !injection.removed && !injection.duplicate && !!injection.title_details && isValidPlaylinkType(injection)
 }
 
 /**
- * An injection can be of various playlink types, when all are false equivalent, the link is not valid.
+ * An injection can have 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 {
@@ -388,10 +388,16 @@ 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))
 }
@@ -436,13 +442,6 @@ 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,9 +133,7 @@ export function openModalForInjectedLink(event: MouseEvent, injections: LinkInje
   event.preventDefault()
 
   playFallbackViewTransition(() => {
-    const data = injection.title_details || injection.participant_details
-
     destroyLinkPopover(false)
-    openModal({ event, injection, data, type: injection.type })
+    openModal({ event, injection, data: injection.title_details })
   }, !prefersReducedMotion.current && window.innerWidth >= mobileBreakpoint && !window.matchMedia('(pointer: coarse)').matches)
 }

package/src/lib/popover.ts

@@ -1,30 +1,29 @@
 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 currentTarget = event.currentTarget as Element
-  currentlyHoveredInjection = currentTarget
+  const target = event.currentTarget as Element
+  currentlyHoveredInjection = target
 
   // 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 !== currentTarget) return
+    if (currentlyHoveredInjection !== target) return // User is no longer hovering this link
 
-    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! } })
-    }
+    activePopoverInsertedComponent = mount(TitlePopover, { target: getPlayPilotWrapperElement(), props: { event, title: injection.title_details! } })
   }, 100)
 }
 
@@ -45,7 +44,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-injection-popover]').forEach(element => element.remove())
+  document.querySelectorAll<HTMLElement>('[data-playpilot-title-popover]').forEach(element => element.remove())
 }
 
 export function destroyLinkPopoverOnMouseleave(event: MouseEvent): void {
@@ -54,7 +53,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-injection-popover') || target.closest('[data-playpilot-injection-popover]') ||
+  if (target.hasAttribute('data-playpilot-title-popover') || target.closest('[data-playpilot-title-popover]') ||
     target.hasAttribute(keyDataAttribute) || target.closest(keySelector)) return
 
   destroyLinkPopover()

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

@@ -1,8 +1,5 @@
-import type { ParticipantData } from './participant'
 import type { TitleData } from './title'
 
-export type LinkInjectionDataType = 'title' | 'participant'
-
 export type LinkInjection = {
   sid: string
   title: string
@@ -10,7 +7,6 @@ export type LinkInjection = {
   playpilot_url: string
   key: string
   title_details?: TitleData
-  participant_details?: ParticipantData
   phrase_before?: string | null
   phrase_after?: string | null
   inactive?: boolean
@@ -23,7 +19,6 @@ 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,7 +58,8 @@
   const linkInjectionsString = $derived(JSON.stringify(linkInjections))
   const showControls = $derived(!aiRunning && allowEditing)
   const hasChanged = $derived(initialStateString && initialStateString !== linkInjectionsString)
-  const filteredInjections = $derived(linkInjections.filter((i) => (i.title_details || i.participant_details) && !i.removed && !i.duplicate && (i.manual || (!i.manual && !i.failed))))
+  // 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 sortedInjections = $derived(sortInjections(filteredInjections))
   const initialAiRunning = $derived(!loading && untrack(() => aiStatus.aiRunning))
 
@@ -74,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 || a.participant_details?.name)!.localeCompare((b.title_details?.title || b.participant_details?.name)!)
+      return a.title_details!.title.localeCompare(b.title_details!.title)
     })
   }
 

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

@@ -11,6 +11,7 @@
   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'
@@ -26,8 +27,9 @@
 
   const { linkInjection = $bindable(), onremove = () => null, onhighlight = () => null }: Props = $props()
 
-  const { key, type, sentence, title_details, participant_details, failed, failed_message, inactive } = $derived(linkInjection || {})
+  const { key, sentence, title_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)
@@ -36,7 +38,7 @@
   let element: HTMLElement | null = $state(null)
 
   onMount(() => {
-    if (failed) track(TrackingEvent.InjectionFailed, type === 'title' ? title_details : null, { phrase: linkInjection.title, sentence})
+    if (failed) track(TrackingEvent.InjectionFailed, title, { phrase: linkInjection.title, sentence})
   })
 
   /**
@@ -111,14 +113,10 @@
   bind:this={element}
   out:slide|global={{ duration: 200 }}>
   <div class="header">
-    {#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}
+    <img class="poster" src={removeImageUrlPrefix(title.standing_poster)} alt="" width="32" height="48" onerror={({ target }) => (target as HTMLImageElement).src = imagePlaceholderDataUrl} />
 
     <div class="info">
-      <div class="title">{title_details?.title || participant_details?.name}</div>
+      <div class="title">{title.title}</div>
 
       <div class="sentence">
         <!-- eslint-disable-next-line svelte/no-at-html-tags -->
@@ -145,13 +143,9 @@
       <Alert>{failed_message}</Alert>
     {:else}
       <div class="actions">
-        {#if type === 'title'}
-          <button class="expand" onclick={() => expanded = !expanded} aria-label="Expand" aria-expanded={expanded}>
-            <IconChevron {expanded} />
-          </button>
-        {:else}
-          <div></div>
-        {/if}
+        <button class="expand" onclick={() => expanded = !expanded} aria-label="Expand" aria-expanded={expanded}>
+          <IconChevron {expanded} />
+        </button>
 
         {#if !isValidPlaylinkType(linkInjection)}
           <div class="warning" transition:fade={{ duration: 100 }} aria-label="Invalid playlink settings">
@@ -216,14 +210,6 @@
     }
   }
 
-  .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,7 +169,6 @@
       key: generateInjectionKey(selectedTitle.sid),
       title_details: selectedTitle,
       manual: true,
-      type: 'title',
     }
 
     onsave(linkInjection)

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

@@ -21,6 +21,7 @@
 
   let { navigate = () => null, searchQuery = $bindable(''), filter = $bindable({}), children }: Props = $props()
 
+  // svelte-ignore non_reactive_update
   let element: HTMLElement | null = null
   let height: string | null = $state(null)
   let clientWidth: number = $state(window.innerWidth)
@@ -44,7 +45,7 @@
       <div class="divider"></div>
 
       <div class="heading" use:heading>
-        {t('Streaming Guide')}
+        {t('Streaming Guide Heading')}
       </div>
 
       {#if !useExploreRouter()}
@@ -98,8 +99,13 @@
     display: flex;
     flex-direction: column;
     gap: margin(0.5);
-    margin: theme(explore-header-margin, 0 0 margin(2));
+    margin: theme(explore-header-margin, 0 0 margin(1));
     width: 100%;
+    max-width: margin(12);
+
+    @include desktop {
+      max-width: margin(20);
+    }
   }
 
   .divider {
@@ -112,7 +118,7 @@
   .heading {
     margin: theme(explore-heading-margin, margin(0.25) 0);
     color: theme(text-color);
-    font-size: theme(explore-heading-size, clamp(margin(1.5), 5vw, margin(2)));
+    font-size: theme(explore-heading-size, clamp(margin(1), 2.5vw, margin(1.5)));
     font-weight: theme(explore-heading-font-weight, font-bold);
     text-transform: theme(explore-heading-text-transform, normal);
     line-height: theme(explore-heading-line-height, 1.5);

package/src/routes/components/Explore/Routes/ExploreHome.svelte

@@ -6,9 +6,11 @@
   import { track } from '$lib/tracking'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import TitlesRail from '../../Rails/TitlesRail.svelte'
+  import { mobileBreakpoint } from '$lib/constants'
 
   let expandedTitle: TitleData | null = $state(null)
   let expandedRailKey: string | null = $state(null)
+  let windowWidth: number = $state(window.innerWidth)
 
   const rails: { heading: string, params: Record<string, any>, properties: Record<string, any> }[] = [{
     heading: 'List: Trending',
@@ -17,7 +19,7 @@
   }, {
     heading: 'List: New',
     params: { from_playlist_sid: 'li42WR', include_playable_types: 'SVOD,FREE' },
-    properties: { aside: true },
+    properties: { aside: true, size: 'flexible' },
   }, {
     heading: 'List: Upcoming',
     params: { from_playlist_sid: 'li42wf', region: null, no_region_filter: true },
@@ -29,7 +31,7 @@
   }, {
     heading: 'List: Demand',
     params: { from_playlist_sid: 'licBS' },
-    properties: { aside: true },
+    properties: { aside: true, size: 'flexible' },
   }]
 
   async function getListTitles(params: Record<string, any> = {}): Promise<TitleData[]> {
@@ -43,7 +45,7 @@
   }
 </script>
 
-<svelte:window {onscroll} />
+<svelte:window {onscroll} bind:innerWidth={windowWidth} />
 
 <div data-testid="explore-home"></div>
 
@@ -52,7 +54,7 @@
     <TitlesRail
       heading={t(heading)}
       titles={getListTitles(params)}
-      size="flexible"
+      size={windowWidth >= mobileBreakpoint ? 'flexible' : 'huge'}
       minimumLength={7}
       {...properties}
       bind:expandedTitle

package/src/routes/components/ListTitle.svelte

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

package/src/routes/components/Modals/RailModal.svelte

@@ -131,7 +131,7 @@
     border-radius: theme(rail-modal-item-border-radius, border-radius-huge) theme(rail-modal-item-border-radius, border-radius-huge) 0 0;
     background: theme(rail-modal-item-background, light);
     box-shadow: none;
-    height: 80vh;
+    height: 90vh;
     overflow: auto;
     overscroll-behavior: contain;
     transition: box-shadow var(--transition-duration);

package/src/routes/components/Participant.svelte

@@ -13,10 +13,9 @@
 
   interface Props {
     participant: ParticipantData
-    small?: boolean
   }
 
-  const { participant, small = false }: Props = $props()
+  const { participant }: Props = $props()
 
   const { name, birth_date, death_date } = $derived(participant)
 
@@ -53,8 +52,8 @@
   }
 </script>
 
-<div class="header" class:small>
-  <div class="heading" use:heading={2} id="heading">{name}</div>
+<div class="header">
+  <div class="heading" use:heading={2} id="name">{name}</div>
 
   {#if birth_date}
     <p class="dates">
@@ -64,13 +63,11 @@
 </div>
 
 <div class="content">
-  {#if !small}
-    <div class="heading subheading" use:heading={3} id="credits">{t('Credits')}</div>
-  {/if}
+  <div class="heading small" use:heading={3} id="credits">{t('Credits')}</div>
 
   <div class="list">
     {#each titles as title}
-      <ListTitle {title} compact={small} onclick={(event) => openModal({ event, data: title })} />
+      <ListTitle {title} onclick={(event) => openModal({ event, data: title })} />
     {/each}
 
     {#if loading}
@@ -91,10 +88,6 @@
     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 {
@@ -105,7 +98,7 @@
     line-height: normal;
     font-style: theme(detail-title-font-style, normal);
 
-    &.subheading {
+    &.small {
       margin: 0 0 margin(0.5);
       font-size: theme(detail-title-small-font-size, margin(1.25));
     }
@@ -123,11 +116,6 @@
     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,7 +22,6 @@
   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
 
@@ -38,7 +37,7 @@
   const list = $derived(outerWidth < 500 || !!displayAd || mergedPlaylinks.length === 1)
 
   function onclick(playlink: string): void {
-    track(isModal ? TrackingEvent.TitleModalPlaylinkClick : TrackingEvent.InjectionPopoverPlaylinkClick, title, { playlink, type })
+    track(isModal ? TrackingEvent.TitleModalPlaylinkClick : TrackingEvent.TitlePopoverPlaylinkClick, title, { playlink })
   }
 
   function categorizePlaylinks(playlinks: PlaylinkData[]): CategorizedPlaylinks {