@playpilot/tpi 8.40.0-beta.4 → 8.40.0

package/package.json

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

package/src/lib/api/config.ts

@@ -14,3 +14,7 @@ export async function fetchConfig(): Promise<ConfigResponse | null> {
     return null
   }
 }
+
+export function getConfigValue<K extends keyof ConfigResponse>(key: K): ConfigResponse[K] | undefined {
+  return window.PlayPilotLinkInjections?.config?.[key]
+}

package/src/lib/api/region.ts

@@ -2,6 +2,7 @@ import { SupportedRegion } from '$lib/enums/Region'
 import { TrackingEvent } from '$lib/enums/TrackingEvent'
 import { track } from '$lib/tracking'
 import { RETARGETING_REGION_KEY } from '@playpilot/retargeting-tracking'
+import { getConfigValue } from './config'
 
 export async function getRegionBasedOnIp(timeout = 5000): Promise<string> {
   const savedRegion = window.PlayPilotLinkInjections?.region
@@ -23,7 +24,7 @@ export async function getRegionBasedOnIp(timeout = 5000): Promise<string> {
   } catch (error: any) {
     track(TrackingEvent.RegionRequestFailed, null, { message: error.message })
 
-    const fallbackRegion = window.PlayPilotLinkInjections?.config?.fallback_region
+    const fallbackRegion = getConfigValue('fallback_region')
     return fallbackRegion || ''
   }
 }

package/src/lib/disclaimer.ts

@@ -1,16 +1,17 @@
 import { mount, unmount } from 'svelte'
 import InTextDisclaimer from '../routes/components/InTextDisclaimer.svelte'
