@playpilot/tpi 5.24.2 → 5.24.4

package/package.json

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

package/src/lib/injection.ts

@@ -1,7 +1,7 @@
 import { mount, unmount } from 'svelte'
 import TitlePopover from '../routes/components/TitlePopover.svelte'
 import AfterArticlePlaylinks from '../routes/components/Playlinks/AfterArticlePlaylinks.svelte'
-import { cleanPhrase, findNumberOfMatchesInString, findShortestMatchBetweenPhrases, findTextNodeContaining, getIndexOfPhraseInElement, getIndexOfPhraseInBoundary, getNumberOfLeadingAndTrailingSpaces, isNodeInLink, replaceBetween, replaceStartingFrom } from './text'
+import { cleanPhrase, findNumberOfMatchesInString, findShortestMatchBetweenPhrases, findTextNodeContaining, getIndexOfPhraseInElement, getIndexOfPhraseInBoundary, getNumberOfLeadingAndTrailingSpaces, isNodeInLink, replaceBetween, replaceStartingFrom, findSurroundingPhrases } from './text'
 import type { LinkInjection, LinkInjectionTypes } from './types/injection'
 import { isHoldingSpecialKey } from './event'
 import { playFallbackViewTransition } from './viewTransition'
@@ -158,7 +158,6 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
     }
 
     const { injectionElement, linkElement } = createLinkInjectionElement(injection)
-    const { phrase_before, phrase_after } = injection
 
     let replacementIndex = -1
     let hasBeenReplaced = false
@@ -167,11 +166,15 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
     // 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 numberOfMatches = findNumberOfMatchesInString(element.innerHTML, injection.title)
-    if (numberOfMatches === 1) replacementIndex = element.innerHTML.indexOf(injection.title)
+    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 phrase_before and phrase_after to refine the search
+    // 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
@@ -202,7 +205,8 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
 
     // !! 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
+    // 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.
@@ -305,28 +309,55 @@ function createLinkInjectionElement(injection: LinkInjection): { injectionElemen
 /**
  * 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 number of links
- * in the HTML increased by one. If it didn't, something went wrong. What exactly is hard to say, we just know something
- * didn't go as intended and we should not inject.
+ * 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.
+ * 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): boolean {
   const dummyElement = document.createElement('div')
   dummyElement.innerHTML = originalHtml
 
-  const startingNumberOfLinks = Array.from(dummyElement.querySelectorAll<HTMLAnchorElement>('a')).filter(a => a.innerText).length
+  const originalText = dummyElement.innerText
   dummyElement.innerHTML = replaceStartingFrom(originalHtml, phrase, injectionElement.outerHTML, replacementIndex)
-  const finalNumberOfLinks = Array.from(dummyElement.querySelectorAll<HTMLAnchorElement>('a')).filter(a => a.innerText).length
 
-  if (finalNumberOfLinks != startingNumberOfLinks + 1) return false
+  // 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
 
   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.

package/src/routes/+layout.svelte

@@ -59,7 +59,7 @@
           <time datetime="14:00">1 hour ago</time>
         </header>
 
-        <p>Following the success of John M. Chu's 2018 romantic-comedy Crazy Rich Asians, Quan was inspired to return to acting. He first scored a supporting role in the Netflix movie Finding 'Ohana, before securing a starring role in the absurdist comedy-drama Everything Everywhere all At Once. A critical and commercial success, the film earned $143 million against a budget of $14-25 million, and saw Quan win the Academy Award for Best Supporting Actor. Following his win, Quan struggled to choose projects he was satisfied with, passing on an action-comedy three times, before finally taking his first leading role in it, following advice from Spielberg.</p>
+        <p>Following the success of John M. Chu's 2018 romantic-comedy <strong>Crazy</strong> Rich Asians, Quan was inspired to return to acting. He first scored a supporting role in the Netflix movie Finding 'Ohana, before securing a starring role in the absurdist comedy-drama Everything Everywhere all At Once. A critical and commercial success, the film earned $143 million against a budget of $14-25 million, and saw Quan win the Academy Award for Best Supporting Actor. Following his win, Quan struggled to choose projects he was satisfied with, passing on an action-comedy three times, before finally taking his first leading role in it, following advice from Spielberg.</p>
 
         <h2>A smaller heading, possibly with an injection in it</h2>
         <p>In an interview with Epire &amp; Magazine, Quan reveals he quested starring in Love Hurts, which sees him Love Hurts in the leading role of a former assassin turned successful realtor, whose past returns when his brother attempts to hunt him down. The movie is in a similar vein to successful films such as The Long Kiss Goodnight and Nobody, and Quan discussed how he was reluctant to take the part due to his conditioned beliefs about how an action hero should look. But he reveals that he changed his mind following a meeting with Spielberg, who convinced him to do it.</p>

package/src/routes/components/ListTitle.svelte

@@ -194,7 +194,7 @@
     margin: 0 margin(0.5) 0 auto;
     padding-left: margin(0.5);
     align-self: center;
-    color: var(--playpilot-list-item-action-color, var(--playpilot-detail-text-color, var(--playpilot-text-color-alt)));
+    color: var(--playpilot-list-item-action-color, var(--playpilot-detail-text-color, rgba(255, 255, 255, 0.75)));
 
     &:hover,
     &:active {

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

@@ -20,11 +20,11 @@
 <style lang="scss">
   .playlink {
     display: inline-block;
-    background: var(--playpilot-playlink-label-background, var(--playpilot-genre-background, var(--playpilot-lighter)));
+    background: var(--playpilot-playlink-label-background, var(--playpilot-genre-background, var(--playpilot-content)));
     border-radius: var(--playpilot-playlink-label-border-radius, margin(0.25));
     padding: margin(0.25) margin(0.5);
     font-size: var(--playpilot-playlink-label-font-size, 12px);
-    color: var(--playpilot-playlink-label-text-color, var(--playpilot-detail-text-color, var(--playpilot-text-color-alt))) !important;
+    color: var(--playpilot-playlink-label-text-color, var(--playpilot-detail-text-color-alt, rgba(255, 255, 255, 0.75))) !important;
     text-decoration: none;
     font-style: normal !important;
     overflow: hidden;

package/src/tests/lib/injections.test.js

@@ -852,6 +852,17 @@ describe('linkInjection.js', () => {
       expect(document.querySelector('a')?.innerText).toBe(injection.title)
     })
 
+    it('Should properly inject into titles that are split up by multiple elements when neither phrase_before or phrase_after are given but the phrase occurs only once', () => {
+      document.body.innerHTML = '<section>Some text with a <strong>phra</strong><strong>se</strong> in it</section>'
+
+      const elements = getLinkInjectionElements(/** @type {HTMLElement} */ (document.querySelector('section')))
+      const injection = generateInjection('Some text with a phrase in it', 'phrase')
+
+      injectLinksInDocument(elements, { aiInjections: [], manualInjections: [injection] })
+
+      expect(document.querySelector('a')?.innerText).toBe(injection.title)
+    })
+
     it('Should replace existing PlayPilot links', () => {
       document.body.innerHTML = '<p>This is a sentence with <a href="https://playpilot.com/movie/123">an injection</a>.</p>'