@playpilot/tpi 8.38.2 → 8.39.0-beta.1

package/package.json

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

package/src/lib/injection.ts

@@ -8,6 +8,7 @@ import { clearInTextDisclaimer, insertInTextDisclaimer } from './disclaimer'
 import { exploreModalUrl, participantUrl, titleUrl } from './routes'
 import { clearInTextWidgets, insertInTextWidgets } from './inTextWidgets'
 import { encodeHtmlEntities } from './html'
+import type { ParticipantData } from './types/participant'
 
 export const keyDataAttribute = 'data-playpilot-injection-key'
 export const keySelector = `[${keyDataAttribute}]`
@@ -36,6 +37,11 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
   for (const injection of sortInjections(foundInjections)) {
     injectionIndex++
 
+    if (injection.type === 'participant' && !injection.manual && !doesParticipantMeetThreshold(mergedInjections, injection.participant_details!)) {
+      failedMessages[injection.key] = 'Participant does not meet popularity threshold.'
+      continue
+    }
+
     const elementIndex = elements.findIndex(element => cleanPhrase(element.innerText).includes(cleanPhrase(injection.sentence)))
     const element = elements[elementIndex]
 
@@ -477,3 +483,22 @@ export function hasValidTypeData(injection: LinkInjection): boolean {
 export function getPlayPilotWrapperElement(): Element {
   return document.querySelector('[data-playpilot-link-injections]') || document.body
 }
+
+export function doesParticipantMeetThreshold(injections: LinkInjection[], participant: ParticipantData): boolean {
+  if (participant.popularity === null || participant.popularity === undefined) return true
+
+  const defaultThreshold = 50
+  const configThreshold = window.PlayPilotLinkInjections?.config?.participant_injection_popularity_threshold
+  const threshold = configThreshold ?? defaultThreshold
+  const useArticleAverage = !!window.PlayPilotLinkInjections?.config?.participant_injection_popularity_threshold_use_article_average
+
+  if (useArticleAverage) {
+    const averagePopularity = injections
+      .filter(i => i.type === 'participant')
+      .reduce((total, { participant_details }, _, { length }) => total + (participant_details?.popularity || 0) / length, 0)
+
+    return participant.popularity >= averagePopularity * (threshold / 100)
+  }
+
+  return participant.popularity >= threshold
+}

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

@@ -104,6 +104,17 @@ export type ConfigResponse = {
    */
   open_tpi_links_in_explore?: boolean
 
+  /**
+   * Participants with a popularity score lower than this threshold will not be injected
+   */
+  participant_injection_popularity_threshold?: number
+
+  /**
+   * Whether or not to base the threshold on the article participants average popularity score.
+   * When enabled, this turns `participant_injection_popularity_threshold` into a percentage.
+   */
+  participant_injection_popularity_threshold_use_article_average?: boolean
+
   /**
    * These options are all relevant for the Explore component, which can be inserted as a widget on any page or as a modal.
    * `explore_navigation_selector` is used to select the navigation element that should be copied and inserted _after_.

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

@@ -17,6 +17,7 @@ export type ParticipantData = {
   }
   gender: string
   character?: string | null
+  popularity?: number | null
 }
 
 export type Job = 'actor' | 'writer' | 'director'

package/src/routes/components/Debugger.svelte

@@ -22,6 +22,7 @@
   let shown = $state(false)
   let interval: ReturnType<typeof setInterval> | null = null
   let railSize = $state(184)
+  let participantThreshold = $state(50)
 
   onDestroy(() => {
     if (interval) clearInterval(interval)
@@ -175,6 +176,28 @@
 
     <hr />
 
+    <div class="form-group">
+      <small>Participant threshold</small>
+      <input
+        type="range"
+        min={0}
+        max={100}
+        step={1}
+        bind:value={participantThreshold}
+        oninput={(event) => window.PlayPilotLinkInjections.config!.participant_injection_popularity_threshold = (event.target as HTMLFormElement).value} />
+      <small>{participantThreshold}</small>
+    </div>
+
+    <div class="form-group">
+      <label for="participant-threshold"><small>Participant use article average</small></label>
+      <input
+        id="participant-threshold"
+        type="checkbox"
+        oninput={(event) => window.PlayPilotLinkInjections.config!.participant_injection_popularity_threshold_use_article_average = (event.target as HTMLFormElement).checked} />
+    </div>
+
+    <hr />
+
     <button onclick={onrerender}>Re-inject</button>
     <button onclick={(event) => {
       if (confirm('You sure? Rerunning the AI will take some time, refresh whenever')) {

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

@@ -168,7 +168,7 @@
       {/each}
     </Rail>
   {:then titles}
-    {@const titlesWithoutDuplicates = titles.filter((a, i, titles) => titles.findIndex(b => (b.sid === a.sid)) === i)}
+    {@const titlesWithoutDuplicates = titles?.filter((a, i, titles) => titles.findIndex(b => (b.sid === a.sid)) === i)}
 
     {#if titles?.length >= minimumLength}
       <Rail

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

@@ -1,7 +1,7 @@
 import { fireEvent } from '@testing-library/svelte'
 import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
 
-import { injectLinksInDocument, clearLinkInjections, clearLinkInjection, isAvailableAsManualInjection, filterRemovedAndInactiveInjections, isEquivalentInjection, filterInvalidInTextInjections, filterInvalidAfterArticleInjections, isValidInjection, isValidPlaylinkType, removePlayPilotTitleLinks, hasValidTypeData } from '$lib/injection'
+import { injectLinksInDocument, clearLinkInjections, clearLinkInjection, isAvailableAsManualInjection, filterRemovedAndInactiveInjections, isEquivalentInjection, filterInvalidInTextInjections, filterInvalidAfterArticleInjections, isValidInjection, isValidPlaylinkType, removePlayPilotTitleLinks, hasValidTypeData, doesParticipantMeetThreshold } from '$lib/injection'
 import { mount, unmount } from 'svelte'
 import { fakeFetch, generateInjection } from '../helpers'
 import { openModalForInjectedLink } from '$lib/modal'
@@ -995,6 +995,50 @@ describe('injection.ts', () => {
 
         expect(document.querySelector('[data-playpilot-injection-key]')).toBeTruthy()
       })
+
+      it('Should ignore participants below a given popularity threshold', () => {
+        window.PlayPilotLinkInjections.config = {
+          participant_injection_popularity_threshold: 50,
+        }
+
+        document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
+
+        const elements = Array.from(document.body.querySelectorAll('p'))
+
+        /** @type {import('$lib/types/injection').LinkInjection[]} */
+        const injections = [
+          { ...generateInjection('This is a sentence with an injection.', 'a sentence'), type: 'participant', participant_details: { ...participants[0], popularity: 20 } },
+          { ...generateInjection('This is a sentence with an injection.', 'an injection'), type: 'participant', participant_details: { ...participants[0], popularity: 70 } },
+        ]
+
+        // @ts-ignore
+        injectLinksInDocument(elements, { aiInjections: injections, manualInjections: [] })
+
+        expect(document.querySelectorAll('[data-playpilot-injection-key]')).toHaveLength(1)
+      })
+
+      it('Should ignore participants popularity for manual injections', () => {
+        window.PlayPilotLinkInjections.config = {
+          participant_injection_popularity_threshold: 50,
+        }
+
+        document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
+
+        const elements = Array.from(document.body.querySelectorAll('p'))
+
+        /** @type {import('$lib/types/injection').LinkInjection[]} */
+        const injections = [
+          { ...generateInjection('This is a sentence with an injection.', 'a sentence'), type: 'participant', manual: true, participant_details: { ...participants[0], popularity: 20 } },
+          { ...generateInjection('This is a sentence with an injection.', 'an injection'), type: 'participant', manual: true, participant_details: { ...participants[0], popularity: 70 } },
+        ]
+
+        // @ts-ignore
+        injectLinksInDocument(elements, { aiInjections: [], manualInjections: injections })
+
+        console.log(document.body.innerHTML)
+
+        expect(document.querySelectorAll('[data-playpilot-injection-key]')).toHaveLength(2)
+      })
     })
 
     describe('config.open_tpi_links_in_explore', () => {
@@ -1240,6 +1284,7 @@ describe('injection.ts', () => {
     })
   })
 
