@playpilot/tpi 6.5.0 → 6.5.1

package/eslint.config.js

@@ -81,4 +81,26 @@ export default [
       ],
     },
   },
+  {
+    ignores: [],
+
+    plugins: {
+      prettier,
+    },
+
+    rules: {
+      'svelte/require-each-key': 'off',
+      'svelte/no-navigation-without-resolve': 'off',
+      'no-unused-vars': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          vars: 'all',
+          args: 'after-used',
+          ignoreRestSiblings: true,
+          argsIgnorePattern: '^_',
+        },
+      ],
+    },
+  },
 ]

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "6.5.0",
+	"version": "6.5.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
@@ -24,7 +24,7 @@
 		"@typescript-eslint/parser": "^8.32.1",
 		"eslint": "^9.27.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.36.0",
+		"eslint-plugin-svelte": "^3.15.0",
 		"globals": "^15.0.0",
 		"happy-dom": "^16.5.3",
 		"prettier": "^3.3.2",

package/src/lib/api/api.ts

@@ -21,6 +21,7 @@ export async function api<T>(path: string, { headers = {}, method = 'GET', body
   const response = await fetch(apiBaseUrl + path, {
     method,
     headers: new Headers({ ...baseHeaders, ...headers }),
+    // eslint-disable-next-line no-undef
     body: body ? JSON.stringify(body as BodyInit) : null,
   })
 

package/src/lib/api/externalPages.ts

@@ -129,6 +129,7 @@ export async function runAiBasedOnResponse(pageText: string, response: LinkInjec
   const isCurrentTimeEqualToResponseTime = currentModifiedTime && responseModifiedTime === currentModifiedTime
 
   if (response.ai_last_run && isCurrentTimeEqualToResponseTime) return response
+  if (new Date(currentModifiedTime || 0) <= new Date(responseModifiedTime || 0)) return response
 
   return await fetchLinkInjections(pageText, { params: { run_ai: true } })
 }

package/src/lib/clipboard.ts

@@ -1,14 +1,14 @@
 export function copyToClipboard(text: string): void {
-  const textarea = document.createElement("textarea")
+  const textarea = document.createElement('textarea')
 
   textarea.value = text
-  textarea.style.position = "fixed"
-  textarea.style.left = "-9999px"
+  textarea.style.position = 'fixed'
+  textarea.style.left = '-9999px'
 
   document.body.appendChild(textarea)
 
   textarea.select()
 
-  document.execCommand("copy")
+  document.execCommand('copy')
   document.body.removeChild(textarea)
 }

package/src/lib/modal.ts

@@ -1,16 +1,16 @@
-import { mount, unmount } from "svelte"
-import { isHoldingSpecialKey } from "./event"
-import type { LinkInjection } from "./types/injection"
-import type { TitleData } from "./types/title"
-import type { ParticipantData } from "./types/participant"
-import { mobileBreakpoint } from "./constants"
-import TitleModal from "../routes/components/TitleModal.svelte"
-import ParticipantModal from "../routes/components/ParticipantModal.svelte"
-import ExploreModal from "../routes/components/Explore/ExploreModal.svelte"
-import { getPlayPilotWrapperElement, keyDataAttribute, keySelector } from "./injection"
-import { playFallbackViewTransition } from "./viewTransition"
-import { destroyLinkPopover } from "./popover"
-import { prefersReducedMotion } from "svelte/motion"
+import { mount, unmount } from 'svelte'
+import { isHoldingSpecialKey } from './event'
+import type { LinkInjection } from './types/injection'
+import type { TitleData } from './types/title'
+import type { ParticipantData } from './types/participant'
+import { mobileBreakpoint } from './constants'
+import TitleModal from '../routes/components/TitleModal.svelte'
+import ParticipantModal from '../routes/components/ParticipantModal.svelte'
+import ExploreModal from '../routes/components/Explore/ExploreModal.svelte'
+import { getPlayPilotWrapperElement, keyDataAttribute, keySelector } from './injection'
+import { playFallbackViewTransition } from './viewTransition'
+import { destroyLinkPopover } from './popover'
+import { prefersReducedMotion } from 'svelte/motion'
 
 type ModalType = 'title' | 'participant' | 'explore'
 
@@ -49,13 +49,13 @@ export function openModal(
   addModalToList({ type, injection, data, scrollPosition, component })
 }
 
-function getModalComponentByType({ type = 'title', target, data, props = {} }: { type: ModalType, target: Element, data: TitleData | ParticipantData | null, props?: Record<string, any> }) {
+function getModalComponentByType({ type = 'title', target, data, props = {} }: { type: ModalType, target: Element, data: TitleData | ParticipantData | null, props?: Record<string, any> }): ReturnType<typeof mount> {
   if (type === 'participant') return mount(ParticipantModal, { target, props: { participant: data as ParticipantData, ...props  } })
   if (type === 'explore') return mount(ExploreModal, { target, props: { ...props  } })
   return mount(TitleModal, { target, props: { title: data as TitleData, ...props } })
 }
 
-function addModalToList({ type = 'title', injection = null, data, scrollPosition = 0, component }: Modal) {
+function addModalToList({ type = 'title', injection = null, data, scrollPosition = 0, component }: Modal): void {
   modals.push({ type, injection, data, scrollPosition, component })
 }
 

package/src/lib/popover.ts

@@ -27,7 +27,7 @@ export function openPopoverForInjectedLink(event: MouseEvent, injection: LinkInj
   }, 100)
 }
 
-export async function destroyLinkPopover(outro: boolean = true) {
+export async function destroyLinkPopover(outro: boolean = true): Promise<void> {
   if (activePopoverInsertedComponent) {
     const promise = unmount(activePopoverInsertedComponent, { outro })
 
@@ -59,10 +59,10 @@ export function destroyLinkPopoverOnMouseleave(event: MouseEvent): void {
   destroyLinkPopover()
 }
 
-export function clearCurrentlyHoveredInjection() {
+export function clearCurrentlyHoveredInjection(): void {
   currentlyHoveredInjection = null
 }
 
-export function isPopoverActive() {
+export function isPopoverActive(): boolean {
   return !!activePopoverInsertedComponent
 }

package/src/lib/routes.ts

@@ -1,5 +1,5 @@
-import { playPilotBaseUrl } from "./constants"
-import type { TitleData } from "./types/title"
+import { playPilotBaseUrl } from './constants'
+import type { TitleData } from './types/title'
 
 export function titleUrl(title: TitleData): string {
   return `${playPilotBaseUrl}/${title.type}/${title.slug}/`

package/src/lib/tracking.ts

@@ -36,6 +36,7 @@ export async function track(event: string, title: TitleData | null = null, paylo
     }
   }
 
+  // eslint-disable-next-line no-undef
   payload.version = __SCRIPT_VERSION__
   payload.url = getFullUrlPath()
   payload.organization_sid = window.PlayPilotLinkInjections?.organization_sid || 'undefined'

package/src/lib/trailer.ts

@@ -1,11 +1,11 @@
-import { mount, unmount } from "svelte"
-import { getPlayPilotWrapperElement } from "./injection"
-import type { TitleData } from "./types/title"
-import YouTubeEmbedOverlay from "../routes/components/YouTubeEmbedOverlay.svelte"
+import { mount, unmount } from 'svelte'
+import { getPlayPilotWrapperElement } from './injection'
+import type { TitleData } from './types/title'
+import YouTubeEmbedOverlay from '../routes/components/YouTubeEmbedOverlay.svelte'
 
 let currentTrailerComponent: object | null = {}
 
-export function openTrailerOverlay(title: TitleData) {
+export function openTrailerOverlay(title: TitleData): void {
   const target = getPlayPilotWrapperElement()
   const props = { onclose: closeTrailerOverlay, embeddable_url: title.embeddable_url || '' }
 

package/src/main.ts

@@ -42,6 +42,7 @@ window.PlayPilotLinkInjections = {
     this.editorial_token = options.editorial_token
     this.selector = options.selector
     this.after_article_selector = options.after_article_selector
+    // eslint-disable-next-line no-undef
     this.after_article_insert_position = options.after_article_insert_position as InsertPosition
     this.language = options.language
     this.region = options.region

package/src/routes/components/Button.svelte

@@ -5,7 +5,6 @@
     variant?: 'filled' | 'border' | 'link'
     size?: 'base' | 'large'
     active?: boolean
-    // eslint-disable-next-line no-unused-vars
     onclick?: (event: MouseEvent) => void
     children?: Snippet
   }

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

@@ -6,7 +6,6 @@
     element: HTMLElement,
     position: Position,
     limit?: Position,
-    // eslint-disable-next-line no-unused-vars
     onchange?: (position: Position) => void
   }
 

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

@@ -21,7 +21,6 @@
   interface Props {
     linkInjection: LinkInjection,
     onremove?: () => void,
-    // eslint-disable-next-line no-unused-vars
     onhighlight?: (element: HTMLElement) => void
   }
 

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

@@ -16,7 +16,6 @@
 
   interface Props {
     pageText: string
-    // eslint-disable-next-line no-unused-vars
     onsave: (linkInjection: LinkInjection) => void
     onclose?: () => void
   }

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

@@ -4,7 +4,6 @@
   interface Props {
     element: HTMLElement,
     height: number,
-    // eslint-disable-next-line no-unused-vars
     onchange?: (height: number) => void
   }
 

package/src/routes/components/Editorial/Search/TitleSearch.svelte

@@ -5,7 +5,6 @@
   import TitleSearchItem from './TitleSearchItem.svelte'
 
   interface Props {
-    // eslint-disable-next-line no-unused-vars
     onselect?: (title: TitleData) => void
     query: string
   }

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

@@ -5,7 +5,6 @@
 
   interface Props {
     pageText?: string,
-    // eslint-disable-next-line no-unused-vars
     onpoll?: ({ injectionsEnabled, aiEnabled }: { injectionsEnabled: boolean, aiEnabled: boolean }) => void,
     onallow?: () => void,
     ondisallow?: () => void,

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

@@ -5,7 +5,6 @@
     active?: boolean,
     fullwidth?: boolean,
     label?: string,
-    // eslint-disable-next-line no-unused-vars
     onclick?: (active: boolean) => void,
     children: Snippet
   }

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

@@ -3,7 +3,6 @@
   import { tick, type Snippet } from 'svelte'
 
   interface Props {
-    // eslint-disable-next-line no-unused-vars
     button: Snippet<[{ toggle: (event: MouseEvent) => void }]>,
     content: Snippet
   }

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

@@ -7,8 +7,7 @@
   import Range from './Range.svelte'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { track } from '$lib/tracking'
-  import { onMount } from 'svelte';
-  import { t } from '$lib/localization';
+  import { t } from '$lib/localization'
 
   type Item = { label: string, value: string }
 
@@ -31,7 +30,7 @@
     data = null,
     fetchData = null,
     range = null,
-    valueAppend = ''
+    valueAppend = '',
   }: Props = $props()
 
   const active = $derived.by(() => {
@@ -97,7 +96,7 @@
           {@const selected = filter[param]?.value as string[] | undefined}
           <TogglesWithSearch options={data} {selected} onchange={(selected) => setFilter(selected, 'array')} />
         {:else if range}
-          {@const value = (filter[param]?.value as unknown as [number, number])}
+          {@const value = filter[param]?.value as unknown as [number, number]}
           <Range {range} {value} label={label} {valueAppend} onchange={(value) => setFilter(value, 'range')} />
         {/if}
       </div>

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

@@ -4,9 +4,7 @@
     value?: [number, number]
     label?: string
     valueAppend?: string
-    // eslint-disable-next-line no-unused-vars
     formatFunction?: (value: number) => string
-    // eslint-disable-next-line no-unused-vars
     onchange?: (value: [number, number]) => void
   }
 

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

@@ -2,7 +2,6 @@
   import IconSearch from '../../Icons/IconSearch.svelte'
 
   interface Props {
-    // eslint-disable-next-line no-unused-vars
     oninput: (query: string) => void
   }
 

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

@@ -11,7 +11,6 @@
     options?: Option[]
     selected?: string[]
     placeholder?: string
-    // eslint-disable-next-line no-unused-vars
     onchange?: (selected: string[]) => void
   }
 

package/src/routes/components/GridTitle.svelte

@@ -6,7 +6,6 @@
 
   interface Props {
     title: TitleData
-    // eslint-disable-next-line no-unused-vars
     onclick?: (event: MouseEvent) => void
   }
 

package/src/routes/components/ListTitle.svelte

@@ -7,7 +7,6 @@
 
   interface Props {
     title: TitleData
-    // eslint-disable-next-line no-unused-vars
     onclick?: (event: MouseEvent) => void
   }
 

package/src/routes/components/Playlinks/AfterArticlePlaylinks.svelte

@@ -7,7 +7,6 @@
 
   interface Props {
     linkInjections: LinkInjection[],
-    // eslint-disable-next-line no-unused-vars
     onclickmodal?: (event: MouseEvent, linkInjection: LinkInjection) => void
   }
 

package/src/routes/components/Playlinks/PlaylinkIcon.svelte

@@ -6,7 +6,6 @@
   interface Props {
     playlink: PlaylinkData
     size?: number
-    // eslint-disable-next-line no-unused-vars
     onclick?: (event: MouseEvent) => void
   }
 

package/src/routes/components/Playlinks/PlaylinkLabel.svelte

@@ -4,7 +4,6 @@
   interface Props {
     playlink: PlaylinkData
     size?: number
-    // eslint-disable-next-line no-unused-vars
     onclick?: (event: MouseEvent) => void
   }
 

package/src/routes/components/PostersScrollReveal.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import { mobileBreakpoint } from '$lib/constants'
   import { onDestroy } from 'svelte'
+  import { SvelteSet } from 'svelte/reactivity'
 
   const linksWithPosters = Array.from(document.querySelectorAll<HTMLElement>('[data-playpilot-poster-url]'))
-  const linksWithCurrentlyVisiblePosters = new Set<HTMLElement>()
+  const linksWithCurrentlyVisiblePosters = new SvelteSet<HTMLElement>()
   const targetThreshold = 0.7
   const posterSelector = '[data-playpilot-poster]'
 
@@ -21,7 +22,7 @@
     setScrollTimeout()
 
     const windowHeight = window.innerHeight
-    const linksWithinTargetViewport = new Set<HTMLElement>()
+    const linksWithinTargetViewport = new SvelteSet<HTMLElement>()
     const targetFromBottom = windowHeight * targetThreshold
     const targetFromTop = windowHeight - targetFromBottom
 

package/src/routes/components/SkeletonText.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <!-- eslint-disable-next-line no-unused-vars -->
-{#each { length: lines } as _}
+{#each { length: lines }}
   <div class="skeleton" style:width="{Math.floor(Math.random() * (max - min) + min)}%">&nbsp;</div>
 {/each}
 

package/src/routes/components/UserJourney.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
   import { isEditorialModeEnabled } from '$lib/api/auth'
-  import { SplitTest } from '$lib/enums/SplitTest'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { keyDataAttribute, keySelector } from '$lib/injection'
-  import { getSplitTestVariantName } from '$lib/splitTest'
   import { track } from '$lib/tracking'
   import { onMount } from 'svelte'
 

package/src/tests/lib/api/externalPages.test.js

@@ -290,7 +290,7 @@ describe('$lib/api/externalPages', () => {
       expect(result).toEqual(response)
     })
 
-    it('Should call api if ai_enabled is true and content_modified_time does not match document time, but no pageText is given', async () => {
+    it('Should not call api if ai_enabled is true and content_modified_time does not match document time, but no pageText is given', async () => {
       document.body.innerHTML = '<meta content="2025-04-20T00:00:00Z" property="article:modified_time">'
       const response = { ai_enabled: true, content_modified_time: '2025-01-01T00:00:00Z' }
 
@@ -308,6 +308,15 @@ describe('$lib/api/externalPages', () => {
       expect(api).not.toHaveBeenCalledTimes(1)
     })
 
+    it('Should not call api if ai_enabled is true but response content_modified_time is before document time', async () => {
+      document.body.innerHTML = '<meta content="2020-04-20T00:00:00Z" property="article:modified_time">'
+      const response = { ai_enabled: true, content_modified_time: '2025-01-01T00:00:00Z' }
+
+      // @ts-ignore
+      await runAiBasedOnResponse('Some text', response)
+      expect(api).not.toHaveBeenCalled()
+    })
+
     it('Should call api if ai_enabled is true and ai_last_run is null, regardless of content_modified_time', async () => {
       const response = { ai_enabled: true, ai_last_run: null }
 

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

@@ -1,9 +1,6 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest'
-import { closeCurrentModal, destroyAllModals, destroyCurrentModal, getAllModals, getPreviousModal, goBackToPreviousModal, openModal } from '$lib/modal'
-import { linkInjections, title } from '$lib/fakeData'
+import { title } from '$lib/fakeData'
 import { mount, unmount } from 'svelte'
-import ParticipantModal from '../../routes/components/ParticipantModal.svelte'
-import TitleModal from '../../routes/components/TitleModal.svelte'
 import { closeTrailerOverlay, openTrailerOverlay } from '$lib/trailer'
 
 vi.mock('svelte', () => ({