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

package/src/routes/components/Modal.svelte

@@ -5,23 +5,29 @@
   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
+    bubble?: Snippet | null
+    prepend?: Snippet | null
     onclose?: () => void
     onscroll?: () => void
   }
 
-  const { children, 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 dragHandleOffset: number = $state(0)
+  let dialogOffset: number = $state(0)
 
   const isMobile = $derived(windowWidth < 600)
 
-  $effect(() => { if (windowWidth) dragHandleOffset = dialogElement?.offsetTop || 0 })
-  $effect(() => { setTimeout(() => dragHandleOffset = dialogElement?.offsetTop || 0) }) // Set after the dialog has shown to get the proper height
+  $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')
 
@@ -32,24 +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 })
 
-    if (isMobile) 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 onkeydown={({ key }) => { if (key === 'Escape') onclose() }} bind:innerWidth={windowWidth} />
 
-<div class="modal" transition:fade|global={{ duration: 150 }}>
+<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}
+
+  {#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" style:top="{dragHandleOffset}px" transition:scaleOrFly|global>
+    <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 data-view-transition-new>
+  <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 />
@@ -65,30 +83,38 @@
 </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-width: $max-width;
     max-height: 80vh;
     overflow: auto;
     margin-top: auto;
@@ -96,10 +122,21 @@
     background: var(--playpilot-detail-background, var(--playpilot-light));
     transition: transform 200ms;
 
-    @media (min-width: 600px) {
+    @media (min-width: $max-width) {
       margin-top: 0;
       border-radius: var(--playpilot-detail-border-radius, margin(1));
-      max-height: 100%;
+      overflow: visible;
+      max-height: unset;
+    }
+
+    .has-prepend & {
+      margin-top: 0;
+    }
+
+    .has-bubble & {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      margin-top: 0;
     }
   }
 
@@ -115,6 +152,7 @@
   .drag-handle {
     z-index: 5;
     position: absolute;
+    top: var(--dialog-offset);
     left: 50%;
     transform: translateY(margin(-0.5)) translateX(-50%);
     width: margin(7);
@@ -127,12 +165,59 @@
     --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>

package/src/routes/components/Playlink.svelte

@@ -0,0 +1,185 @@
+<script lang="ts">
+  import { removeImageUrlPrefix } from '$lib/image'
+  import { t } from '$lib/localization'
+  import type { PlaylinkData } from '$lib/types/playlink'
+
+  interface Props {
+    playlink: PlaylinkData
+    hideCategory?: boolean
+    onclick?: () => void
+  }
+
+  const { playlink, hideCategory = false, onclick = () => null }: Props = $props()
+
+  const { name, url, logo_url, highlighted, cta_text, action_text, extra_info: { category } } = $derived(playlink)
+
+  const categoryStrings = {
+    SVOD: t('Stream'),
+    BUY: t('Buy'),
+    RENT: t('Rent'),
+    TVOD: t('Rent Or Buy'),
+  }
+</script>
+
+<a href={url} target="_blank" class="playlink" class:highlighted={highlighted && cta_text} class:no-category={hideCategory} {onclick} data-playlink={name} rel="sponsored">
+  <div class="playlink-content">
+    <img src={removeImageUrlPrefix(logo_url)} alt="" height="36" width="36" />
+
+    <span class="name">{name}</span>
+
+    {#if !hideCategory}
+      <span class="category" data-testid="category">{categoryStrings[category] || t('Stream')}</span>
+    {/if}
+
+    {#if cta_text}
+      <span class="cta">{cta_text}</span>
+    {/if}
+
+    <div class="action">
+      {action_text || t('Watch')}
+    </div>
+  </div>
+</a>
+
+<style lang="scss">
+  $image-size: margin(2.25);
+
+  @keyframes sheen {
+    0%, 20%, 60%, 80.01%, 100% {
+      background-position: -100% 0;
+    }
+
+    80% {
+      background-position: 100% 0;
+    }
+  }
+
+  img {
+    height: $image-size;
+    width: $image-size;
+    border-radius: margin(0.5);
+    background: rgba(0, 0, 0, 0.25);
+  }
+
+  .playlink {
+    position: relative;
+    background: var(--playpilot-playlink-background, var(--playpilot-lighter));
+    box-shadow: var(--playpilot-playlink-shadow, var(--playpilot-shadow));
+    border-radius: var(--playpilot-playlink-border-radius, margin(0.5));
+    color: var(--playpilot-playlink-text-color, var(--playpilot-text-color)) !important;
+    font-weight: var(--playpilot-playlink-font-weight, inherit);
+    font-style: var(--playpilot-playlink-font-style, normal) !important;
+    text-decoration: none !important;
+    white-space: nowrap;
+    font-size: var(--playpilot-playlinks-font-size, margin(0.75));
+    line-height: 1;
+
+    &:hover,
+    &:active {
+      filter: var(--playpilot-playlink-hover-filter, brightness(1.1));
+      background: var(--playpilot-playlink-hover-background, var(--playpilot-playlink-background, var(--playpilot-lighter))) !important;
+      text-decoration: none !important;
+    }
+
+    &.highlighted {
+      grid-column: span 2;
+
+      &::before {
+        content: "";
+        z-index: 1;
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        border-radius: inherit;
+        background: linear-gradient(to left, currentColor 20%, transparent 50%, currentColor 80%);
+        background-size: 200% 100%;
+        background-position: -100% 0;
+        opacity: 0.35;
+        pointer-events: none;
+
+        @media (prefers-reduced-motion: no-preference) {
+          animation: sheen 4000ms ease-in-out infinite;
+        }
+      }
+
+      &::after {
+        content: "";
+        z-index: 2;
+        display: block;
+        position: absolute;
+        top: 2px;
+        right: 2px;
+        bottom: 2px;
+        left: 2px;
+        border-radius: inherit;
+        background: var(--playpilot-playlink-background, var(--playpilot-lighter));
+      }
+    }
+
+    img {
+      grid-area: image;
+      margin: 0;
+    }
+  }
+
+  .playlink-content {
+    position: relative;
+    z-index: 5;
+    display: grid;
+    grid-template-areas: "image name action" "image category action";
+    grid-template-columns: $image-size auto margin(6);
+    align-items: center;
+    gap: 0 margin(0.75);
+    padding: margin(0.75);
+
+    .highlighted & {
+      grid-template-areas: "image name action" "image category action" "image cta action";
+      gap: margin(0.25) margin(0.75);
+    }
+
+    .no-category & {
+      grid-template-areas: "image name action" "image cta action";
+    }
+  }
+
+  .name {
+    grid-area: name;
+    width: 100%;
+    overflow: hidden;
+    font-weight: var(--playpilot-playlink-font-weight, 500);
+    font-family: var(--playpilot-playlink-font-family, inherit);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .category {
+    grid-area: category;
+    width: 100%;
+    font-size: var(--playpilot-playlinks-category-font-size, margin(0.625));
+    color: var(--playpilot-playlink-category-text-color, var(--playpilot-text-color-alt));
+    font-weight: var(--playpilot-playlink-category-font-weight, inherit);
+    font-family: var(--playpilot-playlink-category-font-family, inherit);
+  }
+
+  .cta {
+    grid-area: cta;
+    width: 100%;
+    font-size: var(--playpilot-playlinks-cta-font-size, var(--playpilot-playlinks-category-font-size, margin(0.625)));
+    color: var(--playpilot-playlink-cta-text-color, var(--playpilot-playlink-category-text-color, var(--playpilot-text-color)));
+    font-weight: var(--playpilot-playlink-cta-font-weight, var(--playpilot-playlink-category-font-weight, inherit));
+    font-family: var(--playpilot-playlink-cta-font-family, var(--playpilot-playlink-category-font-family, inherit));
+  }
+
+  .action {
+    grid-area: action;
+    margin-left: auto;
+    padding: margin(0.5);
+    border: var(--playpilot-playlinks-action-border, 1px solid currentColor);
+    border-radius: var(--playpilot-playlinks-action-border-radius, margin(2));
+    font-weight: var(--playpilot-playlinks-action-font-weight, 500);
+    color: var(--playpilot-playlinks-action-text-color, var(--playpilot-text-color));
+  }
+</style>

package/src/routes/components/Playlinks.svelte

@@ -6,8 +6,12 @@
   import type { PlaylinkData } from '$lib/types/playlink'
   import type { TitleData } from '$lib/types/title'
   import { heading } from '$lib/actions/heading'
+  import { isInSplitTestVariant, trackSplitTestAction } from '$lib/splitTest'
+  import { SplitTest } from '$lib/enums/SplitTest'
   import { getContext } from 'svelte'
-  import { removeImageUrlPrefix } from '$lib/image'
+  import Playlink from './Playlink.svelte'
+  import Display from './Ads/Display.svelte'
+  import { campaignToPlaylink, getFirstAdOfType } from '$lib/ads'
 
   interface Props {
     playlinks: PlaylinkData[]
@@ -17,22 +21,21 @@
   const { playlinks, title }: Props = $props()
 
   const isModal = getContext('scope') === 'modal'
+  const displayAd = getFirstAdOfType('card')
+  const showDisplayAd = displayAd && isModal && isInSplitTestVariant(SplitTest.DisplayAdPosition, 0)
+  const showPlaylinkAd = displayAd && isModal && isInSplitTestVariant(SplitTest.DisplayAdPosition, 1)
 
   let outerWidth = $state(0)
 
-  const list = $derived(outerWidth < 500)
+  // Grid turns into a list when the playlinks container is small enough
+  // It is also a list by default if a display ad is present, as that would
+  // otherwise break the layout in ways that don't make sense to fix.
+  const list = $derived(outerWidth < 500 || showDisplayAd || showPlaylinkAd)
 
-  // Remove any playlinks without logos, as these are likely sub providers.
+  // Remove any playlinks without logos, these are likely sub providers.
   const filteredPlaylinks = $derived(playlinks.filter(playlink => !!playlink.logo_url))
   const mergedPlaylink = $derived(mergePlaylinks(filteredPlaylinks))
 
-  const categoryStrings = {
-    SVOD: t('Stream'),
-    BUY: t('Buy'),
-    RENT: t('Rent'),
-    TVOD: t('Rent Or Buy'),
-  }
-
   function onclick(playlink: string): void {
     track(isModal ? TrackingEvent.TitleModalPlaylinkClick : TrackingEvent.TitlePopoverPlaylinkClick, title, { playlink })
   }
@@ -48,42 +51,25 @@
 {/if}
 
 <div class="playlinks" class:list bind:clientWidth={outerWidth}>
-  {#each mergedPlaylink as { name, url, logo_url, highlighted, cta_text, extra_info: { category } }}
-    <a href={url} target="_blank" class="playlink" class:highlighted={highlighted && cta_text} onclick={() => onclick(name)} data-playlink={name} rel="sponsored">
-      <div class="playlink-content">
-        <img src={removeImageUrlPrefix(logo_url)} alt="" height="36" width="36" />
-
-        <span class="name">{name}</span>
-        <span class="category">{categoryStrings[category] || t('Stream')}</span>
-
-        {#if cta_text}
-          <span class="cta">{cta_text}</span>
-        {/if}
-
-        <div class="action">
-          {t('Watch')}
-        </div>
-      </div>
-    </a>
+  {#each mergedPlaylink as playlink, index}
+    <Playlink {playlink} onclick={() => onclick(playlink.name)} />
+
+    <!-- Insert display ad after the first playlink -->
+    {#if showDisplayAd && (index === 0)}
+      <Display campaign={displayAd} />
+    {:else if showPlaylinkAd && (index === 0)}
+      <Playlink playlink={campaignToPlaylink(displayAd)} onclick={() => trackSplitTestAction(SplitTest.DisplayAdPosition, 'click_playlink_ad')} hideCategory />
+    {/if}
   {/each}
 
-  {#if !playlinks.length}
-    <div class="playlink empty" data-testid="playlinks-empty">
+  {#if !mergedPlaylink.length}
+    <div class="empty" data-testid="playlinks-empty">
       {t('Title Unavailable')}
     </div>
   {/if}
 </div>
 
 <style lang="scss">
-  $image-size: margin(2.25);
-
-  img {
-    height: $image-size;
-    width: $image-size;
-    border-radius: margin(0.5);
-    background: rgba(0, 0, 0, 0.25);
-  }
-
   .heading {
     margin: 0;
     color: var(--playpilot-playlinks-title-color, var(--playpilot-text-color-alt));
@@ -104,130 +90,11 @@
 
     &.list {
       grid-template-columns: 1fr;
-    }
-  }
-
-
-  @keyframes sheen {
-    0%, 20%, 60%, 80.01%, 100% {
-      background-position: -100% 0;
-    }
-
-    80% {
-      background-position: 100% 0;
-    }
-  }
-
-  .playlink {
-    position: relative;
-    background: var(--playpilot-playlink-background, var(--playpilot-lighter));
-    box-shadow: var(--playpilot-playlink-shadow, var(--playpilot-shadow));
-    border-radius: var(--playpilot-playlink-border-radius, margin(0.5));
-    color: var(--playpilot-playlink-text-color, var(--playpilot-text-color)) !important;
-    font-weight: var(--playpilot-playlink-font-weight, inherit);
-    font-style: var(--playpilot-playlink-font-style, normal) !important;
-    text-decoration: none !important;
-    white-space: nowrap;
-    font-size: var(--playpilot-playlinks-font-size, margin(0.75));
-    line-height: 1;
-
-    &:hover,
-    &:active {
-      filter: var(--playpilot-playlink-hover-filter, brightness(1.1));
-      background: var(--playpilot-playlink-hover-background, var(--playpilot-playlink-background, var(--playpilot-lighter))) !important;
-      text-decoration: none !important;
-    }
-
-    &.highlighted {
-      grid-column: span 2;
-
-      .list & {
-        grid-column: 1;
-      }
-
-      &::before {
-        content: "";
-        z-index: 1;
-        display: block;
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        border-radius: inherit;
-        background: linear-gradient(to left, currentColor 20%, transparent 50%, currentColor 80%);
-        background-size: 200% 100%;
-        background-position: -100% 0;
-        opacity: 0.35;
-        pointer-events: none;
-
-        @media (prefers-reduced-motion: no-preference) {
-          animation: sheen 4000ms ease-in-out infinite;
-        }
-      }
 
-      &::after {
-        content: "";
-        z-index: 2;
-        display: block;
-        position: absolute;
-        top: 2px;
-        right: 2px;
-        bottom: 2px;
-        left: 2px;
-        border-radius: inherit;
-        background: var(--playpilot-playlink-background, var(--playpilot-lighter));
+      :global(.playlink.highlighted) {
+        grid-column: span 1;
       }
     }
-
-    img {
-      grid-area: image;
-      margin: 0;
-    }
-  }
-
-  .playlink-content {
-    position: relative;
-    z-index: 5;
-    display: grid;
-    grid-template-areas: "image name action" "image category action";
-    grid-template-columns: $image-size auto margin(4);
-    align-items: center;
-    gap: 0 margin(0.75);
-    padding: margin(0.75);
-
-    .highlighted & {
-      grid-template-areas: "image name action" "image category action" "image cta action";
-      gap: margin(0.25) margin(0.75);
-    }
-  }
-
-  .name {
-    grid-area: name;
-    width: 100%;
-    overflow: hidden;
-    font-weight: var(--playpilot-playlink-font-weight, 500);
-    font-family: var(--playpilot-playlink-font-family, inherit);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .category {
-    grid-area: category;
-    width: 100%;
-    font-size: var(--playpilot-playlinks-category-font-size, margin(0.625));
-    color: var(--playpilot-playlink-category-text-color, var(--playpilot-text-color-alt));
-    font-weight: var(--playpilot-playlink-category-font-weight, inherit);
-    font-family: var(--playpilot-playlink-category-font-family, inherit);
-  }
-
-  .cta {
-    grid-area: cta;
-    width: 100%;
-    font-size: var(--playpilot-playlinks-cta-font-size, var(--playpilot-playlinks-category-font-size, margin(0.625)));
-    color: var(--playpilot-playlink-cta-text-color, var(--playpilot-playlink-category-text-color, var(--playpilot-text-color)));
-    font-weight: var(--playpilot-playlink-cta-font-weight, var(--playpilot-playlink-category-font-weight, inherit));
-    font-family: var(--playpilot-playlink-cta-font-family, var(--playpilot-playlink-category-font-family, inherit));
   }
 
   .disclaimer {
@@ -249,17 +116,16 @@
   }
 
   .empty {
+    grid-column: span 2;
+    padding: margin(0.75);
+    background: var(--playpilot-playlink-background, var(--playpilot-lighter));
+    box-shadow: var(--playpilot-playlink-shadow, var(--playpilot-shadow));
+    border-radius: var(--playpilot-playlink-border-radius, margin(0.5));
     white-space: initial;
     line-height: 1.35;
-  }
 
-  .action {
-    grid-area: action;
-    margin-left: auto;
-    padding: margin(0.5);
-    font-weight: var(--playpilot-playlinks-action-font-weight, 500);
-    color: var(--playpilot-playlinks-action-text-color, var(--playpilot-text-color));
-    border: var(--playpilot-playlinks-action-border, 1px solid currentColor);
-    border-radius: var(--playpilot-playlinks-action-border-radius, margin(2));
+    .list & {
+      grid-column: 1;
+    }
   }
 </style>