@playpilot/tpi 5.3.0 → 5.4.0-beta.topscroll-1

package/package.json

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

package/src/lib/enums/TrackingEvent.ts

@@ -25,4 +25,6 @@ export const TrackingEvent = Object.freeze({
   ManualReport: 'ali_manual_report',
   EditorError: 'ali_editor_error',
   InjectionError: 'ali_injection_error',
+
+  TopScrollClick: 'ali_top_scroll_click',
 })

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

@@ -0,0 +1,251 @@
+<script lang="ts">
+  import { TrackingEvent } from '$lib/enums/TrackingEvent'
+  import { track } from '$lib/tracking'
+  import { fade } from 'svelte/transition'
+
+  // Placeholder data, of course
+  const { campaign = {
+    campaign_format: 'top_scroll',
+    campaign_type: 'video',
+    campaign_platforms: ['web', 'android_app', 'ios_app'],
+    campaign_name: 'some_campaign_NL',
+    campaign_start: '2025-04-24T00:00:00Z',
+    campaign_end: '2025-04-30T23:59:00Z',
+    campaign_region: 'nl',
+    content: {
+      header: 'Some top scroll header',
+      header_logo: 'https://example.com/',
+      header_logo_uuid: '4fb7d6ea152111f08dd20a58a9feac02',
+      subheader: null,
+      image: 'https://example.com/',
+      image_uuid: '4fb7d6ea152111f08dd20a58a9feac02',
+      video: null,
+      format: null,
+    },
+    cta: {
+      header: 'Button',
+      subheader: null,
+      image: null,
+      image_uuid: null,
+      url: 'https://google.com/',
+    },
+    content_playlist: null,
+    provider: null,
+    impression_trackers: [],
+    target_title_uuid: null,
+    target_title_sid: null,
+    backfill_providers: [],
+    autogenerated: false,
+    enabled: true,
+    hide_imdb_score: false,
+    hide_sponsored_message: false,
+    disclaimer: 'Some disclaimer',
+  } } = $props()
+
+  const { disclaimer, content, cta } = $derived(campaign)
+  const { format, header, header_logo: logo, image_uuid: backgroundImageUUID } = $derived(content)
+  const { header: buttonLabel, url: href } = $derived(cta)
+
+  const simple = $derived(format === 'large')
+
+  let clientWidth = $state(0)
+  let tooltipVisible = $state(false)
+
+  function trackClick(): void {
+    track(TrackingEvent.TopScrollClick)
+  }
+
+  function toggleTooltip(event: MouseEvent): void {
+    event.preventDefault()
+    event.stopPropagation()
+
+    tooltipVisible = !tooltipVisible
+  }
+</script>
+
+<a
+  {href}
+  target="_blank"
+  class="top-scroll"
+  class:simple
+  tabindex="-1"
+  onclick={trackClick}
+  rel="sponsored"
+  style:--width="{clientWidth}px"
+  bind:clientWidth>
+  <div class="content">
+    {#if simple}
+      <img class="content-image" src="https://picsum.photos/seed/movie/728/90" alt={header} width="728" height="90" />
+    {:else}
+      {#if logo}
+        <img class="logo" src="https://picsum.photos/seed/disney/50/50" alt="" width="50" height="50" />
+      {/if}
+
+      <p class="tagline">{header}</p>
+
+      {#if buttonLabel}
+        <button class="button">{buttonLabel}</button>
+      {/if}
+    {/if}
+  </div>
+
+  {#if !simple}
+    {#if backgroundImageUUID}
+      <div class="background" style:--background="url('https://picsum.photos/seed/movie/728/90')"></div>
+    {/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>
+    {/if}
+  {/if}
+</a>
+
+<style lang="scss">
+  .top-scroll {
+    position: relative;
+    display: block;
+    width: 100%;
+    border-radius: var(--playpilot-top-scroll-border-radius, var(--playpilot-popover-border-radius, margin(1)));
+    background: black;
+    color: var(--playpilot-top-scroll-text-color, white);
+    font-family: var(--playpilot-top-scroll-font-family, var(--playpilot-detail-font-family, var(--playpilot-font-family)));
+    font-size: var(--playpilot-top-scroll-font-size, var(--playpilot-detail-font-size, 14px));
+    text-decoration: none;
+    line-height: 1.35;
+  }
+
+  .content {
+    display: flex;
+    z-index: 1;
+    position: relative;
+    align-items: center;
+    height: 100%;
+    min-height: margin(4.5);
+    padding: margin(0.25) margin(0.5);
+    gap: margin(0.5);
+    color: var(--playpilot-top-scroll-text-color, white);
+
+    .simple & {
+      justify-content: center;
+      min-height: 0;
+      padding: 0;
+    }
+  }
+
+  .logo {
+    border-radius: var(--playpilot-top-scroll-logo-border-radius, margin(0.5));
+    background: black;
+  }
+
+  .tagline {
+    margin: 0;
+    text-shadow: var(--playpilot-shadow);
+  }
+
+  .button {
+    margin-left: auto;
+    margin-right: margin(1);
+    padding: margin(0.25) margin(0.5);
+    background: var(--playpilot-top-scroll-button-background, white);
+    border: 0;
+    border-radius: var(--playpilot-top-scroll-button-border-radius, margin(0.25));
+    box-shadow: var(--playpilot-shadow);
+    color: var(--playpilot-top-scroll-button-text-color, black);
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+
+    &:hover {
+      outline: margin(0.25) solid var(--playpilot-top-scroll-button-background, rgba(white, 0.35));
+      background: var(--playpilot-top-scroll-button-background, white);
+    }
+
+    &:active {
+      background: var(--playpilot-top-scroll-button-background, white);
+    }
+  }
+
+  .background {
+    z-index: 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-radius: var(--playpilot-top-scroll-border-radius, var(--playpilot-popover-border-radius, margin(1)));
+    background-image: var(--background);
+    background-position: center;
+    background-size: cover;
+    opacity: 0.4;
+
+    .top-scroll:hover & {
+      filter: brightness(1.15);
+    }
+  }
+
+  .content-image {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    background: black;
+    border-radius: var(--playpilot-top-scroll-border-radius, var(--playpilot-popover-border-radius, margin(1)));
+
+    .top-scroll:hover & {
+      filter: brightness(1.15);
+    }
+  }
+
+  .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/Modal.svelte

@@ -7,11 +7,12 @@
 
   interface Props {
     children: Snippet
+    bubble?: Snippet
     onclose?: () => void
     onscroll?: () => void
   }
 
-  const { children, onclose = () => null, onscroll = () => null }: Props = $props()
+  const { children, bubble, onclose = () => null, onscroll = () => null }: Props = $props()
 
   setContext('scope', 'modal')
 
@@ -22,12 +23,12 @@
     return () => document.body.style.overflowY = baseOverflowStyle || ''
   })
 
-  function scaleOrFly(node: Element): TransitionConfig {
+  function scaleOrFly(node: Element, options: { y: number } = { y: 0 }): TransitionConfig {
     if (prefersReducedMotion.current) return fade(node, { duration: 0 })
 
     const shouldFly = window.innerWidth < 600
 
-    if (shouldFly) return fly(node, { duration: 250, y: window.innerHeight })
+    if (shouldFly) return fly(node, { duration: 250, ...options })
     return scale(node, { duration: 150, start: 0.85 })
   }
 </script>
@@ -35,7 +36,13 @@
 <svelte:window on:keydown={({ key }) => { if (key === 'Escape') onclose() }} />
 
 <div class="modal" transition:fade|global={{ duration: 150 }}>
-  <div class="dialog" {onscroll} role="dialog" aria-labelledby="title" transition:scaleOrFly|global data-view-transition-new>
+  {#if bubble}
+    <div class="bubble" transition:scaleOrFly|global={{ y: -10 }}>
+      {@render bubble()}
+    </div>
+  {/if}
+
+  <div class="dialog" {onscroll} role="dialog" aria-labelledby="title" transition:scaleOrFly|global={{ y: window.innerHeight }} data-view-transition-new>
     <div class="close">
       <RoundButton onclick={() => onclose()}>
         <IconClose />
@@ -51,44 +58,46 @@
 </div>
 
 <style lang="scss">
+  $max-width: 600px;
+
   .modal {
     z-index: 2147483647; // As high as she goes
     box-sizing: border-box;
     position: fixed;
     display: flex;
-    justify-content: center;
-    align-items: flex-start;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--playpilot-detail-backdrop, rgba(0, 0, 0, 0.65));
 
-    @media (min-width: 600px) {
+    @media (min-width: $max-width) {
       padding: margin(2);
+      gap: margin(1);
     }
   }
 
-
   .dialog {
     z-index: 1;
     position: relative;
     width: 100%;
-    max-width: 600px;
+    max-width: $max-width;
     max-height: 80vh;
     overflow: auto;
     margin-top: auto;
     border-radius: var(--playpilot-detail-border-radius, margin(1) margin(1) 0 0);
     background: var(--playpilot-detail-background, var(--playpilot-light));
 
-    @media (min-width: 600px) {
+    @media (min-width: $max-width) {
       margin-top: 0;
       border-radius: var(--playpilot-detail-border-radius, margin(1));
       max-height: 100%;
     }
   }
 
-
   .backdrop {
     z-index: 0;
     position: absolute;
@@ -112,4 +121,17 @@
       filter: brightness(1.1);
     }
   }
+
+  .bubble {
+    z-index: 1;
+    position: relative;
+    width: calc(100% - margin(1));
+    max-width: $max-width;
+    margin: margin(0.5);
+
+    @media (min-width: $max-width) {
+      width: 100%;
+      margin: 0;
+    }
+  }
 </style>

package/src/routes/components/Popover.svelte

@@ -5,10 +5,11 @@
 
   interface Props {
     children: Snippet
+    bubble?: Snippet
     maxHeight?: number
   }
 
-  let { children, maxHeight = $bindable() }: Props = $props()
+  let { children, bubble, maxHeight = $bindable() }: Props = $props()
 
   setContext('scope', 'popover')
 
@@ -63,11 +64,20 @@
   <div class="dialog" transition:fly|global={{ duration: prefersReducedMotion.current ? 0 : 100, y: 10 }} data-view-transition-old>
     {@render children()}
   </div>
+
+  {#if bubble}
+    <div transition:fly|global={{ duration: prefersReducedMotion.current ? 0 : 100, y: 10 }}>
+      {@render bubble()}
+    </div>
+  {/if}
 </div>
 
 <style lang="scss">
   .popover {
     --offset: #{margin(0.5)};
+    display: flex;
+    gap: margin(0.5);
+    flex-direction: column-reverse;
     position: absolute;
     top: calc((var(--offset) - 1px) * -1); /* Add 1 pixel to account for rounding errors */
     left: 0;
@@ -78,6 +88,7 @@
     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 */
       transform: translateY(calc(100% + var(--offset)));

package/src/routes/components/TitleModal.svelte

@@ -5,6 +5,7 @@
   import { onMount } from 'svelte'
   import Modal from './Modal.svelte'
   import Title from './Title.svelte'
+  import TopScroll from './Ads/TopScroll.svelte'
 
   interface Props {
     onclose: () => void,
@@ -32,4 +33,8 @@
 
 <Modal {onclose} {onscroll}>
   <Title {title} />
+
+  {#snippet bubble()}
+    <TopScroll />
+  {/snippet}
 </Modal>

package/src/routes/components/TitlePopover.svelte

@@ -5,6 +5,7 @@
   import { onMount } from 'svelte'
   import Popover from './Popover.svelte'
   import Title from './Title.svelte'
+  import TopScroll from './Ads/TopScroll.svelte'
 
   interface Props {
     event: MouseEvent
@@ -50,6 +51,10 @@
 <div class="title-popover" bind:this={element} data-playpilot-title-popover role="region" aria-labelledby="title">
   <Popover bind:maxHeight>
     <Title {title} small compact={!!maxHeight && maxHeight < 250} />
+
+    {#snippet bubble()}
+      <TopScroll />
+    {/snippet}
   </Popover>
 </div>
 

package/src/tests/routes/components/Ads/TopScroll.test.js

@@ -0,0 +1,99 @@
+import { fireEvent, render, waitFor } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import TopScroll from '../../../../routes/components/Ads/TopScroll.svelte'
+import { track } from '$lib/tracking'
+import { TrackingEvent } from '$lib/enums/TrackingEvent'
+
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+export const campaign = {
+  campaign_format: 'top_scroll',
+  campaign_type: 'video',
+  campaign_platforms: ['web', 'android_app', 'ios_app'],
+  campaign_name: 'some_campaign_NL',
+  campaign_start: '2025-04-24T00:00:00Z',
+  campaign_end: '2025-04-30T23:59:00Z',
+  campaign_region: 'nl',
+  content: {
+    header: 'Some top scroll header',
+    header_logo: 'https://example.com/',
+    header_logo_uuid: '4fb7d6ea152111f08dd20a58a9feac02',
+    subheader: null,
+    image: 'https://example.com/',
+    image_uuid: '4fb7d6ea152111f08dd20a58a9feac02',
+    video: null,
+    format: null,
+  },
+  cta: {
+    header: 'Button Label',
+    subheader: null,
+    image: null,
+    image_uuid: null,
+    url: 'https://google.com/',
+  },
+  content_playlist: null,
+  provider: null,
+  impression_trackers: [],
+  target_title_uuid: null,
+  target_title_sid: null,
+  backfill_providers: [],
+  autogenerated: false,
+  enabled: true,
+  hide_imdb_score: false,
+  hide_sponsored_message: false,
+  disclaimer: 'Some disclaimer',
+}
+
+describe('TopScroll.svelte', () => {
+  it('Should render the given content', () => {
+    const { getByText, container } = render(TopScroll, { campaign })
+
+    expect(getByText(campaign.cta.header)).toBeTruthy()
+    expect(getByText(campaign.content.header)).toBeTruthy()
+    expect(container.querySelector('.tooltip')).toBeTruthy()
+  })
+
+  it('Should not show disclaimer when not given', async () => {
+    const { getByText, container } = render(TopScroll, {
+      campaign: { ...campaign, disclaimer: null },
+    })
+
+    await waitFor(() => getByText(campaign.cta.header))
+
+    expect(container.querySelector('.tooltip')).not.toBeTruthy()
+  })
+
+  it('Should toggle disclaimer on click', async () => {
+    const { getByText, container, queryByText } = render(TopScroll, { campaign })
+
+    await waitFor(() => getByText(campaign.cta.header))
+
+    await fireEvent.click(/** @type {HTMLElement} */ (container.querySelector('.tooltip')))
+    expect(getByText(campaign.disclaimer)).toBeTruthy()
+
+    await fireEvent.click(/** @type {HTMLElement} */ (container.querySelector('.tooltip')))
+    expect(queryByText(campaign.disclaimer)).not.toBeTruthy()
+  })
+
+  it('Should fire track even on click', async () => {
+    const { getByRole } = render(TopScroll, { campaign })
+
+    await fireEvent.click(getByRole('link'))
+
+    expect(track).toHaveBeenCalledWith(TrackingEvent.TopScrollClick)
+  })
+
+  it('Should render as simple variant when content format is large', async () => {
+    const simpleCampaign = { ...campaign, content: { ...campaign.content, format: 'large' } }
+    const { queryByText, container } = render(TopScroll, { campaign: simpleCampaign })
+
+    expect(queryByText(simpleCampaign.content.header)).not.toBeTruthy()
+    expect(queryByText(simpleCampaign.cta.header)).not.toBeTruthy()
+    expect(container.querySelector('.background')).not.toBeTruthy()
+    expect(container.querySelector('.disclaimer')).not.toBeTruthy()
+    expect(container.querySelector('.content-image')).toBeTruthy()
+  })
+})