@playpilot/tpi 5.34.1 → 6.0.0-beta.explore.15

package/src/routes/components/Button.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    variant?: 'filled' | 'border' | 'link'
+    size?: 'base' | 'large'
+    active?: boolean
+    // eslint-disable-next-line no-unused-vars
+    onclick?: (event: MouseEvent) => void
+    children?: Snippet
+  }
+
+  const { variant = 'filled', size = 'base', active = false, onclick, children }: Props = $props()
+</script>
+
+<button class="button {variant} {size}" class:active {onclick}>
+  {@render children?.()}
+</button>
+
+<style lang="scss">
+  .button {
+    appearance: none;
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    gap: margin(0.25);
+    border: 0;
+    padding: 0.25em 0.5em;
+    background: transparent;
+    border-radius: theme(button-border-radius, border-radius);
+    color: theme(button-text-color, text-color-alt);
+    font-size: inherit;
+    font-family: inherit;
+    font-weight: theme(button-font-weight, normal);
+    cursor: pointer;
+
+    :global(svg) {
+      width: 1.5em;
+      height: 1.5em;
+      opacity: 0.75;
+
+      &:last-child {
+        width: 0.85em;
+        height: 0.85em;
+      }
+    }
+  }
+
+  .filled {
+    background: theme(button-filled-background, content);
+
+    &:hover,
+    &:active {
+      background: theme(button-filled-hover-background, content-light);
+      color: theme(button-filled-hover-text-color, text-color);
+    }
+
+    &.active {
+      box-shadow: inset 0 0 0 1px currentColor;
+    }
+  }
+
+  .border {
+    box-shadow: inset 0 0 0 1px theme(button-border-color, content-light);
+
+    &:hover,
+    &:active,
+    &.active {
+      background: theme(button-border-color, lighter);
+      color: theme(button-hover-text-color, text-color);
+    }
+
+    &.active {
+      filter: brightness(theme(hover-filter-brightness));
+    }
+  }
+
+  .link {
+    display: inline-flex;
+    height: auto;
+    padding: 0;
+    font-size: inherit;
+    line-height: inherit;
+
+    &:hover,
+    &:active {
+      color: theme(button-hover-text-color, text-color);
+    }
+
+    :global(svg) {
+      width: 0.85em;
+      height: 0.85em;
+    }
+  }
+
+  .large {
+    padding: 0.5em 1em;
+  }
+</style>
+

package/src/routes/components/Debugger.svelte

@@ -108,6 +108,27 @@
     currentScriptTag.insertAdjacentElement('afterend', newScriptTag)
     currentScriptTag.remove()
   }
+
+  function replacePageWithExplore() {
+    const element = document.querySelector("main, article")
+
+    element!.innerHTML = `
+      <div data-playpilot-explore style="background: white;">
+        <div style="padding: 64px 32px; min-height: 100vh; color: black; max-width: 1264px; margin: 0 auto">
+          <div class="divider" style="width: 100%; max-width: 600px; height: 0.25rem;background-image: linear-gradient(to right,#51B3E0,#51B3E0 2.5rem,#E5ADAE 2.5rem,#E5ADAE 5rem,#E5E54F 5rem,#E5E54F 7.5rem,black 7.5rem,black);"></div>
+
+          <div class="heading" style="margin: 4px 0; font-size: clamp(24px, 5vw, 32px); line-height: 1.5; font-weight: bold; text-transform: uppercase;">
+            Streaming Guide
+          </div>
+
+          <div role="status" aria-live="polite">
+            <svg fill="currentColor" viewBox="0 0 24 24" width="72"><path fill="currentColor" d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"><animateTransform attributeName="transform" type="rotate" dur="500ms" values="0 12 12;360 12 12" repeatCount="indefinite"/></path></svg>
+            <div style="margin: 12px 0; font-weight: bold; text-transform: uppercase;">Loading…</div>
+            <noscript>Sorry, this page requires JavaScript to be enabled.</noscript>
+          </div>
+        </div>
+      </div>`
+  }
 </script>
 
 <svelte:window {onkeydown} />