+
   describe('removePlayPilotTitleLinks', () => {
     it('Should remove existing title links', () => {
       document.body.innerHTML = `
@@ -1285,4 +1330,60 @@ describe('injection.ts', () => {
       expect(document.querySelector('a')).toBeTruthy()
     })
   })
+
+  describe('doesParticipantMeetThreshold', () => {
+    it('Should return true or false if article average is used and participant is above or below average', () => {
+      window.PlayPilotLinkInjections.config = {
+        participant_injection_popularity_threshold: 75,
+        participant_injection_popularity_threshold_use_article_average: true,
+      }
+
+      const truthyParticipant = { ...participants[0], popularity: 70 }
+      const falseyParticipant = { ...participants[0], popularity: 20 }
+
+      /** @type {import('$lib/types/injection').LinkInjection[]} */
+      const injections = [
+        { ...generateInjection('This is a sentence with an injection.', 'an injection'), type: 'participant', participant_details: truthyParticipant },
+        { ...generateInjection('This is a sentence with an injection.', 'an injection'), type: 'participant', participant_details: falseyParticipant },
+      ]
+
+      expect(doesParticipantMeetThreshold(injections, truthyParticipant)).toBe(true)
+      expect(doesParticipantMeetThreshold(injections, falseyParticipant)).toBe(false)
+    })
+
+    it('Should return true or false if article average is not used and participant is above or below threshold', () => {
+      window.PlayPilotLinkInjections.config = {
+        participant_injection_popularity_threshold: 55,
+      }
+
+      const truthyParticipant = { ...participants[0], popularity: 60 }
+      const falseyParticipant = { ...participants[0], popularity: 40 }
+
+      /** @type {import('$lib/types/injection').LinkInjection[]} */
+      const injections = [
+        { ...generateInjection('This is a sentence with an injection.', 'an injection'), type: 'participant', participant_details: truthyParticipant },
+        { ...generateInjection('This is a sentence with an injection.', 'an injection'), type: 'participant', participant_details: falseyParticipant },
+      ]
+
+      expect(doesParticipantMeetThreshold(injections, truthyParticipant)).toBe(true)
+      expect(doesParticipantMeetThreshold(injections, falseyParticipant)).toBe(false)
+    })
+
+    it('Should return true if threshold is 100, regardless of popularity', () => {
+      window.PlayPilotLinkInjections.config = {
+        participant_injection_popularity_threshold: 0,
+      }
+
+      const truthyParticipant = { ...participants[0], popularity: 0 }
+      const truthyParticipant2 = { ...participants[0], popularity: 60 }
+
+      /** @type {import('$lib/types/injection').LinkInjection[]} */
+      const injections = [
+        { ...generateInjection('This is a sentence with an injection.', 'an injection'), type: 'participant', participant_details: truthyParticipant },
+      ]
+
+      expect(doesParticipantMeetThreshold(injections, truthyParticipant)).toBe(true)
+      expect(doesParticipantMeetThreshold(injections, truthyParticipant2)).toBe(true)
+    })
+  })
 })

package/src/tests/routes/components/Rails/TitlesRail.test.js

@@ -36,7 +36,7 @@ describe('TitlesRail.svelte', () => {
   })
 
   it('Should render all titles', async () => {
-    const { getAllByTestId } = render(TitlesRail, { titles: [title, title] })
+    const { getAllByTestId } = render(TitlesRail, { titles: [{ ...title, sid: '1' }, { ...title, sid: '2' }] })
 
     expect(getAllByTestId('title')).toHaveLength(2)
   })
@@ -202,13 +202,13 @@ describe('TitlesRail.svelte', () => {
   })
 
   it('Should not render rails if fewer than given mimimumLength of titles were returned', () => {
-    const { container } = render(TitlesRail, { titles: [title, title], minimumLength: 3 })
+    const { container } = render(TitlesRail, { titles: [{ ...title, sid: '1' }, { ...title, sid: '2' }], minimumLength: 3 })
 
     expect(container.querySelector('.titles .slider')).not.toBeTruthy()
   })
 
   it('Should render rails if equal or more than given mimimumLength of titles were returned', () => {
-    const { container } = render(TitlesRail, { titles: [title, title, title], minimumLength: 3 })
+    const { container } = render(TitlesRail, { titles: [{ ...title, sid: '1' }, { ...title, sid: '2' }, { ...title, sid: '3' }], minimumLength: 3 })
 
     expect(container.querySelector('.titles .slider')).toBeTruthy()
   })