@playpilot/tpi 8.26.1 → 8.27.0

package/package.json

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

package/src/lib/{pixel.ts → retargeting.ts}

@@ -2,7 +2,7 @@ import { RETARGETING_USER_ID_KEY } from '@playpilot/retargeting-tracking'
 import { hasConsentedTo } from './consent'
 import { getUserId } from './user'
 
-export function isPixelAllowed(): boolean {
+export function isRetargetingAllowed(): boolean {
   if (!window.PlayPilotLinkInjections.config?.allow_retargeting_pixels) return false
 
   if (!hasConsentedTo('pixels')) return false

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

@@ -7,7 +7,7 @@
   import type { APIPaginatedResult } from '$lib/types/api'
   import type { ExploreFilter } from '$lib/types/filter'
   import type { TitleData } from '$lib/types/title'
-  import { hasConsentedTo } from '$lib/consent'
+  import { isRetargetingAllowed } from '$lib/retargeting'
   import { t } from '$lib/localization'
   import { trackViaPixel } from '@playpilot/retargeting-tracking'
   import Button from '../../Button.svelte'
@@ -101,7 +101,7 @@
       if (!query) return
 
       track(TrackingEvent.ExploreSearch, null, { query })
-      if (hasConsentedTo('pixels')) trackViaPixel(MetaEvent.SearchQuery, { query })
+      if (isRetargetingAllowed()) trackViaPixel(MetaEvent.SearchQuery, { query })
     }, 100)
   }
 

package/src/routes/components/Genres.svelte

@@ -2,7 +2,7 @@
   import genreData from '$lib/data/genres.json'
   import { MetaEvent, MetaSource } from '$lib/enums/TrackingEvent'
   import { t } from '$lib/localization'
