@playpilot/tpi 5.12.0-beta.similar.1 → 5.12.1

package/src/tests/routes/components/Modal.test.js

@@ -1,63 +1,57 @@
 import { render, fireEvent } from '@testing-library/svelte'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 
 import Modal from '../../../routes/components/Modal.svelte'
 import { createRawSnippet } from 'svelte'
-import { destroyAllModals, getPreviousModal, goBackToPreviousModal } from '$lib/modal'
-
-vi.mock('$lib/modal', () => ({
-  destroyAllModals: vi.fn(),
-  getPreviousModal: vi.fn(),
-  goBackToPreviousModal: vi.fn(),
-}))
 
 describe('Modal.svelte', () => {
-  beforeEach(() => {
-    vi.resetAllMocks()
-  })
-
   const children = createRawSnippet(() => ({ render: () => '<div></div>' }))
 
-  it('Should fire given destroyAllModals function when backdrop is clicked', async () => {
-    const { container } = render(Modal, { children })
+  it('Should fire given onclose function when backdrop is clicked', async () => {
+    const onclose = vi.fn()
+    const { container } = render(Modal, { children, onclose })
 
     await fireEvent.click(/** @type {Node} */ (container.querySelector('.backdrop')))
 
-    expect(destroyAllModals).toHaveBeenCalled()
+    expect(onclose).toHaveBeenCalled()
   })
 
-  it('Should fire destroyAllModals function when close button is clicked', async () => {
-    const { container } = render(Modal, { children })
+  it('Should fire given onclose function when close button is clicked', async () => {
+    const onclose = vi.fn()
+    const { container } = render(Modal, { children, onclose })
 
     await fireEvent.click(/** @type {Node} */ (container.querySelector('button')))
 
-    expect(destroyAllModals).toHaveBeenCalled()
+    expect(onclose).toHaveBeenCalled()
   })
 
   it('Should not fire given onclose function when dialog is clicked', async () => {
-    const { container } = render(Modal, { children })
+    const onclose = vi.fn()
+    const { container } = render(Modal, { children, onclose })
 
     await fireEvent.click(/** @type {Node} */ (container.querySelector('.dialog')))
 
-    expect(destroyAllModals).not.toHaveBeenCalled()
+    expect(onclose).not.toHaveBeenCalled()
   })
 
-  it('Should fire given destroyAllModals function when escape key is pressed', async () => {
-    render(Modal, { children })
+  it('Should fire given onclose function when escape key is pressed', async () => {
+    const onclose = vi.fn()
+    render(Modal, { children, onclose })
 
     fireEvent.keyDown(window, { key: 'Escape' })
 
-    expect(destroyAllModals).toHaveBeenCalled()
+    expect(onclose).toHaveBeenCalled()
   })
 
   it('Should not fire given onclose function when key other than escape key is pressed', async () => {
-    render(Modal, { children })
+    const onclose = vi.fn()
+    render(Modal, { children, onclose })
 
     fireEvent.keyDown(window, { key: 'a' })
     fireEvent.keyDown(window, { key: 'Enter' })
     fireEvent.keyDown(window, { key: 'Space' })
 
-    expect(destroyAllModals).not.toHaveBeenCalled()
+    expect(onclose).not.toHaveBeenCalled()
   })
 
   it('Should fire given onscroll function when dialog is scrolled', async () => {
@@ -102,30 +96,4 @@ describe('Modal.svelte', () => {
 
     expect(getByRole('dialog').classList).toContain('tall')
   })
-
-  it('Should not show back button by default', () => {
-    const { queryByLabelText } = render(Modal, { children })
-
-    expect(queryByLabelText('Back')).not.toBeTruthy()
-  })
-
-  it('Should show back button if previous modal was opened', () => {
-    // @ts-ignore
-    vi.mocked(getPreviousModal).mockReturnValueOnce(true)
-
-    const { getByLabelText } = render(Modal, { children })
-
-    expect(getByLabelText('Back')).toBeTruthy()
-  })
-
-  it('Should fire goBackToPreviousModal when back button is clicked', async () => {
-    // @ts-ignore
-    vi.mocked(getPreviousModal).mockReturnValueOnce(true)
-
-    const { getByLabelText } = render(Modal, { children })
-
-    await fireEvent.click(getByLabelText('Back'))
-
-    expect(goBackToPreviousModal).toHaveBeenCalled()
-  })
 })

package/src/tests/routes/components/Title.test.js

@@ -68,12 +68,4 @@ describe('Title.svelte', () => {
 
     expect(queryByText('Some description')).not.toBeTruthy()
   })
-
-  it('Should render as compacter version when compact prop is true', () => {
-    const { queryByAltText, container } = render(Title, { title: { ...title, description: 'Some description' }, compact: true })
-
-    expect(queryByAltText(`Movie poster for '${title.title}'`)).not.toBeTruthy()
-    expect(container.querySelector('.compact')).toBeTruthy()
-    expect(container.querySelector('.faded')).toBeTruthy()
-  })
 })

package/src/tests/setup.js

@@ -56,9 +56,19 @@ const mockSessionStorage = () => {
   }
 }
 
+const mockIntersectionObserver = () => {
+  // @ts-ignore
+  global.IntersectionObserver = vi.fn(() => ({
+    disconnect: vi.fn(),
+    observe: vi.fn(),
+    unobserve: vi.fn(),
+  }))
+}
+
 beforeAll(() => {
   mockLocalStorage()
   mockSessionStorage()
+  mockIntersectionObserver()
 })
 
 beforeEach(() => {

package/src/lib/modal.ts

@@ -1,81 +0,0 @@
-import { mount, unmount } from "svelte"
-import { isHoldingSpecialKey } from "./event"
-import TitleModal from "../routes/components/TitleModal.svelte"
-import type { LinkInjection } from "./types/injection"
-import { getPlayPilotWrapperElement } from "./linkInjection"
-import ParticipantModal from "../routes/components/ParticipantModal.svelte"
-import type { TitleData } from "./types/title"
-import type { ParticipantData } from "./types/participant"
-
-type ModalType = 'title' | 'participant'
-
-type Modal = {
-  injection?: LinkInjection | null
-  component: object
-  type: ModalType
-  data: TitleData | ParticipantData | null
-}
-
-const modals: Modal[] = []
-
-/**
- * Open modal for the corresponding injection by mounting the component and saving it to a variable.
- * Ignore clicks that used modifier keys or that were not left click.
- */
-export function openModal(
-  { type = 'title', event = null, injection = null, data = null }:
-  { type?: ModalType, event?: MouseEvent | null, injection?: LinkInjection | null, data?: TitleData | ParticipantData | null, push?: boolean } = {}): void {
-  if (event && isHoldingSpecialKey(event)) return
-
-  event?.preventDefault()
-
-  if (modals?.length) closeCurrentModal()
-
-  const target = getPlayPilotWrapperElement()
-  const component = type === 'title' ?
-    mount(TitleModal, { target, props: { title: data as TitleData } }) :
-    mount(ParticipantModal, { target, props: { participant: data as ParticipantData } })
-
-  modals.push({ type, injection, data, component })
-}
-
-/** Unmount the last modal is the list of modals but keep it in the list of active modals */
-export function closeCurrentModal(outro: boolean = true): void {
-  if (!modals.length) return
-
-  unmount(modals[modals.length - 1].component, { outro })
-}
-
-/** Unmount the last modal is the list of modals and remove it from the list */
-export function destroyCurrentModal(outro: boolean = true): void {
-  closeCurrentModal(outro)
-
-  modals.pop()
-}
-
-export function destroyAllModals(outro: boolean = true): void {
-  closeCurrentModal(outro)
-
-  while (modals.length > 0) modals.pop()
-}
-
-/** @returns The modal before the currently active modal, if any */
-export function getPreviousModal(): Modal | null {
-  return modals[modals.length - 2] || null
-}
-
-export function goBackToPreviousModal(): void {
-  if (modals.length < 2) return
-
-  destroyCurrentModal()
-
-  // Get the previous modal from the array by removing it, we're re-adding it when calling openModal
-  const previousModal = modals.pop()
-  if (!previousModal) return
-
-  openModal({ ...previousModal })
-}
-
-export function getAllModals(): Modal[] {
-  return modals
-}

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

@@ -1,14 +0,0 @@
-export type ParticipantData = {
-  sid: string
-  name: string
-  birth_date: string
-  death_date: string | null
-  jobs: Job[]
-  image: string | null
-  image_uuid: string | null
-  gender: string
-  character?: string | null
-  bio?: string | null
-}
-
-export type Job = 'actor' | 'writer' | 'director'

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

@@ -1,17 +0,0 @@
-<script lang="ts">
-  interface Props {
-    direction?: 'left' | 'right'
-  }
-
-  const { direction = 'right' }: Props = $props()
-</script>
-
-<svg width="10" height="18" viewBox="0 0 10 18" class="{direction}">
-  <path d="M94.55,59.274a1.517,1.517,0,0,0,0-2.157,1.535,1.535,0,0,0-2.157,0L87,62.509l-5.4-5.392a1.525,1.525,0,0,0-2.157,2.157l6.48,6.48a1.535,1.535,0,0,0,2.157,0Z" transform="translate(-56.054 95.5) rotate(-90)" fill="currentColor" stroke-width="1"/>
-</svg>
-
-<style lang="scss">
-  .left {
-    transform: rotate(180deg);
-  }
-</style>

package/src/routes/components/ListTitle.svelte

@@ -1,172 +0,0 @@
-<script lang="ts">
-  import { playPilotBaseUrl } from '$lib/constants'
-  import { t } from '$lib/localization'
-  import { mergePlaylinks } from '$lib/playlink'
-  import type { TitleData } from '$lib/types/title'
-  import IconArrow from './Icons/IconArrow.svelte'
-  import IconIMDb from './Icons/IconIMDb.svelte'
-  import PlaylinkIcon from './PlaylinkIcon.svelte'
-  import TitlePoster from './TitlePoster.svelte'
-
-  interface Props {
-    title: TitleData
-    // eslint-disable-next-line no-unused-vars
-    onclick?: (event: MouseEvent) => void
-  }
-
-  const { title, onclick = () => null }: Props = $props()
-
-  const playlinks = $derived(mergePlaylinks(title.providers))
-  const limitedPlaylinks = $derived(playlinks.slice(0, 3))
-</script>
-
-<a class="title" href="{playPilotBaseUrl}/{title.type}/{title.slug}" {onclick}>
-  <div class="poster">
-    <TitlePoster {title} width={28} height={42} />
-  </div>
-
-  <div class="content">
-    <div class="heading">{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 class="playlinks">
-      {#each limitedPlaylinks as playlink}
-        <PlaylinkIcon {playlink} onclick={(event) => event.stopPropagation()} />
-      {/each}
-
-      {#if playlinks.length > limitedPlaylinks.length}
-        <span class="more">
-          +{playlinks.length - limitedPlaylinks.length}
-        </span>
-      {/if}
-
-      {#if !playlinks.length}
-        <div class="empty" data-testid="playlinks-empty">
-          {t('Title Unavailable')}
-        </div>
-      {/if}
-    </div>
-  </div>
-
-  <div class="action">
-    <IconArrow />
-  </div>
-</a>
-
-<style lang="scss">
-  .title {
-    appearance: none;
-    display: flex;
-    gap: margin(1);
-    width: 100%;
-    background: var(--playpilot-list-item-background, var(--playpilot-lighter));
-    padding: margin(0.5);
-    border: 0;
-    border-radius: var(--playpilot-list-item-border-radius, margin(0.5));
-    text-decoration: none;
-    font-style: normal !important;
-
-    &:hover {
-      background: var(--playpilot-list-item-hover-background, var(--playpilot-content));
-    }
-
-    &:last-child {
-      border-bottom: 0;
-    }
-  }
-
-  .poster {
-    flex: 0 0 auto;
-    height: auto;
-    align-self: start;
-    width: margin(4);
-    aspect-ratio: 28/42;
-    border-radius: var(--playpilot-detail-image-border-radius, margin(0.5));
-    background: var(--playpilot-detail-image-background, var(--playpilot-content));
-    overflow: hidden;
-  }
-
-  .content {
-    display: flex;
-    flex-direction: column;
-    font-family: inherit;
-    text-align: left;
-    color: var(--playpilot-list-item-text-color, var(--playpilot-text-color));
-    font-size: var(--playpilot-detail-font-size, 14px);
-    line-height: normal;
-  }
-
-  .heading {
-    color: var(--playpilot-list-item-title-text-color, var(--playpilot-detail-title-text-color, var(--playpilot-text-color)));
-    font-weight: var(--playpilot-list-item-title-font-weight, var(--playpilot-detail-title-font-weight, 500));
-  }
-
-  .meta {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0 margin(0.5);
-    margin: margin(0.25) 0 margin(0.5);
-    font-size: var(--playpilot-detail-font-size-small, 12px);
-    font-weight: var(--playpilot-list-item-meta-font-weight, var(--playpilot-detail-title-font-weight, 500));
-    color: var(--playpilot-list-item-meta-text-color, var(--playpilot-text-color-alt));
-
-    > div {
-      text-transform: capitalize;
-    }
-  }
-
-  .imdb {
-    display: flex;
-    align-items: center;
-    gap: margin(0.25);
-  }
-
-  .playlinks {
-    display: flex;
-    flex-wrap: wrap;
-    gap: margin(0.25);
-    margin-top: auto;
-  }
-
-  .more {
-    display: flex;
-    align-items: center;
-    padding: margin(0.25);
-    color: var(--playpilot-list-item-more-text-color, var(--playpilot-text-color-alt));
-    font-size: var(--playpilot-detail-font-size-small, 12px);
-  }
-
-  .empty {
-    margin-top: margin(0.5);
-    opacity: 0.65;
-    font-style: italic;
-    font-size: 0.85em;
-    white-space: initial;
-  }
-
-  .action {
-    display: flex;
-    margin: 0 margin(0.5) 0 auto;
-    padding-left: margin(0.5);
-    align-self: center;
-    color: var(--playpilot-list-item-action-color, var(--playpilot-detail-text-color, var(--playpilot-text-color-alt)));
-
-    &:hover,
-    &:active {
-      color: var(--playpilot-list-item-action-hover-color, var(--playpilot-detail-text-color, var(--playpilot-text-color)));
-    }
-  }
-</style>

package/src/routes/components/Participant.svelte

@@ -1,88 +0,0 @@
-<script lang="ts">
-  import { heading } from '$lib/actions/heading'
-  import { openModal } from '$lib/modal'
-  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)
-
-  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

@@ -1,30 +0,0 @@
-
-<script lang="ts">
-  import Modal from './Modal.svelte'
-  import Participant from './Participant.svelte'
-  import type { ParticipantData } from '$lib/types/participant'
-
-  interface Props {
-    participant: ParticipantData
-  }
-
-  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.',
-  } }: Props = $props()
-
-  let windowWidth = $state(0)
-</script>
-
-<svelte:window bind:innerWidth={windowWidth} />
-
-<Modal closeButtonStyle="flat">
-  <Participant {participant} />
-</Modal>

package/src/routes/components/PlaylinkIcon.svelte

@@ -1,41 +0,0 @@
-<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 = 40, onclick = () => null }: Props = $props()
-
-  const { name, url, logo_url } = $derived(playlink)
-</script>
-
-<a href={url} target="_blank" class="playlink" data-playlink={name} rel="sponsored" aria-label={name} {onclick}>
-  <img src={removeImageUrlPrefix(logo_url)} alt="" 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/Rails/ParticipantsRail.svelte

@@ -1,56 +0,0 @@
-<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>