@playpilot/tpi 1.4.3 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "1.4.3",
+	"version": "2.0.0",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/api.js

@@ -1,5 +1,6 @@
 import { authorize, getAuthToken, isEditorialModeEnabled } from './auth'
 import { apiBaseUrl } from './constants'
+import { linkInjections } from './fakeData'
 import { stringToHash } from './hash'
 import { getPageMetaData } from './meta'
 import { getFullUrlPath } from './url'
@@ -49,9 +50,9 @@ export async function fetchLinkInjections(url, html, { hash = stringToHash(html)
  * The results return `injections_ready=false` while the injections are not yet ready.
  * @param {string} url URL of the given article
  * @param {string} html HTML to be crawled
- * @returns {Promise<LinkInjection[]>}
+ * @returns {Promise<LinkInjectionResponse>}
  */
-export async function pollLinkInjections(url, html, pollInterval = 3000, maxTries = 600) {
+export async function pollLinkInjections(url, html, { requireCompletedResult = false, pollInterval = 3000, maxTries = 600 } = {}) {
   let hash = stringToHash(html)
   let currentTry = 0
 
@@ -69,35 +70,13 @@ export async function pollLinkInjections(url, html, pollInterval = 3000, maxTrie
     try {
       const response = await fetchLinkInjections(url, html, { hash })
 
-      // Temporary solution to disallow pages that don't have link injections enabled.
-      // Specifically checking against false to exclude responses without the property.
-      // Should still return injections as expect in editorial mode.
-      if (response.injections_enabled === false && !isEditorialModeEnabled()) {
-        resolve([])
-        return
-      }
-
-      // Temporary solution #2. If you're reading this weeks, months, or maybe even years from now, we've failed.
-      // Injections might be re-generated when a hash changes but injections do exist for the same url.
-      // In this case previous injections are returned while still generating new injections in the background.
-      // We ignore the upcoming re-generation and use the current injections instead.
-      if (response.injections_ready === false && response.link_injections?.length) {
-        response.link_injections = insertRandomKeys(response.link_injections)
-
-        resolve(response.link_injections || [])
-        return
-      }
-
-      if (response.injections_ready) {
-        if (response.link_injections) {
-          response.link_injections = insertRandomKeys(response.link_injections)
-        }
+      if (requireCompletedResult && (response.automation_enabled && response.ai_running)) throw new Error
 
-        resolve(response.link_injections || [])
-        return
-      }
+      response.link_injections = insertRandomKeys(response.link_injections || [])
+      response.ai_injections = insertRandomKeys(response.ai_injections || [])
 
-      throw new Error
+      resolve(response)
+      return
     } catch {
       currentTry++
 
@@ -123,7 +102,10 @@ export async function saveLinkInjections(linkInjections, html) {
   // @ts-ignore
   const selector = window.PlayPilotLinkInjections?.selector
 
-  const newLinkInjections = linkInjections.map((/** @type {any} */linkInjection) => ({
+  // Only save manual injections, AI injections should be left intact.
+  const filteredLinkInjections = linkInjections.filter(i => i.manual)
+
+  const newLinkInjections = filteredLinkInjections.map((/** @type {any} */linkInjection) => ({
     sid: linkInjection.sid,
     title: linkInjection.title,
     sentence: linkInjection.sentence,
@@ -132,6 +114,7 @@ export async function saveLinkInjections(linkInjections, html) {
     after_article_style: linkInjection.after_article_style || null,
     in_text: linkInjection.in_text ?? true,
     inactive: !!linkInjection.inactive,
+    removed: !!linkInjection.removed,
   }))
 
   const response = await fetchLinkInjections(getFullUrlPath(), html, {

package/src/lib/fakeData.js

@@ -121,7 +121,7 @@ export const linkInjections = [{
   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: true,
+  after_article: false,
   title_details: title,
 }, {
   sid: '3',
@@ -131,6 +131,7 @@ export const linkInjections = [{
   key: 'some-key-3',
   after_article: true,
   title_details: title,
+  manual: false,
 }, {
   sid: '4',
   title: 'The Wheel of Time',

package/src/lib/linkInjection.js

@@ -3,6 +3,7 @@ import TitlePopover from '../routes/components/TitlePopover.svelte'
 import AfterArticlePlaylinks from '../routes/components/AfterArticlePlaylinks.svelte'
 import { findTextNodeContaining, isNodeInLink, replaceStartingFrom } from './text'
 import { getLargestValueInArray } from './array'
+import { decodeHtmlEntities } from './html'
 
 const keyDataAttribute = 'data-playpilot-injection-key'
 const keySelector = `[${keyDataAttribute}]`
@@ -74,25 +75,27 @@ export function getLinkInjectionsParentElement() {
 /**
  * Replace all found injections within all given elements on the page
  * @param {HTMLElement[]} elements
- * @param {LinkInjection[]} injections
  * @param {(LinkInjection: LinkInjection) => void} onclick
+ * @param {LinkInjectionTypes} injections
  * @returns {LinkInjection[]} Returns an array of injections with injections that failed to be inserted marked as `failed`.
  */
-export function injectLinksInDocument(elements, injections, onclick) {
+export function injectLinksInDocument(elements, onclick, injections = { aiInjections: [], manualInjections: [] }) {
+  const mergedInjections = mergeInjectionTypes(injections)
+
   // 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(' ')
 
-  // Filter out injections meant to be displayed only after the article, rather than in-text.
-  // Also filter out injections that are marked as inactive
-  const validInjections = injections.filter(i => i.in_text !== false && !i.inactive)
-  const foundInjections = validInjections.filter(i => fullText.includes(i.sentence))
+  const validInjections = filterInvalidInTextInjections(mergedInjections)
+  const foundInjections = validInjections.filter(i => {
+    return decodeHtmlEntities(fullText).includes(decodeHtmlEntities(i.sentence))
+  })
 
   /** @type {LinkInjectionRanges} */
   const ranges = {}
 
   for (const injection of foundInjections) {
-    const elementIndex = elements.findIndex(element => element.innerText.includes(injection.sentence))
+    const elementIndex = elements.findIndex(element => element.innerText.includes(decodeHtmlEntities(injection.sentence)))
     const element = elements[elementIndex]
 
     if (!element) continue
@@ -132,17 +135,20 @@ export function injectLinksInDocument(elements, injections, onclick) {
   addLinkInjectionEventListeners(validInjections, onclick)
   addCSSVariablesToLinks()
 
-  const afterArticleInjections = injections.filter(i => i.after_article && !i.inactive)
+  const afterArticleInjections = filterInvalidAfterArticleInjections(mergedInjections)
   if (afterArticleInjections.length) insertAfterArticlePlaylinks(elements, afterArticleInjections, onclick)
 
-  const sortedInjections = sortLinkInjectionsByRange(injections, ranges)
+  const sortedInjections = sortLinkInjectionsByRange(mergedInjections, ranges)
 
-  return sortedInjections.map(injection => {
+  return sortedInjections.filter(i => i.title_details).map((injection, index) => {
     const failed = !injection.inactive && !injection.after_article && !document.querySelector(`[${keyDataAttribute}="${injection.key}"]`)
+    // Favour manual injections over AI injections
+    const duplicate = injection.duplicate ?? (!injection.manual && isAvailableAsManualInjection(injection, index, mergedInjections))
 
     return {
       ...injection,
-      inactive: !!injection.inactive,
+      inactive: injection.inactive ?? false,
+      duplicate,
       failed,
     }
   })
@@ -278,6 +284,7 @@ function clearAfterArticlePlaylinks() {
 
   unmount(afterArticlePlaylinkInsertedComponent)
   document.querySelector('[data-playpilot-after-article-playlinks]')?.remove()
+  afterArticlePlaylinkInsertedComponent = null
 }
 
 /**
@@ -327,3 +334,87 @@ export function sortLinkInjectionsByRange(injections, ranges) {
     return (rangeA?.from || 0) - (rangeB?.from || 0)
   })
 }
+
+/**
+ * Merge different injection types
+ * @param {LinkInjectionTypes} injections
+ * @returns {LinkInjection[]}
+ */
+export function mergeInjectionTypes({ aiInjections, manualInjections }) {
+  return [...aiInjections, ...manualInjections.map(i => ({ ...i, manual: true }))]
+}
+
+/**
+ * Separate an array of flat injections into ai and manual arrays.
+ * @param {LinkInjection[]} injections
+ * @returns {LinkInjectionTypes}
+ */
+export function separateLinkInjectionTypes(injections) {
+  return {
+    aiInjections: injections.filter(i => !i.manual),
+    manualInjections: injections.filter(i => i.manual),
+  }
+}
+
+/**
+ * Returns whether or not an injection would be valid for any sort of injection, text or after_article
+ * @param {LinkInjection} injection
+ * @returns {boolean}
+ */
+export function isValidInjection(injection) {
+  return !injection.inactive && !injection.removed && !injection.duplicate && !!injection.title_details
+}
+
+/**
+ * Filter links for in-text injections, removing after article, inactive, removed, duplicate, and items without title_details
+ * @param {LinkInjection[]} injections
+ * @returns {LinkInjection[]}
+ */
+export function filterInvalidInTextInjections(injections) {
+  return filterRemovedInjections(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
+ * @param {LinkInjection[]} injections
+ * @returns {LinkInjection[]}
+ */
+export function filterInvalidAfterArticleInjections(injections) {
+  return filterRemovedInjections(injections).filter(i => i.after_article === true && isValidInjection(i))
+}
+
+/**
+ * Filter injections that were marked as removed or have an equivalent removed manual injections, soley based on the same sentence and title.
+ * @param {LinkInjection[]} injections
+ * @returns {LinkInjection[]}
+ */
+export function filterRemovedInjections(injections) {
+  return injections.filter(injection => {
+    if (injection.removed) return false
+    if (injection.manual && !injection.removed) return true
+    return !injections.some(i => i.manual && i.removed && isEquivalentInjection(i, injection))
+  })
+}
+
+/**
+ * Return whether or not an injection is also available as manual injection
+ * @param {LinkInjection} injection
+ * @param {number} injectionIndex
+ * @param {LinkInjection[]} injections
+ * @returns {boolean}
+ */
+export function isAvailableAsManualInjection(injection, injectionIndex, injections) {
+  return injections.some((i, index) => {
+    return injectionIndex !== index && i.manual && isEquivalentInjection(i, injection)
+  })
+}
+
+/**
+ * Returns whether or not 2 injections match in title and sentence
+ * @param {LinkInjection} injection1
+ * @param {LinkInjection} injection2
+ * @returns {boolean}
+ */
+export function isEquivalentInjection(injection1, injection2) {
+  return injection1.title === injection2.title && injection1.sentence === injection2.sentence
+}

package/src/lib/text.js

@@ -58,4 +58,3 @@ export function replaceStartingFrom(text, search, replacement, startIndex) {
 
   return before + updatedAfter
 }
-

package/src/routes/+layout.svelte

@@ -19,11 +19,13 @@
   if (browser) window.PlayPilotLinkInjections = { token: 'ZoAL14yqzevMyQiwckbvyetOkeIUeEDN', selector: 'article' }
 </script>
 
+<meta property="article:modified_time" content="2025-05-15T20:00:00+00:00" />
+
 <div>
   {#key Math.random()}
     <article use:noClass>
       <h1 use:noClass>Some heading</h1>
-      <time datetime="13:00">1 hour ago</time>
+      <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>
     </article>

package/src/routes/+page.svelte

@@ -1,7 +1,7 @@
 <script>
   import { onMount } from 'svelte'
   import { pollLinkInjections } from '$lib/api'
-  import { clearLinkInjections, getLinkInjectionElements, getLinkInjectionsParentElement, injectLinksInDocument } from '$lib/linkInjection'
+  import { clearLinkInjections, getLinkInjectionElements, getLinkInjectionsParentElement, injectLinksInDocument, separateLinkInjectionTypes } from '$lib/linkInjection'
   import { track } from '$lib/tracking'
   import { getFullUrlPath } from '$lib/url'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
@@ -15,12 +15,18 @@
   const htmlString = elements.map(p => p.outerHTML).join('')
   const isEditorialMode = isEditorialModeEnabled()
 
-  /** @type {LinkInjection[]} */
-  let linkInjections = $state([])
+  /** @type {LinkInjectionResponse | null} */
+  let response = $state(null)
   /** @type {LinkInjection | null} */
   let activeInjection = $state(null)
   let authorized = $state(false)
   let loading = $state(true)
+  /** @type {LinkInjection[]} */
+  let linkInjections = $state([])
+  let editor = $state()
+
+  // @ts-ignore It's ok if the response is empty
+  const { ai_injections: aiInjections = [], link_injections: manualInjections = [] } = $derived(response || {})
 
   // Rerender link injections when linkInjections change. This is only relevant for editiorial mode.
   $effect(() => {
@@ -38,24 +44,37 @@
   async function initialize() {
     if (isEditorialMode) authorized = await authorize()
 
-    const response = await pollLinkInjections(getFullUrlPath(), htmlString) || []
-    linkInjections = response.filter(i => i.title_details) // Filter out injections without titles
+    response = await pollLinkInjections(getFullUrlPath(), htmlString)
 
-    inject()
+    inject({ aiInjections, manualInjections })
 
     loading = false
+
+    // 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(getFullUrlPath(), htmlString, { requireCompletedResult: true })
+    editor.requestNewAIInjections(continuedResponse?.ai_injections || [])
   }
 
   function rerender() {
     clearLinkInjections()
-    inject()
+    inject(separateLinkInjectionTypes(linkInjections))
   }
 
-  function inject() {
-    if (!linkInjections.length) return
+  /**
+   * @param {LinkInjectionTypes} injections
+   */
+  function inject(injections = { aiInjections, manualInjections }) {
+    if (!aiInjections.length && !manualInjections.length) return
 
-    const filteredInjections = injectLinksInDocument(elements, linkInjections, setTarget)
-    if (JSON.stringify(linkInjections) !== JSON.stringify(filteredInjections)) linkInjections = filteredInjections
+    // 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, setTarget, injections)
+    if (JSON.stringify(filteredInjections) !== JSON.stringify(linkInjections)) linkInjections = filteredInjections
   }
 
   /** @param {LinkInjection} injection */
@@ -66,7 +85,7 @@
 
 <div class="playpilot-link-injections">
   {#if isEditorialMode && authorized}
-    <Editor bind:linkInjections {htmlString} {loading} />
+    <Editor bind:linkInjections bind:this={editor} {htmlString} {loading} aiRunning={response?.ai_running && response?.automation_enabled} />
   {/if}
 
   {#if activeInjection && activeInjection.title_details}
@@ -79,13 +98,13 @@
   @import url('$lib/scss/variables.scss');
   @import url('$lib/scss/global.scss');
 
-  .playpilot-link-injections :global {
-    * {
+  .playpilot-link-injections {
+    :global(*) {
       box-sizing: border-box;
     }
 
-    .playpilot-link-injections button,
-    .playpilot-link-injections input {
+    :global(.playpilot-link-injections button),
+    :global(.playpilot-link-injections input) {
       transition: outline-offset 100ms;
 
       &:focus-visible,

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

@@ -0,0 +1,133 @@
+<script>
+  import IconAi from '../Icons/IconAi.svelte'
+
+  /** @type {{ onadd: (injections: LinkInjection[]) => void }} */
+  let { onadd } = $props()
+
+  let running = $state(true)
+  /** @type {LinkInjection[]} */
+  let injectionsToBeInserted = $state([])
+  let dismissed = $state(false)
+
+  /**
+   * This is called from the Editor component when AI links are ready.
+   * From here we determine what to show the user. Either we show them an option
+   * to inject new links, or we tell them no new injections were found.
+   * @param {LinkInjection[]} injections
+   */
+  export function notifyUserOfNewState(injections) {
+    running = false
+    injectionsToBeInserted = injections
+  }
+</script>
+
+{#if !dismissed}
+  <div class="ai-indicator" class:running>
+    <div class="content">
+      <div class="icon">
+        <IconAi />
+      </div>
+
+      <div>
+        {#if running}
+          AI links are currently processing. You can add manual links while this is ongoing.
+        {:else if injectionsToBeInserted?.length}
+          AI links are ready.
+          <strong>{injectionsToBeInserted.length} New {injectionsToBeInserted.length > 1 ? 'links were' : 'link was'} found.</strong>
+          New links will be used next time you refresh the page, or you can insert them now.
+
+          <button class="button" onclick={() => { onadd(injectionsToBeInserted); dismissed = true }}>
+            Add AI links
+          </button>
+        {:else}
+          AI links finished running, but no new links were found.
+
+          <button class="button" onclick={() => dismissed = true}>Dismiss</button>
+        {/if}
+      </div>
+    </div>
+
+    <div class="border">
+      {#if running}
+        <div class="animator"></div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style lang="scss">
+  .ai-indicator {
+    position: relative;
+    margin: 0 margin(0.5);
+  }
+
+  .content {
+    position: relative;
+    display: flex;
+    gap: margin(0.5);
+    background: var(--playpilot-light);
+    padding: margin(0.5);
+    margin: 2px;
+    border-radius: 0.5rem;
+    font-size: 12px;
+    line-height: 1.5;
+    z-index: 1;
+    color: var(--playpilot-text-color-alt);
+  }
+
+  .icon {
+    color: var(--playpilot-green);
+  }
+
+  .border {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-radius: 0.5rem;
+    background: var(--playpilot-green);
+    overflow: hidden;
+    transition: background-color 500ms;
+
+    .running & {
+      background: var(--playpilot-light);
+    }
+  }
+
+  @keyframes rotate {
+    to {
+      rotate: 360deg;
+    }
+  }
+
+  .animator {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 100%;
+    height: 20rem;
+    background: var(--playpilot-green);
+    transform-origin: left 50%;
+    animation: rotate 2000ms infinite linear;
+    filter: blur(5rem);
+  }
+
+  .button {
+    display: block;
+    appearance: none;
+    padding: 0 margin(0.25);
+    margin: margin(0.25) 0 0;
+    border: 1px solid currentColor;
+    border-radius: 0.25rem;
+    background: transparent;
+    color: var(--playpilot-green);
+    font-family: var(--playpilot-font-family);
+    cursor: pointer;
+
+    &:hover {
+      color: white;
+    }
+  }
+</style>

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

@@ -1,5 +1,5 @@
 <script>
-  import { fly, slide } from 'svelte/transition'
+  import { fade, fly, slide } from 'svelte/transition'
   import { flip } from 'svelte/animate'
   import EditorItem from './EditorItem.svelte'
   import DragHandle from './DragHandle.svelte'
@@ -8,9 +8,11 @@
   import RoundButton from '../RoundButton.svelte'
   import { saveLinkInjections } from '$lib/api'
   import { untrack } from 'svelte'
+  import AIIndicator from './AIIndicator.svelte'
+  import { isEquivalentInjection, isValidInjection } from '$lib/linkInjection';
 
-  /** @type {{ linkInjections: LinkInjection[], htmlString?: string, loading?: boolean }} */
-  let { linkInjections = $bindable(), htmlString = '', loading = false } = $props()
+  /** @type {{ linkInjections: LinkInjection[], htmlString?: string, loading?: boolean, aiRunning?: boolean }} */
+  let { linkInjections = $bindable(), htmlString = '', loading = false, aiRunning = false } = $props()
 
   const editorPositionKey = 'editor-position'
 
@@ -23,9 +25,11 @@
   let hasError = $state(false)
   let scrollDistance = $state(0)
   let initialStateString = $state('')
+  let aIIndicator = $state()
 
   const linkInjectionsString = $derived(JSON.stringify(linkInjections))
   const hasChanged = $derived(initialStateString !== linkInjectionsString)
+  const filteredInjections = $derived(linkInjections.filter(i => i.title_details && !i.removed && !i.duplicate))
 
   $effect(() => {
     if (!loading) untrack(() => initialStateString = linkInjectionsString)
@@ -57,7 +61,12 @@
    * @param {string} key
    */
   function removeInjection(key) {
-    linkInjections = linkInjections.filter(i => i.key !== key)
+    const index = linkInjections.findIndex(i => i.key === key)
+
+    linkInjections[index].manual = true
+    linkInjections[index].removed = true
+
+    linkInjections = [...linkInjections]
   }
 
   /**
@@ -88,6 +97,20 @@
     const target = /** @type {HTMLElement} */ (event.target)
     scrollDistance = target.scrollTop
   }
+
+  /**
+   * This is called from outside when new AI links are ready.
+   * We only pass on links that do not already exist.
+   * @param {LinkInjection[]} injections
+   */
+  export function requestNewAIInjections(injections) {
+    const newInjections = injections.filter(injection => {
+      if (!isValidInjection(injection)) return
+      return !linkInjections.some((i) => isEquivalentInjection(injection, i))
+    })
+
+    aIIndicator.notifyUserOfNewState(newInjections)
+  }
 </script>
 
 <section class="editor playpilot-styled-scrollbar" class:panel-open={manualInjectionActive} class:loading bind:this={editorElement} {onscroll}>
@@ -113,6 +136,10 @@
     {/if}
   </header>
 
+  {#if !loading && aiRunning}
+    <AIIndicator bind:this={aIIndicator} onadd={(newInjections) => newInjections.forEach(i => linkInjections.push(i))} />
+  {/if}
+
   {#if !loading}
     {#if hasError}
       <div class="error" transition:slide|global={{ duration: 150 }}>
@@ -121,9 +148,12 @@
     {/if}
 
     <div class="items">
-      {#each linkInjections as linkInjection, i (linkInjection.key)}
+      {#each filteredInjections as linkInjection (linkInjection.key)}
+        <!-- We want to bind to the original object, not the derived object, so we get the index of the injection in the original object by it's key -->
+        {@const index = linkInjections.findIndex(i => i.key === linkInjection.key)}
+
         <div animate:flip={{ duration: 300 }}>
-          <EditorItem bind:linkInjection={linkInjections[i]} onremove={() => removeInjection(linkInjection.key)} onhighlight={scrollToItem} />
+          <EditorItem bind:linkInjection={linkInjections[index]} onremove={() => removeInjection(linkInjection.key)} onhighlight={scrollToItem} />
         </div>
       {:else}
         <div class="empty">No links available. Add links manually by clicking the + button and select text to add a link to.</div>
@@ -131,7 +161,7 @@
     </div>
 
     {#if hasChanged && linkInjections.length}
-      <button class="save" disabled={saving} onclick={save} transition:fly={{ y: 70, opacity: 1, duration: 200 }}>
+      <button class="save" disabled={saving} onclick={save} in:fade={{ duration: 100 }}>
         {saving ? 'Saving...' : 'Save links'}
       </button>
     {/if}
@@ -168,8 +198,7 @@
     right: margin(1);
     width: 100%;
     max-width: margin(20);
-    max-height: min(50vh, margin(50));
-    min-height: margin(25);
+    height: min(50vh, margin(50));
     padding: margin(1);
     border-radius: margin(1.5);
     background: var(--playpilot-dark);
@@ -187,7 +216,7 @@
   }
 
   .loading {
-    min-height: 0;
+    height: auto;
     border-radius: margin(2);
     margin-left: auto;
     padding-right: margin(0.5);

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

@@ -121,7 +121,7 @@
           <IconChevron {expanded} />
         </button>
 
-        <Switch label="Visible" active={!linkInjection.inactive} onclick={(active) => linkInjection.inactive = !active}>
+        <Switch label="Visible" active={!linkInjection.inactive} onclick={(active) => { linkInjection.inactive = !active; linkInjection.manual = true }}>
           Visible
         </Switch>
       </div>
@@ -130,7 +130,7 @@
     {#if expanded}
       <div class="expanded" transition:slide={{ duration: 100 }}>
         <div class="label">Link URL</div>
-        <TextInput bind:value={linkInjection.playpilot_url} label="Playlink URL" />
+        <TextInput bind:value={linkInjection.playpilot_url} oninput={() => linkInjection.manual = true} label="Playlink URL" />
 
         <div class="label offset">Layout options</div>
         <div class="type-select">

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

@@ -99,6 +99,7 @@
       playpilot_url: url,
       key: generateInjectionKey(selectedTitle.sid),
       title_details: selectedTitle,
+      manual: true,
     }
 
     onsave(linkInjection)