@playpilot/tpi 5.6.0-beta.video.7 → 5.7.0-beta.display-2

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

@@ -0,0 +1,240 @@
+<script lang="ts">
+  import { ImageDimensions } from '$lib/enums/ImageDimensions'
+  import { SplitTest } from '$lib/enums/SplitTest'
+  import { TrackingEvent } from '$lib/enums/TrackingEvent'
+  import { imageFromUUID } from '$lib/image'
+  import { isInSplitTestVariant, trackSplitTestView } from '$lib/splitTest'
+  import { track } from '$lib/tracking'
+  import type { Campaign } from '$lib/types/campaign'
+  import { fade } from 'svelte/transition'
+
+  interface Props {
+    campaign: Campaign
+  }
+
+  const { campaign }: Props = $props()
+
+  trackSplitTestView(SplitTest.TopScrollFormat)
+
+  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 inline = isInSplitTestVariant(SplitTest.TopScrollFormat, 1)
+  const simple = $derived(format === 'large')
+
+  const backgroundImage = $derived(imageFromUUID(backgroundImageUUID, ImageDimensions.TopScrollBackground))
+  const contentImage = $derived(imageFromUUID(backgroundImageUUID, ImageDimensions.TopScrollContent))
+
+  let clientWidth = $state(0)
+  let tooltipVisible = $state(false)
+
+  function trackClick(): void {
+    track(TrackingEvent.TopScrollClick, null, { campaign_name: campaign.campaign_name })
+  }
+
+  function toggleTooltip(event: MouseEvent): void {
+    event.preventDefault()
+    event.stopPropagation()
+
+    tooltipVisible = !tooltipVisible
+  }
+</script>
+
+<a
+  {href}
+  target="_blank"
+  class="top-scroll"
+  class:simple
+  class:inline
+  tabindex="-1"
+  onclick={trackClick}
+  rel="sponsored"
+  style:--width="{clientWidth}px"
+  bind:clientWidth>
+  <div class="content">
+    {#if simple}
+      <img class="content-image" src={contentImage} alt={header} width="728" height="90" />
+    {:else}
+      {#if logo}
+        <img class="logo" src={logo} 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('{backgroundImage}')"></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">
+  $border-radius-size: var(--playpilot-top-scroll-border-radius, var(--playpilot-popover-border-radius, margin(1)));
+
+  .top-scroll {
+    position: relative;
+    display: block;
+    width: 100%;
+    border-radius: $border-radius-size;
+    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;
+
+    &.inline {
+      border-radius: $border-radius-size $border-radius-size 0 0;
+    }
+  }
+
+  .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: $border-radius-size;
+    background-image: var(--background);
+    background-position: center;
+    background-size: cover;
+    opacity: 0.4;
+
+    .top-scroll:hover & {
+      filter: brightness(1.15);
+    }
+
+    .inline & {
+      border-radius: $border-radius-size $border-radius-size 0 0;
+    }
+  }
+
+  .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/DragHandle.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  interface Props {
+    target?: HTMLElement
+    threshold?: number
+    isDragging?: boolean
+    passedThreshold?: boolean
+    onpassed: () => void
+  }
+
+  let {
+    target,
+    threshold = 100,
+    isDragging = $bindable(false),
+    passedThreshold = $bindable(false),
+    onpassed = () => null,
+  }: Props = $props()
+
+  let movementStartY = $state(0)
+  let movementCurrentY = $state(0)
+  let handleElement: HTMLElement | null = $state(null)
+  let hasBeenDragged = $state(false) // This is used to prevent the element from transitioning into view on mount
+
+  const difference = $derived(Math.max(movementCurrentY - movementStartY, 0))
+
+  $effect(() => {
+    passedThreshold = difference > threshold
+  })
+
+  export function start(event: TouchEvent): void {
+    if (!event) return
+    if (!target) return
+
+    isDragging = true
+    hasBeenDragged = true
+
+    movementStartY = event.touches[0].pageY
+    target.style.transitionDuration = '0ms'
+  }
+
+  export function move(event: TouchEvent): void {
+    if (!event) return
+    if (!target) return
+    if (!isDragging) return
+
+    movementCurrentY = event.touches[0].pageY
+
+    target.style.transform = `translateY(${difference}px)`
+    handleElement!.style.transform = `translateY(${difference}px)`
+  }
+
+  export function end(): void {
+    if (!target) return
+    if (!isDragging) return
+
+    isDragging = false
+
+    if (passedThreshold) {
+      onpassed()
+    } else {
+      target.removeAttribute('style')
+      handleElement!.removeAttribute('style')
+    }
+
+    movementStartY = 0
+    movementCurrentY = 0
+  }
+</script>
+
+<svelte:window ontouchmove={move} ontouchend={end} />
+
+<div class="handle" class:dragging={isDragging} class:dragged={hasBeenDragged} bind:this={handleElement} ontouchstart={start}></div>
+
+<style lang="scss">
+  .handle {
+    position: relative;
+    width: 100%;
+    height: var(--playpilot-drag-handle-height, margin(3));
+
+    &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      top: calc(50% - (var(--playpilot-drag-handle-bar-height, margin(0.25)) / 2));
+      width: 100%;
+      height: var(--playpilot-drag-handle-bar-height, margin(0.25));
+      border-radius: margin(1);
+      background: var(--playpilot-drag-handle-color, currentColor);
+      opacity: 0.65;
+      transition: opacity 100ms, scale 100ms;
+    }
+
+    &.dragged {
+      transition: transform 200ms;
+    }
+
+    &.dragging {
+      transition: none;
+
+      &::before {
+        scale: 1.5 1;
+        opacity: 1;
+      }
+    }
+  }
+</style>

