@playpilot/tpi 8.27.1 → 8.28.0

package/eslint.config.js

@@ -69,7 +69,6 @@ export default [
   },
   {
     files: ['**/*.ts'],
-    ignores: ['**/*.d.ts'],
     languageOptions: {
       parser: tsParser,
     },

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.27.1",
+	"version": "8.28.0",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/api/externalPages.ts

@@ -23,7 +23,7 @@ export async function fetchLinkInjections(
 
   if (!apiToken) throw new Error('No token was provided')
 
-  const apiUrl = `/external-pages/?api-token=${apiToken}&include_title_details=true${isEditorialMode ? '&editorial_mode_enabled=true' : ''}&language=${language}`
+  const apiUrl = `/external-pages/?api-token=${apiToken}&include_title_details=true&include_participant_details=true${isEditorialMode ? '&editorial_mode_enabled=true' : ''}&language=${language}`
   let response: LinkInjectionResponse
 
   if (method === 'POST') {

package/src/lib/explore.ts

@@ -44,7 +44,8 @@ export function insertExploreIntoNavigation(): boolean {
   if (!config) return false
 
   const { explore_navigation_selector: selector, explore_navigation_label: label, explore_navigation_path: path, explore_navigation_insert_position: insertPosition } = config
-  if (!selector) return false
+
+  if (!selector || !path) return false
 
   // Make sure to remove an element we created if it already exists. Should not be possible under normal circumstances.
   document.querySelector('[data-playpilot-explore-navigation-element]')?.remove()

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

@@ -1,120 +1,122 @@
-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
-
-  /**
-   * 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
-  explore_use_router?: boolean
-}
+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
+
+  /**
+   * 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
+  explore_use_router?: boolean
+}

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

@@ -4,3 +4,5 @@ export type Position = {
 }
 
 export type Alignment = 'bottom' | 'center'
+
+export type InsertPosition = 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | ''

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

@@ -1,6 +1,8 @@
 import type { Campaign } from './campaign'
+import type { ConfigResponse } from './config'
 import type { ConsentOptions } from './consent'
 import type { LinkInjection, LinkInjectionResponse } from './injection'
+import type { InsertPosition } from './position'
 import type { TitleData } from './title'
 
 export type ScriptConfig = {
@@ -17,7 +19,7 @@ export type ScriptConfig = {
   // Selector for the after article playlinks. Will be placed _after_ the given selector.
   after_article_selector?: string
   // Selector to change the insert position of the after article playlinks. Should only be used if no viable selector can be given with `after_article_selector`.
-  after_article_insert_position?: InsertPosition | ''
+  after_article_insert_position?: InsertPosition
   // The language of the page will be inferred from the html `lang` attribute. Can be set manually using this option in the config object.
   language?: string | null
   // Set to the last success external-pages fetch.
@@ -25,7 +27,7 @@ export type ScriptConfig = {
   // Lists all tracked events through the `track()` function.
   tracked_events?: { event: string, payload: Record<string, any> }[]
   // Queued tracking events that were fired before consent was given. These might be fired later if the user consents.
-  queued_tracking_events?: { event: string, title: TitleData | null, payload: Record<strong, any> }[]
+  queued_tracking_events?: { event: string, title: TitleData | null, payload: Record<string, any> }[]
   // Lists all split test identifiers as created by each running split test. Identifiers are only created when a split test is fired.
   split_test_identifiers?: Record<string, number>
   // All link injections as returned from external-pages, with AI and manual injections merged.

package/src/routes/components/Debugger.svelte

@@ -181,7 +181,7 @@
     {#if !useExploreRouter()}
       <button onclick={(() => {
         destroyExplore()
-        window.PlayPilotLinkInjections.config.explore_use_router = !useExploreRouter()
+        window.PlayPilotLinkInjections.config!.explore_use_router = !useExploreRouter()
         insertExplore()
       })}>Toggle new explore</button>
     {/if}

package/src/routes/components/Explore/Routes/ExploreModal.svelte

@@ -2,9 +2,11 @@
   import { fetchSimilarTitles, fetchTitleBySid } from '$lib/api/titles'
   import { mobileBreakpoint } from '$lib/constants'
   import { SplitTest } from '$lib/enums/SplitTest'
+  import { t } from '$lib/localization'
   import { openModal } from '$lib/modal'
   import { getSplitTestVariantName, trackSplitTestView } from '$lib/splitTest'
   import type { TitleData } from '$lib/types/title'
+  import Modal from '../../Modals/Modal.svelte'
 
   interface Props {
     navigate?: (key: string, pushState?: boolean) => void
@@ -12,8 +14,6 @@
 
   const { navigate = () => null }: Props = $props()
 
-  openModalViaRoute()
-
   async function openModalViaRoute(): Promise<void> {
     const currentUrl = new URL(document.location.toString())
     const sid = currentUrl.searchParams.get('sid')
@@ -26,22 +26,73 @@
 
     if (isMobile) trackSplitTestView(SplitTest.Reels)
 
-    try {
-      const [title, railTitles] = (await Promise.allSettled([
-        fetchTitleBySid(sid),
-        fetchSimilarTitles({ sid } as unknown as TitleData)])
-      ).map(promise => (promise.status === 'fulfilled' ? promise.value : null))
-
-      openModal({
-        type,
-        data: [(title as TitleData), ...(railTitles as TitleData[])],
-        props: {
-          onclose: () => navigate('home'),
-          pushState: false,
-        },
-      })
-    } catch {
-      navigate('home')
-    }
+    const [title, railTitles] = (await Promise.allSettled([
+      fetchTitleBySid(sid),
+      fetchSimilarTitles({ sid } as unknown as TitleData)])
+    ).map(promise => (promise.status === 'fulfilled' ? promise.value : null))
+
+    openModal({
+      type,
+      data: [(title as TitleData), ...(railTitles as TitleData[])],
+      props: {
+        onclose: () => navigate('home'),
+        pushState: false,
+      },
+    })
   }
 </script>
+
+{#await openModalViaRoute()}
+  <Modal blur pushState={false}>
+    {#snippet dialog()}
+      <div class="loading">
+        <div class="bar"></div>
+        <div class="bar"></div>
+        <div class="bar"></div>
+      </div>
+    {/snippet}
+  </Modal>
+{:catch}
+  <Modal blur onclose={() => navigate('home')} pushState={false}>
+    <div class="error">
+      {t('An Error Occurred')}
+    </div>
+  </Modal>
+{/await}
+
+<style lang="scss">
+  .loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    gap: margin(0.5);
+  }
+
+  @keyframes animate-bar {
+    to {
+      height: margin(3);
+      opacity: 0.5;
+    }
+  }
+
+  .bar {
+    height: margin(4);
+    width: margin(1);
+    border-radius: margin(0.25);
+    background: white;
+    animation: animate-bar 750ms infinite;
+
+    @for $i from 0 through 2 {
+      &:nth-child(#{$i}) {
+        animation-delay: $i * 250ms;
+      }
+    }
+  }
+
+  .error {
+    padding: margin(2);
+    font-size: 1.25em;
+    color: theme(text-color);
+  }
+</style>

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

@@ -59,6 +59,7 @@
 
   onMount(() => {
     const scrollElement = getScrollRoot()
+
     scrollElement.classList.add('playpilot-modal-open')
 
     hasPreviousModal = !!getPreviousModal()
@@ -70,7 +71,7 @@
     requestAnimationFrame(setInitialScrollPosition)
 
     return () => {
-      scrollElement.classList.remove('playpilot-modal-open')
+      if (!document.querySelector('.modal')) scrollElement.classList.remove('playpilot-modal-open')
 
       // Remove the modal entry from above from the browser history. This is done only once for the entire stack.
       // We check for getPreviousModal not because we really care about the previous modal, but to check if all