@playpilot/tpi 5.19.2 → 5.19.3

package/package.json

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

package/src/lib/injection.ts

@@ -209,6 +209,13 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
       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
+
       // 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.
 
@@ -217,7 +224,7 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
       const indexOfOccurrence = getNumberOfOccurrencesInArray<LinkInjection>(foundInjections.slice(0, injectionIndex + 1), injection, ['title', 'sentence']) - 1
       const indexInSentence = getIndexOfPhraseInElement(nodeContainingText.nodeValue, element, indexOfOccurrence)
 
-      replacementIndex = Math.max(valueIndex, indexInSentence, sentenceIndex, 0)
+      replacementIndex = Math.max(valueIndex, startOfSentenceIndex, indexInSentence, sentenceIndex, 0)
     }
 
     if (replacementIndex === -1) continue

package/src/routes/components/Icons/IconArrow.svelte

@@ -1,12 +1,17 @@
 <script lang="ts">
   interface Props {
     direction?: 'left' | 'right'
+    title?: string
   }
 
-  const { direction = 'right' }: Props = $props()
+  const { direction = 'right', title = '' }: Props = $props()
 </script>
 
 <svg class="{direction}" height="16px" viewBox="0 -960 960 960" width="16px">
+  {#if title}
+    <title>{title}</title>
+  {/if}
+
   <path d="m288-96-68-68 316-316-316-316 68-68 384 384L288-96Z" fill="currentColor" />
 </svg>
 

package/src/routes/components/Icons/IconIMDb.svelte

@@ -7,5 +7,6 @@
 </script>
 
 <svg width={size} height={size} viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 0.351929L9.163 4.72803L14 5.43408L10.5 8.8385L11.326 13.648L7 11.3761L2.674 13.648L3.5 8.8385L0 5.43408L4.837 4.72803L7 0.351929Z" fill="#F6C045"/>
+  <title>IMDb rating</title>
+  <path d="M7 0.351929L9.163 4.72803L14 5.43408L10.5 8.8385L11.326 13.648L7 11.3761L2.674 13.648L3.5 8.8385L0 5.43408L4.837 4.72803L7 0.351929Z" fill="#F6C045"/>
 </svg>

package/src/routes/components/Modal.svelte

@@ -19,6 +19,7 @@
     closeButtonStyle?: 'shadow' | 'flat'
     initialScrollPosition?: number
     onscroll?: () => void
+    onclose?: () => void
   }
 
   const {
@@ -29,6 +30,7 @@
     closeButtonStyle = 'shadow',
     initialScrollPosition = 0,
     onscroll = () => null,
+    onclose = () => null,
   }: Props = $props()
 
   const inlineBubble = isInSplitTestVariant(SplitTest.TopScrollFormat, 1)
@@ -80,11 +82,16 @@
     if (isMobile) return fly(node, { duration: 250, ...options })
     return scale(node, { duration: 150, start: 0.85 })
   }
+
+  function close() {
+    onclose()
+    destroyAllModals()
+  }
 </script>
 
 <svelte:window
-  onkeydown={({ key }) => { if (key === 'Escape') destroyAllModals() }}
-  onhashchange={() => destroyAllModals()}
+  onkeydown={({ key }) => { if (key === 'Escape') close() }}
+  onhashchange={close}
   bind:innerWidth={windowWidth} />
 
 <div class="modal" style:--dialog-offset="{dialogOffset}px" transition:fade|global={{ duration: 150 }} bind:this={modalElement} class:has-bubble={!!bubble && inlineBubble} class:has-prepend={!!prepend}>
