@playpilot/tpi 5.15.0 → 5.16.2

package/src/routes/components/Tabs.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  interface Option {
+    label: string
+    value: string
+  }
+
+  interface Props {
+    options: Option[]
+  }
+
+  const { options }: Props = $props()
+
+  let active = $state(options[0]?.value)
+</script>
+
+<div class="tabs">
+  {#each options as { label, value }}
+    <button class="tab" class:active={value === active} onclick={() => active = value}>{label}</button>
+  {/each}
+</div>
+
+<style lang="scss">
+  .tabs {
+    display: flex;
+    gap: margin(0.5);
+  }
+
+  .tab {
+    cursor: pointer;
+    appearance: none;
+    background: transparent;
+    padding: margin(0.25) margin(0.5);
+    border: 1px solid currentColor;
+    border-radius: var(--playpilot-tabs-border-radius, margin(0.25));
+    transition: opacity 100ms;
+    font-family: inherit;
+    font-weight: var(--playpilot-tabs-font-weight, 500);
+    color: var(--playpilot-tabs-text-color, var(--playpilot-detail-text-color, var(--playpilot-text-color-alt)));
+    font-size: inherit;
+
+    &.active,
+    &:hover {
+      background: var(--playpilot-tabs-background-active, var(--playpilot-content));
+      color: var(--playpilot-tabs-text-color-active, var(--playpilot-detail-text-color, var(--playpilot-text-color)));
+    }
+  }
+</style>

package/src/routes/components/Title.svelte

@@ -3,10 +3,14 @@
   import Playlinks from './Playlinks.svelte'
   import Description from './Description.svelte'
   import IconIMDb from './Icons/IconIMDb.svelte'
+  import ParticipantsRail from './Rails/ParticipantsRail.svelte'
+  import SimilarRail from './Rails/SimilarRail.svelte'
+  import TitlePoster from './TitlePoster.svelte'
   import { t } from '$lib/localization'
   import type { TitleData } from '$lib/types/title'
   import { heading } from '$lib/actions/heading'
   import { removeImageUrlPrefix } from '$lib/image'
+  import { participants } from '$lib/fakeData'
 
   interface Props {
     title: TitleData
@@ -22,13 +26,8 @@
 
 <div class="content" class:small data-playpilot-link-injections-title>
   <div class="header">
-    <div class="top">
-      <img
-        class="poster"
-        class:loaded={posterLoaded}
-        src={removeImageUrlPrefix(title.standing_poster)}
-        alt="Movie poster for '{title.title}'"
-        onload={() => posterLoaded = true} />
+    <div class="poster" class:loaded={posterLoaded}>
+      <TitlePoster {title} onload={() => posterLoaded = true} />
     </div>
 
     <div class="heading" use:heading={2} class:truncate={small} id="title">{title.title}</div>
@@ -53,9 +52,18 @@
   <div class="main">
     <Playlinks playlinks={title.providers} {title} />
 
-    {#if !small}
+    {#if !small && title.description}
       <Description text={title.description} blurb={title.blurb} />
     {/if}
+
+    <!-- Temporarily not available on production as there is not yet an API endpoint for either -->
+    {#if process.env.NODE_ENV !== 'production'}
+      {#if true || title.participants?.length}
+        <ParticipantsRail participants={participants} />
+      {/if}
+
+      <SimilarRail />
+    {/if}
   </div>
 </div>
 
@@ -103,14 +111,14 @@
     }
 
     &.small {
-      font-size: var(--playpilot-detail-font-size, 12px);
+      font-size: var(--playpilot-detail-font-size-small, 12px);
       line-height: 1.45;
-      padding-bottom: margin(0.5);
+      padding-bottom: margin(1);
     }
   }
 
   .header {
-    padding: margin(2) 0 margin(1);
+    padding: margin(3) 0 margin(1);
     background: transparent;
 
     .small & {
@@ -118,12 +126,6 @@
     }
   }
 
-  .top {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-  }
-
   .poster {
     display: block;
     width: margin(4.5);
@@ -132,6 +134,7 @@
     border-radius: var(--playpilot-detail-image-border-radius, margin(0.5));
     background: var(--playpilot-detail-image-background, var(--playpilot-content));
     box-shadow: var(--playpilot-detail-image-shadow, var(--playpilot-shadow));
+    overflow: hidden;
     opacity: 0;
 
     &.loaded {

package/src/routes/components/TitleModal.svelte

@@ -10,11 +10,11 @@
   import { getFirstAdOfType } from '$lib/ads'
 
   interface Props {
-    onclose: () => void,
     title: TitleData
+    initialScrollPosition?: number
   }
 
-  const { onclose, title }: Props = $props()
+  const { title, initialScrollPosition = 0 }: Props = $props()
 
   const topScrollAd = getFirstAdOfType('top_scroll')
   const displayAd = getFirstAdOfType('card')
@@ -49,6 +49,6 @@
   {/if}
 {/snippet}
 
-<Modal {onclose} {onscroll} prepend={displayAd ? prepend : null} bubble={topScrollAd ? bubble : null} tall>
+<Modal {onscroll} {initialScrollPosition} prepend={displayAd ? prepend : null} bubble={topScrollAd ? bubble : null} tall>
   <Title {title} />
 </Modal>

package/src/routes/components/TitlePoster.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { imagePlaceholderDataUrl } from '$lib/constants'
+  import { removeImageUrlPrefix } from '$lib/image'
+  import type { TitleData } from '$lib/types/title'
+
+  interface Props {
+    title: TitleData
+    width?: number
+    height?: number
+    onload?: () => void
+  }
+
+  const { title, width = 96, height = 144, onload = () => null }: Props = $props()
+</script>
+
+<img
+  src={removeImageUrlPrefix(title.standing_poster)}
+  alt="Movie poster for '{title.title}'"
+  {width}
+  {height}
+  onerror={({ target }) => (target as HTMLImageElement).src = imagePlaceholderDataUrl}
+  {onload} />
+
+<style lang="scss">
+  img {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+</style>

package/src/tests/lib/linkInjection.test.js

@@ -4,6 +4,7 @@ import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
 import { injectLinksInDocument, clearLinkInjections, clearLinkInjection, getLinkInjectionElements, insertAfterArticlePlaylinks, getLinkInjectionsParentElement, isAvailableAsManualInjection, filterRemovedAndInactiveInjections, isEquivalentInjection, filterInvalidInTextInjections, filterInvalidAfterArticleInjections, isValidInjection, isValidPlaylinkType, removePlayPilotTitleLinks, trackLinkIntersection } from '$lib/linkInjection'
 import { mount, unmount } from 'svelte'
 import { fakeFetch, generateInjection } from '../helpers'
+import { openModal } from '$lib/modal'
 import { track } from '$lib/tracking'
 
 vi.mock('svelte', () => ({
@@ -11,6 +12,13 @@ vi.mock('svelte', () => ({
   unmount: vi.fn(),
 }))
 
+vi.mock('$lib/modal', () => ({
+  openModal: vi.fn(),
+  destroyAllModals: vi.fn(),
+  getPreviousModal: vi.fn(),
+  goBackToPreviousModal: vi.fn(),
+}))
+
 vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
 }))
@@ -311,7 +319,7 @@ describe('linkInjection.js', () => {
       expect(() => injectLinksInDocument(elements, { aiInjections: linkInjections, manualInjections: [] })).not.toThrow()
     })
 
-    it('Should mount modal when clicked', async () => {
+    it('Should open modal when link is clicked', async () => {
       document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
 
       const elements = Array.from(document.body.querySelectorAll('p'))
@@ -322,27 +330,7 @@ describe('linkInjection.js', () => {
       const link = /** @type {HTMLAnchorElement} */ (document.querySelector('a'))
       await fireEvent.click(link)
 
-      expect(mount).toHaveBeenCalled()
-    })
-
-    it('Should not mount modal multiple times if modal is already open', async () => {
-      const sentence = 'This is a sentence with an injection.'
-      document.body.innerHTML = `<p>${sentence}</p>`
-
-      const elements = Array.from(document.body.querySelectorAll('p'))
-
-      const linkInjections = [
-        generateInjection(sentence, 'a sentence'),
-        generateInjection(sentence, 'an injection'),
-      ]
-
-      injectLinksInDocument(elements, { aiInjections: linkInjections, manualInjections: [] })
-
-      const links = document.querySelectorAll('a')
-      await fireEvent.click(links[0])
-      await fireEvent.click(links[1])
-
-      expect(mount).toHaveBeenCalledTimes(1)
+      expect(openModal).toHaveBeenCalled()
     })
 
     it('Should not fire given onclick function when clicked with modifier keys or not left click', async () => {

package/src/tests/lib/modal.test.js

@@ -0,0 +1,148 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { closeCurrentModal, destroyAllModals, destroyCurrentModal, getAllModals, getPreviousModal, goBackToPreviousModal, openModal } from '$lib/modal'
+import { linkInjections, title } from '$lib/fakeData'
+import { mount, unmount } from 'svelte'
+import ParticipantModal from '../../routes/components/ParticipantModal.svelte'
+import TitleModal from '../../routes/components/TitleModal.svelte'
+
+vi.mock('svelte', () => ({
+  mount: vi.fn(),
+  unmount: vi.fn(),
+}))
+
+const modal = {
+  injection: linkInjections[0],
+  data: title,
+  type: 'title',
+}
+
+describe('modal.js', () => {
+  beforeEach(() => {
+    destroyAllModals()
+    vi.resetAllMocks()
+  })
+
+  describe('openModal', () => {
+    it('Should mount modal', () => {
+      // @ts-ignore
+      openModal(modal)
+
+      expect(mount).toHaveBeenCalledWith(TitleModal, expect.any(Object))
+    })
+
+    it('Should mount modal for participants', () => {
+      // @ts-ignore
+      openModal({ ...modal, type: 'participant' })
+
+      expect(mount).toHaveBeenCalledWith(ParticipantModal, expect.any(Object))
+    })
+
+    it('Should not mount modal if modifier key was present in event', () => {
+      // @ts-ignore
+      openModal({ ...modal, event: { ctrlKey: true } })
+
+      expect(mount).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('closeCurrentModal', () => {
+    it('Should unmount modal without removing it from list', () => {
+      // @ts-ignore
+      openModal(modal)
+      closeCurrentModal()
+
+      expect(unmount).toHaveBeenCalled()
+      expect(getAllModals()).toHaveLength(1)
+    })
+  })
+
+  describe('destroyCurrentModal', () => {
+    it('Should unmount modal and remove lastest entry from list', () => {
+      // @ts-ignore
+      openModal(modal)
+      destroyCurrentModal()
+
+      expect(unmount).toHaveBeenCalled()
+      expect(getAllModals()).toHaveLength(0)
+    })
+  })
+
+  describe('destroyAllModals', () => {
+    it('Should unmount current modal and remove all modals from list', () => {
+      // @ts-ignore
+      openModal(modal)
+      // @ts-ignore
+      openModal(modal)
+      // @ts-ignore
+      openModal(modal)
+      // @ts-ignore
+      openModal(modal)
+
+      destroyAllModals()
+
+      expect(unmount).toHaveBeenCalled()
+      expect(getAllModals()).toHaveLength(0)
+    })
+  })
+
+  describe('getPreviousModal', () => {
+    it('Should return the modal before the last', () => {
+      // @ts-ignore
+      openModal({ ...modal, type: 'participant' })
+      // @ts-ignore
+      openModal({ ...modal, type: 'title' })
+
+      // @ts-ignore
+      expect(getPreviousModal().type).toBe('participant')
+    })
+
+    it('Should return null if there is no previous modal', () => {
+      // @ts-ignore
+      openModal({ ...modal, type: 'participant' })
+
+      // @ts-ignore
+      expect(getPreviousModal()).toBeNull()
+    })
+
+    it('Should return null if there are no modals at all', () => {
+      // @ts-ignore
+      expect(getPreviousModal()).toBeNull()
+    })
+  })
+
+  describe('goBackToPreviousModal', () => {
+    it('Should destroy the current modal and mount the previous modal', () => {
+      // @ts-ignore
+      openModal({ ...modal, type: 'participant', data: {  ...title, title: 'Previous modal' } })
+      // @ts-ignore
+      openModal({ ...modal, type: 'title' })
+
+      vi.resetAllMocks()
+
+      goBackToPreviousModal()
+
+      expect(unmount).toHaveBeenCalled()
+      expect(mount).toHaveBeenCalledWith(
+        ParticipantModal,
+        expect.objectContaining({
+          props: expect.objectContaining({
+            participant: expect.objectContaining({ title: 'Previous modal' }),
+          }),
+        }),
+      )
+    })
+  })
+
+  describe('getAllModals', () => {
+    it('Should return all current modals', () => {
+      // @ts-ignore
+      openModal(modal)
+      // @ts-ignore
+      openModal(modal)
+      // @ts-ignore
+      openModal(modal)
+
+      expect(getAllModals()).toHaveLength(3)
+    })
+  })
+})

package/src/tests/lib/playlink.test.js

@@ -4,12 +4,12 @@ import { mergePlaylinks } from '$lib/playlink'
 describe('$lib/playlink', () => {
   describe('mergePlaylinks', () => {
     it('Should return an array with RENT and BUY categories of the same provider as one entry', () => {
-      /** @type {PlaylinkData[]} */
+      /** @type {import('$lib/types/playlink').PlaylinkData[]} */
       const playlinks = [{
         sid: '1',
         name: 'Netflix',
         url: '',
-        logo_url: '',
+        logo_url: 'a',
         extra_info: {
           category: 'RENT',
         },
@@ -17,7 +17,7 @@ describe('$lib/playlink', () => {
         sid: '2',
         name: 'Netflix',
         url: '',
-        logo_url: '',
+        logo_url: 'a',
         extra_info: {
           category: 'BUY',
         },
@@ -28,12 +28,12 @@ describe('$lib/playlink', () => {
     })
 
     it('Should not merge playlinks if they do not share the same name', () => {
-      /** @type {PlaylinkData[]} */
+      /** @type {import('$lib/types/playlink').PlaylinkData[]} */
       const playlinks = [{
         sid: '1',
         name: 'Netflix',
         url: '',
-        logo_url: '',
+        logo_url: 'a',
         extra_info: {
           category: 'RENT',
         },
@@ -41,7 +41,7 @@ describe('$lib/playlink', () => {
         sid: '2',
         name: 'Apple',
         url: '',
-        logo_url: '',
+        logo_url: 'a',
         extra_info: {
           category: 'BUY',
         },
@@ -51,12 +51,12 @@ describe('$lib/playlink', () => {
     })
 
     it('Should not merge playlinks if one of the categories is not RENT or BUY', () => {
-      /** @type {PlaylinkData[]} */
+      /** @type {import('$lib/types/playlink').PlaylinkData[]} */
       const playlinks = [{
         sid: '1',
         name: 'Netflix',
         url: '',
-        logo_url: '',
+        logo_url: 'a',
         extra_info: {
           category: 'RENT',
         },
@@ -64,7 +64,7 @@ describe('$lib/playlink', () => {
         sid: '2',
         name: 'Netflix',
         url: '',
-        logo_url: '',
+        logo_url: 'a',
         extra_info: {
           category: 'SVOD',
         },
@@ -73,8 +73,23 @@ describe('$lib/playlink', () => {
       expect(mergePlaylinks(playlinks)).toHaveLength(2)
     })
 
+    it('Should filter out playlinks without logos', () => {
+      /** @type {import('$lib/types/playlink').PlaylinkData[]} */
+      const playlinks = [{
+        sid: '1',
+        name: 'Netflix',
+        url: '',
+        logo_url: '',
+        extra_info: {
+          category: 'RENT',
+        },
+      }]
+
+      expect(mergePlaylinks(playlinks)).toHaveLength(0)
+    })
+
     it('Should return an empty array if given', () => {
-      /** @type {PlaylinkData[]} */
+      /** @type {import('$lib/types/playlink').PlaylinkData[]} */
       const playlinks = []
       expect(mergePlaylinks(playlinks)).toEqual([])
     })

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

@@ -0,0 +1,84 @@
+import { fireEvent, render  } from '@testing-library/svelte'
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+
+import ListTitle from '../../../routes/components/ListTitle.svelte'
+import { title } from '$lib/fakeData'
+
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+vi.mock('svelte', async (importActual) => ({
+  ...(await importActual()),
+  getContext: vi.fn(),
+}))
+
+describe('ListTitle.svelte', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+  })
+
+  it('Should render the given image', () => {
+    const { getByAltText } = render(ListTitle, { title })
+
+    expect(getByAltText(`Movie poster for '${title.title}'`)).toBeTruthy()
+  })
+
+  it('Should render the given info', () => {
+    const { getByText } = render(ListTitle, { title })
+
+    expect(getByText(title.title)).toBeTruthy()
+    expect(getByText(title.imdb_score)).toBeTruthy()
+    expect(getByText(title.year)).toBeTruthy()
+    expect(getByText(title.description)).toBeTruthy()
+  })
+
+  it('Should not have small class by default', () => {
+    const { container } = render(ListTitle, { title })
+
+    expect(container.querySelector('.small')).not.toBeTruthy()
+  })
+
+  it('Should fire the given onclick function when clicked', async () => {
+    const onclick = vi.fn()
+    const { getByText } = render(ListTitle, { title, onclick })
+
+    await fireEvent.click(getByText(title.title))
+
+    expect(onclick).toHaveBeenCalled()
+  })
+
+  describe('Playlinks', () => {
+    const playlinks = [
+      { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
+      { name: 'Some other playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
+    ]
+
+    it('Should render playlinks', () => {
+      // @ts-ignore
+      const { queryByAltText, queryByText } = render(ListTitle, { title: { ...title, description: 'Some description', providers: playlinks } })
+
+      expect(queryByAltText('Some playlink') || queryByText('Some playlink')).toBeTruthy()
+      expect(queryByAltText('Some other playlink') || queryByText('Some other playlink')).toBeTruthy()
+    })
+
+    it('Should limit the number of shown playlinks', () => {
+      // @ts-ignore
+      const { container, getByText } = render(ListTitle, { title: { ...title, description: 'Some description', providers: [...playlinks, ...playlinks] } })
+
+      expect(container.querySelectorAll('.playlink')).toHaveLength(3)
+      expect(getByText('+1')).toBeTruthy()
+    })
+
+    it('Should not fire the given onclick function when playlink is clicked', async () => {
+      const onclick = vi.fn()
+      // @ts-ignore
+      const { container } = render(ListTitle, { title: { ...title, providers: playlinks }, onclick })
+
+      // @ts-ignore
+      await fireEvent.click(container.querySelector('.playlink'))
+
+      expect(onclick).not.toHaveBeenCalled()
+    })
+  })
+})

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

@@ -1,57 +1,63 @@
 import { render, fireEvent } from '@testing-library/svelte'
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, 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 onclose function when backdrop is clicked', async () => {
-    const onclose = vi.fn()
-    const { container } = render(Modal, { children, onclose })
+  it('Should fire given destroyAllModals function when backdrop is clicked', async () => {
+    const { container } = render(Modal, { children })
 
     await fireEvent.click(/** @type {Node} */ (container.querySelector('.backdrop')))
 
-    expect(onclose).toHaveBeenCalled()
+    expect(destroyAllModals).toHaveBeenCalled()
   })
 
-  it('Should fire given onclose function when close button is clicked', async () => {
-    const onclose = vi.fn()
-    const { container } = render(Modal, { children, onclose })
+  it('Should fire destroyAllModals function when close button is clicked', async () => {
+    const { container } = render(Modal, { children })
 
     await fireEvent.click(/** @type {Node} */ (container.querySelector('button')))
 
-    expect(onclose).toHaveBeenCalled()
+    expect(destroyAllModals).toHaveBeenCalled()
   })
 
   it('Should not fire given onclose function when dialog is clicked', async () => {
-    const onclose = vi.fn()
-    const { container } = render(Modal, { children, onclose })
+    const { container } = render(Modal, { children })
 
     await fireEvent.click(/** @type {Node} */ (container.querySelector('.dialog')))
 
-    expect(onclose).not.toHaveBeenCalled()
+    expect(destroyAllModals).not.toHaveBeenCalled()
   })
 
-  it('Should fire given onclose function when escape key is pressed', async () => {
-    const onclose = vi.fn()
-    render(Modal, { children, onclose })
+  it('Should fire given destroyAllModals function when escape key is pressed', async () => {
+    render(Modal, { children })
 
     fireEvent.keyDown(window, { key: 'Escape' })
 
-    expect(onclose).toHaveBeenCalled()
+    expect(destroyAllModals).toHaveBeenCalled()
   })
 
   it('Should not fire given onclose function when key other than escape key is pressed', async () => {
-    const onclose = vi.fn()
-    render(Modal, { children, onclose })
+    render(Modal, { children })
 
     fireEvent.keyDown(window, { key: 'a' })
     fireEvent.keyDown(window, { key: 'Enter' })
     fireEvent.keyDown(window, { key: 'Space' })
 
-    expect(onclose).not.toHaveBeenCalled()
+    expect(destroyAllModals).not.toHaveBeenCalled()
   })
 
   it('Should fire given onscroll function when dialog is scrolled', async () => {
@@ -96,4 +102,30 @@ 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()
+  })
 })