@playpilot/tpi 3.7.2 → 3.8.1

package/src/routes/components/Editorial/Editor.svelte

@@ -260,9 +260,6 @@
     overflow-y: auto;
     overflow-x: hidden;
     line-height: normal;
-
-    @include reset-svg();
-    @include global-outlines();
   }
 
   .panel-open {
@@ -380,7 +377,7 @@
   }
 
   .alert {
-    margin: 0 margin(0.5) margin(0.5);
+    margin: margin(0.5) margin(0.5) 0;
   }
 
   .panel {

package/src/routes/components/Editorial/ManualInjection.svelte

@@ -7,11 +7,11 @@
   import TitleSearch from './Search/TitleSearch.svelte'
   import { playPilotBaseUrl } from '$lib/constants'
   import { generateInjectionKey } from '$lib/api'
-  import { decodeHtmlEntities } from '$lib/html'
   import { getLinkInjectionsParentElement } from '$lib/linkInjection'
   import type { LinkInjection } from '$lib/types/injection'
   import type { TitleData } from '$lib/types/title'
   import { heading } from '$lib/actions/heading'
+  import { cleanPhrase } from '$lib/text'
 
   interface Props {
     pageText: string
@@ -58,8 +58,8 @@
     selectionSentence = findSentenceForSelection(selection, selectionText)
 
     const nodeContent = selection.getRangeAt(0).commonAncestorContainer.textContent
-    const documentTextContent = decodeHtmlEntities(pageText)
-    if (!nodeContent || !documentTextContent.includes(nodeContent)) { // Selected content is not within the ALI selector
+    const documentTextContent = cleanPhrase(pageText)
+    if (!nodeContent || !documentTextContent.includes(cleanPhrase(nodeContent))) { // Selected content is not within the ALI selector
       error = 'Selection was not inside of given content'
     }
   }

package/src/routes/components/Modal.svelte

@@ -64,9 +64,6 @@
     @media (min-width: 600px) {
       padding: margin(2);
     }
-
-    @include reset-svg();
-    @include global-outlines();
   }
 
 

package/src/routes/components/Popover.svelte

@@ -76,9 +76,6 @@
     transform: translateY(calc(-100% + var(--offset)));
     z-index: 2147483647; // As high as she goes
 
-    @include reset-svg();
-    @include global-outlines();
-
     &.flip {
       top: auto;
       bottom: calc(var(--offset) + 1px);  /* Add 1 pixel to account for rounding errors */

package/src/routes/components/Title.svelte

@@ -2,7 +2,6 @@
   import Genres from './Genres.svelte'
   import Playlinks from './Playlinks.svelte'
   import Description from './Description.svelte'
-  import Participants from './Participants.svelte'
   import IconIMDb from './Icons/IconIMDb.svelte'
   import { t } from '$lib/localization'
   import type { TitleData } from '$lib/types/title'
@@ -59,10 +58,6 @@
 
     {#if !small}
       <Description text={title.description} blurb={title.blurb} />
-
-      {#if title.participants?.length}
-        <Participants participants={title.participants} />
-      {/if}
     {/if}
   </div>
 </div>

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

@@ -369,7 +369,7 @@ describe('linkInjection.js', () => {
     })
 
     it('Should return corresponding messages for failed injections', () => {
-      const sentence = '<p>This is <a href="/">a sentence</a> with an injection.</p>'
+      const sentence = 'This is <a href="/">a sentence</a> with an injection.'
       document.body.innerHTML = `<p>${sentence}</p>`
 
       const elements = Array.from(document.body.querySelectorAll('p'))
@@ -385,6 +385,23 @@ describe('linkInjection.js', () => {
       expect(results[1].failed_message).toBe('Given sentence was not found in the article.')
     })
 
+    it('Should disregard spaces and special characters in failed message', () => {
+      const sentence = 'This is a &amp; sentence with an injection.'
+      document.body.innerHTML = `<p>${sentence}</p>`
+
+      const elements = Array.from(document.body.querySelectorAll('p'))
+
+      const linkInjections = [
+        generateInjection('This is a&sentence with aninjection.', 'an injection'),
+        generateInjection('This is a&sentence with aninjection.', 'nothing'),
+      ]
+
+      const results = injectLinksInDocument(elements, { aiInjections: [], manualInjections: linkInjections })
+
+      expect(results[0].failed_message).not.toBeTruthy()
+      expect(results[1].failed_message).toBe('The link failed to inject for unknown reasons.')
+    })
+
     it('Should mount popover component when element other than popover or link is hovered', async () => {
       document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
 
@@ -449,6 +466,29 @@ describe('linkInjection.js', () => {
       expect(mount).not.toHaveBeenCalled()
     })
 
+    it('Should not mount popover on mouseover again if link is already being hovered', async () => {
+      document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
+
+      const elements = Array.from(document.body.querySelectorAll('p'))
+      const injections = [
+        generateInjection('This is a sentence with an injection.', 'a sentence'),
+        generateInjection('This is a sentence with an injection.', 'an injection'),
+      ]
+
+      injectLinksInDocument(elements, { aiInjections: injections, manualInjections: [] })
+
+      const [link1, link2] = document.querySelectorAll('[data-playpilot-injection-key]')
+
+      vi.useFakeTimers()
+
+      await fireEvent.mouseEnter(link1)
+      vi.advanceTimersByTime(200)
+      await fireEvent.mouseEnter(link2)
+      vi.advanceTimersByTime(500)
+
+      expect(mount).toHaveBeenCalledTimes(1)
+    })
+
     it('Should inject links of the same phrase when multiple are present', () => {
       document.body.innerHTML = '<p>This is a sentence with an injection and another injection</p>'
 
@@ -734,10 +774,10 @@ describe('linkInjection.js', () => {
     it('Should return elements in the same order they were given', () => {
       document.body.innerHTML = `<section>
         <div>
-          <p><span><strong>Some first text</strong></span></p>
+          <div><span><strong>Some first text</strong></span></div>
           <div>
             <em>Some empasized</em>
-            <main><p><em><i>Some deeply nested text</i></em></p></main>
+            <main><span><em><i>Some deeply nested text</i></em></span></main>
             <div>Some text</div>
           </div>
         </div>
@@ -752,6 +792,33 @@ describe('linkInjection.js', () => {
       expect(elements[2].nodeName).toBe('I')
       expect(elements[3].nodeName).toBe('DIV')
     })
+
+    it('Should exclude elements that match or are in the given excludeElementsSelector attribute', () => {
+      document.body.innerHTML = `<section>
+        <p>I am a regular element</p>
+        <div data-exclude>I am to be excluded. <span>And so am I!</span></div>
+      </section>
+      `
+      const parent = /** @type {HTMLElement} */ (document.querySelector('section'))
+
+      const result = getLinkInjectionElements(parent, '[data-exclude]')
+      expect(result).toHaveLength(1)
+      expect(result[0].innerText).toBe('I am a regular element')
+    });
+
+    it('Should return paragraphs fully even if they contain no direct text nodes, skipping empty paragraphs', () => {
+      document.body.innerHTML = `<section>
+        <p>Some text</p>
+        <p><span>Some text</span> <span>broken up</span></p>
+        <p><span>Some text</span> <span>broken up</span> but also contains direct text</p>
+        <p></p>
+      </section>`
+
+      const parent = /** @type {HTMLElement} */ (document.querySelector('section'))
+      const elements = getLinkInjectionElements(parent)
+
+      expect(elements).toHaveLength(3)
+    })
   })
 
   describe('getLinkInjectionsParentElement', () => {

package/src/tests/routes/+page.test.js

@@ -418,7 +418,7 @@ describe('$routes/+page.svelte', () => {
     })
 
     describe('custom_style', () => {
-      it('Should insert custom html tag with returned value for given selector from config', async () => {
+      it('Should insert custom html tag with returned value from config', async () => {
         vi.mocked(fetchConfig).mockResolvedValueOnce({ custom_style: 'some: style' })
 
         // @ts-ignore
@@ -427,17 +427,7 @@ describe('$routes/+page.svelte', () => {
         render(page)
 
         await waitFor(() => {
-          expect(document.querySelector('#playpilot-custom-style')?.textContent).toBe('.some-element, .modal, .popover { some: style }')
-        })
-      })
-
-      it('Should insert custom html tag with returned value for body when no selector is given', async () => {
-        vi.mocked(fetchConfig).mockResolvedValueOnce({ custom_style: 'some: style' })
-
-        render(page)
-
-        await waitFor(() => {
-          expect(document.querySelector('#playpilot-custom-style')?.textContent).toBe('body, .modal, .popover { some: style }')
+          expect(document.querySelector('#playpilot-custom-style')?.textContent).toBe('[data-playpilot-link-injections] { some: style }')
         })
       })
 

package/src/lib/types/participant.d.ts

@@ -1,13 +0,0 @@
-export type Participant = {
-  sid: string
-  name: string
-  birth_date: string
-  death_date: string | null
-  jobs: Job[]
-  image: string | null
-  image_uuid: string | null
-  gender: string
-  character: string | null
-}
-
-export type Job = 'actor' | 'writer' | 'director'

package/src/routes/components/Participants.svelte

@@ -1,51 +0,0 @@
-<script lang="ts">
-  import type { Participant } from '$lib/types/participant'
-
-  interface Props {
-    participants: Participant[]
-  }
-
-  const { participants }: Props = $props()
-</script>
-
-<h2>Cast</h2>
-
-<div class="participants">
-  {#each participants as participant}
-    <div class="participant">
-      {participant.name}
-
-      <div class="character">{participant.character?.slice(0, 20) || ''}{#if participant.character?.length || 0 > 20}...{/if}</div>
-    </div>
-  {/each}
-</div>
-
-<style lang="scss">
-  h2 {
-    margin: margin(1.5) 0 margin(1);
-    font-size: var(--playpilot-cast-title-font-size, 18px);
-    line-height: normal;
-    font-weight: inherit;
-    color: var(--playpilot-cast-title-text-color, var(--playpilot-text-color));
-  }
-
-  .participants {
-    display: flex;
-    gap: margin(1);
-    width: calc(100% + margin(2));
-    padding: 0 margin(1);
-    margin: 0 margin(-1);
-    overflow: auto;
-    white-space: nowrap;
-    scrollbar-width: none;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  .character {
-    color: var(--playpilot-cast-character-text-color, var(--playpilot-text-color-alt));
-    font-style: italic;
-  }
-</style>

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

@@ -1,33 +0,0 @@
-import { render } from '@testing-library/svelte'
-import { describe, expect, it } from 'vitest'
-
-import Participants from '../../../routes/components/Participants.svelte'
-
-describe('Participants.svelte', () => {
-  it('Should render each given participant', () => {
-    const participants = [
-      { name: 'Some name', character: 'Some character' },
-      { name: 'Some second name', character: 'Second second character' },
-    ]
-    const { getByText } = render(Participants, { participants })
-
-    expect(getByText('Some name')).toBeTruthy()
-    expect(getByText('Some second name')).toBeTruthy()
-  })
-
-  it('Should limit the character name if it is too long', () => {
-    const participants = [{ name: 'Some name', character: 'Some longer character name' }]
-    const { getByText, queryByText } = render(Participants, { participants })
-
-    expect(queryByText('Some longer character name')).not.toBeTruthy()
-    expect(getByText('Some longer characte...')).toBeTruthy()
-  })
-
-  it('Should handle not being given any participants', () => {
-    /** @type {Participant[]} */
-    const participants = []
-    const { container } = render(Participants, { participants })
-
-    expect(container.querySelectorAll('.participant').length).toBe(0)
-  })
-})