@playpilot/tpi 8.42.0-beta.1 → 8.42.1

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

@@ -1,142 +1,158 @@
-import type { InsertPosition } from './position'
-
-export type ConfigResponse = {
-  /**
-   * Used to exclude URL matching a regex pattern. If a url matches, nothing is executed beyond fetching the config.
-   * The url should never be indexed.
-   */
-  exclude_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.
-   * For example:
-   * `--some-variable: some-value;`
-   *
-   * rather than:
-   * `body { --some-variable: some-value; }`
-   */
-  custom_style?: string
-
-  /**
-   * The primary selector for the entire article from which text will be selected. Should contain as little content as
-   * possible. Should match all pages. May contain multiple selectors like `.article, .listicle`.
-   */
-  html_selector?: string
-
-  /**
-   * Some pages contain elements that can't easily be excluded via the `html_selector`. These elements can instead be
-   * excluded via this property. May contain multiple selectors like `.footer, .ad`.
-   */
-  exclude_elements_selector?: string
-
-  /**
-   * Disable all injections from showing on pages without editorial mode enabled
-   */
-  disable_public_injections?: boolean
-
-  /**
-   * Region to fall back on if other methods of getting the region fail. This should be equal to the region most relevant
-   * to the partner. Should be lowercase.
-   */
-  fallback_region?: string
-
-  /**
-   * Disclaimer text that is shown above playlinks in title cards used to replace the default text
-   */
-  playlinks_disclaimer_text?: string
-
-  /**
-   * Some partners may want to display titles without affiliate links, which currently comes down to no playlinks.
-   * This can also be set via the config on the script itself.
-   */
-  no_affiliate?: boolean
-
-  /**
-   * Whether or not we can insert retargeting pixels. Not all third parties allow this and it is disabled by default
-   */
-  allow_retargeting_pixels?: boolean
-
-  /**
-   * By default affiliate links (playlinks) will render as links even without consent, as a disclaimer is given. Set to true to require explicit consent, rendering as static text without consent.
-   */
-  require_affiliate_consent?: boolean
-
-  /**
-   * Scroll reveal posters that show on mobile are enabled by default. Use this option to disable them.
-   */
-  disable_scroll_reveal_posters?: boolean
-
-  /**
-   * Playlinks are merged by default, when this option is enabled playlinks will instead be shown categorized.
-   */
-  categorize_playlinks?: boolean
-
-  /**
-   * By default no user identifiable data is tracked. This can be changed using this option. User ids are stored in localStorage and sent along with any tracking request.
-   */
-  allow_user_id_tracking?: boolean
-
-  /**
-   * The sid for the current domain, used for tracking
-   */
-  domain_sid?: string
-
-  /**
-   * The sid for the organization the domain belongs to, used for tracking. Can be empty.
-   */
-  organization_sid?: string
-
-  /**
-   * The following options are all relevant for in text disclaimers, which renders as a disclaimer text within the article,
-   * rather than only inside of title cards.
-   * Change the text content using `in_text_disclaimer_text`.
-   * Change where the element is inserted using `in_text_disclaimer_selector`, by default it will insert before the first text element.
-   * Change the insert position using `in_text_disclaimer_insert_position`, by default it will insert before the given selector.
-   */
-  in_text_disclaimer_enabled?: boolean
-  in_text_disclaimer_text?: string
-  in_text_disclaimer_selector?: string
-  in_text_disclaimer_insert_position?: InsertPosition
-
-  /**
-   * Open TPI links in explore rather than in modals in the article
-   */
-  open_tpi_links_in_explore?: boolean
-
-  /**
-   * Participants with a popularity score lower than this threshold will not be injected
-   */
-  participant_injection_popularity_threshold?: number
-
-  /**
-   * Whether or not to base the threshold on the article participants average popularity score.
-   * When enabled, this turns `participant_injection_popularity_threshold` into a percentage.
-   */
-  participant_injection_popularity_threshold_use_article_average?: boolean
-
-  /**
-   * Include a limit of how many times a single titles/participants may appear in one article.
-   */
-  unique_injection_count_limit?: number
-
-  /**
-   * No more than this count of participant links will show on the entire article.
-   */
-  total_participant_injection_count_limit?: number
-
-  /**
-   * These options are all relevant for the Explore component, which can be inserted as a widget on any page or as a modal.
-   * `explore_navigation_selector` is used to select the navigation element that should be copied and inserted _after_.
-   * `explore_navigation_label` will end up being the label of the navigation item, defaults to `Streaming Guide`.
-   * `explore_navigation_path` is the path that the navigation item will lead to, this will be set up by the third party.
-   * `explore_navigation_insert_position` is used to determine if the navigation item should be inserted before or after the given selector.
-   * `explore_insert_cta_in_tpi` is used to insert a call to action in modals which opens the explore page as a modal.
-   */
-  explore_navigation_selector?: string
-  explore_navigation_label?: string
-  explore_navigation_path?: string
-  explore_navigation_insert_position?: InsertPosition
-  explore_insert_cta_in_tpi?: boolean
-  explore_custom_style?: string
-}
+import type { LinkInjection } from './injection'
+import type { InsertPosition } from './position'
+
+export type ConfigResponse = {
+  /**
+   * Used to exclude URL matching a regex pattern. If a url matches, nothing is executed beyond fetching the config.
+   * The url should never be indexed.
+   */
+  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.
+   * For example:
+   * `--some-variable: some-value;`
+   *
+   * rather than:
+   * `body { --some-variable: some-value; }`
+   */
+  custom_style?: string
+
+  /**
+   * The primary selector for the entire article from which text will be selected. Should contain as little content as
+   * possible. Should match all pages. May contain multiple selectors like `.article, .listicle`.
+   */
+  html_selector?: string
+
+  /**
+   * Some pages contain elements that can't easily be excluded via the `html_selector`. These elements can instead be
+   * excluded via this property. May contain multiple selectors like `.footer, .ad`.
+   */
+  exclude_elements_selector?: string
+
+  /**
+   * Disable all injections from showing on pages without editorial mode enabled
+   */
+  disable_public_injections?: boolean
+
+  /**
+   * Region to fall back on if other methods of getting the region fail. This should be equal to the region most relevant
+   * to the partner. Should be lowercase.
+   */
+  fallback_region?: string
+
+  /**
+   * Disclaimer text that is shown above playlinks in title cards used to replace the default text
+   */
+  playlinks_disclaimer_text?: string
+
+  /**
+   * Some partners may want to display titles without affiliate links, which currently comes down to no playlinks.
+   * This can also be set via the config on the script itself.
+   */
+  no_affiliate?: boolean
+
+  /**
+   * Whether or not we can insert retargeting pixels. Not all third parties allow this and it is disabled by default
+   */
+  allow_retargeting_pixels?: boolean
+
+  /**
+   * By default affiliate links (playlinks) will render as links even without consent, as a disclaimer is given. Set to true to require explicit consent, rendering as static text without consent.
+   */
+  require_affiliate_consent?: boolean
+
+  /**
+   * Scroll reveal posters that show on mobile are enabled by default. Use this option to disable them.
+   */
+  disable_scroll_reveal_posters?: boolean
+
+  /**
+   * Playlinks are merged by default, when this option is enabled playlinks will instead be shown categorized.
+   */
+  categorize_playlinks?: boolean
+
+  /**
+   * By default no user identifiable data is tracked. This can be changed using this option. User ids are stored in localStorage and sent along with any tracking request.
+   */
+  allow_user_id_tracking?: boolean
+
+  /**
+   * The sid for the current domain, used for tracking
+   */
+  domain_sid?: string
+
+  /**
+   * The sid for the organization the domain belongs to, used for tracking. Can be empty.
+   */
+  organization_sid?: string
+
+  /**
+   * The following options are all relevant for in text disclaimers, which renders as a disclaimer text within the article,
+   * rather than only inside of title cards.
+   * Change the text content using `in_text_disclaimer_text`.
+   * Change where the element is inserted using `in_text_disclaimer_selector`, by default it will insert before the first text element.
+   * Change the insert position using `in_text_disclaimer_insert_position`, by default it will insert before the given selector.
+   */
+  in_text_disclaimer_enabled?: boolean
+  in_text_disclaimer_text?: string
+  in_text_disclaimer_selector?: string
+  in_text_disclaimer_insert_position?: InsertPosition
+
+  /**
+   * Open TPI links in explore rather than in modals in the article
+   */
+  open_tpi_links_in_explore?: boolean
+
+  /**
+   * Participants with a popularity score lower than this threshold will not be injected
+   */
+  participant_injection_popularity_threshold?: number
+
+  /**
+   * Whether or not to base the threshold on the article participants average popularity score.
+   * When enabled, this turns `participant_injection_popularity_threshold` into a percentage.
+   */
+  participant_injection_popularity_threshold_use_article_average?: boolean
+
+  /**
+   * Include a limit of how many times a single titles/participants may appear in one article.
+   */
+  unique_injection_count_limit?: number
+
+  /**
+   * No more than this count of participant links will show on the entire article.
+   */
+  total_participant_injection_count_limit?: number
+
+  /**
+   * Exclude any injections that use one of the given anchors
+   */
+  exclude_injections_by_anchors?: LinkInjection['anchor'][]
+
+  /**
+   * Exclude any injections that use one of the given evidence
+   */
+  exclude_injections_by_evidence?: LinkInjection['evidence'][]
+
+  /**
+   * These options are all relevant for the Explore component, which can be inserted as a widget on any page or as a modal.
+   * `explore_navigation_selector` is used to select the navigation element that should be copied and inserted _after_.
+   * `explore_navigation_label` will end up being the label of the navigation item, defaults to `Streaming Guide`.
+   * `explore_navigation_path` is the path that the navigation item will lead to, this will be set up by the third party.
+   * `explore_navigation_insert_position` is used to determine if the navigation item should be inserted before or after the given selector.
+   * `explore_insert_cta_in_tpi` is used to insert a call to action in modals which opens the explore page as a modal.
+   */
+  explore_navigation_selector?: string
+  explore_navigation_label?: string
+  explore_navigation_path?: string
+  explore_navigation_insert_position?: InsertPosition
+  explore_insert_cta_in_tpi?: boolean
+  explore_custom_style?: string
+}

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

