@playpilot/tpi 8.41.0-beta.1 → 8.41.0

package/package.json

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

package/src/lib/enums/SplitTest.ts

@@ -4,9 +4,4 @@ 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: 'https://placehold.co/50?text=content.header_logo',
+    header_logo: null,
     header_logo_uuid: null,
     subheader: 'Content subheader',
-    image: 'https://placehold.co/320x180/333/666?text=content.image',
+    image: null,
     image_uuid: null,
     video: null,
     format: null,

package/src/lib/injection.ts

@@ -10,6 +10,7 @@ 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}]`
@@ -29,6 +30,8 @@ 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)
@@ -37,9 +40,16 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
   for (const injection of sortInjections(limitedInjections)) {
     injectionIndex++
 
-    if (!injection.manual && injection.type === 'participant' && !doesParticipantMeetThreshold(mergedInjections, injection.participant_details!)) {
-      failedMessages[injection.key] = 'Participant does not meet popularity threshold.'
-      continue
+    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
+      }
     }
 
     const elementIndex = elements.findIndex(element => cleanPhrase(element.innerText).includes(cleanPhrase(injection.sentence)))

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

@@ -7,6 +7,11 @@ 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,3 +27,7 @@ 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,23 +6,18 @@
   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, slim = false }: Props = $props()
+  const { campaign, compact = 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)
 
@@ -39,8 +34,8 @@
   })
 </script>
 
-<a {href} target="_blank" class="display" class:compact class:slim class:tall rel="sponsored" {onclick} use:middlemouse={{ onclick }}>
-  {#if info && !slim}
+<a {href} target="_blank" class="display" class:compact rel="sponsored" {onclick} use:middlemouse={{ onclick }}>
+  {#if info}
     <div class="info">
       {#if compact}
         <Tooltip>
@@ -67,7 +62,7 @@
           <span class="name">{header}</span>
         {/if}
 
-        {#if subheader && !slim}
+        {#if subheader}
           <div class="subheader">{subheader}</div>
         {/if}
       </div>
@@ -95,8 +90,6 @@
 </a>
 
 <style lang="scss">
-  $background-color: rgb(110, 110, 110);
-
   .display {
     display: block;
     position: relative;
@@ -109,16 +102,6 @@
     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 {
@@ -148,7 +131,7 @@
     bottom: 0;
     left: 0;
     padding: margin(0.5);
-    background: linear-gradient(to right, $background-color, rgba(85, 85, 85, 0.3));
+    background: linear-gradient(to right, rgba(110, 110, 110, 1), rgba(85, 85, 85, 0.3));
     font-size: margin(0.875);
     text-decoration: none;
 
@@ -159,25 +142,10 @@
         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 {
@@ -208,26 +176,11 @@
     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/Modals/RailModal.svelte

@@ -9,8 +9,6 @@
   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>[]
@@ -29,8 +27,6 @@
   let element: HTMLElement | null = $state(null)
   let displayAd = $state(getFirstAdOfType('card'))
 
-  if (!!displayAd) trackSplitTestView(SplitTest.DisplayAdFormat)
-
   onMount(() => {
     setAvailableHeight()
 
@@ -64,9 +60,9 @@
 <svelte:window onresize={setAvailableHeight} onupdateads={() => displayAd = getFirstAdOfType('card')} />
 
 {#snippet prepend()}
-  {#if displayAd && getSplitTestVariantName(SplitTest.DisplayAdFormat) !== 'Inline'}
+  {#if displayAd}
     <div class="ad">
-      <Display campaign={displayAd} slim />
+      <Display campaign={displayAd} />
     </div>
   {/if}
 {/snippet}

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

@@ -1,7 +1,5 @@
 <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'
@@ -18,6 +16,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} useDisplayAdSplitTest={getSplitTestVariantName(SplitTest.DisplayAdFormat) === 'Inline'} />
+    <Title {title} useVideoBackground={title.sid === titles[currentIndex]?.sid} />
   {/snippet}
 </RailModal>

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

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

package/src/routes/components/Title.svelte

@@ -14,18 +14,14 @@
   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, useDisplayAdSplitTest = false }: Props = $props()
+  const { title, small = false, useVideoBackground = true }: Props = $props()
 
   const noAffiliate = !!window.PlayPilotLinkInjections?.no_affiliate
 
@@ -62,11 +58,7 @@
     {/if}
 
     {#if !noAffiliate}
-      <Playlinks playlinks={title.providers} {title}>
-        {#if useDisplayAdSplitTest && getFirstAdOfType('card')}
-          <Display campaign={getFirstAdOfType('card')!} />
-        {/if}
-      </Playlinks>
+      <Playlinks playlinks={title.providers} {title} />
     {/if}
 
     <ParticipantsRail {title} />

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

@@ -39,21 +39,10 @@
 
   // 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>
@@ -184,15 +173,7 @@
 <div class="group">
   <div>
     <h3>Ads/Display.svelte</h3>
-    <div class="item">
-      <Display {campaign} />
-
-      Compact (Used in popover)
-      <Display {campaign} compact />
-
-      Slim (Used in rail modals)
-      <Display {campaign} slim />
-    </div>
+    <div class="item"><Display {campaign} /></div>
   </div>
 
   <div>

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

@@ -1054,6 +1054,34 @@ describe('injection.ts', () => {
         expect(/** @type {HTMLElement} */ (document.querySelectorAll('[data-playpilot-injection-key]')[0]).dataset.playpilotInjectionType).toBe('participant')
         expect(/** @type {HTMLElement} */ (document.querySelectorAll('[data-playpilot-injection-key]')[1]).dataset.playpilotInjectionType).toBe('title')
       })
+
+      it('Should ignore participants with exclude_participants_url_pattern is true', () => {
+        window.PlayPilotLinkInjections.config = {
+          exclude_participants_urls_pattern: '/',
+        }
+
+        document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
+
+        const elements = Array.from(document.body.querySelectorAll('p'))
+
+        /** @type {import('$lib/types/injection').LinkInjection[]} */
+        const aiInjections = [
+          generateInjection('This is a sentence with an injection.', 'is a'),
+          { ...generateInjection('This is a sentence with an injection.', 'an injection'), type: 'participant', participant_details: participants[0] },
+        ]
+
+        /** @type {import('$lib/types/injection').LinkInjection[]} */
+        const manualInjections = [
+          { ...generateInjection('This is a sentence with an injection.', 'sentence with'), type: 'participant', manual: true, participant_details: participants[0] },
+        ]
+
+        // @ts-ignore
+        injectLinksInDocument(elements, { aiInjections, manualInjections })
+
+        expect(document.querySelectorAll('[data-playpilot-injection-key]')).toHaveLength(2)
+        expect(document.querySelectorAll('[data-playpilot-injection-key]')[0].getAttribute('data-playpilot-injection-key')).toBe(aiInjections[0].key)
+        expect(document.querySelectorAll('[data-playpilot-injection-key]')[1].getAttribute('data-playpilot-injection-key')).toBe(manualInjections[0].key)
+      })
     })
 
     describe('config.open_tpi_links_in_explore', () => {

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

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest'
-import { getFullUrlPath, getUrlParams, isUrlExcludedViaConfig, paramsToString } from '$lib/url'
+import { getFullUrlPath, getUrlParams, isUrlExcludedViaConfig, isParticipantsUrlExcludedViaConfig, paramsToString } from '$lib/url'
 
 describe('url.ts', () => {
   describe('getFullUrlPath', () => {
@@ -113,4 +113,27 @@ describe('url.ts', () => {
       expect(isUrlExcludedViaConfig({ exclude_urls_pattern: '/some-page(/.*)?$' })).toBe(true)
     })
   })
+
+  describe('isParticipantsUrlExcludedViaConfig', () => {
+    it('Should return false if no key is given in config object', () => {
+      expect(isParticipantsUrlExcludedViaConfig({})).toBe(false)
+    })
+
+    it('Should return false if no key is given but is empty', () => {
+      expect(isParticipantsUrlExcludedViaConfig({ exclude_participants_urls_pattern: '' })).toBe(false)
+    })
+
+    it('Should return false if pattern is given but does not match url', () => {
+      window.location.pathname = '/path'
+      expect(isParticipantsUrlExcludedViaConfig({ exclude_participants_urls_pattern: '/not-path' })).toBe(false)
+    })
+
+    it('Should return true if pattern is given and does matches url', () => {
+      window.location.pathname = '/path'
+      expect(isParticipantsUrlExcludedViaConfig({ exclude_participants_urls_pattern: '/path' })).toBe(true)
+
+      window.location.pathname = '/some-page/subpath'
+      expect(isParticipantsUrlExcludedViaConfig({ exclude_participants_urls_pattern: '/some-page(/.*)?$' })).toBe(true)
+    })
+  })
 })