package/src/routes/components/Modal.svelte

@@ -2,17 +2,32 @@
   import { fade, fly, scale, type TransitionConfig } from 'svelte/transition'
   import IconClose from './Icons/IconClose.svelte'
   import RoundButton from './RoundButton.svelte'
+  import DragHandle from './DragHandle.svelte'
   import { onMount, setContext, type Snippet } from 'svelte'
   import { prefersReducedMotion } from 'svelte/motion'
+  import { isInSplitTestVariant } from '$lib/splitTest'
+  import { SplitTest } from '$lib/enums/SplitTest'
 
   interface Props {
     children: Snippet
-    mobileSize?: '' | 'tall' | 'taller'
+    bubble?: Snippet | null
+    prepend?: Snippet | null
     onclose?: () => void
     onscroll?: () => void
   }
 
-  const { children, mobileSize = '', onclose = () => null, onscroll = () => null }: Props = $props()
+  const { children, bubble, prepend, 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)
+
+  const isMobile = $derived(windowWidth < 600)
+
+  $effect(() => { if (windowWidth) dialogOffset = dialogElement?.offsetTop || 0 })
+  $effect(() => { setTimeout(() => dialogOffset = dialogElement?.offsetTop || 0) }) // Set after the dialog has shown to get the proper height
 
   setContext('scope', 'modal')
 
@@ -23,20 +38,36 @@
     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 (isMobile) return fly(node, { duration: 250, ...options })
     return scale(node, { duration: 150, start: 0.85 })
   }
 </script>
 
-<svelte:window on:keydown={({ key }) => { if (key === 'Escape') onclose() }} />
+<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}
+    <div class="prepend" transition:scaleOrFly|global={{ y: -10 }}>
+      {@render prepend()}
+    </div>
+  {/if}
 