+import { getConfigValue } from './api/config'
 
 export let inTextDisclaimerInsertComponent: object | null = null
 
 export function insertInTextDisclaimer(elements: HTMLElement[]): void {
-  if (!window.PlayPilotLinkInjections?.config?.in_text_disclaimer_enabled) return
+  if (!getConfigValue('in_text_disclaimer_enabled')) return
   if (inTextDisclaimerInsertComponent) return
 
   const target = document.createElement('div')
-  const selector = window.PlayPilotLinkInjections?.config?.in_text_disclaimer_selector
+  const selector = getConfigValue('in_text_disclaimer_selector')
   const insertElement = (selector ? document.querySelector(selector) : null) || elements[0]
-  const insertPosition = window.PlayPilotLinkInjections?.config?.in_text_disclaimer_insert_position || 'beforebegin'
+  const insertPosition = getConfigValue('in_text_disclaimer_insert_position') || 'beforebegin'
 
   target.dataset.playpilotInTextDisclaimer = 'true'
   insertElement.insertAdjacentElement(insertPosition, target)

package/src/lib/explore.ts

@@ -1,5 +1,6 @@
 import { mount, unmount } from 'svelte'
 import ExploreRouter from '../routes/components/Explore/ExploreRouter.svelte'
+import { getConfigValue } from './api/config'
 
 export const exploreParentSelector = '[data-playpilot-explore]'
 export const explorePreConsentSelector = '[data-playpilot-pre-consent-explore]'
@@ -68,7 +69,7 @@ export function insertExploreIntoNavigation(): boolean {
 }
 
 function insertExploreCustomStyle(): void {
-  const customStyleString = window.PlayPilotLinkInjections.config?.explore_custom_style
+  const customStyleString = getConfigValue('explore_custom_style')
 
   if (!customStyleString) return
 
@@ -81,5 +82,5 @@ function insertExploreCustomStyle(): void {
 }
 
 export function useExploreRouter(): boolean {
-  return !!window.PlayPilotLinkInjections?.config?.explore_use_router
+  return !!getConfigValue('explore_use_router')
 }

package/src/lib/injection.ts

@@ -9,6 +9,7 @@ import { exploreModalUrl, participantUrl, titleUrl } from './routes'
 import { clearInTextWidgets, insertInTextWidgets } from './inTextWidgets'
 import { encodeHtmlEntities } from './html'
 import type { ParticipantData } from './types/participant'
+import { getConfigValue } from './api/config'
 
 export const keyDataAttribute = 'data-playpilot-injection-key'
 export const keySelector = `[${keyDataAttribute}]`
@@ -30,39 +31,15 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
 
   const validInjections = filterInvalidInTextInjections(mergedInjections)
   const foundInjections = validInjections.filter(i => fullText.includes(cleanPhrase(i.sentence)))
-
-  const failedMessages: Record<string, string> = {}
-  const aiInjectionSidsCount: Record<string, number> = {}
-  let aiParticipantInjectionsCount = 0
+  const { injections: limitedInjections, failedMessages }  = limitInjectionsByCount(foundInjections)
 
   let injectionIndex = -1 // This index is used in Option 3 below.
-  for (const injection of sortInjections(foundInjections)) {
+  for (const injection of sortInjections(limitedInjections)) {
     injectionIndex++
 
-    if (!injection.manual) {
-      const previousCount = aiInjectionSidsCount[injection.sid] || 0
-
-      const exceedsUniqueCount =
-        window.PlayPilotLinkInjections?.config?.unique_injection_count_limit &&
-        previousCount >= window.PlayPilotLinkInjections?.config?.unique_injection_count_limit
-
-      const exceedsTotalParticipantsCount =
-        injection.type === 'participant' &&
-        window.PlayPilotLinkInjections?.config?.total_participant_injection_count_limit &&
-        aiParticipantInjectionsCount >= window.PlayPilotLinkInjections?.config?.total_participant_injection_count_limit
-
-      if (exceedsUniqueCount || exceedsTotalParticipantsCount) {
-        failedMessages[injection.key] = 'Injection was withheld because it exceeded the maximum unique count.'
-        continue
-      } else {
-        aiInjectionSidsCount[injection.sid] = previousCount + 1
-        if (injection.type === 'participant') aiParticipantInjectionsCount++
-      }
-
-      if (injection.type === 'participant' && !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)))
@@ -243,7 +220,7 @@ function createLinkInjectionElement(injection: LinkInjection): { injectionElemen
   injectionElement.dataset.playpilotInjectionKey = injection.key
   injectionElement.dataset.playpilotInjectionType = injection.type
 
-  const openInExplore = !!window.PlayPilotLinkInjections?.config?.open_tpi_links_in_explore
+  const openInExplore = !!getConfigValue('open_tpi_links_in_explore')
 
   const sid = injection.title_details?.sid || injection.participant_details?.sid
   const href = openInExplore ? exploreModalUrl(sid!) : (injection.type === 'title' ? titleUrl(injection.title_details!) : participantUrl(injection.participant_details!))
@@ -360,7 +337,7 @@ function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
   window.addEventListener('mousemove', destroyLinkPopoverOnMouseleave)
 
   window.addEventListener('click', (event) => {
-    if (window.PlayPilotLinkInjections?.config?.open_tpi_links_in_explore) return
+    if (getConfigValue('open_tpi_links_in_explore')) return
 
     openModalForInjectedLink(event, injections)
   })
@@ -468,6 +445,38 @@ export function filterRemovedAndInactiveInjections(injections: LinkInjection[]):
   })
 }
 
+export function limitInjectionsByCount(injections: LinkInjection[]): { injections: LinkInjection[], failedMessages: Record<string, string> } {
+  const limitedInjections: LinkInjection[] = []
+  const failedMessages: Record<string, string> = {}
+
+  const aiInjectionSidsCount: Record<string, number> = {}
+  let aiParticipantInjectionsCount = 0
+
+  for (const injection of injections) {
+    if (!injection.manual) {
+      const previousCount = aiInjectionSidsCount[injection.sid] || 0
+      const uniqueLimit = getConfigValue('unique_injection_count_limit')
+      const totalLimit = getConfigValue('total_participant_injection_count_limit')
+
+      const exceedsUniqueCount = uniqueLimit && previousCount >= uniqueLimit
+
+      const exceedsTotalParticipantsCount = injection.type === 'participant' && totalLimit && aiParticipantInjectionsCount >= totalLimit
+
+      if (exceedsUniqueCount || exceedsTotalParticipantsCount) {
+        failedMessages[injection.key] = `Injection was withheld because it exceeded the maximum ${exceedsUniqueCount ? 'unique' : 'total'} count.`
+        continue
+      } else {
+        aiInjectionSidsCount[injection.sid] = previousCount + 1
+        if (injection.type === 'participant') aiParticipantInjectionsCount++
+      }
+    }
+
+    limitedInjections.push(injection)
+  }
+
+  return { injections: limitedInjections, failedMessages }
+}
+
 /**
  * Injections are sorted first by their sentence and second by their title length. The first sorting, sentence, is so that injections remain
  * roughly grouped. The second sorting is to prevent shorter titles from merging into longer ones. For instance;
@@ -510,9 +519,9 @@ export function getPlayPilotWrapperElement(): Element {
 export function doesParticipantMeetThreshold(injections: LinkInjection[], participant: ParticipantData): boolean {
   if (participant.popularity === null || participant.popularity === undefined) return true
 
-  const useArticleAverage = window.PlayPilotLinkInjections?.config?.participant_injection_popularity_threshold_use_article_average ?? true
+  const useArticleAverage = getConfigValue('participant_injection_popularity_threshold_use_article_average') ?? true
   const defaultThreshold = 0
-  const configThreshold = window.PlayPilotLinkInjections?.config?.participant_injection_popularity_threshold
+  const configThreshold = getConfigValue('participant_injection_popularity_threshold')
   const threshold = configThreshold ?? defaultThreshold
 
   if (threshold === 0) return true

package/src/lib/retargeting.ts

@@ -1,9 +1,10 @@
 import { RETARGETING_USER_ID_KEY } from '@playpilot/retargeting-tracking'
 import { hasConsentedTo } from './consent'
 import { getUserId } from './user'
+import { getConfigValue } from './api/config'
 
 export function isRetargetingAllowed(): boolean {
-  if (!window.PlayPilotLinkInjections.config?.allow_retargeting_pixels) return false
+  if (!getConfigValue('allow_retargeting_pixels')) return false
 
   if (!hasConsentedTo('pixels')) return false
 

package/src/lib/routes.ts

@@ -1,3 +1,4 @@
+import { getConfigValue } from './api/config'
 import { playPilotBaseUrl } from './constants'
 import type { ParticipantData } from './types/participant'
 import type { TitleData } from './types/title'
@@ -11,5 +12,5 @@ export function participantUrl(participant: ParticipantData): string {
 }
 
 export function exploreModalUrl(sid: string): string {
-  return window.PlayPilotLinkInjections?.config?.explore_navigation_path + `?route=modal&sid=${sid}`
+  return getConfigValue('explore_navigation_path') + `?route=modal&sid=${sid}`
 }

package/src/lib/user.ts

@@ -1,3 +1,4 @@
+import { getConfigValue } from './api/config'
 import { hasConsentedTo } from './consent'
 import { generateRandomHash } from './hash'
 
@@ -33,5 +34,5 @@ export function getSessionId(): string | null {
 }
 
 export function isUserTrackingAllowed(): boolean {
-  return !!window.PlayPilotLinkInjections?.config?.allow_user_id_tracking && hasConsentedTo('tracking')
+  return !!getConfigValue('allow_user_id_tracking') && hasConsentedTo('tracking')
 }

package/src/routes/+page.svelte

@@ -7,7 +7,7 @@
   import { isCrawler } from '$lib/crawler'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { fetchAds } from '$lib/api/ads'
-  import { fetchConfig } from '$lib/api/config'
+  import { fetchConfig, getConfigValue } from '$lib/api/config'
   import { insertExplore, insertExploreIntoNavigation } from '$lib/explore'
   import { authorize, getAuthToken, isEditorialModeEnabled, removeAuthCookie, setEditorialParamInUrl } from '$lib/api/auth'
   import { getPageTextAndElements } from '$lib/injectionElements'
@@ -55,7 +55,7 @@
     fireQueuedTrackingEvents()
     track(TrackingEvent.ArticlePageView)
 
-    const explorePath = window.PlayPilotLinkInjections.config?.explore_navigation_path
+    const explorePath = getConfigValue('explore_navigation_path')
 
     if ((!aiInjections.length && !manualInjections.length) && !(explorePath && document.location.href.includes(explorePath))) return
 
@@ -102,7 +102,7 @@
       loading = false
 
       if (!response) return
-      if (window.PlayPilotLinkInjections.config?.disable_public_injections && !(isEditorialMode && authorized)) return
+      if (getConfigValue('disable_public_injections') && !(isEditorialMode && authorized)) return
 
       setTrackingSids({ organizationSid: response.organization_sid, domainSid: response.domain_sid })
 

package/src/routes/components/Debugger.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { getConfigValue } from '$lib/api/config'
   import { fetchLinkInjections } from '$lib/api/externalPages'
   import { Language } from '$lib/enums/Language'
   import { SplitTest } from '$lib/enums/SplitTest'
@@ -131,7 +132,7 @@
 
     <hr />
 
-    {#if !!(window.PlayPilotLinkInjections.config?.exclude_urls_pattern && getFullUrlPath().match(window.PlayPilotLinkInjections?.config?.exclude_urls_pattern))}
+    {#if !!(getConfigValue('exclude_urls_pattern') && getFullUrlPath().match(getConfigValue('exclude_urls_pattern')!))}
       <span class="error">The current URL is excluded via the config</span>
       <hr />
     {/if}

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

@@ -1,10 +1,11 @@
 <script lang="ts">
+  import { getConfigValue } from '$lib/api/config'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { track } from '$lib/tracking'
   import IconArrow from '../Icons/IconArrow.svelte'
 
   const src = 'https://cdn.jsdelivr.net/npm/@playpilot/tpi@latest/src/lib/images/titles-list.webp'
-  const href = window.PlayPilotLinkInjections?.config?.explore_navigation_path
+  const href = getConfigValue('explore_navigation_path')
 </script>
 
 <a class="call-to-action" {href} onclick={() => track(TrackingEvent.CardToExploreCta)}>

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

@@ -6,6 +6,7 @@
   import { exploreParentSelector } from '$lib/explore'
   import { onMount, setContext } from 'svelte'
   import { isRetargetingAllowed } from '$lib/retargeting'
+  import { getConfigValue } from '$lib/api/config'
   import { trackViaPixel } from '@playpilot/retargeting-tracking'
   import Modal from './Modal.svelte'
   import Title from '../Title.svelte'
@@ -24,7 +25,7 @@
 
   const topScrollAd = getFirstAdOfType('top_scroll')
   const displayAd = getFirstAdOfType('card')
-  const insertExploreCta = window.PlayPilotLinkInjections?.config?.explore_insert_cta_in_tpi
+  const insertExploreCta = getConfigValue('explore_insert_cta_in_tpi')
   const useBubble = !!topScrollAd || (insertExploreCta && !document.querySelector(exploreParentSelector))
 
   let hasTrackedScrolling = false

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

@@ -8,6 +8,7 @@
   import { trackClickViaPixel, trackViewViaPixel } from '@playpilot/retargeting-tracking'
   import { MetaEvent, MetaSource } from '$lib/enums/TrackingEvent'
   import { isRetargetingAllowed } from '$lib/retargeting'
+  import { getConfigValue } from '$lib/api/config'
 
   interface Props {
     playlink: PlaylinkData
@@ -36,7 +37,7 @@
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <svelte:element
   {onclick}
-  this={!window.PlayPilotLinkInjections?.config?.require_affiliate_consent || hasConsentedTo('affiliate') ? 'a' : 'span'}
+  this={!getConfigValue('require_affiliate_consent') || hasConsentedTo('affiliate') ? 'a' : 'span'}
   {@attach usePixel ? trackViewViaPixel(MetaEvent.ProviderInterest, { provider: playlink.slug, source: MetaSource.Card }) : null}
   {@attach usePixel ? trackClickViaPixel(MetaEvent.ProviderClick, { provider: playlink.slug }) : null}
   href={url}

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

@@ -11,6 +11,7 @@
   import Playlink from './Playlink.svelte'
   import Button from '../Button.svelte'
   import PlaylinksDisclaimer from './PlaylinksDisclaimer.svelte'
+  import { getConfigValue } from '$lib/api/config'
 
   type Category = PlaylinkCategory | '' | 'Other'
   type CategorizedPlaylinks = Partial<Record<Category, PlaylinkData[]>>
@@ -27,7 +28,7 @@
   const isModal = getContext('scope') === 'modal'
   const type = getContext('type')
   const displayAd = getFirstAdOfType('card')
-  const categorize = !!window.PlayPilotLinkInjections?.config?.categorize_playlinks
+  const categorize = !!getConfigValue('categorize_playlinks')
 
   let outerWidth = $state(0)
   let limited = $state(!categorize)

package/src/routes/components/PostersScrollReveal.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { getConfigValue } from '$lib/api/config'
   import { mobileBreakpoint } from '$lib/constants'
   import { onDestroy } from 'svelte'
   import { SvelteSet } from 'svelte/reactivity'
@@ -17,7 +18,7 @@
   onDestroy(destroyAllPosters)
 
   function onscroll(): void {
-    if (window.PlayPilotLinkInjections?.config?.disable_scroll_reveal_posters) return
+    if (getConfigValue('disable_scroll_reveal_posters')) return
     if (!isMobile) return
 
     setScrollTimeout()

package/src/routes/components/Rails/ParticipantsRail.svelte

@@ -11,6 +11,7 @@
   import ParticipantImage from '../Participants/ParticipantImage.svelte'
   import Rail from './Rail.svelte'
   import { exploreModalUrl } from '$lib/routes'
+  import { getConfigValue } from '$lib/api/config'
 
   interface Props {
     title: TitleData
@@ -45,7 +46,7 @@
   async function onclick(event: MouseEvent, participant: ParticipantData): Promise<void> {
     track(TrackingEvent.ParticipantClick, null, { title_source: title.original_title || title.title, participant: participant.name })
 
-    if (!window.PlayPilotLinkInjections?.config?.open_tpi_links_in_explore || window.location.href.includes(window.PlayPilotLinkInjections.config.explore_navigation_path || '')) {
+    if (!getConfigValue('open_tpi_links_in_explore') || window.location.href.includes(getConfigValue('explore_navigation_path') || '')) {
       const fetchedParticipant = await fetchParticipantBySid(participant.sid)
 
       openModal({ event, type: 'participant', data: fetchedParticipant })

package/src/routes/components/Widgets/InjectionsWidgetRail.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { getConfigValue } from '$lib/api/config'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { t } from '$lib/localization'
   import { track } from '$lib/tracking'
@@ -38,7 +39,7 @@
     <TitlesRail
       {titles}
       {heading}
-      navigateToExplore={!!window.PlayPilotLinkInjections?.config?.open_tpi_links_in_explore}
+      navigateToExplore={!!getConfigValue('open_tpi_links_in_explore')}
       onclick={(title) => track(TrackingEvent.WidgetArticleRailTitleClick, title)} />
   </div>
 {/if}

package/src/tests/routes/+page.test.js

@@ -19,9 +19,14 @@ vi.mock('$lib/api/externalPages', () => ({
   pollLinkInjections: vi.fn(() => {}),
 }))
 
-vi.mock('$lib/api/config', () => ({
-  fetchConfig: vi.fn(),
-}))
+// @ts-ignore
+vi.mock(import('$lib/api/config'), async (importOriginal) => {
+  const actual = await importOriginal()
+  return {
+    ...actual,
+    fetchConfig: vi.fn(() => {}),
+  }
+})
 
 // @ts-ignore
 vi.mock(import('$lib/api/session'), async (importOriginal) => {