@playpilot/tpi 8.40.1 → 8.41.0-beta.2

package/package.json

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

package/src/lib/enums/SplitTest.ts

@@ -4,4 +4,9 @@ export const SplitTest = {
     numberOfVariants: 2,
     variantNames: ['Separated', 'Inline'] as string[],
   },
+  DisplayAdFormat: {
+    key: 'display_ad_format',
+    numberOfVariants: 3,
+    variantNames: ['Default', 'Tall', 'Inline'] as string[],
+  },
 } as const

package/src/lib/fakeData.ts

@@ -172,10 +172,10 @@ export const campaign: Campaign = {
   campaign_region: 'nl',
   content: {
     header: 'Content header',
-    header_logo: null,
+    header_logo: 'https://placehold.co/50?text=content.header_logo',
     header_logo_uuid: null,
     subheader: 'Content subheader',
-    image: null,
+    image: 'https://placehold.co/320x180/333/666?text=content.image',
     image_uuid: null,
     video: null,
     format: null,

package/src/routes/components/Ads/Display.svelte

@@ -6,18 +6,23 @@
   import { onDestroy } from 'svelte'
   import Tooltip from '../Tooltip.svelte'
   import Disclaimer from './Disclaimer.svelte'
+  import { getSplitTestVariantName } from '$lib/splitTest'
+  import { SplitTest } from '$lib/enums/SplitTest'
 
   interface Props {
     campaign: Campaign
     compact?: boolean
+    slim?: boolean
   }
 
-  const { campaign, compact = false }: Props = $props()
+  const { campaign, compact = false, slim = false }: Props = $props()
 
   const { disclaimer, content, cta, campaign_type } = $derived(campaign)
   const { header, subheader, header_logo: logo, image, video } = $derived(content)
   const { header: buttonLabel, url: href, subheader: info } = $derived(cta)
 
+  const tall = slim && getSplitTestVariantName(SplitTest.DisplayAdFormat) === 'Tall'
+
   let contentHeight = $state(0)
   let videoElement: HTMLVideoElement | null = $state(null)
 
@@ -34,8 +39,8 @@
   })
 </script>
 