-<div class="modal" transition:fade|global={{ duration: 150 }}>
-  <div class="dialog {mobileSize}" {onscroll} role="dialog" aria-labelledby="title" transition:scaleOrFly|global data-view-transition-new>
+  {#if bubble}
+    <div class="bubble" class:inline={inlineBubble} transition:scaleOrFly|global={{ y: inlineBubble ? window.innerHeight : -10 }}>
+      {@render bubble()}
+    </div>
+  {/if}
+
+  {#if isMobile}
+    <div class="drag-handle" transition:scaleOrFly|global>
+      <DragHandle target={dialogElement!} onpassed={() => onclose()} />
+    </div>
+  {/if}
+
+  <div class="dialog" {onscroll} bind:this={dialogElement} role="dialog" aria-labelledby="title" transition:scaleOrFly|global={{ y: window.innerHeight }} data-view-transition-new>
     <div class="close">
       <RoundButton onclick={() => onclose()}>
         <IconClose />
@@ -52,56 +83,63 @@
 </div>
 
 <style lang="scss">
+  $max-width: 600px;
+
   .modal {
+    --playpilot-detail-background-border-radius: var(--playpilot-detail-border-radius, #{margin(1)} #{margin(1)} 0 0);
     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;
+    overflow: auto;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--playpilot-detail-backdrop, rgba(0, 0, 0, 0.65));
 
-    @media (min-width: 600px) {
-      padding: margin(2);
+    @media (min-width: $max-width) {
+      padding: margin(2) 0;
     }
-  }
 
+    &.has-bubble {
+      --playpilot-detail-background-border-radius: 0;
+    }
+  }
 
   .dialog {
     z-index: 1;
     position: relative;
     width: 100%;
-    max-width: 600px;
-    max-height: 80dvh;
+    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));
+    transition: transform 200ms;
 
-    &.tall {
-      @media (max-width: 599px) {
-        max-height: 90dvh;
-      }
+    @media (min-width: $max-width) {
+      margin-top: 0;
+      border-radius: var(--playpilot-detail-border-radius, margin(1));
+      overflow: visible;
+      max-height: unset;
     }
 
-    &.taller {
-      @media (max-width: 599px) {
-        max-height: 95dvh;
-      }
+    .has-prepend & {
+      margin-top: 0;
     }
 
-    @media (min-width: 600px) {
+    .has-bubble & {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
       margin-top: 0;
-      border-radius: var(--playpilot-detail-border-radius, margin(1));
-      max-height: 100%;
     }
   }
 
-
   .backdrop {
     z-index: 0;
     position: absolute;
@@ -111,18 +149,75 @@
     left: 0;
   }
 
+  .drag-handle {
+    z-index: 5;
+    position: absolute;
+    top: var(--dialog-offset);
+    left: 50%;
+    transform: translateY(margin(-0.5)) translateX(-50%);
+    width: margin(7);
+    color: var(--playpilot-text-color);
+  }
+
   .close {
     --playpilot-button-background: var(--playpilot-modal-close-button-background, var(--playpilot-content));
     --playpilot-button-shadow: var(--playpilot-modal-close-button-shadow, var(--playpilot-shadow));
     --playpilot-button-padding: var(--playpilot-modal-close-button-padding, 0.5rem);
     --playpilot-button-text-color: var(--playpilot-modal-close-button-text-color, var(--playpilot-text-color-alt));
     z-index: 5;
-    position: absolute;
-    top: margin(1);
+    position: fixed;
+    top: calc(var(--dialog-offset) + margin(1));
     right: margin(1);
 
+    @media (min-width: $max-width) {
+      position: absolute;
+      top: margin(1);
+    }
+
     &:hover {
       filter: brightness(1.1);
     }
   }
+
+  .prepend {
+    z-index: 1;
+    position: relative;
+    width: calc(100% - margin(1));
+    max-width: $max-width;
+    padding-top: margin(3);
+    margin: auto auto margin(0.5);
+
+    @media (min-width: $max-width) {
+      padding-top: 0;
+      margin-top: 0;
+    }
+  }
+
+  .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 0 margin(0.5);
+    }
+
+    &.inline {
+      width: 100%;
+      margin: auto 0 0;
+
+      @media (min-width: $max-width) {
+        margin-top: 0;
+      }
+    }
+
+    .prepend + & {
+      &:not(.inline) {
+        margin-top: 0;
+      }
+    }
+  }
 </style>