@playpilot/tpi 3.1.0 → 3.2.0-beta.2

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

@@ -1,75 +1,62 @@
 <script lang="ts">
-  import type { LinkInjection } from '$lib/types/injection'
   import IconAi from '../Icons/IconAi.svelte'
 
   interface Props {
-    // eslint-disable-next-line no-unused-vars
-    onadd: (injections: LinkInjection[]) => void
-    /** Used to guesstimate the load times. */
-    htmlString?: string
+    aiRunning?: boolean
+    automationEnabled?: boolean,
+    message?: string,
+    percentage?: number,
   }
 
-  const { onadd, htmlString = '' }: Props = $props()
-
-  // Guesstimate AI load times based on the given text length.
-  // The value will always be between 1 and 10 minutes.
-  const fakeLoadTimes = $derived(Math.min(Math.max(htmlString.length * 30, 60000), 600000))
-
-  let running = $state(true)
-  let injectionsToBeInserted: LinkInjection[] = $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.
-   */
-  export function notifyUserOfNewState(injections: LinkInjection[]) {
-    running = false
-    injectionsToBeInserted = injections
-  }
+  const { aiRunning = false, automationEnabled = false, message = '', percentage = 0 }: Props = $props()
 </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. This can take several minutes.<br>
-          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>
-
-      {#if running}
-        <div class="loading-bar" data-testid="loading-bar" style:animation-duration="{fakeLoadTimes}ms"></div>
-      {/if}
+<div class="ai-indicator" class:running={aiRunning}>
+  <div class="content">
+    <div class="icon">
+      <IconAi />
     </div>
 
-    <div class="border">
-      {#if running}
-        <div class="animator"></div>
+    <div>
+      {#if !automationEnabled}
+        <strong>AI processing is disabled.</strong> Enable AI from the <a href="https://partner.playpilot.net">Partner Portal</a>
+      {:else if aiRunning}
+        AI links are currently processing. This can take several minutes. We'll automatically insert all found injections once ready.
+
+        <div class="message">
+          {message}
+
+          <span class="ellipses">
+            {#each { length: 3 }}
+              <span>.</span>
+            {/each}
+          </span>
+        </div>
+
+        <div class="loading-bar">
+          <div class="loading-bar-progress">
+            <div class="loading-bar-fill" data-testid="loading-bar" style:width="{Math.max(percentage, 3)}%"></div>
+          </div>
+
+          <div class="loading-bar-label">{percentage}%</div>
+        </div>
       {/if}
     </div>
+
+  </div>
+
+  <div class="border">
+    {#if aiRunning}
+      <div class="animator" data-test-id="animator"></div>
+    {/if}
   </div>
-{/if}
+</div>
 
 <style lang="scss">
+  a {
+    color: currentColor;
+  }
+
   .ai-indicator {
     position: relative;
     margin: 0 margin(0.5);
@@ -90,6 +77,12 @@
     overflow: hidden;
   }
 
+  .message {
+    display: flex;
+    margin-top: margin(0.25);
+    font-style: italic;
+  }
+
   .icon {
     color: var(--playpilot-green);
   }
@@ -129,49 +122,50 @@
     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;
+  .loading-bar {
+    display: grid;
+    grid-template-columns: auto 3em;
+    align-items: center;
+  }
 
-    &:hover {
-      color: white;
-    }
+  .loading-bar-progress {
+    height: 0.5em;
+    border-radius: 0.25rem;
+    background: var(--playpilot-dark);
   }
 
-  @keyframes fake-load {
-    0% {
-      width: 0%;
-    }
+  .loading-bar-fill {
+    height: 100%;
+    border-radius: 0.25rem;
+    background: var(--playpilot-green);
+    transition: width 200ms;
+  }
 
-    2% {
-      width: 20%;
-    }
+  .loading-bar-label {
+    text-align: right;
+  }
 
-    70% {
-      width: 85%;
+  @keyframes fade {
+    0%,
+    100% {
+      opacity: 0;
     }
 
-    100% {
-      width: 90%;
+    25%,
+    75% {
+      opacity: 1;
     }
   }
 
-  .loading-bar {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 0.15em;
-    border-radius: 0 0.25rem 0.25rem 0;
-    background: linear-gradient(to right, var(--playpilot-light), var(--playpilot-green));
-    animation: fake-load forwards;
-    animation-duration: 20000ms;
+  .ellipses {
+    span {
+      animation: fade 2000ms infinite;
+
+      @for $i from 1 through 3 {
+        &:nth-child(#{$i}) {
+          animation-delay: 200ms * $i;
+        }
+      }
+    }
   }
 </style>

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

@@ -2,13 +2,14 @@
   import type { Snippet } from 'svelte'
 
   interface Props {
+    type?: 'error' | 'warning'
     children: Snippet
   }
 
-  const { children }: Props = $props()
+  const { type = 'error', children }: Props = $props()
 </script>
 
-<div class="alert">
+<div class="alert {type}">
   {@render children()}
 </div>
 
@@ -19,5 +20,14 @@
     border: 1px solid var(--playpilot-error);
     background: var(--playpilot-error-dark);
     font-size: margin(0.75);
+
+    &.warning {
+      border-color: var(--playpilot-warning);
+      background: var(--playpilot-warning-dark);
+    }
+
+    :global(a) {
+      color: currentColor;
+    }
   }
 </style>

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

@@ -9,20 +9,32 @@
   import { saveLinkInjections } from '$lib/api'
   import { untrack } from 'svelte'
   import AIIndicator from './AIIndicator.svelte'
-  import { isEquivalentInjection, isValidInjection } from '$lib/linkInjection'
   import type { Position } from '$lib/types/position'
   import type { LinkInjection } from '$lib/types/injection'
   import { track } from '$lib/tracking'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
+  import { heading } from '$lib/actions/heading'
 
   interface Props {
     linkInjections: LinkInjection[],
     htmlString?: string,
     loading?: boolean,
-    aiRunning?: boolean
+    injectionsEnabled?: boolean,
+    aiStatus: {
+      automationEnabled?: boolean,
+      aiRunning?: boolean,
+      message?: string,
+      percentage?: number
+    }
   }
 
-  let { linkInjections = $bindable(), htmlString = '', loading = false, aiRunning = false }: Props = $props()
+  let {
+    linkInjections = $bindable(),
+    htmlString = '',
+    loading = false,
+    injectionsEnabled = false,
+    aiStatus = {},
+  }: Props = $props()
 
   const editorPositionKey = 'editor-position'
   const editorHeightKey = 'editor-height'
@@ -35,19 +47,19 @@
   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 hasChanged = $derived(initialStateString && initialStateString !== linkInjectionsString)
   // 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 { automationEnabled = false, aiRunning = false } = $derived(aiStatus)
 
   $effect(() => {
     if (loading) return
 
     untrack(() => {
-      initialStateString = linkInjectionsString
+      requestAnimationFrame(() => initialStateString = linkInjectionsString)
       trackInjectionsCount()
     })
   })
@@ -120,41 +132,27 @@
 
     track(TrackingEvent.TotalInjectionsCount, null, payload)
   }
-
-  /**
-   * This is called from outside when new AI links are ready.
-   * We only pass on links that do not already exist.
-   */
-  export function requestNewAIInjections(injections: LinkInjection[]): void {
-    const newInjections = injections.filter(injection => {
-      if (!isValidInjection(injection)) return
-      return !linkInjections.some((i) => isEquivalentInjection(injection, i))
-    })
-
-    // @ts-ignore
-    aIIndicator.notifyUserOfNewState(newInjections)
-  }
 </script>
 
 <section class="editor playpilot-styled-scrollbar" class:panel-open={manualInjectionActive} class:loading bind:this={editorElement} {onscroll}>
-  <header class="header">
-    {#if editorElement}
-      {#if !loading}
-        <div class="handle">
-          <ResizeHandle element={editorElement} {height} onchange={(height) => saveLocalStorage(editorHeightKey, JSON.stringify(height))} />
-        </div>
-      {/if}
+  {#if editorElement && !loading}
+    <div class="handles">
+      <div class="handle">
+        <ResizeHandle element={editorElement} {height} onchange={(height) => saveLocalStorage(editorHeightKey, JSON.stringify(height))} />
+      </div>
 
       <div class="handle">
         <DragHandle element={editorElement} {position} limit={{ x: 16, y: 16 }} onchange={(position) => saveLocalStorage(editorPositionKey, JSON.stringify(position))} />
       </div>
-    {/if}
+    </div>
+  {/if}
 
-    <h1>Playlinks</h1>
+  <header class="header">
+    <div class="heading" use:heading>Playlinks</div>
 
     {#if loading}
       <div class="loading">Loading...</div>
-    {:else}
+    {:else if !aiRunning}
       <div class="bubble" aria-label="{filteredInjections.length} found playlinks">
         {filteredInjections.length}
       </div>
@@ -165,32 +163,43 @@
     {/if}
   </header>
 
-  {#if !loading && aiRunning}
-    <AIIndicator {htmlString} bind:this={aIIndicator} onadd={(newInjections) => newInjections.forEach(i => linkInjections.push(i))} />
-  {/if}
-
   {#if !loading}
+    {#if !injectionsEnabled}
+      <div class="alert">
+        <Alert type="warning">
+          <strong>Playlinks are currently not published.</strong> Visitors to this page will not see any of the injected links.
+          Publish playlinks from the <a href="https://partner.playpilot.net">Partner Portal</a>
+        </Alert>
+      </div>
+    {/if}
+
+    {#if aiRunning || !automationEnabled}
+      <AIIndicator {...aiStatus} />
+    {/if}
+
     {#if hasError}
       <div class="error" transition:slide|global={{ duration: 150 }}>
         <Alert>Something went wrong, check your links below.</Alert>
       </div>
     {/if}
 
-    <div class="items">
-      {#each sortedInjections 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)}
+    {#if !aiRunning}
+      <div class="items">
+        {#each sortedInjections 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)}
 
-        <EditorItem bind:linkInjection={linkInjections[index]} onremove={() => removeInjection(linkInjection.key)} onhighlight={scrollToItem} />
-      {:else}
-        <div class="empty">No links available. Add links manually by clicking the + button and select text to add a link to.</div>
-      {/each}
-    </div>
+          <EditorItem bind:linkInjection={linkInjections[index]} onremove={() => removeInjection(linkInjection.key)} onhighlight={scrollToItem} />
+        {:else}
+          <div class="empty">No links available. Add links manually by clicking the + button and select text to add a link to.</div>
+        {/each}
+      </div>
 
-    {#if hasChanged && linkInjections.length}
-      <button class="save" disabled={saving} onclick={save} in:fade={{ duration: 100 }}>
-        {saving ? 'Saving...' : 'Save links'}
-      </button>
+      {#if hasChanged && linkInjections.length}
+        <button class="save" disabled={saving} onclick={save} in:fade={{ duration: 100 }}>
+          {saving ? 'Saving...' : 'Save links'}
+        </button>
+      {/if}
     {/if}
   {/if}
 
@@ -208,14 +217,6 @@
 </section>
 
 <style lang="scss">
-  h1 {
-    margin: 0 margin(0.75) 0 0;
-    color: var(--playpilot-text-color);
-    font-size: margin(1.25);
-    font-weight: normal;
-    line-height: normal;
-  }
-
   .editor {
     z-index: 2147483646; // 1 less than as high as she goes;
     display: flex;
@@ -225,7 +226,7 @@
     right: margin(1);
     width: 100%;
     max-width: margin(22);
-    height: min(50vh, margin(50));
+    height: min(70vh, margin(40));
     min-height: 10rem;
     margin: 0;
     padding: margin(1);
@@ -238,6 +239,8 @@
     overflow-y: auto;
     overflow-x: hidden;
     line-height: normal;
+
+    @include reset-svg();
   }
 
   .panel-open {
@@ -254,6 +257,13 @@
     font-size: margin(0.85);
   }
 
+  .handles {
+    z-index: 20;
+    position: sticky;
+    top: margin(-1);
+    margin: margin(-1) margin(-1) 0;
+  }
+
   .handle {
     opacity: 0;
     transition: opacity 150ms;
@@ -264,21 +274,28 @@
   }
 
   .header {
+    @extend .handles;
     z-index: 5;
-    position: sticky;
-    top: margin(-1);
-    margin: margin(-1) margin(-1) 0;
+    display: flex;
+    align-items: center;
     padding: margin(1) margin(1) margin(1) margin(1.5);
+    margin: 0 margin(-1) 0;
     border: 0;
     background: var(--playpilot-dark);
-    display: flex;
-    align-items: center;
 
     .loading & {
       margin: margin(-1);
     }
   }
 
+  .heading {
+    margin: 0 margin(0.75) 0 0;
+    color: var(--playpilot-text-color);
+    font-size: margin(1.25);
+    font-weight: normal;
+    line-height: normal;
+  }
+
   .bubble {
     appearance: none;
     width: margin(1.5);
@@ -340,6 +357,10 @@
     margin-top: margin(0.5);
   }
 
+  .alert {
+    margin: 0 margin(0.5) margin(0.5);
+  }
+
   .panel {
     z-index: 10;
     position: absolute;

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

@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { slide } from 'svelte/transition'
+  import { fade, slide } from 'svelte/transition'
   import IconChevron from '../Icons/IconChevron.svelte'
+  import IconWarning from '../Icons/IconWarning.svelte'
   import Switch from './Switch.svelte'
   import TextInput from './TextInput.svelte'
   import PlaylinkTypeSelect from './PlaylinkTypeSelect.svelte'
@@ -11,7 +12,9 @@
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import type { LinkInjection } from '$lib/types/injection'
   import type { TitleData } from '$lib/types/title'
-  import { truncateAroundPhrase } from '$lib/text'
+  import { cleanPhrase, truncateAroundPhrase } from '$lib/text'
+  import { getLinkInjectionElements, getLinkInjectionsParentElement, isValidPlaylinkType } from '$lib/linkInjection'
+  import { imagePlaceholderDataUrl } from '$lib/constants'
 
   interface Props {
     linkInjection: LinkInjection,
@@ -22,7 +25,7 @@
 
   const { linkInjection = $bindable(), onremove = () => null, onhighlight = () => null }: Props = $props()
 
-  const { key, sentence, title_details, failed, inactive } = $derived(linkInjection || {})
+  const { key, sentence, title_details, failed, failed_message, inactive } = $derived(linkInjection || {})
 
   // @ts-ignore Definitely not null
   const title: TitleData = $derived(title_details)
@@ -42,8 +45,9 @@
    */
   function toggleOnPageResultHighlight(state: boolean = true): void {
     const matchingElements = getMatchingElements()
+
     matchingElements.forEach(element => {
-      element.classList.toggle('injection-highlight', state)
+      element.classList.toggle('playpilot-injection-highlight', state)
     })
   }
 
@@ -76,7 +80,14 @@
   }
 
   function getMatchingElements(): Element[] {
-    return Array.from(document.querySelectorAll(`[data-playpilot-injection-key="${key}"]`))
+    const injectedElements = Array.from(document.querySelectorAll(`[data-playpilot-injection-key="${key}"]`))
+    if (injectedElements.length) return injectedElements
+
+    // No matching injection was found, so we try and get the element the sentence might be in.
+    // Could not be entirely accurate. Could also result in nothing depending on why the injection failed.
+    return getLinkInjectionElements((getLinkInjectionsParentElement())).filter((element) => {
+      return cleanPhrase(element.innerText).includes(cleanPhrase(linkInjection.sentence))
+    }) || []
   }
 </script>
 
@@ -94,7 +105,7 @@
   bind:this={element}
   out:slide|global={{ duration: 200 }}>
   <div class="header">
-    <img class="poster" src={title.standing_poster} alt="" width="32" height="48" />
+    <img class="poster" src={title.standing_poster} alt="" width="32" height="48" onerror={({ target }) => (target as HTMLImageElement).src = imagePlaceholderDataUrl} />
 
     <div class="info">
       <div class="title">{title.title}</div>
@@ -120,13 +131,19 @@
 
   <div class="content">
     {#if failed}
-      <Alert>A match was found, but the link could not be injected.</Alert>
+      <Alert>{failed_message}</Alert>
     {:else}
       <div class="actions">
         <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">
+            <IconWarning />
+          </div>
+        {/if}
+
         <Switch label={inactive ? 'Inactive' : 'Visible'} active={!linkInjection.inactive} onclick={(active) => { linkInjection.inactive = !active; linkInjection.manual = true }}>
           {inactive ? 'Inactive' : 'Visible'}
         </Switch>
@@ -293,5 +310,13 @@
   .offset {
     margin-top: margin(0.75);
   }
+
+  .warning {
+    margin: 0 auto 0 margin(0.5);
+
+    :global(svg) {
+      display: block;
+    }
+  }
 </style>
 

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

@@ -11,6 +11,7 @@
   import { getLinkInjectionsParentElement } from '$lib/linkInjection'
   import type { LinkInjection } from '$lib/types/injection'
   import type { TitleData } from '$lib/types/title'
+  import { heading } from '$lib/actions/heading'
 
   interface Props {
     htmlString: string
@@ -159,7 +160,7 @@
 <section class="layout">
   <div class="header">
     <RoundButton onclick={onclose} size="24px"><IconBack /></RoundButton>
-    <h2>Add Playlink manually</h2>
+    <div class="heading" use:heading={2}>Add Playlink manually</div>
   </div>
 
   <p>Highlight the text section in your post that you want to turn into a Playlink.</p>
@@ -186,14 +187,6 @@
 </section>
 
 <style lang="scss">
-  h2 {
-    margin: 0;
-    color: var(--playpilot-text-color);
-    font-size: margin(1);
-    line-height: normal;
-    font-weight: normal;
-  }
-
   p,
   label {
     font-size: margin(0.75);
@@ -220,6 +213,14 @@
     margin-bottom: margin(1);
   }
 
+  .heading {
+    margin: 0;
+    color: var(--playpilot-text-color);
+    font-size: margin(1);
+    line-height: normal;
+    font-weight: normal;
+  }
+
   .error {
     margin-top: margin(0.5);
   }

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

@@ -3,6 +3,8 @@
   import IconAlign from '../Icons/IconAlign.svelte'
   import Switch from './Switch.svelte'
   import type { LinkInjection } from '$lib/types/injection'
+  import { isValidPlaylinkType } from '$lib/linkInjection'
+  import Alert from './Alert.svelte'
 
   interface Props {
     linkInjection: LinkInjection
@@ -33,6 +35,14 @@
   </Switch>
 </div>
 
+{#if !isValidPlaylinkType(linkInjection)}
+  <div class="alert" transition:slide={{ duration: 200 }}>
+    <Alert type="warning">
+      At least one layout option must be selected for the playlink to be visible.
+    </Alert>
+  </div>
+{/if}
+
 {#if linkInjection.after_article}
   <div transition:slide={{ duration: 100 }}>
     <div class="label">Bottom playlinks style</div>
@@ -133,4 +143,8 @@
     font-size: margin(0.675);
     color: var(--playpilot-text-color-alt);
   }
+
+  .alert {
+    margin-top: margin(0.5);
+  }
 </style>