@playpilot/tpi 8.30.0 → 8.31.0

package/package.json

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

package/src/lib/api/externalPages.ts

@@ -151,6 +151,7 @@ export async function saveLinkInjections(linkInjections: LinkInjection[]): Promi
     in_text: linkInjection.in_text ?? true,
     inactive: !!linkInjection.inactive,
     removed: !!linkInjection.removed,
+    type: linkInjection.type,
   }))
 
   const response = await fetchLinkInjections({

package/src/lib/api/participants.ts

@@ -10,7 +10,7 @@ export async function fetchTitlesForParticipant(participant: ParticipantData, {
   const params = {
     language: getLanguage(),
     region: await getRegionBasedOnIp(),
-    include_count: 'false',
+    include_count: false,
     participant_sid: participant.sid,
     page,
   }

package/src/lib/api/providers.ts

@@ -12,7 +12,7 @@ export async function fetchProviders(): Promise<PlaylinkData[]> {
   const params = {
     region: await getRegionBasedOnIp(),
     page: 1,
-    include_count: 'false',
+    include_count: false,
   }
 
   const response = await api<PlaylinkData[]>(`/providers/?api-token=${apiToken}&` + paramsToString(params))

package/src/lib/api/search.ts

@@ -1,4 +1,5 @@
 import { getApiToken } from '$lib/token'
+import type { ParticipantData } from '$lib/types/participant'
 import type { TitleData } from '../types/title'
 import { api } from './api'
 
@@ -9,3 +10,11 @@ export async function searchTitles(query: string): Promise<TitleData[]> {
 
   return await api<TitleData[]>(`/search/titles/?api-token=${apiToken}&query=${query}`)
 }
+
+export async function searchParticipants(query: string): Promise<ParticipantData[]> {
+  const apiToken = getApiToken()
+
+  if (!apiToken) throw new Error('No token was provided')
+
+  return await api<ParticipantData[]>(`/search/participants/?api-token=${apiToken}&query=${query}`)
+}

package/src/lib/api/titles.ts

@@ -14,7 +14,7 @@ export async function fetchTitles(params: Record<string, any> = {}): Promise<API
   params = {
     ...params,
     language: getLanguage(),
-    include_count: 'false',
+    include_count: false,
   }
 
   if (params.region !== null) {

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

@@ -45,8 +45,6 @@
   const position: Position = JSON.parse(localStorage.getItem(editorPositionKey) || '{ "x": 0, "y": 0 }')
   const height: number = parseInt(localStorage.getItem(editorHeightKey) || '0')
 
-
-
   let editorElement: HTMLElement | null = $state(null)
   let manualInjectionActive = $state(false)
   let saving = $state(false)

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

@@ -113,6 +113,8 @@
   <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 if type === 'participant'}
+      <img class="poster participant" src={participant_details!.image} alt="" width="32" height="32" onerror={({ target }) => (target as HTMLImageElement).src = imagePlaceholderDataUrl} />
     {:else}
       <div class="placeholder-image"></div>
     {/if}
@@ -207,7 +209,6 @@
   .poster {
     display: block;
     width: margin(2);
-    height: margin(3);
     border-radius: margin(0.25);
     background: theme(content);
 
@@ -355,4 +356,3 @@
     }
   }
 </style>
-

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { LinkInjection } from '$lib/types/injection'
+  import type { LinkInjection, LinkInjectionDataType } from '$lib/types/injection'
   import type { TitleData } from '$lib/types/title'
   import { onMount } from 'svelte'
   import { playPilotBaseUrl } from '$lib/constants'
@@ -12,7 +12,9 @@
   import RoundButton from '../RoundButton.svelte'
   import Alert from './Alert.svelte'
   import TextInput from './TextInput.svelte'
-  import TitleSearch from './Search/TitleSearch.svelte'
+  import TypeSearch from './Search/TypeSearch.svelte'
+  import type { ParticipantData } from '$lib/types/participant'
+  import { participantUrl, titleUrl } from '$lib/routes'
 
   interface Props {
     onsave: (linkInjection: LinkInjection) => void
@@ -25,7 +27,8 @@
 
   let currentSelection = $state('')
   let selectionSentence = $state('')
-  let selectedTitle: TitleData | null = $state(null)
+  let selectedItem: TitleData | ParticipantData | null = $state(null)
+  let selectedType: LinkInjectionDataType = $state('title')
   let phraseAfter = $state('')
   let phraseBefore = $state('')
   let error = $state('')
@@ -145,8 +148,9 @@
     return total
   }
 
-  function onselect(title: TitleData): void {
-    selectedTitle = title
+  function onselect(title: TitleData | ParticipantData, type: LinkInjectionDataType): void {
+    selectedItem = title
+    selectedType = type
 
     // 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.
@@ -155,25 +159,28 @@
 
   function save(): void {
     if (!currentSelection) return
-    if (!selectedTitle) return
+    if (!selectedItem) return
 
-    const typePath = selectedTitle.type === 'movie' ? 'movie' : 'show'
-    const url = playPilotBaseUrl + `/${typePath}/${selectedTitle.slug}`
-
-    const linkInjection: LinkInjection = {
-      sid: selectedTitle.sid,
+    const linkInjection: Partial<LinkInjection> = {
+      sid: selectedItem.sid,
       title: currentSelection,
       sentence: selectionSentence,
       phrase_before: phraseBefore,
       phrase_after: phraseAfter,
-      playpilot_url: url,
-      key: generateInjectionKey(selectedTitle.sid),
-      title_details: selectedTitle,
+      key: generateInjectionKey(selectedItem.sid),
       manual: true,
-      type: 'title',
+      type: selectedType,
+    }
+
+    if (selectedType === 'title') {
+      linkInjection.title_details = selectedItem as TitleData
+      linkInjection.playpilot_url = titleUrl(selectedItem as TitleData)
+    } else if (selectedType === 'participant') {
+      linkInjection.participant_details = selectedItem as ParticipantData
+      linkInjection.playpilot_url = participantUrl(selectedItem as ParticipantData)
     }
 
-    onsave(linkInjection)
+    onsave(linkInjection as LinkInjection)
     onclose()
   }
 </script>
@@ -198,13 +205,13 @@
   {/if}
 
   {#if !error}
-    <label for="text">Paired title</label>
+    <label for="text">Paired link</label>
     {#key selectionSentence + currentSelection}
-      <TitleSearch {onselect} bind:query />
+      <TypeSearch {onselect} bind:query />
     {/key}
   {/if}
 
-  <button class="save" onclick={save} disabled={!currentSelection || !selectedTitle}>
+  <button class="save" onclick={save} disabled={!currentSelection || !selectedItem}>
     Add playlink
   </button>
 </section>

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

@@ -0,0 +1,86 @@
+<script lang="ts">
+  // In many parts this is a copy of ./TitleSearchItem.svelte
+  // Perhaps worth unifying the two in some sense, but for now I decided to keep it simple.
+
+  import { imagePlaceholderDataUrl } from '$lib/constants'
+  import { removeImageUrlPrefix } from '$lib/image'
+  import { participantUrl } from '$lib/routes'
+  import type { ParticipantData } from '$lib/types/participant'
+  import IconNewTab from '../../Icons/IconNewTab.svelte'
+
+  interface Props {
+    participant: ParticipantData
+    hoverable?: boolean
+    onclick?: () => void
+  }
+
+  const { participant, hoverable = true, onclick = () => null }: Props = $props()
+</script>
+
+<button class="item" class:hoverable {onclick}>
+  <img class="image" src={participant.image || imagePlaceholderDataUrl} alt="" width="42" height="42" onerror={({ target }) => (target as HTMLImageElement).src = imagePlaceholderDataUrl} />
+
+  <div class="content">
+    <div class="name">{participant.name}</div>
+  </div>
+
+  <a
+    href={participantUrl(participant)}
+    target="_blank"
+    class="open-in-new-tab"
+    onclick={event => event.stopImmediatePropagation()}>
+    <IconNewTab />
+  </a>
+</button>
+
+<style lang="scss">
+  .item {
+    appearance: none;
+    display: flex;
+    align-items: center;
+    gap: margin(1);
+    width: 100%;
+    background: transparent;
+    border: 0;
+    padding: margin(0.5);
+    border-bottom: 1px solid theme(content);
+    color: theme(text-color-alt);
+    font-family: inherit;
+    text-align: left;
+    font-size: margin(0.85);
+
+    &.hoverable {
+      cursor: pointer;
+
+      &:hover {
+        background: theme(lighter);
+      }
+    }
+
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+
+  .image {
+    flex: 0 0 auto;
+    height: auto;
+    width: margin(1.75);
+    aspect-ratio: 1/1;
+    border-radius: margin(0.25);
+    background: theme(content);
+  }
+
+  .name {
+    color: theme(text-color);
+  }
+
+  .open-in-new-tab {
+    margin-left: auto;
+    color: theme(text-color-alt);
+
+    &:hover {
+      color: theme(text-color);
+    }
+  }
+</style>

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

@@ -0,0 +1,120 @@
+<script lang="ts">
+  import { searchTitles, searchParticipants } from '$lib/api/search'
+  import type { LinkInjectionDataType } from '$lib/types/injection'
+  import type { ParticipantData } from '$lib/types/participant'
+  import type { TitleData } from '$lib/types/title'
+  import Tabs from '../../Tabs.svelte'
+  import TextInput from '../TextInput.svelte'
+  import ParticipantSearchItem from './ParticipantSearchItem.svelte'
+  import TitleSearchItem from './TitleSearchItem.svelte'
+
+  interface Props {
+    onselect?: (item: TitleData | ParticipantData, type: LinkInjectionDataType) => void
+    query: string
+  }
+
+  let { onselect = () => null, query = $bindable() }: Props = $props()
+
+  const tabs: { label: string, value: LinkInjectionDataType }[] = [{ label: 'Movies & Shows', value: 'title' }, { label: 'Cast & Crew', value: 'participant' }]
+
+  let results: TitleData[] | ParticipantData[] = $state([])
+  let selectedResult: TitleData | ParticipantData | null = $state(null)
+  let currentTab: LinkInjectionDataType = $state(tabs[0].value)
+  let loading = $state(false)
+
+  $effect(() => {
+    if (query) search(query)
+  })
+
+  async function search(query: string): Promise<void> {
+    loading = true
+
+    try {
+      results = currentTab === 'title' ? await searchTitles(query) : await searchParticipants(query)
+    } finally {
+      loading = false
+    }
+  }
+
+  function select(item: TitleData | ParticipantData): void {
+    query = currentTab === 'title' ? (item as TitleData).title : (item as ParticipantData).name
+    selectedResult = item
+
+    onselect(item, currentTab)
+  }
+
+  function setTab(value: string): void {
+    currentTab = value as LinkInjectionDataType
+    query = ''
+    selectedResult = null
+  }
+</script>
+
+<Tabs options={tabs} onclick={(value) => setTab(value)} />
+
+<div class="search">
+  <TextInput
+    bind:value={query}
+    oninput={() => selectedResult = null}
+    name="search"
+    label="Search..." />
+
+  {#if query && !selectedResult}
+    <div class="results" data-testid="search-results">
+      {#each results as item (item.sid)}
+        {#if currentTab === 'title'}
+          <TitleSearchItem title={item as TitleData} onclick={() => select(item as TitleData)} />
+        {:else if currentTab === 'participant'}
+          <ParticipantSearchItem participant={item as ParticipantData} onclick={() => select(item as ParticipantData)} />
+        {/if}
+      {:else}
+        {#if !loading}
+          <em class="empty">No results found</em>
+        {/if}
+      {/each}
+    </div>
+  {/if}
+
+  {#if selectedResult}
+    <div class="selected">
+      {#if currentTab === 'title'}
+        <TitleSearchItem title={selectedResult as TitleData} hoverable={false} />
+      {:else if currentTab === 'participant'}
+        <ParticipantSearchItem participant={selectedResult as ParticipantData} hoverable={false} />
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .search {
+    position: relative;
+    margin-top: margin(0.5);
+  }
+
+  .results {
+    z-index: 1;
+    position: absolute;
+    top: calc(100% + margin(0.5));
+    left: 0;
+    right: 0;
+    height: 30vh;
+    max-height: margin(10);
+    border-radius: margin(0.5);
+    background: theme(lighter);
+    scrollbar-width: thin;
+    overflow: auto;
+  }
+
+  .empty {
+    padding: margin(0.5);
+    font-size: margin(0.75);
+    color: theme(text-color-alt);
+  }
+
+  .selected {
+    margin: margin(0.5) 0;
+    border-radius: 0.5rem;
+    border: 2px solid theme(green);
+  }
+</style>

package/src/routes/components/Tabs.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import Button from './Button.svelte'
+
   interface Option {
     label: string
     value: string
@@ -6,16 +8,22 @@
 
   interface Props {
     options: Option[]
+    onclick?: (value: string) => void
   }
 
-  const { options }: Props = $props()
+  const { options, onclick = () => null }: Props = $props()
+
+  let active = $derived(options[0]?.value)
 
-  let active = $state(options[0]?.value)
+  function onchange(value: string): void {
+    active = value
+    onclick(value)
+  }
 </script>
 
 <div class="tabs">
   {#each options as { label, value }}
-    <button class="tab" class:active={value === active} onclick={() => active = value}>{label}</button>
+    <Button variant={value === active ? 'filled' : 'border'} onclick={() => onchange(value)}>{label}</Button>
   {/each}
 </div>
 
@@ -23,25 +31,6 @@
   .tabs {
     display: flex;
     gap: margin(0.5);
-  }
-
-  .tab {
-    cursor: pointer;
-    appearance: none;
-    background: transparent;
-    padding: margin(0.25) margin(0.5);
-    border: 1px solid currentColor;
-    border-radius: theme(tabs-border-radius, border-radius-small);
-    transition: opacity 100ms;
-    font-family: inherit;
-    font-weight: theme(tabs-font-weight, 500);
-    color: theme(tabs-text-color, text-color-alt);
-    font-size: inherit;
-
-    &.active,
-    &:hover {
-      background: theme(tabs-background-active, content);
-      color: theme(tabs-text-color-active, text-color);
-    }
+    font-size: theme(font-size-base);
   }
 </style>

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

@@ -1,10 +1,11 @@
 import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest'
 import { waitFor } from '@testing-library/svelte'
 
-import { fetchLinkInjections, pollLinkInjections, runAiBasedOnResponse } from '$lib/api/externalPages'
+import { fetchLinkInjections, pollLinkInjections, runAiBasedOnResponse, saveLinkInjections } from '$lib/api/externalPages'
 import { authorize, isEditorialModeEnabled } from '$lib/api/auth'
 import { Language } from '$lib/enums/Language'
 import { api } from '$lib/api/api'
+import { generateInjection } from '../../helpers'
 
 vi.mock('$lib/api/api', () => ({
   api: vi.fn(),
@@ -379,4 +380,136 @@ describe('$lib/api/externalPages', () => {
       expect(api).toHaveBeenCalled()
     })
   })
+
+  describe('saveLinkInjections', () => {
+    beforeEach(() => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections = { token: 'a' }
+    })
+
+    const manualInjection = { ...generateInjection('Some injection', 'injection'), manual: true }
+    const aiInjection = generateInjection('Some other injection', 'other injection')
+
+    it('Should call api with POST method and only manual injections included', async () => {
+      vi.mocked(api).mockResolvedValueOnce({ ok: true })
+
+      // @ts-ignore
+      await saveLinkInjections([manualInjection, aiInjection])
+
+      expect(api).toHaveBeenCalledWith(
+        expect.stringContaining('api-token'),
+        expect.objectContaining({
+          method: 'POST',
+          body: expect.objectContaining({
+            manual_injections: [
+              {
+                sid: manualInjection.sid,
+                title: manualInjection.title,
+                sentence: manualInjection.sentence,
+                phrase_before: manualInjection.phrase_before,
+                phrase_after: manualInjection.phrase_after,
+                playpilot_url: manualInjection.playpilot_url,
+                after_article: false,
+                after_article_style: null,
+                in_text: true,
+                inactive: false,
+                removed: false,
+                type: manualInjection.type,
+              },
+            ],
+          }),
+        }),
+      )
+    })
+
+    it('Should apply given values for after_article, in_text, inactive and removed instead of defaults', async () => {
+      vi.mocked(api).mockResolvedValueOnce({ ok: true })
+
+      const injection = {
+        ...manualInjection,
+        after_article: true,
+        after_article_style: 'modal_button',
+        in_text: false,
+        inactive: true,
+        removed: true,
+      }
+
+      // @ts-ignore
+      await saveLinkInjections([injection])
+
+      expect(api).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          body: expect.objectContaining({
+            manual_injections: [
+              expect.objectContaining({
+                after_article: true,
+                after_article_style: 'modal_button',
+                in_text: false,
+                inactive: true,
+                removed: true,
+              }),
+            ],
+          }),
+        }),
+      )
+    })
+
+    it('Should save with given type', async () => {
+      vi.mocked(api).mockResolvedValueOnce({ ok: true })
+
+      // @ts-ignore
+      await saveLinkInjections([{ ...manualInjection, type: 'participant' }])
+
+      expect(api).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          body: expect.objectContaining({
+            manual_injections: [
+              expect.objectContaining({
+                type: 'participant',
+              }),
+            ],
+          }),
+        }),
+      )
+    })
+
+    it('Should include content_text_selector from window.PlayPilotLinkInjections.selector', async () => {
+      vi.mocked(api).mockResolvedValueOnce({ ok: true })
+
+      // @ts-ignore
+      window.PlayPilotLinkInjections = { token: 'a', selector: '.some-element' }
+
+      // @ts-ignore
+      await saveLinkInjections([manualInjection])
+
+      expect(api).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          body: expect.objectContaining({
+            content_text_selector: '.some-element',
+          }),
+        }),
+      )
+    })
+
+    it('Should return the original linkInjections array unchanged, including non-manual injections', async () => {
+      vi.mocked(api).mockResolvedValueOnce({ ok: true })
+
+      const linkInjections = [manualInjection, aiInjection]
+
+      // @ts-ignore
+      const result = await saveLinkInjections(linkInjections)
+
+      expect(result).toEqual(linkInjections)
+    })
+
+    it('Should throw when the response is faulty', async () => {
+      vi.mocked(api).mockResolvedValueOnce(undefined)
+
+      // @ts-ignore
+      await expect(async () => await saveLinkInjections([manualInjection])).rejects.toThrowError('saveLinkInjections response was faulty')
+    })
+  })
 })

package/src/tests/routes/components/Editorial/EditorItem.test.js

@@ -207,7 +207,6 @@ describe('EditorItem.svelte', () => {
 
     expect(queryByLabelText('Expand')).not.toBeTruthy()
     expect(getByText(fakeLinkInjections[4].participant_details?.name || '-')).toBeTruthy()
-    expect(container.querySelector('.poster')).not.toBeTruthy()
-    expect(container.querySelector('.placeholder-image')).toBeTruthy()
+    expect(container.querySelector('.participant')).toBeTruthy()
   })
 })