@playpilot/tpi 8.40.0-beta.5 → 8.40.1

package/src/lib/retargeting.ts

@@ -1,9 +1,10 @@
 import { RETARGETING_USER_ID_KEY } from '@playpilot/retargeting-tracking'
 import { hasConsentedTo } from './consent'
 import { getUserId } from './user'
+import { getConfigValue } from './api/config'
 
 export function isRetargetingAllowed(): boolean {
-  if (!window.PlayPilotLinkInjections.config?.allow_retargeting_pixels) return false
+  if (!getConfigValue('allow_retargeting_pixels')) return false
 
   if (!hasConsentedTo('pixels')) return false
 

package/src/lib/routes.ts

@@ -1,3 +1,4 @@
+import { getConfigValue } from './api/config'
 import { playPilotBaseUrl } from './constants'
 import type { ParticipantData } from './types/participant'
 import type { TitleData } from './types/title'
@@ -11,5 +12,5 @@ export function participantUrl(participant: ParticipantData): string {
 }
 
 export function exploreModalUrl(sid: string): string {
-  return window.PlayPilotLinkInjections?.config?.explore_navigation_path + `?route=modal&sid=${sid}`
+  return getConfigValue('explore_navigation_path') + `?route=modal&sid=${sid}`
 }

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/lib/user.ts

@@ -1,3 +1,4 @@
+import { getConfigValue } from './api/config'
 import { hasConsentedTo } from './consent'
 import { generateRandomHash } from './hash'
 
@@ -33,5 +34,5 @@ export function getSessionId(): string | null {
 }
 
 export function isUserTrackingAllowed(): boolean {
-  return !!window.PlayPilotLinkInjections?.config?.allow_user_id_tracking && hasConsentedTo('tracking')
+  return !!getConfigValue('allow_user_id_tracking') && hasConsentedTo('tracking')
 }

package/src/routes/+page.svelte

@@ -7,7 +7,7 @@
   import { isCrawler } from '$lib/crawler'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { fetchAds } from '$lib/api/ads'
-  import { fetchConfig } from '$lib/api/config'
+  import { fetchConfig, getConfigValue } from '$lib/api/config'
   import { insertExplore, insertExploreIntoNavigation } from '$lib/explore'
   import { authorize, getAuthToken, isEditorialModeEnabled, removeAuthCookie, setEditorialParamInUrl } from '$lib/api/auth'
   import { getPageTextAndElements } from '$lib/injectionElements'
@@ -55,7 +55,7 @@
     fireQueuedTrackingEvents()
     track(TrackingEvent.ArticlePageView)
 
-    const explorePath = window.PlayPilotLinkInjections.config?.explore_navigation_path
+    const explorePath = getConfigValue('explore_navigation_path')
 
     if ((!aiInjections.length && !manualInjections.length) && !(explorePath && document.location.href.includes(explorePath))) return
 
@@ -102,7 +102,7 @@
       loading = false
 
       if (!response) return
-      if (window.PlayPilotLinkInjections.config?.disable_public_injections && !(isEditorialMode && authorized)) return
+      if (getConfigValue('disable_public_injections') && !(isEditorialMode && authorized)) return
 
       setTrackingSids({ organizationSid: response.organization_sid, domainSid: response.domain_sid })
 

package/src/routes/components/Debugger.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
+  import { getConfigValue } from '$lib/api/config'
   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'
@@ -131,7 +132,7 @@
 
     <hr />
 
-    {#if !!(window.PlayPilotLinkInjections.config?.exclude_urls_pattern && getFullUrlPath().match(window.PlayPilotLinkInjections?.config?.exclude_urls_pattern))}
+    {#if !!(getConfigValue('exclude_urls_pattern') && getFullUrlPath().match(getConfigValue('exclude_urls_pattern')!))}
       <span class="error">The current URL is excluded via the config</span>
       <hr />
     {/if}
@@ -216,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/ExploreCallToAction.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
+  import { getConfigValue } from '$lib/api/config'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { track } from '$lib/tracking'
   import IconArrow from '../Icons/IconArrow.svelte'
 
   const src = 'https://cdn.jsdelivr.net/npm/@playpilot/tpi@latest/src/lib/images/titles-list.webp'
-  const href = window.PlayPilotLinkInjections?.config?.explore_navigation_path
+  const href = getConfigValue('explore_navigation_path')
 </script>
 
 <a class="call-to-action" {href} onclick={() => track(TrackingEvent.CardToExploreCta)}>

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}

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/TitleModal.svelte

@@ -6,6 +6,7 @@
   import { exploreParentSelector } from '$lib/explore'
   import { onMount, setContext } from 'svelte'
   import { isRetargetingAllowed } from '$lib/retargeting'
+  import { getConfigValue } from '$lib/api/config'
   import { trackViaPixel } from '@playpilot/retargeting-tracking'
   import Modal from './Modal.svelte'
   import Title from '../Title.svelte'
@@ -24,7 +25,7 @@
 
   const topScrollAd = getFirstAdOfType('top_scroll')
   const displayAd = getFirstAdOfType('card')
-  const insertExploreCta = window.PlayPilotLinkInjections?.config?.explore_insert_cta_in_tpi
+  const insertExploreCta = getConfigValue('explore_insert_cta_in_tpi')
   const useBubble = !!topScrollAd || (insertExploreCta && !document.querySelector(exploreParentSelector))
 
   let hasTrackedScrolling = false

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

@@ -8,6 +8,7 @@
   import { trackClickViaPixel, trackViewViaPixel } from '@playpilot/retargeting-tracking'
   import { MetaEvent, MetaSource } from '$lib/enums/TrackingEvent'
   import { isRetargetingAllowed } from '$lib/retargeting'
+  import { getConfigValue } from '$lib/api/config'
 
   interface Props {
     playlink: PlaylinkData
@@ -36,7 +37,7 @@
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <svelte:element
   {onclick}
-  this={!window.PlayPilotLinkInjections?.config?.require_affiliate_consent || hasConsentedTo('affiliate') ? 'a' : 'span'}
+  this={!getConfigValue('require_affiliate_consent') || hasConsentedTo('affiliate') ? 'a' : 'span'}
   {@attach usePixel ? trackViewViaPixel(MetaEvent.ProviderInterest, { provider: playlink.slug, source: MetaSource.Card }) : null}
   {@attach usePixel ? trackClickViaPixel(MetaEvent.ProviderClick, { provider: playlink.slug }) : null}
   href={url}

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

@@ -11,6 +11,7 @@
   import Playlink from './Playlink.svelte'
   import Button from '../Button.svelte'
   import PlaylinksDisclaimer from './PlaylinksDisclaimer.svelte'
+  import { getConfigValue } from '$lib/api/config'
 
   type Category = PlaylinkCategory | '' | 'Other'
   type CategorizedPlaylinks = Partial<Record<Category, PlaylinkData[]>>
@@ -27,7 +28,7 @@
   const isModal = getContext('scope') === 'modal'
   const type = getContext('type')
   const displayAd = getFirstAdOfType('card')
-  const categorize = !!window.PlayPilotLinkInjections?.config?.categorize_playlinks
+  const categorize = !!getConfigValue('categorize_playlinks')
 
   let outerWidth = $state(0)
   let limited = $state(!categorize)

package/src/routes/components/PostersScrollReveal.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { getConfigValue } from '$lib/api/config'
   import { mobileBreakpoint } from '$lib/constants'
   import { onDestroy } from 'svelte'
   import { SvelteSet } from 'svelte/reactivity'
@@ -17,7 +18,7 @@
   onDestroy(destroyAllPosters)
 
   function onscroll(): void {
-    if (window.PlayPilotLinkInjections?.config?.disable_scroll_reveal_posters) return
+    if (getConfigValue('disable_scroll_reveal_posters')) return
     if (!isMobile) return
 
     setScrollTimeout()

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

@@ -11,6 +11,7 @@
   import ParticipantImage from '../Participants/ParticipantImage.svelte'
   import Rail from './Rail.svelte'
   import { exploreModalUrl } from '$lib/routes'
+  import { getConfigValue } from '$lib/api/config'
 
   interface Props {
     title: TitleData
@@ -45,7 +46,7 @@
   async function onclick(event: MouseEvent, participant: ParticipantData): Promise<void> {
     track(TrackingEvent.ParticipantClick, null, { title_source: title.original_title || title.title, participant: participant.name })
 
-    if (!window.PlayPilotLinkInjections?.config?.open_tpi_links_in_explore || window.location.href.includes(window.PlayPilotLinkInjections.config.explore_navigation_path || '')) {
+    if (!getConfigValue('open_tpi_links_in_explore') || window.location.href.includes(getConfigValue('explore_navigation_path') || '')) {
       const fetchedParticipant = await fetchParticipantBySid(participant.sid)
 
       openModal({ event, type: 'participant', data: fetchedParticipant })

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/Widgets/InjectionsWidgetRail.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { getConfigValue } from '$lib/api/config'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { t } from '$lib/localization'
   import { track } from '$lib/tracking'
@@ -38,7 +39,7 @@
     <TitlesRail
       {titles}
       {heading}
-      navigateToExplore={!!window.PlayPilotLinkInjections?.config?.open_tpi_links_in_explore}
+      navigateToExplore={!!getConfigValue('open_tpi_links_in_explore')}
       onclick={(title) => track(TrackingEvent.WidgetArticleRailTitleClick, title)} />
   </div>
 {/if}

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', () => {

package/src/tests/routes/+page.test.js

@@ -19,9 +19,14 @@ vi.mock('$lib/api/externalPages', () => ({
   pollLinkInjections: vi.fn(() => {}),
 }))
 
-vi.mock('$lib/api/config', () => ({
-  fetchConfig: vi.fn(),
-}))
+// @ts-ignore
+vi.mock(import('$lib/api/config'), async (importOriginal) => {
+  const actual = await importOriginal()
+  return {
+    ...actual,
+    fetchConfig: vi.fn(() => {}),
+  }
+})
 
 // @ts-ignore
 vi.mock(import('$lib/api/session'), async (importOriginal) => {

package/svelte.config.js

@@ -1,23 +1,32 @@
-import adapter from '@sveltejs/adapter-auto'
-import { sveltePreprocess  } from 'svelte-preprocess'
-
-/** @type {import('@sveltejs/kit').Config} */
-const config = {
-  preprocess: sveltePreprocess({
-    scss: {
-      includePaths: ['src'],
-      prependData: `
-        @use "src/lib/scss/_functions.scss" as *;
-        @use "src/lib/scss/_mixins.scss" as *;
-      `,
-    },
-  }),
-  kit: {
-    // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
-    // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
-    // See https://svelte.dev/docs/kit/adapters for more information about adapters.
-    adapter: adapter(),
-  },
-}
-
-export default config
+import adapter from '@sveltejs/adapter-auto'
+import { sveltePreprocess } from 'svelte-preprocess'
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  preprocess: sveltePreprocess({
+    scss: {
+      includePaths: ['src'],
+      prependData: `
+        @use "src/lib/scss/_functions.scss" as *;
+        @use "src/lib/scss/_mixins.scss" as *;
+      `,
+    },
+  }),
+  kit: {
+    // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
+    // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+    // See https://svelte.dev/docs/kit/adapters for more information about adapters.
+    adapter: adapter(),
+  },
+  compilerOptions: {
+    warningFilter: (warning) => {
+      const ignore = [
+        'state_referenced_locally',
+      ]
+
+      return !ignore.includes(warning.code)
+    },
+  },
+}
+
+export default config

package/vite.config.js

@@ -1,43 +1,43 @@
-import path from 'path'
-import * as dotenv from 'dotenv'
-import { defineConfig } from 'vitest/config'
-import { sveltekit } from '@sveltejs/kit/vite'
-import packageJson from './package.json'
-
-dotenv.config({ path: '.env' })
-
-export default defineConfig(() => ({
-  plugins: [
-    sveltekit(),
-  ],
-
-  server: {
-    port: 3000,
-    allowedHosts: ['engage-moderate-happy-davis.trycloudflare.com'],
-  },
-
-  test: {
-    environment: 'happy-dom',
-    environmentOptions: {
-      happyDOM: {
-        settings: {
-          disableJavaScriptFileLoading: true,
-        },
-      },
-    },
-    include: ['src/**/*.{test,spec}.{js,ts}'],
-    setupFiles: ['src/tests/setup.js'],
-  },
-
-  resolve: {
-    conditions: process.env.VITEST ? ['browser'] : [],
-    alias: {
-      '$lib': path.resolve(__dirname, './src/lib'),
-    },
-  },
-
-  define: {
-    __SCRIPT_VERSION__: JSON.stringify(packageJson.version),
-    __IS_EDITORIAL_SCRIPT__: true,
-  },
-}))
+import path from 'path'
+import * as dotenv from 'dotenv'
+import { defineConfig } from 'vitest/config'
+import { sveltekit } from '@sveltejs/kit/vite'
+import packageJson from './package.json'
+
+dotenv.config({ path: '.env' })
+
+export default defineConfig(() => ({
+  plugins: [
+    sveltekit(),
+  ],
+
+  server: {
+    port: 3000,
+    allowedHosts: ['engage-moderate-happy-davis.trycloudflare.com'],
+  },
+
+  test: {
+    environment: 'happy-dom',
+    environmentOptions: {
+      happyDOM: {
+        settings: {
+          disableJavaScriptFileLoading: true,
+        },
+      },
+    },
+    include: ['src/**/*.{test,spec}.{js,ts}'],
+    setupFiles: ['src/tests/setup.js'],
+  },
+
+  resolve: {
+    conditions: process.env.VITEST ? ['browser'] : [],
+    alias: {
+      '$lib': path.resolve(__dirname, './src/lib'),
+    },
+  },
+
+  define: {
+    __SCRIPT_VERSION__: JSON.stringify(packageJson.version),
+    __IS_EDITORIAL_SCRIPT__: true,
+  },
+}))