@playpilot/tpi 8.29.11 → 8.30.0

package/src/lib/injection.ts

@@ -1,479 +1,479 @@
-import { cleanPhrase, findNumberOfMatchesInString, findShortestMatchBetweenPhrases, findTextNodeContaining, getIndexOfPhraseInElement, getIndexOfPhraseInBoundary, getNumberOfLeadingAndTrailingSpaces, isNodeInLink, replaceBetween, replaceStartingFrom, findSurroundingPhrases } from './text'
-import type { LinkInjection, LinkInjectionTypes } from './types/injection'
-import { getNumberOfOccurrencesInArray } from './array'
-import { destroyAllModals, openModalForInjectedLink } from './modal'
-import { clearCurrentlyHoveredInjection, destroyLinkPopover, destroyLinkPopoverOnMouseleave, isPopoverActive, openPopoverForInjectedLink } from './popover'
-import { clearAfterArticlePlaylinks, insertAfterArticlePlaylinks } from './afterArticle'
-import { clearInTextDisclaimer, insertInTextDisclaimer } from './disclaimer'
-import { exploreModalUrl, participantUrl, titleUrl } from './routes'
-import { clearInTextWidgets, insertInTextWidgets } from './inTextWidgets'
-import { encodeHtmlEntities } from './html'
-
-export const keyDataAttribute = 'data-playpilot-injection-key'
-export const keySelector = `[${keyDataAttribute}]`
-
-/**
- * Replace all found injections within all given elements on the page
- * @returns Returns an array of injections with injections that failed to be inserted marked as `failed`.
- */
-export function injectLinksInDocument(elements: HTMLElement[], injections: LinkInjectionTypes = { aiInjections: [], manualInjections: [] }): LinkInjection[] {
-  clearLinkInjections()
-  removePlayPilotTitleLinks()
-
-  const mergedInjections = mergeInjectionTypes(injections)
-  if (!mergedInjections.length) return []
-
-  // Find injection in text content of all elements together, ignore potential HTML elements.
-  // This is to filter out injections that can't be injected anyway.
-  const fullText = cleanPhrase(elements.map(element => element.innerText).join(' '))
-
-  const validInjections = filterInvalidInTextInjections(mergedInjections)
-  const foundInjections = validInjections.filter(i => fullText.includes(cleanPhrase(i.sentence)))
-
-  const failedMessages: Record<string, string> = {}
-
-  let injectionIndex = -1 // This index is used in Option 3 below.
-  for (const injection of sortInjections(foundInjections)) {
-    injectionIndex++
-
-    const elementIndex = elements.findIndex(element => cleanPhrase(element.innerText).includes(cleanPhrase(injection.sentence)))
-    const element = elements[elementIndex]
-
-    if (!element) continue
-
-    const nodeContainingText = findTextNodeContaining(injection.title, element, ['A'])
-
-    // Ignore if the found injection has no node or if it is inside a link.
-    if (!nodeContainingText?.nodeValue || isNodeInLink(nodeContainingText)) {
-      // We check once more where the text was found, this time without ignoring links
-      // so we can determine if the failure was due to it being in a link
-      const linkNodeContainingText = findTextNodeContaining(injection.title, element)
-      if (linkNodeContainingText && isNodeInLink(linkNodeContainingText)) {
-        failedMessages[injection.key] = 'Given text is already inside of a link.'
-        continue
-      }
-    }
-
-    const { injectionElement, linkElement } = createLinkInjectionElement(injection)
-
-    let replacementIndex = -1
-    let hasBeenReplaced = false
-
-    // !! Option 1 - Simple replacements
-    // Check if there is only one occurance in the element, in which case the replacement is simple
-    // It's important that we check against the phrase without cleanPhrase(), as we need to check if an
-    // element might contain attributes that contain the phrase.
-    const numberOfHtmlMatches = findNumberOfMatchesInString(element.innerHTML, injection.title)
-    if (numberOfHtmlMatches === 1) replacementIndex = element.innerHTML.indexOf(injection.title)
-
-    // !! Option 2 - Replace by phrase_before and phrase_after
-    // If multiple or no occurences were found, we use the phrases before and after the injection to find
-    // the location of the correct title. This helps with multiple occurrences of the same phrase, but also
-    // with text that is broken up by html elements.
-    const { phrase_before, phrase_after } = getPhrasesSurroundingInjection(element, injection)
-
-    if (replacementIndex === -1 && (phrase_before || phrase_after)) {
-      // The before and after phrase are combined to see if the sentence contains the match exactly.
-      // This is a fairly simple comparison that will fail on special characters, html tags, or inconsistencies
-      const fullPhrase = [phrase_before, injection.title, phrase_after].filter(Boolean).join(' ')
-
-      replacementIndex = element.innerHTML.indexOf(fullPhrase)
-
-      // If we reach this point the match wasn't straight forward and we need to replace whatever is between phrase_before and phrase_after fully.
-      // 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) {
-        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()
-
-          const startIndex = match.index + leadingSpaces
-          const endIndex = match.index + match.match.length - trailingSpaces
-
-          // Stop if the content already contains a link, which we identify soley by if the contain string contains a href attribute
-          if (element.innerHTML.slice(startIndex, endIndex).includes('href=')) continue
-
-          if (replaceIfSafeInjection(element.innerHTML, injection.title, element, injectionElement, startIndex, endIndex)) {
-            replacementIndex = match.index
-            hasBeenReplaced = true
-          }
-        }
-      }
-    }
-
-    // !! Option 3 - Replace by title only, taking previous injections into account
-    // If no occurences were found previously, we check the element from start to finish only checking for the title,
-    // without considering phrase_before and phrase_after. Here we check the index of multiple different types of matches
-    // and go with the highest index between them all, assuming that is always going to be the correct phrase.
-    if (replacementIndex === -1 && nodeContainingText?.nodeValue) {
-      // Start searching for injection from either the value, the sentence, or the occurrence. This prevents injecting into
-      // text in an element earlier than the sentence started. A element might contain many sentences, after all.
-      const valueIndex = element.innerHTML.indexOf(nodeContainingText.nodeValue)
-      const sentenceIndex = element.innerHTML.indexOf(injection.sentence)
-
-      // Sentences are often broken up by HTML elements. When that happens the index of the sentence can't be found in the HTML.
-      // In that case we can attempt to search for part of the sentence instead, and hope for the best. We grab the first 20 characters
-      // of the sentence and look for that instead. This will not work if sentence is broken up within those first characters,
-      // if the injections is right at the start of the sentence, or the element contains multiple matches for that same slice.
-      // But it's something to fall back on regardless.
-      const startOfSentenceIndex = sentenceIndex === -1 ? element.innerHTML.indexOf(injection.sentence.slice(0, 20)) : -1
-
-      // Similar to the start of the sentence, we look first just the first word of the sentence. This is only relevant if the start
-      // of the sentence is broken up by HTML is less characters than is required for startOfSentenceIndex.
-      // This only works if the first word occurs only once, as otherwise we might match on the incorrect part of the sentence.
-      const firstWordOfSentence = injection.sentence.split(' ')[0]
-      const firstWordOccurrences = findNumberOfMatchesInString(element.innerHTML, firstWordOfSentence)
-      const firstWordIndex = firstWordOccurrences === 1 ? element.innerHTML.indexOf(firstWordOfSentence) : -1
-
-      // Starting from occurence happens when a sentence might include multiple occurences of the same phrase.
-      // We might still prefer the valueIndex if that is higher than this value.
-
-      // A sentence might include multiple matches for the same phrase. We get the number of previous occurences in order to get the index
-      // of the match we actually want to get.
-      const indexOfOccurrence = getNumberOfOccurrencesInArray<LinkInjection>(foundInjections.slice(0, injectionIndex + 1), injection, ['title', 'sentence']) - 1
-      const indexInSentence = getIndexOfPhraseInElement(nodeContainingText.nodeValue, element, indexOfOccurrence)
-
-      replacementIndex = Math.max(valueIndex, startOfSentenceIndex, indexInSentence, firstWordIndex, sentenceIndex, 0)
-    }
-
-    if (replacementIndex === -1) continue
-    if (hasBeenReplaced) continue
-
-    if (!replaceIfSafeInjection(element.innerHTML, injection.title, element, injectionElement, replacementIndex)) {
-      // If all else fails, we try one more time with a word boundary. If it has gotten to this point it likely means an
-      // injection tried to match into another that match partially. For example in the sentence:
-      // "Some Movie: The Sequel is a follow up to Some Movie", there are two matches for "Some Movie". But because the first
-      // match contains the second, the second will also try to inject itself into the first. In this case we try and find it
-      // again using a word boundary. This will fail in cases such as "Some Movie 2 is a follow up to Some Movie" because
-      // the word boundary still the first one.
-      const wordBoundaryMatchIndex = getIndexOfPhraseInBoundary(injection.title, element.innerHTML)
-
-      if (wordBoundaryMatchIndex > -1) {
-        replaceIfSafeInjection(element.innerHTML, injection.title, element, injectionElement, wordBoundaryMatchIndex)
-      } else {
-        failedMessages[injection.key] = 'Injection would have lead to broken HTML.'
-      }
-    }
-  }
-
-  addLinkInjectionEventListeners(foundInjections)
-  addCSSVariablesToLinks()
-
-  const afterArticleInjections = filterInvalidAfterArticleInjections(mergedInjections)
-  if (afterArticleInjections.length) insertAfterArticlePlaylinks(elements, afterArticleInjections)
-
-  // Attempt to insert in text disclaimer if at least 1 injection is found in the article.
-  // The function itself will decide whether or not it should actually insert the component based on the config.
-  if (document.querySelector(keySelector)) insertInTextDisclaimer(elements)
-
-  insertInTextWidgets(foundInjections)
-
-  return mergedInjections.filter(injection => hasValidTypeData(injection)).map((injection, index) => {
-    const hasManualEquivalent = !injection.manual && isAvailableAsManualInjection(injection, index, mergedInjections)
-    const duplicate = injection.duplicate ?? hasManualEquivalent
-
-    if (duplicate) failedMessages[injection.key] = hasManualEquivalent ? 'Injection was manually removed.' : 'Injection was marked as duplicate.'
-
-    const matchingElement = document.querySelector(`[${keyDataAttribute}="${injection.key}"]`)
-    const failed = isValidPlaylinkType(injection) && !injection.inactive && !injection.removed && !injection.after_article && !matchingElement
-    const anyElementContainsSentence = failed && elements.some(element => cleanPhrase(element.innerText).includes(cleanPhrase(injection.sentence)))
-    const failedMessage =
-      !failed ? '' :
-        failedMessages[injection.key] ||
-        (!anyElementContainsSentence ? 'Given sentence was not found in the article.' : 'The link failed to inject for unknown reasons.')
-
-    return {
-      ...injection,
-      inactive: injection.inactive ?? false,
-      duplicate,
-      failed,
-      failed_message: failedMessage,
-      matchingElement,
-    }
-  })
-}
-
-function createLinkInjectionElement(injection: LinkInjection): { injectionElement: HTMLSpanElement, linkElement: HTMLAnchorElement } {
-  // Create a wrapper in which the link will be placed. This wrapper exists as a parent for the popover
-  // so that it is not directly inside of the link.
-  const injectionElement = document.createElement('span')
-  injectionElement.dataset.playpilotInjectionKey = injection.key
-
-  const openInExplore = !!window.PlayPilotLinkInjections?.config?.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!))
-
-  const linkElement = document.createElement('a')
-  linkElement.innerText = injection.title
-  linkElement.href = href
-  linkElement.target = openInExplore ? '' : '_blank'
-  linkElement.rel = 'noopener nofollow noreferrer'
-
-  if (injection.type === 'title') linkElement.dataset.playpilotPosterUrl = injection.title_details?.standing_poster
-
-  injectionElement.insertAdjacentElement('beforeend', linkElement)
-
-  return { injectionElement, linkElement }
-}
-
-/**
- * In some coses injections lead to broken HTML. The reason for this varies and is hard to figure out. In any case, we
- * should never serve broken HTML.
- * Before replacing the HTML, we apply the the replacement to a dummy element. From here we check if the length of the text has
- * increased. If it did, something went wrong. What exactly is hard to say, we just know something didn't go as intended and
- * we should not inject.
- *
- * No tests exists for this function because writing tests would require finding a scenario in which things break. If we knew
- * when things break we'd fix it instead.
- */
-function replaceIfSafeInjection(originalHtml: string, phrase: string, sentenceElement: HTMLElement, injectionElement: HTMLElement, replacementIndex: number, endIndex: number = -1): boolean {
-  const getNumberOfEmptyLinksAndInjections = (element: HTMLElement): number => Array.from(element.querySelectorAll<HTMLElement>(`a, ${keySelector}`)).filter(a => !a.innerText).length
-
-  const dummyElement = document.createElement('div')
-  dummyElement.innerHTML = originalHtml
-
-  const originalNumberOfEmptyLinks = getNumberOfEmptyLinksAndInjections(dummyElement)
-  const originalText = dummyElement.innerText
-
-  // If an endIndex is given we can replace using replaceBetween. This is the case when injections come from using `phrase_before` and `phrase_after`.
-  if (endIndex > 0) {
-    dummyElement.innerHTML = replaceBetween(originalHtml, injectionElement.outerHTML, replacementIndex, endIndex)
-  } else {
-    dummyElement.innerHTML = replaceStartingFrom(originalHtml, phrase, injectionElement.outerHTML, replacementIndex)
-  }
-
-  // If the text has changed at all, something probably went wrong as the new text is supposed to be the same as the old.
-  if (Math.abs(dummyElement.innerText.length - originalText.length) > 1) return false
-  // One of our links pushed out an existing link on the page. When this happens the original link is emptied (because a link inserted into a link, and that is invalid)
-  // Not sure of the exact circumstances this might happen in, but it has happened on DigitalSpy.
-  // If the parent key contains no text something broke. This can happen when a link tries to injection partially into another link, leaving the closing link tag dangling.
-  if (originalNumberOfEmptyLinks != getNumberOfEmptyLinksAndInjections(dummyElement)) return false
-
-  sentenceElement.innerHTML = dummyElement.innerHTML
-
-  return true
-}
-
-/**
- * phrase_before and phrase_after are set for manual injections to better get their placement within a sentence.
- * This helps when an injection contains multiple injections of the same word and it also helps when an injection
- * is broken up by html elements. For instance, DigitalSpy sometimes uses multiple styling tags on the same phrase.
- * Something like `<strong>phr</strong><strong>ase</strong.
- *
- * Secondary to manual injections we can also get the phrase_before and phrase_after for ai injections.
- * This only works if the injection occurs only once. In this case it is only used when the phrase is broken up
- * by html elements, like before.
- */
-function getPhrasesSurroundingInjection(element: HTMLElement, injection: LinkInjection): { phrase_before: string | null | undefined, phrase_after: string | null | undefined } {
-  const { phrase_before, phrase_after } = injection
-
-  if (phrase_before || phrase_after) return { phrase_before, phrase_after }
-
-  // Get the number of occurrences of the same phrase in the element. We can only use the before and after
-  // phrases if there is only 1 occurrence, as we can't guarentee we injection into the expected phrase otherwise.
-  const numberOfTextMatches = findNumberOfMatchesInString(element.innerText, injection.title)
-
-  if (numberOfTextMatches !== 1) return { phrase_before: null, phrase_after: null }
-
-  const startIndex = element.innerText.indexOf(injection.title)
-  const surroundingPhrases = findSurroundingPhrases(element, startIndex, startIndex + injection.title.length)
-
-  return { phrase_before: surroundingPhrases.before, phrase_after: surroundingPhrases.after }
-}
-
-/**
- * Add all used CSS variables to a data attribute. This data attribute is then used for selectors that for each
- * individual CSS variable. This is done this way so that CSS variables are only set when they are used.
- * Using the variables straight up or with a fallback value would not allow them to use their default page styling.
- */
-function addCSSVariablesToLinks(): void {
-  const createdLinkElements = Array.from(document.querySelectorAll(`${keySelector} a`)) as HTMLElement[]
-
-  const variables = [
-    '--playpilot-injection-text-color',
-    '--playpilot-injection-text-color-hover',
-    '--playpilot-injection-font-weight',
-    '--playpilot-injection-font-weight-headings',
-    '--playpilot-injection-text-decoration',
-    '--playpilot-injection-text-decoration-hover',
-    '--playpilot-injection-background-color',
-    '--playpilot-injection-background-color-hover',
-  ]
-
-  for (const element of createdLinkElements) {
-    const style = getComputedStyle(element)
-
-    for (const value of variables) {
-      if (!style.getPropertyValue(value)) continue
-
-      element.dataset.usedCssVariables = `${element.dataset.usedCssVariables || ''} ${value}`
-    }
-  }
-}
-
-function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
-  window.addEventListener('mousemove', destroyLinkPopoverOnMouseleave)
-
-  window.addEventListener('click', (event) => {
-    if (window.PlayPilotLinkInjections?.config?.open_tpi_links_in_explore) return
-
-    openModalForInjectedLink(event, injections)
-  })
-
-  const createdInjectionElements = document.querySelectorAll<HTMLElement>(keySelector)
-
-  // Open and close popover on mouseenter/mouseleave
-  createdInjectionElements.forEach((injectionElement) => {
-    const key = injectionElement.dataset.playpilotInjectionKey
-    const injection = injections.find(injection => key === injection.key)
-
-    if (!injection) return
-
-    injectionElement.addEventListener('mouseenter', (event) => {
-      if (!isPopoverActive()) openPopoverForInjectedLink(event, injection)
-    })
-
-    injectionElement.addEventListener('mouseleave', clearCurrentlyHoveredInjection)
-  })
-}
-
-export function clearLinkInjections(): void {
-  const elements = document.querySelectorAll(keySelector)
-
-  elements.forEach((element) => clearLinkInjection(element.getAttribute(keyDataAttribute) || ''))
-
-  clearAfterArticlePlaylinks()
-  clearInTextDisclaimer()
-  clearInTextWidgets()
-
-  if (!elements.length) return
-
-  destroyAllModals(false)
-  destroyLinkPopover(false)
-}
-
-export function clearLinkInjection(key: string): void {
-  const element: HTMLAnchorElement | null = document.querySelector(`[${keyDataAttribute}="${key}"]`)
-  if (!element) return
-
-  const playpilotElements = element.querySelectorAll('[data-playpilot-element]')
-  playpilotElements.forEach(element => element.remove())
-
-  const linkContent = element.querySelector('a')?.innerHTML
-  element.outerHTML = linkContent || ''
-}
-
-/**
- * DigitalSpy tends to copy paste existing links via their CMS. They copy over injected links into new articles.
- * Injections won't run on those links because they already are links.
- * As a simple fix, we clear all title links to PlayPilot pages before injecting.
- */
-export function removePlayPilotTitleLinks(): void {
-  const playPilotLinks = document.querySelectorAll<HTMLAnchorElement>('a[href*="playpilot.com"]')
-
-  playPilotLinks.forEach(link => {
-    if (link.closest(keySelector)) return
-    if (!(/\/movie|show\//).test(link.href)) return
-
-    link.outerHTML = link.innerHTML
-  })
-}
-
-export function mergeInjectionTypes({ aiInjections, manualInjections }: LinkInjectionTypes): LinkInjection[] {
-  return [...manualInjections.map(i => ({ ...i, manual: true })), ...aiInjections]
-}
-
-export function separateLinkInjectionTypes(injections: LinkInjection[]): LinkInjectionTypes {
-  return {
-    aiInjections: injections.filter(i => !i.manual),
-    manualInjections: injections.filter(i => i.manual),
-  }
-}
-
-export function isValidInjection(injection: LinkInjection): boolean {
-  return !injection.inactive && !injection.removed && !injection.duplicate && hasValidTypeData(injection) && isValidPlaylinkType(injection)
-}
-
-/**
- * An injection can be of various playlink types, when all are false equivalent, the link is not valid.
- * It should be treated similar to an inactive playlink in this case.
- */
-export function isValidPlaylinkType(injection: LinkInjection): boolean {
-  if (injection.in_text || injection.in_text === undefined) return true
-  return !!injection.after_article
-}
-
-export function filterInvalidInTextInjections(injections: LinkInjection[]): LinkInjection[] {
-  return filterRemovedAndInactiveInjections(injections).filter(i => i.in_text !== false && isValidInjection(i))
-}
-
-export function filterInvalidAfterArticleInjections(injections: LinkInjection[]): LinkInjection[] {
-  return filterRemovedAndInactiveInjections(injections).filter(i => i.after_article === true && isValidInjection(i))
-}
-
-/**
- * Filter injections that were marked as removed or inactive or have an equivalent removed or inactive manual injections, soley based on the same sentence and title.
- */
-export function filterRemovedAndInactiveInjections(injections: LinkInjection[]): LinkInjection[] {
-  return injections.filter(injection => {
-    if (injection.removed || injection.inactive) return false
-    if (injection.manual && (!injection.removed && !injection.inactive)) return true
-
-    return !injections.some(i => i.manual && (i.removed || i.inactive) && isEquivalentInjection(i, injection))
-  })
-}
-
-/**
- * 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;
- * "Shrek 2 is the sequel to Shrek". If "Shrek" appears as an injection before Shrek 2, it will incorrect inject into "Shrek 2".
- * By placing the longer titles first, we prevent that.
- */
-export function sortInjections(injections: LinkInjection[]): LinkInjection[] {
-  return injections.slice().sort((a, b) => {
-    if (a.sentence < b.sentence) return -1
-    if (a.sentence > b.sentence) return 1
-
-    const difference = b.title.length - a.title.length
-    if (difference !== 0) return difference
-
-    return 0
-  })
-}
-
-export function isAvailableAsManualInjection(injection: LinkInjection, injectionIndex: number, injections: LinkInjection[]): boolean {
-  return injections.some((i, index) => {
-    return injectionIndex !== index && i.manual && isEquivalentInjection(i, injection)
-  })
-}
-
-export function isEquivalentInjection(injection1: LinkInjection, injection2: LinkInjection): boolean {
-  return injection1.title === injection2.title && cleanPhrase(injection1.sentence) === cleanPhrase(injection2.sentence)
-}
-
-export function hasValidTypeData(injection: LinkInjection): boolean {
-  if (injection.type === 'title' && !!injection.title_details) return true
-  if (injection.type === 'participant' && !!injection.participant_details) return true
-
-  return false
-}
-
-export function getPlayPilotWrapperElement(): Element {
-  return document.querySelector('[data-playpilot-link-injections]') || document.body
-}
+import { cleanPhrase, findNumberOfMatchesInString, findShortestMatchBetweenPhrases, findTextNodeContaining, getIndexOfPhraseInElement, getIndexOfPhraseInBoundary, getNumberOfLeadingAndTrailingSpaces, isNodeInLink, replaceBetween, replaceStartingFrom, findSurroundingPhrases } from './text'
+import type { LinkInjection, LinkInjectionTypes } from './types/injection'
+import { getNumberOfOccurrencesInArray } from './array'
+import { destroyAllModals, openModalForInjectedLink } from './modal'
+import { clearCurrentlyHoveredInjection, destroyLinkPopover, destroyLinkPopoverOnMouseleave, isPopoverActive, openPopoverForInjectedLink } from './popover'
+import { clearAfterArticlePlaylinks, insertAfterArticlePlaylinks } from './afterArticle'
+import { clearInTextDisclaimer, insertInTextDisclaimer } from './disclaimer'
+import { exploreModalUrl, participantUrl, titleUrl } from './routes'
+import { clearInTextWidgets, insertInTextWidgets } from './inTextWidgets'
+import { encodeHtmlEntities } from './html'
+
+export const keyDataAttribute = 'data-playpilot-injection-key'
+export const keySelector = `[${keyDataAttribute}]`
+
+/**
+ * Replace all found injections within all given elements on the page
+ * @returns Returns an array of injections with injections that failed to be inserted marked as `failed`.
+ */
+export function injectLinksInDocument(elements: HTMLElement[], injections: LinkInjectionTypes = { aiInjections: [], manualInjections: [] }): LinkInjection[] {
+  clearLinkInjections()
+  removePlayPilotTitleLinks()
+
+  const mergedInjections = mergeInjectionTypes(injections)
+  if (!mergedInjections.length) return []
+
+  // Find injection in text content of all elements together, ignore potential HTML elements.
+  // This is to filter out injections that can't be injected anyway.
+  const fullText = cleanPhrase(elements.map(element => element.innerText).join(' '))
+
+  const validInjections = filterInvalidInTextInjections(mergedInjections)
+  const foundInjections = validInjections.filter(i => fullText.includes(cleanPhrase(i.sentence)))
+
+  const failedMessages: Record<string, string> = {}
+
+  let injectionIndex = -1 // This index is used in Option 3 below.
+  for (const injection of sortInjections(foundInjections)) {
+    injectionIndex++
+
+    const elementIndex = elements.findIndex(element => cleanPhrase(element.innerText).includes(cleanPhrase(injection.sentence)))
+    const element = elements[elementIndex]
+
+    if (!element) continue
+
+    const nodeContainingText = findTextNodeContaining(injection.title, element, ['A'])
+
+    // Ignore if the found injection has no node or if it is inside a link.
+    if (!nodeContainingText?.nodeValue || isNodeInLink(nodeContainingText)) {
+      // We check once more where the text was found, this time without ignoring links
+      // so we can determine if the failure was due to it being in a link
+      const linkNodeContainingText = findTextNodeContaining(injection.title, element)
+      if (linkNodeContainingText && isNodeInLink(linkNodeContainingText)) {
+        failedMessages[injection.key] = 'Given text is already inside of a link.'
+        continue
+      }
+    }
+
+    const { injectionElement, linkElement } = createLinkInjectionElement(injection)
+
+    let replacementIndex = -1
+    let hasBeenReplaced = false
+
+    // !! Option 1 - Simple replacements
+    // Check if there is only one occurance in the element, in which case the replacement is simple
+    // It's important that we check against the phrase without cleanPhrase(), as we need to check if an
+    // element might contain attributes that contain the phrase.
+    const numberOfHtmlMatches = findNumberOfMatchesInString(element.innerHTML, injection.title)
+    if (numberOfHtmlMatches === 1) replacementIndex = element.innerHTML.indexOf(injection.title)
+
+    // !! Option 2 - Replace by phrase_before and phrase_after
+    // If multiple or no occurences were found, we use the phrases before and after the injection to find
+    // the location of the correct title. This helps with multiple occurrences of the same phrase, but also
+    // with text that is broken up by html elements.
+    const { phrase_before, phrase_after } = getPhrasesSurroundingInjection(element, injection)
+
+    if (replacementIndex === -1 && (phrase_before || phrase_after)) {
+      // The before and after phrase are combined to see if the sentence contains the match exactly.
+      // This is a fairly simple comparison that will fail on special characters, html tags, or inconsistencies
+      const fullPhrase = [phrase_before, injection.title, phrase_after].filter(Boolean).join(' ')
+
+      replacementIndex = element.innerHTML.indexOf(fullPhrase)
+
+      // If we reach this point the match wasn't straight forward and we need to replace whatever is between phrase_before and phrase_after fully.
+      // 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) {
+        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()
+
+          const startIndex = match.index + leadingSpaces
+          const endIndex = match.index + match.match.length - trailingSpaces
+
+          // Stop if the content already contains a link, which we identify soley by if the contain string contains a href attribute
+          if (element.innerHTML.slice(startIndex, endIndex).includes('href=')) continue
+
+          if (replaceIfSafeInjection(element.innerHTML, injection.title, element, injectionElement, startIndex, endIndex)) {
+            replacementIndex = match.index
+            hasBeenReplaced = true
+          }
+        }
+      }
+    }
+
+    // !! Option 3 - Replace by title only, taking previous injections into account
+    // If no occurences were found previously, we check the element from start to finish only checking for the title,
+    // without considering phrase_before and phrase_after. Here we check the index of multiple different types of matches
+    // and go with the highest index between them all, assuming that is always going to be the correct phrase.
+    if (replacementIndex === -1 && nodeContainingText?.nodeValue) {
+      // Start searching for injection from either the value, the sentence, or the occurrence. This prevents injecting into
+      // text in an element earlier than the sentence started. A element might contain many sentences, after all.
+      const valueIndex = element.innerHTML.indexOf(nodeContainingText.nodeValue)
+      const sentenceIndex = element.innerHTML.indexOf(injection.sentence)
+
+      // Sentences are often broken up by HTML elements. When that happens the index of the sentence can't be found in the HTML.
+      // In that case we can attempt to search for part of the sentence instead, and hope for the best. We grab the first 20 characters
+      // of the sentence and look for that instead. This will not work if sentence is broken up within those first characters,
+      // if the injections is right at the start of the sentence, or the element contains multiple matches for that same slice.
+      // But it's something to fall back on regardless.
+      const startOfSentenceIndex = sentenceIndex === -1 ? element.innerHTML.indexOf(injection.sentence.slice(0, 20)) : -1
+
+      // Similar to the start of the sentence, we look first just the first word of the sentence. This is only relevant if the start
+      // of the sentence is broken up by HTML is less characters than is required for startOfSentenceIndex.
+      // This only works if the first word occurs only once, as otherwise we might match on the incorrect part of the sentence.
+      const firstWordOfSentence = injection.sentence.split(' ')[0]
+      const firstWordOccurrences = findNumberOfMatchesInString(element.innerHTML, firstWordOfSentence)
+      const firstWordIndex = firstWordOccurrences === 1 ? element.innerHTML.indexOf(firstWordOfSentence) : -1
+
+      // Starting from occurence happens when a sentence might include multiple occurences of the same phrase.
+      // We might still prefer the valueIndex if that is higher than this value.
+
+      // A sentence might include multiple matches for the same phrase. We get the number of previous occurences in order to get the index
+      // of the match we actually want to get.
+      const indexOfOccurrence = getNumberOfOccurrencesInArray<LinkInjection>(foundInjections.slice(0, injectionIndex + 1), injection, ['title', 'sentence']) - 1
+      const indexInSentence = getIndexOfPhraseInElement(nodeContainingText.nodeValue, element, indexOfOccurrence)
+
+      replacementIndex = Math.max(valueIndex, startOfSentenceIndex, indexInSentence, firstWordIndex, sentenceIndex, 0)
+    }
+
+    if (replacementIndex === -1) continue
+    if (hasBeenReplaced) continue
+
+    if (!replaceIfSafeInjection(element.innerHTML, injection.title, element, injectionElement, replacementIndex)) {
+      // If all else fails, we try one more time with a word boundary. If it has gotten to this point it likely means an
+      // injection tried to match into another that match partially. For example in the sentence:
+      // "Some Movie: The Sequel is a follow up to Some Movie", there are two matches for "Some Movie". But because the first
+      // match contains the second, the second will also try to inject itself into the first. In this case we try and find it
+      // again using a word boundary. This will fail in cases such as "Some Movie 2 is a follow up to Some Movie" because
+      // the word boundary still the first one.
+      const wordBoundaryMatchIndex = getIndexOfPhraseInBoundary(injection.title, element.innerHTML)
+
+      if (wordBoundaryMatchIndex > -1) {
+        replaceIfSafeInjection(element.innerHTML, injection.title, element, injectionElement, wordBoundaryMatchIndex)
+      } else {
+        failedMessages[injection.key] = 'Injection would have lead to broken HTML.'
+      }
+    }
+  }
+
+  addLinkInjectionEventListeners(foundInjections)
+  addCSSVariablesToLinks()
+
+  const afterArticleInjections = filterInvalidAfterArticleInjections(mergedInjections)
+  if (afterArticleInjections.length) insertAfterArticlePlaylinks(elements, afterArticleInjections)
+
+  // Attempt to insert in text disclaimer if at least 1 injection is found in the article.
+  // The function itself will decide whether or not it should actually insert the component based on the config.
+  if (document.querySelector(keySelector)) insertInTextDisclaimer(elements)
+
+  insertInTextWidgets(foundInjections)
+
+  return mergedInjections.filter(injection => hasValidTypeData(injection)).map((injection, index) => {
+    const hasManualEquivalent = !injection.manual && isAvailableAsManualInjection(injection, index, mergedInjections)
+    const duplicate = injection.duplicate ?? hasManualEquivalent
+
+    if (duplicate) failedMessages[injection.key] = hasManualEquivalent ? 'Injection was manually removed.' : 'Injection was marked as duplicate.'
+
+    const matchingElement = document.querySelector(`[${keyDataAttribute}="${injection.key}"]`)
+    const failed = isValidPlaylinkType(injection) && !injection.inactive && !injection.removed && !injection.after_article && !matchingElement
+    const anyElementContainsSentence = failed && elements.some(element => cleanPhrase(element.innerText).includes(cleanPhrase(injection.sentence)))
+    const failedMessage =
+      !failed ? '' :
+        failedMessages[injection.key] ||
+        (!anyElementContainsSentence ? 'Given sentence was not found in the article.' : 'The link failed to inject for unknown reasons.')
+
+    return {
+      ...injection,
+      inactive: injection.inactive ?? false,
+      duplicate,
+      failed,
+      failed_message: failedMessage,
+      matchingElement,
+    }
+  })
+}
+
+function createLinkInjectionElement(injection: LinkInjection): { injectionElement: HTMLSpanElement, linkElement: HTMLAnchorElement } {
+  // Create a wrapper in which the link will be placed. This wrapper exists as a parent for the popover
+  // so that it is not directly inside of the link.
+  const injectionElement = document.createElement('span')
+  injectionElement.dataset.playpilotInjectionKey = injection.key
+
+  const openInExplore = !!window.PlayPilotLinkInjections?.config?.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!))
+
+  const linkElement = document.createElement('a')
+  linkElement.innerText = injection.title
+  linkElement.href = href
+  linkElement.target = openInExplore ? '' : '_blank'
+  linkElement.rel = 'noopener nofollow noreferrer'
+
+  if (injection.type === 'title') linkElement.dataset.playpilotPosterUrl = injection.title_details?.standing_poster
+
+  injectionElement.insertAdjacentElement('beforeend', linkElement)
+
+  return { injectionElement, linkElement }
+}
+
+/**
+ * In some coses injections lead to broken HTML. The reason for this varies and is hard to figure out. In any case, we
+ * should never serve broken HTML.
+ * Before replacing the HTML, we apply the the replacement to a dummy element. From here we check if the length of the text has
+ * increased. If it did, something went wrong. What exactly is hard to say, we just know something didn't go as intended and
+ * we should not inject.
+ *
+ * No tests exists for this function because writing tests would require finding a scenario in which things break. If we knew
+ * when things break we'd fix it instead.
+ */
+function replaceIfSafeInjection(originalHtml: string, phrase: string, sentenceElement: HTMLElement, injectionElement: HTMLElement, replacementIndex: number, endIndex: number = -1): boolean {
+  const getNumberOfEmptyLinksAndInjections = (element: HTMLElement): number => Array.from(element.querySelectorAll<HTMLElement>(`a, ${keySelector}`)).filter(a => !a.innerText).length
+
+  const dummyElement = document.createElement('div')
+  dummyElement.innerHTML = originalHtml
+
+  const originalNumberOfEmptyLinks = getNumberOfEmptyLinksAndInjections(dummyElement)
+  const originalText = dummyElement.innerText
+
+  // If an endIndex is given we can replace using replaceBetween. This is the case when injections come from using `phrase_before` and `phrase_after`.
+  if (endIndex > 0) {
+    dummyElement.innerHTML = replaceBetween(originalHtml, injectionElement.outerHTML, replacementIndex, endIndex)
+  } else {
+    dummyElement.innerHTML = replaceStartingFrom(originalHtml, phrase, injectionElement.outerHTML, replacementIndex)
+  }
+
+  // If the text has changed at all, something probably went wrong as the new text is supposed to be the same as the old.
+  if (Math.abs(dummyElement.innerText.length - originalText.length) > 1) return false
+  // One of our links pushed out an existing link on the page. When this happens the original link is emptied (because a link inserted into a link, and that is invalid)
+  // Not sure of the exact circumstances this might happen in, but it has happened on DigitalSpy.
+  // If the parent key contains no text something broke. This can happen when a link tries to injection partially into another link, leaving the closing link tag dangling.
+  if (originalNumberOfEmptyLinks != getNumberOfEmptyLinksAndInjections(dummyElement)) return false
+
+  sentenceElement.innerHTML = dummyElement.innerHTML
+
+  return true
+}
+
+/**
+ * phrase_before and phrase_after are set for manual injections to better get their placement within a sentence.
+ * This helps when an injection contains multiple injections of the same word and it also helps when an injection
+ * is broken up by html elements. For instance, DigitalSpy sometimes uses multiple styling tags on the same phrase.
+ * Something like `<strong>phr</strong><strong>ase</strong.
+ *
+ * Secondary to manual injections we can also get the phrase_before and phrase_after for ai injections.
+ * This only works if the injection occurs only once. In this case it is only used when the phrase is broken up
+ * by html elements, like before.
+ */
+function getPhrasesSurroundingInjection(element: HTMLElement, injection: LinkInjection): { phrase_before: string | null | undefined, phrase_after: string | null | undefined } {
+  const { phrase_before, phrase_after } = injection
+
+  if (phrase_before || phrase_after) return { phrase_before, phrase_after }
+
+  // Get the number of occurrences of the same phrase in the element. We can only use the before and after
+  // phrases if there is only 1 occurrence, as we can't guarentee we injection into the expected phrase otherwise.
+  const numberOfTextMatches = findNumberOfMatchesInString(element.innerText, injection.title)
+
+  if (numberOfTextMatches !== 1) return { phrase_before: null, phrase_after: null }
+
+  const startIndex = element.innerText.indexOf(injection.title)
+  const surroundingPhrases = findSurroundingPhrases(element, startIndex, startIndex + injection.title.length)
+
+  return { phrase_before: surroundingPhrases.before, phrase_after: surroundingPhrases.after }
+}
+
+/**
+ * Add all used CSS variables to a data attribute. This data attribute is then used for selectors that for each
+ * individual CSS variable. This is done this way so that CSS variables are only set when they are used.
+ * Using the variables straight up or with a fallback value would not allow them to use their default page styling.
+ */
+function addCSSVariablesToLinks(): void {
+  const createdLinkElements = Array.from(document.querySelectorAll(`${keySelector} a`)) as HTMLElement[]
+
+  const variables = [
+    '--playpilot-injection-text-color',
+    '--playpilot-injection-text-color-hover',
+    '--playpilot-injection-font-weight',
+    '--playpilot-injection-font-weight-headings',
+    '--playpilot-injection-text-decoration',
+    '--playpilot-injection-text-decoration-hover',
+    '--playpilot-injection-background-color',
+    '--playpilot-injection-background-color-hover',
+  ]
+
+  for (const element of createdLinkElements) {
+    const style = getComputedStyle(element)
+
+    for (const value of variables) {
+      if (!style.getPropertyValue(value)) continue
+
+      element.dataset.usedCssVariables = `${element.dataset.usedCssVariables || ''} ${value}`
+    }
+  }
+}
+
+function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
+  window.addEventListener('mousemove', destroyLinkPopoverOnMouseleave)
+
+  window.addEventListener('click', (event) => {
+    if (window.PlayPilotLinkInjections?.config?.open_tpi_links_in_explore) return
+
+    openModalForInjectedLink(event, injections)
+  })
+
+  const createdInjectionElements = document.querySelectorAll<HTMLElement>(keySelector)
+
+  // Open and close popover on mouseenter/mouseleave
+  createdInjectionElements.forEach((injectionElement) => {
+    const key = injectionElement.dataset.playpilotInjectionKey
+    const injection = injections.find(injection => key === injection.key)
+
+    if (!injection) return
+
+    injectionElement.addEventListener('mouseenter', (event) => {
+      if (!isPopoverActive()) openPopoverForInjectedLink(event, injection)
+    })
+
+    injectionElement.addEventListener('mouseleave', clearCurrentlyHoveredInjection)
+  })
+}
+
+export function clearLinkInjections(): void {
+  const elements = document.querySelectorAll(keySelector)
+
+  elements.forEach((element) => clearLinkInjection(element.getAttribute(keyDataAttribute) || ''))
+
+  clearAfterArticlePlaylinks()
+  clearInTextDisclaimer()
+  clearInTextWidgets()
+
+  if (!elements.length) return
+
+  destroyAllModals(false)
+  destroyLinkPopover(false)
+}
+
+export function clearLinkInjection(key: string): void {
+  const element: HTMLAnchorElement | null = document.querySelector(`[${keyDataAttribute}="${key}"]`)
+  if (!element) return
+
+  const playpilotElements = element.querySelectorAll('[data-playpilot-element]')
+  playpilotElements.forEach(element => element.remove())
+
+  const linkContent = element.querySelector('a')?.innerHTML
+  element.outerHTML = linkContent || ''
+}
+
+/**
+ * DigitalSpy tends to copy paste existing links via their CMS. They copy over injected links into new articles.
+ * Injections won't run on those links because they already are links.
+ * As a simple fix, we clear all title links to PlayPilot pages before injecting.
+ */
+export function removePlayPilotTitleLinks(): void {
+  const playPilotLinks = document.querySelectorAll<HTMLAnchorElement>('a[href*="playpilot.com"]')
+
+  playPilotLinks.forEach(link => {
+    if (link.closest(keySelector)) return
+    if (!(/\/movie|show\//).test(link.href)) return
+
+    link.outerHTML = link.innerHTML
+  })
+}
+
+export function mergeInjectionTypes({ aiInjections, manualInjections }: LinkInjectionTypes): LinkInjection[] {
+  return [...manualInjections.map(i => ({ ...i, manual: true })), ...aiInjections]
+}
+
+export function separateLinkInjectionTypes(injections: LinkInjection[]): LinkInjectionTypes {
+  return {
+    aiInjections: injections.filter(i => !i.manual),
+    manualInjections: injections.filter(i => i.manual),
+  }
+}
+
+export function isValidInjection(injection: LinkInjection): boolean {
+  return !injection.inactive && !injection.removed && !injection.duplicate && hasValidTypeData(injection) && isValidPlaylinkType(injection)
+}
+
+/**
+ * An injection can be of various playlink types, when all are false equivalent, the link is not valid.
+ * It should be treated similar to an inactive playlink in this case.
+ */
+export function isValidPlaylinkType(injection: LinkInjection): boolean {
+  if (injection.in_text || injection.in_text === undefined) return true
+  return !!injection.after_article
+}
+
+export function filterInvalidInTextInjections(injections: LinkInjection[]): LinkInjection[] {
+  return filterRemovedAndInactiveInjections(injections).filter(i => i.in_text !== false && isValidInjection(i))
+}
+
+export function filterInvalidAfterArticleInjections(injections: LinkInjection[]): LinkInjection[] {
+  return filterRemovedAndInactiveInjections(injections).filter(i => i.after_article === true && isValidInjection(i))
+}
+
+/**
+ * Filter injections that were marked as removed or inactive or have an equivalent removed or inactive manual injections, soley based on the same sentence and title.
+ */
+export function filterRemovedAndInactiveInjections(injections: LinkInjection[]): LinkInjection[] {
+  return injections.filter(injection => {
+    if (injection.removed || injection.inactive) return false
+    if (injection.manual && (!injection.removed && !injection.inactive)) return true
+
+    return !injections.some(i => i.manual && (i.removed || i.inactive) && isEquivalentInjection(i, injection))
+  })
+}
+
+/**
+ * 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;
+ * "Shrek 2 is the sequel to Shrek". If "Shrek" appears as an injection before Shrek 2, it will incorrect inject into "Shrek 2".
+ * By placing the longer titles first, we prevent that.
+ */
+export function sortInjections(injections: LinkInjection[]): LinkInjection[] {
+  return injections.slice().sort((a, b) => {
+    if (a.sentence < b.sentence) return -1
+    if (a.sentence > b.sentence) return 1
+
+    const difference = b.title.length - a.title.length
+    if (difference !== 0) return difference
+
+    return 0
+  })
+}
+
+export function isAvailableAsManualInjection(injection: LinkInjection, injectionIndex: number, injections: LinkInjection[]): boolean {
+  return injections.some((i, index) => {
+    return injectionIndex !== index && i.manual && isEquivalentInjection(i, injection)
+  })
+}
+
+export function isEquivalentInjection(injection1: LinkInjection, injection2: LinkInjection): boolean {
+  return injection1.title === injection2.title && cleanPhrase(injection1.sentence) === cleanPhrase(injection2.sentence)
+}
+
+export function hasValidTypeData(injection: LinkInjection): boolean {
+  if (injection.type === 'title' && !!injection.title_details) return true
+  if (injection.type === 'participant' && !!injection.participant_details) return true
+
+  return false
+}
+
+export function getPlayPilotWrapperElement(): Element {
+  return document.querySelector('[data-playpilot-link-injections]') || document.body
+}