-  import { isPixelAllowed } from '$lib/pixel'
+  import { isRetargetingAllowed } from '$lib/retargeting'
   import { trackViewViaPixel } from '@playpilot/retargeting-tracking'
 
   interface Props {
@@ -20,7 +20,7 @@
   {@const genreName = genreData.find(g => g.slug === genre)?.name}
 
   {#if genreName}
-    <div class="genre" {@attach isPixelAllowed() ? trackViewViaPixel(MetaEvent.GenreInterest, { genre: genreName, source: MetaSource.Card }) : null}>
+    <div class="genre" {@attach isRetargetingAllowed() ? trackViewViaPixel(MetaEvent.GenreInterest, { genre: genreName, source: MetaSource.Card }) : null}>
       {t(genreName)}
     </div>
   {/if}

package/src/routes/components/InjectionPopover.svelte

@@ -6,7 +6,7 @@
   import type { ParticipantData } from '$lib/types/participant'
   import type { LinkInjectionDataType } from '$lib/types/injection'
   import { onMount, setContext } from 'svelte'
-  import { isPixelAllowed } from '$lib/pixel'
+  import { isRetargetingAllowed } from '$lib/retargeting'
   import { trackViaPixel } from '@playpilot/retargeting-tracking'
   import Popover from './Popover.svelte'
   import Title from './Title.svelte'
@@ -32,7 +32,7 @@
   if (type === 'title') track(TrackingEvent.InjectionPopoverView, data as TitleData, { type })
   if (type === 'participant') track(TrackingEvent.InjectionPopoverView, null, { type, participant: (data as ParticipantData).name })
 
-  if (isPixelAllowed() && type === 'title') trackViaPixel(MetaEvent.TitleInterest, { title: (data as TitleData).title, source: MetaSource.Card })
+  if (isRetargetingAllowed() && type === 'title') trackViaPixel(MetaEvent.TitleInterest, { title: (data as TitleData).title, source: MetaSource.Card })
 
   onMount(() => {
     setOffset()

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

@@ -3,9 +3,11 @@
   import TinySlider from 'svelte-tiny-slider'
   import { fade } from 'svelte/transition'
   import { t } from '$lib/localization'
+  import { getFirstAdOfType } from '$lib/api/ads'
   import Modal from './Modal.svelte'
   import IconArrow from '../Icons/IconArrow.svelte'
   import ModalCloseOverlay from './ModalCloseOverlay.svelte'
+  import Display from '../Ads/Display.svelte'
 
   interface Props {
     items: Record<string, any>[]
@@ -17,12 +19,17 @@
 
   const { items, initialIndex = 0, onchange = () => null, onclose = () => null, each, ...restProps }: Props = $props()
 
+  const displayAd = getFirstAdOfType('card')
   const transitionDuration = 300
 
   let slider: TinySlider
   let initialized = $state(false)
+  let availableHeight: number = $state(window.innerHeight)
+  let element: HTMLElement | null = $state(null)
 
   onMount(() => {
+    setAvailableHeight()
+
     requestAnimationFrame(() => {
       if (initialIndex !== 0) slider?.setIndex(initialIndex)
 
@@ -38,11 +45,26 @@
     onchange(index)
     slider.setIndex(index)
   }
+
+  function setAvailableHeight(): void {
+    const modal = document.querySelector('.modal')!
+    availableHeight = window.innerHeight - (element!.getBoundingClientRect().top + modal.scrollTop + parseInt(window.getComputedStyle(modal).paddingBottom))
+  }
 </script>
 
-<Modal blur {onclose} {...restProps}>
+<svelte:window onresize={setAvailableHeight} />
+
+{#snippet prepend()}
+  {#if displayAd}
+    <div class="ad">
+      <Display campaign={displayAd} />
+    </div>
+  {/if}
+{/snippet}
+
+<Modal blur {onclose} {prepend} {...restProps}>
   {#snippet dialog()}
-    <div class="rail-modal" class:initialized style:--transition-duration="{transitionDuration}ms">
+    <div class="rail-modal" class:initialized style:--transition-duration="{transitionDuration}ms" style:--available-height="{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}
@@ -143,20 +165,16 @@
     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(90vh - env(safe-area-inset-top));
+    height: calc(var(--available-height, 90vh) - env(safe-area-inset-top));
     overflow: auto;
     overscroll-behavior: contain;
     transition: box-shadow var(--transition-duration);
 
     @include styled-scrollbar;
 
-    @supports (height: 1dvh) {
-      height: calc(90dvh - env(safe-area-inset-top));
-    }
-
     @include desktop {
       height: auto;
-      max-height: 85vh;
+      max-height: var(--available-height, 85vh);
       border-radius: theme(rail-modal-item-border-radius, border-radius-huge);
     }
 
@@ -212,4 +230,10 @@
   .close {
     --modal-close-overlay-left: calc((100vw - #{$size}) / 2);
   }
+
+  .ad {
+    padding-top: margin(2.5);
+    max-width: $size;
+    margin: 0 auto;
+  }
 </style>

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

@@ -5,7 +5,7 @@
   import { getFirstAdOfType } from '$lib/api/ads'
   import { exploreParentSelector } from '$lib/explore'
   import { onMount, setContext } from 'svelte'
-  import { isPixelAllowed } from '$lib/pixel'
+  import { isRetargetingAllowed } from '$lib/retargeting'
   import { trackViaPixel } from '@playpilot/retargeting-tracking'
   import Modal from './Modal.svelte'
   import Title from '../Title.svelte'
@@ -31,7 +31,7 @@
 
   track(TrackingEvent.TitleModalView, title)
 
-  if (isPixelAllowed()) trackViaPixel(MetaEvent.TitleInterest, { title: title.title, source: MetaSource.Card })
+  if (isRetargetingAllowed()) trackViaPixel(MetaEvent.TitleInterest, { title: title.title, source: MetaSource.Card })
 
   onMount(() => {
     const openTimestamp = Date.now()

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

@@ -5,6 +5,7 @@
   import { t } from '$lib/localization'
   import { track } from '$lib/tracking'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
+  import { getFirstAdOfType } from '$lib/api/ads'
   import TinySlider from 'svelte-tiny-slider'
   import Modal from './Modal.svelte'
   import TitleBackground from '../TitleBackground.svelte'
@@ -14,6 +15,7 @@
   import PlaylinksDisclaimer from '../Playlinks/PlaylinksDisclaimer.svelte'
   import ModalCloseOverlay from './ModalCloseOverlay.svelte'
   import IconArrow from '../Icons/IconArrow.svelte'
+  import Display from '../Ads/Display.svelte'
 
   interface Props {
     titles: TitleData[],
@@ -22,10 +24,15 @@
 
   const { titles, onclose = () => null }: Props = $props()
 
+  const displayAd = getFirstAdOfType('card')
+
   let interval: ReturnType<typeof setInterval> | null = null
+  let availableHeight: number = $state(window.innerHeight)
+  let element: HTMLElement | null = $state(null)
 
   onMount(() => {
     pauseAndPlay(0)
+    setAvailableHeight()
 
     return () => {
       if (interval) clearInterval(interval)
@@ -51,12 +58,25 @@
       window.dispatchEvent(new CustomEvent('playembed', { detail: currentTitle?.embeddable_url } ))
     }, 500)
   }
+
+  function setAvailableHeight(): void {
+    const modal = document.querySelector('.modal')!
+    availableHeight = window.innerHeight - (element!.getBoundingClientRect().top + modal.scrollTop + parseInt(window.getComputedStyle(modal).paddingBottom))
+  }
 </script>
 
-<div class="reel">
-  <Modal>
+<svelte:window onresize={setAvailableHeight} />
+
+{#snippet prepend()}
+  {#if displayAd}
+    <Display campaign={displayAd} />
+  {/if}
+{/snippet}
+
+<div class="reel" style:--available-height="{availableHeight}px">
+  <Modal {prepend}>
     {#snippet dialog()}
-      <div class="slider">
+      <div class="slider" bind:this={element}>
         <TinySlider vertical threshold={50} moveThreshold={10} {onchange}>
           {#snippet children({ currentIndex, setIndex })}
             {#each titles as title, index}
@@ -107,7 +127,7 @@
 
 <style lang="scss">
   $modal-height: calc(100vh - margin(4.5));
-  $item-height: calc($modal-height - margin(5));
+  $item-height: calc(var(--available-height, $modal-height) - margin(5));
 
   .reel {
     --playpilot-detail-background-height: #{$item-height};
@@ -130,10 +150,19 @@
     :global(.modal) {
       padding: 0;
     }
+
+    :global(.prepend) {
+      padding-top: margin(4.5);
+      width: 100%;
+      margin: 0;
+    }
+
+    :global(.display) {
+      border-radius: 0;
+    }
   }
 
   .slider {
-    margin-top: calc(100vh - $modal-height);
     height: $modal-height;
     width: 100%;
   }

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 { hasConsentedTo } from '$lib/consent'
-  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 (hasConsentedTo('pixels')) 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/routes/components/Playlinks/Playlink.svelte

@@ -7,7 +7,7 @@
   import type { PlaylinkData } from '$lib/types/playlink'
   import { trackClickViaPixel, trackViewViaPixel } from '@playpilot/retargeting-tracking'
   import { MetaEvent, MetaSource } from '$lib/enums/TrackingEvent'
-  import { isPixelAllowed } from '$lib/pixel'
+  import { isRetargetingAllowed } from '$lib/retargeting'
 
   interface Props {
     playlink: PlaylinkData
@@ -20,7 +20,7 @@
 
   const { name, url, logo_url, highlighted, cta_text, action_text, pixels, extra_info: { category } } = $derived(playlink)
 
-  const usePixel = $derived(isPixelAllowed() && !highlighted)
+  const usePixel = $derived(isRetargetingAllowed() && !highlighted)
 
   const categoryStrings = {
     AVOD: t('Stream'),

package/src/routes/components/Tracking/TrackingPixelsForTitleDataPerLink.svelte

@@ -2,7 +2,7 @@
   import genreData from '$lib/data/genres.json'
   import { MetaEvent, MetaSource } from '$lib/enums/TrackingEvent'
   import { keyDataAttribute } from '$lib/injection'
-  import { isPixelAllowed } from '$lib/pixel'
+  import { isRetargetingAllowed } from '$lib/retargeting'
   import type { LinkInjection } from '$lib/types/injection'
   import type { TitleData } from '$lib/types/title'
   import { trackViaPixel } from '@playpilot/retargeting-tracking'
@@ -15,7 +15,7 @@
   const { linkInjections }: Props = $props()
 
   onMount(() => {
-    if (!isPixelAllowed()) return
+    if (!isRetargetingAllowed()) return
 
     const observer = new IntersectionObserver((entries) => {
       entries.forEach(entry => {