@playpilot/tpi 3.3.3 → 3.4.0-beta.1

package/package.json

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

package/src/lib/api.ts

@@ -1,6 +1,6 @@
 import { authorize, getAuthToken, isEditorialModeEnabled } from './auth'
 import { apiBaseUrl } from './constants'
-import { stringToHash } from './hash'
+import { generateRandomHash, stringToHash } from './hash'
 import { getLanguage } from './localization'
 import { getPageMetaData } from './meta'
 import type { ConfigResponse } from './types/config'
@@ -11,13 +11,13 @@ let pollTimeout: ReturnType<typeof setTimeout> | null = null
 
 /**
  * Fetch link injections for a URL.
- * @param url URL of the given article
  * @param html HTML to be crawled
  * @param options
+ * @param [options.url] URL of the given article
  * @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 = {} }: { hash?: string; params?: object } = {}): Promise<LinkInjectionResponse> {
+export async function fetchLinkInjections(html: string, { url = getFullUrlPath(), hash = stringToHash(html), params = {} }: { url?: string, hash?: string; params?: object } = {}): Promise<LinkInjectionResponse> {
   const headers = new Headers({ 'Content-Type': 'application/json' })
   const apiToken = getApiToken()
   const isEditorialMode = isEditorialModeEnabled() ? await authorize() : false
@@ -48,16 +48,13 @@ export async function fetchLinkInjections(url: string, html: string, { hash = st
 /**
  * Link injections take a while to be ready. During this time we poll the endpoint until it returns the result we want.
  * The results return `injections_ready=false` while the injections are not yet ready.
- * @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, onpoll = () => null }:
   { requireCompletedResult?: boolean, pollInterval?: number, maxTries?: number, onpoll?: (_response: LinkInjectionResponse) => void } = {}
 ): Promise<LinkInjectionResponse> {
-  let hash = stringToHash(html)
   let currentTry = 0
 
   // Clear pollTimeout if it is already running to prevent multiple timeouts from running at the same time
@@ -72,7 +69,7 @@ export async function pollLinkInjections(
   const poll = async (resolve: Function, reject: Function): Promise<void> => {
     let response
     try {
-      response = await fetchLinkInjections(url, html, { hash })
+      response = await fetchLinkInjections(html)
 
       if (requireCompletedResult && (response.automation_enabled && response.ai_running)) throw new Error
 
@@ -117,7 +114,7 @@ export async function saveLinkInjections(linkInjections: LinkInjection[], html:
     removed: !!linkInjection.removed
   }))
 
-  const response = await fetchLinkInjections(getFullUrlPath(), html, {
+  const response = await fetchLinkInjections(html, {
     params: {
       private_token: getAuthToken(),
       link_injections: newLinkInjections,
@@ -166,7 +163,7 @@ function insertRandomKeys(linkInjections: LinkInjection[]): LinkInjection[] {
  * @returns Random string preprending with title sid.
  */
 export function generateInjectionKey(sid: string): string {
-  return sid + '-' + (Math.random() + 1).toString(36).substring(7)
+  return sid + '-' + generateRandomHash()
 }
 
 export function getApiToken(): string | undefined {

package/src/lib/hash.ts

@@ -12,3 +12,7 @@ export function stringToHash(string: string): string {
 
   return hash.toString(16)
 }
+
+export function generateRandomHash() {
+  return (Math.random() + 1).toString(36).substring(7)
+}

package/src/lib/linkInjection.ts

@@ -1,12 +1,9 @@
 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'
 import { getLargestValueInArray } from './array'
 import type { LinkInjection, LinkInjectionTypes, LinkInjectionRanges } from './types/injection'
-import { isHoldingSpecialKey } from './event'
-import { playFallbackViewTransition } from './viewTransition'
 
 const keyDataAttribute = 'data-playpilot-injection-key'
 const keySelector = `[${keyDataAttribute}]`
@@ -15,7 +12,6 @@ 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.
@@ -32,7 +28,7 @@ export function getLinkInjectionElements(parentElement: HTMLElement): HTMLElemen
     if (validElements.includes(element)) continue
 
     // Ignore links, buttons, and headers
-    if (/^(A|BUTTON|SCRIPT|NOSCRIPT|STYLE|IFRAME|FIGCAPTION|H[1-6])$/.test(element.tagName)) continue
+    if (/^(A|BUTTON|SCRIPT|NOSCRIPT|STYLE|IFRAME|H[1-6])$/.test(element.tagName)) continue
 
     // Check if this element has a direct text node
     const hasTextNode = Array.from(element.childNodes).some(
@@ -94,10 +90,9 @@ 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[], injections: LinkInjectionTypes = { aiInjections: [], manualInjections: [] }): LinkInjection[] {
-  clearLinkInjections()
-
+export function injectLinksInDocument(elements: HTMLElement[], onclick: (LinkInjection: LinkInjection) => void, injections: LinkInjectionTypes = { aiInjections: [], manualInjections: [] }): LinkInjection[] {
   const mergedInjections = mergeInjectionTypes(injections)
+
   if (!mergedInjections) return []
 
   // Find injection in text content of all elements together, ignore potential HTML elements.
@@ -167,11 +162,11 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
     }
   }
 
-  addLinkInjectionEventListeners(validInjections)
+  addLinkInjectionEventListeners(validInjections, onclick)
   addCSSVariablesToLinks()
 
   const afterArticleInjections = filterInvalidAfterArticleInjections(mergedInjections)
-  if (afterArticleInjections.length) insertAfterArticlePlaylinks(elements, afterArticleInjections)
+  if (afterArticleInjections.length) insertAfterArticlePlaylinks(elements, afterArticleInjections, onclick)
 
   return mergedInjections.filter(i => i.title_details).map((injection, index) => {
     // Favour manual injections over AI injections
@@ -224,11 +219,9 @@ function addCSSVariablesToLinks(): void {
 /**
  * Add event listeners to all injected links. These events are for both the popover and the modal.
  */
-function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
+function addLinkInjectionEventListeners(injections: LinkInjection[], onclick: (injection: LinkInjection) => void): void {
   // Open modal on click
   window.addEventListener('click', (event) => {
-    if (isHoldingSpecialKey(event)) return
-
     const target = event.target as HTMLElement | null
     if (!target?.parentElement) return
 
@@ -238,12 +231,7 @@ function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
     const injection = injections.find(injection => key === injection.key)
     if (!injection) return
 
-    event.preventDefault()
-
-    playFallbackViewTransition(() => {
-      destroyLinkPopover(injection, false)
-      openLinkModal(event, injection)
-    }, window.innerWidth >= 600 && !window.matchMedia("(pointer: coarse)").matches)
+    openLinkModal(event, injection, onclick)
   })
 
   const createdInjectionElements = Array.from(document.querySelectorAll(keySelector)) as HTMLElement[]
@@ -262,26 +250,16 @@ function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
 }
 
 /**
- * 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.
+ * 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.
  */
-function openLinkModal(event: MouseEvent, injection: LinkInjection): void {
-  if (isHoldingSpecialKey(event)) return
-  if (activeModalInsertedComponent) return
+function openLinkModal(event: MouseEvent, injection: LinkInjection, onclick: (injection: LinkInjection) => void): void {
+  if (event.ctrlKey || event.metaKey || event.button !== 0) return
 
   event.preventDefault()
 
-  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
+  onclick(injection)
+  destroyLinkPopover(injection)
 }
 
 /**
@@ -325,8 +303,7 @@ 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[]): void {
-  if (afterArticlePlaylinkInsertedComponent) return
+export function insertAfterArticlePlaylinks(elements: HTMLElement[], injections: LinkInjection[], onclickmodal: (linkInjection: LinkInjection) => void) {
   if (!injections.length) return
 
   const target = document.createElement('div')
@@ -337,7 +314,7 @@ export function insertAfterArticlePlaylinks(elements: HTMLElement[], injections:
   target.dataset.playpilotAfterArticlePlaylinks = 'true'
   insertElement.insertAdjacentElement(insertPosition, target)
 
-  afterArticlePlaylinkInsertedComponent = mount(AfterArticlePlaylinks, { target, props: { linkInjections: injections, onclickmodal: (event, injection) => openLinkModal(event, injection) } })
+  afterArticlePlaylinkInsertedComponent = mount(AfterArticlePlaylinks, { target, props: { linkInjections: injections, onclickmodal } })
 }
 
 function clearAfterArticlePlaylinks(): void {
@@ -360,7 +337,6 @@ export function clearLinkInjections(): void {
   Object.values(activePopovers).forEach(({ injection }) => destroyLinkPopover(injection, false))
 
   clearAfterArticlePlaylinks()
-  destroyLinkModal()
 }
 
 /**
@@ -446,4 +422,3 @@ export function isAvailableAsManualInjection(injection: LinkInjection, injection
 export function isEquivalentInjection(injection1: LinkInjection, injection2: LinkInjection): boolean {
   return injection1.title === injection2.title && cleanPhrase(injection1.sentence) === cleanPhrase(injection2.sentence)
 }
-

package/src/lib/localization.ts

@@ -10,7 +10,11 @@ export function t(key: string, language: LanguageCode = getLanguage()): string {
   return translations[key]?.[language] || key
 }
 
+/**
+ * @returns {LanguageCode}
+ */
 export function getLanguage(): LanguageCode {
+  // @ts-ignore
   const configLanguage = window.PlayPilotLinkInjections?.language as LanguageCode | undefined
   const languageCodes = Object.values(Language) as LanguageCode[]
 
@@ -20,14 +24,10 @@ export function getLanguage(): LanguageCode {
     console.warn(`PlayPilot Link Injections: ${configLanguage} is not an accepted language`)
   }
 
-  const documentLanguage = document.querySelector('html')?.getAttribute('lang')
-
-  if (documentLanguage) {
-    if (languageCodes.includes(documentLanguage as LanguageCode)) return documentLanguage as LanguageCode
+  const documentLanguage = document.querySelector('html')?.getAttribute('lang') as LanguageCode | undefined
 
-    // Match against shorthand language codes like da -> da-DK
-    const matched = languageCodes.find(code => code.toLowerCase().startsWith(documentLanguage + '-'))
-    if (matched) return matched
+  if (documentLanguage && languageCodes.includes(documentLanguage)) {
+    return documentLanguage
   }
 
   return Language.English

package/src/lib/scss/_mixins.scss

@@ -6,16 +6,3 @@
     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/lib/scss/global.scss

@@ -73,8 +73,3 @@
     background-color: var(--playpilot-injection-background-color-hover);
   }
 }
-
-::view-transition-old(playpilot-title-content),
-::view-transition-new(playpilot-title-content) {
-  height: 100%;
-}

package/src/lib/scss/variables.scss

@@ -8,7 +8,7 @@
   --playpilot-content: #354367;
   --playpilot-content-light: #4b5b82;
   --playpilot-green: #53bca0;
-  --playpilot-font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  --playpilot-font-family: "Poppins", sans-serif;
   --playpilot-text-color: #fff;
   --playpilot-text-color-alt: #c8d4de;
   --playpilot-shadow:

package/src/lib/session.ts

@@ -0,0 +1,78 @@
+import { fetchLinkInjections } from "./api"
+import { generateRandomHash } from "./hash"
+import type { SessionResponse } from "./types/session"
+
+export const sessionKey = 'PlayPilotEditorialSessionId'
+export const sessionPollPeriodMilliseconds = 5000
+export const sessionPeriodMilliseconds = sessionPollPeriodMilliseconds * 2
+
+/**
+ * Fetch link injections and infer if the current session is allowed to edit. If they are, we make an additional request
+ * where we save the session.
+ * Along with that, we also return automation_enabled and injections_enabled as they are used to update the state of
+ * the current editing session.
+ * @param html Despite not being used, the request still requires a valid html string
+ */
+export async function fetchAsSession(html: string): Promise<SessionResponse> {
+  const { automation_enabled, injections_enabled, session_id, session_last_ping } = await fetchLinkInjections(html)
+
+  const isCurrentlyAllowToEdit = isAllowedToEdit(session_id || null, session_last_ping || null)
+
+  const response = {
+    automation_enabled,
+    injections_enabled,
+    session_id,
+    session_last_ping,
+  }
+
+  if (!isCurrentlyAllowToEdit) return response
+
+  return await saveCurrentSession(html)
+}
+
+/**
+ * Save the current users session id as the currently active session. This is always completed regardless of if the user
+ * is the current owner of the session, so check that first if necessary!
+ * @param html Despite not being used, the request still requires a valid html string
+ */
+export async function saveCurrentSession(html: string): Promise<SessionResponse> {
+  const sessionId = getSessionId()
+  const now = new Date(Date.now()).toISOString()
+
+  const params = {
+    session_id: sessionId,
+    session_last_ping: now.toString(),
+  }
+
+  const { automation_enabled, injections_enabled } = await fetchLinkInjections(html, { params })
+
+  return {
+    automation_enabled,
+    injections_enabled,
+    ...params,
+  }
+}
+
+export function isAllowedToEdit(responseSessionId: string | null, responseSessionLastPing: string | null): boolean {
+  if (!responseSessionId || !responseSessionLastPing) return true
+
+  const now = Date.now()
+  const responseSessionLastPingDate = new Date(responseSessionLastPing)
+  const currentSessionId = getSessionId()
+
+  // Last session ping was older than given period, so the previous session has likely ended
+  if (now - responseSessionLastPingDate.getTime() > sessionPeriodMilliseconds) return true
+
+  return currentSessionId === responseSessionId
+}
+
+export function getSessionId(): string {
+  return sessionStorage.getItem(sessionKey) || setSessionId()
+}
+
+export function setSessionId(): string {
+  const id = sessionStorage.getItem(sessionKey) || generateRandomHash()
+  sessionStorage.setItem(sessionKey, id)
+
+  return id
+}

package/src/lib/tracking.ts

@@ -1,7 +1,6 @@
 import { get } from "svelte/store"
 import { currentDomainSid, currentOrganizationSid } from "./stores/organization"
 import type { TitleData } from "./types/title"
-import { getFullUrlPath } from "./url"
 
 const baseUrl = 'https://insights.playpilot.net'
 
@@ -23,7 +22,7 @@ export async function track(event: string, title: TitleData | null = null, paylo
     }
   }
 
-  payload.url = getFullUrlPath()
+  payload.url = window.location.href
   payload.organization_sid = get(currentOrganizationSid)
   payload.domain_sid = get(currentDomainSid)
 

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

@@ -32,6 +32,8 @@ export type LinkInjectionResponse = {
   link_injections: LinkInjection[] | null
   organization_sid?: string
   domain_sid?: string
+  session_id?: string | null
+  session_last_ping?: string | null
 }
 
 export type LinkInjectionTypes = {

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

@@ -0,0 +1,14 @@
+import type { LinkInjectionResponse } from "./injection"
+
+export type SessionResponse = Omit<
+  LinkInjectionResponse,
+  'injections_ready' |
+  'page_updated' |
+  'ai_running' |
+  'ai_progress_message' |
+  'ai_progress_percentage' |
+  'ai_injections' |
+  'organization_sid' |
+  'domain_sid' |
+  'link_injections'
+>

package/src/routes/+page.svelte

@@ -7,6 +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,12 +17,12 @@
   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)
   let loading = $state(true)
   let linkInjections: LinkInjection[] = $state([])
-  let editor = $state()
 
   // @ts-ignore It's ok if the response is empty
   const { ai_injections: aiInjections = [], link_injections: manualInjections = [] } = $derived(response || {})
@@ -47,10 +48,9 @@
 
     if (isEditorialMode) authorized = await authorize()
 
-    const url = getFullUrlPath()
-
     try {
       const config = await fetchConfig()
+      const url = getFullUrlPath()
 
       // 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
@@ -64,7 +64,7 @@
 
     // 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.
-    response = await pollLinkInjections(url, htmlString, { maxTries: 1 })
+    response = await pollLinkInjections(htmlString, { maxTries: 1 })
 
     loading = false
 
@@ -84,18 +84,28 @@
     // 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, onpoll: (update) => response = update })
+    response = await pollLinkInjections(htmlString, { requireCompletedResult: true, onpoll: (update) => response = update })
     inject({ aiInjections, manualInjections })
   }
 
   function rerender(): void {
+    clearLinkInjections()
     inject(separateLinkInjectionTypes(linkInjections))
   }
 
+  function reinitializeEditor(): void {
+    isEditorialMode = false
+
+    requestAnimationFrame(() => {
+      isEditorialMode = true
+      initialize()
+    })
+  }
+
   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, injections)
+    const filteredInjections = injectLinksInDocument(elements, setTarget, injections)
     if (JSON.stringify(filteredInjections) !== JSON.stringify(linkInjections)) linkInjections = filteredInjections
 
     const successfulInjections = filteredInjections.filter(i => !i.failed)
@@ -109,6 +119,10 @@
     })
   }
 
