@playpilot/tpi 5.32.3 → 5.33.0-beta.explore.10

package/src/lib/injection.ts

@@ -1,23 +1,18 @@
-import { mount, unmount } from 'svelte'
-import TitlePopover from '../routes/components/TitlePopover.svelte'
-import AfterArticlePlaylinks from '../routes/components/Playlinks/AfterArticlePlaylinks.svelte'
 import { cleanPhrase, findNumberOfMatchesInString, findShortestMatchBetweenPhrases, findTextNodeContaining, getIndexOfPhraseInElement, getIndexOfPhraseInBoundary, getNumberOfLeadingAndTrailingSpaces, isNodeInLink, replaceBetween, replaceStartingFrom, findSurroundingPhrases } from './text'
 import type { LinkInjection, LinkInjectionTypes } from './types/injection'
-import { isHoldingSpecialKey } from './event'
-import { playFallbackViewTransition } from './viewTransition'
-import { prefersReducedMotion } from 'svelte/motion'
 import { getNumberOfOccurrencesInArray } from './array'
-import { mobileBreakpoint } from './constants'
-import { destroyAllModals, openModal } from './modal'
-import InTextDisclaimer from '../routes/components/InTextDisclaimer.svelte'
+import { destroyAllModals, openModalForInjectedLink } from './modal'
+import { getSplitTestVariantName } from './splitTest'
+import { SplitTest } from './enums/SplitTest'
+import { colorLuminance } from './color'
+import { clearCurrentlyHoveredInjection, destroyLinkPopover, destroyLinkPopoverOnMouseleave, isPopoverActive, openPopoverForInjectedLink } from './popover'
+import { clearAfterArticlePlaylinks, insertAfterArticlePlaylinks } from './afterArticle'
+import { clearInTextDisclaimer, insertInTextDisclaimer } from './disclaimer'
 
 export const keyDataAttribute = 'data-playpilot-injection-key'
 export const keySelector = `[${keyDataAttribute}]`
 
-let currentlyHoveredInjection: EventTarget | null = null
-let activePopoverInsertedComponent: object | null = null
-let afterArticlePlaylinkInsertedComponent: object | null = null
-let inTextDisclaimerInsertComponent: object | null = null
+const linksIntersectionObserver = typeof window !== 'undefined' ? new IntersectionObserver(animateLink) : null
 
 /**
  * Return a list of all valid text containing elements that may get injected into.
@@ -306,6 +301,19 @@ function createLinkInjectionElement(injection: LinkInjection): { injectionElemen
   linkElement.target = '_blank'
   linkElement.rel = 'noopener nofollow noreferrer'
 
+  // Part of a split test, insert an absolute positioned icon in the top right of links.
+  if (getSplitTestVariantName(SplitTest.InTextEngagement) === 'Clapper Icon' || getSplitTestVariantName(SplitTest.InTextEngagement) === 'Play Icon') {
+    const iconElement = document.createElement('span')
+    iconElement.classList.add('playpilot-injection-info-icon')
+    iconElement.dataset.playpilotElement = 'true'
+
+    const playIcon = '<svg width="8" height="8" viewBox="0 0 8 8" fill="none"><path d="M7.66011 4.53958C8.1133 4.31131 8.1133 3.68869 7.6601 3.46042L0.930122 0.0706345C0.507292 -0.142339 8.99396e-08 0.151949 8.42451e-08 0.610212L0 7.38979C-5.69452e-09 7.84805 0.507291 8.14234 0.930122 7.92937L7.66011 4.53958Z" fill="currentColor"/></svg>'
+    const clapperIcon = '<svg width="10" height="12" viewBox="0 0 13 16" fill="none"><rect x="0.950195" y="6.56641" width="12.0498" height="8.80563" rx="1" fill="currentColor" /><rect y="5.92969" width="12" height="2.4" rx="0.5" transform="rotate(-29.6116 0 5.92969)" fill="currentColor" /><path d="M8.82314 11.4484C9.02159 11.3443 9.02159 11.0602 8.82314 10.956L5.87605 9.40918C5.69089 9.312 5.46875 9.44629 5.46875 9.6554L5.46875 12.749C5.46875 12.9582 5.69089 13.0924 5.87605 12.9953L8.82314 11.4484Z" fill="white" /></svg>'
+
+    iconElement.innerHTML = getSplitTestVariantName(SplitTest.InTextEngagement) === 'Clapper Icon' ? clapperIcon : playIcon
+    linkElement.insertAdjacentElement('beforeend', iconElement)
+  }
+
   injectionElement.insertAdjacentElement('beforeend', linkElement)
 
   return { injectionElement, linkElement }
@@ -410,43 +418,12 @@ function addCSSVariablesToLinks(): void {
  * Add event listeners to all injected links. These events are for both the popover and the modal.
  */
 function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
