@playpilot/tpi 8.17.1 → 8.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.17.1",
+	"version": "8.19.0",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/api/titles.ts

@@ -18,9 +18,9 @@ export async function fetchTitles(params: Record<string, any> = {}): Promise<API
   }
 
   if (params.region !== null) {
-    const region = params.region || await getRegionBasedOnIp()
+    let region = params.region || await getRegionBasedOnIp()
 
-    if (!await isUserRegionSupported(region)) return { next: '', previous: '', results: [] }
+    if (!await isUserRegionSupported(region)) region = 'gl'
 
     params.region = region
   }

package/src/lib/constants.ts

@@ -1,6 +1,7 @@
 export const playPilotBaseUrl = 'https://www.playpilot.com'
 export const apiBaseUrl = 'https://partner-api.playpilot.tech/1.0'
 export const imageBaseUrl = 'https://img-external.playpilot.tech'
+export const cdnBaseUrl = `https://cdn.jsdelivr.net/npm/@playpilot/tpi@${__SCRIPT_VERSION__}`
 
 export const imagePlaceholderDataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAAB+CAMAAACNgsajAAAAb1BMVEU1Q2fI1N5YZoNVYoFndI9qd5JBT3FFU3S8yNS3xNC4xNFBTnDG0t2lscJJV3e9ytaptcWToLOOm6/BzdiZprh3hJ1aaIWJlatte5VPXHx7iJ9zgZlfbYk3RWmNmq5jcY1XZIO2wtCjsMB+i6I9S25IprTeAAABqUlEQVRo3u3W2ZKCMBCF4T5ExRmRVXBfZnn/Z5wKiU5pz1AJ7ZXV/x03HxVCB0jTNE3TNE3TNO0l2rbPNxcFdk8334AINTUD5eSaWbPoQs0qw0CVN98BzNNgE4NVv+ZHsJliuNVt7UgotATAafp/5mZiG4waAB0N5k0kUeg0wMykKDfLvRTl5pxyCFFupjQVo9ykiRTlphzl5nNQNu8C9Hv2lylDT0W2NMyUoeXdLC68KUNLuM7O9HskQ0uLLAEUR2aOQjfORE5LzHP2PMehxpl2k6otM8eh2aQGkBlieyRBYbs3y5Rk6IPZn8mT65XJR6LcROGErwaoxqLm4XvkiTVsy1FoYe5n06zcjazp1Wk0umHz3k9BT6+bXjXR6PnRtKpr755PfRjx4WPz7tXW/26gGYnOvOmrM7xtiK4qYtDOrpGZtnR7JFcSi+Z1XZt7k5d4NCZmcrWxqMzkbRgqN+nAULHpx1RiylFvftJwlxjUz2bWdpPB7NnSxZih5RFrD20Vai4izGOgeenPukMSUE6hte5denI7NMyU1xrSNE3TNE3TNE17hX4ADHsS0j0OCOoAAAAASUVORK5CYII='
 export const mobileBreakpoint = 600

package/src/lib/data/translations.ts

@@ -301,6 +301,11 @@ export const translations = {
     [Language.Swedish]: 'Tyvärr stöds inte din region',
     [Language.Danish]: 'Beklager, din region understøttes ikke',
   },