@@ -102,7 +109,7 @@
 
   {#if isMobile}
     <div class="swipe-handle" transition:scaleOrFly|global>
-      <SwipeHandle target={dialogElement!} onpassed={() => destroyAllModals()} />
+      <SwipeHandle target={dialogElement!} onpassed={close} />
     </div>
   {/if}
 
@@ -116,7 +123,7 @@
     {/if}
 
     <div class="close {closeButtonStyle}">
-      <RoundButton onclick={() => destroyAllModals()} aria-label="Close">
+      <RoundButton onclick={close} aria-label="Close">
         <IconClose />
       </RoundButton>
     </div>
@@ -126,7 +133,7 @@
 
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div class="backdrop" onclick={() => destroyAllModals()}></div>
+  <div class="backdrop" onclick={close}></div>
 </div>
 
 <style lang="scss">

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

@@ -22,11 +22,15 @@
 
     {#snippet controls({ setIndex, currentIndex, reachedEnd })}
       {#if currentIndex > 0}
-        <button class="arrow left" onclick={() => setIndex(currentIndex - 1)}><IconArrow direction="left" /></button>
+        <button class="arrow left" onclick={() => setIndex(currentIndex - 1)} aria-label="Previous" aria-live="polite">
+          <IconArrow direction="left" title="Previous" />
+        </button>
       {/if}
 
       {#if !reachedEnd}
-        <button class="arrow right" onclick={() => setIndex(currentIndex + 1)}><IconArrow /></button>
+        <button class="arrow right" onclick={() => setIndex(currentIndex + 1)} aria-label="Next" aria-live="polite">
+          <IconArrow title="Next" />
+        </button>
       {/if}
     {/snippet}
   </TinySlider>

package/src/routes/components/Title.svelte

@@ -57,10 +57,7 @@
 
     <!-- Temporarily not available on production as there is not yet an API endpoint for either -->
     {#if process.env.NODE_ENV !== 'production'}
-      {#if true}
-        <ParticipantsRail />
-      {/if}
-
+      <ParticipantsRail />
       <SimilarRail {title} />
     {/if}
   </div>

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

@@ -296,6 +296,22 @@ describe('linkInjection.js', () => {
       expect(document.querySelector('[data-playpilot-injection-key]')).toBeTruthy()
     })
 
+    it('Should inject correctly when sentence is broken up by html and element contains multiple matches', () => {
+      document.body.innerHTML = '<p>This is some match. Some other sentence with a match. But this is yet another <em>sentence</em> with a match.</p>'
+
+      const elements = Array.from(document.body.querySelectorAll('p'))
+
+      const injections = [
+        generateInjection('This is some match.', 'some match'),
+        generateInjection('But this is yet another sentence with a match.', 'a match'),
+      ]
+
+      injectLinksInDocument(elements, { aiInjections: injections, manualInjections: [] })
+
+      expect(document.body.innerHTML).toContain('Some other sentence with a match')
+      expect(document.querySelectorAll('[data-playpilot-injection-key]')).toHaveLength(2)
+    })
+
     it('Should leave the text intact if no injections were found', () => {
       document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
 

package/src/tests/routes/components/Modal.test.js

@@ -16,47 +16,53 @@ describe('Modal.svelte', () => {
     vi.resetAllMocks()
   })
 
+  const onclose = vi.fn()
   const children = createRawSnippet(() => ({ render: () => '<div></div>' }))
 
-  it('Should fire given destroyAllModals function when backdrop is clicked', async () => {
-    const { container } = render(Modal, { children })
+  it('Should fire given onclose and destroyAllModals functions when backdrop is clicked', async () => {
+    const { container } = render(Modal, { children, onclose })
 
     await fireEvent.click(/** @type {Node} */ (container.querySelector('.backdrop')))
 
+    expect(onclose).toHaveBeenCalled()
     expect(destroyAllModals).toHaveBeenCalled()
   })
 
-  it('Should fire destroyAllModals function when close button is clicked', async () => {
-    const { container } = render(Modal, { children })
+  it('Should fire given onclose and destroyAllModals functions when close button is clicked', async () => {
+    const { container } = render(Modal, { children, onclose })
 
     await fireEvent.click(/** @type {Node} */ (container.querySelector('button')))
 
+    expect(onclose).toHaveBeenCalled()
     expect(destroyAllModals).toHaveBeenCalled()
   })
 
-  it('Should not fire given onclose function when dialog is clicked', async () => {
-    const { container } = render(Modal, { children })
+  it('Should not fire given onclose or destroyAllModals functions when dialog is clicked', async () => {
+    const { container } = render(Modal, { children, onclose })
 
     await fireEvent.click(/** @type {Node} */ (container.querySelector('.dialog')))
 
+    expect(onclose).not.toHaveBeenCalled()
     expect(destroyAllModals).not.toHaveBeenCalled()
   })
 
-  it('Should fire given destroyAllModals function when escape key is pressed', async () => {
-    render(Modal, { children })
+  it('Should fire given onclose and destroyAllModals functions when escape key is pressed', async () => {
+    render(Modal, { children, onclose })
 
     fireEvent.keyDown(window, { key: 'Escape' })
 
+    expect(onclose).toHaveBeenCalled()
     expect(destroyAllModals).toHaveBeenCalled()
   })
 
-  it('Should not fire given onclose function when key other than escape key is pressed', async () => {
-    render(Modal, { children })
+  it('Should not fire given onclose or destroyAllModals function when key other than escape key is pressed', async () => {
+    render(Modal, { children, onclose })
 
     fireEvent.keyDown(window, { key: 'a' })
     fireEvent.keyDown(window, { key: 'Enter' })
     fireEvent.keyDown(window, { key: 'Space' })
 
+    expect(onclose).not.toHaveBeenCalled()
     expect(destroyAllModals).not.toHaveBeenCalled()
   })