-  // Open modal on click
+  window.addEventListener('mousemove', destroyLinkPopoverOnMouseleave)
   window.addEventListener('click', (event) => {
-    if (isHoldingSpecialKey(event)) return
-
-    let target = event.target as HTMLElement | null
-    if (!target) return
-
-    if (!target.hasAttribute(keyDataAttribute)) target = target.closest(keySelector)
-    if (!target) return
-
-    const key = target.getAttribute(keyDataAttribute)
-    if (!key) return
-
-    const injection = injections.find(injection => key === injection.key)
-    if (!injection) return
-
-    event.preventDefault()
-
-    playFallbackViewTransition(() => {
-      destroyLinkPopover(false)
-      openModal({ event, injection, data: injection.title_details })
-    }, !prefersReducedMotion.current && window.innerWidth >= mobileBreakpoint && !window.matchMedia('(pointer: coarse)').matches)
+    openModalForInjectedLink(event, injections)
   })
 
-  window.addEventListener('mousemove', (event) => {
-    if (!activePopoverInsertedComponent) return
-
-    const target = event.target as Element
-
-    // Mousemove is inside of popover or link that popover
-    if (target.hasAttribute('data-playpilot-title-popover') || target.closest('[data-playpilot-title-popover]') ||
-      target.hasAttribute(keyDataAttribute) || target.closest(keySelector)) return
-
-    destroyLinkPopover()
-  })
-
-  const createdInjectionElements = Array.from(document.querySelectorAll<HTMLElement>(keySelector))
+  const createdInjectionElements = document.querySelectorAll<HTMLElement>(keySelector)
 
   // Open and close popover on mouseenter/mouseleave
   createdInjectionElements.forEach((injectionElement) => {
@@ -456,117 +433,31 @@ function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
     if (!injection) return
 
     injectionElement.addEventListener('mouseenter', (event) => {
-      if (!activePopoverInsertedComponent) openLinkPopover(event, injection)
+      if (!isPopoverActive()) openPopoverForInjectedLink(event, injection)
     })
 
-    injectionElement.addEventListener('mouseleave', () => {
-      currentlyHoveredInjection = null
-    })
-  })
-}
-
-
-
-/**
- * When a link is hovered, it is shown as a popover. The component is mounted when a mouse enters the link,
- * and removed when clicked or on mouseleave.
- */
-function openLinkPopover(event: MouseEvent, injection: LinkInjection): void {
-  // Skip touch devices
-  if (window.matchMedia('(pointer: coarse)').matches) return
-  if (activePopoverInsertedComponent) destroyLinkPopover()
-
-  const target = event.currentTarget as Element
-  currentlyHoveredInjection = target
-
-  // Only show if the link is hovered for more than 100ms. This is to prevent the popover from showing
-  // when a user just happens to mouseover as they are moving their mouse about.
-  setTimeout(() => {
-    if (currentlyHoveredInjection !== target) return // User is no longer hovering this link
-
-    activePopoverInsertedComponent = mount(TitlePopover, { target: getPlayPilotWrapperElement(), props: { event, title: injection.title_details! } })
-  }, 100)
-}
-
-/**
- * Unmount the popover, removing it from the dom
- */
-async function destroyLinkPopover(outro: boolean = true) {
-  if (activePopoverInsertedComponent) {
-    const promise = unmount(activePopoverInsertedComponent, { outro })
-
-    currentlyHoveredInjection = null
-    activePopoverInsertedComponent = null
-
-    // Await the unmount promise after setting the variables above to prevent race conditions when
-    // mounting a new popover. The promise resolves after the element has transitioned fully out.
-    await promise
-  }
+    injectionElement.addEventListener('mouseleave', clearCurrentlyHoveredInjection)
 
-  // In some cases a popover lingers even if it should have been removed. This happens sometimes during
-  // HMR during development, but I've seen it happen on production too.
-  // In that case we remove the element straight from the dom.
-  // Doing this will prevent the outro animation from playing, but this being a fallback, that's ok.
-  // TODO: Find the actual cause of this bug.
-  document.querySelectorAll<HTMLElement>('[data-playpilot-title-popover]').forEach(element => element.remove())
-}
-
-/**
- * Insert AfterArticlePlaylinks after the last valid element or at the position given in the window config object.
- * The config object contains a selector option as well as a position. This way a selector can be given and you can
- * choose to insert the after article before or after the given element.
- */
-export function insertAfterArticlePlaylinks(elements: HTMLElement[], injections: LinkInjection[]): void {
-  if (afterArticlePlaylinkInsertedComponent) return
-  if (!injections.length) return
-
-  const target = document.createElement('div')
-  const afterArticleSelector = window.PlayPilotLinkInjections?.after_article_selector
-  const insertElement = (afterArticleSelector ? document.querySelector(afterArticleSelector) : null) || elements[elements.length - 1]
-  const insertPosition = window.PlayPilotLinkInjections?.after_article_insert_position || 'afterend'
-
-  target.dataset.playpilotAfterArticlePlaylinks = 'true'
-  insertElement.insertAdjacentElement(insertPosition, target)
-
-  afterArticlePlaylinkInsertedComponent = mount(AfterArticlePlaylinks, {
-    target,
-    props: {
-      linkInjections: injections,
-      onclickmodal: (event, injection) => openModal({ event, injection, data: injection.title_details }),
-    },
+    linksIntersectionObserver!.observe(injectionElement)
   })
 }
 
