@playpilot/tpi 5.11.0-beta.participants.2 → 5.11.0

package/package.json

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

package/src/lib/fakeData.ts

@@ -1,5 +1,4 @@
 import type { LinkInjection } from "./types/injection"
-import type { ParticipantData } from "./types/participant"
 import type { TitleData } from "./types/title"
 
 export const title: TitleData = {
@@ -70,72 +69,3 @@ export const linkInjections: LinkInjection[] = [{
   playpilot_url: 'https://playpilot.com/movie/example-4/',
   key: 'some-key-4',
 }]
-
-export const participants: ParticipantData[] = [
-  {
-    sid: 'pr5C5W',
-    name: 'James Franco',
-    birth_date: '1978-04-19',
-    death_date: null,
-    jobs: ['actor'],
-    image: null,
-    image_uuid: null,
-    gender: 'Male',
-    character: 'Will Rodman (archive footage) (uncredited)',
-  },
-  {
-    sid: 'pr8bZm',
-    name: 'Thomas Rosales Jr.',
-    birth_date: '1948-02-03',
-    death_date: null,
-    jobs: ['actor'],
-    image: null,
-    image_uuid: null,
-    gender: 'Male',
-    character: 'Old Man',
-  },
-  {
-    sid: 'pr45Dp',
-    name: 'Barack Obama',
-    birth_date: '1961-08-04',
-    death_date: null,
-    jobs: ['actor'],
-    image: null,
-    image_uuid: null,
-    gender: 'Male',
-    character: 'Self (archive footage) (uncredited)',
-  },
-  {
-    sid: 'pr6DnN',
-    name: 'Gary Oldman',
-    birth_date: '1958-03-21',
-    death_date: null,
-    jobs: ['actor'],
-    image: null,
-    image_uuid: null,
-    gender: 'Male',
-    character: 'Dreyfus',
-  },
-  {
-    sid: 'pr7GK8',
-    name: 'Michael Papajohn',
-    birth_date: '1964-11-07',
-    death_date: null,
-    jobs: ['actor'],
-    image: null,
-    image_uuid: null,
-    gender: 'Male',
-    character: 'Cannon-Gunner',
-  },
-  {
-    sid: 'pr88KG',
-    name: 'Judy Greer',
-    birth_date: '1975-07-20',
-    death_date: null,
-    jobs: ['actor'],
-    image: null,
-    image_uuid: null,
-    gender: 'Female',
-    character: 'Cornelia',
-  },
-]

package/src/lib/linkInjection.ts

@@ -1,4 +1,5 @@
 import { mount, unmount } from 'svelte'
+import TitleModal from '../routes/components/TitleModal.svelte'
 import TitlePopover from '../routes/components/TitlePopover.svelte'
 import AfterArticlePlaylinks from '../routes/components/AfterArticlePlaylinks.svelte'
 import { cleanPhrase, findNumberOfMatchesInString, findShortestMatchBetweenPhrases, findTextNodeContaining, getIndexOfPhraseInElement, getNumberOfLeadingAndTrailingSpaces, isNodeInLink, replaceBetween, replaceStartingFrom } from './text'
@@ -8,7 +9,6 @@ import { playFallbackViewTransition } from './viewTransition'
 import { prefersReducedMotion } from 'svelte/motion'
 import { getNumberOfOccurrencesInArray } from './array'
 import { mobileBreakpoint } from './constants'
-import { destroyAllModals, openModal } from './modal'
 
 const keyDataAttribute = 'data-playpilot-injection-key'
 const keySelector = `[${keyDataAttribute}]`
@@ -16,6 +16,7 @@ const keySelector = `[${keyDataAttribute}]`
 let currentlyHoveredInjection: EventTarget | null = null
 let activePopoverInsertedComponent: object | null = null
 let afterArticlePlaylinkInsertedComponent: object | null = null
+let activeModalInsertedComponent: object | null = null
 
 /**
  * Return a list of all valid text containing elements that may get injected into.
@@ -347,7 +348,7 @@ function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
 
     playFallbackViewTransition(() => {
       destroyLinkPopover(false)
-      openModal({ event, injection, data: injection.title_details })
+      openLinkModal(event, injection)
     }, !prefersReducedMotion.current && window.innerWidth >= mobileBreakpoint && !window.matchMedia("(pointer: coarse)").matches)
   })
 
@@ -379,6 +380,29 @@ function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
   })
 }
 
+/**
+ * Open modal for the corresponding injection by mounting the component and saving it to a variable.
+ * Ignore clicks that used modifier keys or that were not left click.
+ */
+function openLinkModal(event: MouseEvent, injection: LinkInjection): void {
+  if (isHoldingSpecialKey(event)) return
+  if (activeModalInsertedComponent) return
+
+  event.preventDefault()
+
+  activeModalInsertedComponent = mount(TitleModal, { target: getPlayPilotWrapperElement(), props: { title: injection.title_details!, onclose: destroyLinkModal } })
+}
+
+/**
+ * Unmount the modal, removing it from the dom
+ */
+function destroyLinkModal(outro: boolean = true): void {
+  if (!activeModalInsertedComponent) return
+
+  unmount(activeModalInsertedComponent, { outro })
+  activeModalInsertedComponent = null
+}
+
 /**
  * When a link is hovered, it is shown as a popover. The component is mounted when a mouse enters the link,
  * and removed when clicked or on mouseleave.
@@ -436,13 +460,7 @@ export function insertAfterArticlePlaylinks(elements: HTMLElement[], injections:
   target.dataset.playpilotAfterArticlePlaylinks = 'true'
   insertElement.insertAdjacentElement(insertPosition, target)
 
-  afterArticlePlaylinkInsertedComponent = mount(AfterArticlePlaylinks, {
-    target,
-    props: {
-      linkInjections: injections,
-      onclickmodal: (event, injection) => openModal({ event, injection, data: injection.title_details })
-    }
-  })
+  afterArticlePlaylinkInsertedComponent = mount(AfterArticlePlaylinks, { target, props: { linkInjections: injections, onclickmodal: (event, injection) => openLinkModal(event, injection) } })
 }
 
 function clearAfterArticlePlaylinks(): void {
@@ -461,7 +479,7 @@ export function clearLinkInjections(): void {
   elements.forEach((element) => clearLinkInjection(element.getAttribute(keyDataAttribute) || ''))
 
   clearAfterArticlePlaylinks()
-  destroyAllModals(false)
+  destroyLinkModal(false)
   destroyLinkPopover(false)
 }
 
@@ -568,6 +586,6 @@ export function isEquivalentInjection(injection1: LinkInjection, injection2: Lin
   return injection1.title === injection2.title && cleanPhrase(injection1.sentence) === cleanPhrase(injection2.sentence)
 }
 
-export function getPlayPilotWrapperElement(): Element {
+function getPlayPilotWrapperElement(): Element {
   return document.querySelector('[data-playpilot-link-injections]') || document.body
 }

package/src/lib/playlink.ts

@@ -2,14 +2,11 @@ import type { PlaylinkData } from "./types/playlink"
 
 /**
  * Merge playlinks of the same provider of BUY and RENT categories into a shared TVOD category.
- * Also remove playlinks without logos, as these are likely sub providers.
  */
 export function mergePlaylinks(playlinks: PlaylinkData[]): PlaylinkData[] {
-  const filtered = playlinks.filter(playlink => !!playlink.logo_url)
-
   let merged: PlaylinkData[] = []
 
-  for (const playlink of filtered) {
+  for (const playlink of playlinks) {
     let newPlaylink = playlink
     const existingPlaylink = merged.find(p => p.name === newPlaylink.name)
 

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

@@ -1,4 +1,3 @@
-import type { ParticipantData } from "./participant"
 import type { PlaylinkData } from "./playlink"
 
 export type TitleData = {
@@ -19,5 +18,4 @@ export type TitleData = {
   original_title: string
   length?: number
   blurb?: string
-  participants?: ParticipantData[]
 }

package/src/routes/+page.svelte

@@ -14,7 +14,6 @@
   import TrackingPixels from './components/TrackingPixels.svelte'
   import Debugger from './components/Debugger.svelte'
   import { fetchAds } from '$lib/ads'
-  import ParticipantModal from './components/ParticipantModal.svelte';
 
   let parentElement: HTMLElement | null = $state(null)
   let elements: HTMLElement[] = $state([])

package/src/routes/components/Ads/Disclaimer.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import { fade } from 'svelte/transition'
+
+  interface Props {
+    disclaimer: string
+    small?: boolean
+  }
+
+  const { disclaimer, small = false }: Props = $props()
+
+  let tooltipVisible = $state(false)
+
+  function toggleTooltip(event: MouseEvent): void {
+    event.preventDefault()
+    event.stopPropagation()
+
+    tooltipVisible = !tooltipVisible
+  }
+</script>
+
+<button class="tooltip" onclick={toggleTooltip} data-testid="disclaimer">
+  <div class="disclaimer" class:small aria-label="Disclaimer">i</div>
+
+  {#if tooltipVisible}
+    <div class="tooltip-content" transition:fade={{ duration: 50 }} role="paragraph">
+      {disclaimer}
+    </div>
+  {/if}
+</button>
+
+<style lang="scss">
+  .disclaimer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: var(--playpilot-disclaimer-border, 2px solid rgba(255, 255, 255, 0.5));
+    padding: margin(0.25);
+    height: margin(1.25);
+    width: margin(1.25);
+    border-radius: 99px;
+    color: var(--playpilot-disclaimer-text-color, rgba(255, 255, 255, 0.75));
+    font-weight: bold;
+    line-height: 1;
+
+    &:hover {
+      border-color: var(--playpilot-disclaimer-hover-border-color, white);
+      color: var(--playpilot-disclaimer-hover-text-color, white);
+    }
+
+    &.small {
+      height: margin(1);
+      width: margin(1);
+    }
+  }
+
+  .tooltip {
+    z-index: 2;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    padding: margin(0.25);
+    background: transparent;
+    border: 0;
+    color: var(--playpilot-disclaimer-tooltip-text-color, var(--playpilot-detail-text-color, white));
+    cursor: pointer;
+  }
+
+  .tooltip-content {
+    display: block;
+    z-index: 20;
+    position: absolute;
+    right: 100%;
+    bottom: margin(0.25);
+    width: calc(var(--width, 15rem) * 0.8);
+    padding: margin(0.5);
+    border-radius: margin(0.5);
+    background: var(--playpilot-disclaimer-tooltip-background, var(--playpilot-detail-background, var(--playpilot-content)));
+    box-shadow: var(--playpilot-shadow);
+    line-height: 1.1;
+    text-align: right;
+    white-space: normal;
+  }
+</style>

package/src/routes/components/Ads/Display.svelte

@@ -4,6 +4,7 @@
   import { track } from '$lib/tracking'
   import type { Campaign } from '$lib/types/campaign'
   import Tooltip from '../Tooltip.svelte'
+  import Disclaimer from './Disclaimer.svelte'
 
   interface Props {
     campaign: Campaign
@@ -14,7 +15,9 @@
 
   const { disclaimer, content, cta, campaign_type } = $derived(campaign)
   const { header, subheader, header_logo: logo, image, video } = $derived(content)
-  const { header: buttonLabel, url: href } = $derived(cta)
+  const { header: buttonLabel, url: href, subheader: info } = $derived(cta)
+
+  let contentHeight = $state(0)
 
   track(TrackingEvent.DisplayAdView, null, { campaign_name: campaign.campaign_name })
 
@@ -24,24 +27,24 @@
 </script>
 
 <a {href} target="_blank" class="display" class:compact rel="sponsored" {onclick} use:middlemouse={{ onclick }}>
-  {#if disclaimer}
-    <div class="disclaimer">
+  {#if info}
+    <div class="info">
       {#if compact}
         <Tooltip>
           Ad
 
           {#snippet content()}
-            {disclaimer}
+            {info}
           {/snippet}
         </Tooltip>
       {:else}
-        {disclaimer}
+        {info}
       {/if}
     </div>
   {/if}
 
   {#if logo || header || subheader || buttonLabel}
-    <div class="cta">
+    <div class="cta" bind:clientHeight={contentHeight}>
       {#if logo}
         <img class="logo" src={logo} alt="" height="40" width="40" />
       {/if}
@@ -70,6 +73,12 @@
       <track kind="captions" />
     </video>
   {/if}
+
+  {#if disclaimer}
+    <div class="disclaimer" style:--offset="{contentHeight}px">
+      <Disclaimer {disclaimer} />
+    </div>
+  {/if}
 </a>
 
 <style lang="scss">
@@ -87,7 +96,7 @@
     font-style: normal !important;
   }
 
-  .disclaimer {
+  .info {
     position: absolute;
     top: 0;
     left: 0;
@@ -160,4 +169,10 @@
     width: 100%;
     height: auto;
   }
+
+  .disclaimer {
+    position: absolute;
+    bottom: calc(var(--offset) + margin(0.25));
+    right: margin(0.25);
+  }
 </style>

package/src/routes/components/Ads/TopScroll.svelte

@@ -7,7 +7,7 @@
   import { isInSplitTestVariant, trackSplitTestView } from '$lib/splitTest'
   import { track } from '$lib/tracking'
   import type { Campaign } from '$lib/types/campaign'
-  import { fade } from 'svelte/transition'
+  import Disclaimer from './Disclaimer.svelte'
 
   interface Props {
     campaign: Campaign
@@ -29,18 +29,10 @@
   const contentImage = $derived(imageFromUUID(backgroundImageUUID, ImageDimensions.TopScrollContent))
 
   let clientWidth = $state(0)
-  let tooltipVisible = $state(false)
 
   function onclick(): void {
     track(TrackingEvent.TopScrollClick, null, { campaign_name: campaign.campaign_name })
   }
-
-  function toggleTooltip(event: MouseEvent): void {
-    event.preventDefault()
-    event.stopPropagation()
-
-    tooltipVisible = !tooltipVisible
-  }
 </script>
 
 <a
@@ -77,15 +69,7 @@
     {/if}
 
     {#if disclaimer}
-      <button class="tooltip" onclick={toggleTooltip}>
-        <div class="disclaimer">i</div>
-
-        {#if tooltipVisible}
-          <div class="tooltip-content" transition:fade={{ duration: 50 }}>
-            {disclaimer}
-          </div>
-        {/if}
-      </button>
+      <Disclaimer {disclaimer} />
     {/if}
   {/if}
 </a>
@@ -198,50 +182,4 @@
       border-radius: $border-radius-size $border-radius-size 0 0;
     }
   }
-
-  .disclaimer {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: var(--playpilot-top-scroll-disclaimer-border, 2px solid rgba(255, 255, 255, 0.5));
-    padding: margin(0.25);
-    height: margin(1.25);
-    width: margin(1.25);
-    border-radius: 99px;
-    color: var(--playpilot-top-scroll-disclaimer-text-color, rgba(255, 255, 255, 0.75));
-    font-weight: bold;
-    line-height: 1;
-
-    &:hover {
-      border-color: var(--playpilot-top-scroll-disclaimer-hover-border-color, white);
-      color: var(--playpilot-top-scroll-disclaimer-hover-text-color, white);
-    }
-  }
-
-  .tooltip {
-    z-index: 2;
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    padding: margin(0.25);
-    background: transparent;
-    border: 0;
-    color: var(--playpilot-top-scroll-text-color, white);
-    cursor: pointer;
-  }
-
-  .tooltip-content {
-    display: block;
-    z-index: 20;
-    position: absolute;
-    right: 100%;
-    bottom: margin(0.25);
-    width: calc(var(--width) * 0.8);
-    padding: margin(0.5);
-    border-radius: margin(1);
-    background: var(--playpilot-content);
-    box-shadow: var(--playpilot-shadow);
-    line-height: 1.1;
-    text-align: right;
-  }
 </style>

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

@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-  <path d="M14 2L2 14M2 2L14 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M14 2L2 14M2 2L14 14" stroke="currentColor" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/routes/components/Modal.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { fade, fly, scale, type TransitionConfig } from 'svelte/transition'
   import IconClose from './Icons/IconClose.svelte'
-  import IconArrow from './Icons/IconArrow.svelte'
   import RoundButton from './RoundButton.svelte'
   import DragHandle from './DragHandle.svelte'
   import { onMount, setContext, type Snippet } from 'svelte'
@@ -9,32 +8,23 @@
   import { isInSplitTestVariant } from '$lib/splitTest'
   import { SplitTest } from '$lib/enums/SplitTest'
   import { mobileBreakpoint } from '$lib/constants'
-  import { destroyAllModals, getPreviousModal, goBackToPreviousModal } from '$lib/modal'
 
   interface Props {
     children: Snippet
     bubble?: Snippet | null
     prepend?: Snippet | null
     tall?: boolean
-    closeButtonStyle?: 'shadow' | 'flat'
+    onclose?: () => void
     onscroll?: () => void
   }
 
-  const {
-    children,
-    bubble,
-    prepend,
-    tall = false,
-    closeButtonStyle = 'shadow',
-    onscroll = () => null,
-  }: Props = $props()
+  const { children, bubble, prepend, tall = false, onclose = () => null, onscroll = () => null }: Props = $props()
 
   const inlineBubble = isInSplitTestVariant(SplitTest.TopScrollFormat, 1)
 
   let windowWidth = $state(0)
   let dialogElement: HTMLElement | null = $state(null)
   let dialogOffset: number = $state(0)
-  let hasPreviousModal = $state(false)
 
   const isMobile = $derived(windowWidth < mobileBreakpoint)
 
@@ -47,8 +37,6 @@
     const baseOverflowStyle = document.body.style.overflowY
     document.body.style.overflowY = 'hidden'
 
-    hasPreviousModal = !!getPreviousModal()
-
     return () => document.body.style.overflowY = baseOverflowStyle || ''
   })
 
@@ -60,7 +48,7 @@
   }
 </script>
 
-<svelte:window onkeydown={({ key }) => { if (key === 'Escape') destroyAllModals() }} bind:innerWidth={windowWidth} />
+<svelte:window onkeydown={({ key }) => { if (key === 'Escape') onclose() }} bind:innerWidth={windowWidth} />
 
 <div class="modal" style:--dialog-offset="{dialogOffset}px" transition:fade|global={{ duration: 150 }} class:has-bubble={!!bubble && inlineBubble} class:has-prepend={!!prepend}>
   {#if prepend}
@@ -77,21 +65,13 @@
 
   {#if isMobile}
     <div class="drag-handle" transition:scaleOrFly|global>
-      <DragHandle target={dialogElement!} onpassed={() => destroyAllModals()} />
+      <DragHandle target={dialogElement!} onpassed={() => onclose()} />
     </div>
   {/if}
 
   <div class="dialog" class:tall {onscroll} bind:this={dialogElement} role="dialog" aria-labelledby="title" transition:scaleOrFly|global={{ y: window.innerHeight }} data-view-transition-new>
-    {#if hasPreviousModal}
-      <div class="close back {closeButtonStyle}">
-        <RoundButton onclick={() => goBackToPreviousModal()}>
-          <IconArrow direction="left" />
-        </RoundButton>
-      </div>
-    {/if}
-
-    <div class="close {closeButtonStyle}">
-      <RoundButton onclick={() => destroyAllModals()}>
+    <div class="close">
+      <RoundButton onclick={() => onclose()}>
         <IconClose />
       </RoundButton>
     </div>
@@ -101,7 +81,7 @@
 
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div class="backdrop" onclick={() => destroyAllModals()}></div>
+  <div class="backdrop" onclick={() => onclose()}></div>
 </div>
 
 <style lang="scss">
@@ -213,20 +193,6 @@
     &:hover {
       filter: brightness(1.1);
     }
-
-    &.flat {
-      --playpilot-button-background: transparent;
-      --playpilot-button-shadow: none;
-    }
-
-    &.back {
-      right: auto;
-      left: margin(1);
-
-      &.flat {
-        left: margin(0.5);
-      }
-    }
   }
 
   .prepend {

package/src/routes/components/Playlink.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
+  import Disclaimer from './Ads/Disclaimer.svelte'
   import { removeImageUrlPrefix } from '$lib/image'
   import { t } from '$lib/localization'
   import type { PlaylinkData } from '$lib/types/playlink'
 
   interface Props {
     playlink: PlaylinkData
+    disclaimer?: string
     hideCategory?: boolean
     onclick?: () => void
   }
 
-  const { playlink, hideCategory = false, onclick = () => null }: Props = $props()
+  const { playlink, disclaimer = '', hideCategory = false, onclick = () => null }: Props = $props()
 
   const { name, url, logo_url, highlighted, cta_text, action_text, extra_info: { category } } = $derived(playlink)
 
@@ -38,6 +40,10 @@
     <div class="action">
       {action_text || t('Watch')}
     </div>
+
+    {#if disclaimer}
+      <Disclaimer {disclaimer} small />
+    {/if}
   </div>
 </a>
 

package/src/routes/components/Playlinks.svelte

@@ -28,7 +28,9 @@
   // otherwise break the layout in ways that don't make sense to fix.
   const list = $derived(outerWidth < 500 || !!displayAd)
 
-  const mergedPlaylink = $derived(mergePlaylinks(playlinks))
+  // Remove any playlinks without logos, these are likely sub providers.
+  const filteredPlaylinks = $derived(playlinks.filter(playlink => !!playlink.logo_url))
+  const mergedPlaylink = $derived(mergePlaylinks(filteredPlaylinks))
 
   function onclick(playlink: string): void {
     track(isModal ? TrackingEvent.TitleModalPlaylinkClick : TrackingEvent.TitlePopoverPlaylinkClick, title, { playlink })
@@ -50,7 +52,7 @@
 
     <!-- A fake highlighted playlink as part of the display ad, to be shown after the first playlink -->
     {#if displayAd && (index === 0)}
-      <Playlink playlink={campaignToPlaylink(displayAd)} onclick={() => track(TrackingEvent.DisplayedAdPlaylickClick, title, { campaign_name: displayAd.campaign_name })} hideCategory />
+      <Playlink playlink={campaignToPlaylink(displayAd)} onclick={() => track(TrackingEvent.DisplayedAdPlaylickClick, title, { campaign_name: displayAd.campaign_name })} hideCategory disclaimer={displayAd.disclaimer || ''} />
     {/if}
   {/each}
 

package/src/routes/components/Title.svelte

@@ -3,12 +3,10 @@
   import Playlinks from './Playlinks.svelte'
   import Description from './Description.svelte'
   import IconIMDb from './Icons/IconIMDb.svelte'
-  import Participants from './Participants.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
@@ -60,10 +58,6 @@
 
     {#if !small}
       <Description text={title.description} blurb={title.blurb} />
-
-      {#if true || title.participants?.length}
-        <Participants participants={participants} />
-      {/if}
     {/if}
   </div>
 </div>
@@ -116,14 +110,14 @@
     }
 
     &.small {
-      font-size: var(--playpilot-detail-font-size-small, 12px);
+      font-size: var(--playpilot-detail-font-size, 12px);
       line-height: 1.45;
       padding-bottom: margin(0.5);
     }
   }
 
   .header {
-    padding: margin(3) 0 margin(1);
+    padding: margin(2) 0 margin(1);
     background: transparent;
 
     .small & {