@playpilot/tpi 8.29.11 → 8.31.0

package/src/lib/types/global.d.ts

@@ -12,6 +12,7 @@ declare global {
       mount(): void
       destroy(): void
     }
+    Plyr: any
   }
 }
 

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/Explore/Routes/ExploreModal.svelte

@@ -1,107 +1,107 @@
-<script lang="ts">
-  import { fetchParticipantBySid } from '$lib/api/participants'
-  import { fetchSimilarTitles, fetchTitleBySid } from '$lib/api/titles'
-  import { mobileBreakpoint } from '$lib/constants'
-  import { SplitTest } from '$lib/enums/SplitTest'
-  import { t } from '$lib/localization'
-  import { openModal, type ModalType } from '$lib/modal'
-  import { getSplitTestVariantName, trackSplitTestView } from '$lib/splitTest'
-  import type { TitleData } from '$lib/types/title'
-  import Modal from '../../Modals/Modal.svelte'
-
-  interface Props {
-    navigate?: (key: string, pushState?: boolean) => void
-  }
-
-  const { navigate = () => null }: Props = $props()
-
-  async function openModalViaRoute(): Promise<void> {
-    const currentUrl = new URL(document.location.toString())
-    const sid = currentUrl.searchParams.get('sid')
-
-    if (!sid) return
-
-    let type: ModalType = sid.startsWith('pr') ? 'participant' : 'title' // Sids with with `pr` for participants, `ti` for titles
-    let data: any = null
-
-    if (type === 'title') {
-      const isMobile = window.innerWidth < mobileBreakpoint
-      const isInReelSplitTest = isMobile && getSplitTestVariantName(SplitTest.Reels) === 'Reel'
-
-      if (isMobile) trackSplitTestView(SplitTest.Reels)
-
-      type = isMobile && isInReelSplitTest ? 'titles-reel' : 'titles-rail'
-
-      const [title, railTitles] = (await Promise.allSettled([fetchTitleBySid(sid), fetchSimilarTitles({ sid } as unknown as TitleData)])).map((promise) =>
-        promise.status === 'fulfilled' ? promise.value : null,
-      )
-      data = [title as TitleData, ...(railTitles as TitleData[])]
-    } else if (type === 'participant') {
-      data = await fetchParticipantBySid(sid)
-    }
-
-    openModal({
-      type,
-      data,
-      props: {
-        onclose: () => navigate('home'),
-        pushState: false,
-      },
-    })
-  }
-</script>
-
-{#await openModalViaRoute()}
-  <Modal blur pushState={false}>
-    {#snippet dialog()}
-      <div class="loading">
-        <div class="bar"></div>
-        <div class="bar"></div>
-        <div class="bar"></div>
-      </div>
-    {/snippet}
-  </Modal>
-{:catch}
-  <Modal blur onclose={() => navigate('home')} pushState={false}>
-    <div class="error">
-      {t('An Error Occurred')}
-    </div>
-  </Modal>
-{/await}
-
-<style lang="scss">
-  .loading {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    gap: margin(0.5);
-  }
-
-  @keyframes animate-bar {
-    to {
-      height: margin(3);
-      opacity: 0.5;
-    }
-  }
-
-  .bar {
-    height: margin(4);
-    width: margin(1);
-    border-radius: margin(0.25);
-    background: white;
-    animation: animate-bar 750ms infinite;
-
-    @for $i from 0 through 2 {
-      &:nth-child(#{$i}) {
-        animation-delay: $i * 250ms;
-      }
-    }
-  }
-
-  .error {
-    padding: margin(2);
-    font-size: 1.25em;
-    color: theme(text-color);
-  }
-</style>
+<script lang="ts">
+  import { fetchParticipantBySid } from '$lib/api/participants'
+  import { fetchSimilarTitles, fetchTitleBySid } from '$lib/api/titles'
+  import { mobileBreakpoint } from '$lib/constants'
+  import { SplitTest } from '$lib/enums/SplitTest'
+  import { t } from '$lib/localization'
+  import { openModal, type ModalType } from '$lib/modal'
+  import { getSplitTestVariantName, trackSplitTestView } from '$lib/splitTest'
+  import type { TitleData } from '$lib/types/title'
+  import Modal from '../../Modals/Modal.svelte'
+
+  interface Props {
+    navigate?: (key: string, pushState?: boolean) => void
+  }
+
+  const { navigate = () => null }: Props = $props()
+
+  async function openModalViaRoute(): Promise<void> {
+    const currentUrl = new URL(document.location.toString())
+    const sid = currentUrl.searchParams.get('sid')
+
+    if (!sid) return
+
+    let type: ModalType = sid.startsWith('pr') ? 'participant' : 'title' // Sids with with `pr` for participants, `ti` for titles
+    let data: any = null
+
+    if (type === 'title') {
+      const isMobile = window.innerWidth < mobileBreakpoint
+      const isInReelSplitTest = isMobile && getSplitTestVariantName(SplitTest.Reels) === 'Reel'
+
+      if (isMobile) trackSplitTestView(SplitTest.Reels)
+
+      type = isMobile && isInReelSplitTest ? 'titles-reel' : 'titles-rail'
+
+      const [title, railTitles] = (await Promise.allSettled([fetchTitleBySid(sid), fetchSimilarTitles({ sid } as unknown as TitleData)])).map((promise) =>
+        promise.status === 'fulfilled' ? promise.value : null,
+      )
+      data = [title as TitleData, ...(railTitles as TitleData[])]
+    } else if (type === 'participant') {
+      data = await fetchParticipantBySid(sid)
+    }
+
+    openModal({
+      type,
+      data,
+      props: {
+        onclose: () => navigate('home'),
+        pushState: false,
+      },
+    })
+  }
+</script>
+
+{#await openModalViaRoute()}
+  <Modal blur pushState={false}>
+    {#snippet dialog()}
+      <div class="loading">
+        <div class="bar"></div>
+        <div class="bar"></div>
+        <div class="bar"></div>
+      </div>
+    {/snippet}
+  </Modal>
+{:catch}
+  <Modal blur onclose={() => navigate('home')} pushState={false}>
+    <div class="error">
+      {t('An Error Occurred')}
+    </div>
+  </Modal>
+{/await}
+
+<style lang="scss">
+  .loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    gap: margin(0.5);
+  }
+
+  @keyframes animate-bar {
+    to {
+      height: margin(3);
+      opacity: 0.5;
+    }
+  }
+
+  .bar {
+    height: margin(4);
+    width: margin(1);
+    border-radius: margin(0.25);
+    background: white;
+    animation: animate-bar 750ms infinite;
+
+    @for $i from 0 through 2 {
+      &:nth-child(#{$i}) {
+        animation-delay: $i * 250ms;
+      }
+    }
+  }
+
+  .error {
+    padding: margin(2);
+    font-size: 1.25em;
+    color: theme(text-color);
+  }
+</style>

package/src/routes/components/Modals/TitlesReelModal.svelte

@@ -22,7 +22,7 @@
     onclose?: () => void
   }
 
-  const { titles, onclose = () => null }: Props = $props()
+  const { titles, onclose = () => null, ...restProps }: Props = $props()
 
 
   let interval: ReturnType<typeof setInterval> | null = null
@@ -74,7 +74,7 @@
 {/snippet}
 
 <div class="reel" style:--available-height="{availableHeight}px">
-  <Modal {prepend}>
+  <Modal {prepend} {onclose} {...restProps}>
     {#snippet dialog()}
       <div class="slider" bind:this={element}>
         <TinySlider vertical threshold={50} moveThreshold={10} {onchange}>
@@ -142,7 +142,7 @@
       overscroll-behavior: contain;
     }
 
-    :global(iframe) {
+    :global(.plyr) {
       pointer-events: none;
       z-index: 0;
     }

package/src/routes/components/Rails/TitlesRail.svelte

@@ -309,7 +309,7 @@
     background: black;
     z-index: 1;
 
-    :global(iframe) {
+    :global(.plyr) {
       opacity: 0;
       animation: fade-iframe 500ms 500ms forwards;
 

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>