-function clearAfterArticlePlaylinks(): void {
-  if (!afterArticlePlaylinkInsertedComponent) return
-
-  unmount(afterArticlePlaylinkInsertedComponent)
-  document.querySelector('[data-playpilot-after-article-playlinks]')?.remove()
-  afterArticlePlaylinkInsertedComponent = null
-}
+export function animateLink(entries: IntersectionObserverEntry[]): void {
+  if (getSplitTestVariantName(SplitTest.InTextEngagement) !== 'Animated Link') return
 
+  entries.forEach(entry => {
+    if (!entry.isIntersecting) return
 
-export function insertInTextDisclaimer(elements: HTMLElement[]) {
-  if (!window.PlayPilotLinkInjections?.config?.in_text_disclaimer_enabled) return
-  if (inTextDisclaimerInsertComponent) return
+    const linkElement = entry.target.querySelector('a')
+    if (!linkElement) return
 
-  const target = document.createElement('div')
-  const selector = window.PlayPilotLinkInjections?.config?.in_text_disclaimer_selector
-  const insertElement = (selector ? document.querySelector(selector) : null) || elements[0]
-  const insertPosition = window.PlayPilotLinkInjections?.config?.in_text_disclaimer_insert_position || 'beforebegin'
+    const linkColor = window.getComputedStyle(linkElement).color
 
-  target.dataset.playpilotInTextDisclaimer = 'true'
-  insertElement.insertAdjacentElement(insertPosition, target)
+    ;(entry.target as HTMLElement).style = `--animation-color: ${colorLuminance(linkColor, -0.5)}`
 
-  inTextDisclaimerInsertComponent = mount(InTextDisclaimer, { target })
-}
-
-function clearInTextDisclaimer(): void {
-  if (!inTextDisclaimerInsertComponent) return
-
-  unmount(inTextDisclaimerInsertComponent)
-  document.querySelector('[data-playpilot-in-text-disclaimer]')?.remove()
-  inTextDisclaimerInsertComponent = null
+    entry.target.classList.remove('animate-injection')
+    setTimeout(() => entry.target.classList.add('animate-injection'))
+  })
 }
 
 /**
@@ -590,6 +481,9 @@ export function clearLinkInjection(key: string): void {
   const element: HTMLAnchorElement | null = document.querySelector(`[${keyDataAttribute}="${key}"]`)
   if (!element) return
 
+  const playpilotElements = element.querySelectorAll('[data-playpilot-element]')
+  playpilotElements.forEach(element => element.remove())
+
   const linkContent = element.querySelector('a')?.innerHTML
   element.outerHTML = linkContent || ''
 }

package/src/lib/modal.ts

@@ -1,14 +1,20 @@
 import { mount, unmount } from "svelte"
 import { isHoldingSpecialKey } from "./event"
-import TitleModal from "../routes/components/TitleModal.svelte"
 import type { LinkInjection } from "./types/injection"
-import ParticipantModal from "../routes/components/ParticipantModal.svelte"
 import type { TitleData } from "./types/title"
 import type { ParticipantData } from "./types/participant"
 import { mobileBreakpoint } from "./constants"
-import { getPlayPilotWrapperElement } from "./injection"
+import TitleModal from "../routes/components/TitleModal.svelte"
+import ParticipantModal from "../routes/components/ParticipantModal.svelte"
+import ExploreModal from "../routes/components/Explore/ExploreModal.svelte"
+import { getPlayPilotWrapperElement, keyDataAttribute, keySelector } from "./injection"
+import { playFallbackViewTransition } from "./viewTransition"
+import { destroyLinkPopover } from "./popover"
+import { prefersReducedMotion } from "svelte/motion"
+import { trackSplitTestAction } from "./splitTest"
+import { SplitTest } from "./enums/SplitTest"
 
-type ModalType = 'title' | 'participant'
+type ModalType = 'title' | 'participant' | 'explore'
 
 type Modal = {
   injection?: LinkInjection | null
@@ -46,9 +52,9 @@ export function openModal(
 }
 
 function getModalComponentByType({ type = 'title', target, data, props = {} }: { type: ModalType, target: Element, data: TitleData | ParticipantData | null, props?: Record<string, any> }) {
-  return type === 'title' ?
-    mount(TitleModal, { target, props: { title: data as TitleData, ...props } }) :
-    mount(ParticipantModal, { target, props: { participant: data as ParticipantData, ...props  } })
+  if (type === 'participant') return mount(ParticipantModal, { target, props: { participant: data as ParticipantData, ...props  } })
+  if (type === 'explore') return mount(ExploreModal, { target, props: { ...props  } })
+  return mount(TitleModal, { target, props: { title: data as TitleData, ...props } })
 }
 
 function addModalToList({ type = 'title', injection = null, data, scrollPosition = 0, component }: Modal) {
@@ -108,3 +114,28 @@ function saveCurrentModalScrollPosition(): void {
 
   modals[modals.length - 1].scrollPosition = element.scrollTop
 }
+
+export function openModalForInjectedLink(event: MouseEvent, injections: LinkInjection[]): void {
+  if (isHoldingSpecialKey(event)) return
+
+  let target = event.target as HTMLElement | null
+  if (!target) return
+
+  if (!target.hasAttribute(keyDataAttribute)) target = target.closest(keySelector)
+  if (!target) return
+
+  const key = target.getAttribute(keyDataAttribute)
+  if (!key) return
+
+  const injection = injections.find(injection => key === injection.key)
+  if (!injection) return
+
+  event.preventDefault()
+
+  trackSplitTestAction(SplitTest.InTextEngagement, 'click')
+
+  playFallbackViewTransition(() => {
+    destroyLinkPopover(false)
+    openModal({ event, injection, data: injection.title_details })
+  }, !prefersReducedMotion.current && window.innerWidth >= mobileBreakpoint && !window.matchMedia('(pointer: coarse)').matches)
+}

package/src/lib/popover.ts

@@ -0,0 +1,71 @@
+import { mount, unmount } from 'svelte'
+import TitlePopover from '../routes/components/TitlePopover.svelte'
+import { getPlayPilotWrapperElement, keyDataAttribute, keySelector } from './injection'
+import type { LinkInjection } from './types/injection'
+
+export let currentlyHoveredInjection: EventTarget | null = null
+export let activePopoverInsertedComponent: object | null = null
+
+/**
+ * When a link is hovered it is shown as a popover. The component is mounted when a mouse enters the link,
+ * and removed when clicked or on mouseleave.
+ */
+export function openPopoverForInjectedLink(event: MouseEvent, injection: LinkInjection): void {
+  // Skip touch devices
+  if (window.matchMedia('(pointer: coarse)').matches) return
+  if (activePopoverInsertedComponent) destroyLinkPopover()
+
+  const target = event.currentTarget as Element
+  currentlyHoveredInjection = target
+
+  // Only show if the link is hovered for more than 100ms. This is to prevent the popover from showing
+  // when a user just happens to mouseover as they are moving their mouse about.
+  setTimeout(() => {
+    if (currentlyHoveredInjection !== target) return // User is no longer hovering this link
+
+    activePopoverInsertedComponent = mount(TitlePopover, { target: getPlayPilotWrapperElement(), props: { event, title: injection.title_details! } })
+  }, 100)
+}
+
+export async function destroyLinkPopover(outro: boolean = true) {
+  if (activePopoverInsertedComponent) {
+    const promise = unmount(activePopoverInsertedComponent, { outro })
+
+    currentlyHoveredInjection = null
+    activePopoverInsertedComponent = null
+
+    // Await the unmount promise after setting the variables above to prevent race conditions when
+    // mounting a new popover. The promise resolves after the element has transitioned fully out.
+    await promise
+  }
+
+  // In some cases a popover lingers even if it should have been removed. This happens sometimes during
+  // HMR during development, but I've seen it happen on production too.
+  // In that case we remove the element straight from the dom.
+  // Doing this will prevent the outro animation from playing, but this being a fallback, that's ok.
+  // TODO: Find the actual cause of this bug.
+  document.querySelectorAll<HTMLElement>('[data-playpilot-title-popover]').forEach(element => element.remove())
+}
+
+/**
+ * Destroy active the popover when the mouse leaves any popover element
+ */
+export function destroyLinkPopoverOnMouseleave(event: MouseEvent): void {
+  if (!activePopoverInsertedComponent) return
+
+  const target = event.target as Element
+
+  // Mousemove is inside of popover or link that popover
+  if (target.hasAttribute('data-playpilot-title-popover') || target.closest('[data-playpilot-title-popover]') ||
+    target.hasAttribute(keyDataAttribute) || target.closest(keySelector)) return
+
+  destroyLinkPopover()
+}
+
+export function clearCurrentlyHoveredInjection() {
+  currentlyHoveredInjection = null
+}
+
+export function isPopoverActive() {
+  return !!activePopoverInsertedComponent
+}

package/src/lib/scss/global.scss

@@ -7,8 +7,47 @@
   }
 }
 
