@playpilot/tpi 5.7.0-beta.display.1 → 5.7.0-beta.video-2

package/package.json

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

package/src/lib/ads.ts

@@ -9,45 +9,7 @@ export async function fetchAds() {
 
   if (!apiToken) throw new Error('No token was provided')
 
-  return [{
-    campaign_format: 'display',
-    campaign_type: 'video',
-    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',
-  }]
-
-  const response = await fetch(apiBaseUrl + `/ads/browse/?api-token=${apiToken}`, { headers })
+  const response = await fetch(apiBaseUrl + `/ads/browse/?region=nl&api-token=${apiToken}`, { headers })
 
   if (!response.ok) throw response
 
@@ -63,11 +25,12 @@ export function getFirstAdOfType(format: CampaignFormat): Campaign | null {
 export function campaignToPlaylink(campaign: Campaign): PlaylinkData {
   return {
     sid: '',
-    name: campaign.cta.header || '',
+    name: campaign.content.header || '',
     url: campaign.cta.url || '',
     logo_url: campaign.cta.image || '',
     highlighted: true,
-    cta_text: campaign.cta.header,
+    cta_text: campaign.content.subheader,
+    action_text: campaign.cta.header,
     extra_info: {
       category: 'SVOD'
     }

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

@@ -42,4 +42,4 @@ export type CampaignCTA = {
 
 export type CampaignPlatform = 'web' | 'android_app' | 'ios_app'
 
-export type CampaignFormat = 'takeover' | 'horizontal' | 'hero' | 'top_scroll' | 'display'
+export type CampaignFormat = 'takeover' | 'horizontal' | 'hero' | 'top_scroll' | 'card'

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

@@ -5,6 +5,8 @@ export type PlaylinkData = {
   logo_url: string
   highlighted?: boolean
   cta_text?: string | null
+  // This doesn't actually exists on the API objects, it's only present from ads
+  action_text?: string | null,
   extra_info: {
     category: PlaylinkCategory
   }

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { SplitTest } from '$lib/enums/SplitTest'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
-  import { trackSplitTestAction } from '$lib/splitTest'
+  import { trackSplitTestAction, trackSplitTestView } from '$lib/splitTest'
   import { track } from '$lib/tracking'
   import type { Campaign } from '$lib/types/campaign'
 
@@ -11,31 +11,50 @@
 
   const { campaign }: Props = $props()
 
+  const { disclaimer, content, cta } = $derived(campaign)
+  const { header, subheader, header_logo: logo, image } = $derived(content)
+  const { header: buttonLabel, url: href } = $derived(cta)
+
+  trackSplitTestView(SplitTest.DisplayAdPosition)
+
   function onclick(): void {
     track(TrackingEvent.DisplayAdClick, null, { campaign_name: campaign.campaign_name })
     trackSplitTestAction(SplitTest.DisplayAdPosition, 'click')
   }
 </script>
 
-<a href="/" target="_blank" class="display" rel="sponsored" {onclick}>
-  <div class="disclaimer">
-    Watch The Morningshow on Apple TV+ (Ad)
-  </div>
-
-  <div class="cta">
-    <img class="logo" src="https://picsum.photos/seed/a/40/40" alt="" height="40" width="40" />
-
-    <div>
-      <span class="name">Apple TV+</span>
-      <div class="subheader">Get Apple TV+ free for 1 week</div>
+<a {href} target="_blank" class="display" rel="sponsored" {onclick}>
+  {#if disclaimer}
+    <div class="disclaimer">
+      {disclaimer}
     </div>
-
-    <div class="action">
-      Get offer
+  {/if}
+
+  {#if logo || header || subheader || buttonLabel}
+    <div class="cta">
+      {#if logo}
+        <img class="logo" src={logo} alt="" height="40" width="40" />
+      {/if}
+
+      <div>
+        {#if header}
+          <span class="name">{header}</span>
+        {/if}
+
+        {#if subheader}
+          <div class="subheader">{subheader}</div>
+        {/if}
+      </div>
+
+      {#if buttonLabel}
+        <div class="action">{buttonLabel}</div>
+      {/if}
     </div>
-  </div>
+  {/if}
 
-  <img class="background" src="https://picsum.photos/seed/movie/800/450" alt="" />
+  {#if image}
+    <img class="background" src={image} alt="" />
+  {/if}
 </a>
 
 <style lang="scss">

package/src/routes/components/Modal.svelte

@@ -5,9 +5,8 @@
   import DragHandle from './DragHandle.svelte'
   import { onMount, setContext, type Snippet } from 'svelte'
   import { prefersReducedMotion } from 'svelte/motion'
-  import { isInSplitTestVariant, trackSplitTestView } from '$lib/splitTest'
+  import { isInSplitTestVariant } from '$lib/splitTest'
   import { SplitTest } from '$lib/enums/SplitTest'
-  import { getFirstAdOfType } from '$lib/ads'
 
   interface Props {
     children: Snippet
@@ -30,8 +29,6 @@
   $effect(() => { if (windowWidth) dialogOffset = dialogElement?.offsetTop || 0 })
   $effect(() => { setTimeout(() => dialogOffset = dialogElement?.offsetTop || 0) }) // Set after the dialog has shown to get the proper height
 
-  if (getFirstAdOfType('display')) trackSplitTestView(SplitTest.DisplayAdPosition)
-
   setContext('scope', 'modal')
 
   onMount(() => {
@@ -216,5 +213,11 @@
         margin-top: 0;
       }
     }
+
+    .prepend + & {
+      &:not(.inline) {
+        margin-top: 0;
+      }
+    }
   }
 </style>

package/src/routes/components/Playlink.svelte

@@ -11,7 +11,7 @@
 
   const { playlink, hideCategory = false, onclick = () => null }: Props = $props()
 
-  const { name, url, logo_url, highlighted, cta_text, extra_info: { category } } = $derived(playlink)
+  const { name, url, logo_url, highlighted, cta_text, action_text, extra_info: { category } } = $derived(playlink)
 
   const categoryStrings = {
     SVOD: t('Stream'),
@@ -36,7 +36,7 @@
     {/if}
 
     <div class="action">
-      {t('Watch')}
+      {action_text || t('Watch')}
     </div>
   </div>
 </a>
@@ -130,7 +130,7 @@
     z-index: 5;
     display: grid;
     grid-template-areas: "image name action" "image category action";
-    grid-template-columns: $image-size auto margin(4);
+    grid-template-columns: $image-size auto margin(6);
     align-items: center;
     gap: 0 margin(0.75);
     padding: margin(0.75);

package/src/routes/components/Playlinks.svelte

@@ -21,7 +21,7 @@
   const { playlinks, title }: Props = $props()
 
   const isModal = getContext('scope') === 'modal'
-  const displayAd = getFirstAdOfType('display')
+  const displayAd = getFirstAdOfType('card')
   const showDisplayAd = displayAd && isModal && isInSplitTestVariant(SplitTest.DisplayAdPosition, 0)
   const showPlaylinkAd = displayAd && isModal && isInSplitTestVariant(SplitTest.DisplayAdPosition, 1)
 

package/src/routes/components/TitleModal.svelte

@@ -19,7 +19,7 @@
   const { onclose, title }: Props = $props()
 
   const topScrollAd = getFirstAdOfType('top_scroll')
-  const displayAd = getFirstAdOfType('display')
+  const displayAd = getFirstAdOfType('card')
 
   const isInDisplayAdFormatSplitTest = isInSplitTestVariant(SplitTest.DisplayAdPosition, 1) || isInSplitTestVariant(SplitTest.DisplayAdPosition, 2)
 

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

@@ -56,4 +56,54 @@ describe('Display.svelte', () => {
 
     expect(track).toHaveBeenCalledWith(TrackingEvent.DisplayAdClick, null, { campaign_name: campaign.campaign_name })
   })
+
+  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 { getByText } = render(Display, { campaign: { disclaimer: 'Some disclaimer', cta: {}, content: {} } })
+
+    expect(getByText('Some disclaimer')).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: { 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()
+  })
 })

package/src/tests/routes/components/Playlink.test.js

@@ -85,4 +85,11 @@ describe('Playlink.svelte', () => {
     expect(getByText('Some playlink').closest('.playlink')?.classList).not.toContain('highlighted')
     expect(queryByText('Some CTA')).not.toBeTruthy()
   })
+
+  it('Should use action_text in button label when given', () => {
+    // @ts-ignore
+    const { getByText } = render(Playlink, { playlink: { name: 'Some highlighted playlink', action_text: 'Some action text', extra_info: { category: 'BUY' } } })
+
+    expect(getByText('Some action text')).toBeTruthy()
+  })
 })

package/src/tests/routes/components/TitleModal.test.js

@@ -66,7 +66,7 @@ describe('TitleModal.svelte', () => {
 
   it('Should render display ad when given', () => {
     // @ts-ignore
-    window.PlayPilotLinkInjections = { ads: [{ campaign_format: 'display', content: {}, cta: {} }] }
+    window.PlayPilotLinkInjections = { ads: [{ campaign_format: 'card', content: {}, cta: {} }] }
 
     const { container } = render(TitleModal, { onclose, title })