@@ -164,6 +185,10 @@
     {:else}
       <button onclick={replaceWithBetaScript}>Use beta script</button>
     {/if}
+
+    <hr />
+
+    <button onclick={replacePageWithExplore}>Replace page with explore</button>
   </div>
 {/if}
 

package/src/routes/components/Explore/Explore.svelte

@@ -0,0 +1,240 @@
+<script lang="ts">
+  import { heading } from '$lib/actions/heading'
+  import { searchTitles } from '$lib/api/search'
+  import { fetchTitles } from '$lib/api/titles'
+  import { exploreParentSelector } from '$lib/explore'
+  import { openModal } from '$lib/modal'
+  import type { APIPaginatedResult } from '$lib/types/api'
+  import type { ExploreFilter } from '$lib/types/filter'
+  import type { TitleData } from '$lib/types/title'
+  import Button from '../Button.svelte'
+  import GridTitle from '../GridTitle.svelte'
+  import GridTitleSkeleton from '../GridTitleSkeleton.svelte'
+  import ListTitle from '../ListTitle.svelte'
+  import ListTitleSkeleton from '../ListTitleSkeleton.svelte'
+  import Filter from './Filter/Filter.svelte'
+  import Search from './Filter/Search.svelte'
+
+  const filter: ExploreFilter = $state({})
+
+  let element: HTMLElement | null = null
+  let titles: TitleData[] = $state([])
+  let page = 1
+  let searchQuery = ''
+  let debounce: ReturnType<typeof setTimeout> | null = null
+  let promise = $state(getTitlesForFilter())
+  let height: string | null = $state(null)
+  let width = $state(0)
+
+  const grid = $derived(width > 500)
+  const gridColumns = $derived.by(() => {
+    if (width > 1400) return 8
+    if (width > 900) return 6
+    else if (width > 600) return 4
+    return 3
+  })
+  const TitleComponent = $derived(grid ? GridTitle : ListTitle)
+  const SkeletonComponent = $derived(grid ? GridTitleSkeleton : ListTitleSkeleton)
+
+  $effect(() => {
+    // Set the height of this element to match that of it's container. That way we can
+    // allow our element to be scrollable, rather than the parent needing to be scrollable.
+    height = element?.closest<HTMLElement>(exploreParentSelector)?.style.height || null
+  })
+
+  async function getTitlesForFilter(): Promise<APIPaginatedResult<TitleData>> {
+    let response
+
+    // If a search query is given we use searchTitles with just the query.
+    // If not, we use fetchTitles with the given params for the filter.
+    // This is because the backend does not support filters for search results yet.
+    // In the future we will likely merge these two, either by adding filters in the backend
+    // or by filtering results in the frontend (this seems like the less good option).
+    if (searchQuery) {
+      const results: TitleData[] = await searchTitles(searchQuery)
+      response = { results, next: null, previous: null }
+
+      titles = results
+    } else {
+      const params = { page_size: 24, page, ...filter }
+
+      response = await fetchTitles(params)
+
+      if (!response?.results) throw new Error('Something went wrong when fetching titles in Explore')
+
+      titles = [...titles, ...response.results]
+    }
+
+    return response
+  }
+
+  async function search(query: string): Promise<void> {
+    searchQuery = query
+
+    if (debounce) clearTimeout(debounce)
+
+    debounce = setTimeout(() => {
+      resetTitles()
+      promise = getTitlesForFilter()
+    }, 100)
+  }
+
+  // Hooking this up later
+  // eslint-disable-next-line no-unused-vars
+  function setFilter(key: keyof ExploreFilter, value: any): void {
+    // If the value was previous present in the filter and a falsey value is given we remove it from
+    // the filter entirely so it will no longer be used as a param
+    if (!value && (key in filter)) {
+      delete filter[key]
+    } else if (value) {
+      filter[key] = value
+    }
+
+    resetTitles()
+    promise = getTitlesForFilter()
+  }
+
+  function resetTitles(): void {
+    page = 1
+    titles = []
+  }
+
+  function fetchMoreTitles(): void {
+    page++
+    promise = getTitlesForFilter()
+  }
+</script>
+
+<div class="explore playpilot-styled-scrollbar" class:grid bind:this={element} bind:clientWidth={width} style:height>
+  <div class="header" role="banner">
+    <div>
+      <div class="divider"></div>
+
+      <div class="heading" use:heading>
+        Streaming Guide
+      </div>
+
+      <p class="description">
+        Find where to watch movies online - the ultimate guide that helps you find the best movies and shows across streaming services.
+      </p>
+    </div>
+
+    {#key grid}
+      <Search oninput={search} />
+      <Filter {filter} limit={!grid} />
+    {/key}
+  </div>
+
+  <div class="titles" role="main" style:--grid-columns={gridColumns}>
+    {#each titles as title}
+      {#key title.sid}
+        <TitleComponent {title} onclick={(event: MouseEvent) => openModal({ event, data: title })} />
+      {/key}
+    {/each}
+
+    {#await promise}
+      {#each { length: 24 } as _}
+        <SkeletonComponent />
+      {/each}
+    {:catch}
+      <!-- This is handled below -->
+    {/await}
+  </div>
+
+  {#await promise then { next }}
+    {#if next}
+      <div class="show-more">
+        <Button size="large" onclick={fetchMoreTitles}>Show more</Button>
+      </div>
+    {/if}
+  {:catch}
+    Something went wrong
+  {/await}
+</div>
+
+<style lang="scss">
+  .explore {
+    background: theme(explore-background, light);
+    border-radius: theme(border-radius-large);
+    max-width: theme(explore-max-width, 1200px);
+    margin: 0 auto;
+    padding: theme(explore-padding, margin(1) margin(1) margin(2));
+    overflow: auto;
+    font-family: theme(font-family);
+    font-family: theme(detail-font-family, font-family);
+    font-weight: theme(detail-font-weight, normal);
+    font-size: theme(detail-font-size, font-size-base);
+
+    :global(*) {
+      box-sizing: border-box;
+    }
+  }
+
+  .header {
+    display: flex;
+    flex-direction: column;
+    gap: margin(0.5);
+    margin: theme(explore-header-margin, 0 0 margin(2));
+    width: 100%;
+
+    .grid & {
+      gap: margin(1);
+    }
+  }
+
+  .divider {
+    width: 100%;
+    height: theme(explore-divider-height, 0);
+    max-width: theme(explore-header-max-width, 600px);
+    background: theme(explore-divider-background, text-color);
+  }
+
+  .heading {
+    margin: theme(explore-heading-margin, margin(0.25) 0);
+    color: theme(text-color);
+    font-size: theme(explore-heading-size, clamp(margin(1.5), 5vw, margin(2)));
+    font-weight: theme(explore-heading-font-weight, font-bold);
+    text-transform: theme(explore-heading-text-transform, normal);
+    line-height: 1.5;
+  }
+
+  .description {
+    max-width: theme(explore-header-max-width, 600px);
+    margin: theme(explore-description-margin, 0 0 margin(1));
+    color: theme(text-color-alt);
+    font-size: theme(font-size-small);
+    line-height: 1.35;
+
+    .grid & {
+      font-size: theme(font-size-base);
+    }
+  }
+
+  .titles {
+    --playpilot-list-item-padding: 0;
+    --playpilot-list-item-background: transparent;
+    --playpilot-list-item-hover-shadow: 0 0 0 #{margin(0.25)} #{theme(lighter)};
+    --playpilot-detail-image-background: #{theme(content)};
+    display: flex;
+    flex-direction: column;
+    gap: margin(0.5);
+
+    .grid & {
+      display: grid;
+      grid-template-columns: repeat(var(--grid-columns), minmax(120px, 1fr));
+      gap: margin(1);
+    }
+  }
+
+  .show-more {
+    flex: 0 0 100%;
+    display: grid;
+    margin-top: margin(1);
+
+    .grid & {
+      margin: margin(2) auto 0;
+      max-width: 600px;
+      width: 100%;
+    }
+  }
+</style>

package/src/routes/components/Explore/ExploreCallToAction.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import IconArrow from '../Icons/IconArrow.svelte'
+  import ImageTitlesList from '$lib/images/titles-list.webp'
+  import { openModal } from '$lib/modal'
+</script>
+
+<button class="call-to-action" onclick={() => openModal({ type: 'explore' })}>
+  <img src={ImageTitlesList} alt="" width="70" height="57" />
+
+  <div>
+    <strong>Looking for something else?</strong>
+    <div>Use our streamingguide</div>
+  </div>
+
+  <div class="arrow">
+    <IconArrow />
+  </div>
+</button>
+
+<style lang="scss">
+  strong {
+    color: theme(text-color);
+    font-size: theme(font-size-base);
+    font-weight: normal;
+  }
+
+  .call-to-action {
+    appearance: none;
+    display: flex;
+    align-items: center;
+    gap: margin(1);
+    width: 100%;
+    padding: margin(1);
+    border: 0;
+    border-radius: theme(border-radius-large) theme(border-radius-large) 0 0;
+    background: theme(light);
+    font-family: theme(font-family);
+    color: theme(text-color-alt);
+    font-size: theme(font-size-small);
+    line-height: 1.5;
+    text-align: left;
+    cursor: pointer;
+
+    &:hover {
+      filter: brightness(theme(hover-filter-brightness));
+    }
+  }
+
+  .arrow {
+    margin-left: auto;
+
+    :global(svg) {
+      display: block;
+      height: margin(1.25);
+      width: auto;
+    }
+  }
+</style>

package/src/routes/components/Explore/ExploreModal.svelte

@@ -0,0 +1,15 @@
+
+<script lang="ts">
+  import Modal from '../Modal.svelte'
+  import Explore from './Explore.svelte'
+
+  interface Props {
+    initialScrollPosition?: number
+  }
+
+  const { initialScrollPosition = 0 }: Props = $props()
+</script>
+
+<Modal {initialScrollPosition} closeButtonStyle="flat">
+  <Explore />
+</Modal>

package/src/routes/components/Explore/Filter/Dropdown.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import { scale } from 'svelte/transition'
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    // eslint-disable-next-line no-unused-vars
+    button: Snippet<[{ toggle: (event: MouseEvent) => void }]>,
+    content: Snippet
+  }
+
+  const { button, content }: Props = $props()
+
+  let active = $state(false)
+  let element: HTMLElement | null = $state(null)
+  let direction: 'left' | 'right' = $state('left')
+
+  function closeOnOutsideClick(event: MouseEvent): void {
+    const target = event.target as HTMLElement
+
+    if (!target) return
+    if (target.closest('.dropdown') === element) return
+
+    active = false
+  }
+
+  function toggle(event: MouseEvent): void {
+    const target = event.target as HTMLElement
+    const leftOffset = target.getBoundingClientRect().left
+
+    direction = leftOffset < window.innerWidth / 2 ? 'left' : 'right'
+    active = !active
+  }
+</script>
+
+<svelte:window onclick={closeOnOutsideClick} />
+
+<div class="dropdown {direction}" bind:this={element}>
+  {@render button({ toggle })}
+
+  {#if active}
+    <div class="content playpilot-styled-scrollbar" transition:scale={{ start: 0.85, duration: 100 }}>
+      {@render content()}
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .dropdown {
+    position: relative;
+  }
+
+  .content {
+    z-index: 10;
+    position: absolute;
+    bottom: margin(-0.5);
+    right: 0;
+    max-height: 60vh;
+    border-radius: theme(border-radius);
+    box-shadow: theme(shadow-large);
+    transform: translateY(100%);
+    transform-origin: top right;
+    background: theme(content);
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    .left & {
+      right: auto;
+      left: 0;
+      transform-origin: top left;
+    }
+  }
+</style>

package/src/routes/components/Explore/Filter/Filter.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import type { ExploreFilter } from '$lib/types/filter'
+  import genres from '$lib/data/genres.json'
+  import countries from '$lib/data/countries.json'
+  import FilterItem from './FilterItem.svelte'
+  import FilterSorting from './FilterSorting.svelte'
+  import Button from '../../Button.svelte'
+  import IconArrow from '../../Icons/IconArrow.svelte'
+  import IconFilter from '../../Icons/IconFilter.svelte'
+  import { scale } from 'svelte/transition'
+
+  interface Props {
+    filter: ExploreFilter
+    limit?: boolean
+  }
+
+  const { filter, limit = true }: Props = $props()
+
+  const shownItemsLimit = 3
+  const items = [{
+    label: 'Services',
+    param: 'provider',
+    data: [{ label: 'Netflix', value: 'netflix' }, { label: 'Disney+', value: 'disney-plus' }],
+  }, {
+    label: 'Genres',
+    param: 'genres',
+    data: genres.map(genre => ({ label: genre.name, value: genre.slug })),
+  }, {
+    label: 'IMDb',
+    param: 'imdb',
+  }, {
+    label: 'Year',
+    param: 'year',
+  }, {
+    label: 'Length',
+    param: 'length',
+  }, {
+    label: 'Countries',
+    param: 'country',
+    data: countries,
+  }]
+
+  let limited = $state(limit)
+</script>
+
+<div class="filter" role="navigation" class:limit>
+  <div class="items">
+    {#each limited ? items.slice(0, shownItemsLimit) : items as item}
+      <div transition:scale={{ start: 0.75, duration: 100 }}>
+        <FilterItem {filter} {...item} />
+      </div>
+    {/each}
+  </div>
+
+  <div class="actions">
+    {#if limit}
+      <Button variant="link" onclick={() => limited = !limited}>
+        <IconFilter />
+        All filters
+        <IconArrow direction={limited ? 'down' : 'up'} />
+      </Button>
+    {/if}
+
+    <div class="sorting">
+      <FilterSorting {filter} />
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  .filter {
+    position: relative;
+  }
+
+  .items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: margin(0.5);
+    padding-right: margin(7);
+
+    .limit & {
+      padding-right: 0;
+    }
+  }
+
+  .actions {
+    position: absolute;
+    top: margin(0.25);
+    right: 0;
+
+    .limit & {
+      position: initial;
+      top: auto;
+      display: flex;
+      justify-content: space-between;
+      margin-top: margin(0.5);
+    }
+  }
+</style>

package/src/routes/components/Explore/Filter/FilterItem.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import Button from '../../Button.svelte'
+  import IconArrow from '../../Icons/IconArrow.svelte'
+  import TogglesWithSearch from './TogglesWithSearch.svelte'
+  import type { ExploreFilter } from '$lib/types/filter'
+  import Dropdown from './Dropdown.svelte'
+
+  interface Props {
+    filter: ExploreFilter,
+    label: string,
+    param: string,
+    data?: { label: string, value: string }[] | null
+  }
+
+  const { filter, label, param, data = null }: Props = $props()
+
+  const active = $derived(!!filter[param])
+
+  function setFilter(value: string): void {
+    if (value) filter[param] = value
+    else delete filter[param]
+  }
+</script>
+
+<div class="filter-item" class:active data-testid="filter-item">
+  <Dropdown>
+    {#snippet button({ toggle })}
+      <Button variant="border" size="large" {active} onclick={toggle}>
+        {label}
+        <IconArrow direction="down" />
+      </Button>
+    {/snippet}
+
+    {#snippet content()}
+      <div class="content" data-testid="content">
+        {#if data}
+          {@const selected = filter[param]?.split(',') || []}
+          <TogglesWithSearch options={data} {selected} onchange={(selected) => setFilter(selected.join(','))} />
+        {:else}
+          Some range filter
+        {/if}
+      </div>
+    {/snippet}
+  </Dropdown>
+</div>
+
+<style lang="scss">
+  .filter-item {
+    &.active :global(.dropdown > button) {
+      box-shadow: inset 0 0 0 1px theme(green);
+    }
+  }
+
+  .content {
+    width: margin(15);
+  }
+</style>