@playpilot/tpi 8.28.0 → 8.28.1

package/package.json

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

package/src/lib/injection.ts

@@ -7,6 +7,7 @@ import { clearAfterArticlePlaylinks, insertAfterArticlePlaylinks } from './after
 import { clearInTextDisclaimer, insertInTextDisclaimer } from './disclaimer'
 import { exploreTitleUrl, titleUrl } from './routes'
 import { clearInTextWidgets, insertInTextWidgets } from './inTextWidgets'
+import { decodeHtmlEntities, encodeHtmlEntities } from './html'
 
 export const keyDataAttribute = 'data-playpilot-injection-key'
 export const keySelector = `[${keyDataAttribute}]`
@@ -84,9 +85,21 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
       // We insert the html here separately from below, where it's done with replacementIndex because we need to capture all html
       // that may have been inside of the match.
       if (replacementIndex === -1) {
-        const match = findShortestMatchBetweenPhrases(element.innerHTML, injection.title, phrase_before || '', phrase_after || '')
+        let match = findShortestMatchBetweenPhrases(element.innerHTML, injection.title, phrase_before || '', phrase_after || '')
 
         if (match) {
+          // This is a crude way of checking if a match contains HTML elements
+          // If the title is directly inside of an element we discard the rest.
+          // This happens sometimes in lists that consists of nothing but titles and may contain special characters
+          if (match.match.includes(">") && match.match.includes("<")) {
+            const encodedTitle = encodeHtmlEntities(injection.title)
+            const matchInsideHTMLIndex = match.match.search(new RegExp(`>\s*${encodedTitle}\s*<`)) + 1
+
+            if (matchInsideHTMLIndex > 0) {
+              match = { match: match.match.slice(matchInsideHTMLIndex, matchInsideHTMLIndex + encodedTitle.length), index: matchInsideHTMLIndex }
+            }
+          }
+
           const { leadingSpaces, trailingSpaces } = getNumberOfLeadingAndTrailingSpaces(match.match)
 
           linkElement.innerHTML = match.match.trim()

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

@@ -1,122 +1,122 @@
-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
-}
+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/tests/lib/injection.test.js

@@ -867,6 +867,26 @@ describe('injection.ts', () => {
       expect(document.querySelectorAll('a')).toHaveLength(4)
     })
 
+    it('Should properly inject into lists of titles that contain special characters', () => {
+      document.body.innerHTML = `<section>
+          <ul>
+            <li>Daisy Jones & The Six</li>
+            <li>Love & Death</li>
+          </ul>
+        </section>
+      `
+
+      const elements = getLinkInjectionElements(/** @type {HTMLElement} */ (document.querySelector('section')))
+      const injections = [
+        generateInjection('Daisy Jones & The Six', 'Daisy Jones & The Six'),
+        generateInjection('Love & Death', 'Love & Death'),
+      ]
+
+      injectLinksInDocument(elements, { aiInjections: [], manualInjections: injections })
+
+      expect(document.querySelectorAll('a')).toHaveLength(2)
+    })
+
     it('Should properly inject into titles that are split up by multiple elements when phrase_before and phrase_after are given', () => {
       document.body.innerHTML = '<section>Some text with a <strong>phra</strong><strong>se</strong> in it</section>'