@playpilot/tpi 3.1.0-beta.5 → 3.2.0-beta.1

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

@@ -19,10 +19,19 @@
     linkInjections: LinkInjection[],
     htmlString?: string,
     loading?: boolean,
-    aiRunning?: boolean
+    aiRunning?: boolean,
+    injectionsEnabled?: boolean,
+    automationEnabled?: boolean,
   }
 
-  let { linkInjections = $bindable(), htmlString = '', loading = false, aiRunning = false }: Props = $props()
+  let {
+    linkInjections = $bindable(),
+    htmlString = '',
+    loading = false,
+    aiRunning = false,
+    injectionsEnabled = false,
+    automationEnabled = false,
+  }: Props = $props()
 
   const editorPositionKey = 'editor-position'
   const editorHeightKey = 'editor-height'
@@ -38,7 +47,7 @@
   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))
@@ -47,7 +56,7 @@
     if (loading) return
 
     untrack(() => {
-      initialStateString = linkInjectionsString
+      requestAnimationFrame(() => initialStateString = linkInjectionsString)
       trackInjectionsCount()
     })
   })
@@ -112,10 +121,10 @@
 
   function trackInjectionsCount() {
     const payload = {
-      total: linkInjections.length.toString(),
-      failed_automatic: linkInjections.filter(i => i.failed && !i.manual).length.toString(),
-      failed_manual: linkInjections.filter(i => i.failed && i.manual).length.toString(),
-      final_injected: filteredInjections.length.toString(),
+      total: linkInjections.length,
+      failed_automatic: linkInjections.filter(i => i.failed && !i.manual).length,
+      failed_manual: linkInjections.filter(i => i.failed && i.manual).length,
+      final_injected: filteredInjections.length,
     }
 
     track(TrackingEvent.TotalInjectionsCount, null, payload)
@@ -137,19 +146,19 @@
 </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}
 