+@keyframes animate-injection {
+  0% {
+    background-position: 0% 0%;
+  }
+
+  100% {
+    background-position: -200% 0%;
+  }
+}
+
 [data-playpilot-injection-key] {
   position: relative;
+
+  &.animate-injection a {
+    background: linear-gradient(to right, currentColor 50%, var(--animation-color), currentcolor);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-size: 200% auto;
+    animation: animate-injection 650ms 500ms ease-in-out forwards;
+  }
+}
+
+.playpilot-injection-info-icon {
+  position: relative;
+  display: inline-block;
+  height: 1em;
+
+  svg {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: -0.5em;
+    right: -0.25em;
+    font-size: 0.65em;
+  }
+
+  h1 &, h2 &, h3 &, h4 &, h5 &, h6 & {
+    display: none
+  }
 }
 
 .playpilot-injection-highlight {
@@ -21,9 +60,7 @@
 .playpilot-styled-scrollbar {
   scrollbar-color: var(--playpilot-content-light) var(--playpilot-lighter);
   scrollbar-width: thin;
-}
 
-.playpilot-styled-scrollbed {
   &::-webkit-scrollbar {
     width: margin(0.75);
   }

package/src/lib/trailer.ts

@@ -0,0 +1,22 @@
+import { mount, unmount } from "svelte"
+import { getPlayPilotWrapperElement } from "./injection"
+import type { TitleData } from "./types/title"
+import YouTubeEmbedOverlay from "../routes/components/YouTubeEmbedOverlay.svelte"
+
+let currentTrailerComponent: object | null = {}
+
+export function openTrailerOverlay(title: TitleData) {
+  const target = getPlayPilotWrapperElement()
+  // !! Temporarily falls back to a placeholder is while embeddable_url is not yet present
+  const props = { onclose: closeTrailerOverlay, embeddable_url: title.embeddable_url || 'https://www.youtube.com/watch?v=xGTq0blCPVQ' }
+
+  currentTrailerComponent = mount(YouTubeEmbedOverlay, { target, props })
+}
+
+export function closeTrailerOverlay(): void {
+  if (!currentTrailerComponent) return
+
+  unmount(currentTrailerComponent, { outro: true })
+
+  currentTrailerComponent = null
+}

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

@@ -0,0 +1,6 @@
+export type APIPaginatedResult<T> = {
+  next: string | null
+  previous: string | null
+  results: T[]
+  count?: number
+}

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

@@ -39,4 +39,16 @@ export type ConfigResponse = {
   in_text_disclaimer_text?: string
   in_text_disclaimer_selector?: string
   in_text_disclaimer_insert_position?: InsertPosition
+
+  /**
+   * These options are all relevant for the Explore component, which can be inserted as a widget on any page or as a modal.
+   * `explore_navigation_selector` is used to select the navigation element that should be copied and inserted _after_.
+   * `explore_navigation_label` will end up being the label of the navigation item, defaults to `Streaming Guide`.
+   * `explore_navigation_path` is the path that the navigation item will lead to, this will be set up by the third party.
+   * `explore_navigation_insert_position` is used to determine if the navigation item should be inserted before or after the given selector.
+   */
+  explore_navigation_selector?: string
+  explore_navigation_label?: string
+  explore_navigation_path?: string
+  explore_navigation_insert_position?: InsertPosition
 }

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

@@ -0,0 +1,2 @@
+// TODO: Add proper filter types
+export type ExploreFilter = Record<string, string>

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

@@ -1,6 +1,8 @@
 import type { ParticipantData } from './participant'
 import type { PlaylinkData } from './playlink'
 
+export type ContentType = 'movie' | 'series'
+
 export type TitleData = {
   sid: string
   slug: string
@@ -9,7 +11,7 @@ export type TitleData = {
   genres: string[]
   year: number
   imdb_score: number
-  type: 'movie' | 'series'
+  type: ContentType
   providers: PlaylinkData[]
   description: string | null
   small_poster: string
@@ -17,6 +19,7 @@ export type TitleData = {
   standing_poster: string
   title: string
   original_title: string
+  embeddable_url: string | null
   length?: number
   blurb?: string
   participants?: ParticipantData[]

package/src/routes/+page.svelte

@@ -8,8 +8,9 @@
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { fetchAds } from '$lib/api/ads'
   import { fetchConfig } from '$lib/api/config'
+  import { insertExplore, insertExploreIntoNavigation } from '$lib/explore'
   import { authorize, getAuthToken, isEditorialModeEnabled, removeAuthCookie, setEditorialParamInUrl } from '$lib/api/auth'
-  import { getSplitTestVariantName } from '$lib/splitTest'
+  import { trackSplitTestView, getSplitTestVariantName } from '$lib/splitTest'
   import { SplitTest } from '$lib/enums/SplitTest'
   import type { LinkInjectionResponse, LinkInjection, LinkInjectionTypes } from '$lib/types/injection'
   import Editor from './components/Editorial/Editor.svelte'
@@ -44,6 +45,8 @@
     if (isEditorialMode && !loading) rerender()
   })
 
+  insertExplore()
+
   onDestroy(clearLinkInjections)
 
   // This function is called when a user has properly consented via tcfapi or if no consent is required.
@@ -57,7 +60,11 @@
     fireQueuedTrackingEvents()
     track(TrackingEvent.ArticlePageView)
 
-    if (aiInjections.length || manualInjections.length) window.PlayPilotLinkInjections.ads = await fetchAds()
+    if (!aiInjections.length && !manualInjections.length) return
+
+    window.PlayPilotLinkInjections.ads = await fetchAds()
+
+    trackSplitTestView(SplitTest.InTextEngagement)
   }
 
   async function initialize(): Promise<void> {
@@ -76,6 +83,7 @@
       if (isUrlExcluded) return
 
       if (config?.custom_style) insertCustomStyle(config.custom_style || '')
+      if (config?.explore_navigation_selector) insertExploreIntoNavigation()
 
       setElements(config?.html_selector || '', config?.exclude_elements_selector || '')
     } catch(error) {
@@ -234,7 +242,7 @@
     </svelte:boundary>
   {/if}
 
-  <Debugger />
+  <Debugger onrerender={rerender} />
 </div>
 
 {#if response?.pixels?.length}
@@ -250,7 +258,8 @@
 <style lang="scss">
   @import url('$lib/scss/global.scss');
 
-  .playpilot-link-injections {
+  .playpilot-link-injections,
+  :global([data-playpilot-explore]) {
     :global(*) {
       box-sizing: border-box;
     }

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

@@ -4,7 +4,7 @@
   import { SplitTest } from '$lib/enums/SplitTest'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { imageFromUUID } from '$lib/image'
-  import { isInSplitTestVariant, trackSplitTestView } from '$lib/splitTest'
+  import { trackSplitTestView } from '$lib/splitTest'
   import { track } from '$lib/tracking'
   import type { Campaign } from '$lib/types/campaign'
   import Disclaimer from './Disclaimer.svelte'
@@ -22,7 +22,6 @@
   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))
@@ -43,7 +42,6 @@
   target="_blank"
   class="top-scroll"
   class:simple
-  class:inline
   tabindex="-1"
   rel="sponsored"
   style:--width="{clientWidth}px">
@@ -81,17 +79,13 @@
     position: relative;
     display: block;
     width: 100%;
-    border-radius: $border-radius-size;
+    border-radius: $border-radius-size $border-radius-size 0 0;
     background: black;
     color: theme(top-scroll-text-color, white);
     font-family: theme(top-scroll-font-family, font-family);
     font-size: theme(top-scroll-font-size, font-size-base);
     text-decoration: none;
     line-height: 1.35;
-
-    &.inline {
-      border-radius: $border-radius-size $border-radius-size 0 0;
-    }
   }
 
   .content {
@@ -152,7 +146,7 @@
     right: 0;
     bottom: 0;
     left: 0;
-    border-radius: $border-radius-size;
+    border-radius: $border-radius-size $border-radius-size 0 0;
     background-image: var(--background);
     background-position: center;
     background-size: cover;
@@ -161,10 +155,6 @@
     .top-scroll:hover & {
       filter: brightness(1.15);
     }
-
-    .inline & {
-      border-radius: $border-radius-size $border-radius-size 0 0;
-    }
   }
 
   .content-image {
@@ -172,14 +162,10 @@
     max-width: 100%;
     height: auto;
     background: black;
-    border-radius: $border-radius-size;
+    border-radius: $border-radius-size $border-radius-size 0 0;
 
     .top-scroll:hover & {
       filter: brightness(1.15);
     }
-
-    .inline & {
-      border-radius: $border-radius-size $border-radius-size 0 0;
-    }
   }
 </style>