@playpilot/tpi 8.1.1 → 8.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.1.1",
+	"version": "8.1.3",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
@@ -30,16 +30,16 @@
 		"eslint-plugin-svelte": "^3.15.0",
 		"globals": "^15.0.0",
 		"happy-dom": "^16.8.1",
-		"prettier": "^3.8.1",
+		"prettier": "^3.8.3",
 		"prettier-plugin-svelte": "^3.2.6",
 		"sass": "^1.99.0",
 		"svelte": "5.44.1",
 		"svelte-check": "^4.0.0",
 		"svelte-preprocess": "^6.0.3",
 		"svelte-tiny-slider": "^2.7.0",
-		"typescript": "^5.0.0",
-		"typescript-eslint": "^8.32.1",
-		"vite": "^5.0.3",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.59.2",
+		"vite": "^5.4.21",
 		"vite-plugin-css-injected-by-js": "^4.0.1",
 		"vitest": "^2.1.9"
 	}

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

@@ -75,6 +75,16 @@ export type ConfigResponse = {
    */
   allow_user_id_tracking?: boolean
 
+  /**
+   * The sid for the current domain, used for tracking
+   */
+  domain_sid?: string
+
+  /**
+   * The sid for the organization the domain belongs to, used for tracking. Can be empty.
+   */
+  organization_sid?: string
+
   /**
    * The following options are all relevant for in text disclaimers, which renders as a disclaimer text within the article,
    * rather than only inside of title cards.

package/src/routes/+layout.svelte

@@ -39,6 +39,7 @@
   <nav data-sveltekit-reload>
     <a href="/" class:active={page.url.pathname === '/'}>Test article</a>
     <a href="/elements" class:active={page.url.pathname === '/elements'}>Elements</a>
+    <a href="/explore" class:active={page.url.pathname === '/explore'}>Explore</a>
   </nav>
 
   {#if page.error}

package/src/routes/+page.svelte

@@ -79,6 +79,7 @@
       if (config?.custom_style) insertCustomStyle(config.custom_style || '')
       if (config?.explore_navigation_selector) insertExploreIntoNavigation()
       if (config?.no_affiliate) window.PlayPilotLinkInjections.no_affiliate = true
+      if (config?.domain_sid) setTrackingSids({ organizationSid: config.organization_sid, domainSid: config.domain_sid })
 
       isUrlExcluded = isUrlExcludedViaConfig(config)
       if (isUrlExcluded) return

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

@@ -3,7 +3,10 @@
   import { exploreParentSelector, useExploreRouter } from '$lib/explore'
   import { t } from '$lib/localization'
   import type { ExploreRoute } from '$lib/types/explore'
-  import type { Snippet } from 'svelte'
+  import { track } from '$lib/tracking'
+  import { TrackingEvent } from '$lib/enums/TrackingEvent'
+  import { fetchAds } from '$lib/api/ads'
+  import { onMount, type Snippet } from 'svelte'
   import Search from './Filter/Search.svelte'
   import Button from '../Button.svelte'
 
@@ -25,6 +28,12 @@
     // allow our element to be scrollable, rather than the parent needing to be scrollable.
     height = element?.closest<HTMLElement>(exploreParentSelector)?.style.height || null
   })
+
+  onMount(async () => {
+    track(TrackingEvent.ExplorePageView)
+
+    if (!window.PlayPilotLinkInjections.ads?.length) window.PlayPilotLinkInjections.ads = await fetchAds()
+  })
 </script>
 
 <div class="explore playpilot-styled-scrollbar" bind:this={element} style:height>

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { fetchAds } from '$lib/api/ads'
   import { fetchTitles } from '$lib/api/titles'
   import { MetaEvent, TrackingEvent } from '$lib/enums/TrackingEvent'
   import { openModal } from '$lib/modal'
@@ -9,7 +8,6 @@
   import type { TitleData } from '$lib/types/title'
   import { hasConsentedTo } from '$lib/consent'
   import { trackViaPixel } from '@playpilot/retargeting-tracking'
-  import { onMount } from 'svelte'
   import { t } from '$lib/localization'
   import Button from '../../Button.svelte'
   import GridTitle from '../../GridTitle.svelte'
@@ -48,12 +46,6 @@
     if (searchQuery) search(searchQuery)
   })
 
-  onMount(async () => {
-    track(TrackingEvent.ExplorePageView)
-
-    if (!window.PlayPilotLinkInjections.ads?.length) window.PlayPilotLinkInjections.ads = await fetchAds()
-  })
-
   async function getTitlesForFilter(): Promise<APIPaginatedResult<TitleData>> {
     latestRequestId += 1
     const requestId = latestRequestId

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

@@ -150,6 +150,9 @@
 
   .arrow {
     --offset: #{margin(-2)};
+    --scale: 1;
+    cursor: pointer;
+    z-index: 2;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -160,11 +163,10 @@
     height: margin(3);
     border: 1px solid theme(rail-modal-item-border, content);
     border-radius: 50%;
-    transform: translateY(-50%);
+    transform: translateY(-50%) scale(var(--scale));
+    transition: transform 50ms;
     background: theme(rail-modal-arrow-background, lighter);
     box-shadow: theme(rail-modal-arrow-shadow, 0 margin(0.25) margin(0.5) rgba(0, 0, 0, 0.35));
-    z-index: 2;
-    cursor: pointer;
     color: theme(rail-modal-arrow-color, text-color);
 
     @media (min-width: 800px) {
@@ -176,6 +178,14 @@
       filter: brightness(1.2);
     }
 
+    &:hover {
+      --scale: 1.05;
+    }
+
+    &:active {
+      --scale: 0.97;
+    }
+
     &.right {
       left: auto;
       right: var(--offset);

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

@@ -119,7 +119,7 @@
       <Rail
         bind:slider
         {heading}
-        onchange={(index) => setTimeout(() => openTitle(null, titles, index), 250)}
+        onchange={(index) => { if (expandable) setTimeout(() => openTitle(null, titles, index), 250) }}
         onresize={() => slider?.reposition()}>
         {#each titles as title, index}
           {@const expanded = isExpanded(title)}

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

@@ -133,7 +133,6 @@
 
 <h2>TitlesRailModal</h2>
 
-
 {#await fetchSimilarTitles(title) then titles}
   <button onclick={() => openModal({ type: 'titles-rail', data: titles })}>Show titles rail modal</button>
   <button onclick={() => openModal({ type: 'titles-rail', data: titles, props: { initialIndex: 3 } })}>Show titles rail modal start at index 3</button>

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

@@ -14,7 +14,7 @@
       token: 'ZoAL14yqzevMyQiwckbvyetOkeIUeEDN',
       config: {
         explore_navigation_selector: 'nav a:last-child',
-        explore_navigation_label: 'Streaming guide',
+        explore_navigation_label: 'Streaming guide (inserted)',
         explore_navigation_path: '/explore',
         explore_custom_style: 'main { border: 2px solid white }',
         explore_use_router: true,

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

@@ -564,6 +564,17 @@ describe('$routes/+page.svelte', () => {
 
         expect(queryByTitle('Show PlayPilot TPI editor')).not.toBeTruthy()
       })
+
+      it('Should set tracking sids from config', async () => {
+        // @ts-ignore
+        vi.mocked(fetchConfig).mockResolvedValueOnce({ domain_sid: 'some-domain', organization_sid: 'some-organization' })
+
+        render(page)
+
+        await waitFor(() => {
+          expect(setTrackingSids).toHaveBeenCalledWith({ domainSid: 'some-domain', organizationSid: 'some-organization' })
+        })
+      })
     })
 
     describe('disable_public_injections', () => {

package/src/tests/routes/components/Explore/ExploreLayout.test.js

@@ -4,6 +4,9 @@ import { expect, describe, it, vi, beforeEach } from 'vitest'
 import ExploreLayout from '../../../../routes/components/Explore/ExploreLayout.svelte'
 import { createRawSnippet } from 'svelte'
 import { exploreParentSelector } from '$lib/explore'
+import { track } from '$lib/tracking'
+import { TrackingEvent } from '$lib/enums/TrackingEvent'
+import { fetchAds } from '$lib/api/ads'
 
 const children = createRawSnippet(() => ({ render: () => '<div></div>' }))
 
@@ -19,8 +22,18 @@ const routes = [
   },
 ]
 
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+vi.mock('$lib/api/ads', () => ({
+  fetchAds: vi.fn(),
+}))
+
 describe('ExploreLayout.svelte', () => {
   beforeEach(() => {
+    vi.resetAllMocks()
+
     // @ts-ignore
     window.PlayPilotLinkInjections = { config: { explore_use_router: true } }
   })
@@ -54,4 +67,20 @@ describe('ExploreLayout.svelte', () => {
       expect(container.querySelector('.explore')?.getAttribute('style')).toBe('height: 500px;')
     })
   })
+
+  it('Should call tracking event and fetchAds on mount', () => {
+    render(ExploreLayout, { routes, currentRoute: routes[0], children })
+
+    expect(track).toHaveBeenCalledWith(TrackingEvent.ExplorePageView)
+    expect(fetchAds).toHaveBeenCalled()
+  })
+
+  it('Should not call fetchAds on mount if ads are already present', () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections.ads = ['a']
+
+    render(ExploreLayout, { routes, currentRoute: routes[0], children })
+
+    expect(fetchAds).not.toHaveBeenCalled()
+  })
 })

package/src/tests/routes/components/Explore/Routes/ExploreResults.test.js

@@ -6,7 +6,6 @@ import { fetchTitles } from '$lib/api/titles'
 import { title } from '$lib/fakeData'
 import { TrackingEvent } from '$lib/enums/TrackingEvent'
 import { track } from '$lib/tracking'
-import { fetchAds } from '$lib/api/ads'
 
 vi.mock('$lib/api/titles', () => ({
   fetchTitles: vi.fn(),
@@ -20,10 +19,6 @@ vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
 }))
 
-vi.mock('$lib/api/ads', () => ({
-  fetchAds: vi.fn(),
-}))
-
 describe('ExploreResults.svelte', () => {
   beforeEach(() => {
     // @ts-ignore
@@ -38,25 +33,6 @@ describe('ExploreResults.svelte', () => {
     expect(fetchTitles).toHaveBeenCalledWith({ page_size: 24, page: 1 })
   })
 
-  it('Should call tracking event and fetchAds on mount', () => {
-    render(ExploreResults)
-
-    expect(track).toHaveBeenCalledWith(TrackingEvent.ExplorePageView)
-    expect(fetchAds).toHaveBeenCalled()
-  })
-
-  it('Should not call fetchAds on mount if ads are already present', () => {
-    // @ts-ignore
-    window.PlayPilotLinkInjections = {
-      // @ts-ignore
-      ads: ['a'],
-    }
-
-    render(ExploreResults)
-
-    expect(fetchAds).not.toHaveBeenCalled()
-  })
-
   it('Should render all returned titles', async () => {
     vi.mocked(fetchTitles).mockResolvedValueOnce({ results: [title, title, title], next: null, previous: null })
 

package/src/tests/routes/components/Rails/TitlesRail.test.js

@@ -156,4 +156,15 @@ describe('TitlesRail.svelte', () => {
       expect(getAllByTestId('title')[0].classList).not.toContain('expanded')
     })
   })
+
+  it('Should not call openModal after changing if expandable is false', async () => {
+    const titles = [{ ...title }, { ...title, sid: 'some-other-sid' }]
+
+    const { getByLabelText } = render(TitlesRail, { titles, expandable: false })
+
+    await fireEvent.click(getByLabelText('Next'))
+    await new Promise(res => setTimeout(res, 500))
+
+    expect(openModal).not.toHaveBeenCalled()
+  })
 })