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

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>

package/src/routes/components/Popover.svelte

@@ -1,17 +1,22 @@
 <script lang="ts">
+  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'
 
   interface Props {
     children: Snippet
+    bubble?: Snippet | null
     maxHeight?: number
   }
 
-  let { children, maxHeight = $bindable() }: Props = $props()
+  let { children, bubble, maxHeight = $bindable() }: Props = $props()
 
   setContext('scope', 'popover')
 
+  const inlineBubble = isInSplitTestVariant(SplitTest.TopScrollFormat, 1)
+
   let element: HTMLElement | null = $state(null)
   let flip = $state(false)
 
@@ -59,15 +64,24 @@
   }
 </script>
 
-<div class="popover" class:flip bind:this={element} style:--max-height={maxHeight ? maxHeight + 'px' : null} tabindex="-1" aria-hidden="true">
+<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={{ 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;
+    flex-direction: column-reverse;
+    gap: margin(0.5);
     position: absolute;
     top: calc((var(--offset) - 1px) * -1); /* Add 1 pixel to account for rounding errors */
     left: 0;
@@ -78,9 +92,18 @@
     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)));
+
+      &.inline {
+        flex-direction: column-reverse;
+      }
+    }
+
+    &.inline {
+      gap: 0;
     }
   }
 
@@ -96,5 +119,10 @@
     overflow-y: overlay;
     overflow-x: hidden;
     view-transition-name: playpilot-title-content;
+
+    .has-bubble & {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
   }
 </style>

package/src/routes/components/Title.svelte

@@ -7,28 +7,21 @@
   import type { TitleData } from '$lib/types/title'
   import { heading } from '$lib/actions/heading'
   import { removeImageUrlPrefix } from '$lib/image'
-  import type { Snippet } from 'svelte'
-  import FloatingPlaylink from './Ads/FloatingPlaylink.svelte'
-  import VideoBackground from './Ads/VideoBackground.svelte'
 
   interface Props {
     title: TitleData
     small?: boolean
     compact?: boolean
-    useVideoBackground?: boolean
-    backgroundFormat?: '' | 'landscape' | 'portrait'
-    children?: Snippet
-    background?: Snippet | null
   }
 
-  const { title, small = false, compact = false, useVideoBackground = false, backgroundFormat = '' }: Props = $props()
+  const { title, small = false, compact = false }: Props = $props()
 
   let posterLoaded = $state(false)
   let backgroundLoaded = $state(false)
   let useBackgroundFallback = $state(false)
 </script>
 
-<div class="content {backgroundFormat}" class:small class:compact data-playpilot-link-injections-title>
+<div class="content" class:small class:compact data-playpilot-link-injections-title>
   <div class="header">
     {#if !compact}
       <div class="top">
@@ -67,26 +60,18 @@
       <Description text={title.description} blurb={title.blurb} />
     {/if}
   </div>
-
-  {#if useVideoBackground}
-    <FloatingPlaylink playlink={title.providers.find(p => p.name === 'Apple TV+')!} />
-  {/if}
 </div>
 
-<div class="background {backgroundFormat}" class:faded={compact}>
-  {#if useVideoBackground}
-    <VideoBackground />
-  {:else}
-    {#key useBackgroundFallback}
-      <img
-        src={removeImageUrlPrefix(useBackgroundFallback ? title.standing_poster : title.medium_poster)}
-        alt=""
-        class:loaded={backgroundLoaded}
-        class:blur={useBackgroundFallback}
-        onload={() => backgroundLoaded = true}
-        onerror={() => useBackgroundFallback = true} />
-    {/key}
-  {/if}
+<div class="background" class:faded={compact}>
+  {#key useBackgroundFallback}
+    <img
+      src={removeImageUrlPrefix(useBackgroundFallback ? title.standing_poster : title.medium_poster)}
+      alt=""
+      class:loaded={backgroundLoaded}
+      class:blur={useBackgroundFallback}
+      onload={() => backgroundLoaded = true}
+      onerror={() => useBackgroundFallback = true} />
+  {/key}
 </div>
 
 <style lang="scss">
@@ -142,14 +127,6 @@
     .compact & {
       padding: 0 0 margin(1);
     }
-
-    .landscape & {
-      padding-top: margin(6);
-    }
-
-    .portrait & {
-      padding-top: margin(12);
-    }
   }
 
   .top {
@@ -206,6 +183,7 @@
     left: 0;
     width: 100%;
     height: margin(12);
+    border-radius: var(--playpilot-detail-background-border-radius);
     overflow: hidden;
     background: var(--playpilot-detail-background, var(--playpilot-lighter));
     z-index: 0;
@@ -222,14 +200,6 @@
       z-index: 1;
     }
 
-    &.landscape {
-      height: margin(18);
-    }
-
-    &.portrait {
-      height: margin(24);
-    }
-
     img {
       width: 100%;
       height: 100%;

package/src/routes/components/TitleModal.svelte

@@ -2,10 +2,14 @@
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { track } from '$lib/tracking'
   import type { TitleData } from '$lib/types/title'
-  import { trackSplitTestAction } from '$lib/splitTest'
   import { onMount } from 'svelte'
   import Modal from './Modal.svelte'
   import Title from './Title.svelte'
+  import TopScroll from './Ads/TopScroll.svelte'
+  import Display from './Ads/Display.svelte'
+  import { getFirstAdOfType } from '$lib/ads'
+  import { isInSplitTestVariant } from '$lib/splitTest'
+  import { SplitTest } from '$lib/enums/SplitTest'
 
   interface Props {
     onclose: () => void,
@@ -14,20 +18,18 @@
 
   const { onclose, title }: Props = $props()
 
+  const topScrollAd = getFirstAdOfType('top_scroll')
+  const displayAd = getFirstAdOfType('card')
+
+  const isInDisplayAdFormatSplitTest = isInSplitTestVariant(SplitTest.DisplayAdPosition, 1) || isInSplitTestVariant(SplitTest.DisplayAdPosition, 2)
+
   track(TrackingEvent.TitleModalView, title)
 
   let hasTrackedScrolling = false
 
-  // This is all placeholder stuff that hardcodes a video ad for Apple TV+.
-  const useVideoBackground = title.providers.some(p => p.name === 'Apple TV+')
-  const backgroundFormat = useVideoBackground ? (Math.random() > 0.5 ? 'landscape' : 'portrait') : ''
-  const mobileSize = useVideoBackground ? (backgroundFormat === 'landscape' ? 'tall' : 'taller') : ''
-
   onMount(() => {
     const openTimestamp = Date.now()
 
-    trackSplitTestAction('initial_test', 'modal')
-
     return () => track(TrackingEvent.TitleModalClose, title, { time_spent: Date.now() - openTimestamp })
   })
 
@@ -39,6 +41,18 @@
   }
 </script>
 
-<Modal {onclose} {onscroll} {mobileSize}>
-  <Title {title} {useVideoBackground} {backgroundFormat} />
+{#snippet bubble()}
+  {#if topScrollAd}
+    <TopScroll campaign={topScrollAd} />
+  {/if}
+{/snippet}
+
+{#snippet prepend()}
+  {#if displayAd}
+    <Display campaign={displayAd} />
+  {/if}
+{/snippet}
+
+<Modal {onclose} {onscroll} prepend={isInDisplayAdFormatSplitTest ? prepend : null} bubble={topScrollAd ? bubble : null}>
+  <Title {title} />
 </Modal>