+  function setTarget(injection: LinkInjection): void {
+    activeInjection = injection
+  }
+
   function openEditorialMode() {
     isEditorialMode = true
     setEditorialParamInUrl()
@@ -127,9 +141,9 @@
   {#if isEditorialMode && authorized}
     <Editor
       bind:linkInjections
-      bind:this={editor}
       {htmlString}
       {loading}
+      onreinitialize={reinitializeEditor}
       injectionsEnabled={response?.injections_enabled}
       aiStatus={{
         automationEnabled: response?.automation_enabled,
@@ -138,9 +152,14 @@
         percentage: response?.ai_progress_percentage,
       }} />
   {/if}
+
+  {#if activeInjection && activeInjection.title_details}
+    <TitleModal title={activeInjection.title_details} onclose={() => activeInjection = null} />
+  {/if}
 </div>
 
 <style lang="scss">
+  @import url('https://fonts.googleapis.com/css?family=Poppins:400,600,700');
   @import url('$lib/scss/variables.scss');
   @import url('$lib/scss/global.scss');
 
@@ -148,5 +167,16 @@
     :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,10 +8,11 @@
   interface Props {
     linkInjections: LinkInjection[],
     // eslint-disable-next-line no-unused-vars
-    onclickmodal?: (event: MouseEvent, linkInjection: LinkInjection) => void
+    onclickmodal?: (linkInjection: LinkInjection) => void
   }
 
-  const { linkInjections, onclickmodal = () => null }: Props = $props()
+  // eslint-disable-next-line no-unused-vars
+  const { linkInjections, onclickmodal = (linkInjection) => null }: Props = $props()
 
   function onclick(title: TitleData, playlink: string): void {
     track(TrackingEvent.AfterArticlePlaylinkClick, title, { playlink })
@@ -20,9 +21,9 @@
   /**
    * Open a modal for the given injection and track the click
    */
-  function openModal(event: MouseEvent, title: TitleData, linkInjection: LinkInjection): void {
+  function openModal(title: TitleData, linkInjection: LinkInjection): void {
     track(TrackingEvent.AfterArticleModalButtonClick, title)
-    onclickmodal(event, linkInjection)
+    onclickmodal(linkInjection)
   }
 </script>
 
@@ -38,7 +39,7 @@
             "{title}" {t('Is Available To Stream')}
 
             <span>
-              <button onclick={(event) => openModal(event, title_details as TitleData, linkInjection)}>
+              <button onclick={() => openModal(title_details as TitleData, linkInjection)}>
                 {t('View Streaming Options')}
               </button>
             </span>