@playpilot/tpi 5.15.0 → 5.16.2

package/src/routes/components/Modal.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { fade, fly, scale, type TransitionConfig } from 'svelte/transition'
   import IconClose from './Icons/IconClose.svelte'
+  import IconArrow from './Icons/IconArrow.svelte'
   import RoundButton from './RoundButton.svelte'
   import SwipeHandle from './SwipeHandle.svelte'
   import { onMount, setContext, type Snippet } from 'svelte'
@@ -8,23 +9,35 @@
   import { isInSplitTestVariant } from '$lib/splitTest'
   import { SplitTest } from '$lib/enums/SplitTest'
   import { mobileBreakpoint } from '$lib/constants'
+  import { destroyAllModals, getPreviousModal, goBackToPreviousModal } from '$lib/modal'
 
   interface Props {
     children: Snippet
     bubble?: Snippet | null
     prepend?: Snippet | null
     tall?: boolean
-    onclose?: () => void
+    closeButtonStyle?: 'shadow' | 'flat'
+    initialScrollPosition?: number
     onscroll?: () => void
   }
 
-  const { children, bubble, prepend, tall = false, onclose = () => null, onscroll = () => null }: Props = $props()
+  const {
+    children,
+    bubble,
+    prepend,
+    tall = false,
+    closeButtonStyle = 'shadow',
+    initialScrollPosition = 0,
+    onscroll = () => null,
+  }: Props = $props()
 
   const inlineBubble = isInSplitTestVariant(SplitTest.TopScrollFormat, 1)
 
   let windowWidth = $state(0)
+  let modalElement: HTMLElement | null = $state(null)
   let dialogElement: HTMLElement | null = $state(null)
   let dialogOffset: number = $state(0)
+  let hasPreviousModal = $state(false)
 
   const isMobile = $derived(windowWidth < mobileBreakpoint)
 
@@ -37,9 +50,18 @@
     const baseOverflowStyle = document.body.style.overflowY
     document.body.style.overflowY = 'hidden'
 
+    hasPreviousModal = !!getPreviousModal()
+
+    requestAnimationFrame(setInitialScrollPosition)
+
     return () => document.body.style.overflowY = baseOverflowStyle || ''
   })
 
+  function setInitialScrollPosition(): void {
+    const scrollableElement = window.innerWidth > mobileBreakpoint ? modalElement : dialogElement
+    scrollableElement?.scrollTo(0, initialScrollPosition)
+  }
+
   function scaleOrFly(node: Element, options: { y: number } = { y: 0 }): TransitionConfig {
     if (prefersReducedMotion.current) return fade(node, { duration: 0 })
 
@@ -48,9 +70,9 @@
   }
 </script>
 
-<svelte:window onkeydown={({ key }) => { if (key === 'Escape') onclose() }} bind:innerWidth={windowWidth} />
+<svelte:window onkeydown={({ key }) => { if (key === 'Escape') destroyAllModals() }} bind:innerWidth={windowWidth} />
 
