@playpilot/tpi 3.0.1 → 3.1.0-beta.2

package/package.json

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

package/src/lib/api.ts

@@ -3,6 +3,7 @@ import { apiBaseUrl } from './constants'
 import { stringToHash } from './hash'
 import { getLanguage } from './localization'
 import { getPageMetaData } from './meta'
+import type { ConfigResponse } from './types/config'
 import type { LinkInjectionResponse, LinkInjection } from './types/injection'
 import { getFullUrlPath } from './url'
 
@@ -123,6 +124,25 @@ export async function saveLinkInjections(linkInjections: LinkInjection[], html:
   return linkInjections
 }
 
+export async function fetchConfig(): Promise<ConfigResponse | null> {
+  const headers = new Headers({ 'Content-Type': 'application/json' })
+  const apiToken = getApiToken()
+
+  if (!apiToken) throw new Error('No token was provided')
+
+  const response = await fetch(apiBaseUrl + `/domains/config?api-token=${apiToken}`, {
+    headers,
+  })
+
+  if (!response.ok) throw response
+
+  try {
+    return await response.json() || null
+  } catch {
+    return null
+  }
+}
+
 /**
  * Insert random keys into link injections. These are used to identify the links on the page.
  * We can't just use SIDs, as a page might include multiple links of the same title
@@ -143,6 +163,6 @@ export function generateInjectionKey(sid: string): string {
   return sid + '-' + (Math.random() + 1).toString(36).substring(7)
 }
 
-export function getApiToken() {
+export function getApiToken(): string | undefined {
   return window.PlayPilotLinkInjections?.token
 }

package/src/lib/enums/TrackingEvent.ts

@@ -14,4 +14,6 @@ export const TrackingEvent = Object.freeze({
   AfterArticleModalButtonClick: 'ali_after_article_modal_button_click',
 
   InjectionFailed: 'ali_injection_failed',
+  TotalInjectionsCount: 'ali_injection_count',
+  FetchingConfigFailed: 'ali_fetch_config_failed',
 })

package/src/lib/linkInjection.ts

@@ -3,7 +3,6 @@ import TitlePopover from '../routes/components/TitlePopover.svelte'
 import AfterArticlePlaylinks from '../routes/components/AfterArticlePlaylinks.svelte'
 import { cleanPhrase, findTextNodeContaining, isNodeInLink, replaceStartingFrom } from './text'
 import { getLargestValueInArray } from './array'
-import { decodeHtmlEntities } from './html'
 import type { LinkInjection, LinkInjectionTypes, LinkInjectionRanges } from './types/injection'
 
 const keyDataAttribute = 'data-playpilot-injection-key'
@@ -343,24 +342,25 @@ export function isValidInjection(injection: LinkInjection): boolean {
  * Filter links for in-text injections, removing after article, inactive, removed, duplicate, and items without title_details
  */
 export function filterInvalidInTextInjections(injections: LinkInjection[]): LinkInjection[] {
-  return filterRemovedInjections(injections).filter(i => i.in_text !== false && isValidInjection(i))
+  return filterRemovedAndInactiveInjections(injections).filter(i => i.in_text !== false && isValidInjection(i))
 }
 
 /**
  * Filter links for after article injections, removing in-text only, inactive, removed, duplicate, and items without title_details
  */
 export function filterInvalidAfterArticleInjections(injections: LinkInjection[]): LinkInjection[] {
-  return filterRemovedInjections(injections).filter(i => i.after_article === true && isValidInjection(i))
+  return filterRemovedAndInactiveInjections(injections).filter(i => i.after_article === true && isValidInjection(i))
 }
 
 /**
- * Filter injections that were marked as removed or have an equivalent removed manual injections, soley based on the same sentence and title.
+ * Filter injections that were marked as removed or inactive or have an equivalent removed or inactive manual injections, soley based on the same sentence and title.
  */
