@playpilot/tpi 3.3.0-beta.2 → 3.3.1

package/package.json

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

package/src/lib/api.ts

@@ -51,7 +51,12 @@ export async function fetchLinkInjections(url: string, html: string, { hash = st
  * @param url URL of the given article
  * @param html HTML to be crawled
  */
-export async function pollLinkInjections(url: string, html: string, { requireCompletedResult = false, pollInterval = 3000, maxTries = 600 } = {}): Promise<LinkInjectionResponse> {
+export async function pollLinkInjections(
+  url: string,
+  html: string,
+  { requireCompletedResult = false, pollInterval = 3000, maxTries = 600, onpoll = () => null }:
+  { requireCompletedResult?: boolean, pollInterval?: number, maxTries?: number, onpoll?: (_response: LinkInjectionResponse) => void } = {}
+): Promise<LinkInjectionResponse> {
   let hash = stringToHash(html)
   let currentTry = 0
 
@@ -65,8 +70,9 @@ export async function pollLinkInjections(url: string, html: string, { requireCom
    * @param reject Injections are not yet ready
    */
   const poll = async (resolve: Function, reject: Function): Promise<void> => {
+    let response
     try {
-      const response = await fetchLinkInjections(url, html, { hash })
+      response = await fetchLinkInjections(url, html, { hash })
 
       if (requireCompletedResult && (response.automation_enabled && response.ai_running)) throw new Error
 
@@ -84,6 +90,8 @@ export async function pollLinkInjections(url: string, html: string, { requireCom
         return
       }
 
+      if (response) onpoll(response)
+
       pollTimeout = setTimeout(() => poll(resolve, reject), pollInterval)
     }
   }

package/src/lib/image.ts

@@ -2,6 +2,7 @@
  * NOTE: This is a temporary measure. Images url from the API use a previous format which is to be replaced,
  * but that isn't live yet and requires some extra work. In the meantime we remove part of the URL ourselves.
  */
-export function removeImageUrlPrefix(url: string): string {
+export function removeImageUrlPrefix(url: string | null): string | null {
+  if (!url) return null
   return url.replace('/src/img', '')
 }

package/src/lib/linkInjection.ts

@@ -1,4 +1,5 @@
 import { mount, unmount } from 'svelte'
+import TitleModal from '../routes/components/TitleModal.svelte'
 import TitlePopover from '../routes/components/TitlePopover.svelte'
 import AfterArticlePlaylinks from '../routes/components/AfterArticlePlaylinks.svelte'
 import { cleanPhrase, findTextNodeContaining, isNodeInLink, replaceStartingFrom } from './text'
@@ -12,6 +13,7 @@ const activePopovers: Record<string, { injection: LinkInjection; component: obje
 
 let currentlyHoveredInjection: EventTarget | null = null
 let afterArticlePlaylinkInsertedComponent: object | null = null
+let activeModalInsertedComponent: object | null = null
 
 /**
  * Return a list of all valid text containing elements that may get injected into.
@@ -28,7 +30,7 @@ export function getLinkInjectionElements(parentElement: HTMLElement): HTMLElemen
     if (validElements.includes(element)) continue
 
     // Ignore links, buttons, and headers
-    if (/^(A|BUTTON|SCRIPT|NOSCRIPT|STYLE|IFRAME|H[1-6])$/.test(element.tagName)) continue
+    if (/^(A|BUTTON|SCRIPT|NOSCRIPT|STYLE|IFRAME|FIGCAPTION|H[1-6])$/.test(element.tagName)) continue
 
     // Check if this element has a direct text node
     const hasTextNode = Array.from(element.childNodes).some(
@@ -90,9 +92,10 @@ export function getLinkInjectionsParentElement(): HTMLElement {
  * Replace all found injections within all given elements on the page
  * @returns Returns an array of injections with injections that failed to be inserted marked as `failed`.
  */
-export function injectLinksInDocument(elements: HTMLElement[], onclick: (LinkInjection: LinkInjection) => void, injections: LinkInjectionTypes = { aiInjections: [], manualInjections: [] }): LinkInjection[] {
-  const mergedInjections = mergeInjectionTypes(injections)
+export function injectLinksInDocument(elements: HTMLElement[], injections: LinkInjectionTypes = { aiInjections: [], manualInjections: [] }): LinkInjection[] {
+  clearLinkInjections()
 
+  const mergedInjections = mergeInjectionTypes(injections)
   if (!mergedInjections) return []
 
   // Find injection in text content of all elements together, ignore potential HTML elements.
@@ -162,11 +165,11 @@ export function injectLinksInDocument(elements: HTMLElement[], onclick: (LinkInj
     }
   }
 
-  addLinkInjectionEventListeners(validInjections, onclick)
+  addLinkInjectionEventListeners(validInjections)
   addCSSVariablesToLinks()
 
   const afterArticleInjections = filterInvalidAfterArticleInjections(mergedInjections)
-  if (afterArticleInjections.length) insertAfterArticlePlaylinks(elements, afterArticleInjections, onclick)
+  if (afterArticleInjections.length) insertAfterArticlePlaylinks(elements, afterArticleInjections)
 
   return mergedInjections.filter(i => i.title_details).map((injection, index) => {
     // Favour manual injections over AI injections
@@ -219,7 +222,7 @@ function addCSSVariablesToLinks(): void {
 /**
  * Add event listeners to all injected links. These events are for both the popover and the modal.
  */
-function addLinkInjectionEventListeners(injections: LinkInjection[], onclick: (injection: LinkInjection) => void): void {
+function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
   // Open modal on click
   window.addEventListener('click', (event) => {
     const target = event.target as HTMLElement | null
@@ -231,7 +234,7 @@ function addLinkInjectionEventListeners(injections: LinkInjection[], onclick: (i
     const injection = injections.find(injection => key === injection.key)
     if (!injection) return
 
-    openLinkModal(event, injection, onclick)
+    openLinkModal(event, injection)
   })
 
   const createdInjectionElements = Array.from(document.querySelectorAll(keySelector)) as HTMLElement[]
@@ -250,16 +253,27 @@ function addLinkInjectionEventListeners(injections: LinkInjection[], onclick: (i
 }
 
 /**
- * Prevent default click and run onclick from parent. Ignore clicks that used modifier keys or that were not left click.
- * The event is not fired when the click happens from inside a popover.
+ * Open modal for the corresponding injection by mounting the component and saving it to a variable.
+ * Ignore clicks that used modifier keys or that were not left click.
  */
-function openLinkModal(event: MouseEvent, injection: LinkInjection, onclick: (injection: LinkInjection) => void): void {
+function openLinkModal(event: MouseEvent, injection: LinkInjection): void {
   if (event.ctrlKey || event.metaKey || event.button !== 0) return
+  if (activeModalInsertedComponent) return
 
   event.preventDefault()
 
-  onclick(injection)
   destroyLinkPopover(injection)
+  activeModalInsertedComponent = mount(TitleModal, { target: document.body, props: { title: injection.title_details!, onclose: destroyLinkModal } })
+}
+
+/**
+ * Unmount the modal, removing it from the dom
+ */
+function destroyLinkModal(outro: boolean = true): void {
+  if (!activeModalInsertedComponent) return
+
+  unmount(activeModalInsertedComponent, { outro })
+  activeModalInsertedComponent = null
 }
 
 /**
@@ -303,7 +317,8 @@ function destroyLinkPopover(injection: LinkInjection, outro: boolean = true) {
  * The config object contains a selector option as well as a position. This way a selector can be given and you can
  * choose to insert the after article before or after the given element.
  */
-export function insertAfterArticlePlaylinks(elements: HTMLElement[], injections: LinkInjection[], onclickmodal: (linkInjection: LinkInjection) => void) {
+export function insertAfterArticlePlaylinks(elements: HTMLElement[], injections: LinkInjection[]): void {
+  if (afterArticlePlaylinkInsertedComponent) return
   if (!injections.length) return
 
   const target = document.createElement('div')
@@ -314,7 +329,7 @@ export function insertAfterArticlePlaylinks(elements: HTMLElement[], injections:
   target.dataset.playpilotAfterArticlePlaylinks = 'true'
   insertElement.insertAdjacentElement(insertPosition, target)
 
-  afterArticlePlaylinkInsertedComponent = mount(AfterArticlePlaylinks, { target, props: { linkInjections: injections, onclickmodal } })
+  afterArticlePlaylinkInsertedComponent = mount(AfterArticlePlaylinks, { target, props: { linkInjections: injections, onclickmodal: (event, injection) => openLinkModal(event, injection) } })
 }
 
 function clearAfterArticlePlaylinks(): void {
@@ -337,6 +352,7 @@ export function clearLinkInjections(): void {
   Object.values(activePopovers).forEach(({ injection }) => destroyLinkPopover(injection, false))
 
   clearAfterArticlePlaylinks()
+  destroyLinkModal()
 }
 
 /**

package/src/lib/scss/_mixins.scss

@@ -6,3 +6,16 @@
     fill: none;
   }
 }
+
+@mixin global-outlines() {
+  :global(a),
+  :global(button),
+  :global(input) {
+    transition: outline-offset 100ms;
+
+    &:focus-visible {
+      outline: 2px solid white;
+      outline-offset: 2px;
+    }
+  }
+}

package/src/routes/+page.svelte

@@ -7,7 +7,7 @@
   import { isCrawler } from '$lib/crawler'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { authorize, getAuthToken, isEditorialModeEnabled, removeAuthCookie, setEditorialParamInUrl } from '$lib/auth'
-  import TitleModal from './components/TitleModal.svelte'
+  import Editor from './components/Editorial/Editor.svelte'
   import EditorTrigger from './components/Editorial/EditorTrigger.svelte'
   import type { LinkInjectionResponse, LinkInjection, LinkInjectionTypes } from '$lib/types/injection'
 
@@ -16,7 +16,6 @@
   const htmlString = elements.map(p => p.outerHTML).join('')
 
   let response: LinkInjectionResponse | null = $state(null)
-  let activeInjection: LinkInjection | null = $state(null)
   let isEditorialMode = $state(isEditorialModeEnabled())
   let hasAuthToken = $state(!!getAuthToken())
   let authorized = $state(false)
@@ -85,20 +84,18 @@
     // so as not to suddenly insert new links while a user is reading the article.
     if (!isEditorialMode) return
 
-    response = await pollLinkInjections(url, htmlString, { requireCompletedResult: true })
-
+    response = await pollLinkInjections(url, htmlString, { requireCompletedResult: true, onpoll: (update) => response = update })
     inject({ aiInjections, manualInjections })
   }
 
   function rerender(): void {
-    clearLinkInjections()
     inject(separateLinkInjectionTypes(linkInjections))
   }
 
   function inject(injections: LinkInjectionTypes = { aiInjections, manualInjections }): void {
     // Get filtered injections as they are shown on the page.
     // Only update state if it they are different from current injections.
-    const filteredInjections = injectLinksInDocument(elements, setTarget, injections)
+    const filteredInjections = injectLinksInDocument(elements, injections)
     if (JSON.stringify(filteredInjections) !== JSON.stringify(linkInjections)) linkInjections = filteredInjections
 
     const successfulInjections = filteredInjections.filter(i => !i.failed)
@@ -112,10 +109,6 @@
     })
   }
 
-  function setTarget(injection: LinkInjection): void {
-    activeInjection = injection
-  }
-
   function openEditorialMode() {
     isEditorialMode = true
     setEditorialParamInUrl()
@@ -132,26 +125,18 @@
   {/if}
 
   {#if isEditorialMode && authorized}
-    {#await import('./components/Editorial/Editor.svelte') then result}
-      {@const Editor = result.default}
-
-      <Editor
-        bind:linkInjections
-        bind:this={editor}
-        {htmlString}
-        {loading}
-        injectionsEnabled={response?.injections_enabled}
-        aiStatus={{
-          automationEnabled: response?.automation_enabled,
-          aiRunning: response?.ai_running && response?.automation_enabled,
-          message: response?.ai_progress_message,
-          percentage: response?.ai_progress_percentage,
-        }} />
-    {/await}
-  {/if}
-
-  {#if activeInjection && activeInjection.title_details}
-    <TitleModal title={activeInjection.title_details} onclose={() => activeInjection = null} />
+    <Editor
+      bind:linkInjections
+      bind:this={editor}
+      {htmlString}
+      {loading}
+      injectionsEnabled={response?.injections_enabled}
+      aiStatus={{
+        automationEnabled: response?.automation_enabled,
+        aiRunning: response?.ai_running && response?.automation_enabled,
+        message: response?.ai_progress_message,
+        percentage: response?.ai_progress_percentage,
+      }} />
   {/if}
 </div>
 
@@ -164,16 +149,5 @@
     :global(*) {
       box-sizing: border-box;
     }
-
-    :global(.playpilot-link-injections button),
-    :global(.playpilot-link-injections input) {
-      transition: outline-offset 100ms;
-
-      &:focus-visible,
-      &:focus-visible {
-        outline: 2px solid white;
-        outline-offset: 2px;
-      }
-    }
   }
 </style>

package/src/routes/components/AfterArticlePlaylinks.svelte

@@ -8,11 +8,10 @@
   interface Props {
     linkInjections: LinkInjection[],
     // eslint-disable-next-line no-unused-vars
-    onclickmodal?: (linkInjection: LinkInjection) => void
+    onclickmodal?: (event: MouseEvent, linkInjection: LinkInjection) => void
   }
 
-  // eslint-disable-next-line no-unused-vars
-  const { linkInjections, onclickmodal = (linkInjection) => null }: Props = $props()
+  const { linkInjections, onclickmodal = () => null }: Props = $props()
 
   function onclick(title: TitleData, playlink: string): void {
     track(TrackingEvent.AfterArticlePlaylinkClick, title, { playlink })
@@ -21,9 +20,9 @@
   /**
    * Open a modal for the given injection and track the click
    */
-  function openModal(title: TitleData, linkInjection: LinkInjection): void {
+  function openModal(event: MouseEvent, title: TitleData, linkInjection: LinkInjection): void {
     track(TrackingEvent.AfterArticleModalButtonClick, title)
-    onclickmodal(linkInjection)
+    onclickmodal(event, linkInjection)
   }
 </script>
 
@@ -39,7 +38,7 @@
             "{title}" {t('Is Available To Stream')}
 
             <span>
-              <button onclick={() => openModal(title_details as TitleData, linkInjection)}>
+              <button onclick={(event) => openModal(event, title_details as TitleData, linkInjection)}>
                 {t('View Streaming Options')}
               </button>
             </span>

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

@@ -6,57 +6,78 @@
     automationEnabled?: boolean,
     message?: string,
     percentage?: number,
+    aiInjectionsCount?: number,
   }
 
-  const { aiRunning = false, automationEnabled = false, message = '', percentage = 0 }: Props = $props()
+  const { aiRunning = false, automationEnabled = false, message = '', percentage = 0, aiInjectionsCount = 0 }: Props = $props()
+
+  const initialAIInjectionsCount = aiInjectionsCount
+
+  let dismissed = $state(false)
 </script>
 
-<div class="ai-indicator" class:running={aiRunning}>
-  <div class="content">
-    <div class="icon">
-      <IconAi />
-    </div>
+{#if !dismissed}
+  <div class="ai-indicator" class:running={aiRunning} data-testid="ai-indicator">
+    <div class="content">
+      <div class="icon">
+        <IconAi />
+      </div>
+
+      <div>
+        {#if !automationEnabled}
+          <strong>AI processing is disabled.</strong> Enable AI from the <a href="https://partner.playpilot.net">Partner Portal</a>
+        {:else if aiRunning}
+          <strong>AI links are currently processing.</strong> This can take several minutes. We'll insert all found injections once ready.
+
+          <div class="message">
+            {message}
+
+            <span class="ellipses">
+              {#each { length: 3 }}
+                <span>.</span>
+              {/each}
+            </span>
+          </div>
+
+          <div class="loading-bar">
+            <div class="loading-bar-progress">
+              <div class="loading-bar-fill" data-testid="loading-bar" style:width="{Math.max(percentage, 3)}%"></div>
+            </div>
 
-    <div>
-      {#if !automationEnabled}
-        <strong>AI processing is disabled.</strong> Enable AI from the <a href="https://partner.playpilot.net">Partner Portal</a>
-      {:else if aiRunning}
-        AI links are currently processing. This can take several minutes. We'll automatically insert all found injections once ready.
-
-        <div class="message">
-          {message}
-
-          <span class="ellipses">
-            {#each { length: 3 }}
-              <span>.</span>
-            {/each}
-          </span>
-        </div>
-
-        <div class="loading-bar">
-          <div class="loading-bar-progress">
-            <div class="loading-bar-fill" data-testid="loading-bar" style:width="{Math.max(percentage, 3)}%"></div>
+            <div class="loading-bar-label">{percentage}%</div>
           </div>
+        {:else}
+          <p>
+            <strong>AI has finished processing.</strong> <br>
+            {#if initialAIInjectionsCount === aiInjectionsCount}
+              No new injections where found.
+            {:else}
+              {aiInjectionsCount} Injections where found and added to the page.
+            {/if}
+          </p>
+
+          <button class="dismiss" onclick={() => dismissed = true}>Dismiss</button>
+        {/if}
+      </div>
+    </div>
 
-          <div class="loading-bar-label">{percentage}%</div>
-        </div>
+    <div class="border">
+      {#if aiRunning}
+        <div class="animator" data-test-id="animator"></div>
       {/if}
     </div>
-
-  </div>
-
-  <div class="border">
-    {#if aiRunning}
-      <div class="animator" data-test-id="animator"></div>
-    {/if}
   </div>
-</div>
+{/if}
 
 <style lang="scss">
   a {
     color: currentColor;
   }
 
+  p {
+    margin: 0;
+  }
+
   .ai-indicator {
     position: relative;
     margin: 0 margin(0.5);
@@ -168,4 +189,23 @@
       }
     }
   }
+
+  .dismiss {
+    appearance: none;
+    margin-top: margin(0.25);
+    padding: margin(0.25);
+    border: 2px solid var(--playpilot-content-light);
+    border-radius: margin(0.25);
+    background: var(--playpilot-light);
+    font-family: inherit;
+    color: var(--playpilot-text-color-alt);
+    font-size: margin(0.75);
+    line-height: 1;
+    cursor: pointer;
+
+    &:hover {
+      background: var(--playpilot-content-light);
+      color: var(--playpilot-text-color);
+    }
+  }
 </style>

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

@@ -14,6 +14,7 @@
   import { track } from '$lib/tracking'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { heading } from '$lib/actions/heading'
+  import { separateLinkInjectionTypes } from '$lib/linkInjection'
 
   interface Props {
     linkInjections: LinkInjection[],
@@ -54,6 +55,7 @@
   const filteredInjections = $derived(linkInjections.filter((i) => i.title_details && !i.removed && !i.duplicate && (i.manual || (!i.manual && !i.failed))))
   const sortedInjections = $derived(sortInjections(filteredInjections))
   const { automationEnabled = false, aiRunning = false } = $derived(aiStatus)
+  const initialAiRunning = $derived(!loading && untrack(() => aiStatus.aiRunning))
 
   $effect(() => {
     if (loading) return
@@ -173,8 +175,8 @@
       </div>
     {/if}
 
-    {#if aiRunning || !automationEnabled}
-      <AIIndicator {...aiStatus} />
+    {#if initialAiRunning || !automationEnabled}
+      <AIIndicator {...aiStatus} aiInjectionsCount={separateLinkInjectionTypes(linkInjections).aiInjections.length} />
     {/if}
 
     {#if hasError}
@@ -227,7 +229,7 @@
     width: 100%;
     max-width: margin(22);
     height: min(70vh, margin(40));
-    min-height: 10rem;
+    min-height: min(25rem, 80vh);
     margin: 0;
     padding: margin(1);
     border-radius: margin(1.5);
@@ -241,6 +243,7 @@
     line-height: normal;
 
     @include reset-svg();
+    @include global-outlines();
   }
 
   .panel-open {
@@ -338,7 +341,7 @@
     transition: opacity 100ms;
     font-family: inherit;
     color: var(--playpilot-text-color-alt);
-    font-size: 0.85rem;
+    font-size: margin(0.85);
     cursor: pointer;
 
     &:hover {

package/src/routes/components/Modal.svelte

@@ -65,6 +65,7 @@
     }
 
     @include reset-svg();
+    @include global-outlines();
   }
 
 

package/src/routes/components/Popover.svelte

@@ -77,6 +77,7 @@
     z-index: 2147483647; // As high as she goes
 
     @include reset-svg();
+    @include global-outlines();
 
     &.flip {
       top: auto;

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

@@ -3,6 +3,7 @@ import { fetchConfig, fetchLinkInjections, getApiToken, pollLinkInjections } fro
 import { fakeFetch } from '../helpers'
 import { authorize, isEditorialModeEnabled } from '$lib/auth'
 import { Language } from '$lib/enums/Language'
+import { waitFor } from '@testing-library/svelte'
 
 vi.mock('$lib/auth', async importActual => {
   const actual = await importActual()
@@ -140,6 +141,23 @@ describe('$lib/api', () => {
       expect(global.fetch).toHaveBeenCalledTimes(3)
     })
 
+    it('Should call given onpoll function when polling', async () => {
+      fakeFetch({ response: { automation_enabled: true, ai_running: true } })
+
+      const onpoll = vi.fn()
+      pollLinkInjections('https://some-url', 'some-html', { requireCompletedResult: true, pollInterval: 500, onpoll })
+
+      await waitFor(() => {
+        expect(onpoll).toHaveBeenCalledTimes(1)
+      })
+
+      await new Promise(res => setTimeout(res, 600)) // Wait for a polling
+      expect(onpoll).toHaveBeenCalledTimes(2)
+
+      await new Promise(res => setTimeout(res, 600)) // Wait for a polling
+      expect(onpoll).toHaveBeenCalledTimes(3)
+    })
+
     it('Should stop polling if replacements are ready', async () => {
       const response = { automation_enabled: true, ai_running: false, link_injections: [{ title: 'value' }] }
       fakeFetch({ response })