@playpilot/tpi 8.10.2 → 8.10.4-beta.1

package/package.json

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

package/src/lib/api/externalPages.ts

@@ -26,6 +26,8 @@ export async function fetchLinkInjections(
   const apiUrl = `/external-pages/?api-token=${apiToken}&include_title_details=true${isEditorialMode ? '&editorial_mode_enabled=true' : ''}&language=${language}`
   let response: LinkInjectionResponse
 
+  console.log('page text in fetchLinkInjections', { pageText })
+
   // 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') {
@@ -70,6 +72,8 @@ export async function pollLinkInjections(
   // This is mostly handy during HMR, but also during navigation changes
   if (pollTimeout) clearTimeout(pollTimeout)
 
+  console.log('page text in pollLinkInjections', { pageText })
+
   const poll = async (resolve: Function, reject: Function): Promise<void> => {
     let response
     try {

package/src/lib/enums/TrackingEvent.ts

@@ -16,10 +16,10 @@ export const TrackingEvent = {
   ParticipantModalClose: 'ali_participant_modal_close',
 
   // Popover
-  InjectionPopoverView: 'ali_injection_popover_view',
-  InjectionPopoverClose: 'ali_injection_popover_close',
-  InjectionPopoverSaveClick: 'ali_injection_popover_save_click',
-  InjectionPopoverPlaylinkClick: 'ali_injection_popover_playlink_click',
+  TitlePopoverView: 'ali_title_popover_view',
+  TitlePopoverClose: 'ali_title_popover_close',
+  TitlePopoverSaveClick: 'ali_title_popover_save_click',
+  TitlePopoverPlaylinkClick: 'ali_title_popover_playlink_click',
 
   // Rails
   SimilarTitleClick: 'ali_similar_title_click',

package/src/lib/fakeData.ts

@@ -43,6 +43,38 @@ export const title: TitleData = {
   embeddable_url: null,
 }
 
+export const linkInjections: LinkInjection[] = [{
+  sid: '1',
+  title: 'Quan',
+  sentence: 'In an interview with Epire Magazine, Quan reveals he quested starring in Love Hurts',
+  playpilot_url: 'https://playpilot.com/movie/example/',
+  key: 'some-key-1',
+  title_details: title,
+}, {
+  sid: '2',
+  title: 'The Long Kiss Goodnight',
+  sentence: 'The movie is in a similar vein to successful films such as The Long Kiss Goodnight and Nobody',
+  playpilot_url: 'https://playpilot.com/movie/example-2/',
+  key: 'some-key-2',
+  after_article: false,
+  title_details: title,
+}, {
+  sid: '3',
+  title: 'Nobody',
+  sentence: 'The movie is in a similar vein to successful films such as The Long Kiss Goodnight and Nobody',
+  playpilot_url: 'https://playpilot.com/movie/example-3/',
+  key: 'some-key-3',
+  after_article: true,
+  title_details: title,
+  manual: false,
+}, {
+  sid: '4',
+  title: 'The Wheel of Time',
+  sentence: '(The more I think about the Bene Gesserit the more I see how much they influenced not just the Jedi in Star Wars but also the Aes Sedai in The Wheel of Time and even the sorceresses in The Witcher books, though Herbert\'s order is the most ominous and terrifying of them all)',
+  playpilot_url: 'https://playpilot.com/movie/example-4/',
+  key: 'some-key-4',
+}]
+
 export const participants: ParticipantData[] = [
   {
     sid: 'pr5C5W',
@@ -112,50 +144,6 @@ export const participants: ParticipantData[] = [
   },
 ]
 
-export const linkInjections: LinkInjection[] = [{
-  sid: '1',
-  title: 'Quan',
-  sentence: 'In an interview with Epire Magazine, Quan reveals he quested starring in Love Hurts',
-  playpilot_url: 'https://playpilot.com/movie/example/',
-  key: 'some-key-1',
-  title_details: title,
-  type: 'title',
-}, {
-  sid: '2',
-  title: 'The Long Kiss Goodnight',
-  sentence: 'The movie is in a similar vein to successful films such as The Long Kiss Goodnight and Nobody',
-  playpilot_url: 'https://playpilot.com/movie/example-2/',
-  key: 'some-key-2',
-  after_article: false,
-  title_details: title,
-  type: 'title',
-}, {
-  sid: '3',
-  title: 'Nobody',
-  sentence: 'The movie is in a similar vein to successful films such as The Long Kiss Goodnight and Nobody',
-  playpilot_url: 'https://playpilot.com/movie/example-3/',
-  key: 'some-key-3',
-  after_article: true,
-  title_details: title,
-  manual: false,
-  type: 'title',
-}, {
-  sid: '4',
-  title: 'The Wheel of Time',
-  sentence: '(The more I think about the Bene Gesserit the more I see how much they influenced not just the Jedi in Star Wars but also the Aes Sedai in The Wheel of Time and even the sorceresses in The Witcher books, though Herbert\'s order is the most ominous and terrifying of them all)',
-  playpilot_url: 'https://playpilot.com/movie/example-4/',
-  key: 'some-key-4',
-  type: 'title',
-}, {
-  sid: '5',
-  title: 'Jack Black',
-  sentence: 'Jason Momoa (”Aquaman”), Jack Black (”Nacho Libre”) och Jennifer Coolidge (”The White Lotus”) medverkar i den Jared Hess-regisserade (”Napolen Dynamite”) filmen.',
-  playpilot_url: 'https://playpilot.com/name/pr875J-jack-black/',
-  key: 'some-key-5',
-  participant_details: participants[2],
-  type: 'participant',
-}]
-
 export const campaign: Campaign = {
   campaign_format: 'card',
   campaign_type: 'image',

package/src/lib/injection.ts

@@ -168,7 +168,7 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
   // The function itself will decide whether or not it should actually insert the component based on the config.
   if (document.querySelector(keySelector)) insertInTextDisclaimer(elements)
 
-  return mergedInjections.filter(injection => hasValidTypeData(injection)).map((injection, index) => {
+  return mergedInjections.filter(i => i.title_details).map((injection, index) => {
     const hasManualEquivalent = !injection.manual && isAvailableAsManualInjection(injection, index, mergedInjections)
     const duplicate = injection.duplicate ?? hasManualEquivalent
 
@@ -376,11 +376,11 @@ export function separateLinkInjectionTypes(injections: LinkInjection[]): LinkInj
 }
 
 export function isValidInjection(injection: LinkInjection): boolean {
-  return !injection.inactive && !injection.removed && !injection.duplicate && hasValidTypeData(injection) && isValidPlaylinkType(injection)
+  return !injection.inactive && !injection.removed && !injection.duplicate && !!injection.title_details && isValidPlaylinkType(injection)
 }
 
 /**
- * An injection can be of various playlink types, when all are false equivalent, the link is not valid.
+ * 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 {
@@ -388,10 +388,16 @@ export function isValidPlaylinkType(injection: LinkInjection): boolean {
   return !!injection.after_article
 }
 
+/**
+ * Filter links for in-text injections, removing after article, inactive, removed, duplicate, and items without title_details
+ */
 export function filterInvalidInTextInjections(injections: LinkInjection[]): LinkInjection[] {
   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 filterRemovedAndInactiveInjections(injections).filter(i => i.after_article === true && isValidInjection(i))
 }
@@ -436,13 +442,6 @@ export function isEquivalentInjection(injection1: LinkInjection, injection2: Lin
   return injection1.title === injection2.title && cleanPhrase(injection1.sentence) === cleanPhrase(injection2.sentence)
 }
 
-export function hasValidTypeData(injection: LinkInjection): boolean {
-  if (injection.type === 'title' && !!injection.title_details) return true
-  if (injection.type === 'participant' && !!injection.participant_details) return true
-
-  return false
-}
-
 export function getPlayPilotWrapperElement(): Element {
   return document.querySelector('[data-playpilot-link-injections]') || document.body
 }

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/modal.ts

@@ -133,9 +133,7 @@ export function openModalForInjectedLink(event: MouseEvent, injections: LinkInje
   event.preventDefault()
 
   playFallbackViewTransition(() => {
-    const data = injection.title_details || injection.participant_details
-
     destroyLinkPopover(false)
-    openModal({ event, injection, data, type: injection.type })
+    openModal({ event, injection, data: injection.title_details })
   }, !prefersReducedMotion.current && window.innerWidth >= mobileBreakpoint && !window.matchMedia('(pointer: coarse)').matches)
 }

package/src/lib/popover.ts

@@ -1,30 +1,29 @@
 import { mount, unmount } from 'svelte'
+import TitlePopover from '../routes/components/TitlePopover.svelte'
 import { getPlayPilotWrapperElement, keyDataAttribute, keySelector } from './injection'
 import type { LinkInjection } from './types/injection'
-import InjectionPopover from '../routes/components/InjectionPopover.svelte'
 
 export let currentlyHoveredInjection: EventTarget | null = null
 export let activePopoverInsertedComponent: object | null = null
 
+/**
+ * When a link is hovered it is shown as a popover. The component is mounted when a mouse enters the link,
+ * and removed when clicked or on mouseleave.
+ */
 export function openPopoverForInjectedLink(event: MouseEvent, injection: LinkInjection): void {
+  // Skip touch devices
   if (window.matchMedia('(pointer: coarse)').matches) return
   if (activePopoverInsertedComponent) destroyLinkPopover()
 
-  const currentTarget = event.currentTarget as Element
-  currentlyHoveredInjection = currentTarget
+  const target = event.currentTarget as Element
+  currentlyHoveredInjection = target
 
   // Only show if the link is hovered for more than 100ms. This is to prevent the popover from showing
   // when a user just happens to mouseover as they are moving their mouse about.
   setTimeout(() => {
-    if (currentlyHoveredInjection !== currentTarget) return
+    if (currentlyHoveredInjection !== target) return // User is no longer hovering this link
 
-    const target = getPlayPilotWrapperElement()
-
-    if (injection.type === 'title') {
-      activePopoverInsertedComponent = mount(InjectionPopover, { target, props: { event, type: 'title', data: injection.title_details! } })
-    } else if (injection.type === 'participant') {
-      activePopoverInsertedComponent = mount(InjectionPopover, { target, props: { event, type: 'participant', data: injection.participant_details! } })
-    }
+    activePopoverInsertedComponent = mount(TitlePopover, { target: getPlayPilotWrapperElement(), props: { event, title: injection.title_details! } })
   }, 100)
 }
 
@@ -45,7 +44,7 @@ export async function destroyLinkPopover(outro: boolean = true): Promise<void> {
   // In that case we remove the element straight from the dom.
   // Doing this will prevent the outro animation from playing, but this being a fallback, that's ok.
   // TODO: Find the actual cause of this bug.
-  document.querySelectorAll<HTMLElement>('[data-playpilot-injection-popover]').forEach(element => element.remove())
+  document.querySelectorAll<HTMLElement>('[data-playpilot-title-popover]').forEach(element => element.remove())
 }
 
 export function destroyLinkPopoverOnMouseleave(event: MouseEvent): void {
@@ -54,7 +53,7 @@ export function destroyLinkPopoverOnMouseleave(event: MouseEvent): void {
   const target = event.target as Element
 
   // Mousemove is inside of popover or link that popover
-  if (target.hasAttribute('data-playpilot-injection-popover') || target.closest('[data-playpilot-injection-popover]') ||
+  if (target.hasAttribute('data-playpilot-title-popover') || target.closest('[data-playpilot-title-popover]') ||
     target.hasAttribute(keyDataAttribute) || target.closest(keySelector)) return
 
   destroyLinkPopover()

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

@@ -1,8 +1,5 @@
-import type { ParticipantData } from './participant'
 import type { TitleData } from './title'
 
-export type LinkInjectionDataType = 'title' | 'participant'
-
 export type LinkInjection = {
   sid: string
   title: string
@@ -10,7 +7,6 @@ export type LinkInjection = {
   playpilot_url: string
   key: string
   title_details?: TitleData
-  participant_details?: ParticipantData
   phrase_before?: string | null
   phrase_after?: string | null
   inactive?: boolean
@@ -23,7 +19,6 @@ export type LinkInjection = {
   removed?: boolean
   duplicate?: boolean
   matchingElement?: null | Element
-  type: LinkInjectionDataType
 }
 
 export type LinkInjectionRanges = Record<string, { elementIndex: number, from: number, to: number }>

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

@@ -37,6 +37,8 @@
 
   const pageText = $derived(getPageText(elements))
 
+  $inspect({ thing: 'pageText in page.svelte', pageText })
+
   const initializePromise = initialize()
 
   $effect(() => {

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

@@ -58,7 +58,8 @@
   const linkInjectionsString = $derived(JSON.stringify(linkInjections))
   const showControls = $derived(!aiRunning && allowEditing)
   const hasChanged = $derived(initialStateString && initialStateString !== linkInjectionsString)
-  const filteredInjections = $derived(linkInjections.filter((i) => (i.title_details || i.participant_details) && !i.removed && !i.duplicate && (i.manual || (!i.manual && !i.failed))))
+  // 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))
   const initialAiRunning = $derived(!loading && untrack(() => aiStatus.aiRunning))
 
@@ -74,7 +75,7 @@
   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 || a.participant_details?.name)!.localeCompare((b.title_details?.title || b.participant_details?.name)!)
+      return a.title_details!.title.localeCompare(b.title_details!.title)
     })
   }
 

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

@@ -11,6 +11,7 @@
   import { track } from '$lib/tracking'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import type { LinkInjection } from '$lib/types/injection'
+  import type { TitleData } from '$lib/types/title'
   import { cleanPhrase, truncateAroundPhrase } from '$lib/text'
   import { isValidPlaylinkType } from '$lib/injection'
   import { getLinkInjectionElements, getLinkInjectionsParentElement } from '$lib/injectionElements'
@@ -26,8 +27,9 @@
 
   const { linkInjection = $bindable(), onremove = () => null, onhighlight = () => null }: Props = $props()
 
-  const { key, type, sentence, title_details, participant_details, failed, failed_message, inactive } = $derived(linkInjection || {})
+  const { key, sentence, title_details, failed, failed_message, inactive } = $derived(linkInjection || {})
 
+  const title: TitleData = $derived(title_details!)
   const truncatedSentence = $derived(truncateAroundPhrase(linkInjection.sentence, linkInjection.title, 60))
 
   let expanded = $state(false)
@@ -36,7 +38,7 @@
   let element: HTMLElement | null = $state(null)
 
   onMount(() => {
-    if (failed) track(TrackingEvent.InjectionFailed, type === 'title' ? title_details : null, { phrase: linkInjection.title, sentence})
+    if (failed) track(TrackingEvent.InjectionFailed, title, { phrase: linkInjection.title, sentence})
   })
 
   /**
@@ -111,14 +113,10 @@
   bind:this={element}
   out:slide|global={{ duration: 200 }}>
   <div class="header">
-    {#if type === 'title'}
-      <img class="poster" src={removeImageUrlPrefix(title_details!.standing_poster)} alt="" width="32" height="48" onerror={({ target }) => (target as HTMLImageElement).src = imagePlaceholderDataUrl} />
-    {:else}
-      <div class="placeholder-image"></div>
-    {/if}
+    <img class="poster" src={removeImageUrlPrefix(title.standing_poster)} alt="" width="32" height="48" onerror={({ target }) => (target as HTMLImageElement).src = imagePlaceholderDataUrl} />
 
     <div class="info">
-      <div class="title">{title_details?.title || participant_details?.name}</div>
+      <div class="title">{title.title}</div>
 
       <div class="sentence">
         <!-- eslint-disable-next-line svelte/no-at-html-tags -->
@@ -145,13 +143,9 @@
       <Alert>{failed_message}</Alert>
     {:else}
       <div class="actions">
-        {#if type === 'title'}
-          <button class="expand" onclick={() => expanded = !expanded} aria-label="Expand" aria-expanded={expanded}>
-            <IconChevron {expanded} />
-          </button>
-        {:else}
-          <div></div>
-        {/if}
+        <button class="expand" onclick={() => expanded = !expanded} aria-label="Expand" aria-expanded={expanded}>
+          <IconChevron {expanded} />
+        </button>
 
         {#if !isValidPlaylinkType(linkInjection)}
           <div class="warning" transition:fade={{ duration: 100 }} aria-label="Invalid playlink settings">
@@ -216,14 +210,6 @@
     }
   }
 
-  .placeholder-image {
-    flex: 0 0 margin(2);
-    width: margin(2);
-    height: margin(2);
-    border-radius: 50%;
-    background: theme(content);
-  }
-
   .title {
     font-size: margin(0.875);
     word-break: break-word;

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

@@ -169,7 +169,6 @@
       key: generateInjectionKey(selectedTitle.sid),
       title_details: selectedTitle,
       manual: true,
-      type: 'title',
     }
 
     onsave(linkInjection)

package/src/routes/components/ListTitle.svelte

@@ -8,16 +8,15 @@
 
   interface Props {
     title: TitleData
-    compact?: boolean
     onclick?: (event: MouseEvent) => void
   }
 
-  const { title, compact = false, onclick = () => null }: Props = $props()
+  const { title, onclick = () => null }: Props = $props()
 
   const noAffiliate = !!window.PlayPilotLinkInjections?.no_affiliate
 </script>
 
-<button class="title" class:compact {onclick} data-testid="title">
+<button class="title" {onclick} data-testid="title">
   <div class="poster">
     <TitlePoster {title} width={30} height={43} lazy />
   </div>
@@ -39,14 +38,12 @@
       {/if}
     </div>
 
-    {#if !compact}
-      <div class="description" class:large={noAffiliate}>
-        {title.description}
-      </div>
-    {/if}
+    <div class="description" class:large={noAffiliate}>
+      {title.description}
+    </div>
 
     {#if !noAffiliate}
-      <PlaylinksCompact playlinks={title.providers} size={compact ? 24 : 30} />
+      <PlaylinksCompact playlinks={title.providers} />
     {/if}
   </div>
 
@@ -87,10 +84,6 @@
     border-radius: theme(detail-image-border-radius, border-radius);
     background: theme(detail-image-background, content);
     overflow: hidden;
-
-    .compact & {
-      width: margin(3.5);
-    }
   }
 
   .content {
@@ -104,17 +97,11 @@
     @include desktop() {
       padding-right: margin(1);
     }
-
-    .compact & {
-      padding-left: margin(0.75);
-      padding-right: 0;
-    }
   }
 
   .heading {
     color: theme(list-item-title-text-color, text-color);
     font-weight: theme(list-item-title-font-weight, font-bold);
-    line-height: 1.2;
   }
 
   .meta {
@@ -129,10 +116,6 @@
     > div {
       text-transform: capitalize;
     }
-
-    .compact & {
-      margin: margin(0.125) 0 margin(0.25) 0;
-    }
   }
 
   .imdb {
@@ -169,9 +152,5 @@
     &:active {
       color: theme(list-item-action-hover-color, text-color);
     }
-
-    .compact & {
-      display: none;
-    }
   }
 </style>

package/src/routes/components/Participant.svelte

@@ -13,10 +13,9 @@
 
   interface Props {
     participant: ParticipantData
-    small?: boolean
   }
 
-  const { participant, small = false }: Props = $props()
+  const { participant }: Props = $props()
 
   const { name, birth_date, death_date } = $derived(participant)
 
@@ -53,8 +52,8 @@
   }
 </script>
 
-<div class="header" class:small>
-  <div class="heading" use:heading={2} id="heading">{name}</div>
+<div class="header">
+  <div class="heading" use:heading={2} id="name">{name}</div>
 
   {#if birth_date}
     <p class="dates">
@@ -64,13 +63,11 @@
 </div>
 
 <div class="content">
-  {#if !small}
-    <div class="heading subheading" use:heading={3} id="credits">{t('Credits')}</div>
-  {/if}
+  <div class="heading small" use:heading={3} id="credits">{t('Credits')}</div>
 
   <div class="list">
     {#each titles as title}
-      <ListTitle {title} compact={small} onclick={(event) => openModal({ event, data: title })} />
+      <ListTitle {title} onclick={(event) => openModal({ event, data: title })} />
     {/each}
 
     {#if loading}
@@ -91,10 +88,6 @@
     font-size: theme(detail-font-size, font-size-base);
     line-height: theme(participant-description-line-height, normal);
     color: theme(detail-text-color, text-color);
-
-    &.small {
-      padding: margin(1);
-    }
   }
 
   .heading {
@@ -105,7 +98,7 @@
     line-height: normal;
     font-style: theme(detail-title-font-style, normal);
 
-    &.subheading {
+    &.small {
       margin: 0 0 margin(0.5);
       font-size: theme(detail-title-small-font-size, margin(1.25));
     }
@@ -123,11 +116,6 @@
     font-size: theme(detail-font-size, font-size-base);
     line-height: normal;
     font-style: normal;
-
-    ::view-transition-old(content),
-    ::view-transition-new(content) {
-      height: 100%;
-    }
   }
 
   .list {

package/src/routes/components/Playlinks/Playlinks.svelte

@@ -22,7 +22,6 @@
   const { playlinks, title }: Props = $props()
 
   const isModal = getContext('scope') === 'modal'
-  const type = getContext('type')
   const displayAd = getFirstAdOfType('card')
   const categorize = !!window.PlayPilotLinkInjections?.config?.categorize_playlinks
 
@@ -38,7 +37,7 @@
   const list = $derived(outerWidth < 500 || !!displayAd || mergedPlaylinks.length === 1)
 
   function onclick(playlink: string): void {
-    track(isModal ? TrackingEvent.TitleModalPlaylinkClick : TrackingEvent.InjectionPopoverPlaylinkClick, title, { playlink, type })
+    track(isModal ? TrackingEvent.TitleModalPlaylinkClick : TrackingEvent.TitlePopoverPlaylinkClick, title, { playlink })
   }
 
   function categorizePlaylinks(playlinks: PlaylinkData[]): CategorizedPlaylinks {

package/src/routes/components/Title.svelte

@@ -55,7 +55,7 @@
       <TitlePoster {title} onload={() => posterLoaded = true} lazy={false} />
     </div>
 
-    <div class="heading" use:heading={2} class:truncate={small} id="heading">{title.title}</div>
+    <div class="heading" use:heading={2} class:truncate={small} id="title">{title.title}</div>
 
     <div class="info">
       <div class="imdb">