@playpilot/tpi 1.0.0

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

@@ -0,0 +1,176 @@
+<script>
+  import { playPilotBaseUrl } from '$lib/constants'
+  import { searchTitles } from '$lib/search'
+  import IconIMDb from '../../Icons/IconIMDb.svelte'
+  import IconNewTab from '../../Icons/IconNewTab.svelte'
+  import TextInput from '../TextInput.svelte'
+
+  /** @type {{ onselect?: (title: TitleData) => void, query: string }} */
+  let { onselect = () => null, query = $bindable() } = $props()
+
+  /** @type {TitleData[]} */
+  let results = $state([])
+  /** @type {TitleData | null} */
+  let selectedResult = $state(null)
+  let loading = $state(false)
+
+  $effect(() => {
+    if (query) search(query)
+  })
+
+  /**
+   * @param {string} query
+   * @returns {Promise<void>}
+   */
+  async function search(query) {
+    loading = true
+    selectedResult = null
+
+    try {
+      results = await searchTitles(query)
+    } finally {
+      loading = false
+    }
+  }
+
+  /**
+   * @param {TitleData} title
+   * @returns {void}
+   */
+  function select(title) {
+    query = title.title
+    selectedResult = title
+
+    onselect(title)
+  }
+</script>
+
+<div class="search">
+  <TextInput
+    bind:value={query}
+    name="search"
+    label="Search..." />
+
+  {#if query && !selectedResult}
+    <div class="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>
+      {:else}
+        {#if !loading}
+          <em class="empty">No results found</em>
+        {/if}
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .search {
+    position: relative;
+  }
+
+  .results {
+    z-index: 1;
+    position: absolute;
+    top: calc(100% + 0.5rem);
+    left: 0;
+    right: 0;
+    height: 30vh;
+    max-height: 10rem;
+    border-radius: 0.5rem;
+    background: var(--playpilot-light);
+    scrollbar-width: thin;
+    overflow: auto;
+  }
+
+  .item {
+    cursor: pointer;
+    appearance: none;
+    display: flex;
+    align-items: flex-start;
+    gap: 1rem;
+    width: 100%;
+    background: transparent;
+    border: 0;
+    padding: 0.5rem;
+    border-bottom: 1px solid var(--playpilot-content);
+    color: var(--playpilot-text-color-alt);
+    font-family: inherit;
+    text-align: left;
+  }
+
+  .item:hover {
+    background: var(--playpilot-lighter);
+  }
+
+  .item:last-child {
+    border-bottom: 0;
+  }
+
+  .poster {
+    width: 1.75rem;
+    border-radius: 0.25rem;
+    height: auto;
+    background: var(--playpilot-dark);
+  }
+
+  .name {
+    color: var(--playpilot-text-color);
+  }
+
+  .meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0 0.5rem;
+    font-size: 0.75rem;
+  }
+
+  .imdb {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .empty {
+    padding: 0.5rem;
+    font-size: 0.75rem;
+    color: var(--playpilot-text-color-alt);
+  }
+
+  .open-in-new-tab {
+    margin-left: auto;
+    color: var(--playpilot-text-color-alt);
+  }
+
+  .open-in-new-tab:hover {
+    color: vaR(--playpilot-text-color);
+  }
+</style>

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

@@ -0,0 +1,76 @@
+<script>
+  /** @type {{ active: boolean, fullwidth?: boolean, label?: string, onclick?: (active: boolean) => void, children: import('svelte').Snippet }} */
+  let { active = $bindable(), fullwidth = false, label = '', onclick = () => null, children } = $props()
+
+  function toggle() {
+    active = !active
+    onclick(active)
+  }
+</script>
+
+<button class="switch" class:active class:fullwidth onclick={toggle} aria-label="Toggle {label} {active ? 'off' : 'on'}">
+  <div class="label">{@render children()}</div>
+
+  <div class="track">
+    <div class="knob"></div>
+  </div>
+</button>
+
+<style>
+  .switch {
+    appearance: none;
+    display: flex;
+    align-items: center;
+    border: 0;
+    padding: 0;
+    background: transparent;
+    cursor: pointer;
+  }
+
+  .fullwidth {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-right: 0.5rem;
+    font-family: var(--playpilot-font-family);
+    color: var(--playpilot-text-color-alt);
+    font-size: 0.75rem;
+  }
+
+  .switch:hover .label {
+    color: var(--playpilot-text-color);
+  }
+
+  .track {
+    position: relative;
+    width: 2rem;
+    height: 1.25rem;
+    border-radius: 1rem;
+    background: var(--playpilot-content);
+    transition: background-color 100ms;
+  }
+
+  .active .track {
+    background: var(--playpilot-green);
+  }
+
+  .knob {
+    position: absolute;
+    top: 0.125rem;
+    left: 0.125rem;
+    height: 1rem;
+    width: 1rem;
+    border-radius: 50%;
+    background: white;
+    transition: left 100ms;
+  }
+
+  .active .knob {
+    left: 0.875rem;
+  }
+</style>

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

@@ -0,0 +1,29 @@
+<script>
+  /** @type {{ value: string, label?: string, name?: string, readonly?: boolean, oninput?: () => void }} */
+  let { value = $bindable(), label = '', name = '', readonly = false, oninput = () => null } = $props()
+</script>
+
+<input type="text" bind:value {name} aria-label={label} placeholder={label} {readonly} {oninput} />
+
+<style>
+  input {
+    width: 100%;
+    padding: 0.5rem 1rem;
+    border: 0;
+    border-radius: 2rem;
+    background: var(--playpilot-light);
+    color: var(--playpilot-text-color-alt);
+    font-size: 0.75rem;
+    font-family: var(--playpilot-font-family);
+  }
+
+  input:focus {
+    background: var(--playpilot-lighter);
+    outline: 1px solid white;
+  }
+
+  input::placeholder {
+    color: var(--playpilot-text-color-alt);
+    opacity: 0.75;
+  }
+</style>

package/src/routes/components/Genres.svelte

@@ -0,0 +1,41 @@
+<script>
+  import genreData from '$lib/genres.json'
+
+  /** @type {{ genres: string[] }} */
+  const { genres } = $props()
+
+  let expanded = $state(false)
+  let shownGenres = $derived(expanded ? genres : [genres[0]])
+</script>
+
+{#each shownGenres as genre}
+  <div class="genre">
+    {genreData.find(g => g.slug === genre)?.name}
+  </div>
+{/each}
+
+{#if !expanded && genres.length > 1}
+  <button class="genre expand" onclick={() => expanded = true}>+{genres.length - 1}</button>
+{/if}
+
+<style>
+  .genre {
+    display: flex;
+    flex-wrap: wrap;
+    background: var(--playpilot-genre-background, var(--playpilot-content));
+    border: 0;
+    border-radius: var(--playpilot-genre-border-radius, 1rem);
+    padding: 0.25rem 0.5rem;
+    font-family: var(--playpilot-genre-font-family, inherit);
+    text-transform: var(--playpilot-genre-text-transform, none);
+    color: var(--playpilot-genre-text-color, var(--playpilot-text-color-alt));
+    line-height: 1;
+    font-size: inherit;
+  }
+
+  button.genre:hover {
+    cursor: pointer;
+    filter: var(--playpilot-genre-hover-filter, brightness(1.1));
+    background: var(--playpilot-genre-hover-background, var(--playpilot-genre-background));
+  }
+</style>

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

@@ -0,0 +1,12 @@
+<script>
+  /** @type {{ align?: Alignment }} */
+  let { align = 'bottom' } = $props()
+</script>
+
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
+  {#if align === 'bottom'}
+    <path d="M13.5833 13.6667L4.41667 13.6667M5.5 1.5H12.5C13.9001 1.5 14.6002 1.5 15.135 1.77248C15.6054 2.01217 15.9878 2.39462 16.2275 2.86502C16.5 3.3998 16.5 4.09987 16.5 5.5V12.5C16.5 13.9001 16.5 14.6002 16.2275 15.135C15.9878 15.6054 15.6054 15.9878 15.135 16.2275C14.6002 16.5 13.9001 16.5 12.5 16.5H5.5C4.09987 16.5 3.3998 16.5 2.86502 16.2275C2.39462 15.9878 2.01217 15.6054 1.77248 15.135C1.5 14.6002 1.5 13.9001 1.5 12.5V5.5C1.5 4.09987 1.5 3.3998 1.77248 2.86502C2.01217 2.39462 2.39462 2.01217 2.86502 1.77248C3.3998 1.5 4.09987 1.5 5.5 1.5Z" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+  {:else if align === 'center'}
+    <path d="M13.5833 8.58342H4.41667M5.5 1.50009H12.5C13.9001 1.50009 14.6002 1.50009 15.135 1.77258C15.6054 2.01226 15.9878 2.39471 16.2275 2.86512C16.5 3.39989 16.5 4.09996 16.5 5.50009V12.5001C16.5 13.9002 16.5 14.6003 16.2275 15.1351C15.9878 15.6055 15.6054 15.9879 15.135 16.2276C14.6002 16.5001 13.9001 16.5001 12.5 16.5001H5.5C4.09987 16.5001 3.3998 16.5001 2.86502 16.2276C2.39462 15.9879 2.01217 15.6055 1.77248 15.1351C1.5 14.6003 1.5 13.9002 1.5 12.5001V5.50009C1.5 4.09996 1.5 3.39989 1.77248 2.86512C2.01217 2.39471 2.39462 2.01226 2.86502 1.77258C3.3998 1.50009 4.09987 1.50009 5.5 1.50009Z" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+  {/if}
+</svg>

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

@@ -0,0 +1,3 @@
+<svg width="4" height="8" viewBox="0 0 4 8" fill="none">
+  <path d="M3.5 7L0.5 4L3.5 1" stroke="currentcolor" stroke-width="0.9975" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M3.33334 5.2C3.33334 4.0799 3.33334 3.51984 3.55132 3.09202C3.74307 2.71569 4.04903 2.40973 4.42535 2.21799C4.85318 2 5.41323 2 6.53334 2H9.46667C10.5868 2 11.1468 2 11.5747 2.21799C11.951 2.40973 12.2569 2.71569 12.4487 3.09202C12.6667 3.51984 12.6667 4.0799 12.6667 5.2V14L8 11.3333L3.33334 14V5.2Z" stroke="var(--playpilot-button-text-color, var(--playpilot-text-color-alt))" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -0,0 +1,18 @@
+<script>
+  /** @type {{ expanded: boolean }} */
+  const { expanded = false } = $props()
+</script>
+
+<svg width="8" height="4" viewBox="0 0 8 4" fill="none" class:expanded>
+  <path d="M1 0.5L4 3.5L7 0.5" stroke="currentColor" stroke-width="0.9975" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+
+<style>
+  svg {
+    transition: transform 100ms;
+  }
+
+  .expanded {
+    transform: rotate(180deg);
+  }
+</style>

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

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M14 2L2 14M2 2L14 14" stroke="currentColor" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg width="6" height="12" viewBox="0 0 6 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0 11L5 6L0 1" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M9.99984 10.8333C10.4601 10.8333 10.8332 10.4602 10.8332 10C10.8332 9.53977 10.4601 9.16668 9.99984 9.16668C9.5396 9.16668 9.1665 9.53977 9.1665 10C9.1665 10.4602 9.5396 10.8333 9.99984 10.8333Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M9.99984 5.00001C10.4601 5.00001 10.8332 4.62691 10.8332 4.16668C10.8332 3.70644 10.4601 3.33334 9.99984 3.33334C9.5396 3.33334 9.1665 3.70644 9.1665 4.16668C9.1665 4.62691 9.5396 5.00001 9.99984 5.00001Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M9.99984 16.6667C10.4601 16.6667 10.8332 16.2936 10.8332 15.8333C10.8332 15.3731 10.4601 15 9.99984 15C9.5396 15 9.1665 15.3731 9.1665 15.8333C9.1665 16.2936 9.5396 16.6667 9.99984 16.6667Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -0,0 +1,12 @@
+<script>
+  /** @type {{ expanded: boolean }} */
+  const { expanded = false } = $props()
+</script>
+
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  {#if expanded}
+    <path d="M2.5 6.66661H2.66667C4.0668 6.66661 4.76686 6.66661 5.30164 6.39412C5.77205 6.15444 6.1545 5.77199 6.39418 5.30158C6.66667 4.7668 6.66667 4.06674 6.66667 2.66661V2.49994M2.5 13.3333H2.66667C4.0668 13.3333 4.76686 13.3333 5.30164 13.6058C5.77205 13.8454 6.1545 14.2279 6.39418 14.6983C6.66667 15.2331 6.66667 15.9331 6.66667 17.3333V17.4999M13.3333 2.49994V2.66661C13.3333 4.06674 13.3333 4.7668 13.6058 5.30158C13.8455 5.77199 14.228 6.15444 14.6984 6.39412C15.2331 6.66661 15.9332 6.66661 17.3333 6.66661H17.5M13.3333 17.4999V17.3333C13.3333 15.9331 13.3333 15.2331 13.6058 14.6983C13.8455 14.2279 14.228 13.8454 14.6984 13.6058C15.2331 13.3333 15.9332 13.3333 17.3333 13.3333H17.5" stroke="currentColor" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
+  {:else}
+    <path d="M6.66667 2.5H6.5C5.09987 2.5 4.3998 2.5 3.86502 2.77248C3.39462 3.01217 3.01217 3.39462 2.77248 3.86502C2.5 4.3998 2.5 5.09987 2.5 6.5V6.66667M6.66667 17.5H6.5C5.09987 17.5 4.3998 17.5 3.86502 17.2275C3.39462 16.9878 3.01217 16.6054 2.77248 16.135C2.5 15.6002 2.5 14.9001 2.5 13.5V13.3333M17.5 6.66667V6.5C17.5 5.09987 17.5 4.3998 17.2275 3.86502C16.9878 3.39462 16.6054 3.01217 16.135 2.77248C15.6002 2.5 14.9001 2.5 13.5 2.5H13.3333M17.5 13.3333V13.5C17.5 14.9001 17.5 15.6002 17.2275 16.135C16.9878 16.6054 16.6054 16.9878 16.135 17.2275C15.6002 17.5 14.9001 17.5 13.5 17.5H13.3333" stroke="currentColor" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
+  {/if}
+</svg>

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

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 0.351929L9.163 4.72803L14 5.43408L10.5 8.8385L11.326 13.648L7 11.3761L2.674 13.648L3.5 8.8385L0 5.43408L4.837 4.72803L7 0.351929Z" fill="#F6C045"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg viewBox="0 -960 960 960" width="18" height="18">
+  <path fill="currentColor" d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"/>
+</svg>

package/src/routes/components/Modal.svelte

@@ -0,0 +1,106 @@
+<script>
+  import { fade, fly, scale } from 'svelte/transition'
+  import IconClose from './Icons/IconClose.svelte'
+  import RoundButton from './RoundButton.svelte'
+  import { onMount, setContext } from 'svelte'
+
+  /** @type {{ children: import('svelte').Snippet, onclose?: () => void, onscroll?: () => void }} */
+  const { children, onclose = () => null, onscroll = () => null } = $props()
+
+  setContext('scope', 'modal')
+
+  onMount(() => {
+    const baseOverflowStyle = document.body.style.overflowY
+    document.body.style.overflowY = 'hidden'
+
+    return () => document.body.style.overflowY = baseOverflowStyle || ''
+  })
+
+  /**
+   * @param {Element} node
+   * @returns {import('svelte/transition').TransitionConfig}
+   */
+  function scaleOrFly(node) {
+    const shouldFly = window.innerWidth < 600
+
+    if (shouldFly) return fly(node, { duration: 250, y: window.innerHeight })
+    return scale(node, { duration: 150, start: 0.85 })
+  }
+</script>
+
+<svelte:window on:keydown={({ key }) => { if (key === 'Escape') onclose() }} />
+
+<div class="modal" transition:fade={{ duration: 150 }}>
+  <div class="dialog" {onscroll} role="dialog" transition:scaleOrFly>
+    <div class="close">
+      <RoundButton onclick={() => onclose()}>
+        <IconClose />
+      </RoundButton>
+    </div>
+
+    {@render children()}
+  </div>
+
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="backdrop" onclick={() => onclose()}></div>
+</div>
+
+<style>
+  .modal {
+    z-index: 9999;
+    position: fixed;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--playpilot-detail-backdrop, rgba(0, 0, 0, 0.65));
+  }
+
+  @media (min-width: 600px) {
+    .modal {
+      padding: 2rem;
+    }
+  }
+
+  .dialog {
+    position: relative;
+    width: 100%;
+    max-width: 600px;
+    max-height: 80vh;
+    overflow: auto;
+    margin-top: auto;
+    border-radius: var(--playpilot-detail-border-radius, 1rem 1rem 0 0);
+    background: var(--playpilot-detail-background, var(--playpilot-light));
+  }
+
+  @media (min-width: 600px) {
+    .dialog {
+      margin-top: 0;
+      border-radius: var(--playpilot-detail-border-radius, 1rem);
+      max-height: 100%;
+    }
+  }
+
+  .backdrop {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  .close {
+    z-index: 5;
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+  }
+
+  .close:hover {
+    filter: brightness(1.1);
+  }
+</style>

package/src/routes/components/Participants.svelte

@@ -0,0 +1,44 @@
+<script>
+  /** @type {{ participants: Participant[] }} */
+  const { participants } = $props()
+</script>
+
+<h2>Cast</h2>
+
+<div class="participants">
+  {#each participants as participant}
+    <div class="participant">
+      {participant.name}
+
+      <div class="character">{participant.character?.slice(0, 20) || ''}{#if participant.character?.length || 0 > 20}...{/if}</div>
+    </div>
+  {/each}
+</div>
+
+<style>
+  h2 {
+    margin: 1.5rem 0 1rem;
+    font-size: var(--playpilot-cast-title-font-size, 18px);
+    font-weight: inherit;
+  }
+
+  .participants {
+    display: flex;
+    gap: 1rem;
+    width: calc(100% + 2rem);
+    padding: 0 1rem;
+    margin: 0 -1rem;
+    overflow: auto;
+    white-space: nowrap;
+    scrollbar-width: none;
+  }
+
+  .participants::-webkit-scrollbar {
+    display: none;
+  }
+
+  .character {
+    color: var(--playpilot-cast-character-text-color, var(--playpilot-text-color-alt));
+    font-style: italic;
+  }
+</style>