@playpilot/tpi 8.40.0 → 8.41.0-beta.1

package/src/lib/types/config.d.ts

@@ -139,5 +139,4 @@ export type ConfigResponse = {
   explore_navigation_insert_position?: InsertPosition
   explore_insert_cta_in_tpi?: boolean
   explore_custom_style?: string
-  explore_use_router?: boolean
 }

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

@@ -6,18 +6,23 @@
   import { onDestroy } from 'svelte'
   import Tooltip from '../Tooltip.svelte'
   import Disclaimer from './Disclaimer.svelte'
+  import { getSplitTestVariantName } from '$lib/splitTest'
+  import { SplitTest } from '$lib/enums/SplitTest'
 
   interface Props {
     campaign: Campaign
     compact?: boolean
+    slim?: boolean
   }
 
-  const { campaign, compact = false }: Props = $props()
+  const { campaign, compact = false, slim = false }: Props = $props()
 
   const { disclaimer, content, cta, campaign_type } = $derived(campaign)
   const { header, subheader, header_logo: logo, image, video } = $derived(content)
   const { header: buttonLabel, url: href, subheader: info } = $derived(cta)
 
+  const tall = slim && getSplitTestVariantName(SplitTest.DisplayAdFormat) === 'Tall'
+
   let contentHeight = $state(0)
   let videoElement: HTMLVideoElement | null = $state(null)
 
@@ -34,8 +39,8 @@
   })
 </script>
 
