@playpilot/tpi 3.0.1 → 3.1.0-beta.2

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

@@ -44,6 +44,13 @@
 
     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.'
+      return
+    }
+
     query = currentSelection
     selectionSentence = findSentenceForSelection(selection, selectionText)
 
@@ -65,23 +72,63 @@
     // This is meant for content that is inside of other elements such as <p>Some <strong>word</strong> in a sentence</p>
     // If we selected "word", we'd still want the full sentence, rather than just the "word".
     let node = range.startContainer
-    if ((node.textContent || '').length <= selectionText.length * 2 && range.startContainer.parentNode) {
-      node = range.startContainer.parentNode
+    while((node.textContent || '').length <= selectionText.length * 3 && node.parentNode) {
+      node = node.parentNode
     }
 
-    if (!node) return ''
+    if (!node || !node.textContent) return ''
 
-    const fullText = node.textContent || ''
-    const startOffset = range.startOffset
-    const endOffset = range.endOffset
+    const fullText = node.textContent
 
-    const before = fullText.slice(0, startOffset).lastIndexOf('.') // Character at start of the sentence
-    const after = fullText.slice(endOffset).search(/[.!?]/) // Character at end of the sentence
+    const absoluteStart = getAbsoluteOffset(node, range.startContainer, range.startOffset)
+    const absoluteEnd = getAbsoluteOffset(node, range.endContainer, range.endOffset)
+
+    // Find sentence boundaries
+    const before = fullText.slice(0, absoluteStart).lastIndexOf('.')
+    const afterMatch = fullText.slice(absoluteEnd).match(/[.!?]/)
+    const after = afterMatch ? absoluteEnd + afterMatch.index! : fullText.length
 
     const sentenceStart = before === -1 ? 0 : before + 1
-    const sentenceEnd = after === -1 ? fullText.length : endOffset + after + 1
+    const sentenceEnd = after
 
-    return fullText.slice(sentenceStart, sentenceEnd).trim()
+    return fullText.slice(sentenceStart, sentenceEnd + 1).trim()
+  }
+
+  /**
+   * Get the offset of text in a sentence based on the node it is in. When we select text that is
+   * inside of another node, range.startOffset only returns the offset inside of it's original node.
+   * We need to get the offset based on the full sentence it is in. We traverse each node inside of
+   * the parent and add up the total offset.
+   */
+  function getAbsoluteOffset(node: Node, container: Node, offset: number): number {
+    let total = 0
+    const parent = node
+
+    const traverse = (current: Node): boolean => {
+      if (current === container) {
+        total += offset
+        return true
+      }
+
+      if (current.nodeType === Node.TEXT_NODE) total += current.textContent?.length || 0
+
+      for (let child = current.firstChild; child; child = child.nextSibling) {
+        if (traverse(child)) return true
+      }
+
+      return false
+    }
+
+    traverse(parent)
+    return total
+  }
+
+  function onselect(title: TitleData) {
+    selectedTitle = title
+
+    // Remove selection that was made anywhere on the page. This is to avoid the input from being overwritten
+    // by the selection right after selecting a result.
+    window.getSelection()?.removeAllRanges?.()
   }
 
   function save(): void {
@@ -126,7 +173,9 @@
   {/if}
 
   <label for="text">Paired title</label>
-  <TitleSearch onselect={(title) => selectedTitle = title} bind:query />
+  {#key selectionSentence + currentSelection}
+    <TitleSearch {onselect} bind:query />
+  {/key}
 
   <button class="save" onclick={save} disabled={!currentSelection || !selectedTitle}>
     Add playlink
@@ -136,8 +185,10 @@
 <style lang="scss">
   h2 {
     margin: 0;
+    color: var(--playpilot-text-color);
     font-size: margin(1);
-    font-weight: normal
+    line-height: normal;
+    font-weight: normal;
   }
 
   p,
@@ -156,6 +207,7 @@
     height: 100%;
     display: flex;
     flex-direction: column;
+    margin: 0;
   }
 
   .header {
@@ -177,19 +229,20 @@
     padding: margin(0.5);
     border: 0;
     border-radius: margin(2);
-    background: var(--playpilot-content);
+    background: var(--playpilot-green);
     transition: opacity 100ms;
     font-family: inherit;
-    color: var(--playpilot-text-color-alt);
+    color: var(--playpilot-text-color);
 
     &:not([disabled]):hover {
-      background: var(--playpilot-content-light);
-      color: var(--playpilot-text-color);
+      outline: 2px solid currentColor;
     }
 
     &[disabled] {
       cursor: default;
+      background: var(--playpilot-light);
       opacity: 0.5;
+      color: var(--playpilot-text-color-alt);
     }
   }
 </style>

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

@@ -0,0 +1,111 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+
+  interface Props {
+    element: HTMLElement,
+    height: number,
+    // eslint-disable-next-line no-unused-vars
+    onchange?: (height: number) => void
+  }
+
+  let { element, height = 200, onchange = () => null }: Props = $props()
+
+  const offset = 16
+
+  let isResizing = false
+  let startY = 0
+  let startHeight = height
+
+  onMount(() => {
+    setHeight(height)
+  })
+
+  function setHeight(newHeight: number): void {
+    const minHeight = window.getComputedStyle(element).minHeight || '0'
+    const clampedHeight = Math.max(parseInt(minHeight), Math.min(newHeight, getMaxHeight()))
+
+    element.style.height = `${clampedHeight}px`
+
+    height = clampedHeight
+    onchange(clampedHeight)
+  }
+
+  function start(event: MouseEvent | TouchEvent): void {
+    isResizing = true
+    // @ts-ignore
+    startY = event.pageY || event.touches?.[0]?.pageY || 0
+    startHeight = element.clientHeight
+  }
+
+  function move(event: MouseEvent | TouchEvent): void {
+    if (!isResizing) return
+
+    // @ts-ignore
+    const currentY = event.pageY || event.touches?.[0]?.pageY || 0
+    const difference = startY - currentY
+    const newHeight = startHeight + difference
+
+    setHeight(newHeight)
+  }
+
+  function end() {
+    isResizing = false
+  }
+
+  function getMaxHeight(): number {
+    const elementBottom = window.innerHeight - element.getBoundingClientRect().bottom
+    return Math.max(window.innerHeight - (offset * 2) - elementBottom, 0)
+  }
+</script>
+
+<svelte:window
+  onmousemove={move}
+  ontouchmove={move}
+  onmouseup={end}
+  ontouchend={end}
+  onresize={() => setHeight(height)} />
+
+<button class="resize-handle" onmousedown={start} ontouchstart={start} aria-label="Move editor"></button>
+
+<style lang="scss">
+  .resize-handle {
+    z-index: 10;
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 20%;
+    width: 60%;
+    height: margin(0.5);
+    background: transparent;
+    border: 0;
+    cursor: ns-resize;
+
+    &:hover::before {
+      opacity: 0.65;
+      transform: scale(1.05);
+    }
+
+    &:active::before {
+      opacity: 0.9;
+      transform: scale(0.95);
+    }
+
+    &:active {
+      cursor: grabbing;
+    }
+
+    &::before {
+      display: block;
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      bottom: 80%;
+      border-radius: 0 0 margin(1) margin(1);
+      background: var(--playpilot-text-color);
+      opacity: 0.15;
+      transition: opacity 100ms, transform 50ms;
+    }
+  }
+</style>

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

@@ -1,14 +1,12 @@
 <script lang="ts">
-  import { playPilotBaseUrl } from '$lib/constants'
   import { searchTitles } from '$lib/search'
   import type { TitleData } from '$lib/types/title'
-  import IconIMDb from '../../Icons/IconIMDb.svelte'
-  import IconNewTab from '../../Icons/IconNewTab.svelte'
   import TextInput from '../TextInput.svelte'
+  import TitleSearchItem from './TitleSearchItem.svelte'
 
   interface Props {
     // eslint-disable-next-line no-unused-vars
-    onselect?: (title: TitleData) => void,
+    onselect?: (title: TitleData) => void
     query: string
   }
 
@@ -22,9 +20,10 @@
     if (query) search(query)
   })
 