-export function filterRemovedInjections(injections: LinkInjection[]): LinkInjection[] {
+export function filterRemovedAndInactiveInjections(injections: LinkInjection[]): LinkInjection[] {
   return injections.filter(injection => {
-    if (injection.removed) return false
-    if (injection.manual && !injection.removed) return true
-    return !injections.some(i => i.manual && i.removed && isEquivalentInjection(i, injection))
+    if (injection.removed || injection.inactive) return false
+    if (injection.manual && (!injection.removed && !injection.inactive)) return true
+
+    return !injections.some(i => i.manual && (i.removed || i.inactive) && isEquivalentInjection(i, injection))
   })
 }
 

package/src/lib/text.ts

@@ -55,3 +55,27 @@ export function replaceStartingFrom(text: string, search: string, replacement: s
 export function cleanPhrase(phrase: string): string {
   return decodeHtmlEntities(phrase).toLowerCase().replace(/\s+/g, '')
 }
+
+/**
+ * Truncate a string, but leave a given phrase within view, truncating at both the start and end if necessary.
+ */
+export function truncateAroundPhrase(sentence: string, phrase: string, maxLength: number): string {
+  const index = sentence.indexOf(phrase)
+  const phraseStart = index
+  const padding = Math.floor((maxLength - phrase.length) / 2)
+
+  let start = Math.max(0, phraseStart - padding)
+  let end = start + maxLength
+
+  if (end > sentence.length) {
+    end = sentence.length
+    start = Math.max(0, end - maxLength)
+  }
+
+  let result = sentence.slice(start, end).trim()
+
+  if (start > 0) result = '…' + result
+  if (end < sentence.length) result += '…'
+
+  return result
+}

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

@@ -0,0 +1,3 @@
+export type ConfigResponse = {
+  exclude_urls_pattern?: string
+}

package/src/routes/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte'
-  import { pollLinkInjections } from '$lib/api'
+  import { fetchConfig, pollLinkInjections } from '$lib/api'
   import { clearLinkInjections, getLinkInjectionElements, getLinkInjectionsParentElement, injectLinksInDocument, separateLinkInjectionTypes } from '$lib/linkInjection'
   import { track } from '$lib/tracking'
   import { getFullUrlPath } from '$lib/url'
@@ -41,10 +41,25 @@
   async function initialize(): Promise<void> {
     if (isEditorialMode) authorized = await authorize()
 
+    const url = getFullUrlPath()
+
+    try {
+      const config = await fetchConfig()
+
+      // URL was marked as being excluded, we stop injections here unless we're in editorial mode.
+      if (!isEditorialMode && config?.exclude_urls_pattern && url.match(config.exclude_urls_pattern)) return
+    } catch(error) {
+      // We also return if the config did not get fetched properly, as we can't determine what should and should
+      // get injected without it.
+      track(TrackingEvent.FetchingConfigFailed)
+      console.error('TPI Config failed to fetch', error)
+      return
+    }
+
     // Only trying once when not in editorial mode to prevent late injections (as well as a ton of requests)
     // by users who are not in the editorial view.
     // [TODO] TEMP: Only try once for editorial as well
-    response = await pollLinkInjections(getFullUrlPath(), htmlString, { maxTries: 1 })
+    response = await pollLinkInjections(url, htmlString, { maxTries: 1 })
 
     inject({ aiInjections, manualInjections })
 
@@ -56,7 +71,7 @@
     if (!response?.ai_running) return
     if (!isEditorialMode) return
 
-    const continuedResponse = await pollLinkInjections(getFullUrlPath(), htmlString, { requireCompletedResult: true })
+    const continuedResponse = await pollLinkInjections(url, htmlString, { requireCompletedResult: true })
 
     // @ts-ignore
     editor.requestNewAIInjections(continuedResponse?.ai_injections || [])

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

@@ -5,9 +5,15 @@
   interface Props {
     // eslint-disable-next-line no-unused-vars
     onadd: (injections: LinkInjection[]) => void
+    /** Used to guesstimate the load times. */
+    htmlString?: string
   }
 
-  let { onadd }: Props = $props()
+  const { onadd, htmlString = '' }: Props = $props()
+
+  // Guesstimate AI load times based on the given text length.
+  // The value will always be between 1 and 10 minutes.
+  const fakeLoadTimes = $derived(Math.min(Math.max(htmlString.length * 30, 60000), 600000))
 
   let running = $state(true)
   let injectionsToBeInserted: LinkInjection[] = $state([])
@@ -33,7 +39,8 @@
 
       <div>
         {#if running}
-          AI links are currently processing. You can add manual links while this is ongoing.
+          AI links are currently processing. This can take several minutes.<br>
+          You can add manual links while this is ongoing.
         {:else if injectionsToBeInserted?.length}
           AI links are ready.
           <strong>{injectionsToBeInserted.length} New {injectionsToBeInserted.length > 1 ? 'links were' : 'link was'} found.</strong>
@@ -48,6 +55,10 @@
           <button class="button" onclick={() => dismissed = true}>Dismiss</button>
         {/if}
       </div>
+
+      {#if running}
+        <div class="loading-bar" data-testid="loading-bar" style:animation-duration="{fakeLoadTimes}ms"></div>
+      {/if}
     </div>
 
     <div class="border">
@@ -76,6 +87,7 @@
     line-height: 1.5;
     z-index: 1;
     color: var(--playpilot-text-color-alt);
+    overflow: hidden;
   }
 
   .icon {
@@ -133,4 +145,33 @@
       color: white;
     }
   }
+
+  @keyframes fake-load {
+    0% {
+      width: 0%;
+    }
+
+    2% {
+      width: 20%;
+    }
+
+    70% {
+      width: 85%;
+    }
+
+    100% {
+      width: 90%;
+    }
+  }
+
+  .loading-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 0.15em;
+    border-radius: 0 0.25rem 0.25rem 0;
+    background: linear-gradient(to right, var(--playpilot-light), var(--playpilot-green));
+    animation: fake-load forwards;
+    animation-duration: 20000ms;
+  }
 </style>

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

@@ -88,7 +88,7 @@
     z-index: 10;
     appearance: none;
     position: absolute;
-    top: 0;
+    top: margin(0.5);
     left: 30%;
     width: 40%;
     height: margin(1);
@@ -114,9 +114,9 @@
       display: block;
       content: "";
       position: absolute;
-      top: 40%;
+      top: 20%;
       right: 0;
-      bottom: 40%;
+      bottom: 60%;
       left: 0;
       border-radius: margin(1);
       background: var(--playpilot-text-color);

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

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { fade, fly, slide } from 'svelte/transition'
-  import { flip } from 'svelte/animate'
   import EditorItem from './EditorItem.svelte'
   import DragHandle from './DragHandle.svelte'
+  import ResizeHandle from './ResizeHandle.svelte'
   import Alert from './Alert.svelte'
   import ManualInjection from './ManualInjection.svelte'
   import RoundButton from '../RoundButton.svelte'
@@ -12,6 +12,8 @@
   import { isEquivalentInjection, isValidInjection } from '$lib/linkInjection'
   import type { Position } from '$lib/types/position'
   import type { LinkInjection } from '$lib/types/injection'
+  import { track } from '$lib/tracking'
+  import { TrackingEvent } from '$lib/enums/TrackingEvent'
 
   interface Props {
     linkInjections: LinkInjection[],
@@ -23,9 +25,11 @@
   let { linkInjections = $bindable(), htmlString = '', loading = false, aiRunning = false }: Props = $props()
 
   const editorPositionKey = 'editor-position'
+  const editorHeightKey = 'editor-height'
 
   let editorElement: HTMLElement | null = $state(null)
   let position: Position = $state(JSON.parse(localStorage.getItem(editorPositionKey) || '{ "x": 0, "y": 0 }'))
+  let height: number = $state(parseInt(localStorage.getItem(editorHeightKey) || '0'))
   let manualInjectionActive = $state(false)
   let saving = $state(false)
   let hasError = $state(false)
@@ -35,12 +39,26 @@
 
   const linkInjectionsString = $derived(JSON.stringify(linkInjections))
   const hasChanged = $derived(initialStateString !== linkInjectionsString)
-  const filteredInjections = $derived(linkInjections.filter((i) => i.title_details && !i.removed && !i.duplicate))
+  // Filter out injections without title_details, injections that are removed, duplicate, or are AI injections that failed to inject
+  const filteredInjections = $derived(linkInjections.filter((i) => i.title_details && !i.removed && !i.duplicate && (i.manual || (!i.manual && !i.failed))))
+  const sortedInjections = $derived(sortInjections(filteredInjections))
 
   $effect(() => {
-    if (!loading) untrack(() => initialStateString = linkInjectionsString)
+    if (loading) return
+
+    untrack(() => {
+      initialStateString = linkInjectionsString
+      trackInjectionsCount()
+    })
   })
 
+  function sortInjections(injections: LinkInjection[]): LinkInjection[] {
+    return injections.sort((a, b) => {
+      if (a.failed !== b.failed) return a.failed ? 1 : -1
+      return a.title_details!.title.localeCompare(b.title_details!.title)
+    })
+  }
+
   /** Save the given injections in their current state and rewrite object to returned value */
   async function save(): Promise<void> {
     try {
@@ -56,8 +74,8 @@
     }
   }
 
-  function savePosition(position: Position): void {
-    localStorage.setItem(editorPositionKey, JSON.stringify(position))
+  function saveLocalStorage(key: string, value: string): void {
+    localStorage.setItem(key, value)
   }
 
   function removeInjection(key: string): void {
@@ -69,9 +87,6 @@
     linkInjections = [...linkInjections]
   }
 
-  /**
-   * @param {HTMLElement} itemElement
-   */
   function scrollToItem(itemElement: HTMLElement): void {
     if (!editorElement) return
 
@@ -90,18 +105,25 @@
     }
   }
 
-  /**
-   * @param {Event} event
-   */
   function onscroll(event: Event): void {
     const target = event.target as HTMLElement
     scrollDistance = target.scrollTop
   }
 
+  function trackInjectionsCount() {
+    const payload = {
+      total: linkInjections.length.toString(),
+      failed_automatic: linkInjections.filter(i => i.failed && !i.manual).length.toString(),
+      failed_manual: linkInjections.filter(i => i.failed && i.manual).length.toString(),
+      final_injected: filteredInjections.length.toString(),
+    }
+
+    track(TrackingEvent.TotalInjectionsCount, null, payload)
+  }
+
   /**
    * This is called from outside when new AI links are ready.
    * We only pass on links that do not already exist.
-   * @param {LinkInjection[]} injections
    */
   export function requestNewAIInjections(injections: LinkInjection[]): void {
     const newInjections = injections.filter(injection => {
@@ -115,20 +137,26 @@
 </script>
 
 <section class="editor playpilot-styled-scrollbar" class:panel-open={manualInjectionActive} class:loading bind:this={editorElement} {onscroll}>
-  {#if editorElement}
-    <div class="drag-handle">
-      <DragHandle element={editorElement} {position} limit={{ x: 16, y: 16 }} onchange={savePosition} />
-    </div>
-  {/if}
-
   <header class="header">
+    {#if editorElement}
+      {#if !loading}
+        <div class="handle">
+          <ResizeHandle element={editorElement} {height} onchange={(height) => saveLocalStorage(editorHeightKey, JSON.stringify(height))} />
+        </div>
+      {/if}
+
+      <div class="handle">
+        <DragHandle element={editorElement} {position} limit={{ x: 16, y: 16 }} onchange={(position) => saveLocalStorage(editorPositionKey, JSON.stringify(position))} />
+      </div>
+    {/if}
+
     <h1>Playlinks</h1>
 
     {#if loading}
       <div class="loading">Loading...</div>
     {:else}
-      <div class="bubble" aria-label="{linkInjections.length} found playlinks">
-        {linkInjections.length}
+      <div class="bubble" aria-label="{filteredInjections.length} found playlinks">
+        {filteredInjections.length}
       </div>
 
       <RoundButton onclick={() => manualInjectionActive = true} size="24px" aria-label="Add manual injection">
@@ -138,7 +166,7 @@
   </header>
 
   {#if !loading && aiRunning}
-    <AIIndicator bind:this={aIIndicator} onadd={(newInjections) => newInjections.forEach(i => linkInjections.push(i))} />
+    <AIIndicator {htmlString} bind:this={aIIndicator} onadd={(newInjections) => newInjections.forEach(i => linkInjections.push(i))} />
   {/if}
 
   {#if !loading}
@@ -149,13 +177,11 @@
     {/if}
 
     <div class="items">
-      {#each filteredInjections as linkInjection (linkInjection.key)}
+      {#each sortedInjections as linkInjection (linkInjection.key)}
         <!-- We want to bind to the original object, not the derived object, so we get the index of the injection in the original object by it's key -->
         {@const index = linkInjections.findIndex((i) => i.key === linkInjection.key)}
 
-        <div animate:flip={{ duration: 300 }}>
-          <EditorItem bind:linkInjection={linkInjections[index]} onremove={() => removeInjection(linkInjection.key)} onhighlight={scrollToItem} />
-        </div>
+        <EditorItem bind:linkInjection={linkInjections[index]} onremove={() => removeInjection(linkInjection.key)} onhighlight={scrollToItem} />
       {:else}
         <div class="empty">No links available. Add links manually by clicking the + button and select text to add a link to.</div>
       {/each}
@@ -170,7 +196,7 @@
 
   {#if manualInjectionActive}
     <div
-      class="panel"
+      class="panel playpilot-styled-scrollbar"
       style:top="{scrollDistance}px"
       transition:fly={{ x: Math.min(window.innerWidth, 320), duration: 200, opacity: 1 }}>
       <ManualInjection
@@ -198,8 +224,9 @@
     bottom: margin(1);
     right: margin(1);
     width: 100%;
-    max-width: margin(20);
+    max-width: margin(22);
     height: min(50vh, margin(50));
+    min-height: 10rem;
     padding: margin(1);
     border-radius: margin(1.5);
     background: var(--playpilot-dark);
@@ -218,6 +245,7 @@
 
   .loading {
     height: auto;
+    min-height: 0;
     border-radius: margin(2);
     margin-left: auto;
     padding-right: margin(0.5);
@@ -225,7 +253,7 @@
     font-size: margin(0.85);
   }
 
-  .drag-handle {
+  .handle {
     opacity: 0;
     transition: opacity 150ms;
 
@@ -240,6 +268,7 @@
     top: margin(-1);
     margin: margin(-1) margin(-1) 0;
     padding: margin(1) margin(1) margin(1) margin(1.5);
+    border: 0;
     background: var(--playpilot-dark);
     display: flex;
     align-items: center;
@@ -291,6 +320,7 @@
     transition: opacity 100ms;
     font-family: inherit;
     color: var(--playpilot-text-color-alt);
+    font-size: 0.85rem;
     cursor: pointer;
 
     &:hover {

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

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { slide } from 'svelte/transition'
   import IconChevron from '../Icons/IconChevron.svelte'
-  import IconIMDb from '../Icons/IconIMDb.svelte'
   import Switch from './Switch.svelte'
   import TextInput from './TextInput.svelte'
   import PlaylinkTypeSelect from './PlaylinkTypeSelect.svelte'
@@ -12,6 +11,7 @@
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import type { LinkInjection } from '$lib/types/injection'
   import type { TitleData } from '$lib/types/title'
+  import { truncateAroundPhrase } from '$lib/text'
 
   interface Props {
     linkInjection: LinkInjection,
@@ -22,17 +22,19 @@
 
   const { linkInjection = $bindable(), onremove = () => null, onhighlight = () => null }: Props = $props()
 
-  const { key, sentence, title_details, failed } = $derived(linkInjection || {})
+  const { key, sentence, title_details, failed, inactive } = $derived(linkInjection || {})
 
   // @ts-ignore Definitely not null
   const title: TitleData = $derived(title_details)
+  const truncatedSentence = $derived(truncateAroundPhrase(linkInjection.sentence, linkInjection.title, 60))
 
   let expanded = $state(false)
+  let expandedSentence = $state(false)
   let highlighted = $state(false)
   let element: HTMLElement | null = $state(null)
 
   onMount(() => {
-    if (failed) track(TrackingEvent.InjectionFailed, title, { phrase: linkInjection.title, sentence })
+    if (failed) track(TrackingEvent.InjectionFailed, title, { phrase: linkInjection.title, sentence})
   })
 
   /**
@@ -85,24 +87,26 @@
 <div
   class="item"
   class:highlighted
+  class:inactive
   onmouseenter={() => toggleOnPageResultHighlight(true)}
   onmouseleave={() => toggleOnPageResultHighlight(false)}
   onclick={scrollLinkIntoView}
   bind:this={element}
   out:slide|global={{ duration: 200 }}>
   <div class="header">
-    <img class="poster" src={title.standing_poster} alt="" />
+    <img class="poster" src={title.standing_poster} alt="" width="32" height="48" />
 
     <div class="info">
       <div class="title">{title.title}</div>
 
-      <div class="meta">
-        <span><IconIMDb /> 7.1</span>
-        <span>{title.year}</span>
-        <span>{title.type}</span>
+      <div class="sentence">
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+        {@html (expandedSentence ? sentence : truncatedSentence).replace(linkInjection.title, `<em>${linkInjection.title}</em>`)}
 
-        {#if title.length}
-          <span data-testid="length">{title.length}m</span>
+        {#if truncatedSentence.length < sentence.length}
+          <button class="expand-sentence" onclick={() => expandedSentence = !expandedSentence}>
+            {expandedSentence ? 'Less' : 'More'}
+          </button>
         {/if}
       </div>
     </div>
@@ -123,8 +127,8 @@
           <IconChevron {expanded} />
         </button>
 
-        <Switch label="Visible" active={!linkInjection.inactive} onclick={(active) => { linkInjection.inactive = !active; linkInjection.manual = true }}>
-          Visible
+        <Switch label={inactive ? 'Inactive' : 'Visible'} active={!linkInjection.inactive} onclick={(active) => { linkInjection.inactive = !active; linkInjection.manual = true }}>
+          {inactive ? 'Inactive' : 'Visible'}
         </Switch>
       </div>
     {/if}
@@ -174,6 +178,10 @@
     height: margin(3);
     border-radius: margin(0.25);
     background: var(--playpilot-content);
+
+    .inactive & {
+      opacity: 0.35;
+    }
   }
 
   .title {
@@ -181,26 +189,46 @@
     word-break: break-word;
   }
 
-  .meta {
-    display: flex;
-    gap: margin(0.5);
-    font-size: margin(0.75);
+  .sentence {
+    font-size: 0.7em;
+    line-height: 150%;
+    margin-right: margin(-0.5);
     color: var(--playpilot-text-color-alt);
+    opacity: 0.75;
 
-    span {
-      display: flex;
-      align-items: center;
+    :global(em) {
+      color: var(--playpilot-text-color);
+      font-weight: bold;
     }
+  }
+
+  .expand-sentence {
+    cursor: pointer;
+    appearance: none;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    font-family: inherit;
+    color: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    font-style: italic;
+    text-decoration: underline;
 
-    :global(svg) {
-      display: block;
-      margin: margin(-0.125) margin(0.125) 0 0;
-      height: 1em;
+    &:hover {
+      color: var(--playpilot-text-color);
     }
   }
 
   .content {
-    padding-top: margin(1);
+    padding-top: margin(0.5);
+  }
+
+  .info {
+    .inactive & {
+      opacity: 0.35;
+    }
   }
 
   .context-menu {