@playpilot/tpi 5.19.2-beta.1 → 5.19.3

package/package.json

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

package/release.js

@@ -7,6 +7,9 @@ if (!['major', 'minor', 'patch'].includes(versionType)) {
 }
 
 try {
+  console.log(`Bumping version: ${versionType}...`)
+  execSync(`npm version ${versionType}`, { stdio: 'inherit' })
+
   console.log('Building...')
   execSync('npm run build', { stdio: 'inherit' })
 
@@ -14,9 +17,6 @@ try {
   execSync('git add dist', { stdio: 'inherit' })
   execSync('git commit -m "chore: Update dist"', { stdio: 'inherit' })
 
-  console.log(`Bumping version: ${versionType}...`)
-  execSync(`npm version ${versionType}`, { stdio: 'inherit' })
-
   console.log('Pushing to git...')
   execSync('git push --follow-tags', { stdio: 'inherit' })
 

package/src/lib/injection.ts

@@ -40,7 +40,7 @@ export function getLinkInjectionElements(parentElement: HTMLElement, excludeElem
     if (excludeElementsSelector && element.matches(excludeElementsSelector)) continue
 
     // Ignore links, buttons, and headers
-    if (/^(A|BUTTON|SCRIPT|NOSCRIPT|STYLE|IFRAME|FIGCAPTION|TIME|H1)$/.test(element.tagName)) continue
+    if (/^(A|BUTTON|SCRIPT|NOSCRIPT|STYLE|IFRAME|FIGCAPTION|TIME|LABEL|BLOCKQUOTE|H1)$/.test(element.tagName)) continue
 
     // Ignore elements that are visibly hidden as they are likely only for screen readers.
     // These elements can be hidden via display: none or via a tiny width or perhaps even a clip path.
@@ -129,9 +129,7 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
   const fullText = cleanPhrase(elements.map(element => element.innerText).join(' '))
 
   const validInjections = filterInvalidInTextInjections(mergedInjections)
-  const foundInjections = validInjections.filter(i => {
-    return fullText.includes(cleanPhrase(i.sentence))
-  })
+  const foundInjections = validInjections.filter(i => fullText.includes(cleanPhrase(i.sentence)))
 
   const failedMessages: Record<string, string> = {}
 

package/src/routes/components/Debugger.svelte

@@ -26,7 +26,7 @@
         { label: 'HTML selector', data: data.selector },
       ],
       [`Succesful injections (${succesfulInjections.length})`]: succesfulInjections.map(injection => ({ label: injection.title, data: injection.sentence })),
-      [`Failed injections (${failedInjections.length})`]: failedInjections.map(injection => ({ label: injection.title, data: injection.failed_message })),
+      [`Failed injections (${failedInjections.length})`]: failedInjections.map(injection => ({ label: injection.title, data: `Reason: ${injection.failed_message} | Sentence: ${injection.sentence}` })),
       [`Fetched ads (${data.ads?.length || 0})`]: data.ads?.map(ad => ({ label: ad.campaign_name, data: ad })),
       [`Tracking events (${data.tracked_events?.length || 0})`]: data.tracked_events?.map(event => ({ label: event.event, data: event.payload })),
     }

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

@@ -869,6 +869,8 @@ describe('linkInjection.js', () => {
         <noscript>I am noscript</noscript>
         <figcaption>I am a figcaption</figcaption>
         <time>I am time</time>
+        <label>I am a label</label>
+        <blockquote>I am a quote</blockquote>
 
         <div>
           <a>I am another link</a>

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()
   })