@playpilot/tpi 8.27.0 → 8.28.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.27.0",
+	"version": "8.28.0-beta.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/api/externalPages.ts

@@ -23,7 +23,7 @@ export async function fetchLinkInjections(
 
   if (!apiToken) throw new Error('No token was provided')
 
-  const apiUrl = `/external-pages/?api-token=${apiToken}&include_title_details=true${isEditorialMode ? '&editorial_mode_enabled=true' : ''}&language=${language}`
+  const apiUrl = `/external-pages/?api-token=${apiToken}&include_title_details=true&include_participant_details=true${isEditorialMode ? '&editorial_mode_enabled=true' : ''}&language=${language}`
   let response: LinkInjectionResponse
 
   if (method === 'POST') {

package/src/routes/components/Modals/ModalCloseOverlay.svelte

@@ -31,6 +31,7 @@
 
 <style lang="scss">
   .back {
+    z-index: 10;
     position: absolute;
     top: margin(1.5);
     left: var(--modal-close-overlay-left, margin(1));
@@ -57,6 +58,7 @@
   .close {
     --playpilot-button-background: transparent;
     --playpilot-button-text-color: white;
+    z-index: 10;
     position: absolute;
     top: margin(1);
     right: margin(1);

package/src/routes/components/Modals/RailModal.svelte

@@ -24,7 +24,7 @@
 
   let slider: TinySlider
   let initialized = $state(false)
-  let availableHeight: number = $state(window.innerHeight)
+  let availableHeight: number | null = $state(null)
   let element: HTMLElement | null = $state(null)
 
   onMount(() => {
@@ -47,6 +47,11 @@
   }
 
   function setAvailableHeight(): void {
+    if (!displayAd) {
+      availableHeight = null
+      return
+    }
+
     const modal = document.querySelector('.modal')!
     availableHeight = window.innerHeight - (element!.getBoundingClientRect().top + modal.scrollTop + parseInt(window.getComputedStyle(modal).paddingBottom))
   }
@@ -64,7 +69,7 @@
 
 <Modal blur {onclose} {prepend} {...restProps}>
   {#snippet dialog()}
-    <div class="rail-modal" class:initialized style:--transition-duration="{transitionDuration}ms" style:--available-height="{availableHeight}px" bind:this={element}>
+    <div class="rail-modal" class:initialized style:--transition-duration="{transitionDuration}ms" style:--available-height={availableHeight && availableHeight + 'px'} bind:this={element}>
       <TinySlider threshold={40} moveThreshold={40} transitionDuration={initialized ? transitionDuration : 0} bind:this={slider}>
         {#snippet children({ currentIndex })}
           {#each items as item, index}
@@ -165,7 +170,7 @@
     border-radius: theme(rail-modal-item-border-radius, border-radius-huge) theme(rail-modal-item-border-radius, border-radius-huge) 0 0;
     background: theme(rail-modal-item-background, light);
     box-shadow: none;
-    height: calc(var(--available-height, 90vh) - env(safe-area-inset-top));
+    height: calc(var(--available-height, 90vh) - margin(1) - env(safe-area-inset-top));
     overflow: auto;
     overscroll-behavior: contain;
     transition: box-shadow var(--transition-duration);

package/src/routes/components/Participant.svelte

@@ -1,160 +1,160 @@
-<script lang="ts">
-  import { onMount } from 'svelte'
-  import { heading } from '$lib/actions/heading'
-  import { fetchTitlesForParticipant } from '$lib/api/participants'
-  import { openModal } from '$lib/modal'
-  import type { ParticipantData } from '$lib/types/participant'
-  import type { TitleData } from '$lib/types/title'
-  import ListTitle from './ListTitle.svelte'
-  import { t } from '$lib/localization'
-  import { isRetargetingAllowed } from '$lib/retargeting'
-  import { trackViaPixel } from '@playpilot/retargeting-tracking'
-  import { MetaEvent } from '$lib/enums/TrackingEvent'
-
-  interface Props {
-    participant: ParticipantData
-    small?: boolean
-  }
-
-  const { participant, small = false }: Props = $props()
-
-  const { name, birth_date, death_date } = $derived(participant)
-
-  const pageSize = 30
-
-  let titles: TitleData[] = $state([])
-  let page = $state(1)
-  let hasMorePages = $state(true)
-  let loading = $state(true)
-
-  onMount(loadMore)
-
-  if (isRetargetingAllowed()) trackViaPixel(MetaEvent.ParticipantView, { participant: participant.name })
-
-  function formatDate(dateString: string): string {
-    const date = new Date(dateString)
-    return date.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })
-  }
-
-  async function loadMore(): Promise<void> {
-    loading = true
-
-    try {
-      const results = await fetchTitlesForParticipant(participant, { page })
-
-      titles = [...titles, ...results]
-      hasMorePages = results?.length >= pageSize
-    } catch {
-      hasMorePages = false
-    } finally {
-      loading = false
-      page += 1
-    }
-  }
-</script>
-
-<div class="header" class:small>
-  <div class="heading" use:heading={2} id="heading">{name}</div>
-
-  {#if birth_date}
-    <p class="dates">
-      {t('Born On')} <strong>{formatDate(birth_date)}</strong>{#if death_date}, {t('Died On')} <strong>{formatDate(death_date)}</strong>{/if}
-    </p>
-  {/if}
-</div>
-
-<div class="content">
-  {#if !small}
-    <div class="heading subheading" use:heading={3} id="credits">{t('Credits')}</div>
-  {/if}
-
-  <div class="list">
-    {#each titles as title}
-      <ListTitle {title} compact={small} onclick={(event) => openModal({ event, data: title })} />
-    {/each}
-
-    {#if loading}
-      {#each { length: 6 }}
-        <div class="skeleton" data-testid="skeleton"></div>
-      {/each}
-    {:else if hasMorePages}
-      <button class="more" onclick={loadMore}>{t('Show More')}</button>
-    {/if}
-  </div>
-</div>
-
-<style lang="scss">
-  .header {
-    padding: margin(4) margin(1) margin(2);
-    font-family: theme(detail-font-family, font-family);
-    font-weight: theme(detail-font-weight, normal);
-    font-size: theme(detail-font-size, font-size-base);
-    line-height: theme(participant-description-line-height, normal);
-    color: theme(detail-text-color, text-color);
-
-    &.small {
-      padding: margin(1);
-    }
-  }
-
-  .heading {
-    margin: 0;
-    font-family: theme(detail-title-font-family, font-family);
-    font-weight: theme(detail-title-font-weight, lighter);
-    font-size: theme(detail-title-font-size, margin(1.5));
-    line-height: normal;
-    font-style: theme(detail-title-font-style, normal);
-
-    &.subheading {
-      margin: 0 0 margin(0.5);
-      font-size: theme(detail-title-small-font-size, margin(1.25));
-    }
-  }
-
-  .dates {
-    margin: margin(0.5) 0 0;
-  }
-
-  .content {
-    padding: 0 margin(1) margin(1);
-    color: theme(detail-text-color, text-color);
-    font-family: theme(detail-font-family, font-family);
-    font-weight: theme(detail-font-weight, normal);
-    font-size: theme(detail-font-size, font-size-base);
-    line-height: normal;
-    font-style: normal;
-
-    ::view-transition-old(content),
-    ::view-transition-new(content) {
-      height: 100%;
-    }
-  }
-
-  .list {
-    display: flex;
-    flex-direction: column;
-    gap: margin(0.5);
-  }
-
-  .skeleton {
-    min-height: margin(7.25);
-    border-radius: theme(playlink-border-radius, border-radius);
-    background: theme(detail-background-light, lighter);
-  }
-
-  .more {
-    cursor: pointer;
-    appearance: none;
-    padding: margin(0.5) margin(1);
-    border: 0;
-    border-radius: theme(participants-load-more-border-radius, border-radius);
-    background: theme(participants-load-more-background, content);
-    color: inherit;
-    font-size: inherit;
-    font-family: inherit;
-
-    &:hover {
-      filter: brightness(1.2);
-    }
-  }
-</style>
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import { heading } from '$lib/actions/heading'
+  import { fetchTitlesForParticipant } from '$lib/api/participants'
+  import { openModal } from '$lib/modal'
+  import type { ParticipantData } from '$lib/types/participant'
+  import type { TitleData } from '$lib/types/title'
+  import ListTitle from './ListTitle.svelte'
+  import { t } from '$lib/localization'
+  import { isRetargetingAllowed } from '$lib/retargeting'
+  import { trackViaPixel } from '@playpilot/retargeting-tracking'
+  import { MetaEvent } from '$lib/enums/TrackingEvent'
+
+  interface Props {
+    participant: ParticipantData
+    small?: boolean
+  }
+
+  const { participant, small = false }: Props = $props()
+
+  const { name, birth_date, death_date } = $derived(participant)
+
+  const pageSize = 30
+
+  let titles: TitleData[] = $state([])
+  let page = $state(1)
+  let hasMorePages = $state(true)
+  let loading = $state(true)
+
+  onMount(loadMore)
+
+  if (isRetargetingAllowed()) trackViaPixel(MetaEvent.ParticipantView, { participant: participant.name })
+
+  function formatDate(dateString: string): string {
+    const date = new Date(dateString)
+    return date.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })
+  }
+
+  async function loadMore(): Promise<void> {
+    loading = true
+
+    try {
+      const results = await fetchTitlesForParticipant(participant, { page })
+
+      titles = [...titles, ...results]
+      hasMorePages = results?.length >= pageSize
+    } catch {
+      hasMorePages = false
+    } finally {
+      loading = false
+      page += 1
+    }
+  }
+</script>
+
+<div class="header" class:small>
+  <div class="heading" use:heading={2} id="heading">{name}</div>
+
+  {#if birth_date}
+    <p class="dates">
+      {t('Born On')} <strong>{formatDate(birth_date)}</strong>{#if death_date}, {t('Died On')} <strong>{formatDate(death_date)}</strong>{/if}
+    </p>
+  {/if}
+</div>
+
+<div class="content">
+  {#if !small}
+    <div class="heading subheading" use:heading={3} id="credits">{t('Credits')}</div>
+  {/if}
+
+  <div class="list">
+    {#each titles as title}
+      <ListTitle {title} compact={small} onclick={(event) => openModal({ event, data: title })} />
+    {/each}
+
+    {#if loading}
+      {#each { length: 6 }}
+        <div class="skeleton" data-testid="skeleton"></div>
+      {/each}
+    {:else if hasMorePages}
+      <button class="more" onclick={loadMore}>{t('Show More')}</button>
+    {/if}
+  </div>
+</div>
+
+<style lang="scss">
+  .header {
+    padding: margin(4) margin(1) margin(2);
+    font-family: theme(detail-font-family, font-family);
+    font-weight: theme(detail-font-weight, normal);
+    font-size: theme(detail-font-size, font-size-base);
+    line-height: theme(participant-description-line-height, normal);
+    color: theme(detail-text-color, text-color);
+
+    &.small {
+      padding: margin(1);
+    }
+  }
+
+  .heading {
+    margin: 0;
+    font-family: theme(detail-title-font-family, font-family);
+    font-weight: theme(detail-title-font-weight, lighter);
+    font-size: theme(detail-title-font-size, margin(1.5));
+    line-height: normal;
+    font-style: theme(detail-title-font-style, normal);
+
+    &.subheading {
+      margin: 0 0 margin(0.5);
+      font-size: theme(detail-title-small-font-size, margin(1.25));
+    }
+  }
+
+  .dates {
+    margin: margin(0.5) 0 0;
+  }
+
+  .content {
+    padding: 0 margin(1) margin(1);
+    color: theme(detail-text-color, text-color);
+    font-family: theme(detail-font-family, font-family);
+    font-weight: theme(detail-font-weight, normal);
+    font-size: theme(detail-font-size, font-size-base);
+    line-height: normal;
+    font-style: normal;
+
+    ::view-transition-old(content),
+    ::view-transition-new(content) {
+      height: 100%;
+    }
+  }
+
+  .list {
+    display: flex;
+    flex-direction: column;
+    gap: margin(0.5);
+  }
+
+  .skeleton {
+    min-height: margin(7.25);
+    border-radius: theme(playlink-border-radius, border-radius);
+    background: theme(detail-background-light, lighter);
+  }
+
+  .more {
+    cursor: pointer;
+    appearance: none;
+    padding: margin(0.5) margin(1);
+    border: 0;
+    border-radius: theme(participants-load-more-border-radius, border-radius);
+    background: theme(participants-load-more-background, content);
+    color: inherit;
+    font-size: inherit;
+    font-family: inherit;
+
+    &:hover {
+      filter: brightness(1.2);
+    }
+  }
+</style>

package/src/tests/lib/api/externalPages.test.js

@@ -40,7 +40,7 @@ describe('$lib/api/externalPages', () => {
 
       expect(response).toBe('Some response')
       expect(api).toHaveBeenCalledWith(
-        '/external-pages/?api-token=a&include_title_details=true&language=en-US&url=https://some-url',
+        '/external-pages/?api-token=a&include_title_details=true&include_participant_details=true&language=en-US&url=https://some-url',
         expect.objectContaining({
           method: 'GET',
         }),

package/src/tests/setup.js

@@ -1,108 +1,108 @@
-import { cleanup } from '@testing-library/svelte'
-import { afterEach, beforeAll, beforeEach, vi } from 'vitest'
-import { fakeFetch } from './helpers'
-
-vi.mock('svelte/transition')
-
-// https://github.com/jsdom/jsdom/issues/3429#issuecomment-1936128876
-const mockAnimations = () => {
-  Element.prototype.animate ??= vi.fn().mockReturnValue({
-    onfinish: null,
-    finished: Promise.resolve(),
-    cancel: vi.fn(),
-    startTime: null,
-    currentTime: null,
-  })
-
-  Element.prototype.getAnimations ??= vi.fn().mockReturnValue([])
-}
-
-const mockLocalStorage = () => {
-  /** @type {Record<string, string>} */
-  let store = {}
-
-  // @ts-ignore
-  ;(window).localStorage = {
-    getItem: function (key) {
-      return store[key] || null
-    },
-    setItem: function (key, value) {
-      store[key] = value.toString()
-    },
-    removeItem: function (key) {
-      delete store[key]
-    },
-    clear: function () {
-      store = {}
-    },
-  }
-}
-
-const mockSessionStorage = () => {
-  /** @type {Record<string, string>} */
-  let store = {}
-
-  // @ts-ignore
-  ;(window).sessionStorage = {
-    getItem: function (key) {
-      return store[key] || null
-    },
-    setItem: function (key, value) {
-      store[key] = value.toString()
-    },
-    removeItem: function (key) {
-      delete store[key]
-    },
-    clear: function () {
-      store = {}
-    },
-  }
-}
-
-export const mockIntersectionObserver = () => {
-  // @ts-ignore
-  global.IntersectionObserver = vi.fn((callback) => ({
-    disconnect: vi.fn(),
-    observe: vi.fn(() => callback([{ isIntersecting: true }])),
-    unobserve: vi.fn(),
-  }))
-}
-
-beforeAll(() => {
-  fakeFetch()
-  mockLocalStorage()
-  mockSessionStorage()
-  mockIntersectionObserver()
-})
-
-beforeEach(() => {
-  // @ts-ignore
-  window.PlayPilotLinkInjections = { token: 'some-token', require_consent: false }
-
-  // Enable all consent
-  // @ts-ignore
-  window.__tcfapi = (command, _version, callback) => {
-    if (command !== 'addEventListener') return
-
-    setTimeout(() => callback({
-      purpose: { consents: { 1: true, 2: true, 7: true, 8: true, 9: true, 10: true } },
-      eventStatus: 'tcloaded',
-    }, true), 0)
-
-    return 1
-  }
-
-  // Reset cookies
-  document.cookie.split(';').forEach((cookie) => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, '=;'))
-
-  window.HTMLElement.prototype.scrollIntoView = vi.fn()
-
-  localStorage.clear()
-  sessionStorage.clear()
-
-  mockAnimations()
-})
-
-afterEach(() => {
-  cleanup()
-})
+import { cleanup } from '@testing-library/svelte'
+import { afterEach, beforeAll, beforeEach, vi } from 'vitest'
+import { fakeFetch } from './helpers'
+
+vi.mock('svelte/transition')
+
+// https://github.com/jsdom/jsdom/issues/3429#issuecomment-1936128876
+const mockAnimations = () => {
+  Element.prototype.animate ??= vi.fn().mockReturnValue({
+    onfinish: null,
+    finished: Promise.resolve(),
+    cancel: vi.fn(),
+    startTime: null,
+    currentTime: null,
+  })
+
+  Element.prototype.getAnimations ??= vi.fn().mockReturnValue([])
+}
+
+const mockLocalStorage = () => {
+  /** @type {Record<string, string>} */
+  let store = {}
+
+  // @ts-ignore
+  ;(window).localStorage = {
+    getItem: function (key) {
+      return store[key] || null
+    },
+    setItem: function (key, value) {
+      store[key] = value.toString()
+    },
+    removeItem: function (key) {
+      delete store[key]
+    },
+    clear: function () {
+      store = {}
+    },
+  }
+}
+
+const mockSessionStorage = () => {
+  /** @type {Record<string, string>} */
+  let store = {}
+
+  // @ts-ignore
+  ;(window).sessionStorage = {
+    getItem: function (key) {
+      return store[key] || null
+    },
+    setItem: function (key, value) {
+      store[key] = value.toString()
+    },
+    removeItem: function (key) {
+      delete store[key]
+    },
+    clear: function () {
+      store = {}
+    },
+  }
+}
+
+export const mockIntersectionObserver = () => {
+  // @ts-ignore
+  global.IntersectionObserver = vi.fn((callback) => ({
+    disconnect: vi.fn(),
+    observe: vi.fn(() => callback([{ isIntersecting: true }])),
+    unobserve: vi.fn(),
+  }))
+}
+
+beforeAll(() => {
+  fakeFetch()
+  mockLocalStorage()
+  mockSessionStorage()
+  mockIntersectionObserver()
+})
+
+beforeEach(() => {
+  // @ts-ignore
+  window.PlayPilotLinkInjections = { token: 'some-token', require_consent: false }
+
+  // Enable all consent
+  // @ts-ignore
+  window.__tcfapi = (command, _version, callback) => {
+    if (command !== 'addEventListener') return
+
+    setTimeout(() => callback({
+      purpose: { consents: { 1: true, 2: true, 7: true, 8: true, 9: true, 10: true } },
+      eventStatus: 'tcloaded',
+    }, true), 0)
+
+    return 1
+  }
+
+  // Reset cookies
+  document.cookie.split(';').forEach((cookie) => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, '=;'))
+
+  window.HTMLElement.prototype.scrollIntoView = vi.fn()
+
+  localStorage.clear()
+  sessionStorage.clear()
+
+  mockAnimations()
+})
+
+afterEach(() => {
+  cleanup()
+})