-<a {href} target="_blank" class="display" class:compact rel="sponsored" {onclick} use:middlemouse={{ onclick }}>
-  {#if info}
+<a {href} target="_blank" class="display" class:compact class:slim class:tall rel="sponsored" {onclick} use:middlemouse={{ onclick }}>
+  {#if info && !slim}
     <div class="info">
       {#if compact}
         <Tooltip>
@@ -62,7 +67,7 @@
           <span class="name">{header}</span>
         {/if}
 
-        {#if subheader}
+        {#if subheader && !slim}
           <div class="subheader">{subheader}</div>
         {/if}
       </div>
@@ -90,6 +95,8 @@
 </a>
 
 <style lang="scss">
+  $background-color: rgb(110, 110, 110);
+
   .display {
     display: block;
     position: relative;
@@ -102,6 +109,16 @@
     font-family: theme(detail-font-family, font-family);
     line-height: 1.2;
     font-style: normal !important;
+
+    &.slim {
+      aspect-ratio: unset;
+      height: margin(5.5);
+      background: $background-color;
+
+      &.tall {
+        height: margin(8);
+      }
+    }
   }
 
   .info {
@@ -131,7 +148,7 @@
     bottom: 0;
     left: 0;
     padding: margin(0.5);
-    background: linear-gradient(to right, rgba(110, 110, 110, 1), rgba(85, 85, 85, 0.3));
+    background: linear-gradient(to right, $background-color, rgba(85, 85, 85, 0.3));
     font-size: margin(0.875);
     text-decoration: none;
 
@@ -142,10 +159,25 @@
         padding: margin(0.75);
       }
     }
+
+    .slim & {
+      background: transparent;
+      padding-left: margin(10.5);
+      height: 100%;
+      font-size: theme(font-size-small);
+    }
   }
 
   .logo {
     border-radius: theme(display-ad-border-radius, border-radius);
+
+    .slim & {
+      position: absolute;
+      width: margin(1.5);
+      height: margin(1.5);
+      bottom: margin(0.5);
+      left: margin(0.5);
+    }
   }
 
   .name {
@@ -176,11 +208,26 @@
     display: block;
     width: 100%;
     height: auto;
+
+    .slim & {
+      width: auto;
+      height: 100%;
+      aspect-ratio: 16 / 9;
+      background: black;
+    }
+
+    .tall & {
+      mask-image: linear-gradient(to right, white 50%, transparent);
+    }
   }
 
   .disclaimer {
     position: absolute;
     bottom: calc(var(--offset) + margin(0.25));
     right: margin(0.25);
+
+    .slim & {
+      bottom: margin(0.25);
+    }
   }
 </style>

package/src/routes/components/Debugger.svelte

@@ -3,7 +3,7 @@
   import { fetchLinkInjections } from '$lib/api/externalPages'
   import { Language } from '$lib/enums/Language'
   import { SplitTest } from '$lib/enums/SplitTest'
-  import { destroyExplore, insertExplore, useExploreRouter } from '$lib/explore'
+  import { destroyExplore, insertExplore } from '$lib/explore'
   import { getPageTextAndElements } from '$lib/injectionElements'
   import { getLanguage } from '$lib/language'
   import { getFullUrlPath } from '$lib/url'
@@ -217,14 +217,6 @@
       <button onclick={replaceWithBetaScript}>Use beta script</button>
     {/if}
 
-    {#if !useExploreRouter()}
-      <button onclick={(() => {
-        destroyExplore()
-        window.PlayPilotLinkInjections.config!.explore_use_router = !useExploreRouter()
-        insertExplore()
-      })}>Toggle new explore</button>
-    {/if}
-
     <hr />
 
     <div>

package/src/routes/components/Explore/ExploreLayout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { ExploreFilter } from '$lib/types/filter'
   import { heading } from '$lib/actions/heading'
-  import { exploreParentSelector, useExploreRouter } from '$lib/explore'
+  import { exploreParentSelector } from '$lib/explore'
   import { t } from '$lib/localization'
   import { track } from '$lib/tracking'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
@@ -57,28 +57,20 @@
         <!-- eslint-disable-next-line svelte/no-at-html-tags -->
         {@html t('Streaming Guide Disclaimer')}
       </p>
-
-      {#if !useExploreRouter()}
-        <p class="description">
-          {t('Streaming Guide Description')}
-        </p>
-      {/if}
     </div>
   </div>
 
   <Search oninput={(query) => searchQuery = query} />
 
-  {#if useExploreRouter()}
-    <div class="filter">
-      <Filter
-        {filter}
-        {searchQuery}
-        limit={clientWidth < 500}
-        showSorting={!searchQuery}
-        onchange={() => navigate('results')}
-        onempty={() => navigate('home')} />
-    </div>
-  {/if}
+  <div class="filter">
+    <Filter
+      {filter}
+      {searchQuery}
+      limit={clientWidth < 500}
+      showSorting={!searchQuery}
+      onchange={() => navigate('results')}
+      onempty={() => navigate('home')} />
+  </div>
 
   {#await isUserRegionSupported() then isSupported}
     {#if !isSupported}
@@ -161,14 +153,6 @@
     }
   }
 
-  .description {
-    max-width: theme(explore-header-max-width, 600px);
-    margin: 0;
-    color: theme(text-color-alt);
-    font-size: theme(font-size-base);
-    line-height: 1.35;
-  }
-
   .filter {
     display: flex;
     flex-direction: column;

package/src/routes/components/Explore/ExploreRouter.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import type { ExploreRoute } from '$lib/types/explore'
   import type { ExploreFilter } from '$lib/types/filter'
-  import { useExploreRouter } from '$lib/explore'
   import { track } from '$lib/tracking'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import ExploreHome from './Routes/ExploreHome.svelte'
@@ -11,29 +10,24 @@
   import ExploreModal from './Routes/ExploreModal.svelte'
 
   const routes: ExploreRoute[] = [
+    {
+      key: 'home',
+      component: ExploreHome,
+    },
     {
       key: 'results',
       component: ExploreResults,
     },
-  ]
-
-  if (useExploreRouter()) {
-    routes.unshift({
-      key: 'home',
-      component: ExploreHome,
-    })
-
-    routes.push({
+    {
       key: 'title',
       component: ExploreTitle,
-    })
-
-    routes.push({
+    },
+    {
       key: 'modal',
       component: ExploreHome,
       appendComponent: ExploreModal,
-    })
-  }
+    }
+  ]
 
   const initialRouteKey = getCurrentRouteParam() || routes[0].key
 

package/src/routes/components/Explore/Routes/ExploreHome.svelte

@@ -32,7 +32,7 @@
   }
 </script>
 
-<svelte:window {onscroll} bind:innerWidth={windowWidth} />
+<svelte:window bind:innerWidth={windowWidth} />
 
 <div data-testid="explore-home"></div>
 

package/src/routes/components/Modals/RailModal.svelte

@@ -9,6 +9,8 @@
   import IconArrow from '../Icons/IconArrow.svelte'
   import ModalCloseOverlay from './ModalCloseOverlay.svelte'
   import Display from '../Ads/Display.svelte'
+  import { SplitTest } from '$lib/enums/SplitTest'
+  import { getSplitTestVariantName, trackSplitTestView } from '$lib/splitTest'
 
   interface Props {
     items: Record<string, any>[]
@@ -27,6 +29,8 @@
   let element: HTMLElement | null = $state(null)
   let displayAd = $state(getFirstAdOfType('card'))
 
+  if (!!displayAd) trackSplitTestView(SplitTest.DisplayAdFormat)
+
   onMount(() => {
     setAvailableHeight()
 
@@ -60,9 +64,9 @@
 <svelte:window onresize={setAvailableHeight} onupdateads={() => displayAd = getFirstAdOfType('card')} />
 
 {#snippet prepend()}
-  {#if displayAd}
+  {#if displayAd && getSplitTestVariantName(SplitTest.DisplayAdFormat) !== 'Inline'}
     <div class="ad">
-      <Display campaign={displayAd} />
+      <Display campaign={displayAd} slim />
     </div>
   {/if}
 {/snippet}

package/src/routes/components/Modals/TitlesRailModal.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+  import { SplitTest } from '$lib/enums/SplitTest'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
+  import { getSplitTestVariantName } from '$lib/splitTest'
   import { track } from '$lib/tracking'
   import type { TitleData } from '$lib/types/title'
   import Title from '../Title.svelte'
@@ -16,6 +18,6 @@
 
 <RailModal items={titles} {initialIndex} {onclose} onchange={(index) => track(TrackingEvent.ExploreTitleRailSetIndex, titles[index], { index })} {...restProps}>
   {#snippet each(title, currentIndex)}
-    <Title {title} useVideoBackground={title.sid === titles[currentIndex]?.sid} />
+    <Title {title} useVideoBackground={title.sid === titles[currentIndex]?.sid} useDisplayAdSplitTest={getSplitTestVariantName(SplitTest.DisplayAdFormat) === 'Inline'} />
   {/snippet}
 </RailModal>

package/src/routes/components/Playlinks/Playlinks.svelte

@@ -7,11 +7,14 @@
   import type { TitleData } from '$lib/types/title'
   import { heading } from '$lib/actions/heading'
   import { campaignToPlaylink, getFirstAdOfType } from '$lib/api/ads'
-  import { getContext } from 'svelte'
+  import { getContext, type Snippet } from 'svelte'
   import Playlink from './Playlink.svelte'
   import Button from '../Button.svelte'
   import PlaylinksDisclaimer from './PlaylinksDisclaimer.svelte'
   import { getConfigValue } from '$lib/api/config'
+  import { getSplitTestVariantName } from '$lib/splitTest'
+  import { SplitTest } from '$lib/enums/SplitTest'
+  import Display from '../Ads/Display.svelte'
 
   type Category = PlaylinkCategory | '' | 'Other'
   type CategorizedPlaylinks = Partial<Record<Category, PlaylinkData[]>>
@@ -21,9 +24,10 @@
     playlinks: PlaylinkData[]
     title: TitleData
     limit?: number
+    children?: Snippet
   }
 
-  const { playlinks, title, limit = 3 }: Props = $props()
+  const { playlinks, title, limit = 3, children }: Props = $props()
 
   const isModal = getContext('scope') === 'modal'
   const type = getContext('type')
@@ -94,7 +98,11 @@
 
       <!-- A fake highlighted playlink as part of the display ad, to be shown after the first playlink -->
       {#if displayAd && (index === 0)}
-        <Playlink playlink={campaignToPlaylink(displayAd)} onclick={() => track(TrackingEvent.DisplayedAdPlaylickClick, title, { campaign_name: displayAd.campaign_name })} hideCategory disclaimer={displayAd.disclaimer || ''} />
+        {#if children}
+          {@render children()}
+        {:else}
+          <Playlink playlink={campaignToPlaylink(displayAd)} onclick={() => track(TrackingEvent.DisplayedAdPlaylickClick, title, { campaign_name: displayAd.campaign_name })} hideCategory disclaimer={displayAd.disclaimer || ''} />
+        {/if}
       {/if}
     {/each}
   </div>

package/src/routes/components/Rails/TitlesRail.svelte

@@ -8,7 +8,6 @@
   import { exploreModalUrl } from '$lib/routes'
   import { generateRandomHash } from '$lib/hash'
   import { getFirstTitleWithAvailableTrailer } from '$lib/trailer'
-  import { useExploreRouter } from '$lib/explore'
   import { getContext, onMount } from 'svelte'
   import type TinySlider from 'svelte-tiny-slider'
 
@@ -92,11 +91,7 @@
       return
     }
 
-    if (useExploreRouter()) {
-      openModal({ event, type: 'titles-rail', data: titles as TitleData[], returnToTitle, props: { initialIndex: index } })
-    } else {
-      openModal({ event, data: title, returnToTitle })
-    }
+    openModal({ event, type: 'titles-rail', data: titles as TitleData[], returnToTitle, props: { initialIndex: index } })
   }
 
   async function expandFirstAvailableTrailer(): Promise<void> {

package/src/routes/components/Title.svelte

@@ -14,14 +14,18 @@
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import TitleBackground from './TitleBackground.svelte'
   import TitleInfo from './TitleInfo.svelte'
+  import Display from './Ads/Display.svelte'
+  import type { Campaign } from '$lib/types/campaign'
+  import { getFirstAdOfType } from '$lib/api/ads'
 
   interface Props {
     title: TitleData
     small?: boolean
     useVideoBackground?: boolean
+    useDisplayAdSplitTest?: boolean // NOTE: Temporary split test, remove me after the DisplayAdFormat split test is gone
   }
 
-  const { title, small = false, useVideoBackground = true }: Props = $props()
+  const { title, small = false, useVideoBackground = true, useDisplayAdSplitTest = false }: Props = $props()
 
   const noAffiliate = !!window.PlayPilotLinkInjections?.no_affiliate
 
@@ -58,7 +62,11 @@
     {/if}
 
     {#if !noAffiliate}
-      <Playlinks playlinks={title.providers} {title} />
+      <Playlinks playlinks={title.providers} {title}>
+        {#if useDisplayAdSplitTest && getFirstAdOfType('card')}
+          <Display campaign={getFirstAdOfType('card')!} />
+        {/if}
+      </Playlinks>
     {/if}
 
     <ParticipantsRail {title} />

package/src/routes/elements/+page.svelte

@@ -39,10 +39,21 @@
 
   // Used to re-render some elements with a key
   let renderKey = Math.random()
+
+  function insertMockAd(): void {
+    // @ts-ignore
+    window.PlayPilotLinkInjections.consents = {
+      ads: true
+    }
+
+    window.PlayPilotLinkInjections.ads = [campaign]
+  }
 </script>
 
 <h1>Elements</h1>
 
+<button onclick={insertMockAd}>Insert mock ad</button>
+
 <p>This page lays out various elements used in TPI. It does not currently include editor elements.</p>
 
 <h2>Youtube Embed</h2>
@@ -173,7 +184,15 @@
 <div class="group">
   <div>
     <h3>Ads/Display.svelte</h3>
-    <div class="item"><Display {campaign} /></div>
+    <div class="item">
+      <Display {campaign} />
+
+      Compact (Used in popover)
+      <Display {campaign} compact />
+
+      Slim (Used in rail modals)
+      <Display {campaign} slim />
+    </div>
   </div>
 
   <div>

package/src/routes/explore/+page.svelte

@@ -6,9 +6,8 @@
    */
 
   import { browser } from '$app/environment'
-  import { destroyExplore, insertExplore, insertExploreIntoNavigation, useExploreRouter } from '$lib/explore'
+  import { insertExplore, insertExploreIntoNavigation } from '$lib/explore'
   import Debugger from '../components/Debugger.svelte'
-
   if (browser) {
     // @ts-ignore
     window.PlayPilotLinkInjections = {
@@ -18,7 +17,6 @@
         explore_navigation_label: 'Streaming guide (inserted)',
         explore_navigation_path: '/explore',
         explore_custom_style: 'main { border: 2px solid white }',
-        explore_use_router: true,
         open_tpi_links_in_explore: true,
       },
       require_consent: false,
@@ -34,11 +32,7 @@
   <title>PlayPilot Link Injections - Explore</title>
 </svelte:head>
 
-<button onclick={(() => {
-  destroyExplore()
-  window.PlayPilotLinkInjections.config!.explore_use_router = !useExploreRouter()
-  insertExplore()
-})}>Toggle new explore</button>
+
 
 <main>
   <!--

package/src/tests/lib/api/ads.test.js

@@ -72,6 +72,14 @@ describe('$lib/api/ads', () => {
       await expect(async () => await fetchAds()).rejects.toThrowError()
       expect(track).toHaveBeenCalledWith(TrackingEvent.AdsFetchFailed, null, { status: 505 })
     })
+
+    it('Should include set region', async () => {
+      window.PlayPilotLinkInjections.region = 'uk'
+
+      await fetchAds()
+
+      expect(api).toHaveBeenCalledWith(expect.stringContaining('&region=uk'))
+    })
   })
 
   describe('getFirstAdOfType', () => {