@playpilot/tpi 8.41.0 → 8.42.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.41.0",
+	"version": "8.42.0-beta.1",
 	"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/lib/injection.ts

@@ -10,7 +10,6 @@ import { clearInTextWidgets, insertInTextWidgets } from './inTextWidgets'
 import { encodeHtmlEntities } from './html'
 import type { ParticipantData } from './types/participant'
 import { getConfigValue } from './api/config'
-import { isParticipantsUrlExcludedViaConfig } from './url'
 
 export const keyDataAttribute = 'data-playpilot-injection-key'
 export const keySelector = `[${keyDataAttribute}]`
@@ -30,8 +29,6 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
   // This is to filter out injections that can't be injected anyway.
   const fullText = cleanPhrase(elements.map(element => element.innerText).join(' '))
 
-  const excludeParticipantsByUrl = isParticipantsUrlExcludedViaConfig(window.PlayPilotLinkInjections.config || {})
-
   const validInjections = filterInvalidInTextInjections(mergedInjections)
   const foundInjections = validInjections.filter(i => fullText.includes(cleanPhrase(i.sentence)))
   const { injections: limitedInjections, failedMessages }  = limitInjectionsByCount(foundInjections)
@@ -40,16 +37,9 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
   for (const injection of sortInjections(limitedInjections)) {
     injectionIndex++
 
-    if (!injection.manual && injection.type === 'participant') {
-      if (excludeParticipantsByUrl) {
-        failedMessages[injection.key] = 'Participants are excluded from this URL.'
-        continue
-      }
-
-      if (!doesParticipantMeetThreshold(mergedInjections, injection.participant_details!)) {
-        failedMessages[injection.key] = 'Participant does not meet popularity threshold.'
-        continue
-      }
+    if (!injection.manual && injection.type === 'participant' && !doesParticipantMeetThreshold(mergedInjections, injection.participant_details!)) {
+      failedMessages[injection.key] = 'Participant does not meet popularity threshold.'
+      continue
     }
 
     const elementIndex = elements.findIndex(element => cleanPhrase(element.innerText).includes(cleanPhrase(injection.sentence)))

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

@@ -7,11 +7,6 @@ export type ConfigResponse = {
    */
   exclude_urls_pattern?: string
 
-  /**
-   * Similar to `exclude_urls_pattern` but limited to participant injections. Other injections will continue to function.
-   */
-  exclude_participants_urls_pattern?: string
-
   /**
    * Used to inject custom styling for the links, modal, and popover. All styling is done via CSS variables. The passed
    * string should not contain a selector.

package/src/lib/url.ts

@@ -27,7 +27,3 @@ export function paramsToString(params: Record<string, any>): string {
 export function isUrlExcludedViaConfig(config: ConfigResponse): boolean {
   return !!(config.exclude_urls_pattern && getFullUrlPath().match(new RegExp(config.exclude_urls_pattern)))
 }
-
-export function isParticipantsUrlExcludedViaConfig(config: ConfigResponse): boolean {
-  return !!(config.exclude_participants_urls_pattern && getFullUrlPath().match(new RegExp(config.exclude_participants_urls_pattern)))
-}

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/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()
 
@@ -52,17 +56,21 @@
       return
     }
 
-    const modal = document.querySelector('.modal')!
-    availableHeight = window.innerHeight - (element!.getBoundingClientRect().top + modal.scrollTop + parseInt(window.getComputedStyle(modal).paddingBottom))
+    availableHeight = 0
+
+    requestAnimationFrame(() => {
+      const modal = document.querySelector('.modal')!
+      availableHeight = window.innerHeight - (element!.getBoundingClientRect().top + modal.scrollTop + parseInt(window.getComputedStyle(modal).paddingBottom))
+    })
   }
 </script>
 
 <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>