@playpilot/tpi 8.17.1 → 8.19.0

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/Modals/Modal.svelte

@@ -240,6 +240,8 @@
     will-change: top;
     transition: top 200ms;
 
+    @include styled-scrollbar;
+
     @supports (height: 1dvh) {
       height: 80dvh;
     }

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

@@ -79,7 +79,7 @@
 </Modal>
 
 <style lang="scss">
-  $size: min(600px, 85vw);
+  $size: min(800px, 85vw);
 
   .rail-modal {
     --gap: #{margin(0.25)};
@@ -132,12 +132,18 @@
     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: 90vh;
+    height: calc(90vh - env(safe-area-inset-top));
     overflow: auto;
     overscroll-behavior: contain;
     transition: box-shadow var(--transition-duration);
 
-    @include desktop() {
+    @include styled-scrollbar;
+
+    @supports (height: 1dvh) {
+      height: calc(90dvh - env(safe-area-inset-top));
+    }
+
+    @include desktop {
       height: auto;
       max-height: 90vh;
       border-radius: theme(rail-modal-item-border-radius, border-radius-huge);

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/Playlink.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import Disclaimer from '../Ads/Disclaimer.svelte'
-  import TrackingPixels from '../TrackingPixels.svelte'
+  import TrackingPixels from '../Tracking/TrackingPixels.svelte'
   import { hasConsentedTo } from '$lib/consent'
   import { removeImageUrlPrefix } from '$lib/image'
   import { t } from '$lib/localization'

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import TrackingPixels from '../TrackingPixels.svelte'
+  import TrackingPixels from '../Tracking/TrackingPixels.svelte'
   import { removeImageUrlPrefix } from '$lib/image'
   import type { PlaylinkData } from '$lib/types/playlink'
 

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

@@ -9,6 +9,7 @@
   import { campaignToPlaylink, getFirstAdOfType } from '$lib/api/ads'
   import { getContext } from 'svelte'
   import Playlink from './Playlink.svelte'
+  import Button from '../Button.svelte'
 
   type Category = PlaylinkCategory | '' | 'Other'
   type CategorizedPlaylinks = Partial<Record<Category, PlaylinkData[]>>
@@ -17,19 +18,22 @@
   interface Props {
     playlinks: PlaylinkData[]
     title: TitleData
+    limit?: number
   }
 
-  const { playlinks, title }: Props = $props()
+  const { playlinks, title, limit = 3 }: Props = $props()
 
   const isModal = getContext('scope') === 'modal'
+  const type = getContext('type')
   const displayAd = getFirstAdOfType('card')
   const categorize = !!window.PlayPilotLinkInjections?.config?.categorize_playlinks
 
   let outerWidth = $state(0)
+  let limited = $state(!categorize)
 
   const mergedPlaylinks = $derived(mergePlaylinks(playlinks))
   const categorizedPlaylinks = $derived(categorizePlaylinks(playlinks))
-  const shownPlaylinks: SortedPlaylinks = $derived(categorize ? sortCategories(categorizedPlaylinks) : [['' as Category, mergedPlaylinks]])
+  const sortedPlaylinks: SortedPlaylinks = $derived(categorize ? sortCategories(categorizedPlaylinks) : [['' as Category, mergedPlaylinks]])
 
   // Grid turns into a list when the playlinks container is small enough
   // It is also a list by default if a display ad is present, as that would
@@ -37,7 +41,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 {
@@ -86,13 +90,13 @@
   </div>
 {/if}
 
-{#each shownPlaylinks as [category, playlinks]}
+{#each sortedPlaylinks as [category, playlinks]}
   {#if category && playlinks.length}
     <div class="heading category" use:heading={4}>{t(`Category: ${category}`)}</div>
   {/if}
 
   <div class="playlinks" data-testid="category-{category}" class:list bind:clientWidth={outerWidth}>
-    {#each playlinks as playlink, index}
+    {#each playlinks.slice(0, limited ? limit : playlinks.length) as playlink, index}
       <Playlink {playlink} onclick={() => onclick(playlink.name)} />
 
       <!-- A fake highlighted playlink as part of the display ad, to be shown after the first playlink -->
@@ -101,6 +105,14 @@
       {/if}
     {/each}
   </div>
+
+  {#if playlinks.length > limit && limited}
+    <div class="show-more" data-testid="show-more">
+      <Button onclick={() => limited = !limited} size="large">
+        {t('Show Count More').replace('[[count]]', (playlinks.length - limit).toString())}
+      </Button>
+    </div>
+  {/if}
 {/each}
 
 <style lang="scss">
@@ -152,6 +164,10 @@
     }
   }
 
+  .show-more {
+    margin-top: margin(0.5);
+  }
+
   .empty {
     padding: margin(0.75);
     margin-top: margin(0.5);

package/src/routes/components/Popover.svelte

@@ -194,11 +194,12 @@
     background: theme(popover-background, light);
     box-shadow: theme(popover-shadow, shadow-large);
     max-height: min(var(--max-height, 100vh), margin(36)); // --max-height defaults to 100vh to make it unused while it's not defined
-    scrollbar-width: thin;
     overflow-y: overlay;
     overflow-x: hidden;
     view-transition-name: playpilot-title-content;
 
+    @include styled-scrollbar;
+
     .has-bubble & {
       border-top-left-radius: 0;
       border-top-right-radius: 0;

package/src/routes/components/Title.svelte

@@ -56,7 +56,7 @@
       <TitlePoster {title} onload={() => posterLoaded = true} lazy={false} />
     </div>
 
-    <div class="heading" use:heading={2} class:truncate={small} id="title">{title.title}</div>
+    <div class="heading" use:heading={2} class:truncate={small} id="heading">{title.title}</div>
 
     <div class="info">
       <div class="imdb">

package/src/routes/elements/+page.svelte

@@ -16,7 +16,7 @@
   import RoundButton from '../components/RoundButton.svelte'
   import SkeletonText from '../components/SkeletonText.svelte'
   import Title from '../components/Title.svelte'
-  import TitlePopover from '../components/TitlePopover.svelte'
+  import InjectionPopover from '../components/InjectionPopover.svelte'
   import Tooltip from '../components/Tooltip.svelte'
   import ExploreRouter from '../components/Explore/ExploreRouter.svelte'
   import TitlesRail from '../components/Rails/TitlesRail.svelte'
@@ -69,10 +69,10 @@
   </div>
 
   <div>
-    <h3>TitlePopover.svelte</h3>
+    <h3>InjectionPopover.svelte</h3>
     <div class="item">
       <div style:height="500px"></div>
-      <TitlePopover {title} event={{} as MouseEvent} />
+      <InjectionPopover data={title} event={{} as MouseEvent} />
     </div>
   </div>
 </div>

package/src/tests/helpers.js

@@ -44,5 +44,6 @@ export function generateInjection(sentence, title) {
     playpilot_url: 'https://some-link.com/',
     key: 'some-key-' + Math.random().toString(),
     title_details,
+    type: 'title',
   }
 }

package/src/tests/lib/api/titles.test.js

@@ -67,20 +67,20 @@ describe('$lib/api/titles', () => {
       expect(api).toHaveBeenCalledWith('/titles/browse?api-token=some-token&region=be&language=en-US&include_count=false')
     })
 
-    it('Should not fetch and return empty results if region is not supported', async () => {
+    it('Should fetch for global region if user region is not supported', async () => {
       vi.mocked(isUserRegionSupported).mockResolvedValue(false)
 
       await fetchTitles()
 
-      expect(api).not.toHaveBeenCalled()
+      expect(api).toHaveBeenCalledWith(expect.stringContaining('region=gl'))
     })
 
-    it('Should fetch if region is unsupported but region was given as null', async () => {
+    it('Should fetch without region if region is unsupported but region was given as null', async () => {
       vi.mocked(isUserRegionSupported).mockResolvedValue(false)
 
       await fetchTitles({ region: null })
 
-      expect(api).toHaveBeenCalled()
+      expect(api).not.toHaveBeenCalledWith(expect.stringContaining('region=gl'))
     })
   })
 

package/src/tests/lib/injection.test.js

@@ -1,11 +1,12 @@
 import { fireEvent } from '@testing-library/svelte'
 import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
 
-import { injectLinksInDocument, clearLinkInjections, clearLinkInjection, isAvailableAsManualInjection, filterRemovedAndInactiveInjections, isEquivalentInjection, filterInvalidInTextInjections, filterInvalidAfterArticleInjections, isValidInjection, isValidPlaylinkType, removePlayPilotTitleLinks } from '$lib/injection'
+import { injectLinksInDocument, clearLinkInjections, clearLinkInjection, isAvailableAsManualInjection, filterRemovedAndInactiveInjections, isEquivalentInjection, filterInvalidInTextInjections, filterInvalidAfterArticleInjections, isValidInjection, isValidPlaylinkType, removePlayPilotTitleLinks, hasValidTypeData } from '$lib/injection'
 import { mount, unmount } from 'svelte'
 import { fakeFetch, generateInjection } from '../helpers'
 import { openModalForInjectedLink } from '$lib/modal'
 import { getLinkInjectionElements } from '$lib/injectionElements'
+import { participants } from '$lib/fakeData'
 import { titleUrl } from '$lib/routes'
 
 vi.mock('svelte', () => ({
@@ -572,7 +573,7 @@ describe('injection.ts', () => {
     })
 
     it('Should remove all popovers that may not have been removed properly in previous destroy attempts', async () => {
-      document.body.innerHTML = '<div data-playpilot-title-popover></div> <p>This is a sentence with an injection.</p>'
+      document.body.innerHTML = '<div data-playpilot-injection-popover></div> <p>This is a sentence with an injection.</p>'
 
       const elements = Array.from(document.body.querySelectorAll('p'))
       const injection = generateInjection('This is a sentence with an injection.', 'an injection')
@@ -587,7 +588,7 @@ describe('injection.ts', () => {
       await fireEvent.mouseMove(document.body)
       vi.advanceTimersByTime(200)
 
-      expect(document.querySelectorAll('[data-playpilot-title-popover]')).toHaveLength(0)
+      expect(document.querySelectorAll('[data-playpilot-injection-popover]')).toHaveLength(0)
     })
 
     it('Should inject links of the same phrase when multiple are present', () => {
@@ -951,6 +952,20 @@ describe('injection.ts', () => {
       expect(document.querySelector('a')?.closest('[data-playpilot-injection-key]')).toBeTruthy()
     })
 
+    describe('Participants', () => {
+      it('Should inject participants just as a title', () => {
+        document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
+
+        const elements = Array.from(document.body.querySelectorAll('p'))
+        const injection = { ...generateInjection('This is a sentence with an injection.', 'an injection'), type: 'participant', participant_details: participants[0] }
+
+        // @ts-ignore
+        injectLinksInDocument(elements, { aiInjections: [injection], manualInjections: [] })
+
+        expect(document.querySelector('[data-playpilot-injection-key]')).toBeTruthy()
+      })
+    })
+
     describe('config.open_tpi_links_in_explore', () => {
       beforeEach(() => {
         window.PlayPilotLinkInjections.config = {
@@ -1168,6 +1183,32 @@ describe('injection.ts', () => {
     })
   })
 
+  describe('hasValidTypeData', () => {
+    it('Should return true if injection has type title and has title_details', () => {
+      // @ts-ignore
+      expect(hasValidTypeData({ type: 'title', title_details: {} })).toBe(true)
+    })
+
+    it('Should return true if injection has type participant and has participant_details', () => {
+      // @ts-ignore
+      expect(hasValidTypeData({ type: 'participant', participant_details: {} })).toBe(true)
+    })
+
+    it('Should return false if injection has type title but has no title_details', () => {
+      // @ts-ignore
+      expect(hasValidTypeData({ type: 'title', title_details: null })).toBe(false)
+      // @ts-ignore
+      expect(hasValidTypeData({ type: 'title' })).toBe(false)
+    })
+
+    it('Should return false if injection has type participant but has no participant_details', () => {
+      // @ts-ignore
+      expect(hasValidTypeData({ type: 'participant', participant_details: null })).toBe(false)
+      // @ts-ignore
+      expect(hasValidTypeData({ type: 'participant' })).toBe(false)
+    })
+  })
+
   describe('removePlayPilotTitleLinks', () => {
     it('Should remove existing title links', () => {
       document.body.innerHTML = `

package/src/tests/lib/popover.test.js

@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach, vi } from 'vitest'
 import { linkInjections } from '$lib/fakeData'
 import { mount, unmount } from 'svelte'
 import { clearCurrentlyHoveredInjection, currentlyHoveredInjection, destroyLinkPopover, isPopoverActive, openPopoverForInjectedLink } from '$lib/popover'
-import TitlePopover from '../../routes/components/TitlePopover.svelte'
+import InjectionPopover from '../../routes/components/InjectionPopover.svelte'
 import { waitFor } from '@testing-library/svelte'
 
 vi.mock('svelte', () => ({
@@ -22,17 +22,17 @@ describe('popover.js', () => {
   describe('openPopoverForInjectedLink', () => {
     it('Should mount popover', async () => {
       // @ts-ignore
-      openPopoverForInjectedLink({ currentTarget: document.querySelector('a') }, linkInjections)
+      openPopoverForInjectedLink({ currentTarget: document.querySelector('a') }, linkInjections[0])
 
       await waitFor(() => {
-        expect(mount).toHaveBeenCalledWith(TitlePopover, expect.any(Object))
+        expect(mount).toHaveBeenCalledWith(InjectionPopover, expect.any(Object))
         expect(currentlyHoveredInjection).toBeTruthy()
       })
     })
 
     it('Should not mount popover if user is no longer hovering after delay', async () => {
       // @ts-ignore
-      openPopoverForInjectedLink({ currentTarget: document.querySelector('a') }, linkInjections)
+      openPopoverForInjectedLink({ currentTarget: document.querySelector('a') }, linkInjections[0])
 
       await new Promise(res => setTimeout(res, 50))
 
@@ -46,19 +46,19 @@ describe('popover.js', () => {
 
   describe('destroyLinkPopover', () => {
     it('Should not call unmount but still remove potential popover elements if no active popover is set', async () => {
-      document.body.innerHTML = '<div data-playpilot-title-popover></div> <div data-playpilot-title-popover></div>'
+      document.body.innerHTML = '<div data-playpilot-injection-popover></div> <div data-playpilot-injection-popover></div>'
 
       destroyLinkPopover()
 
       expect(unmount).not.toHaveBeenCalled()
-      expect(document.querySelectorAll('[data-playpilot-title-popover]')).toHaveLength(0)
+      expect(document.querySelectorAll('[data-playpilot-injection-popover]')).toHaveLength(0)
     })
   })
 
   describe('clearCurrentlyHoveredInjection', () => {
     it('Should clear currentlyHoveredInjection', async () => {
       // @ts-ignore
-      openPopoverForInjectedLink({ currentTarget: document.querySelector('a') }, linkInjections)
+      openPopoverForInjectedLink({ currentTarget: document.querySelector('a') }, linkInjections[0])
 
       await waitFor(() => expect(currentlyHoveredInjection).toBeTruthy())
 

package/src/tests/lib/tracking.test.js

@@ -233,6 +233,14 @@ describe('$lib/tracking', () => {
         }),
       )
     })
+
+    it('Should not track when a very large amount of events have already been fired', () => {
+      window.PlayPilotLinkInjections.tracked_events = new Array(600).fill(1)
+
+      track('Some event')
+
+      expect(global.fetch).not.toHaveBeenCalled()
+    })
   })
 
   describe('setTrackingSids', () => {

package/src/tests/routes/components/Editorial/EditorItem.test.js

@@ -6,6 +6,7 @@ import { injectLinksInDocument } from '$lib/injection'
 import { track } from '$lib/tracking'
 import { generateInjection } from '../../../helpers'
 import { removeImageUrlPrefix } from '$lib/image'
+import { linkInjections as fakeLinkInjections } from '$lib/fakeData'
 
 vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
@@ -200,4 +201,13 @@ describe('EditorItem.svelte', () => {
 
     expect(getByText('What would you like to report?')).toBeTruthy()
   })
+
+  it('Should render as participant when type is participant', () => {
+    const { container, queryByLabelText, getByText } = render(EditorItem, { linkInjection: fakeLinkInjections[4] })
+
+    expect(queryByLabelText('Expand')).not.toBeTruthy()
+    expect(getByText(fakeLinkInjections[4].participant_details?.name || '-')).toBeTruthy()
+    expect(container.querySelector('.poster')).not.toBeTruthy()
+    expect(container.querySelector('.placeholder-image')).toBeTruthy()
+  })
 })

package/src/tests/routes/components/Editorial/ManualInjection.test.js

@@ -99,6 +99,7 @@ describe('ManualInjection.svelte', () => {
       manual: true,
       phrase_before: 'Some',
       phrase_after: 'in a',
+      type: 'title',
     })
   })
 
@@ -141,6 +142,7 @@ describe('ManualInjection.svelte', () => {
       manual: true,
       phrase_before: '',
       phrase_after: '',
+      type: 'title',
     })
   })
 
@@ -183,6 +185,7 @@ describe('ManualInjection.svelte', () => {
       manual: true,
       phrase_before: expect.any(String),
       phrase_after: expect.any(String),
+      type: 'title',
     })
   })
 
@@ -225,6 +228,7 @@ describe('ManualInjection.svelte', () => {
       manual: true,
       phrase_before: expect.any(String),
       phrase_after: expect.any(String),
+      type: 'title',
     })
   })