@playpilot/tpi 8.28.0-beta.1 → 8.29.0-beta.1

package/eslint.config.js

@@ -69,7 +69,6 @@ export default [
   },
   {
     files: ['**/*.ts'],
-    ignores: ['**/*.d.ts'],
     languageOptions: {
       parser: tsParser,
     },

package/package.json

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

package/src/lib/explore.ts

@@ -44,7 +44,8 @@ export function insertExploreIntoNavigation(): boolean {
   if (!config) return false
 
   const { explore_navigation_selector: selector, explore_navigation_label: label, explore_navigation_path: path, explore_navigation_insert_position: insertPosition } = config
-  if (!selector) return false
+
+  if (!selector || !path) return false
 
   // Make sure to remove an element we created if it already exists. Should not be possible under normal circumstances.
   document.querySelector('[data-playpilot-explore-navigation-element]')?.remove()

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

@@ -1,3 +1,5 @@
+import type { InsertPosition } from './position'
+
 export type ConfigResponse = {
   /**
    * Used to exclude URL matching a regex pattern. If a url matches, nothing is executed beyond fetching the config.

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

@@ -6,6 +6,14 @@ export type ParticipantData = {
   jobs: Job[]
   image: string | null
   image_uuid: string | null
+  image_metadata?: {
+    license_name: string
+    license_url: string
+    source_text: string
+    source_url: string
+    author_text: string
+    author_url: string
+  }
   gender: string
   character?: string | null
   bio?: string | null

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

@@ -4,3 +4,5 @@ export type Position = {
 }
 
 export type Alignment = 'bottom' | 'center'
+
+export type InsertPosition = 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | ''

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

@@ -1,6 +1,8 @@
 import type { Campaign } from './campaign'
+import type { ConfigResponse } from './config'
 import type { ConsentOptions } from './consent'
 import type { LinkInjection, LinkInjectionResponse } from './injection'
+import type { InsertPosition } from './position'
 import type { TitleData } from './title'
 
 export type ScriptConfig = {
@@ -17,7 +19,7 @@ export type ScriptConfig = {
   // Selector for the after article playlinks. Will be placed _after_ the given selector.
   after_article_selector?: string
   // Selector to change the insert position of the after article playlinks. Should only be used if no viable selector can be given with `after_article_selector`.
-  after_article_insert_position?: InsertPosition | ''
+  after_article_insert_position?: InsertPosition
   // The language of the page will be inferred from the html `lang` attribute. Can be set manually using this option in the config object.
   language?: string | null
   // Set to the last success external-pages fetch.
@@ -25,7 +27,7 @@ export type ScriptConfig = {
   // Lists all tracked events through the `track()` function.
   tracked_events?: { event: string, payload: Record<string, any> }[]
   // Queued tracking events that were fired before consent was given. These might be fired later if the user consents.
-  queued_tracking_events?: { event: string, title: TitleData | null, payload: Record<strong, any> }[]
+  queued_tracking_events?: { event: string, title: TitleData | null, payload: Record<string, any> }[]
   // Lists all split test identifiers as created by each running split test. Identifiers are only created when a split test is fired.
   split_test_identifiers?: Record<string, number>
   // All link injections as returned from external-pages, with AI and manual injections merged.

package/src/routes/components/Debugger.svelte

@@ -181,7 +181,7 @@
     {#if !useExploreRouter()}
       <button onclick={(() => {
         destroyExplore()
-        window.PlayPilotLinkInjections.config.explore_use_router = !useExploreRouter()
+        window.PlayPilotLinkInjections.config!.explore_use_router = !useExploreRouter()
         insertExplore()
       })}>Toggle new explore</button>
     {/if}

package/src/routes/components/Explore/Routes/ExploreModal.svelte

@@ -2,9 +2,11 @@
   import { fetchSimilarTitles, fetchTitleBySid } from '$lib/api/titles'
   import { mobileBreakpoint } from '$lib/constants'
   import { SplitTest } from '$lib/enums/SplitTest'
+  import { t } from '$lib/localization'
   import { openModal } from '$lib/modal'
   import { getSplitTestVariantName, trackSplitTestView } from '$lib/splitTest'
   import type { TitleData } from '$lib/types/title'
+  import Modal from '../../Modals/Modal.svelte'
 
   interface Props {
     navigate?: (key: string, pushState?: boolean) => void
@@ -12,8 +14,6 @@
 
   const { navigate = () => null }: Props = $props()
 
-  openModalViaRoute()
-
   async function openModalViaRoute(): Promise<void> {
     const currentUrl = new URL(document.location.toString())
     const sid = currentUrl.searchParams.get('sid')
@@ -26,22 +26,73 @@
 
     if (isMobile) trackSplitTestView(SplitTest.Reels)
 
-    try {
-      const [title, railTitles] = (await Promise.allSettled([
-        fetchTitleBySid(sid),
-        fetchSimilarTitles({ sid } as unknown as TitleData)])
-      ).map(promise => (promise.status === 'fulfilled' ? promise.value : null))
-
-      openModal({
-        type,
-        data: [(title as TitleData), ...(railTitles as TitleData[])],
-        props: {
-          onclose: () => navigate('home'),
-          pushState: false,
-        },
-      })
-    } catch {
-      navigate('home')
-    }
+    const [title, railTitles] = (await Promise.allSettled([
+      fetchTitleBySid(sid),
+      fetchSimilarTitles({ sid } as unknown as TitleData)])
+    ).map(promise => (promise.status === 'fulfilled' ? promise.value : null))
+
+    openModal({
+      type,
+      data: [(title as TitleData), ...(railTitles as TitleData[])],
+      props: {
+        onclose: () => navigate('home'),
+        pushState: false,
+      },
+    })
   }
 </script>
+
+{#await openModalViaRoute()}
+  <Modal blur pushState={false}>
+    {#snippet dialog()}
+      <div class="loading">
+        <div class="bar"></div>
+        <div class="bar"></div>
+        <div class="bar"></div>
+      </div>
+    {/snippet}
+  </Modal>
+{:catch}
+  <Modal blur onclose={() => navigate('home')} pushState={false}>
+    <div class="error">
+      {t('An Error Occurred')}
+    </div>
+  </Modal>
+{/await}
+
+<style lang="scss">
+  .loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    gap: margin(0.5);
+  }
+
+  @keyframes animate-bar {
+    to {
+      height: margin(3);
+      opacity: 0.5;
+    }
+  }
+
+  .bar {
+    height: margin(4);
+    width: margin(1);
+    border-radius: margin(0.25);
+    background: white;
+    animation: animate-bar 750ms infinite;
+
+    @for $i from 0 through 2 {
+      &:nth-child(#{$i}) {
+        animation-delay: $i * 250ms;
+      }
+    }
+  }
+
+  .error {
+    padding: margin(2);
+    font-size: 1.25em;
+    color: theme(text-color);
+  }
+</style>

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

@@ -0,0 +1,3 @@
+<svg height="24px" viewBox="0 -960 960 960" width="24px">
+  <path fill="currentColor" d="M430-200h100v-180h60v-184q0-27-28.5-41.5T480-620q-53 0-81.5 14.5T370-564v184h60v180Zm-105 88.5q-73-31.5-127.5-86t-86-127.5Q80-398 80-480.5t31.5-155q31.5-72.5 86-127t127.5-86Q398-880 480.5-880t155 31.5q72.5 31.5 127 86t86 127Q880-563 880-480.5T848.5-325q-31.5 73-86 127.5t-127 86Q563-80 480.5-80T325-111.5Zm381.5-142Q800-347 800-480t-93.5-226.5Q613-800 480-800t-226.5 93.5Q160-613 160-480t93.5 226.5Q347-160 480-160t226.5-93.5ZM523-657q17-17 17-43t-17-43q-17-17-43-17t-43 17q-17 17-17 43t17 43q17 17 43 17t43-17Zm-43 177Z"/>
+</svg>

package/src/routes/components/InjectionPopover.svelte

@@ -10,7 +10,7 @@
   import { trackViaPixel } from '@playpilot/retargeting-tracking'
   import Popover from './Popover.svelte'
   import Title from './Title.svelte'
-  import Participant from './Participant.svelte'
+  import Participant from './Participants/Participant.svelte'
   import TopScroll from './Ads/TopScroll.svelte'
   import Display from './Ads/Display.svelte'
 

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

@@ -59,6 +59,7 @@
 
   onMount(() => {
     const scrollElement = getScrollRoot()
+
     scrollElement.classList.add('playpilot-modal-open')
 
     hasPreviousModal = !!getPreviousModal()
@@ -70,7 +71,7 @@
     requestAnimationFrame(setInitialScrollPosition)
 
     return () => {
-      scrollElement.classList.remove('playpilot-modal-open')
+      if (!document.querySelector('.modal')) scrollElement.classList.remove('playpilot-modal-open')
 
       // Remove the modal entry from above from the browser history. This is done only once for the entire stack.
       // We check for getPreviousModal not because we really care about the previous modal, but to check if all

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

@@ -1,7 +1,7 @@
 
 <script lang="ts">
   import Modal from './Modal.svelte'
-  import Participant from '../Participant.svelte'
+  import Participant from '../Participants/Participant.svelte'
   import type { ParticipantData } from '$lib/types/participant'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { track } from '$lib/tracking'

package/src/routes/components/{Participant.svelte → Participants/Participant.svelte}

@@ -5,11 +5,12 @@
   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'
+  import ParticipantImage from './ParticipantImage.svelte'
+  import ListTitle from '../ListTitle.svelte'
 
   interface Props {
     participant: ParticipantData
@@ -54,13 +55,17 @@
 </script>
 
 <div class="header" class:small>
-  <div class="heading" use:heading={2} id="heading">{name}</div>
+  <ParticipantImage {participant} />
 
-  {#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="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>
 
 <div class="content">
@@ -85,13 +90,22 @@
 
 <style lang="scss">
   .header {
-    padding: margin(4) margin(1) margin(2);
+    --participant-image-size: #{margin(6)};
+    display: grid;
+    grid-template-columns: calc(var(--participant-image-size)) auto;
+    align-items: center;
+    gap: margin(1);
+    padding: margin(3) 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);
 
+    @include desktop {
+      --participant-image-size: #{margin(8)};
+    }
+
     &.small {
       padding: margin(1);
     }
@@ -101,7 +115,7 @@
     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));
+    font-size: clamp(1.25em, 5vw, 1.5em);
     line-height: normal;
     font-style: theme(detail-title-font-style, normal);
 
@@ -109,6 +123,10 @@
       margin: 0 0 margin(0.5);
       font-size: theme(detail-title-small-font-size, margin(1.25));
     }
+
+    .small & {
+      font-size: 1em;
+    }
   }
 
   .dates {

package/src/routes/components/Participants/ParticipantImage.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  import { t } from '$lib/localization'
+  import type { ParticipantData } from '$lib/types/participant'
+  import IconAttribution from '../Icons/IconAttribution.svelte'
+
+  interface Props {
+    participant?: ParticipantData | null
+  }
+
+  const { participant = null }: Props = $props()
+
+  const { image_metadata } = $derived(participant || { image_metadata: null })
+
+  let showAttribution = $state(false)
+
+  function toggleAttribution(event: MouseEvent): void {
+    event.stopImmediatePropagation()
+
+    if ((event.target as HTMLElement).nodeName === 'A') return
+
+    event.preventDefault()
+
+    showAttribution = !showAttribution
+  }
+</script>
+
+<div class="image">
+  {#if participant?.image}
+    <img loading="lazy" src={participant.image} alt="" />
+
+    {#if image_metadata}
+      <button class="attribution-icon" onclick={toggleAttribution}>
+        <IconAttribution />
+      </button>
+    {/if}
+  {/if}
+
+  {#if participant && image_metadata && showAttribution}
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="attribution-overlay" onclick={toggleAttribution}>
+      <a href={image_metadata.source_url} target="_blank" rel="external nofollow noreferrer">{image_metadata.source_text}</a>
+      {t('By')}
+      <a href={image_metadata.author_url} target="_blank" rel="external nofollow noreferrer">{image_metadata.author_text}</a>
+      /
+      <a href={image_metadata.license_url} target="_blank" rel="external nofollow noreferrer">{image_metadata.license_name}</a>
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  $item-width: #{var(--participant-image-size, margin(6))};
+
+  .image {
+    position: relative;
+    display: block;
+    width: $item-width;
+    height: $item-width;
+    border-radius: theme(border-radius);
+    overflow: hidden;
+    background: theme(cast-background, lighter);
+
+    &::before,
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      width: 50%;
+      height: 50%;
+      top: 50%;
+      left: 50%;
+      border-radius: 50%;
+      transform: translateX(-50%) translateY(-50%);
+      background: currentColor;
+      opacity: 0.1;
+    }
+
+    &::after {
+      top: 100%;
+      width: 75%;
+    }
+
+    img {
+      z-index: 1;
+      position: relative;
+      width: 100%;
+      height: auto;
+    }
+  }
+
+  .attribution-icon {
+    z-index: 2;
+    cursor: pointer;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    padding: margin(0.25);
+    margin: 0;
+    border: 0;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.75);
+
+    &:hover {
+      color: white;
+    }
+
+    :global(svg) {
+      display: block;
+    }
+  }
+
+  .attribution-overlay {
+    z-index: 1;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: margin(0.25);
+    background: rgba(0, 0, 0, 0.85);
+    font-size: 11px;
+    line-height: 1.25;
+    white-space: wrap;
+    text-align: left;
+
+    a {
+      color: currentColor;
+    }
+  }
+</style>

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

@@ -8,6 +8,7 @@
   import { track } from '$lib/tracking'
   import type { ParticipantData } from '$lib/types/participant'
   import type { TitleData } from '$lib/types/title'
+  import ParticipantImage from '../Participants/ParticipantImage.svelte'
   import Rail from './Rail.svelte'
 
   interface Props {
@@ -35,8 +36,6 @@
       participantsByOccurrence[participant.sid] = { participant, count }
     }
 
-    // Sort all participants by their occurrences. If a participant did not occur their positioned will be retained
-    // relative to where it was before
     const participantsSortedByCount = Object.values(participantsByOccurrence).sort((a, b) => b.count - a.count)
 
     return participantsSortedByCount.map(({ participant }) => participant)
@@ -51,7 +50,10 @@
 {#await fetchParticipantsForTitle(title)}
   <Rail {heading}>
     {#each { length: 5 }}
-      <div class="participant"></div>
+      <div class="participant">
+        <ParticipantImage />
+        <div class="name">&nbsp;</div>
+      </div>
     {/each}
   </Rail>
 {:then participants}
@@ -59,11 +61,9 @@
     <Rail {heading}>
       {#each orderParticipantsByPageTextOccurrence(participants).slice(0, 15) as participant}
         <button class="participant" data-testid="participant" onclick={event => onclick(event, participant)}>
-          <span class="truncate">{participant.name}</span>
+          <ParticipantImage {participant} />
 
-          {#if participant.character}
-            <div class="character truncate">{participant.character}</div>
-          {/if}
+          <div class="name">{participant.name}</div>
         </button>
       {/each}
     </Rail>
@@ -71,22 +71,25 @@
 {/await}
 
 <style lang="scss">
+  $item-width: #{theme(rail-size-default, margin(6))};
+
   .participant {
+    --participant-image-size: #{$item-width};
     display: flex;
     flex-direction: column;
-    flex: 0 0 10rem;
-    width: 10rem;
-    min-height: margin(3.375); // Matches 54 pixels, the height of a card with both name and character
-    padding: margin(0.5);
-    border: theme(cast-border, 0);
+    flex: 0 0 $item-width;
+    gap: margin(0.5);
+    width: $item-width;
+    padding: 0;
     border-radius: theme(cast-border-radius, border-radius);
-    background: theme(cast-background, lighter);
+    border: 0;
+    background: transparent;
     cursor: pointer;
-    font-family: inherit;
-    text-align: left;
     color: inherit;
+    font-family: inherit;
     font-size: theme(cast-font-size, font-size-small);
     line-height: normal;
+    text-align: center;
     white-space: nowrap;
 
     &:is(button):hover,
@@ -96,13 +99,10 @@
     }
   }
 
-  .character {
-    color: theme(cast-character-text-color, text-color-alt);
-    font-style: italic;
-  }
-
-  .truncate {
+  .name {
+    min-height: 1lh;
     overflow: hidden;
+    color: theme(participant-text-color, text-color-alt) !important;
     text-overflow: ellipsis;
     white-space: nowrap;
   }

package/src/routes/explore/+page.svelte

@@ -35,7 +35,7 @@
 
 <button onclick={(() => {
   destroyExplore()
-  window.PlayPilotLinkInjections.config.explore_use_router = !useExploreRouter()
+  window.PlayPilotLinkInjections.config!.explore_use_router = !useExploreRouter()
   insertExplore()
 })}>Toggle new explore</button>
 
@@ -73,4 +73,3 @@
     background: theme(light);
   }
 </style>
-

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

@@ -120,7 +120,7 @@ describe('explore.js', () => {
 
     it('Should not insert if config object is present but explore_navigation_selector is not given', () => {
       window.PlayPilotLinkInjections.config = {
-        explore_navigation_selector: null,
+        explore_navigation_selector: '',
       }
 
       expect(insertExploreIntoNavigation()).toBe(false)
@@ -136,11 +136,12 @@ describe('explore.js', () => {
       expect(insertExploreIntoNavigation()).toBe(false)
     })
 
-    it('Should insert if explore_navigation_selector is given and selector is valid', () => {
+    it('Should insert if explore_navigation_selector is given and selector and path are valid', () => {
       document.body.innerHTML = '<nav><a></a></nav>'
 
       window.PlayPilotLinkInjections.config = {
         explore_navigation_selector: 'a',
+        explore_navigation_path: '/explore',
       }
 
       expect(insertExploreIntoNavigation()).toBe(true)
@@ -165,6 +166,7 @@ describe('explore.js', () => {
       window.PlayPilotLinkInjections.config = {
         explore_navigation_selector: 'a',
         explore_navigation_label: 'Some label',
+        explore_navigation_path: '/explore',
       }
 
       insertExploreIntoNavigation()

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

@@ -984,7 +984,7 @@ describe('injection.ts', () => {
         injectLinksInDocument(elements, { aiInjections: [injection], manualInjections: [] })
 
         const link = /** @type {HTMLAnchorElement} */ (document.querySelector('a'))
-        expect(link.href).toBe(window.PlayPilotLinkInjections.config.explore_navigation_path + `?route=modal&sid=${injection.title_details?.sid}`)
+        expect(link.href).toBe(window.PlayPilotLinkInjections.config?.explore_navigation_path + `?route=modal&sid=${injection.title_details?.sid}`)
         expect(link.target).not.toBeTruthy()
       })
 

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

@@ -26,6 +26,7 @@ describe('retargeting.ts', () => {
   describe('isPixelAllow', () => {
     it('Should return false if no config object is set', () => {
       vi.mocked(hasConsentedTo).mockImplementation(() => true)
+      // @ts-ignore
       window.PlayPilotLinkInjections.config = null
 
       expect(isRetargetingAllowed()).toBe(false)
@@ -33,6 +34,7 @@ describe('retargeting.ts', () => {
 
     it('Should return false if config object is without allow_retargeting_pixels', () => {
       vi.mocked(hasConsentedTo).mockImplementation(() => true)
+      // @ts-ignore
       window.PlayPilotLinkInjections.config = { something: true }
 
       expect(isRetargetingAllowed()).toBe(false)

package/src/tests/routes/components/{Participant.test.js → Participants/Participant.test.js}

@@ -1,7 +1,7 @@
 import { fireEvent, render, waitFor  } from '@testing-library/svelte'
 import { describe, expect, it, vi, beforeEach } from 'vitest'
 
-import Participant from '../../../routes/components/Participant.svelte'
+import Participant from '../../../../routes/components/Participants/Participant.svelte'
 import { participants, title } from '$lib/fakeData'
 import { fetchTitlesForParticipant } from '$lib/api/participants'
 
@@ -80,4 +80,23 @@ describe('Participant.svelte', () => {
     expect(queryByText('Credits')).not.toBeTruthy()
     expect(container.querySelector('.small')).toBeTruthy()
   })
+
+  it('Should render image if given', async () => {
+    const participantWithImage = { ...participants[0], image: 'some-image.jpg' }
+
+    const { getByRole } = render(Participant, { participant: participantWithImage })
+
+    await waitFor(() => {
+      expect(getByRole('presentation')).toBeTruthy()
+    })
+  })
+
+  it('Should not render image if not given', async () => {
+
+    const { queryByRole } = render(Participant, { participant: participants[0] })
+
+    await waitFor(() => {
+      expect(queryByRole('presentation')).not.toBeTruthy()
+    })
+  })
 })