+  'Show Count More': {
+    [Language.English]: 'Show [[count]] more',
+    [Language.Swedish]: 'Visa [[count]] till',
+    [Language.Danish]: 'Vis [[count]] mere',
+  },
 
   // List titles
   'List: Trending': {

package/src/lib/enums/TrackingEvent.ts

@@ -16,10 +16,10 @@ export const TrackingEvent = {
   ParticipantModalClose: 'ali_participant_modal_close',
 
   // Popover
-  TitlePopoverView: 'ali_title_popover_view',
-  TitlePopoverClose: 'ali_title_popover_close',
-  TitlePopoverSaveClick: 'ali_title_popover_save_click',
-  TitlePopoverPlaylinkClick: 'ali_title_popover_playlink_click',
+  InjectionPopoverView: 'ali_injection_popover_view',
+  InjectionPopoverClose: 'ali_injection_popover_close',
+  InjectionPopoverSaveClick: 'ali_injection_popover_save_click',
+  InjectionPopoverPlaylinkClick: 'ali_injection_popover_playlink_click',
 
   // Rails
   SimilarTitleClick: 'ali_similar_title_click',

package/src/lib/fakeData.ts

@@ -43,38 +43,6 @@ export const title: TitleData = {
   embeddable_url: null,
 }
 
-export const linkInjections: LinkInjection[] = [{
-  sid: '1',
-  title: 'Quan',
-  sentence: 'In an interview with Epire Magazine, Quan reveals he quested starring in Love Hurts',
-  playpilot_url: 'https://playpilot.com/movie/example/',
-  key: 'some-key-1',
-  title_details: { ...title, sid: '1' },
-}, {
-  sid: '2',
-  title: 'The Long Kiss Goodnight',
-  sentence: 'The movie is in a similar vein to successful films such as The Long Kiss Goodnight and Nobody',
-  playpilot_url: 'https://playpilot.com/movie/example-2/',
-  key: 'some-key-2',
-  after_article: false,
-  title_details: { ...title, sid: '2' },
-}, {
-  sid: '3',
-  title: 'Nobody',
-  sentence: 'The movie is in a similar vein to successful films such as The Long Kiss Goodnight and Nobody',
-  playpilot_url: 'https://playpilot.com/movie/example-3/',
-  key: 'some-key-3',
-  after_article: true,
-  title_details: { ...title, sid: '3' },
-  manual: false,
-}, {
-  sid: '4',
-  title: 'The Wheel of Time',
-  sentence: '(The more I think about the Bene Gesserit the more I see how much they influenced not just the Jedi in Star Wars but also the Aes Sedai in The Wheel of Time and even the sorceresses in The Witcher books, though Herbert\'s order is the most ominous and terrifying of them all)',
-  playpilot_url: 'https://playpilot.com/movie/example-4/',
-  key: 'some-key-4',
-}]
-
 export const participants: ParticipantData[] = [
   {
     sid: 'pr5C5W',
@@ -144,6 +112,50 @@ export const participants: ParticipantData[] = [
   },
 ]
 
+export const linkInjections: LinkInjection[] = [{
+  sid: '1',
+  title: 'Quan',
+  sentence: 'In an interview with Epire Magazine, Quan reveals he quested starring in Love Hurts',
+  playpilot_url: 'https://playpilot.com/movie/example/',
+  key: 'some-key-1',
+  title_details: { ...title, sid: '1' },
+  type: 'title',
+}, {
+  sid: '2',
+  title: 'The Long Kiss Goodnight',
+  sentence: 'The movie is in a similar vein to successful films such as The Long Kiss Goodnight and Nobody',
+  playpilot_url: 'https://playpilot.com/movie/example-2/',
+  key: 'some-key-2',
+  after_article: false,
+  title_details: { ...title, sid: '2' },
+  type: 'title',
+}, {
+  sid: '3',
+  title: 'Nobody',
+  sentence: 'The movie is in a similar vein to successful films such as The Long Kiss Goodnight and Nobody',
+  playpilot_url: 'https://playpilot.com/movie/example-3/',
+  key: 'some-key-3',
+  after_article: true,
+  title_details: { ...title, sid: '3' },
+  manual: false,
+  type: 'title',
+}, {
+  sid: '4',
+  title: 'The Wheel of Time',
+  sentence: '(The more I think about the Bene Gesserit the more I see how much they influenced not just the Jedi in Star Wars but also the Aes Sedai in The Wheel of Time and even the sorceresses in The Witcher books, though Herbert\'s order is the most ominous and terrifying of them all)',
+  playpilot_url: 'https://playpilot.com/movie/example-4/',
+  key: 'some-key-4',
+  type: 'title',
+}, {
+  sid: '5',
+  title: 'Jack Black',
+  sentence: 'Jason Momoa (”Aquaman”), Jack Black (”Nacho Libre”) och Jennifer Coolidge (”The White Lotus”) medverkar i den Jared Hess-regisserade (”Napolen Dynamite”) filmen.',
+  playpilot_url: 'https://playpilot.com/name/pr875J-jack-black/',
+  key: 'some-key-5',
+  participant_details: participants[2],
+  type: 'participant',
+}]
+
 export const campaign: Campaign = {
   campaign_format: 'card',
   campaign_type: 'image',

package/src/lib/injection.ts

@@ -172,7 +172,7 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
 
   insertInTextWidgets(foundInjections)
 
-  return mergedInjections.filter(i => i.title_details).map((injection, index) => {
+  return mergedInjections.filter(injection => hasValidTypeData(injection)).map((injection, index) => {
     const hasManualEquivalent = !injection.manual && isAvailableAsManualInjection(injection, index, mergedInjections)
     const duplicate = injection.duplicate ?? hasManualEquivalent
 
@@ -390,11 +390,11 @@ export function separateLinkInjectionTypes(injections: LinkInjection[]): LinkInj
 }
 
 export function isValidInjection(injection: LinkInjection): boolean {
-  return !injection.inactive && !injection.removed && !injection.duplicate && !!injection.title_details && isValidPlaylinkType(injection)
+  return !injection.inactive && !injection.removed && !injection.duplicate && hasValidTypeData(injection) && isValidPlaylinkType(injection)
 }
 
 /**
- * An injection can have be of various playlink types, when all are false equivalent, the link is not valid.
+ * An injection can be of various playlink types, when all are false equivalent, the link is not valid.
  * It should be treated similar to an inactive playlink in this case.
  */
 export function isValidPlaylinkType(injection: LinkInjection): boolean {
@@ -402,16 +402,10 @@ export function isValidPlaylinkType(injection: LinkInjection): boolean {
   return !!injection.after_article
 }
 
-/**
- * Filter links for in-text injections, removing after article, inactive, removed, duplicate, and items without title_details
- */
 export function filterInvalidInTextInjections(injections: LinkInjection[]): LinkInjection[] {
   return filterRemovedAndInactiveInjections(injections).filter(i => i.in_text !== false && isValidInjection(i))
 }
 
-/**
- * Filter links for after article injections, removing in-text only, inactive, removed, duplicate, and items without title_details
- */
 export function filterInvalidAfterArticleInjections(injections: LinkInjection[]): LinkInjection[] {
   return filterRemovedAndInactiveInjections(injections).filter(i => i.after_article === true && isValidInjection(i))
 }
@@ -456,6 +450,13 @@ export function isEquivalentInjection(injection1: LinkInjection, injection2: Lin
   return injection1.title === injection2.title && cleanPhrase(injection1.sentence) === cleanPhrase(injection2.sentence)
 }
 
+export function hasValidTypeData(injection: LinkInjection): boolean {
+  if (injection.type === 'title' && !!injection.title_details) return true
+  if (injection.type === 'participant' && !!injection.participant_details) return true
+
+  return false
+}
+
 export function getPlayPilotWrapperElement(): Element {
   return document.querySelector('[data-playpilot-link-injections]') || document.body
 }

package/src/lib/modal.ts

@@ -131,7 +131,9 @@ export function openModalForInjectedLink(event: MouseEvent, injections: LinkInje
   event.preventDefault()
 
   playFallbackViewTransition(() => {
+    const data = injection.title_details || injection.participant_details
+
     destroyLinkPopover(false)
-    openModal({ event, injection, data: injection.title_details })
+    openModal({ event, injection, data, type: injection.type })
   }, !prefersReducedMotion.current && window.innerWidth >= mobileBreakpoint && !window.matchMedia('(pointer: coarse)').matches)
 }

package/src/lib/popover.ts

@@ -1,29 +1,30 @@
 import { mount, unmount } from 'svelte'
-import TitlePopover from '../routes/components/TitlePopover.svelte'
 import { getPlayPilotWrapperElement, keyDataAttribute, keySelector } from './injection'
 import type { LinkInjection } from './types/injection'
+import InjectionPopover from '../routes/components/InjectionPopover.svelte'
 
 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
+  const currentTarget = event.currentTarget as Element
+  currentlyHoveredInjection = currentTarget
 
   // 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
+    if (currentlyHoveredInjection !== currentTarget) return
 
-    activePopoverInsertedComponent = mount(TitlePopover, { target: getPlayPilotWrapperElement(), props: { event, title: injection.title_details! } })
+    const target = getPlayPilotWrapperElement()
+
+    if (injection.type === 'title') {
+      activePopoverInsertedComponent = mount(InjectionPopover, { target, props: { event, type: 'title', data: injection.title_details! } })
+    } else if (injection.type === 'participant') {
+      activePopoverInsertedComponent = mount(InjectionPopover, { target, props: { event, type: 'participant', data: injection.participant_details! } })
+    }
   }, 100)
 }
 
@@ -44,7 +45,7 @@ export async function destroyLinkPopover(outro: boolean = true): Promise<void> {
   // 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())
+  document.querySelectorAll<HTMLElement>('[data-playpilot-injection-popover]').forEach(element => element.remove())
 }
 
 export function destroyLinkPopoverOnMouseleave(event: MouseEvent): void {
@@ -53,7 +54,7 @@ export function destroyLinkPopoverOnMouseleave(event: MouseEvent): void {
   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]') ||
+  if (target.hasAttribute('data-playpilot-injection-popover') || target.closest('[data-playpilot-injection-popover]') ||
     target.hasAttribute(keyDataAttribute) || target.closest(keySelector)) return
 
   destroyLinkPopover()

package/src/lib/scss/_mixins.scss

@@ -1,3 +1,5 @@
+@use "./_functions.scss" as *;
+
 // Annoyingly, some pages include global styling to add a fill to every svg.
 // We don't want that, but we can't just apply global styling either, as that would affect their page.
 // So this mixins is to be used inside of other containers.
@@ -37,3 +39,30 @@
     @content;
   }
 }
+
+@mixin styled-scrollbar() {
+  scrollbar-color: theme(content-light) transparent;
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    width: margin(0.75);
+  }
+
+  &::-webkit-scrollbar-track {
+    background: theme(light);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border: 2px solid theme(light);
+    border-radius: margin(1);
+    background: transparent;
+
+    &:hover {
+      background: theme(content-light);
+    }
+
+    &:active {
+      background: theme(text-color-alt);
+    }
+  }
+}

package/src/lib/scss/global.scss

@@ -18,33 +18,6 @@
   scroll-margin: margin(5);
 }
 
-.playpilot-styled-scrollbar {
-  scrollbar-color: var(--playpilot-content-light) var(--playpilot-lighter);
-  scrollbar-width: thin;
-
-  &::-webkit-scrollbar {
-    width: margin(0.75);
-  }
-
-  &::-webkit-scrollbar-track {
-    background: var(--playpilot-light);
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border: 2px solid var(--playpilot-light);
-    border-radius: margin(1);
-    background: var(--playpilot-lighter);
-
-    &:hover {
-      background: var(--playpilot-content-light);
-    }
-
-    &:active {
-      background: var(--playpilot-text-color-alt);
-    }
-  }
-}
-
 .playpilot-modal-open {
   overflow-y: hidden !important;
 }

package/src/lib/tracking.ts

@@ -23,6 +23,8 @@ export async function track(event: string, title: TitleData | null = null, paylo
     return
   }
 
+  if ((window.PlayPilotLinkInjections.tracked_events?.length || 0) > 500) return
+
   const headers = new Headers({ 'Content-Type': 'application/json' })
 
   if (title) {

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

@@ -1,5 +1,8 @@
+import type { ParticipantData } from './participant'
 import type { TitleData } from './title'
 
+export type LinkInjectionDataType = 'title' | 'participant'
+
 export type LinkInjection = {
   sid: string
   title: string
@@ -7,6 +10,7 @@ export type LinkInjection = {
   playpilot_url: string
   key: string
   title_details?: TitleData
+  participant_details?: ParticipantData
   phrase_before?: string | null
   phrase_after?: string | null
   inactive?: boolean
@@ -19,6 +23,7 @@ export type LinkInjection = {
   removed?: boolean
   duplicate?: boolean
   matchingElement?: null | Element
+  type: LinkInjectionDataType
 }
 
 export type LinkInjectionRanges = Record<string, { elementIndex: number, from: number, to: number }>

package/src/main.ts

@@ -2,6 +2,7 @@ import { getAuthToken, isEditorialModeEnabled } from '$lib/api/auth'
 import { fetchConfig } from '$lib/api/config'
 import { pollLinkInjections } from '$lib/api/externalPages'
 import { setConsent } from '$lib/consent'
+import { cdnBaseUrl } from '$lib/constants'
 import { isCrawler } from '$lib/crawler'
 import { isUrlExcludedViaConfig } from '$lib/url'
 
@@ -87,7 +88,7 @@ window.PlayPilotLinkInjections ||= {
     const script = document.createElement('script')
 
     script.id = 'playpilot-mount'
-    script.src = `https://cdn.jsdelivr.net/npm/@playpilot/tpi@${__SCRIPT_VERSION__}/dist/${shouldLoadEditorial ? 'editorial.' : ''}mount.js`
+    script.src = `${cdnBaseUrl}/dist/${shouldLoadEditorial ? 'editorial.' : ''}mount.js`
     // script.src = './dist/mount.js' // Use me during development of this script
 
     script.onload = () => window.PlayPilotMount?.mount()

package/src/routes/+page.svelte

@@ -15,12 +15,12 @@
   import Editor from './components/Editorial/Editor.svelte'
   import EditorTrigger from './components/Editorial/EditorTrigger.svelte'
   import Alert from './components/Editorial/Alert.svelte'
-  import TrackingPixels from './components/TrackingPixels.svelte'
+  import TrackingPixels from './components/Tracking/TrackingPixels.svelte'
+  import TrackingPixelsForTitleDataPerLink from './components/Tracking/TrackingPixelsForTitleDataPerLink.svelte'
+  import UserJourney from './components/Tracking/UserJourney.svelte'
   import Consent from './components/Consent.svelte'
   import Debugger from './components/Debugger.svelte'
-  import UserJourney from './components/UserJourney.svelte'
   import PostersScrollReveal from './components/PostersScrollReveal.svelte'
-  import TrackingPixelsForTitleDataPerLink from './components/TrackingPixelsForTitleDataPerLink.svelte'
 
   let response: LinkInjectionResponse | null = $state(null)
   let isEditorialMode = $state(isEditorialModeEnabled())

package/src/routes/components/Editorial/Editor.svelte

@@ -59,8 +59,7 @@
   const linkInjectionsString = $derived(JSON.stringify(linkInjections))
   const showControls = $derived(!aiRunning && allowEditing)
   const hasChanged = $derived(initialStateString && initialStateString !== linkInjectionsString)
-  // Filter out injections without title_details, injections that are removed, duplicate, or are AI injections that failed to inject
-  const filteredInjections = $derived(linkInjections.filter((i) => i.title_details && !i.removed && !i.duplicate && (i.manual || (!i.manual && !i.failed))))
+  const filteredInjections = $derived(linkInjections.filter((i) => (i.title_details || i.participant_details) && !i.removed && !i.duplicate && (i.manual || (!i.manual && !i.failed))))
   const sortedInjections = $derived(sortInjections(filteredInjections))
   const initialAiRunning = $derived(!loading && untrack(() => aiStatus.aiRunning))
 
@@ -76,7 +75,7 @@
   function sortInjections(injections: LinkInjection[]): LinkInjection[] {
     return injections.sort((a, b) => {
       if (a.failed !== b.failed) return a.failed ? 1 : -1
-      return a.title_details!.title.localeCompare(b.title_details!.title)
+      return (a.title_details?.title || a.participant_details?.name)!.localeCompare((b.title_details?.title || b.participant_details?.name)!)
     })
   }
 
@@ -147,7 +146,7 @@
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:400,600,700">
 </svelte:head>
 
-<section class="editor playpilot-styled-scrollbar" class:panel-open={manualInjectionActive} class:loading bind:this={editorElement} {onscroll}>
+<section class="editor" class:panel-open={manualInjectionActive} class:loading bind:this={editorElement} {onscroll}>
   {#if editorElement && !loading}
     <div class="handles">
       <div class="handle">
@@ -227,7 +226,7 @@
 
   {#if manualInjectionActive}
     <div
-      class="panel playpilot-styled-scrollbar"
+      class="panel"
       style:top="{scrollDistance}px"
       transition:fly={{ x: Math.min(window.innerWidth, 320), duration: 200, opacity: 1 }}>
       <ManualInjection
@@ -260,6 +259,8 @@
     overflow-y: auto;
     overflow-x: hidden;
     line-height: normal;
+
+    @include styled-scrollbar;
   }
 
   .panel-open {
@@ -389,5 +390,7 @@
     padding: margin(1.5);
     background: theme(dark);
     overflow-y: auto;
+
+    @include styled-scrollbar;
   }
 </style>

package/src/routes/components/Editorial/EditorItem.svelte

@@ -11,7 +11,6 @@
   import { track } from '$lib/tracking'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import type { LinkInjection } from '$lib/types/injection'
-  import type { TitleData } from '$lib/types/title'
   import { cleanPhrase, truncateAroundPhrase } from '$lib/text'
   import { isValidPlaylinkType } from '$lib/injection'
   import { getLinkInjectionElements, getLinkInjectionsParentElement } from '$lib/injectionElements'
@@ -27,9 +26,8 @@
 
   const { linkInjection = $bindable(), onremove = () => null, onhighlight = () => null }: Props = $props()
 
-  const { key, sentence, title_details, failed, failed_message, inactive } = $derived(linkInjection || {})
+  const { key, type, sentence, title_details, participant_details, failed, failed_message, inactive } = $derived(linkInjection || {})
 
-  const title: TitleData = $derived(title_details!)
   const truncatedSentence = $derived(truncateAroundPhrase(linkInjection.sentence, linkInjection.title, 60))
 
   let expanded = $state(false)
@@ -38,7 +36,7 @@
   let element: HTMLElement | null = $state(null)
 
   onMount(() => {
-    if (failed) track(TrackingEvent.InjectionFailed, title, { phrase: linkInjection.title, sentence})
+    if (failed) track(TrackingEvent.InjectionFailed, type === 'title' ? title_details : null, { phrase: linkInjection.title, sentence})
   })
 
   /**
@@ -113,10 +111,14 @@
   bind:this={element}
   out:slide|global={{ duration: 200 }}>
   <div class="header">
-    <img class="poster" src={removeImageUrlPrefix(title.standing_poster)} alt="" width="32" height="48" onerror={({ target }) => (target as HTMLImageElement).src = imagePlaceholderDataUrl} />
+    {#if type === 'title'}
+      <img class="poster" src={removeImageUrlPrefix(title_details!.standing_poster)} alt="" width="32" height="48" onerror={({ target }) => (target as HTMLImageElement).src = imagePlaceholderDataUrl} />
+    {:else}
+      <div class="placeholder-image"></div>
+    {/if}
 
     <div class="info">
-      <div class="title">{title.title}</div>
+      <div class="title">{title_details?.title || participant_details?.name}</div>
 
       <div class="sentence">
         <!-- eslint-disable-next-line svelte/no-at-html-tags -->
@@ -143,9 +145,13 @@
       <Alert>{failed_message}</Alert>
     {:else}
       <div class="actions">
-        <button class="expand" onclick={() => expanded = !expanded} aria-label="Expand" aria-expanded={expanded}>
-          <IconChevron {expanded} />
-        </button>
+        {#if type === 'title'}
+          <button class="expand" onclick={() => expanded = !expanded} aria-label="Expand" aria-expanded={expanded}>
+            <IconChevron {expanded} />
+          </button>
+        {:else}
+          <div></div>
+        {/if}
 
         {#if !isValidPlaylinkType(linkInjection)}
           <div class="warning" transition:fade={{ duration: 100 }} aria-label="Invalid playlink settings">
@@ -210,6 +216,14 @@
     }
   }
 
+  .placeholder-image {
+    flex: 0 0 margin(2);
+    width: margin(2);
+    height: margin(2);
+    border-radius: 50%;
+    background: theme(content);
+  }
+
   .title {
     font-size: margin(0.875);
     word-break: break-word;

package/src/routes/components/Editorial/ManualInjection.svelte

@@ -170,6 +170,7 @@
       key: generateInjectionKey(selectedTitle.sid),
       title_details: selectedTitle,
       manual: true,
+      type: 'title',
     }
 
     onsave(linkInjection)

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

@@ -10,8 +10,8 @@
   import { onMount, type Snippet } from 'svelte'
   import Search from './Filter/Search.svelte'
   import Filter from './Filter/Filter.svelte'
-  import TrackAnyClick from '../TrackAnyClick.svelte'
-  import TrackScrollDistance from '../TrackScrollDistance.svelte'
+  import TrackAnyClick from '../Tracking/TrackAnyClick.svelte'
+  import TrackScrollDistance from '../Tracking/TrackScrollDistance.svelte'
 
   interface Props {
     navigate?: (key: string) => void
@@ -40,7 +40,7 @@
   })
 </script>
 
-<div class="explore playpilot-styled-scrollbar" bind:this={element} bind:clientWidth style:height style:--playpilot-explore-width="{clientWidth}px">
+<div class="explore" bind:this={element} bind:clientWidth style:height style:--playpilot-explore-width="{clientWidth}px">
   <div class="header" role="banner">
     <div>
       <div class="divider"></div>
@@ -108,6 +108,8 @@
     font-weight: theme(detail-font-weight, normal);
     font-size: theme(detail-font-size, font-size-base);
 
+    @include styled-scrollbar;
+
     :global(*) {
       box-sizing: border-box;
     }

package/src/routes/components/Explore/Filter/Dropdown.svelte

@@ -68,7 +68,7 @@
 
   {#if active}
     <div
-      class="content playpilot-styled-scrollbar"
+      class="content"
       style:--max-height={maxHeight ? `${maxHeight}px` : null}
       style:--offset={offset ? `${offset}px` : null}
       bind:this={contentElement}
@@ -96,6 +96,8 @@
     overflow-y: auto;
     overflow-x: hidden;
 
+    @include styled-scrollbar;
+
     .left & {
       right: auto;
       left: var(--offset, 0px);

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

@@ -1,7 +1,6 @@
 <script lang="ts">
   import type { ExploreFilter } from '$lib/types/filter'
   import genres from '$lib/data/genres.json'
-  import countries from '$lib/data/countries.json'
   import { fetchProviders } from '$lib/api/providers'
   import { t } from '$lib/localization'
   import FilterItem from './FilterItem.svelte'
@@ -9,9 +8,10 @@
   import Button from '../../Button.svelte'
   import IconArrow from '../../Icons/IconArrow.svelte'
   import IconFilter from '../../Icons/IconFilter.svelte'
-  import {  fly, scale } from 'svelte/transition'
+  import { fly, scale } from 'svelte/transition'
   import ActiveFilterItems from './ActiveFilterItems.svelte'
   import { isFilterItemActive } from '$lib/filter'
+  import { cdnBaseUrl } from '$lib/constants'
 
   interface Props {
     filter: ExploreFilter
@@ -56,7 +56,9 @@
   }, {
     label: t('Countries'),
     param: 'country_codes',
-    data: countries,
+    fetchData: async () => import.meta.env.DEV ?
+      (await import('$lib/data/countries.json')).default :
+      (await fetch(`${cdnBaseUrl}/src/lib/data/countries.json`)).json(),
   }]
 
   let limited = $state(limit)

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

@@ -13,6 +13,10 @@
   let windowWidth: number = $state(window.innerWidth)
 
   const rails: { heading: string, params: Record<string, any>, properties: Record<string, any> }[] = [{
+    heading: 'List: Upcoming',
+    params: { from_playlist_sid: 'li42wf', region: null, no_region_filter: true },
+    properties: {},
+  }, {
     heading: 'List: Trending',
     params: { ordering: Sorting.Popular },
     properties: { expandable: true },
@@ -20,10 +24,6 @@
     heading: 'List: New',
     params: { from_playlist_sid: 'li42WR', include_playable_types: 'SVOD,FREE' },
     properties: { aside: true, size: 'flexible' },
-  }, {
-    heading: 'List: Upcoming',
-    params: { from_playlist_sid: 'li42wf', region: null, no_region_filter: true },
-    properties: {},
   }, {
     heading: 'List: Cinema',
     params: { from_playlist_sid: 'li42WS', region: null, no_region_filter: true },