+  <header class="header">
     <h1>Playlinks</h1>
 
     {#if loading}
@@ -165,11 +174,20 @@
     {/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 {htmlString} bind:this={aIIndicator} {automationEnabled} onadd={(newInjections) => newInjections.forEach(i => linkInjections.push(i))} />
+    {/if}
+
     {#if hasError}
       <div class="error" transition:slide|global={{ duration: 150 }}>
         <Alert>Something went wrong, check your links below.</Alert>
@@ -225,7 +243,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);
@@ -254,6 +272,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,10 +289,8 @@
   }
 
   .header {
+    @extend .handles;
     z-index: 5;
-    position: sticky;
-    top: margin(-1);
-    margin: margin(-1) margin(-1) 0;
     padding: margin(1) margin(1) margin(1) margin(1.5);
     border: 0;
     background: var(--playpilot-dark);
@@ -340,6 +363,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/EditorTrigger.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import IconClose from '../Icons/IconClose.svelte'
+  import IconPlayPilot from '../Icons/IconPlayPilot.svelte'
+
+  interface Props {
+    onclick: () => void,
+    onclose: () => void,
+  }
+
+  const { onclick, onclose }: Props = $props()
+</script>
+
+<div class="trigger">
+  <button type="button" class="button" title="Show PlayPilot TPI editor" {onclick}>
+    <IconPlayPilot />
+  </button>
+
+  <button type="button" class="button close" title="Close PlayPilot TPI" onclick={onclose}>
+    <IconClose />
+  </button>
+</div>
+
+<style lang="scss">
+  .trigger {
+    position: fixed;
+    bottom: margin(1);
+    right: margin(1);
+  }
+
+  .button {
+    cursor: pointer;
+    appearance: none;
+    width: margin(3);
+    height: margin(3);
+    border: 0;
+    padding: margin(0.75);
+    border-radius: 50%;
+    background: var(--playpilot-light);
+    box-shadow: var(--playpilot-shadow-large);
+    transition: transform 50ms;
+    line-height: margin(1.5);
+    text-align: center;
+    font-size: margin(0.85);
+
+    &:hover {
+      filter: brightness(1.1);
+      transform: scale(1.05);
+    }
+
+    :global(svg) {
+      width: 100%;
+    }
+  }
+
+  .close {
+    display: flex;
+    text-align: center;
+    justify-content: center;
+    position: absolute;
+    top: margin(-0.5);
+    right: margin(-0.5);
+    width: margin(1.5);
+    height: margin(1.5);
+    padding: margin(0.25);
+    background: var(--playpilot-content);
+    color: white;
+
+    :global(svg) {
+      width: margin(0.75);
+    }
+  }
+</style>

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

@@ -36,8 +36,7 @@
   function updateSelection(): void {
     const selection = window.getSelection()
     if (!selection?.anchorNode) return
-
-    if (!getLinkInjectionsParentElement().contains(selection.anchorNode.parentElement)) return
+    if (selection.anchorNode.parentElement && !getLinkInjectionsParentElement().contains(selection.anchorNode.parentElement)) return
 
     const selectionText = selection.toString().trim()
     if (!selectionText) return // No content was selected
@@ -45,9 +44,12 @@
     error = ''
     currentSelection = selectionText
 
-    // Selection spanned more than 1 element or contained another element. This will likely result in a failed injection.
-    if (selection.anchorNode !== selection.focusNode) {
-      error = 'Selection is broken up by multiple elements. Please select the text more directly.'
+    // Selection spanned more than 1 element. This will likely result in a failed injection.
+    // Check if the selection contains more than 1 element with non-empty content.
+    const fragment = selection.getRangeAt(0).cloneContents()
+    const selectionNodesWithContent = Array.from(fragment.childNodes).filter(n => n.textContent?.trim())
+    if (selectionNodesWithContent.length > 1) {
+      error = 'Selection contains multiple items. Selection may not contain a mix of styled and non styled text. Please select the text more directly.'
       return
     }
 
@@ -56,7 +58,6 @@
 
     const nodeContent = selection.getRangeAt(0).commonAncestorContainer.textContent
     const documentTextContent = decodeHtmlEntities(htmlString)
-
     if (!nodeContent || !documentTextContent.includes(nodeContent)) { // Selected content is not within the ALI selector
       error = 'Selection was not inside of given content'
     }
@@ -172,10 +173,12 @@
     </div>
   {/if}
 
-  <label for="text">Paired title</label>
-  {#key selectionSentence + currentSelection}
-    <TitleSearch {onselect} bind:query />
-  {/key}
+  {#if !error}
+    <label for="text">Paired title</label>
+    {#key selectionSentence + currentSelection}
+      <TitleSearch {onselect} bind:query />
+    {/key}
+  {/if}
 
   <button class="save" onclick={save} disabled={!currentSelection || !selectedTitle}>
     Add playlink

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>

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

@@ -63,7 +63,7 @@
   ontouchmove={move}
   onmouseup={end}
   ontouchend={end}
-  onresize={() => setHeight(height)} />
+  onresize={() => { if (height) setHeight(height) }} />
 
 <button class="resize-handle" onmousedown={start} ontouchstart={start} aria-label="Move editor"></button>
 
@@ -73,8 +73,8 @@
     appearance: none;
     position: absolute;
     top: 0;
-    left: 20%;
-    width: 60%;
+    left: 0;
+    width: 100%;
     height: margin(0.5);
     background: transparent;
     border: 0;
@@ -99,8 +99,8 @@
       content: "";
       position: absolute;
       top: 0;
-      right: 0;
-      left: 0;
+      right: 20%;
+      left: 20%;
       bottom: 80%;
       border-radius: 0 0 margin(1) margin(1);
       background: var(--playpilot-text-color);

package/src/routes/components/Editorial/Search/TitleSearch.svelte

@@ -20,8 +20,6 @@
     if (query) search(query)
   })
 
-  $inspect(selectedResult)
-
   async function search(query: string): Promise<void> {
     loading = true
 

package/src/routes/components/Editorial/Search/TitleSearchItem.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { playPilotBaseUrl } from '$lib/constants'
+  import { imagePlaceholderDataUrl, playPilotBaseUrl } from '$lib/constants'
   import type { TitleData } from '$lib/types/title'
   import IconIMDb from '../../Icons/IconIMDb.svelte'
   import IconNewTab from '../../Icons/IconNewTab.svelte'
@@ -14,7 +14,7 @@
 </script>
 
 <button class="item" class:hoverable {onclick}>
-  <img class="poster" src={title.standing_poster} alt="" width="28" height="42" />
+  <img class="poster" src={title.standing_poster} alt="" width="28" height="42" onerror={({ target }) => (target as HTMLImageElement).src = imagePlaceholderDataUrl} />
 
   <div class="content">
     <div class="name">{title.title}</div>
@@ -73,10 +73,12 @@
   }
 
   .poster {
+    flex: 0 0 auto;
+    height: auto;
     width: margin(1.75);
+    aspect-ratio: 28/42;
     border-radius: margin(0.25);
-    height: auto;
-    background: var(--playpilot-dark);
+    background: var(--playpilot-content);
   }
 
   .name {

package/src/routes/components/Icons/IconPlayPilot.svelte

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 57.48 62.96">
+  <defs>
+    <style>.playpilot-logo{fill:url(#playpilot-linear-gradient);}</style>
+    <linearGradient id="playpilot-linear-gradient" x1="-90.03" y1="-40.23" x2="-34.8" y2="-101.48" gradientTransform="translate(74.02 108.65)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#de00b9"/><stop offset="0.99" stop-color="#ff557b"/></linearGradient>
+  </defs>
+
+  <path class="playpilot-logo" d="M57.48,31.48C57.48,22.17,20.85,2.19,9.2.18,7.42-.12,3.78-.37,1.36,2.25-4.32,8.39,9.62,21.5,9.62,31.48S-4.32,54.57,1.36,60.72c2.42,2.61,6.06,2.37,7.84,2.06C20.85,60.78,57.48,40.79,57.48,31.48Z"/>
+</svg>

package/src/routes/components/Icons/IconWarning.svelte

@@ -0,0 +1,5 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none">
+  <circle cx="12" cy="17" r="1" fill="var(--playpilot-warning)"/>
+  <path d="M12 10L12 14" stroke="var(--playpilot-warning)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M3.44722 18.1056L10.2111 4.57771C10.9482 3.10361 13.0518 3.10362 13.7889 4.57771L20.5528 18.1056C21.2177 19.4354 20.2507 21 18.7639 21H5.23607C3.7493 21 2.78231 19.4354 3.44722 18.1056Z" stroke="var(--playpilot-warning)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/routes/components/TitlePopover.svelte

@@ -17,5 +17,5 @@
 </script>
 
 <Popover bind:maxHeight>
-  <Title {title} small compact={maxHeight < 250} />
+  <Title {title} small compact={!!maxHeight && maxHeight < 250} />
 </Popover>

package/src/tests/lib/auth.test.js

@@ -1,5 +1,7 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { authorize, getAuthToken, isEditorialModeEnabled } from '$lib/auth'
+
+import { authorize, getAuthToken, isEditorialModeEnabled, removeAuthCookie, removeAuthParamFromUrl } from '$lib/auth'
+import { track } from '$lib/tracking'
 
 /**
  * @param {Object} [options]
@@ -18,6 +20,10 @@ function fakeFetch({ response = '', status = 200, ok = true } = {}) {
   )
 }
 
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
 describe('$lib/auth', () => {
   beforeEach(() => {
     vi.resetAllMocks()
@@ -67,6 +73,7 @@ describe('$lib/auth', () => {
       let authorized = await authorize('https://example.com/some-path?articleReplacementEditToken=some-token')
 
       expect(authorized).not.toBeTruthy()
+      expect(track).toHaveBeenCalled()
     })
   })
 
@@ -92,6 +99,16 @@ describe('$lib/auth', () => {
     })
   })
 
+  describe('getAuthToken', () => {
+    it('Should remove auth cookie when clicked', () => {
+      document.cookie = 'EncryptedToken=some-token=; expires=Thu, 01 Jan 2020 00:00:00 UTC; path='
+
+      removeAuthCookie()
+
+      expect(document.cookie).toBe('EncryptedToken=')
+    })
+  })
+
   describe('isEditorialModeEnabled', () => {
     it('Should return true if both search token and window token are given', async () => {
       window.location.search = '?playpilot-editorial-mode=false'
@@ -112,4 +129,27 @@ describe('$lib/auth', () => {
       expect(isEditorialModeEnabled()).toBe(true)
     })
   })
+
+  describe('removeAuthParamFromUrl', () => {
+    it('Should remove auth param from url', async () => {
+      window.location.search = '?articleReplacementEditToken=test'
+      removeAuthParamFromUrl()
+
+      expect(window.location.search).toBe('')
+    })
+
+    it('Should leave other params intact', async () => {
+      window.location.search = '?articleReplacementEditToken=test&some_param=abc'
+      removeAuthParamFromUrl()
+
+      expect(window.location.search).toBe('?some_param=abc')
+    })
+
+    it('Should not alter the url if the param is not present', async () => {
+      window.location.search = '?some_param=abc&some-other_param=123'
+      removeAuthParamFromUrl()
+
+      expect(window.location.search).toBe('?some_param=abc&some-other_param=123')
+    })
+  })
 })