@@ -1,59 +1,65 @@
-import type { ParticipantData } from './participant'
-import type { TitleData } from './title'
-
-export type LinkInjectionDataType = 'title' | 'participant'
-
-export type LinkInjection = {
-  sid: string
-  title: string
-  sentence: string
-  playpilot_url: string
-  key: string
-  title_details?: TitleData
-  participant_details?: ParticipantData
-  phrase_before?: string | null
-  phrase_after?: string | null
-  inactive?: boolean
-  failed?: boolean
-  failed_message?: string
-  in_text?: boolean
-  after_article?: boolean
-  after_article_style?: 'modal_button' | 'playlinks' | null
-  manual?: boolean
-  removed?: boolean
-  duplicate?: boolean
-  matchingElement?: null | Element
-  popularity?: number | null
-  type: LinkInjectionDataType
-}
-
-export type LinkInjectionRanges = Record<string, { elementIndex: number, from: number, to: number }>
-
-export type LinkInjectionResponse = {
-  injections_ready: boolean
-  ai_enabled: boolean
-  injections_enabled: boolean
-  ai_running: boolean
-  ai_injections: LinkInjection[] | null
-  ai_progress_message: string
-  ai_progress_percentage: number
-  ai_last_run: string | null
-  manual_injections: LinkInjection[] | null
-  organization_sid?: string
-  domain_sid?: string
-  session_id?: string | null
-  session_last_ping?: string | null
-  content_modified_time?: string | null
-  pixels?: string[]
-}
-
-export type LinkInjectionTypes = {
-  aiInjections: LinkInjection[]
-  manualInjections: LinkInjection[]
-}
-
-export type ArticleMetaData = {
-  content_heading: string | null
-  content_modified_time: string | null
-  content_published_time: string | null
-}
+import type { ParticipantData } from './participant'
+import type { TitleData } from './title'
+
+export type LinkInjectionDataType = 'title' | 'participant'
+
+export type LinkInjection = {
+  sid: string
+  title: string
+  sentence: string
+  playpilot_url: string
+  key: string
+  title_details?: TitleData
+  participant_details?: ParticipantData
+  phrase_before?: string | null
+  phrase_after?: string | null
+  inactive?: boolean
+  failed?: boolean
+  failed_message?: string
+  in_text?: boolean
+  after_article?: boolean
+  after_article_style?: 'modal_button' | 'playlinks' | null
+  manual?: boolean
+  removed?: boolean
+  duplicate?: boolean
+  matchingElement?: null | Element
+  popularity?: number | null
+  anchor?: 'full' | 'attached' | 'bare' | null
+  evidence?: 'credited' | 'screen_work' | 'title_mention' | 'name_only' | null
+  type: LinkInjectionDataType
+}
+
+export type LinkInjectionRanges = Record<string, {
+  elementIndex: number
+  from: number
+  to: number
+}>
+
+export type LinkInjectionResponse = {
+  injections_ready: boolean
+  ai_enabled: boolean
+  injections_enabled: boolean
+  ai_running: boolean
+  ai_injections: LinkInjection[] | null
+  ai_progress_message: string
+  ai_progress_percentage: number
+  ai_last_run: string | null
+  manual_injections: LinkInjection[] | null
+  organization_sid?: string
+  domain_sid?: string
+  session_id?: string | null
+  session_last_ping?: string | null
+  content_modified_time?: string | null
+  pixels?: string[]
+}
+
+export type LinkInjectionTypes = {
+  aiInjections: LinkInjection[]
+  manualInjections: LinkInjection[]
+}
+
+export type ArticleMetaData = {
+  content_heading: string | null
+  content_modified_time: string | null
+  content_published_time: string | null
+}

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

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