-<div class="modal" style:--dialog-offset="{dialogOffset}px" transition:fade|global={{ duration: 150 }} class:has-bubble={!!bubble && inlineBubble} class:has-prepend={!!prepend}>
+<div class="modal" style:--dialog-offset="{dialogOffset}px" transition:fade|global={{ duration: 150 }} bind:this={modalElement} class:has-bubble={!!bubble && inlineBubble} class:has-prepend={!!prepend}>
   {#if prepend}
     <div class="prepend" transition:scaleOrFly|global={{ y: -10 }}>
       {@render prepend()}
@@ -65,13 +87,21 @@
 
   {#if isMobile}
     <div class="swipe-handle" transition:scaleOrFly|global>
-      <SwipeHandle target={dialogElement!} onpassed={() => onclose()} />
+      <SwipeHandle target={dialogElement!} onpassed={() => destroyAllModals()} />
     </div>
   {/if}
 
   <div class="dialog" class:tall {onscroll} bind:this={dialogElement} role="dialog" aria-labelledby="title" transition:scaleOrFly|global={{ y: window.innerHeight }} data-view-transition-new>
-    <div class="close">
-      <RoundButton onclick={() => onclose()}>
+    {#if hasPreviousModal}
+      <div class="close back {closeButtonStyle}">
+        <RoundButton onclick={() => goBackToPreviousModal()} aria-label="Back">
+          <IconArrow direction="left" />
+        </RoundButton>
+      </div>
+    {/if}
+
+    <div class="close {closeButtonStyle}">
+      <RoundButton onclick={() => destroyAllModals()} aria-label="Close">
         <IconClose />
       </RoundButton>
     </div>
@@ -81,7 +111,7 @@
 
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div class="backdrop" onclick={() => onclose()}></div>
+  <div class="backdrop" onclick={() => destroyAllModals()}></div>
 </div>
 
 <style lang="scss">
@@ -98,9 +128,9 @@
     align-items: center;
     overflow: auto;
     top: 0;
+    right: 0;
+    bottom: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
     background: var(--playpilot-detail-backdrop, rgba(0, 0, 0, 0.65));
 
     @media (min-width: $max-width) {
@@ -118,8 +148,9 @@
     width: 100%;
     max-width: $max-width;
     max-height: 80vh;
-    overflow: auto;
     margin-top: auto;
+    padding-bottom: env(safe-area-inset-bottom);
+    overflow: auto;
     border-radius: var(--playpilot-detail-border-radius, margin(1) margin(1) 0 0);
     background: var(--playpilot-detail-background, var(--playpilot-light));
     transition: transform 200ms;
@@ -129,10 +160,11 @@
     }
 
     @media (min-width: $max-width) {
+      max-height: unset;
       margin-top: 0;
-      border-radius: var(--playpilot-detail-border-radius, margin(1));
+      padding-bottom: 0;
       overflow: visible;
-      max-height: unset;
+      border-radius: var(--playpilot-detail-border-radius, margin(1));
     }
 
     &.tall {
@@ -193,6 +225,24 @@
     &:hover {
       filter: brightness(1.1);
     }
+
+    &.flat {
+      --playpilot-button-background: transparent;
+      --playpilot-button-shadow: none;
+    }
+
+    &.back {
+      right: auto;
+      left: margin(1);
+
+      &.flat {
+        left: margin(0.5);
+
+        :global(svg) {
+          margin: 0;
+        }
+      }
+    }
   }
 
   .prepend {

package/src/routes/components/Participant.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import { heading } from '$lib/actions/heading'
+  import { SplitTest } from '$lib/enums/SplitTest'
+  import { openModal } from '$lib/modal'
+  import { trackSplitTestView } from '$lib/splitTest'
+  import type { ParticipantData } from '$lib/types/participant'
+  import ListTitle from './ListTitle.svelte'
+
+  interface Props {
+    participant: ParticipantData
+  }
+
+  const { participant }: Props = $props()
+
+  const { name, birth_date, death_date } = $derived(participant)
+
+  trackSplitTestView(SplitTest.ParticipantPlaylinkFormat)
+
+  function formatDate(dateString: string): string {
+    const date = new Date(dateString)
+    return date.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })
+  }
+</script>
+
+<div class="header">
+  <div class="heading" use:heading={2} id="name">{name}</div>
+
+  {#if birth_date}
+    <p class="dates">
+      Born on <strong>{formatDate(birth_date)}</strong>{#if death_date}, died on <strong>{formatDate(death_date)}</strong>{/if}
+    </p>
+  {/if}
+</div>
+
+<div class="content">
+  <div class="heading small" use:heading={3} id="credits">Credits</div>
+
+  <div class="list">
+    {#each window.PlayPilotLinkInjections?.evaluated_link_injections?.map(i => i.title_details) || [] as title}
+      {#if title}
+        <ListTitle {title} onclick={(event) => openModal({ event, data: title })} />
+      {/if}
+    {/each}
+  </div>
+</div>
+
+<style lang="scss">
+  .header {
+    padding: margin(4) margin(1) margin(2);
+    background: linear-gradient(to bottom, var(--playpilot-detail-background-light, var(--playpilot-lighter)), transparent);
+    border-radius: var(--playpilot-detail-border-radius, margin(1) margin(1) 0 0);
+    font-family: var(--playpilot-detail-font-family, var(--playpilot-font-family));
+    font-weight: var(--playpilot-detail-font-weight, normal);
+    font-size: var(--playpilot-detail-font-size, 14px);
+    line-height: var(--playpilot-participant-description-line-height, normal);
+    color: var(--playpilot-detail-text-color, var(--playpilot-text-color));
+  }
+
+  .heading {
+    margin: 0;
+    font-family: var(--playpilot-detail-title-font-family, var(--playpilot-font-family));
+    font-weight: var(--playpilot-detail-title-font-weight, lighter);
+    font-size: var(--playpilot-detail-title-font-size, margin(1.5));
+    line-height: normal;
+    font-style: var(--playpilot-detail-title-font-style, normal);
+
+    &.small {
+      margin: 0 0 margin(0.5);
+      font-size: var(--playpilot-detail-title-small-font-size, margin(1.25));
+    }
+  }
+
+  .dates {
+    margin: margin(0.5) 0 0;
+  }
+
+  .content {
+    padding: 0 margin(1) margin(1);
+    color: var(--playpilot-detail-text-color, var(--playpilot-text-color));
+    font-family: var(--playpilot-detail-font-family, var(--playpilot-font-family));
+    font-weight: var(--playpilot-detail-font-weight, normal);
+    font-size: var(--playpilot-detail-font-size, 14px);
+    line-height: normal;
+    font-style: normal;
+  }
+
+  .list {
+    display: flex;
+    flex-direction: column;
+    gap: margin(0.5);
+  }
+</style>

package/src/routes/components/ParticipantModal.svelte

@@ -0,0 +1,31 @@
+
+<script lang="ts">
+  import Modal from './Modal.svelte'
+  import Participant from './Participant.svelte'
+  import type { ParticipantData } from '$lib/types/participant'
+
+  interface Props {
+    participant: ParticipantData
+    initialScrollPosition?: number
+  }
+
+  const { participant = {
+    sid: 'pr5C5W',
+    name: 'James Franco',
+    birth_date: '1978-04-19',
+    death_date: null,
+    jobs: ['actor'],
+    image: 'https://hips.hearstapps.com/hmg-prod/images/gettyimages-161098947-square.jpg',
+    image_uuid: '08ed2fac357011eb87470aff12c0f5c9',
+    gender: 'Male',
+    bio: 'Aenean feugiat nec odio at venenatis. Integer porta neque metus, a sollicitudin dolor dapibus et. In sollicitudin nulla eget ultricies porttitor. Nulla facilisi. Sed turpis orci, facilisis efficitur neque in, ultrices ultricies purus. Mauris nec augue a nisi imperdiet semper ut nec tellus. Donec at tristique odio. Etiam luctus eget metus non mattis. Integer imperdiet in elit eu varius. Donec ornare, nibh vitae accumsan consequat, lacus nulla elementum sapien, a scelerisque tellus augue ac erat. Aenean finibus fringilla magna, ac laoreet nisl convallis vel. Proin laoreet ex ac augue maximus, nec gravida tortor pharetra.\nCurabitur maximus dui sed risus placerat pharetra vitae ut orci. Proin sodales enim a elit euismod, a varius sem suscipit. Vivamus eu magna cursus, fringilla est in, mollis nunc. Mauris fringilla eleifend nibh, eget auctor lectus bibendum non. Praesent sed elit ipsum. Donec nunc dolor, sagittis hendrerit gravida et, lacinia sed metus. Morbi tempus mi massa. In hac habitasse platea dictumst. Suspendisse aliquet tincidunt lectus ut elementum.',
+  }, initialScrollPosition = 0 }: Props = $props()
+
+  let windowWidth = $state(0)
+</script>
+
+<svelte:window bind:innerWidth={windowWidth} />
+
+<Modal {initialScrollPosition} closeButtonStyle="flat">
+  <Participant {participant} />
+</Modal>

package/src/routes/components/PlaylinkIcon.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { removeImageUrlPrefix } from '$lib/image'
+  import type { PlaylinkData } from '$lib/types/playlink'
+
+  interface Props {
+    playlink: PlaylinkData
+    size?: number
+    // eslint-disable-next-line no-unused-vars
+    onclick?: (event: MouseEvent) => void
+  }
+
+  const { playlink, size = 30, onclick = () => null }: Props = $props()
+
+  const { name, url, logo_url } = $derived(playlink)
+</script>
+
+<a href={url} target="_blank" class="playlink" data-playlink={name} rel="sponsored" {onclick}>
+  <img src={removeImageUrlPrefix(logo_url)} alt={name} height={size} width={size} />
+</a>
+
+<style lang="scss">
+  .playlink {
+    display: inline-block;
+    background: var(--playpilot-playlink-background, var(--playpilot-light));
+    border-radius: var(--playpilot-playlink-border-radius, margin(0.5));
+    overflow: hidden;
+
+    &:hover,
+    &:active {
+      filter: var(--playpilot-playlink-hover-filter, brightness(1.1));
+      background: var(--playpilot-playlink-hover-background, var(--playpilot-playlink-background, var(--playpilot-lighter))) !important;
+      text-decoration: none !important;
+      outline: 2px solid var(--playpilot-detail-text-color, var(--playpilot-text-color));
+    }
+
+    img {
+      display: block;
+      margin: 0;
+    }
+  }
+</style>

package/src/routes/components/PlaylinkLabel.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import type { PlaylinkData } from '$lib/types/playlink'
+
+  interface Props {
+    playlink: PlaylinkData
+    size?: number
+    // eslint-disable-next-line no-unused-vars
+    onclick?: (event: MouseEvent) => void
+  }
+
+  const { playlink, onclick = () => null }: Props = $props()
+
+  const { name, url } = $derived(playlink)
+</script>
+
+<a href={url} target="_blank" class="playlink" data-playlink={name} rel="sponsored" {onclick}>
+  {name}
+</a>
+
+<style lang="scss">
+  .playlink {
+    display: inline-block;
+    background: var(--playpilot-playlink-label-background, var(--playpilot-light));
+    border-radius: var(--playpilot-playlink-label-border-radius, margin(0.25));
+    padding: margin(0.25) margin(0.5);
+    font-size: var(--playpilot-playlink-label-font-size, 12px);
+    color: var(--playpilot-playlink-label-text-color, var(--playpilot-text-color-alt)) !important;
+    text-decoration: none;
+    font-style: normal !important;
+    overflow: hidden;
+
+    &:hover,
+    &:active {
+      background: var(--playpilot-playlink-label-hover-background, var(--playpilot-content-light));
+    }
+  }
+</style>

package/src/routes/components/Playlinks.svelte

@@ -27,9 +27,7 @@
   // otherwise break the layout in ways that don't make sense to fix.
   const list = $derived(outerWidth < 500 || !!displayAd)
 
-  // Remove any playlinks without logos, these are likely sub providers.
-  const filteredPlaylinks = $derived(playlinks.filter(playlink => !!playlink.logo_url))
-  const mergedPlaylink = $derived(mergePlaylinks(filteredPlaylinks))
+  const mergedPlaylink = $derived(mergePlaylinks(playlinks))
 
   function onclick(playlink: string): void {
     track(isModal ? TrackingEvent.TitleModalPlaylinkClick : TrackingEvent.TitlePopoverPlaylinkClick, title, { playlink })

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

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { openModal } from '$lib/modal'
+  import type { ParticipantData } from '$lib/types/participant'
+  import Rail from './Rail.svelte'
+
+  interface Props {
+    participants: ParticipantData[]
+  }
+
+  const { participants }: Props = $props()
+</script>
+
+<Rail heading="Cast">
+  {#each participants.slice(0, 15) as participant}
+    <button class="participant" onclick={event => openModal({ event, type: 'participant', data: participant })}>
+      <span class="truncate">{participant.name}</span>
+
+      <div class="character truncate">{participant.character}</div>
+    </button>
+  {/each}
+</Rail>
+
+<style lang="scss">
+  .participant {
+    display: block;
+    flex: 0 0 10rem;
+    width: 10rem;
+    padding: margin(0.5);
+    border: 0;
+    border-radius: var(--playpilot-cast-border-radius, var(--playpilot-playlink-border-radius, margin(0.5)));
+    background: var(--playpilot-cast-background, var(--playpilot-playlink-background, var(--playpilot-lighter)));
+    cursor: pointer;
+    font-family: inherit;
+    text-align: left;
+    color: inherit;
+    font-size: var(--playpilot-cast-font-size, var(--playpilot-playlinks-font-size, margin(0.75)));
+    white-space: nowrap;
+
+    &:hover,
+    &:active {
+      filter: var(--playpilot-cast-hover-filter, var(--playpilot-playlink-hover-filter, brightness(1.1)));
+      text-decoration: none !important;
+    }
+  }
+
+  .character {
+    color: var(--playpilot-cast-character-text-color, var(--playpilot-text-color-alt));
+    font-style: italic;
+  }
+
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>

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

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import TinySlider from 'svelte-tiny-slider'
+  import IconArrow from '../Icons/IconArrow.svelte'
+  import { heading as _heading } from '$lib/actions/heading'
+
+  interface Props {
+    heading?: string
+    children: Snippet
+  }
+
+  const { heading = '', children }: Props = $props()
+</script>
+
+{#if heading}
+  <div class="heading" use:_heading={2}>{heading}</div>
+{/if}
+
+<div class="rail">
+  <TinySlider allowWheel>
+    {@render children()}
+
+    {#snippet controls({ setIndex, currentIndex, reachedEnd })}
+      {#if currentIndex > 0}
+        <button class="arrow left" onclick={() => setIndex(currentIndex - 1)}><IconArrow direction="left" /></button>
+      {/if}
+
+      {#if !reachedEnd}
+        <button class="arrow right" onclick={() => setIndex(currentIndex + 1)}><IconArrow /></button>
+      {/if}
+    {/snippet}
+  </TinySlider>
+</div>
+
+<style lang="scss">
+  .heading {
+    margin: margin(1) 0 margin(0.5);
+    font-size: var(--playpilot-rail-title-font-size, 18px);
+    line-height: normal;
+    font-weight: inherit;
+    color: var(--playpilot-rail-title-text-color, var(--playpilot-text-color));
+  }
+
+  .rail {
+    --gap: #{margin(0.5)};
+    position: relative;
+    width: calc(100% + margin(2));
+    margin: 0 margin(-1);
+
+    :global(.slider) {
+      padding: 0 margin(1);
+    }
+
+    :global(.slider-content > :last-child) {
+      margin-right: margin(2);
+    }
+  }
+
+  .arrow {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    left: margin(2);
+    top: 50%;
+    width: margin(2);
+    height: margin(2);
+    padding: 0;
+    margin: 0;
+    border: 0;
+    border-radius: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    background: var(--playpilot-rails-arrow-background, var(--playpilot-content-light));
+    z-index: 2;
+    cursor: pointer;
+    color: var(--playpilot-rails-arrow-color, var(--playpilot-detail-text-color, white));
+
+    @media (hover: hover) {
+      display: flex;
+    }
+
+    &:hover {
+      filter: brightness(1.2);
+    }
+
+    &.right {
+      left: auto;
+      right: 0;
+    }
+  }
+</style>

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { TitleData } from '$lib/types/title'
+  import TitlesRail from './TitlesRail.svelte'
+
+  const titles = fetchTitles()
+
+  async function fetchTitles(): Promise<TitleData[]> {
+    // This is just a fake loading state for now
+    await new Promise(res => setTimeout(res, 500))
+
+    // Imagine this being a fetch request that returns titles instead.
+    return (window.PlayPilotLinkInjections?.evaluated_link_injections?.map(i => i.title_details) || []) as TitleData[]
+  }
+</script>
+
+<TitlesRail {titles} heading="Similar movies & shows" />

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

@@ -0,0 +1,95 @@
+<script lang="ts">
+  import TitlePoster from '../TitlePoster.svelte'
+  import Rail from './Rail.svelte'
+  import { playPilotBaseUrl } from '$lib/constants'
+  import type { TitleData } from '$lib/types/title'
+  import { openModal } from '$lib/modal'
+
+  interface Props {
+    titles: Promise<TitleData[]> | TitleData[]
+    heading?: string
+  }
+
+  const { titles, heading = '' }: Props = $props()
+</script>
+
+<div class="titles">
+  <Rail {heading}>
+    {#await titles}
+      {#each { length: 8 }}
+        <div class="title" data-testid="skeleton">
+          <div class="poster"></div>
+
+          <div class="heading">
+            <span class="skeleton">&nbsp;</span>
+            <span class="skeleton">&nbsp;</span>
+          </div>
+        </div>
+      {/each}
+    {:then titles}
+      {#each titles as title}
+        {@const href = `${playPilotBaseUrl}/${title.type}/${title.slug}`}
+
+        <div class="title" data-testid="title">
+          <a class="poster" {href} onclick={(event) => openModal({ event, data: title })}>
+            <TitlePoster {title} width={96} height={144} />
+          </a>
+
+          <a {href} class="heading" onclick={(event) => openModal({ event, data: title })}>
+            {title.title}
+          </a>
+        </div>
+      {/each}
+    {/await}
+  </Rail>
+</div>
+
+<style lang="scss">
+  $width: margin(6);
+
+  .title {
+    width: $width;
+
+    &:hover,
+    &:active {
+      filter: brightness(1.1);
+    }
+  }
+
+  .poster {
+    display: block;
+    border-radius: var(--playpilot-rail-border-radius, var(--playpilot-playlink-border-radius, margin(0.5)));
+    overflow: hidden;
+    width: 100%;
+    aspect-ratio: 2 / 3;
+    background: var(--playpilot-detail-background-light, var(--playpilot-lighter));
+  }
+
+  .heading {
+    display: -webkit-box;
+    padding-top: margin(0.5);
+    overflow: hidden;
+    text-decoration: none;
+    color: var(--playpilot-detail-text-color, var(--playpilot-text-color-alt)) !important;
+    font-size: var(--playpilot-rail-font-size, var(--playpilot-detail-font-size-small, 12px));
+    font-style: normal !important;
+    line-height: 1.2;
+    line-clamp: 2;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+  }
+
+  .skeleton {
+    display: block;
+    height: 1em;
+    width: 100%;
+    background: var(--playpilot-detail-background-light, var(--playpilot-lighter));
+    border-radius: margin(2);
+
+    &:last-child {
+      margin-top: margin(0.3);
+      width: 50%;
+    }
+  }
+</style>