@playpilot/tpi 3.1.0 → 3.2.0-beta.2

package/package.json

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

package/src/lib/actions/heading.ts

@@ -0,0 +1,11 @@
+/**
+ * Heading styling of actual `<h1>`, `<h2>`, etc, tags is often styled pretty specifically on pages.
+ * Our elements are affected by the pages styling and this styling can be hard to override.
+ * By always using a <div> we lower the chance of any unexpected styling hitting us.
+ * We still want headings to be semantically correct, which is all this action does.
+ * @example `use:heading{3}`
+ */
+export function heading(node: HTMLElement, level = 1) {
+  node.role = "heading"
+  node.ariaLevel = level.toString()
+}

package/src/lib/api.ts

@@ -14,11 +14,10 @@ let pollTimeout: ReturnType<typeof setTimeout> | null = null
  * @param url URL of the given article
  * @param html HTML to be crawled
  * @param options
- * @param [options.automation] Enable automation, disable when inserting into editorial
  * @param [options.hash] unique key to identify the HTML
  * @param [options.params] Any rest params to include in the request body
  */
-export async function fetchLinkInjections(url: string, html: string, { hash = stringToHash(html), params = {} }: { automation?: boolean; hash?: string; params?: object } = {}): Promise<LinkInjectionResponse> {
+export async function fetchLinkInjections(url: string, html: string, { hash = stringToHash(html), params = {} }: { hash?: string; params?: object } = {}): Promise<LinkInjectionResponse> {
   const headers = new Headers({ 'Content-Type': 'application/json' })
   const apiToken = getApiToken()
   const isEditorialMode = isEditorialModeEnabled() ? await authorize() : false
@@ -113,7 +112,6 @@ export async function saveLinkInjections(linkInjections: LinkInjection[], html:
   const response = await fetchLinkInjections(getFullUrlPath(), html, {
     params: {
       private_token: getAuthToken(),
-      automation_enabled: false,
       link_injections: newLinkInjections,
       text_selector: selector,
     },

package/src/lib/auth.ts

@@ -1,5 +1,7 @@
 import { getApiToken } from './api'
 import { apiBaseUrl } from './constants'
+import { TrackingEvent } from './enums/TrackingEvent'
+import { track } from './tracking'
 
 const cookieName = 'EncryptedToken'
 const urlParam = 'articleReplacementEditToken'
@@ -32,8 +34,11 @@ export async function authorize(href: string = window.location.href): Promise<bo
     setAuthCookie(authToken)
 
     return true
-  } catch(error) {
+  } catch(error: any) {
     console.error(error)
+    track(TrackingEvent.AuthFailed)
+  } finally {
+    removeAuthParamFromUrl()
   }
 
   return false
@@ -84,3 +89,10 @@ export function isEditorialModeEnabled(): boolean {
   const windowToken = window?.PlayPilotLinkInjections?.editorial_token
   return new URLSearchParams(window.location.search).get('playpilot-editorial-mode') === 'true' || !!windowToken
 }
+
+export function removeAuthParamFromUrl(): void {
+  const url = new URL(window.location.href)
+  url.searchParams.delete(urlParam)
+
+  window.history.replaceState({}, '', url)
+}

package/src/lib/constants.ts

@@ -1,2 +1,4 @@
 export const playPilotBaseUrl = 'https://www.playpilot.com'
 export const apiBaseUrl = 'https://partner-api.playpilot.tech/1.0.0'
+
+export const imagePlaceholderDataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAAB+CAMAAACNgsajAAAAb1BMVEU1Q2fI1N5YZoNVYoFndI9qd5JBT3FFU3S8yNS3xNC4xNFBTnDG0t2lscJJV3e9ytaptcWToLOOm6/BzdiZprh3hJ1aaIWJlatte5VPXHx7iJ9zgZlfbYk3RWmNmq5jcY1XZIO2wtCjsMB+i6I9S25IprTeAAABqUlEQVRo3u3W2ZKCMBCF4T5ExRmRVXBfZnn/Z5wKiU5pz1AJ7ZXV/x03HxVCB0jTNE3TNE3TNO0l2rbPNxcFdk8334AINTUD5eSaWbPoQs0qw0CVN98BzNNgE4NVv+ZHsJliuNVt7UgotATAafp/5mZiG4waAB0N5k0kUeg0wMykKDfLvRTl5pxyCFFupjQVo9ykiRTlphzl5nNQNu8C9Hv2lylDT0W2NMyUoeXdLC68KUNLuM7O9HskQ0uLLAEUR2aOQjfORE5LzHP2PMehxpl2k6otM8eh2aQGkBlieyRBYbs3y5Rk6IPZn8mT65XJR6LcROGErwaoxqLm4XvkiTVsy1FoYe5n06zcjazp1Wk0umHz3k9BT6+bXjXR6PnRtKpr755PfRjx4WPz7tXW/26gGYnOvOmrM7xtiK4qYtDOrpGZtnR7JFcSi+Z1XZt7k5d4NCZmcrWxqMzkbRgqN+nAULHpx1RiylFvftJwlxjUz2bWdpPB7NnSxZih5RFrD20Vai4izGOgeenPukMSUE6hte5denI7NMyU1xrSNE3TNE3TNE17hX4ADHsS0j0OCOoAAAAASUVORK5CYII='

package/src/lib/enums/TrackingEvent.ts

@@ -17,4 +17,5 @@ export const TrackingEvent = Object.freeze({
   InjectionFailed: 'ali_injection_failed',
   TotalInjectionsCount: 'ali_injection_count',
   FetchingConfigFailed: 'ali_fetch_config_failed',
+  AuthFailed: 'ali_auth_failed',
 })

package/src/lib/linkInjection.ts

@@ -97,14 +97,15 @@ export function injectLinksInDocument(elements: HTMLElement[], onclick: (LinkInj
 
   // Find injection in text content of all elements together, ignore potential HTML elements.
   // This is to filter out injections that can't be injected anyway.
-  const fullText = elements.map(element => element.innerText).join(' ')
+  const fullText = cleanPhrase(elements.map(element => element.innerText).join(' '))
 
   const validInjections = filterInvalidInTextInjections(mergedInjections)
   const foundInjections = validInjections.filter(i => {
-    return cleanPhrase(fullText).includes(cleanPhrase(i.sentence))
+    return fullText.includes(cleanPhrase(i.sentence))
   })
 
   const ranges: LinkInjectionRanges = {}
+  const failedMessages: Record<string, string> = {}
 
   for (const injection of foundInjections) {
     const elementIndex = elements.findIndex(element => cleanPhrase(element.innerText).includes(cleanPhrase(injection.sentence)))
@@ -113,8 +114,18 @@ export function injectLinksInDocument(elements: HTMLElement[], onclick: (LinkInj
     if (!element) continue
 
     const nodeContainingText = findTextNodeContaining(injection.title, element, ['A'])
+
     // Ignore if the found injection has no node or if it is inside a link.
-    if (!nodeContainingText || isNodeInLink(nodeContainingText)) continue
+    if (!nodeContainingText?.nodeValue || isNodeInLink(nodeContainingText)) {
+      // We check once more where the text was found, this time without ignoring links
+      // so we can determine if the failure was due to it being in a link
+      const linkNodeContainingText = findTextNodeContaining(injection.title, element)
+      if (linkNodeContainingText && isNodeInLink(linkNodeContainingText)) {
+        failedMessages[injection.key] = 'Given text is already inside of a link.'
+      }
+
+      continue
+    }
 
     // Create a wrapper in which the link will be placed. This wrapper exists as a parent for the popover
     // so that it is not directly inside of the link.
@@ -131,9 +142,16 @@ export function injectLinksInDocument(elements: HTMLElement[], onclick: (LinkInj
     linkWrapperElement.insertAdjacentElement('beforeend', linkElement)
 
     // Replace starting from the end of the previously injected link, making sure injections with the same or overlapping
-    // phrases can still be injected.
+    // phrases can still be injected. Additionally we check the index of where the node value starts. This can differentiate from
+    // the actual start if it was partially matched with manual injections. If that martial match contains a phrase that also
+    // occurs in the full sentence before it, it would incorrectly match against that. If that happens to be a link already,
+    // it would break that link with newly inserted HTML.
     const startingIndex = getLargestValueInArray(Object.values(ranges).filter(r => r.elementIndex === elementIndex).map(r => r.to))
-    element.innerHTML = replaceStartingFrom(element.innerHTML, injection.title, linkWrapperElement.outerHTML, startingIndex)
+    const valueIndex = element.innerHTML.indexOf(nodeContainingText.nodeValue)
+    const sentenceIndex = element.innerHTML.indexOf(injection.sentence)
+    const highestIndex = Math.max(startingIndex, valueIndex, sentenceIndex, 0)
+
+    element.innerHTML = replaceStartingFrom(element.innerHTML, injection.title, linkWrapperElement.outerHTML, highestIndex)
 
     const from = element.innerHTML.indexOf(linkWrapperElement.outerHTML)
 
@@ -150,18 +168,23 @@ export function injectLinksInDocument(elements: HTMLElement[], onclick: (LinkInj
   const afterArticleInjections = filterInvalidAfterArticleInjections(mergedInjections)
   if (afterArticleInjections.length) insertAfterArticlePlaylinks(elements, afterArticleInjections, onclick)
 
-  const sortedInjections = sortLinkInjectionsByRange(mergedInjections, ranges)
-
-  return sortedInjections.filter(i => i.title_details).map((injection, index) => {
-    const failed = !injection.inactive && !injection.after_article && !document.querySelector(`[${keyDataAttribute}="${injection.key}"]`)
+  return mergedInjections.filter(i => i.title_details).map((injection, index) => {
     // Favour manual injections over AI injections
     const duplicate = injection.duplicate ?? (!injection.manual && isAvailableAsManualInjection(injection, index, mergedInjections))
 
+    const matchingElement = document.querySelector(`[${keyDataAttribute}="${injection.key}"]`)
+    const failed = isValidPlaylinkType(injection) && !injection.inactive && !injection.after_article && !matchingElement
+    const failedMessage =
+      !failed ? '' :
+        failedMessages[injection.key] ||
+        (!fullText.includes(cleanPhrase(injection.sentence)) ? 'Given sentence was not found in the article.' : 'The link failed to inject for unknown reasons.')
+
     return {
       ...injection,
       inactive: injection.inactive ?? false,
       duplicate,
       failed,
+      failed_message: failedMessage
     }
   })
 }
@@ -325,32 +348,11 @@ export function clearLinkInjection(key: string): void {
   if (element) element.outerHTML = element.textContent || ''
 }
 
-/**
- * Sort injections by where they were inserted. First by their element index, second by where in the element the
- * injection was injected. Injections without range (after article injections or failed injection) go last.
- */
-export function sortLinkInjectionsByRange(injections: LinkInjection[], ranges: LinkInjectionRanges): LinkInjection[] {
-  return injections.sort((a, b) => {
-    const rangeA = ranges[a.key]
-    const rangeB = ranges[b.key]
-
-    if (!rangeA && rangeB) return 1
-    if (rangeA && !rangeB) return -1
-    if (!rangeA && !rangeB) return 0
-
-    if (rangeA?.elementIndex !== rangeB?.elementIndex) {
-      return (rangeA?.elementIndex || 0) - (rangeB?.elementIndex || 0)
-    }
-
-    return (rangeA?.from || 0) - (rangeB?.from || 0)
-  })
-}
-
 /**
  * Merge different injection types
  */
 export function mergeInjectionTypes({ aiInjections, manualInjections }: LinkInjectionTypes): LinkInjection[] {
-  return [...aiInjections, ...manualInjections.map(i => ({ ...i, manual: true }))]
+  return [...manualInjections.map(i => ({ ...i, manual: true })), ...aiInjections]
 }
 
 /**
@@ -367,7 +369,16 @@ export function separateLinkInjectionTypes(injections: LinkInjection[]): LinkInj
  * Returns whether or not an injection would be valid for any sort of injection, text or after_article
  */
 export function isValidInjection(injection: LinkInjection): boolean {
-  return !injection.inactive && !injection.removed && !injection.duplicate && !!injection.title_details
+  return !injection.inactive && !injection.removed && !injection.duplicate && !!injection.title_details && isValidPlaylinkType(injection)
+}
+
+/**
+ * An injection can have be of various playlink types, when all are false equivalent, the link is not valid.
+ * It should be treated similar to an inactive playlink in this case.
+ */
+export function isValidPlaylinkType(injection: LinkInjection): boolean {
+  if (injection.in_text || injection.in_text === undefined) return true
+  return !!injection.after_article
 }
 
 /**

package/src/lib/scss/_mixins.scss

@@ -0,0 +1,8 @@
+// Annoyingly, some pages include global styling to add a fill to every svg.
+// We don't want that, but we can't just apply global styling either, as that would affect their page.
+// So this mixins is to be used inside of other containers.
+@mixin reset-svg() {
+  :global(svg) {
+    fill: none;
+  }
+}

package/src/lib/scss/global.scss

@@ -2,13 +2,13 @@
 
 [data-playpilot-injection-key] {
   position: relative;
+}
 
-  &.injection-highlight {
-    outline: margin(0.25) solid var(--playpilot-primary) !important;
-    outline-offset: margin(0.5) !important;
-    border-radius: margin(0.05);
-    scroll-margin: margin(5);
-  }
+.playpilot-injection-highlight {
+  outline: margin(0.25) solid var(--playpilot-primary) !important;
+  outline-offset: margin(0.5) !important;
+  border-radius: margin(0.05);
+  scroll-margin: margin(5);
 }
 
 .playpilot-styled-scrollbar {

package/src/lib/scss/variables.scss

@@ -19,4 +19,6 @@
     #{margin(0.1) margin(0.1) margin(0.75)} rgba(0, 0, 0, 0.25);
   --playpilot-error: #ea5a5a;
   --playpilot-error-dark: #442533;
+  --playpilot-warning: #f7c74e;
+  --playpilot-warning-dark: #413c23;
 }

package/src/lib/stores/organization.ts

@@ -0,0 +1,4 @@
+import { writable, type Writable } from "svelte/store"
+
+export const currentOrganizationSid: Writable<string | null> = writable(null)
+export const currentDomainSid: Writable<string | null> = writable(null)

package/src/lib/tracking.ts

@@ -1,3 +1,5 @@
+import { get } from "svelte/store"
+import { currentDomainSid, currentOrganizationSid } from "./stores/organization"
 import type { TitleData } from "./types/title"
 
 const baseUrl = 'https://insights.playpilot.net'
@@ -9,7 +11,7 @@ const baseUrl = 'https://insights.playpilot.net'
  * @param [title] Title related to the event
  * @param [payload] Any data that will be included with the event
  */
-export async function track(event: string, title: TitleData | null = null, payload: Record<string, string | number> = {}): Promise<void> {
+export async function track(event: string, title: TitleData | null = null, payload: Record<string, string | number | null> = {}): Promise<void> {
   const headers = new Headers({ 'Content-Type': 'application/json' })
 
   if (title) {
@@ -21,6 +23,8 @@ export async function track(event: string, title: TitleData | null = null, paylo
   }
 
   payload.url = window.location.href
+  payload.organization_sid = get(currentOrganizationSid)
+  payload.domain_sid = get(currentDomainSid)
 
   fetch(baseUrl, {
     headers,
@@ -32,3 +36,12 @@ export async function track(event: string, title: TitleData | null = null, paylo
     })),
   })
 }
+
+/**
+ * Set the sid of the organization and domain to a store..
+ * These are saved for tracking purposes and currently serve no other function.
+ */
+export function setTrackingSids({ organizationSid = null, domainSid = null }: { organizationSid?: string | null, domainSid?: string | null }): void {
+  currentOrganizationSid.set(organizationSid || null)
+  currentDomainSid.set(domainSid || null)
+}

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

@@ -9,6 +9,7 @@ export type LinkInjection = {
   title_details?: TitleData
   inactive?: boolean
   failed?: boolean
+  failed_message?: string
   in_text?: boolean
   after_article?: boolean
   after_article_style?: 'modal_button' | 'playlinks' | null
@@ -26,7 +27,11 @@ export type LinkInjectionResponse = {
   injections_enabled: boolean
   ai_running: boolean
   ai_injections: LinkInjection[] | null
+  ai_progress_message: string
+  ai_progress_percentage: number
   link_injections: LinkInjection[] | null
+  organization_sid?: string
+  domain_sid?: string
 }
 
 export type LinkInjectionTypes = {

package/src/routes/+layout.svelte

@@ -27,12 +27,16 @@
       <h1 use:noClass>Some heading</h1>
       <time datetime="14:00">1 hour ago</time>
       <p use:noClass>Following the success of John M. Chu's 2018 romantic-comedy Crazy Rich Asians, Quan was inspired to return to acting. He first scored a supporting role in the Netflix movie Finding 'Ohana, before securing a starring role in the absurdist comedy-drama Everything Everywhere all At Once. A critical and commercial success, the film earned $143 million against a budget of $14-25 million, and saw Quan win the Academy Award for Best Supporting Actor. Following his win, Quan struggled to choose projects he was satisfied with, passing on an action-comedy three times, before finally taking his first leading role in it, following advice from Spielberg.</p>
-      <p use:noClass>In an interview with Epire &amp; Magazine, Quan reveals he quested starring in Love Hurts, which sees him in the leading role of a former assassin turned successful realtor, whose past returns when his brother attempts to hunt him down. The movie is in a similar vein to successful films such as The Long Kiss Goodnight and Nobody, and Quan discussed how he was reluctant to take the part due to his conditioned beliefs about how an action hero should look. But he reveals that he changed his mind following a meeting with Spielberg, who convinced him to do it.</p>
+      <p use:noClass>In an interview with Epire &amp; Magazine, Quan reveals he quested starring in Love Hurts, which sees him Love Hurts in the leading role of a former assassin turned successful realtor, whose past returns when his brother attempts to hunt him down. The movie is in a similar vein to successful films such as The Long Kiss Goodnight and Nobody, and Quan discussed how he was reluctant to take the part due to his conditioned beliefs about how an action hero should look. But he reveals that he changed his mind following a meeting with Spielberg, who convinced him to do it.</p>
       <p use:noClass><strong use:noClass>Jason Momoa</strong> (”Aquaman”), <strong use:noClass>Jack Black</strong> (”Nacho Libre”) och <strong use:noClass>Jennifer Coolidge</strong> (”The White Lotus”) medverkar i den <strong use:noClass>Jared Hess</strong>-regisserade (”Napolen Dynamite”) filmen. Filmen följer fyra utbölingar som via en magisk portal sugs in i en värld där allt är kubformat. För att komma hem igen måste de övervinna den färgstarka världen.</p>
 
+      <p use:noClass>
+        Following their post-credits scene in <a use:noClass href="/">John Wick</a>, in a new John Wick spinoff.
+      </p>
+
       <ul use:noClass>
         <li use:noClass><strong use:noClass>Winner:</strong> The Zone of Interest</li>
-        <li use:noClass>Oppenheimer</li>
+        <li use:noClass>Oppenheimer and Oppenheimer and Oppenheimer, and Oppenheimer</li>
         <li use:noClass>Past Lives</li>
         <li use:noClass>Anatomy of a Fall</li>
         <li use:noClass>Killers of the Flower Moon</li>

package/src/routes/+page.svelte

@@ -2,7 +2,7 @@
   import { onMount } from 'svelte'
   import { fetchConfig, pollLinkInjections } from '$lib/api'
   import { clearLinkInjections, getLinkInjectionElements, getLinkInjectionsParentElement, injectLinksInDocument, separateLinkInjectionTypes } from '$lib/linkInjection'
-  import { track } from '$lib/tracking'
+  import { setTrackingSids, track } from '$lib/tracking'
   import { getFullUrlPath } from '$lib/url'
   import { isCrawler } from '$lib/crawler'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
@@ -30,15 +30,16 @@
 
   // Rerender link injections when linkInjections change. This is only relevant for editiorial mode.
   $effect(() => {
-    if (isEditorialMode) rerender()
+    if (isEditorialMode && !loading) rerender()
   })
 
   onMount(() => {
     if (isCrawler()) return
 
-    track(TrackingEvent.ArticlePageView)
-
-    initialize()
+    (async () => {
+      await initialize()
+      track(TrackingEvent.ArticlePageView)
+    })()
 
     return () => clearLinkInjections()
   })
@@ -65,23 +66,29 @@
 
     // 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(url, htmlString, { maxTries: 1 })
 
-    inject({ aiInjections, manualInjections })
-
     loading = false
 
+    if (!response) return
+
+    setTrackingSids({ organizationSid: response.organization_sid, domainSid: response.domain_sid })
+
+    // We only show results once they are fully processed. We only inject if AI is no longer running, or isn't
+    // meant to run to begin with.
+    if (!response.ai_running || !response.automation_enabled) {
+      inject({ aiInjections, manualInjections })
+      return
+    }
+
     // A response was previous returned, but injections were still being generated in the backend.
     // With this second request we wait until AI links are ready. We only do this in editorial
     // so as not to suddenly insert new links while a user is reading the article.
-    if (!response?.ai_running) return
     if (!isEditorialMode) return
 
-    const continuedResponse = await pollLinkInjections(url, htmlString, { requireCompletedResult: true })
+    response = await pollLinkInjections(url, htmlString, { requireCompletedResult: true })
 
-    // @ts-ignore
-    editor.requestNewAIInjections(continuedResponse?.ai_injections || [])
+    inject({ aiInjections, manualInjections })
   }
 
   function rerender(): void {
@@ -119,7 +126,18 @@
   {/if}
 
   {#if isEditorialMode && authorized}
-    <Editor bind:linkInjections bind:this={editor} {htmlString} {loading} aiRunning={response?.ai_running && response?.automation_enabled} />
+    <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}
 
   {#if activeInjection && activeInjection.title_details}

package/src/routes/components/Description.svelte

@@ -12,7 +12,7 @@
 </script>
 
 <div>
-  <span class="paragraph">
+  <span class="paragraph" role="paragraph">
     {expanded ? text : limitedText}{#if !expanded && text.length > limit}...{/if}
 
     {#if !expanded && (text.length > limit || blurb)}
@@ -21,12 +21,11 @@
   </span>
 
   {#if expanded}
-    <p>{blurb}</p>
+    <div class="paragraph" role="paragraph">{blurb}</div>
   {/if}
 </div>
 
 <style lang="scss">
-  p,
   .paragraph {
     display: block;
     margin: margin(1) 0 0;