@playpilot/tpi 8.11.0-beta.2 → 8.12.0

package/package.json

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

package/src/lib/api/externalPages.ts

@@ -6,6 +6,7 @@ import type { LinkInjectionResponse, LinkInjection } from '../types/injection'
 import { getFullUrlPath } from '../url'
 import { api } from './api'
 import { getApiToken } from '$lib/token'
+import { getPageTextAndElements } from '$lib/injectionElements'
 
 let pollTimeout: ReturnType<typeof setTimeout> | null = null
 
@@ -13,9 +14,8 @@ let pollTimeout: ReturnType<typeof setTimeout> | null = null
  * Fetch link injections for a URL. This will be either a POST or a GET request depending on whether on not the AI should run.
  */
 export async function fetchLinkInjections(
-  pageText: string | null,
-  { url = getFullUrlPath(), hash = stringToHash(pageText || ''), params = {}, method = 'GET' }:
-  { url?: string, hash?: string, params?: Record<string, any>, method?: 'GET' | 'POST' } = {},
+  { url = getFullUrlPath(), params = {}, method = 'GET' }:
+  { url?: string, params?: Record<string, any>, method?: 'GET' | 'POST' } = {},
 ): Promise<LinkInjectionResponse> {
   const apiToken = getApiToken()
   const isEditorialMode = isEditorialModeEnabled() ? await authorize() : false
@@ -29,8 +29,10 @@ export async function fetchLinkInjections(
   // We use separate requests when running the AI or setting the editor session vs when only getting the results.
   // For regular requests we use a GET endpoint, but when saving data we POST to the same url.
   if (method === 'POST') {
+    const { pageText } = getPageTextAndElements()
+
     if (params.run_ai) {
-      params.hash = hash
+      params.hash = stringToHash(pageText || '')
       params.page_text = pageText
     }
 
@@ -60,7 +62,6 @@ export async function fetchLinkInjections(
  * The results return `injections_ready=false` while the injections are not yet ready.
  */
 export async function pollLinkInjections(
-  pageText: string,
   { requireCompletedResult = false, runAiWhenRelevant = false, pollInterval = 3000, maxTries = 600, onpoll = () => null }:
   { requireCompletedResult?: boolean, runAiWhenRelevant?: boolean, pollInterval?: number, maxTries?: number, onpoll?: (_response: LinkInjectionResponse) => void } = {},
 ): Promise<LinkInjectionResponse> {
@@ -77,19 +78,22 @@ export async function pollLinkInjections(
       // if it does. We're still interested in handling the response from here and don't want it to short circuit
       // just because the fetch failed.
       try {
-        response = await fetchLinkInjections(pageText)
+        response = await fetchLinkInjections()
       } catch(error: any) {
+        console.error(error)
         if (error?.status === 404) {
           // If the GET endpoint returns a 404 no article has been generated yet and we can safely generate
           // a new article. We can safely throw here (meaning we poll again) as nothing will be returned.
           // The first POST indexes the article, the second runs the AI if needed.
-          response = await fetchLinkInjections(pageText, { method: 'POST' })
-          if (response.ai_enabled) response = await fetchLinkInjections(pageText, { params: { run_ai: true }, method: 'POST' })
+          response = await fetchLinkInjections({ method: 'POST' })
+          if (response.ai_enabled) response = await fetchLinkInjections({ params: { run_ai: true }, method: 'POST' })
         }
 
         throw new Error
       }
 
+      const { pageText } = getPageTextAndElements()
+
       if (response && runAiWhenRelevant) response = await runAiBasedOnResponse(pageText, response)
       if (requireCompletedResult && (response.ai_enabled && response.ai_running)) throw new Error
 
@@ -133,10 +137,10 @@ export async function runAiBasedOnResponse(pageText: string, response: LinkInjec
   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 }, method: 'POST' })
+  return await fetchLinkInjections({ params: { run_ai: true }, method: 'POST' })
 }
 
-export async function saveLinkInjections(linkInjections: LinkInjection[], pageText: string): Promise<LinkInjection[]> {
+export async function saveLinkInjections(linkInjections: LinkInjection[]): Promise<LinkInjection[]> {
   const selector = window.PlayPilotLinkInjections?.selector
 
   // Only save manual injections, AI injections should be left intact and can't be saved over
@@ -156,7 +160,7 @@ export async function saveLinkInjections(linkInjections: LinkInjection[], pageTe
     removed: !!linkInjection.removed,
   }))
 
-  const response = await fetchLinkInjections(pageText, {
+  const response = await fetchLinkInjections({
     method: 'POST',
     params: {
       private_token: getAuthToken(),

package/src/lib/api/session.ts

@@ -11,10 +11,9 @@ export const sessionPeriodMilliseconds = sessionPollPeriodMilliseconds * 2
  * where we save the session.
  * Along with that, we also return ai_enabled and injections_enabled as they are used to update the state of
  * the current editing session.
- * @param pageText Despite not being used, the request still requires a valid pageText string
  */
-export async function fetchAsSession(pageText: string): Promise<SessionResponse> {
-  const { ai_enabled, injections_enabled, ai_last_run, session_id, session_last_ping } = await fetchLinkInjections(pageText)
+export async function fetchAsSession(): Promise<SessionResponse> {
+  const { ai_enabled, injections_enabled, ai_last_run, session_id, session_last_ping } = await fetchLinkInjections()
 
   const isCurrentlyAllowToEdit = isAllowedToEdit(session_id || null, session_last_ping || null)
 
@@ -28,15 +27,14 @@ export async function fetchAsSession(pageText: string): Promise<SessionResponse>
 
   if (!isCurrentlyAllowToEdit) return response
 
-  return await saveCurrentSession(pageText)
+  return await saveCurrentSession()
 }
 
 /**
  * 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 pageText Despite not being used, the request still requires a valid pageText string
  */
-export async function saveCurrentSession(pageText: string): Promise<SessionResponse> {
+export async function saveCurrentSession(): Promise<SessionResponse> {
   const sessionId = getSessionId()
   const now = new Date(Date.now()).toISOString()
 
@@ -45,7 +43,7 @@ export async function saveCurrentSession(pageText: string): Promise<SessionRespo
     session_last_ping: now.toString(),
   }
 
-  const { ai_enabled, injections_enabled, ai_last_run } = await fetchLinkInjections(pageText, { params })
+  const { ai_enabled, injections_enabled, ai_last_run } = await fetchLinkInjections({ params })
 
   return {
     ai_enabled,

package/src/lib/injectionElements.ts

@@ -91,7 +91,7 @@ export function getPageText(elements: HTMLElement[]): string {
   return elements.map(element => element.innerText).join('\n\n')
 }
 
-export function getPageTextAndElements(config: ConfigResponse | null): { parentElement: HTMLElement, elements: HTMLElement[], pageText: string } {
+export function getPageTextAndElements(config: ConfigResponse | null = window.PlayPilotLinkInjections?.config || null): { parentElement: HTMLElement, elements: HTMLElement[], pageText: string } {
   const parentElement = getLinkInjectionsParentElement()
   const elements = getLinkInjectionElements(parentElement, config?.exclude_elements_selector || '')
   const pageText = getPageText(elements)

package/src/lib/meta.ts

@@ -68,7 +68,8 @@ export function getDatetime(datetime: string): string | null {
 }
 
 export function getSchemaJson(): Record<string, any> {
-  const schemaElement = document.querySelector('[type="application/ld+json"]')
+  const schemaElements = Array.from(document.querySelectorAll('[type="application/ld+json"]'))
+  const schemaElement = schemaElements.find(element => element.textContent.includes('dateModified') || element.textContent.includes('datePublished'))
 
   if (!schemaElement) return {}
 

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

@@ -42,6 +42,8 @@ export type ScriptConfig = {
   config?: ConfigResponse
   // All ads as fetched from the ads endpoint. This is used as the primary store for ads, each individual ads gets it's data from here.
   ads?: Campaign[]
+  // Estimate playtimes of video embeds listed by their video id.
+  video_playtimes?: Record<string, number>
   // The region the user is in, either fetched from an external service or based on the default region in the config object
   region?: string | null
   // The time at which the script was initialized

package/src/main.ts

@@ -3,7 +3,6 @@ import { fetchConfig } from '$lib/api/config'
 import { pollLinkInjections } from '$lib/api/externalPages'
 import { setConsent } from '$lib/consent'
 import { isCrawler } from '$lib/crawler'
-import { getPageTextAndElements } from '$lib/injectionElements'
 import { isUrlExcludedViaConfig } from '$lib/url'
 
 window.PlayPilotLinkInjections ||= {
@@ -24,6 +23,7 @@ window.PlayPilotLinkInjections ||= {
   initial_link_injections_promise: null,
   time_at_initialize: 0,
   ads: [],
+  video_playtimes: {},
   require_consent: true,
   no_affiliate: false,
   consents: {
@@ -70,9 +70,7 @@ window.PlayPilotLinkInjections ||= {
 
     if (isUrlExcludedViaConfig(this.config)) return
 
-    const { pageText } = getPageTextAndElements(this.config)
-
-    this.initial_link_injections_promise = pollLinkInjections(pageText, { maxTries: 1, runAiWhenRelevant: !isCrawler() })
+    this.initial_link_injections_promise = pollLinkInjections({ maxTries: 1, runAiWhenRelevant: !isCrawler() })
 
     this.mount()
   },

package/src/routes/+layout.svelte

@@ -128,9 +128,14 @@
     line-height: 1.8;
 
     nav {
-      display: flex;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
       gap: margin(1);
 
+      @include desktop {
+        display: flex;
+      }
+
       a {
         padding: margin(0.25) margin(0.75);
         border: 1px solid currentColor;

package/src/routes/+page.svelte

@@ -2,7 +2,6 @@
   import { onDestroy } from 'svelte'
   import { pollLinkInjections } from '$lib/api/externalPages'
   import { clearLinkInjections, injectLinksInDocument, separateLinkInjectionTypes } from '$lib/injection'
-  import { getPageText, getPageTextAndElements } from '$lib/injectionElements'
   import { fireQueuedTrackingEvents, setTrackingSids, track } from '$lib/tracking'
   import { isUrlExcludedViaConfig } from '$lib/url'
   import { isCrawler } from '$lib/crawler'
@@ -11,6 +10,7 @@
   import { fetchConfig } from '$lib/api/config'
   import { insertExplore, insertExploreIntoNavigation } from '$lib/explore'
   import { authorize, getAuthToken, isEditorialModeEnabled, removeAuthCookie, setEditorialParamInUrl } from '$lib/api/auth'
+  import { getPageTextAndElements } from '$lib/injectionElements'
   import type { LinkInjectionResponse, LinkInjection, LinkInjectionTypes } from '$lib/types/injection'
   import Editor from './components/Editorial/Editor.svelte'
   import EditorTrigger from './components/Editorial/EditorTrigger.svelte'
@@ -22,8 +22,6 @@
   import PostersScrollReveal from './components/PostersScrollReveal.svelte'
   import TrackingPixelsForTitleDataPerLink from './components/TrackingPixelsForTitleDataPerLink.svelte'
 
-  let elements: HTMLElement[] = $state([])
-
   let response: LinkInjectionResponse | null = $state(null)
   let isEditorialMode = $state(isEditorialModeEnabled())
   let hasAuthToken = $state(!!getAuthToken())
@@ -35,8 +33,6 @@
   // @ts-ignore It's ok if the response is empty
   const { ai_injections: aiInjections = [], manual_injections: manualInjections = [] } = $derived(response || {})
 
-  const pageText = $derived(getPageText(elements))
-
   const initializePromise = initialize()
 
   $effect(() => {
@@ -86,8 +82,6 @@
       if (isUrlExcluded) return
 
       if (config?.html_selector) window.PlayPilotLinkInjections.selector = config?.html_selector
-
-      elements = getPageTextAndElements(window.PlayPilotLinkInjections.config).elements
     } catch(error) {
       // We return if the config did not get fetched properly, as we can't determine what should and should
       // get injected without it.
@@ -98,7 +92,7 @@
 
     try {
       response = await window.PlayPilotLinkInjections.initial_link_injections_promise || null
-      response ||= await pollLinkInjections(pageText, { maxTries: 1, runAiWhenRelevant: !isCrawler() })
+      response ||= await pollLinkInjections({ maxTries: 1, runAiWhenRelevant: !isCrawler() })
 
       loading = false
 
@@ -114,7 +108,7 @@
 
       if (!isEditorialMode || isCrawler()) return
 
-      response = await pollLinkInjections(pageText, { requireCompletedResult: true, onpoll: (update) => response = update })
+      response = await pollLinkInjections({ requireCompletedResult: true, onpoll: (update) => response = update })
       inject({ aiInjections, manualInjections })
     } catch(error: unknown) {
       console.error(error)
@@ -136,6 +130,7 @@
   }
 
   function inject(injections: LinkInjectionTypes = { aiInjections, manualInjections }): void {
+    const { elements } = getPageTextAndElements()
     const filteredInjections = injectLinksInDocument(elements, injections)
 
     if (JSON.stringify(filteredInjections) !== JSON.stringify(linkInjections)) {
@@ -206,7 +201,6 @@
       <svelte:boundary onerror={(error) => track(TrackingEvent.EditorError, null, { message: (error as Error).message })}>
         <Editor
           bind:linkInjections
-          {pageText}
           {loading}
           onreinitialize={reinitializeEditor}
           injectionsEnabled={response?.injections_enabled}

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

@@ -33,7 +33,6 @@
 
   let {
     linkInjections = $bindable(),
-    pageText = '',
     loading = false,
     injectionsEnabled = false,
     aiStatus = {},
@@ -46,6 +45,8 @@
   const position: Position = JSON.parse(localStorage.getItem(editorPositionKey) || '{ "x": 0, "y": 0 }')
   const height: number = parseInt(localStorage.getItem(editorHeightKey) || '0')
 
+
+
   let editorElement: HTMLElement | null = $state(null)
   let manualInjectionActive = $state(false)
   let saving = $state(false)
@@ -85,7 +86,7 @@
       saving = true
       hasError = false
 
-      linkInjections = await saveLinkInjections(linkInjections, pageText)
+      linkInjections = await saveLinkInjections(linkInjections)
       initialStateString = linkInjectionsString
     } catch {
       hasError = true
@@ -177,7 +178,6 @@
 
   {#if !loading}
     <Session
-      {pageText}
       onallow={() => allowEditing = true}
       ondisallow={() => allowEditing = false}
       ontakeover={onreinitialize}
@@ -231,7 +231,6 @@
       style:top="{scrollDistance}px"
       transition:fly={{ x: Math.min(window.innerWidth, 320), duration: 200, opacity: 1 }}>
       <ManualInjection
-        {pageText}
         onclose={() => manualInjectionActive = false}
         onsave={(linkInjection) => linkInjections.push(linkInjection)} />
     </div>

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

@@ -4,7 +4,7 @@
   import { onMount } from 'svelte'
   import { playPilotBaseUrl } from '$lib/constants'
   import { generateInjectionKey } from '$lib/api/externalPages'
-  import { getLinkInjectionsParentElement } from '$lib/injectionElements'
+  import { getLinkInjectionsParentElement, getPageTextAndElements } from '$lib/injectionElements'
   import { heading } from '$lib/actions/heading'
   import { findSurroundingPhrases, cleanPhrase } from '$lib/text'
   import { getIndexOfSelection } from '$lib/selection'
@@ -15,12 +15,13 @@
   import TitleSearch from './Search/TitleSearch.svelte'
 
   interface Props {
-    pageText: string
     onsave: (linkInjection: LinkInjection) => void
     onclose?: () => void
   }
 
-  const { pageText = '', onsave, onclose = () => null }: Props = $props()
+  const { onsave, onclose = () => null }: Props = $props()
+
+  const { pageText } = getPageTextAndElements()
 
   let currentSelection = $state('')
   let selectionSentence = $state('')

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

@@ -4,7 +4,6 @@
   import Alert from './Alert.svelte'
 
   interface Props {
-    pageText?: string,
     onpoll?: ({ injectionsEnabled, aiEnabled }: { injectionsEnabled: boolean, aiEnabled: boolean }) => void,
     onallow?: () => void,
     ondisallow?: () => void,
@@ -12,7 +11,6 @@
   }
 
   const {
-    pageText = '',
     onpoll = () => null,
     onallow = () => null,
     ondisallow = () => null,
@@ -36,7 +34,7 @@
   }
 
   async function setSession(): Promise<void> {
-    const result = await fetchAsSession(pageText)
+    const result = await fetchAsSession()
 
     if (!result) return
 
@@ -49,7 +47,7 @@
   }
 
   function takeOverEditing(): void {
-    saveCurrentSession(pageText)
+    saveCurrentSession()
     ontakeover()
   }
 </script>

package/src/routes/components/Modals/RailModal.svelte

@@ -78,7 +78,7 @@
 </Modal>
 
 <style lang="scss">
-  $size: min(600px, 80vw);
+  $size: min(600px, 85vw);
 
   .rail-modal {
     --gap: #{margin(0.25)};
@@ -156,7 +156,7 @@
   }
 
   .arrow {
-    --offset: #{margin(-2)};
+    --offset: #{margin(-1.25)};
     --scale: 1;
     cursor: pointer;
     z-index: 2;

package/src/routes/components/Rails/TitlesRail.svelte

@@ -60,12 +60,15 @@
       const activeElement = element?.querySelectorAll('.title')[index]!
       const parentOffset = element?.getBoundingClientRect().right || 0
       const elementOffsetInParent = parentOffset - activeElement.getBoundingClientRect().right
+      const isFullyVisible = elementOffsetInParent > activeElement.clientWidth * 2
 
       recentlyExpanded = true
       setTimeout(() => recentlyExpanded = false, 500)
 
-      if (size === 'flexible' && elementOffsetInParent < activeElement.clientWidth * 2) {
+      if (size === 'flexible' && !isFullyVisible) {
         slider?.setIndex(index - 2)
+      } else if (size === 'huge' && !isFullyVisible) {
+        slider?.setIndex(index)
       }
 
       expandTitleIntoTrailer(title)

package/src/routes/components/TrackAnyClick.svelte

@@ -43,8 +43,10 @@
     return '.' + classnames.join('.')
   }
 
-  function elementHasDirectTextContent(element: Element): Node | undefined {
-    return Array.from(element.childNodes).find(node => node.nodeName === '#text' && !!node.textContent?.trim())
+  function elementHasDirectTextContent(element: Element | undefined): Node | null {
+    if (!element?.childNodes?.length) return null
+
+    return Array.from(element.childNodes).find(node => node.nodeName === '#text' && !!node.textContent?.trim()) || null
   }
 </script>
 

package/src/routes/components/YouTubeEmbed.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { getVideoId } from '$lib/trailer'
+  import { onMount } from 'svelte'
   import IconMute from './Icons/IconMute.svelte'
 
   interface Props {
@@ -14,11 +15,26 @@
   const { embeddable_url = '', controls = [], muted = false, loop = false, captions = false, showMuteControls = false }: Props = $props()
 
   const videoId = $derived(getVideoId(embeddable_url))
+  const startTime = $derived((window?.PlayPilotLinkInjections?.video_playtimes?.[videoId || ''] || 1) - 1)
   const color = window?.getComputedStyle(document.body).getPropertyValue('--playpilot-primary')?.replace('#', '') || 'fa548a'
 
   let iframe: HTMLIFrameElement | null = $state(null)
   let isMuted = $state(muted)
 
+  onMount(() => {
+    if (!videoId) return
+
+    if (!window.PlayPilotLinkInjections.video_playtimes) window.PlayPilotLinkInjections.video_playtimes = {}
+
+    let elapsedSeconds = startTime
+    const interval = setInterval(() => {
+      elapsedSeconds++
+      window.PlayPilotLinkInjections.video_playtimes![videoId] = elapsedSeconds
+    }, 1000)
+
+    return () => clearInterval(interval)
+  })
+
   export function toggleMute(state = !isMuted): void {
     if (isMuted != state) iframe?.contentWindow?.postMessage('mute', '*')
     isMuted = state
@@ -30,7 +46,7 @@
     bind:this={iframe}
     width="600"
     height="338"
-    src="https://video.playpilot.net/?video_id={videoId}&color={color}&muted={muted}&loop={loop}&captions={captions}&controls={controls.join(',')}&autoplay=true&playsinline=true"
+    src="https://video.playpilot.net/?video_id={videoId}&color={color}&muted={muted}&loop={loop}&captions={captions}&controls={controls.join(',')}&start_time={startTime}&autoplay=true&playsinline=true"
     title="YouTube video player"
     frameborder="0"
     referrerpolicy="strict-origin-when-cross-origin"