@playpilot/tpi 1.0.0

package/src/routes/components/Playlinks.svelte

@@ -0,0 +1,155 @@
+<script>
+	import { TrackingEvent } from '$lib/enums/TrackingEvent'
+	import { track } from '$lib/tracking'
+  import IconContinue from './Icons/IconContinue.svelte'
+  import { getContext } from 'svelte'
+
+  /** @type {{ playlinks: PlaylinkData[], title: TitleData, list?: boolean }} */
+  const { playlinks, title, list = false } = $props()
+
+  const isModal = getContext('scope') === 'modal'
+
+  // Remove any playlinks without logos, as these are likely sub providers.
+  let filteredPlaylinks = $derived(playlinks.filter(playlink => !!playlink.logo_url))
+
+  const categoryStrings = {
+    SVOD: 'Stream',
+    BUY: 'Buy',
+    RENT: 'Rent',
+  }
+
+  /**
+   * @param {string} playlink Name of the clicked playlink
+   */
+  function onclick(playlink) {
+    track(isModal ? TrackingEvent.TitleModalPlaylinkClick : TrackingEvent.TitlePopoverPlaylinkClick, title, { playlink })
+  }
+</script>
+
+<h2>Where to stream online</h2>
+
+<div class="playlinks" class:list>
+  {#each filteredPlaylinks as { name, url, logo_url, extra_info: { category } }}
+    <a href={url} target="_blank" class="playlink" onclick={() => onclick(name)} data-playlink={name} rel="sponsored">
+      <img src={logo_url} alt="" height="32" width="32" />
+
+      <div>
+        <span class="name">{name}</span>
+        <div class="category">{categoryStrings[category] || 'Stream'}</div>
+      </div>
+
+      {#if list}
+        <div class="arrow">
+          <IconContinue />
+        </div>
+      {/if}
+    </a>
+  {/each}
+
+  {#if !playlinks.length}
+    <div class="playlink empty">
+      This title is not currently available to stream. Save it and we'll notify you when it's available.
+    </div>
+  {/if}
+</div>
+
+<style>
+  h2 {
+    margin: 0;
+    color: var(--playpilot-playlinks-title-color, var(--playpilot-text-color-alt));
+    font-family: var(--playpilot-playlinks-title-font-family, inherit);
+    font-weight: var(--playpilot-playlinks-title-font-weight, lighter);
+    font-size: var(--playpilot-playlinks-title-font-size, 14px);
+  }
+
+  img {
+    border-radius: 0.5rem;
+    background: rgba(0, 0, 0, 0.25);
+  }
+
+  @media (min-width: 640px) {
+    img {
+      height: 2.5rem;
+      width: 2.5rem;
+    }
+
+    .list img {
+      height: 2rem;
+      width: 2rem;
+    }
+  }
+
+  .playlinks {
+    box-sizing: border-box;
+    display: flex;
+    gap: 0.5rem;
+    width: calc(100% + 2rem);
+    padding: 0.5rem 1rem;
+    margin: 0 -1rem;
+    overflow: auto;
+    scrollbar-width: none;
+  }
+
+  .playlinks::-webkit-scrollbar {
+    display: none;
+  }
+
+  .list {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+  }
+
+  .playlink {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem;
+    background: var(--playpilot-playlink-background, var(--playpilot-lighter));
+    box-shadow: var(--playpilot-playlink-shadow, var(--playpilot-shadow));
+    border-radius: var(--playpilot-playlink-border-radius, 0.5rem);
+    color: var(--playpilot-playlink-text-color, var(--playpilot-text-color-alt)) !important;
+    text-decoration: none !important;
+    white-space: nowrap;
+    font-size: 0.75rem;
+    line-height: 1;
+  }
+
+  .playlink img {
+    margin: 0;
+  }
+
+  .list .playlink {
+    padding: 0.5rem;
+    gap: 0.5rem;
+  }
+
+  .playlink:hover,
+  .playlink:active {
+    filter: var(--playpilot-playlink-hover-filter, brightness(1.1));
+    background: var(--playpilot-playlink-hover-background, var(--playpilot-playlink-background, var(--playpilot-lighter)));
+    text-decoration: none !important;
+  }
+
+  .name {
+    font-weight: var(--playpilot-playlink-font-weight, inherit);
+    font-family: var(--playpilot-playlink-font-family, inherit);
+  }
+
+  .category {
+    margin-top: 0.5rem;
+    font-size: 0.625rem;
+    color: var(--playpilot-playlink-category-text-color, var(--playpilot-text-color));
+    font-weight: var(--playpilot-playlink-category-font-weight, inherit);
+    font-family: var(--playpilot-playlink-category-font-family, inherit);
+  }
+
+  .empty {
+    white-space: initial;
+    line-height: 1.35;
+  }
+
+  .arrow {
+    margin-left: auto;
+    padding: 0 0.5rem;
+  }
+</style>

package/src/routes/components/Popover.svelte

@@ -0,0 +1,95 @@
+<script>
+  import { onMount, setContext, tick } from 'svelte'
+  import { fly } from 'svelte/transition'
+
+  /** @type {{ children: import('svelte').Snippet, maxHeight?: number }} */
+  let { children, maxHeight = $bindable() } = $props()
+
+  setContext('scope', 'popover')
+
+  /** @type {HTMLElement | null} */
+  let element = $state(null)
+  let flip = $state(false)
+
+  onMount(async () => {
+    await tick()
+    positionElement()
+
+    await tick()
+    setMaxHeight()
+  })
+
+  /**
+   * Flip the element vertically if it doesn't fit on screen above the link.
+   * Move it to the left if it doesn't fit from the right side of the screen.
+   * Vertically it is always above or below, but horizontally is a gradual.
+   * @return {void}
+   */
+  function positionElement() {
+    if (!element) return
+
+    const { top, right } = element.getBoundingClientRect()
+    const offset = getOffset()
+
+    flip = top - offset < 0
+
+    const fromRight = window.innerWidth - right - offset
+    if (right + offset > window.innerWidth) element.style.left = `${fromRight}px`
+  }
+
+  /**
+   * Set the max height of the dialog so that it always fits on screen, even after flipping.
+   * @return {void}
+   */
+  function setMaxHeight() {
+    if (!element) return
+
+    const { top } = element.getBoundingClientRect()
+    const offset = getOffset()
+
+    maxHeight = Math.min(window.innerHeight - top - offset, window.innerHeight * 0.8)
+  }
+
+  function getOffset() {
+    return parseFloat(getComputedStyle(document.documentElement).fontSize) // 1 rem
+  }
+</script>
+
+<div class="popover" class:flip bind:this={element} style:--max-height={maxHeight ? maxHeight + 'px' : null} tabindex="-1" aria-hidden="true">
+  <div class="dialog" transition:fly={{ duration: 100, y: 10 }}>
+    {@render children()}
+  </div>
+</div>
+
+<style>
+  .popover {
+    --offset: 0.5rem;
+    position: absolute;
+    top: calc((var(--offset) - 1px) * -1); /* Add 1 pixel to account for rounding errors */
+    left: 0;
+    width: calc(100vw - 2rem);
+    max-width: 20rem;
+    padding: var(--offset) 0;
+    transform: translateY(calc(-100% + var(--offset)));
+    z-index: 999;
+  }
+
+  .popover.flip {
+    top: auto;
+    bottom: calc(var(--offset) + 1px);  /* Add 1 pixel to account for rounding errors */
+    transform: translateY(calc(100% + var(--offset)));
+  }
+
+  /* This is a separate element so that the parent can have an offset while still keeping the mouse inside */
+  .dialog {
+    cursor: default;
+    position: relative;
+    border-radius: var(--playpilot-popover-border-radius, 1rem);
+    background: var(--playpilot-popover-background, var(--playpilot-light));
+    box-shadow: var(--playpilot-popover-shadow, var(--playpilot-shadow-large));
+    max-height: min(var(--max-height), 35rem);
+    scrollbar-width: thin;
+    overflow-y: overlay;
+    overflow-x: hidden;
+  }
+</style>

package/src/routes/components/RoundButton.svelte

@@ -0,0 +1,38 @@
+<script>
+  /**
+   * @typedef {Object} Props
+   * @property {string} [size]
+   * @property {import('svelte').Snippet | null} [children]
+   * @property {() => void} [onclick]
+   */
+  /** @type {Props & { [key: string]: any }} */
+  const { children = null, size = '2rem', onclick = () => null, ...rest } = $props()
+</script>
+
+<svelte:element this={rest.href ? 'a' : 'button'} role={rest.href ? 'link' : 'button'} {onclick} class="button" style:--size={size} {...rest}>
+  {@render children?.()}
+</svelte:element>
+
+<style>
+  .button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 var(--size);
+    width: var(--size);
+    height: var(--size);
+    border-radius: 50%;
+    border: 0;
+    padding: 0;
+    background: var(--playpilot-button-background, var(--playpilot-content));
+    box-shadow: var(--playpilot-button-shadow, var(--playpilot-shadow));
+    color: var(--playpilot-button-text-color, var(--playpilot-text-color-alt));
+    cursor: pointer;
+    transition: transform 50ms;
+  }
+
+  .button:hover {
+    filter: brightness(1.2);
+    transform: scale(1.05);
+  }
+</style>

package/src/routes/components/SkeletonText.svelte

@@ -0,0 +1,33 @@
+<script>
+  /** @type {{ lines?: number, max?: number, min?: any }} */
+  const { lines = 4, max = 100, min = (max / 100) * 70 } = $props()
+</script>
+
+<!-- eslint-disable-next-line no-unused-vars -->
+{#each { length: lines } as _}
+  <div class="skeleton" style:width="{Math.floor(Math.random() * (max - min) + min)}%">&nbsp;</div>
+{/each}
+
+<style>
+  .skeleton {
+    position: relative;
+    font-size: inherit;
+    line-height: inherit;
+  }
+
+  .skeleton:last-child {
+    margin-bottom: 0;
+  }
+
+  .skeleton::before {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: calc(100% - 0.5rem);
+    border-radius: var(--playpilot-skeleton-border-radius, 2em);
+    background: var(--playpilot-lighter);
+    content: '';
+  }
+</style>

package/src/routes/components/Title.svelte

@@ -0,0 +1,180 @@
+<script>
+  import Genres from './Genres.svelte'
+  import Playlinks from './Playlinks.svelte'
+  import Description from './Description.svelte'
+  import Participants from './Participants.svelte'
+  import IconIMDb from './Icons/IconIMDb.svelte'
+
+  /** @type {{ title: TitleData, small?: boolean, compact?: boolean }} */
+  const { title, small = false, compact = false } = $props()
+</script>
+
+<div class="content" class:small class:compact data-playpilot-link-injections-title data-playpilot-original-title={title.original_title}>
+  <header class="header">
+    {#if !compact}
+      <div class="top">
+        <img class="poster" src={title.standing_poster} alt="Movie poster for '{title.title}'" />
+      </div>
+    {/if}
+
+    <h1>{title.title}</h1>
+
+    <div class="info">
+      <div class="imdb">
+        <IconIMDb />
+        {title.imdb_score}
+      </div>
+
+      <Genres genres={title.genres} />
+
+      <div>{title.year}</div>
+      <div class="capitalize">{title.type}</div>
+
+      {#if title.length}
+        <div>{title.length} minutes</div>
+      {/if}
+    </div>
+  </header>
+
+  <main class="main">
+    <Playlinks playlinks={title.providers} {title} list />
+
+    {#if !small}
+      <Description text={title.description} blurb={title.blurb} />
+
+      {#if title.participants?.length}
+        <Participants participants={title.participants} />
+      {/if}
+    {/if}
+
+  </main>
+</div>
+
+<div class="background" class:faded={compact}>
+  <img src={title.medium_poster} alt="" />
+</div>
+
+<style>
+  h1 {
+    margin: 0.5rem 0;
+    font-family: var(--playpilot-detail-title-font-family, inherit);
+    font-weight: var(--playpilot-detail-title-font-weight, lighter);
+    font-size: var(--playpilot-detail-title-font-size, 1.5rem);
+    color: var(--playpilot-detail-title-text-color, #fff);
+  }
+
+  .small h1 {
+    font-size: var(--playpilot-detail-title-font-size-small, 1.125rem);
+  }
+
+  .compact h1 {
+    margin-top: 0;
+  }
+
+  .content {
+    z-index: 1;
+    position: relative;
+    padding: 1rem;
+    color: var(--playpilot-detail-text-color, var(--playpilot-text-color));
+    font-family: var(--playpilot-detail-font-family, var(--playpilot-font-family));
+    font-size: var(--playpilot-detail-font-size, 14px);
+  }
+
+  .content.small {
+    font-size: var(--playpilot-detail-font-size, 12px);
+    line-height: 1.45;
+    padding-bottom: 0.5rem;
+  }
+
+  .header {
+    padding: 2rem 0 1rem;
+  }
+
+  .small .header {
+    padding-top: 1rem;
+  }
+
+  .compact .header {
+    padding: 0 0 1rem;
+  }
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+  }
+
+  .poster {
+    display: block;
+    width: 4.5rem;
+    margin: 0;
+    aspect-ratio: 2 / 3;
+    border-radius: var(--playpilot-detail-image-border-radius, 0.5rem);
+    background: var(--playpilot-detail-image-background, var(--playpilot-content));
+    box-shadow: var(--playpilot-detail-image-shadow, var(--playpilot-shadow));
+  }
+
+  .info {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem 1rem;
+  }
+
+  .small .info {
+    gap: 0.5rem 0.75rem;
+  }
+
+  .imdb {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .imdb :global(svg) {
+    margin-top: -0.125rem;
+  }
+
+  .small .imdb :global(svg) {
+    margin-top: 0;
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  .background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 12rem;
+    overflow: hidden;
+    background: var(--playpilot-detail-background, var(--playpilot-lighter));
+  }
+
+  .background::before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: linear-gradient(to top, var(--playpilot-detail-background, var(--playpilot-light)), transparent 40%);
+  }
+
+  .background img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+    margin: 0;
+  }
+
+  .faded {
+    opacity: 0.15;
+  }
+
+  .capitalize {
+    text-transform: capitalize;
+  }
+</style>

package/src/routes/components/TitleModal.svelte

@@ -0,0 +1,24 @@
+<script>
+  import { TrackingEvent } from '$lib/enums/TrackingEvent'
+  import { track } from '$lib/tracking'
+  import Modal from './Modal.svelte'
+  import Title from './Title.svelte'
+
+  /** @type {{ onclose: () => void, title: TitleData }} */
+  const { onclose, title } = $props()
+
+  track(TrackingEvent.TitleModalView, title)
+
+  let hasTrackedScrolling = false
+
+  function onscroll() {
+    if (hasTrackedScrolling) return
+
+    track(TrackingEvent.TitleModalScroll, title)
+    hasTrackedScrolling = true
+  }
+</script>
+
+<Modal {onclose} {onscroll}>
+  <Title {title} />
+</Modal>

package/src/routes/components/TitlePopover.svelte

@@ -0,0 +1,17 @@
+<script>
+  import { TrackingEvent } from '$lib/enums/TrackingEvent'
+  import { track } from '$lib/tracking'
+  import Popover from './Popover.svelte'
+  import Title from './Title.svelte'
+
+  /** @type {{ title: TitleData }} */
+  const { title } = $props()
+
+  let maxHeight = $state(0)
+
+  track(TrackingEvent.TitlePopoverView, title)
+</script>
+
+<Popover bind:maxHeight>
+  <Title {title} small compact={maxHeight < 250} />
+</Popover>

package/src/tests/helpers.js

@@ -0,0 +1,18 @@
+import { vi } from 'vitest'
+
+/**
+ * @param {Object} [options]
+ * @param {any} [options.response]
+ * @param {number} [options.status]
+ * @param {boolean} [options.ok]
+ */
+export function fakeFetch({ response = '', status = 200, ok = true } = {}) {
+  // @ts-ignore
+  global.fetch = vi.fn(() =>
+    Promise.resolve({
+      ok,
+      status,
+      json: () => response,
+    }),
+  )
+}