@playpilot/tpi 8.30.0 → 8.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.30.0",
+	"version": "8.32.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

@@ -1,3 +1,4 @@
+import { Sorting } from '$lib/enums/Sorting'
 import { getLanguage } from '$lib/language'
 import { getApiToken } from '$lib/token'
 import type { ParticipantData } from '$lib/types/participant'
@@ -6,15 +7,17 @@ import type { TitleData } from '../types/title'
 import { api } from './api'
 import { getRegionBasedOnIp } from './region'
 
-export async function fetchTitlesForParticipant(participant: ParticipantData, { page = 1 }: { page?: number } = {}): Promise<TitleData[]> {
-  const params = {
+export async function fetchTitlesForParticipant(participant: ParticipantData, { page = 1, sorting = null }: { page?: number, sorting?: (typeof Sorting)[keyof typeof Sorting] | null } = {}): Promise<TitleData[]> {
+  const params: Record<string, any> = {
     language: getLanguage(),
     region: await getRegionBasedOnIp(),
-    include_count: 'false',
+    include_count: false,
     participant_sid: participant.sid,
     page,
   }
 
+  if (sorting) params.ordering = sorting
+
   const response = await api<{ results: TitleData[] }>(`/titles/browse?api-token=${getApiToken()}&${paramsToString(params)}`)
 
   return response.results

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/lib/enums/Sorting.ts

@@ -2,4 +2,5 @@ export const Sorting = Object.freeze({
   Popular: '-popularity',
   New: '-new',
   Best: '-best',
+  Chronological: '-year',
 })

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/Participants/Participant.svelte

@@ -5,28 +5,40 @@
   import { openModal } from '$lib/modal'
   import type { ParticipantData } from '$lib/types/participant'
   import type { TitleData } from '$lib/types/title'
+  import { Sorting } from '$lib/enums/Sorting'
   import { t } from '$lib/localization'
   import { isRetargetingAllowed } from '$lib/retargeting'
   import { trackViaPixel } from '@playpilot/retargeting-tracking'
   import { MetaEvent } from '$lib/enums/TrackingEvent'
   import ParticipantImage from './ParticipantImage.svelte'
   import ListTitle from '../ListTitle.svelte'
+  import Dropdown from '../Explore/Filter/Dropdown.svelte'
+  import Button from '../Button.svelte'
 
   interface Props {
     participant: ParticipantData
     small?: boolean
   }
 
+  type TitleSorting = { label: string; value: (typeof Sorting)[keyof typeof Sorting] }
+
   const { participant, small = false }: Props = $props()
 
   const { name, birth_date, death_date } = $derived(participant)
 
+  const sortings: TitleSorting[] = [
+    { label: 'Popularity', value: Sorting.Popular },
+    { label: 'Top Rated', value: Sorting.Best },
+    { label: 'Year', value: Sorting.Chronological },
+  ]
+
   const pageSize = 30
 
   let titles: TitleData[] = $state([])
   let page = $state(1)
   let hasMorePages = $state(true)
   let loading = $state(true)
+  let currentSorting = $state(sortings[0])
 
   onMount(loadMore)
 
@@ -41,7 +53,7 @@
     loading = true
 
     try {
-      const results = await fetchTitlesForParticipant(participant, { page })
+      const results = await fetchTitlesForParticipant(participant, { page, sorting: currentSorting.value })
 
       titles = [...titles, ...results]
       hasMorePages = results?.length >= pageSize
@@ -52,6 +64,14 @@
       page += 1
     }
   }
+
+  function setSorting(sorting: TitleSorting): void {
+    currentSorting = sorting
+    titles = []
+    page = 1
+
+    loadMore()
+  }
 </script>
 
 <div class="header" class:small>
@@ -69,8 +89,28 @@
 </div>
 
 <div class="content">
-  {#if !small}
-    <div class="heading subheading" use:heading={3} id="credits">{t('Credits')}</div>
+  {#if !small && (titles.length && !loading)}
+    <div class="list-header">
+      <div class="heading subheading" use:heading={3} id="credits">{t('Credits')}</div>
+
+      <div class="sort">
+        {t('Sort By')}:
+
+        <Dropdown>
+          {#snippet button({ toggle })}
+            <Button variant="border" onclick={toggle}>{t(currentSorting.label)}</Button>
+          {/snippet}
+
+          {#snippet content()}
+            <div class="sortings">
+              {#each sortings as sorting}
+                <Button variant="link" onclick={() => setSorting(sorting)}>{t(sorting.label)}</Button>
+              {/each}
+            </div>
+          {/snippet}
+        </Dropdown>
+      </div>
+    </div>
   {/if}
 
   <div class="list">
@@ -121,7 +161,7 @@
     font-style: theme(detail-title-font-style, normal);
 
     &.subheading {
-      margin: 0 0 margin(0.5);
+      margin: 0;
       font-size: theme(detail-title-small-font-size, margin(1.25));
     }
 
@@ -155,6 +195,13 @@
     gap: margin(0.5);
   }
 
+  .list-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-bottom: margin(0.5);
+  }
+
   .skeleton {
     min-height: margin(7.25);
     border-radius: theme(playlink-border-radius, border-radius);
@@ -176,4 +223,26 @@
       filter: brightness(1.2);
     }
   }
+
+  .sort {
+    display: flex;
+    align-items: center;
+    gap: margin(0.25);
+    color: theme(text-color-alt);
+  }
+
+  .sortings {
+    :global(.button) {
+      display: block;
+      width: 100%;
+      padding: margin(0.5) margin(1);
+      text-align: left;
+      white-space: nowrap;
+    }
+
+    :global(.button:hover) {
+      background: theme(content-light);
+      border-radius: 0;
+    }
+  }
 </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/routes/elements/+page.svelte

@@ -23,6 +23,7 @@
   import ParticipantsRail from '../components/Rails/ParticipantsRail.svelte'
   import InfiniteTitlesRail from '../components/Rails/InfiniteTitlesRail.svelte'
   import YouTubeEmbed from '../components/YouTubeEmbed.svelte'
+  import Participant from '../components/Participants/Participant.svelte'
 
   if (browser) {
     // @ts-ignore
@@ -137,6 +138,11 @@
 <h2>Participants</h2>
 
 <div class="group">
+  <div>
+    <h3>Participant.svelte</h3>
+    <div class="item"><Participant participant={participants[0]} /></div>
+  </div>
+
   <div>
     <h3>Participants.svelte</h3>
     <div class="item"><ParticipantsRail {title} /></div>