@playpilot/tpi 8.37.1 → 8.38.0

package/package.json

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

package/src/lib/injectionElements.ts

@@ -17,7 +17,7 @@ export function getLinkInjectionElements(parentElement: HTMLElement, excludeElem
     if (validElements.includes(element)) continue
     if (excludeElementsSelector && element.matches(excludeElementsSelector)) continue
 
-    if (/^(A|BUTTON|SCRIPT|NOSCRIPT|STYLE|IFRAME|FIGCAPTION|TIME|LABEL|BLOCKQUOTE|H1)$/.test(element.tagName)) continue
+    if (/^(A|BUTTON|SCRIPT|NOSCRIPT|STYLE|IFRAME|FIGCAPTION|TIME|LABEL|BLOCKQUOTE|H1|H2|H3|H4|H5)$/.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.

package/src/routes/components/Explore/Filter/Filter.svelte

@@ -48,6 +48,7 @@
     label: t('IMDb'),
     param: 'imdb_score',
     range: [0, 10] as [number, number],
+    step: 0.1,
   }, {
     label: t('Year'),
     param: 'year',

package/src/routes/components/Explore/Filter/FilterItem.svelte

@@ -18,6 +18,7 @@
     data?: ExploreFilterItemArrayValue[] | null
     fetchData?: (() => Promise<ExploreFilterItemArrayValue[]>) | null
     range?: [number, number] | null
+    step?: number
     valueAppend?: string
   }
 
@@ -29,6 +30,7 @@
     data = null,
     fetchData = null,
     range = null,
+    step = 1,
     valueAppend = '',
   }: Props = $props()
 
@@ -87,7 +89,7 @@
           <TogglesWithSearch options={data} {selected} onchange={(selected) => setFilter(selected, 'array')} />
         {:else if range}
           {@const value = filter[param]?.value as unknown as [number, number]}
-          <Range {range} {value} label={label} {valueAppend} onchange={(value) => setFilter(value, 'range')} />
+          <Range {range} {value} {step} label={label} {valueAppend} onchange={(value) => setFilter(value, 'range')} />
         {/if}
       </div>
     {/snippet}

package/src/routes/components/Explore/Filter/Range.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   interface Props {
     range?: [number, number]
+    step?: number
     value?: [number, number]
     label?: string
     valueAppend?: string
@@ -10,6 +11,7 @@
 
   const {
     range = [0, 100],
+    step = 1,
     value = range,
     label = '',
     valueAppend = '',
@@ -67,6 +69,7 @@
       bind:value={lower}
       min={range[0]}
       max={range[1]}
+      {step}
       id="lower"
       class:active />
     <input
@@ -77,6 +80,7 @@
       bind:value={upper}
       min={range[0]}
       max={range[1]}
+      {step}
       id="upper"
       class:active />
 

package/src/routes/components/Participants/Participant.svelte

@@ -49,10 +49,12 @@
 </script>
 
 <div class="header" class:small>
-  <ParticipantImage {participant} />
+  {#if participant.image}
+    <ParticipantImage {participant} />
+  {/if}
 
   <div>
-    <div class="heading" use:heading={2} id="heading">{name}</div>
+    <div class="heading" class:no-image={!participant.image} use:heading={2} id="heading">{name}</div>
 
     {#if description}
       <p class="description" class:expanded={descriptionExpanded}>
@@ -126,6 +128,10 @@
       font-size: theme(detail-title-small-font-size, margin(1.25));
     }
 
+    &.no-image {
+      margin-top: margin(0.5);
+    }
+
     .small & {
       font-size: 1.25em;
     }

package/src/routes/components/Participants/ParticipantImage.svelte

@@ -24,7 +24,7 @@
   }
 </script>
 
-<div class="image">
+<div class="image" data-testid="participant-image">
   {#if participant?.image}
     <img loading="lazy" src={participant.image} alt="" />
 

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

@@ -79,9 +79,11 @@ describe('injectionElements.ts', () => {
       expect(getLinkInjectionElements(parent)[1].tagName).toBe('OL')
     })
 
-    it('Should ignore links, buttons, script tags, style tags, iframes, h1, and more', () => {
+    it('Should ignore links, buttons, script tags, style tags, iframes, headings, and more', () => {
       document.body.innerHTML = `<section>
         <h1>Some header</h1>
+        <h2>Some header</h2>
+        <h3>Some header</h3>
 
         <a>I am a link</a>
         <button>And I am a button</button>
@@ -97,7 +99,7 @@ describe('injectionElements.ts', () => {
 
         <div>
           <a>I am another link</a>
-          <h4>Some smaller header</h4>
+          <span>Some smaller header</span>
           <p>And finally, some text</p>
         </div>
       </section>`

package/src/tests/routes/components/Editorial/ManualInjection.test.js

@@ -152,9 +152,9 @@ describe('ManualInjection.svelte', () => {
     vi.mocked(searchTitles).mockResolvedValueOnce([title])
     vi.mocked(getIndexOfSelection).mockReturnValueOnce({ start: 0, end: 0 })
 
-    document.body.innerHTML = '<main><h2>Some title</h2> <p>Some paragraph</p></main>'
+    document.body.innerHTML = '<main><span>Some title</span> <p>Some paragraph</p></main>'
 
-    const container = document.querySelector('h2')
+    const container = document.querySelector('span')
 
     // @ts-ignore
     window.getSelection = vi.fn(() => ({

package/src/tests/routes/components/Explore/Filter/Range.test.js

@@ -23,6 +23,13 @@ describe('Range.svelte', () => {
     expect(getByText(90)).toBeTruthy()
   })
 
+  it('Should use given step', () => {
+    const { container } = render(Range, { range: [0, 100], step: 0.1 })
+
+    expect(/** @type HTMLInputElement */ (container.querySelectorAll('input')[0]).step).toBe('0.1')
+    expect(/** @type HTMLInputElement */ (container.querySelectorAll('input')[1]).step).toBe('0.1')
+  })
+
   it('Should add append text with the given value in the label', () => {
     const { getByText } = render(Range, {
       range: [0, 100],

package/src/tests/routes/components/Participants/Participant.test.js

@@ -1,4 +1,4 @@
-import { fireEvent, render, waitFor  } from '@testing-library/svelte'
+import { fireEvent, getByTestId, render, waitFor  } from '@testing-library/svelte'
 import { describe, expect, it, vi, beforeEach } from 'vitest'
 
 import Participant from '../../../../routes/components/Participants/Participant.svelte'
@@ -124,18 +124,19 @@ describe('Participant.svelte', () => {
   it('Should render image if given', async () => {
     const participantWithImage = { ...participants[0], image: 'some-image.jpg' }
 
-    const { getByRole } = render(Participant, { participant: participantWithImage })
+    const { getByTestId } = render(Participant, { participant: participantWithImage })
 
     await waitFor(() => {
-      expect(getByRole('presentation')).toBeTruthy()
+      expect(getByTestId('participant-image')).toBeTruthy()
     })
   })
 
   it('Should not render image if not given', async () => {
-    const { queryByRole } = render(Participant, { participant: participants[0] })
+    const { queryByTestId } = render(Participant, { participant: participants[0] })
 
     await waitFor(() => {
-      expect(queryByRole('presentation')).not.toBeTruthy()
+      expect(queryByTestId('participant-image')).not.toBeTruthy()
+      expect(queryByTestId('participant-image')).not.toBeTruthy()
     })
   })