@playpilot/tpi 8.11.0-beta.2 → 8.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.11.0-beta.2",
+	"version": "8.11.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/data/translations.ts

@@ -166,11 +166,6 @@ export const translations = {
     [Language.Swedish]: 'Streaming Guide',
     [Language.Danish]: 'Streaming Guide',
   },
-  'Streaming Guide Heading': {
-    [Language.English]: 'Discover and search all movies and tv-shows',
-    [Language.Swedish]: 'Upptäck och sök bland alla filmer och tv-serier',
-    [Language.Danish]: 'Opdag og søg i alle film og tv-serier',
-  },
   'Streaming Guide Description': {
     [Language.English]: 'Find where to watch movies online - the ultimate guide that helps you find the best movies and shows across streaming services.',
     [Language.Swedish]: 'Sök bland alla filmer och serier för att ta reda på var du kan streama dem',

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/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 ||= {
@@ -70,9 +69,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/Explore/ExploreLayout.svelte

@@ -45,7 +45,7 @@
       <div class="divider"></div>
 
       <div class="heading" use:heading>
-        {t('Streaming Guide Heading')}
+        {t('Streaming Guide')}
       </div>
 
       {#if !useExploreRouter()}
@@ -99,13 +99,8 @@
     display: flex;
     flex-direction: column;
     gap: margin(0.5);
-    margin: theme(explore-header-margin, 0 0 margin(1));
+    margin: theme(explore-header-margin, 0 0 margin(2));
     width: 100%;
-    max-width: margin(12);
-
-    @include desktop {
-      max-width: margin(20);
-    }
   }
 
   .divider {
@@ -118,7 +113,7 @@
   .heading {
     margin: theme(explore-heading-margin, margin(0.25) 0);
     color: theme(text-color);
-    font-size: theme(explore-heading-size, clamp(margin(1), 2.5vw, margin(1.5)));
+    font-size: theme(explore-heading-size, clamp(margin(1.5), 5vw, margin(2)));
     font-weight: theme(explore-heading-font-weight, font-bold);
     text-transform: theme(explore-heading-text-transform, normal);
     line-height: theme(explore-heading-line-height, 1.5);

package/src/routes/components/Explore/Routes/ExploreHome.svelte

@@ -6,11 +6,9 @@
   import { track } from '$lib/tracking'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import TitlesRail from '../../Rails/TitlesRail.svelte'
-  import { mobileBreakpoint } from '$lib/constants'
 
   let expandedTitle: TitleData | null = $state(null)
   let expandedRailKey: string | null = $state(null)
-  let windowWidth: number = $state(window.innerWidth)
 
   const rails: { heading: string, params: Record<string, any>, properties: Record<string, any> }[] = [{
     heading: 'List: Trending',
@@ -19,7 +17,7 @@
   }, {
     heading: 'List: New',
     params: { from_playlist_sid: 'li42WR', include_playable_types: 'SVOD,FREE' },
-    properties: { aside: true, size: 'flexible' },
+    properties: { aside: true },
   }, {
     heading: 'List: Upcoming',
     params: { from_playlist_sid: 'li42wf', region: null, no_region_filter: true },
@@ -31,7 +29,7 @@
   }, {
     heading: 'List: Demand',
     params: { from_playlist_sid: 'licBS' },
-    properties: { aside: true, size: 'flexible' },
+    properties: { aside: true },
   }]
 
   async function getListTitles(params: Record<string, any> = {}): Promise<TitleData[]> {
@@ -45,7 +43,7 @@
   }
 </script>
 
-<svelte:window {onscroll} bind:innerWidth={windowWidth} />
+<svelte:window {onscroll} />
 
 <div data-testid="explore-home"></div>
 
@@ -54,7 +52,7 @@
     <TitlesRail
       heading={t(heading)}
       titles={getListTitles(params)}
-      size={windowWidth >= mobileBreakpoint ? 'flexible' : 'huge'}
+      size="flexible"
       minimumLength={7}
       {...properties}
       bind:expandedTitle

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

@@ -131,7 +131,7 @@
     border-radius: theme(rail-modal-item-border-radius, border-radius-huge) theme(rail-modal-item-border-radius, border-radius-huge) 0 0;
     background: theme(rail-modal-item-background, light);
     box-shadow: none;
-    height: 90vh;
+    height: 80vh;
     overflow: auto;
     overscroll-behavior: contain;
     transition: box-shadow var(--transition-duration);

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

@@ -16,7 +16,7 @@
     titles: Promise<TitleData[]> | TitleData[]
     minimumLength?: number,
     heading?: string,
-    size?: 'small' | 'large' | 'huge' | 'flexible'
+    size?: 'small' | 'large' | 'flexible'
     aside?: boolean,
     expandable?: boolean,
     expandedTitle?: TitleData | null,
@@ -64,9 +64,7 @@
       recentlyExpanded = true
       setTimeout(() => recentlyExpanded = false, 500)
 
-      if (size === 'flexible' && elementOffsetInParent < activeElement.clientWidth * 2) {
-        slider?.setIndex(index - 2)
-      }
+      if (elementOffsetInParent < activeElement.clientWidth * 2) slider?.setIndex(index - 2)
 
       expandTitleIntoTrailer(title)
 
@@ -208,7 +206,7 @@
   .titles {
     --width: #{theme(rail-size-default, margin(6))};
     --image-height: #{calc(var(--width) * 3 / 2)};
-    --expanded-width: var(--width);
+    --expanded-width: #{calc(var(--image-height) / 9 * 16)};
     --border-radius: #{theme(rail-border-radius, border-radius)};
 
     &.with-aside {
@@ -219,13 +217,8 @@
       --width: #{theme(rail-size-large, margin(7.5))};
     }
 
-    &.huge {
-      --width: #{theme(rail-size-large, min(explore-width(65), margin(15)))};
-    }
-
     &.flexible {
-      --width: #{theme(rail-size-flexible, clamp(margin(8), explore-width(20), margin(11.5)))};
-      --expanded-width: #{calc(var(--image-height) / 9 * 16)};
+      --width: #{theme(rail-size-flexible, clamp(margin(6), explore-width(18), margin(11.5)))};
     }
   }
 
@@ -293,14 +286,6 @@
     :global(iframe) {
       opacity: 0;
       animation: fade-iframe 500ms 500ms forwards;
-
-      @include mobile {
-        position: absolute;
-        width: 225%;
-        top: 50%;
-        left: 50%;
-        transform: translateX(-50%) translateY(-50%);
-      }
     }
 
     :global(+ .poster) {

package/src/routes/components/Title.svelte

@@ -154,7 +154,7 @@
   }
 
   .header {
-    padding: min(margin(17), 70vw) 0 margin(1);
+    padding: margin(10) 0 margin(1);
 
     @media (min-width: 390px) {
       display: grid;