@playpilot/tpi 5.12.0-beta.similar.1 → 5.12.1

package/src/routes/components/Popover.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
+  import IconScrollIndicator from './Icons/IconScrollIndicator.svelte'
   import { SplitTest } from '$lib/enums/SplitTest'
   import { isInSplitTestVariant } from '$lib/splitTest'
   import { onMount, setContext, tick, type Snippet } from 'svelte'
   import { prefersReducedMotion } from 'svelte/motion'
-  import { fly } from 'svelte/transition'
+  import { fade, fly } from 'svelte/transition'
 
   interface Props {
     children: Snippet
     bubble?: Snippet | null
     append?: Snippet | null
-    maxHeight?: number
   }
 
-  let { children, bubble, append, maxHeight = $bindable() }: Props = $props()
+  const { children, bubble, append }: Props = $props()
 
   setContext('scope', 'popover')
 
@@ -22,14 +22,30 @@
 
   let element: HTMLElement | null = $state(null)
   let flip = $state(false)
-  let appendHeight = $state(0)
+  let canAppendFit = $state(true)
+  let scrollIndicatorVisible = $state(false)
+  let fullHeight = $state(0) // Full height of all snippets together, via bind:clientHeight
+  let appendHeight = $state(0) // Only the height of the append (in most cases, this will be the display ad), via bind:clientHeight
+  let maxHeight = $state(0) // Max height that is computed based on the available screen size, via setMaxHeight()
 
   onMount(async () => {
     await tick()
     positionElement()
 
+    await setMaxHeight()
+
+    if (append) {
+      // When an append is visible it pushes the dialog's height down. We need to recalculate the popover's available height
+      // When there is little room for the popover to show, the append will hide itself. We calculate the new height after hiding.
+
+      requestAnimationFrame(() => {
+        setAppendVisibility()
+        setMaxHeight()
+      })
+    }
+
     await tick()
-    setMaxHeight()
+    setScrollIndicatorVisible()
   })
 
   /**
@@ -50,17 +66,25 @@
     if (right + offset > window.innerWidth) element.style.left = `${fromRight}px`
   }
 
+  function setAppendVisibility(): void {
+    canAppendFit = fullHeight > 500
+  }
+
   /**
    * Set the max height of the dialog so that it always fits on screen, even after flipping.
    */