+  $inspect(selectedResult)
+
   async function search(query: string): Promise<void> {
     loading = true
-    selectedResult = null
 
     try {
       results = await searchTitles(query)
@@ -44,41 +43,14 @@
 <div class="search">
   <TextInput
     bind:value={query}
+    oninput={() => selectedResult = null}
     name="search"
     label="Search..." />
 
   {#if query && !selectedResult}
-    <div class="results">
+    <div class="results" data-testid="search-results">
       {#each results as title (title.sid)}
-        <button class="item" onclick={() => select(title)}>
-          <img class="poster" src={title.standing_poster} alt="" width="28" height="42" />
-
-          <div class="content">
-            <div class="name">{title.title}</div>
-
-            <div class="meta">
-              <div class="imdb">
-                <IconIMDb />
-                {title.imdb_score}
-              </div>
-
-              <div>{title.year}</div>
-              <div>{title.type}</div>
-
-              {#if title.length}
-                <div>{title.length} min</div>
-              {/if}
-            </div>
-          </div>
-
-          <a
-            href="{playPilotBaseUrl}/{title.type}/{title.slug}"
-            target="_blank"
-            class="open-in-new-tab"
-            onclick={event => event.stopImmediatePropagation()}>
-            <IconNewTab />
-          </a>
-        </button>
+        <TitleSearchItem {title} onclick={() => select(title)} />
       {:else}
         {#if !loading}
           <em class="empty">No results found</em>
@@ -86,6 +58,12 @@
       {/each}
     </div>
   {/if}
+
+  {#if selectedResult}
+    <div class="selected">
+      <TitleSearchItem title={selectedResult} hoverable={false} />
+    </div>
+  {/if}
 </div>
 
 <style lang="scss">
@@ -107,66 +85,15 @@
     overflow: auto;
   }
 
-  .item {
-    cursor: pointer;
-    appearance: none;
-    display: flex;
-    align-items: flex-start;
-    gap: margin(1);
-    width: 100%;
-    background: transparent;
-    border: 0;
-    padding: margin(0.5);
-    border-bottom: 1px solid var(--playpilot-content);
-    color: var(--playpilot-text-color-alt);
-    font-family: inherit;
-    text-align: left;
-
-    &:hover {
-      background: var(--playpilot-lighter);
-    }
-
-    &:last-child {
-      border-bottom: 0;
-    }
-  }
-
-  .poster {
-    width: margin(1.75);
-    border-radius: margin(0.25);
-    height: auto;
-    background: var(--playpilot-dark);
-  }
-
-  .name {
-    color: var(--playpilot-text-color);
-  }
-
-  .meta {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0 margin(0.5);
-    font-size: margin(0.75);
-  }
-
-  .imdb {
-    display: flex;
-    align-items: center;
-    gap: margin(0.25);
-  }
-
   .empty {
     padding: margin(0.5);
     font-size: margin(0.75);
     color: var(--playpilot-text-color-alt);
   }
 
-  .open-in-new-tab {
-    margin-left: auto;
-    color: var(--playpilot-text-color-alt);
-
-    &:hover {
-      color: vaR(--playpilot-text-color);
-    }
+  .selected {
+    margin: margin(0.5) 0;
+    border-radius: 0.5rem;
+    border: 2px solid var(--playpilot-green);
   }
 </style>

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

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import { playPilotBaseUrl } from '$lib/constants'
+  import type { TitleData } from '$lib/types/title'
+  import IconIMDb from '../../Icons/IconIMDb.svelte'
+  import IconNewTab from '../../Icons/IconNewTab.svelte'
+
+  interface Props {
+    title: TitleData
+    hoverable?: boolean
+    onclick?: () => void
+  }
+
+  const { title, hoverable = true, onclick = () => null }: Props = $props()
+</script>
+
+<button class="item" class:hoverable {onclick}>
+  <img class="poster" src={title.standing_poster} alt="" width="28" height="42" />
+
+  <div class="content">
+    <div class="name">{title.title}</div>
+
+    <div class="meta">
+      <div class="imdb">
+        <IconIMDb />
+        {title.imdb_score}
+      </div>
+
+      <div>{title.year}</div>
+      <div>{title.type}</div>
+
+      {#if title.length}
+        <div>{title.length} min</div>
+      {/if}
+    </div>
+  </div>
+
+  <a
+    href="{playPilotBaseUrl}/{title.type}/{title.slug}"
+    target="_blank"
+    class="open-in-new-tab"
+    onclick={event => event.stopImmediatePropagation()}>
+    <IconNewTab />
+  </a>
+</button>
+
+<style lang="scss">
+  .item {
+    appearance: none;
+    display: flex;
+    align-items: flex-start;
+    gap: margin(1);
+    width: 100%;
+    background: transparent;
+    border: 0;
+    padding: margin(0.5);
+    border-bottom: 1px solid var(--playpilot-content);
+    color: var(--playpilot-text-color-alt);
+    font-family: inherit;
+    text-align: left;
+    font-size: 0.85rem;
+
+    &.hoverable {
+      cursor: pointer;
+
+      &:hover {
+        background: var(--playpilot-lighter);
+      }
+    }
+
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+
+  .poster {
+    width: margin(1.75);
+    border-radius: margin(0.25);
+    height: auto;
+    background: var(--playpilot-dark);
+  }
+
+  .name {
+    color: var(--playpilot-text-color);
+  }
+
+  .meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0 margin(0.5);
+    font-size: margin(0.75);
+  }
+
+  .imdb {
+    display: flex;
+    align-items: center;
+    gap: margin(0.25);
+  }
+
+  .open-in-new-tab {
+    margin-left: auto;
+    color: var(--playpilot-text-color-alt);
+
+    &:hover {
+      color: vaR(--playpilot-text-color);
+    }
+  }
+</style>

package/src/routes/components/Title.svelte

@@ -15,7 +15,9 @@
 
   const { title, small = false, compact = false }: Props = $props()
 
-  let imageLoaded = $state(false)
+  let posterLoaded = $state(false)
+  let backgroundLoaded = $state(false)
+  let useBackgroundFallback = $state(false)
 </script>
 
 <div class="content" class:small class:compact data-playpilot-link-injections-title data-playpilot-original-title={title.original_title}>
@@ -24,10 +26,10 @@
       <div class="top">
         <img
           class="poster"
-          class:loaded={imageLoaded}
+          class:loaded={posterLoaded}
           src={title.standing_poster}
           alt="Movie poster for '{title.title}'"
-          onload={() => imageLoaded = true} />
+          onload={() => posterLoaded = true} />
       </div>
     {/if}
 
@@ -65,7 +67,15 @@
 </div>
 
 <div class="background" class:faded={compact}>
-  <img src={title.medium_poster} alt="" />
+  {#key useBackgroundFallback}
+    <img
+      src={useBackgroundFallback ? title.standing_poster : title.medium_poster}
+      alt=""
+      class:loaded={backgroundLoaded}
+      class:blur={useBackgroundFallback}
+      onload={() => backgroundLoaded = true}
+      onerror={() => useBackgroundFallback = true} />
+  {/key}
 </div>
 
 <style lang="scss">
@@ -173,6 +183,7 @@
     height: margin(12);
     overflow: hidden;
     background: var(--playpilot-detail-background, var(--playpilot-lighter));
+    z-index: 0;
 
     &::before {
       content: "";
@@ -183,6 +194,7 @@
       bottom: 0;
       left: 0;
       background: linear-gradient(to top, var(--playpilot-detail-background, var(--playpilot-light)), transparent 40%);
+      z-index: 1;
     }
 
     img {
@@ -191,6 +203,18 @@
       object-fit: cover;
       object-position: center;
       margin: 0;
+      opacity: 0;
+      z-index: 0;
+
+      &.loaded {
+        opacity: 1;
+      }
+
+      &.blur {
+        opacity: 0.5;
+        transform: scale(1.1);
+        filter: blur(0.75rem);
+      }
     }
   }
 

package/src/tests/helpers.js

@@ -14,6 +14,7 @@ export function fakeFetch({ response = '', status = 200, ok = true } = {}) {
       ok,
       status,
       json: () => response,
+      text: () => response,
     }),
   )
 }
@@ -21,7 +22,7 @@ export function fakeFetch({ response = '', status = 200, ok = true } = {}) {
 /**
  * @param {string} sentence
  * @param {string} title
- * @returns {LinkInjection}
+ * @returns {import('$lib/types/injection').LinkInjection}
  */
 export function generateInjection(sentence, title) {
   return {

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

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest'
-import { fetchLinkInjections, pollLinkInjections } from '$lib/api'
+import { fetchConfig, fetchLinkInjections, getApiToken, pollLinkInjections } from '$lib/api'
 import { fakeFetch } from '../helpers'
 import { authorize, isEditorialModeEnabled } from '$lib/auth'
 import { Language } from '$lib/enums/Language'
@@ -180,4 +180,33 @@ describe('$lib/api', () => {
       expect(result).toEqual(expect.objectContaining({ link_injections: [], ai_injections: [] }))
     })
   })
+
+  describe('fetchConfig', () => {
+    it('Should call fetch to expected endpoint with api token', async () => {
+      fakeFetch({ response: { some_key: 'some-value' } })
+
+      const result = await fetchConfig()
+
+      expect(result).toEqual({ some_key: 'some-value' })
+      expect(global.fetch).toHaveBeenCalledWith(
+        expect.stringContaining(`/domains/config?api-token=${getApiToken()}`),
+        expect.any(Object),
+      )
+    })
+
+    it('Should return error if no api token was provided', async () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections = { token: '' }
+
+      await expect(async () => await fetchConfig()).rejects.toThrowError()
+    })
+
+    it('Should return null if fetch returned nothing', async () => {
+      fakeFetch({ response: '' })
+
+      const result = await fetchConfig()
+
+      expect(result).toEqual(null)
+    })
+  })
 })