-<a {href} target="_blank" class="display" class:compact rel="sponsored" {onclick} use:middlemouse={{ onclick }}>
-  {#if info}
+<a {href} target="_blank" class="display" class:compact class:slim class:tall rel="sponsored" {onclick} use:middlemouse={{ onclick }}>
+  {#if info && !slim}
     <div class="info">
       {#if compact}
         <Tooltip>
@@ -62,7 +67,7 @@
           <span class="name">{header}</span>
         {/if}
 
-        {#if subheader}
+        {#if subheader && !slim}
           <div class="subheader">{subheader}</div>
         {/if}
       </div>
@@ -90,6 +95,8 @@
 </a>
 
 <style lang="scss">
+  $background-color: rgb(110, 110, 110);
+
   .display {
     display: block;
     position: relative;
@@ -102,6 +109,16 @@
     font-family: theme(detail-font-family, font-family);
     line-height: 1.2;
     font-style: normal !important;
+
+    &.slim {
+      aspect-ratio: unset;
+      height: margin(5.5);
+      background: $background-color;
+
+      &.tall {
+        height: margin(8);
+      }
+    }
   }
 
   .info {
@@ -131,7 +148,7 @@
     bottom: 0;
     left: 0;
     padding: margin(0.5);
-    background: linear-gradient(to right, rgba(110, 110, 110, 1), rgba(85, 85, 85, 0.3));
+    background: linear-gradient(to right, $background-color, rgba(85, 85, 85, 0.3));
     font-size: margin(0.875);
     text-decoration: none;
 
@@ -142,10 +159,25 @@
         padding: margin(0.75);
       }
     }
+
+    .slim & {
+      background: transparent;
+      padding-left: margin(10.5);
+      height: 100%;
+      font-size: theme(font-size-small);
+    }
   }
 
   .logo {
     border-radius: theme(display-ad-border-radius, border-radius);
+
+    .slim & {
+      position: absolute;
+      width: margin(1.5);
+      height: margin(1.5);
+      bottom: margin(0.5);
+      left: margin(0.5);
+    }
   }
 
   .name {
@@ -176,11 +208,26 @@
     display: block;
     width: 100%;
     height: auto;
+
+    .slim & {
+      width: auto;
+      height: 100%;
+      aspect-ratio: 16 / 9;
+      background: black;
+    }
+
+    .tall & {
+      mask-image: linear-gradient(to right, white 50%, transparent);
+    }
   }
 
   .disclaimer {
     position: absolute;
     bottom: calc(var(--offset) + margin(0.25));
     right: margin(0.25);
+
+    .slim & {
+      bottom: margin(0.25);
+    }
   }
 </style>

package/src/routes/components/Debugger.svelte

@@ -76,6 +76,8 @@
       campaign_name: 'some_campaign',
       // @ts-ignore
       content: {
+        header_logo: 'https://placehold.co/50?text=content.header_logo',
+        image: 'https://placehold.co/320x180/333/666?text=content.image',
         header: 'Content header',
         subheader: 'Content subheader',
       },

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

@@ -153,14 +153,6 @@
     }
   }
 
-  .description {
-    max-width: theme(explore-header-max-width, 600px);
-    margin: 0;
-    color: theme(text-color-alt);
-    font-size: theme(font-size-base);
-    line-height: 1.35;
-  }
-
   .filter {
     display: flex;
     flex-direction: column;

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

@@ -9,6 +9,8 @@
   import IconArrow from '../Icons/IconArrow.svelte'
   import ModalCloseOverlay from './ModalCloseOverlay.svelte'
   import Display from '../Ads/Display.svelte'
+  import { SplitTest } from '$lib/enums/SplitTest'
+  import { getSplitTestVariantName, trackSplitTestView } from '$lib/splitTest'
 
   interface Props {
     items: Record<string, any>[]
@@ -27,6 +29,8 @@
   let element: HTMLElement | null = $state(null)
   let displayAd = $state(getFirstAdOfType('card'))
 
+  if (!!displayAd) trackSplitTestView(SplitTest.DisplayAdFormat)
+
   onMount(() => {
     setAvailableHeight()
 
@@ -60,9 +64,9 @@
 <svelte:window onresize={setAvailableHeight} onupdateads={() => displayAd = getFirstAdOfType('card')} />
 
 {#snippet prepend()}
-  {#if displayAd}
+  {#if displayAd && getSplitTestVariantName(SplitTest.DisplayAdFormat) !== 'Inline'}
     <div class="ad">
-      <Display campaign={displayAd} />
+      <Display campaign={displayAd} slim />
     </div>
   {/if}
 {/snippet}

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

@@ -1,5 +1,7 @@
 <script lang="ts">
+  import { SplitTest } from '$lib/enums/SplitTest'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
+  import { getSplitTestVariantName } from '$lib/splitTest'
   import { track } from '$lib/tracking'
   import type { TitleData } from '$lib/types/title'
   import Title from '../Title.svelte'
@@ -16,6 +18,6 @@
 
 <RailModal items={titles} {initialIndex} {onclose} onchange={(index) => track(TrackingEvent.ExploreTitleRailSetIndex, titles[index], { index })} {...restProps}>
   {#snippet each(title, currentIndex)}
-    <Title {title} useVideoBackground={title.sid === titles[currentIndex]?.sid} />
+    <Title {title} useVideoBackground={title.sid === titles[currentIndex]?.sid} useDisplayAdSplitTest={getSplitTestVariantName(SplitTest.DisplayAdFormat) === 'Inline'} />
   {/snippet}
 </RailModal>

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

@@ -7,11 +7,14 @@
   import type { TitleData } from '$lib/types/title'
   import { heading } from '$lib/actions/heading'
   import { campaignToPlaylink, getFirstAdOfType } from '$lib/api/ads'
-  import { getContext } from 'svelte'
+  import { getContext, type Snippet } from 'svelte'
   import Playlink from './Playlink.svelte'
   import Button from '../Button.svelte'
   import PlaylinksDisclaimer from './PlaylinksDisclaimer.svelte'
   import { getConfigValue } from '$lib/api/config'
+  import { getSplitTestVariantName } from '$lib/splitTest'
+  import { SplitTest } from '$lib/enums/SplitTest'
+  import Display from '../Ads/Display.svelte'
 
   type Category = PlaylinkCategory | '' | 'Other'
   type CategorizedPlaylinks = Partial<Record<Category, PlaylinkData[]>>
@@ -21,9 +24,10 @@
     playlinks: PlaylinkData[]
     title: TitleData
     limit?: number
+    children?: Snippet
   }
 
-  const { playlinks, title, limit = 3 }: Props = $props()
+  const { playlinks, title, limit = 3, children }: Props = $props()
 
   const isModal = getContext('scope') === 'modal'
   const type = getContext('type')
@@ -94,7 +98,11 @@
 
       <!-- A fake highlighted playlink as part of the display ad, to be shown after the first playlink -->
       {#if displayAd && (index === 0)}
-        <Playlink playlink={campaignToPlaylink(displayAd)} onclick={() => track(TrackingEvent.DisplayedAdPlaylickClick, title, { campaign_name: displayAd.campaign_name })} hideCategory disclaimer={displayAd.disclaimer || ''} />
+        {#if children}
+          {@render children()}
+        {:else}
+          <Playlink playlink={campaignToPlaylink(displayAd)} onclick={() => track(TrackingEvent.DisplayedAdPlaylickClick, title, { campaign_name: displayAd.campaign_name })} hideCategory disclaimer={displayAd.disclaimer || ''} />
+        {/if}
       {/if}
     {/each}
   </div>

package/src/routes/components/Title.svelte

@@ -14,14 +14,18 @@
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import TitleBackground from './TitleBackground.svelte'
   import TitleInfo from './TitleInfo.svelte'
+  import Display from './Ads/Display.svelte'
+  import type { Campaign } from '$lib/types/campaign'
+  import { getFirstAdOfType } from '$lib/api/ads'
 
   interface Props {
     title: TitleData
     small?: boolean
     useVideoBackground?: boolean
+    useDisplayAdSplitTest?: boolean // NOTE: Temporary split test, remove me after the DisplayAdFormat split test is gone
   }
 
-  const { title, small = false, useVideoBackground = true }: Props = $props()
+  const { title, small = false, useVideoBackground = true, useDisplayAdSplitTest = false }: Props = $props()
 
   const noAffiliate = !!window.PlayPilotLinkInjections?.no_affiliate
 
@@ -58,7 +62,11 @@
     {/if}
 
     {#if !noAffiliate}
-      <Playlinks playlinks={title.providers} {title} />
+      <Playlinks playlinks={title.providers} {title}>
+        {#if useDisplayAdSplitTest && getFirstAdOfType('card')}
+          <Display campaign={getFirstAdOfType('card')!} />
+        {/if}
+      </Playlinks>
     {/if}
 
     <ParticipantsRail {title} />

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

@@ -39,10 +39,21 @@
 
   // Used to re-render some elements with a key
   let renderKey = Math.random()
+
+  function insertMockAd(): void {
+    // @ts-ignore
+    window.PlayPilotLinkInjections.consents = {
+      ads: true
+    }
+
+    window.PlayPilotLinkInjections.ads = [campaign]
+  }
 </script>
 
 <h1>Elements</h1>
 
+<button onclick={insertMockAd}>Insert mock ad</button>
+
 <p>This page lays out various elements used in TPI. It does not currently include editor elements.</p>
 
 <h2>Youtube Embed</h2>
@@ -173,7 +184,15 @@
 <div class="group">
   <div>
     <h3>Ads/Display.svelte</h3>
-    <div class="item"><Display {campaign} /></div>
+    <div class="item">
+      <Display {campaign} />
+
+      Compact (Used in popover)
+      <Display {campaign} compact />
+
+      Slim (Used in rail modals)
+      <Display {campaign} slim />
+    </div>
   </div>
 
   <div>

package/src/tests/routes/components/Ads/Display.test.js

@@ -1,156 +1,166 @@
-import { fireEvent, render } from '@testing-library/svelte'
-import { describe, expect, it, vi } from 'vitest'
-
-import Display from '../../../../routes/components/Ads/Display.svelte'
-import { track } from '$lib/tracking'
-import { TrackingEvent } from '$lib/enums/TrackingEvent'
-
-vi.mock('$lib/tracking', () => ({
-  track: vi.fn(),
-}))
-
-export const campaign = {
-  campaign_format: 'display',
-  campaign_type: 'image',
-  campaign_platforms: ['web', 'android_app', 'ios_app'],
-  campaign_name: 'some_campaign_NL',
-  campaign_start: '2025-04-24T00:00:00Z',
-  campaign_end: '2025-04-30T23:59:00Z',
-  campaign_region: 'nl',
-  content: {
-    header: 'Some top scroll header',
-    header_logo: 'https://example.com/',
-    header_logo_uuid: '4fb7d6ea152111f08dd20a58a9feac02',
-    subheader: null,
-    image: 'https://example.com/',
-    image_uuid: '4fb7d6ea152111f08dd20a58a9feac02',
-    video: null,
-    format: null,
-  },
-  cta: {
-    header: 'Button Label',
-    subheader: null,
-    image: null,
-    image_uuid: null,
-    url: 'https://google.com/',
-  },
-  content_playlist: null,
-  provider: null,
-  impression_trackers: [],
-  target_title_uuid: null,
-  target_title_sid: null,
-  backfill_providers: [],
-  autogenerated: false,
-  enabled: true,
-  hide_imdb_score: false,
-  hide_sponsored_message: false,
-  disclaimer: 'Some disclaimer',
-}
-
-describe('Display.svelte', () => {
-  it('Should fire track event on mount', () => {
-    /** @ts-ignore */
-    render(Display, { campaign })
-
-    expect(track).toHaveBeenCalledWith(TrackingEvent.DisplayAdView, null, { campaign_name: campaign.campaign_name })
-  })
-
-  it('Should fire track event on click', async () => {
-    /** @ts-ignore */
-    const { getByRole } = render(Display, { campaign })
-
-    vi.resetAllMocks()
-
-    await fireEvent.click(getByRole('link'))
-    expect(track).toHaveBeenCalledWith(TrackingEvent.DisplayAdClick, null, { campaign_name: campaign.campaign_name })
-    expect(track).toHaveBeenCalledTimes(1)
-
-    await fireEvent.mouseUp(getByRole('link'), { button: 1 })
-    expect(track).toHaveBeenCalledTimes(2)
-  })
-
-  it('Should render link without any content by default', () => {
-    /** @ts-ignore */
-    const { container } = render(Display, { campaign: { cta: {}, content: {} } })
-
-    expect(/** @type {HTMLAnchorElement} */ (container.querySelector('a'))).toBeTruthy()
-    expect(/** @type {HTMLAnchorElement} */ (container.querySelector('a')).children).toHaveLength(0)
-  })
-
-  it('Should render disclaimer when given', () => {
-    /** @ts-ignore */
-    const { getByTestId } = render(Display, { campaign: { disclaimer: 'Some disclaimer', cta: {}, content: {} } })
-
-    expect(getByTestId('disclaimer')).toBeTruthy()
-  })
-
-  it('Should render content subheader when given', () => {
-    /** @ts-ignore */
-    const { getByText } = render(Display, { campaign: { cta: { subheader: 'Some cta subheader' }, content: { } } })
-
-    expect(getByText('Some cta subheader')).toBeTruthy()
-  })
-
-  it('Should render logo when given', () => {
-    /** @ts-ignore */
-    const { getByRole } = render(Display, { campaign: { cta: {}, content: { header_logo: 'test' } } })
-
-    expect(getByRole('presentation').getAttribute('src')).toBe('test')
-  })
-
-  it('Should render background image when given', () => {
-    /** @ts-ignore */
-    const { getByRole } = render(Display, { campaign: { campaign_type: 'image', cta: {}, content: { image: 'test' } } })
-
-    expect(getByRole('presentation').getAttribute('src')).toBe('test')
-  })
-
-  it('Should render header when given', () => {
-    /** @ts-ignore */
-    const { getByText } = render(Display, { campaign: { cta: {}, content: { header: 'Some header' } } })
-
-    expect(getByText('Some header')).toBeTruthy()
-  })
-
-  it('Should render subheader when given', () => {
-    /** @ts-ignore */
-    const { getByText } = render(Display, { campaign: { cta: {}, content: { header: 'Some subheader' } } })
-
-    expect(getByText('Some subheader')).toBeTruthy()
-  })
-
-  it('Should render button when cta header is given', () => {
-    /** @ts-ignore */
-    const { getByText } = render(Display, { campaign: { cta: { header: 'Some button label' }, content: {} } })
-
-    expect(getByText('Some button label')).toBeTruthy()
-  })
-
-  it('Should not have compact class by default', () => {
-    /** @ts-ignore */
-    const { getByRole } = render(Display, { campaign })
-
-    expect(getByRole('link').classList).not.toContain('compact')
-  })
-
-  it('Should have compact class when prop is given', () => {
-    /** @ts-ignore */
-    const { getByRole } = render(Display, { campaign, compact: true })
-
-    expect(getByRole('link').classList).toContain('compact')
-  })
-
-  it('Should not show disclaimer text when compact', () => {
-    /** @ts-ignore */
-    const { queryByText } = render(Display, { compact: true, campaign: { disclaimer: 'Some disclaimer', cta: {}, content: {} } })
-
-    expect(queryByText('Some disclaimer')).not.toBeTruthy()
-  })
-
-  it('Should render video rather than image when video is given as type', () => {
-    /** @ts-ignore */
-    const { container } = render(Display, { campaign: { campaign_type: 'video', cta: {}, content: { video: 'abc' } } })
-
-    expect(container.querySelector('video')).toBeTruthy()
-  })
-})
+import { fireEvent, render } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import Display from '../../../../routes/components/Ads/Display.svelte'
+import { track } from '$lib/tracking'
+import { TrackingEvent } from '$lib/enums/TrackingEvent'
+
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+export const campaign = {
+  campaign_format: 'display',
+  campaign_type: 'image',
+  campaign_platforms: ['web', 'android_app', 'ios_app'],
+  campaign_name: 'some_campaign_NL',
+  campaign_start: '2025-04-24T00:00:00Z',
+  campaign_end: '2025-04-30T23:59:00Z',
+  campaign_region: 'nl',
+  content: {
+    header: 'Some top scroll header',
+    header_logo: 'https://example.com/',
+    header_logo_uuid: '4fb7d6ea152111f08dd20a58a9feac02',
+    subheader: null,
+    image: 'https://example.com/',
+    image_uuid: '4fb7d6ea152111f08dd20a58a9feac02',
+    video: null,
+    format: null,
+  },
+  cta: {
+    header: 'Button Label',
+    subheader: null,
+    image: null,
+    image_uuid: null,
+    url: 'https://google.com/',
+  },
+  content_playlist: null,
+  provider: null,
+  impression_trackers: [],
+  target_title_uuid: null,
+  target_title_sid: null,
+  backfill_providers: [],
+  autogenerated: false,
+  enabled: true,
+  hide_imdb_score: false,
+  hide_sponsored_message: false,
+  disclaimer: 'Some disclaimer',
+}
+
+describe('Display.svelte', () => {
+  it('Should fire track event on mount', () => {
+    /** @ts-ignore */
+    render(Display, { campaign })
+
+    expect(track).toHaveBeenCalledWith(TrackingEvent.DisplayAdView, null, { campaign_name: campaign.campaign_name })
+  })
+
+  it('Should fire track event on click', async () => {
+    /** @ts-ignore */
+    const { getByRole } = render(Display, { campaign })
+
+    vi.resetAllMocks()
+
+    await fireEvent.click(getByRole('link'))
+    expect(track).toHaveBeenCalledWith(TrackingEvent.DisplayAdClick, null, { campaign_name: campaign.campaign_name })
+    expect(track).toHaveBeenCalledTimes(1)
+
+    await fireEvent.mouseUp(getByRole('link'), { button: 1 })
+    expect(track).toHaveBeenCalledTimes(2)
+  })
+
+  it('Should render link without any content by default', () => {
+    /** @ts-ignore */
+    const { container } = render(Display, { campaign: { cta: {}, content: {} } })
+
+    expect(/** @type {HTMLAnchorElement} */ (container.querySelector('a'))).toBeTruthy()
+    expect(/** @type {HTMLAnchorElement} */ (container.querySelector('a')).children).toHaveLength(0)
+  })
+
+  it('Should render disclaimer when given', () => {
+    /** @ts-ignore */
+    const { getByTestId } = render(Display, { campaign: { disclaimer: 'Some disclaimer', cta: {}, content: {} } })
+
+    expect(getByTestId('disclaimer')).toBeTruthy()
+  })
+
+  it('Should render content subheader when given', () => {
+    /** @ts-ignore */
+    const { getByText } = render(Display, { campaign: { cta: { subheader: 'Some cta subheader' }, content: {} } })
+
+    expect(getByText('Some cta subheader')).toBeTruthy()
+  })
+
+  it('Should render logo when given', () => {
+    /** @ts-ignore */
+    const { getByRole } = render(Display, { campaign: { cta: {}, content: { header_logo: 'test' } } })
+
+    expect(getByRole('presentation').getAttribute('src')).toBe('test')
+  })
+
+  it('Should render background image when given', () => {
+    /** @ts-ignore */
+    const { getByRole } = render(Display, { campaign: { campaign_type: 'image', cta: {}, content: { image: 'test' } } })
+
+    expect(getByRole('presentation').getAttribute('src')).toBe('test')
+  })
+
+  it('Should render header when given', () => {
+    /** @ts-ignore */
+    const { getByText } = render(Display, { campaign: { cta: {}, content: { header: 'Some header' } } })
+
+    expect(getByText('Some header')).toBeTruthy()
+  })
+
+  it('Should render subheader when given', () => {
+    /** @ts-ignore */
+    const { getByText } = render(Display, { campaign: { cta: {}, content: { header: 'Some subheader' } } })
+
+    expect(getByText('Some subheader')).toBeTruthy()
+  })
+
+  it('Should render button when cta header is given', () => {
+    /** @ts-ignore */
+    const { getByText } = render(Display, { campaign: { cta: { header: 'Some button label' }, content: {} } })
+
+    expect(getByText('Some button label')).toBeTruthy()
+  })
+
+  it('Should not have compact class by default', () => {
+    /** @ts-ignore */
+    const { getByRole } = render(Display, { campaign })
+
+    expect(getByRole('link').classList).not.toContain('compact')
+  })
+
+  it('Should have compact class when prop is given', () => {
+    /** @ts-ignore */
+    const { getByRole } = render(Display, { campaign, compact: true })
+
+    expect(getByRole('link').classList).toContain('compact')
+  })
+
+  it('Should not show disclaimer text when compact', () => {
+    /** @ts-ignore */
+    const { queryByText } = render(Display, { compact: true, campaign: { disclaimer: 'Some disclaimer', cta: {}, content: {} } })
+
+    expect(queryByText('Some disclaimer')).not.toBeTruthy()
+  })
+
+  it('Should render video rather than image when video is given as type', () => {
+    /** @ts-ignore */
+    const { container } = render(Display, { campaign: { campaign_type: 'video', cta: {}, content: { video: 'abc' } } })
+
+    expect(container.querySelector('video')).toBeTruthy()
+  })
+
+  it('Should render with expected content when slim variant is given', () => {
+    /** @ts-ignore */
+    const { container, queryByText } = render(Display, { slim: true, campaign: { campaign_type: 'video', cta: { header: 'Some header', subheader: 'Some cta subheader' }, content: { header_logo: 'dfg', video: 'abc' } } })
+
+    expect(container.querySelector('.slim')).toBeTruthy()
+    expect(container.querySelector('.logo')).toBeTruthy()
+    expect(queryByText('Some header')).toBeTruthy()
+    expect(queryByText('Some cta header')).not.toBeTruthy()
+  })
+})