-  function setMaxHeight(): void {
+  async function setMaxHeight(): Promise<void> {
+    maxHeight = 0
+
+    await new Promise(res => requestAnimationFrame(res))
+
     if (!element) return
 
     const { top, height } = element.getBoundingClientRect()
     const offset = getOffset()
     const gap = append ? parseInt(window.getComputedStyle(element).gap) : 0
 
-    const appendOffset = appendHeight + gap
+    const appendOffset = canAppendFit ? appendHeight + gap : 0
     const availableSpace = flip ? (window.innerHeight - top - offset - appendOffset) : (top + height - appendOffset - offset)
 
     maxHeight = Math.min(availableSpace, window.innerHeight * 0.8)
@@ -69,11 +93,41 @@
   function getOffset(): number {
     return parseFloat(getComputedStyle(document.documentElement).fontSize) // 1 rem
   }
+
+  function setScrollIndicatorVisible(): void {
+    if (!element?.firstChild) return
+
+    const dialog = element.firstChild as HTMLElement
+    const { offsetHeight, scrollHeight, scrollTop } = dialog
+
+    if (scrollHeight <= offsetHeight) {
+      scrollIndicatorVisible = false
+    } else {
+      scrollIndicatorVisible = scrollTop + offsetHeight < scrollHeight
+    }
+  }
 </script>
 
-<div class="popover" class:flip class:inline={inlineBubble} class:has-bubble={!!bubble && inlineBubble} bind:this={element} style:--max-height={maxHeight ? maxHeight + 'px' : null} tabindex="-1" aria-hidden="true">
-  <div class="dialog" transition:fly|global={transition} data-view-transition-old>
+<div
+  class="popover"
+  class:flip
+  class:inline={inlineBubble}
+  class:has-bubble={!!bubble && inlineBubble}
+  style:--max-height={maxHeight ? maxHeight + 'px' : null}
+  tabindex="-1"
+  aria-hidden="true"
+  bind:this={element}
+  bind:clientHeight={fullHeight}>
+  <div class="dialog" transition:fly|global={transition} onscroll={setScrollIndicatorVisible} data-view-transition-old>
     {@render children()}
+
+    {#if scrollIndicatorVisible}
+      <div class="scroll-indicator" transition:fade={{ duration: 100 }}>
+        <div class="scroll-indicator-icon">
+          <IconScrollIndicator />
+        </div>
+      </div>
+    {/if}
   </div>
 
   {#if bubble}
@@ -82,7 +136,7 @@
     </div>
   {/if}
 
-  {#if append}
+  {#if append && canAppendFit}
     <div class="append" transition:fly|global={transition} bind:clientHeight={appendHeight}>
       {@render append()}
     </div>
@@ -90,24 +144,36 @@
 </div>
 
 <style lang="scss">
+  @keyframes delay-render {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
   .popover {
     --offset: #{margin(0.5)};
     display: flex;
     flex-direction: column-reverse;
     gap: margin(0.5);
     position: absolute;
-    top: calc((var(--offset) - 1px) * -1); /* Add 1 pixel to account for rounding errors */
+    top: calc((var(--offset) - 1px) * -1); // Add 1 pixel to account for rounding errors
     left: 0;
     width: calc(100vw - margin(2));
     max-width: margin(20);
     padding: var(--offset) 0;
     transform: translateY(calc(-100% + var(--offset)));
+    opacity: 0;
+    animation: delay-render 0ms 1ms forwards; // Allow height calculations to perform before showing the popover
     z-index: 2147483647; // As high as she goes
 
     &.flip {
       flex-direction: column;
       top: auto;
-      bottom: calc(var(--offset) + 1px);  /* Add 1 pixel to account for rounding errors */
+      bottom: calc(var(--offset) + 1px);  // Add 1 pixel to account for rounding errors
       transform: translateY(calc(100% + var(--offset)));
 
       &.inline {
@@ -138,4 +204,37 @@
       border-top-right-radius: 0;
     }
   }
+
+  .scroll-indicator {
+    z-index: 1;
+    position: sticky;
+    bottom: 0;
+    pointer-events: none;
+
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      height: margin(2);
+      width: 100%;
+      background: linear-gradient(to bottom, transparent, black);
+      opacity: var(--playpilot-popover-scroll-indicator-opacity, 0.5);
+    }
+  }
+
+  .scroll-indicator-icon {
+    z-index: 1;
+    position: absolute;
+    display: flex;
+    bottom: margin(0.25);
+    left: 50%;
+    transform: translateX(-50%);
+    opacity: 0.75;
+
+    :global(svg) {
+      fill: var(--playpilot-popover-scroll-indicator-fill, var(--playpilot-detail-text-color, var(--playpilot-text-color))) !important;
+    }
+  }
 </style>

package/src/routes/components/Title.svelte

@@ -3,35 +3,33 @@
   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
     small?: boolean
-    compact?: boolean
   }
 
-  const { title, small = false, compact = false }: Props = $props()
+  const { title, small = false }: Props = $props()
 
   let posterLoaded = $state(false)
   let backgroundLoaded = $state(false)
   let useBackgroundFallback = $state(false)
 </script>
 
-<div class="content" class:small class:compact data-playpilot-link-injections-title>
+<div class="content" class:small data-playpilot-link-injections-title>
   <div class="header">
-    {#if !compact}
-      <div class="poster" class:loaded={posterLoaded}>
-        <TitlePoster {title} onload={() => posterLoaded = true} />
-      </div>
-    {/if}
+    <div class="top">
+      <img
+        class="poster"
+        class:loaded={posterLoaded}
+        src={removeImageUrlPrefix(title.standing_poster)}
+        alt="Movie poster for '{title.title}'"
+        onload={() => posterLoaded = true} />
+    </div>
 
     <div class="heading" use:heading={2} class:truncate={small} id="title">{title.title}</div>
 
@@ -57,17 +55,11 @@
 
     {#if !small}
       <Description text={title.description} blurb={title.blurb} />
-
-      {#if true || title.participants?.length}
-        <ParticipantsRail participants={participants} />
-      {/if}
-
-      <SimilarRail />
     {/if}
   </div>
 </div>
 
-<div class="background" class:faded={compact}>
+<div class="background">
   {#key useBackgroundFallback}
     <img
       src={removeImageUrlPrefix(useBackgroundFallback ? title.standing_poster : title.medium_poster)}
@@ -92,10 +84,6 @@
     .small & {
       font-size: var(--playpilot-detail-title-font-size-small, margin(1.125));
     }
-
-    .compact & {
-      margin-top: 0;
-    }
   }
 
   .content {
@@ -115,23 +103,25 @@
     }
 
     &.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 & {
       padding-top: margin(1);
     }
+  }
 
-    .compact & {
-      padding: 0 0 margin(1);
-    }
+  .top {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
   }
 
   .poster {
@@ -142,7 +132,6 @@
     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 {
@@ -221,10 +210,6 @@
     }
   }
 
-  .faded {
-    opacity: 0.15;
-  }
-
   .capitalize {
     text-transform: capitalize;
   }

package/src/routes/components/TitleModal.svelte

@@ -10,10 +10,11 @@
   import { getFirstAdOfType } from '$lib/ads'
 
   interface Props {
+    onclose: () => void,
     title: TitleData
   }
 
-  const { title }: Props = $props()
+  const { onclose, title }: Props = $props()
 
   const topScrollAd = getFirstAdOfType('top_scroll')
   const displayAd = getFirstAdOfType('card')
@@ -48,6 +49,6 @@
   {/if}
 {/snippet}
 
-<Modal {onscroll} prepend={displayAd ? prepend : null} bubble={topScrollAd ? bubble : null} tall>
+<Modal {onclose} {onscroll} prepend={displayAd ? prepend : null} bubble={topScrollAd ? bubble : null} tall>
   <Title {title} />
 </Modal>

package/src/routes/components/TitlePopover.svelte

@@ -19,11 +19,8 @@
   const topScroll = getFirstAdOfType('top_scroll')
   const displayAd = getFirstAdOfType('card')
 
-  let maxHeight = $state(0)
   let element: HTMLElement | null = $state(null)
 
-  const compact = $derived(!!maxHeight && maxHeight < 250)
-
   track(TrackingEvent.TitlePopoverView, title)
 
   onMount(() => {
@@ -68,8 +65,8 @@
 {/snippet}
 
 <div class="title-popover" bind:this={element} data-playpilot-title-popover role="region" aria-labelledby="title">
-  <Popover bind:maxHeight append={displayAd && !compact ? append : null} bubble={topScroll ? bubble : null}>
-    <Title {title} {compact} small  />
+  <Popover append={displayAd ? append : null} bubble={topScroll ? bubble : null}>
+    <Title {title} small  />
   </Popover>
 </div>
 

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

@@ -1,21 +1,18 @@
 import { fireEvent } from '@testing-library/svelte'
 import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
 
-import { injectLinksInDocument, clearLinkInjections, clearLinkInjection, getLinkInjectionElements, insertAfterArticlePlaylinks, getLinkInjectionsParentElement, isAvailableAsManualInjection, filterRemovedAndInactiveInjections, isEquivalentInjection, filterInvalidInTextInjections, filterInvalidAfterArticleInjections, isValidInjection, isValidPlaylinkType, removePlayPilotTitleLinks } from '$lib/linkInjection'
+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', () => ({
   mount: vi.fn(),
   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(),
 }))
 
 function mockMatchMedia(matches = false) {
@@ -314,7 +311,7 @@ describe('linkInjection.js', () => {
       expect(() => injectLinksInDocument(elements, { aiInjections: linkInjections, manualInjections: [] })).not.toThrow()
     })
 
-    it('Should open modal when link is clicked', async () => {
+    it('Should mount modal when clicked', async () => {
       document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
 
       const elements = Array.from(document.body.querySelectorAll('p'))
@@ -325,7 +322,27 @@ describe('linkInjection.js', () => {
       const link = /** @type {HTMLAnchorElement} */ (document.querySelector('a'))
       await fireEvent.click(link)
 
-      expect(openModal).toHaveBeenCalled()
+      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)
     })
 
     it('Should not fire given onclick function when clicked with modifier keys or not left click', async () => {
@@ -1225,4 +1242,13 @@ describe('linkInjection.js', () => {
       expect(document.querySelector('a')).toBeTruthy()
     })
   })
+
+  describe('trackLinkIntersection', () => {
+    it('Should fire tracking for each intersecting link', () => {
+      // @ts-ignore
+      trackLinkIntersection([{ isIntersecting: true }, { isIntersecting: true }, { isIntersecting: false }])
+
+      expect(track).toHaveBeenCalledTimes(2)
+    })
+  })
 })

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

@@ -4,12 +4,12 @@ import { mergePlaylinks } from '$lib/playlink'
 describe('$lib/playlink', () => {
   describe('mergePlaylinks', () => {
     it('Should return an array with RENT and BUY categories of the same provider as one entry', () => {
-      /** @type {import('$lib/types/playlink').PlaylinkData[]} */
+      /** @type {PlaylinkData[]} */
       const playlinks = [{
         sid: '1',
         name: 'Netflix',
         url: '',
-        logo_url: 'a',
+        logo_url: '',
         extra_info: {
           category: 'RENT',
         },
@@ -17,7 +17,7 @@ describe('$lib/playlink', () => {
         sid: '2',
         name: 'Netflix',
         url: '',
-        logo_url: 'a',
+        logo_url: '',
         extra_info: {
           category: 'BUY',
         },
@@ -28,12 +28,12 @@ describe('$lib/playlink', () => {
     })
 
     it('Should not merge playlinks if they do not share the same name', () => {
-      /** @type {import('$lib/types/playlink').PlaylinkData[]} */
+      /** @type {PlaylinkData[]} */
       const playlinks = [{
         sid: '1',
         name: 'Netflix',
         url: '',
-        logo_url: 'a',
+        logo_url: '',
         extra_info: {
           category: 'RENT',
         },
@@ -41,7 +41,7 @@ describe('$lib/playlink', () => {
         sid: '2',
         name: 'Apple',
         url: '',
-        logo_url: 'a',
+        logo_url: '',
         extra_info: {
           category: 'BUY',
         },
@@ -51,12 +51,12 @@ describe('$lib/playlink', () => {
     })
 
     it('Should not merge playlinks if one of the categories is not RENT or BUY', () => {
-      /** @type {import('$lib/types/playlink').PlaylinkData[]} */
+      /** @type {PlaylinkData[]} */
       const playlinks = [{
         sid: '1',
         name: 'Netflix',
         url: '',
-        logo_url: 'a',
+        logo_url: '',
         extra_info: {
           category: 'RENT',
         },
@@ -64,7 +64,7 @@ describe('$lib/playlink', () => {
         sid: '2',
         name: 'Netflix',
         url: '',
-        logo_url: 'a',
+        logo_url: '',
         extra_info: {
           category: 'SVOD',
         },
@@ -73,23 +73,8 @@ describe('$lib/playlink', () => {
       expect(mergePlaylinks(playlinks)).toHaveLength(2)
     })
 
-    it('Should filter out playlinks without logos', () => {
-      /** @type {import('$lib/types/playlink').PlaylinkData[]} */
-      const playlinks = [{
-        sid: '1',
-        name: 'Netflix',
-        url: '',
-        logo_url: '',
-        extra_info: {
-          category: 'RENT',
-        },
-      }]
-
-      expect(mergePlaylinks(playlinks)).toHaveLength(0)
-    })
-
     it('Should return an empty array if given', () => {
-      /** @type {import('$lib/types/playlink').PlaylinkData[]} */
+      /** @type {PlaylinkData[]} */
       const playlinks = []
       expect(mergePlaylinks(playlinks)).toEqual([])
     })

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

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, afterEach } from 'vitest'
-import { getSplitTestIdentifier, getSplitTestVariantIndex, isInSplitTestVariant, trackSplitTestAction, trackSplitTestView } from '$lib/splitTest'
+import { getSplitTestIdentifier, getSplitTestVariantIndex, getSplitTestVariantName, isInSplitTestVariant, trackSplitTestAction, trackSplitTestView } from '$lib/splitTest'
 import { track } from '$lib/tracking'
 import { TrackingEvent } from '$lib/enums/TrackingEvent'
 
@@ -99,19 +99,47 @@ describe('$lib/splitTest', () => {
     it('Should track view event with the given key', () => {
       trackSplitTestView(splitTest)
 
-      const variant = isInSplitTestVariant(splitTest) ? 1 : 0
+      const variant = getSplitTestVariantName(splitTest)
 
       expect(track).toHaveBeenCalledWith(TrackingEvent.SplitTestView, null, { key: 'Some key', variant })
     })
+
+    it('Should track view event with the given key and variant name if given', () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections.split_test_identifiers = { [splitTest.key]: 0.25 }
+
+      trackSplitTestView({ ...splitTest, variantNames: ['A', 'B'] })
+
+      expect(track).toHaveBeenCalledWith(TrackingEvent.SplitTestView, null, { key: 'Some key', variant: 'A' })
+    })
   })
 
   describe('trackSplitTestAction', () => {
     it('Should track action event with the given key and action', () => {
       trackSplitTestAction(splitTest, 'Some action')
-      const variant = isInSplitTestVariant(splitTest) ? 1 : 0
+      const variant = getSplitTestVariantName(splitTest)
 
       expect(track).toHaveBeenCalledWith(TrackingEvent.SplitTestAction, null, { key: splitTest.key, variant, action: 'Some action' })
     })
+
+    it('Should track action event with the given key and action when consisting of multiple variants', () => {
+      const multiple = { key: 'multiple', numberOfVariants: 3 }
+
+      window.PlayPilotLinkInjections.split_test_identifiers = { [multiple.key]: 0.75 }
+
+      trackSplitTestAction(multiple, 'Some action')
+
+      expect(track).toHaveBeenCalledWith(TrackingEvent.SplitTestAction, null, { key: multiple.key, variant: '2', action: 'Some action' })
+    })
+
+    it('Should track action event with the given key and variant name if given', () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections.split_test_identifiers = { [splitTest.key]: 0.5 }
+
+      trackSplitTestView({ ...splitTest, variantNames: ['A', 'B'] })
+
+      expect(track).toHaveBeenCalledWith(TrackingEvent.SplitTestView, null, { key: 'Some key', variant: 'B' })
+    })
   })
 
   describe('getSplitTestVariantIndex', () => {