@playpilot/tpi 5.14.0 → 5.16.0

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>

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>
@@ -56,6 +55,15 @@
     {#if !small}
       <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/routes/components/TrackingPixels.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { hasConsentedTo } from '$lib/consent'
+
   interface Props {
     pixels: string[]
   }
@@ -6,9 +8,11 @@
   const { pixels }: Props = $props()
 </script>
 
-{#each pixels as src}
-  <img {src} alt="" />
-{/each}
+{#if hasConsentedTo('pixels')}
+  {#each pixels as src}
+    <img {src} alt="" />
+  {/each}
+{/if}
 
 <style lang="scss">
   img {

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

@@ -2,6 +2,7 @@ import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest'
 import { fakeFetch } from '../helpers'
 
 import { fetchAds, getFirstAdOfType } from '$lib/ads'
+import { hasConsentedTo } from '$lib/consent'
 import { track } from '$lib/tracking'
 import { TrackingEvent } from '$lib/enums/TrackingEvent'
 
@@ -9,11 +10,17 @@ vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
 }))
 
-describe('$lib/api', () => {
+vi.mock('$lib/consent', () => ({
+  hasConsentedTo: vi.fn(() => true),
+}))
+
+describe('$lib/ads', () => {
   afterEach(() => {
     vi.resetAllMocks()
     // @ts-ignore
     window.PlayPilotLinkInjections = null
+
+    vi.mocked(hasConsentedTo).mockImplementation(() => true)
   })
 
   describe('fetchAds', () => {
@@ -42,6 +49,13 @@ describe('$lib/api', () => {
       expect(global.fetch).not.toHaveBeenCalled()
     })
 
+    it('Should not call fetch if user did not consent to ads', async () => {
+      vi.mocked(hasConsentedTo).mockImplementation(() => false)
+
+      await fetchAds()
+      expect(global.fetch).not.toHaveBeenCalled()
+    })
+
     it('Should fire track event when ads failed to fetch', async () => {
       fakeFetch({ ok: false, status: 505 })
 
@@ -64,5 +78,14 @@ describe('$lib/api', () => {
 
       expect(getFirstAdOfType('top_scroll')).toBe(null)
     })
+
+    it('Should not return ads if valid ad was given but user did not consent to ads', async () => {
+      vi.mocked(hasConsentedTo).mockImplementation(() => false)
+
+      // @ts-ignore
+      window.PlayPilotLinkInjections = { ads: [{ campaign_format: 'top_scroll' }] }
+
+      expect(getFirstAdOfType('top_scroll')).toBe(null)
+    })
   })
 })

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

@@ -0,0 +1,50 @@
+import { describe, it, expect, afterEach } from 'vitest'
+
+import { setConsent, hasConsentedTo } from '$lib/consent'
+
+describe('$lib/consent', () => {
+  afterEach(() => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = null
+  })
+
+  describe('setConsent', () => {
+    it('Should set consent in window object to given values', async () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections = {}
+
+      setConsent({ ads: true, affiliate: true, pixels: true, split_tests: false, tracking: false })
+
+      expect(window.PlayPilotLinkInjections.consents).toEqual({ ads: true, affiliate: true, pixels: true, split_tests: false, tracking: false })
+    })
+  })
+
+  describe('hasConsentedTo', () => {
+    it('Should return values for given keys from window object', async () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections = {
+        consents: { ads: true, affiliate: true, pixels: true, split_tests: false, tracking: false },
+      }
+
+      expect(hasConsentedTo('ads')).toBe(true)
+      expect(hasConsentedTo('affiliate')).toBe(true)
+      expect(hasConsentedTo('pixels')).toBe(true)
+      expect(hasConsentedTo('split_tests')).toBe(false)
+      expect(hasConsentedTo('tracking')).toBe(false)
+    })
+
+    it('Should return true regardless of values if require_consent is false', async () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections = {
+        require_consent: false,
+        consents: { ads: true, affiliate: true, pixels: true, split_tests: false, tracking: false },
+      }
+
+      expect(hasConsentedTo('ads')).toBe(true)
+      expect(hasConsentedTo('affiliate')).toBe(true)
+      expect(hasConsentedTo('pixels')).toBe(true)
+      expect(hasConsentedTo('split_tests')).toBe(true)
+      expect(hasConsentedTo('tracking')).toBe(true)
+    })
+  })
+})

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 () => {