@playpilot/tpi 6.6.1 → 6.6.4

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "6.6.1",
+	"version": "6.6.4",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
@@ -23,6 +23,7 @@
 		"@types/node": "^25.2.0",
 		"@typescript-eslint/eslint-plugin": "^8.32.1",
 		"@typescript-eslint/parser": "^8.32.1",
+		"dotenv": "^16.4.7",
 		"eslint": "^9.27.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^3.15.0",

package/src/lib/tracking.ts

@@ -98,3 +98,8 @@ export function fireQueuedTrackingEvents(): void {
 
   window.PlayPilotLinkInjections.queued_tracking_events = []
 }
+
+export function isPixelAllowed(): boolean {
+  if (!window.PlayPilotLinkInjections.config?.allow_retargeting_pixels) return false
+  return hasConsentedTo('pixels')
+}

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

@@ -44,6 +44,11 @@ export type ConfigResponse = {
    */
   playlinks_disclaimer_text?: string
 
+  /**
+   * Whether or not we can insert retargeting pixels. Not all third parties allow this and it is disabled by default
+   */
+  allow_retargeting_pixels?: boolean
+
   /**
    * 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/components/Genres.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { hasConsentedTo } from '$lib/consent'
   import genreData from '$lib/data/genres.json'
   import { MetaEvent } from '$lib/enums/TrackingEvent'
   import { t } from '$lib/localization'
+  import { isPixelAllowed } from '$lib/tracking'
   import { trackViewViaPixel } from '@playpilot/retargeting-tracking'
 
   interface Props {
@@ -19,7 +19,7 @@
   {@const genreName = genreData.find(g => g.slug === genre)?.name}
 
   {#if genreName}
-    <div class="genre" {@attach hasConsentedTo('pixels') ? trackViewViaPixel(MetaEvent.GenreInterest, { genre: genreName }) : null}>
+    <div class="genre" {@attach isPixelAllowed() ? trackViewViaPixel(MetaEvent.GenreInterest, { genre: genreName }) : null}>
       {t(genreName)}
     </div>
   {/if}

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

@@ -7,6 +7,7 @@
   import type { PlaylinkData } from '$lib/types/playlink'
   import { trackClickViaPixel, trackViewViaPixel } from '@playpilot/retargeting-tracking'
   import { MetaEvent } from '$lib/enums/TrackingEvent'
+  import { isPixelAllowed } from '$lib/tracking'
 
   interface Props {
     playlink: PlaylinkData
@@ -19,7 +20,7 @@
 
   const { name, url, logo_url, highlighted, cta_text, action_text, pixels, extra_info: { category } } = $derived(playlink)
 
-  const usePixel = $derived(hasConsentedTo('pixels') && !highlighted)
+  const usePixel = $derived(isPixelAllowed() && !highlighted)
 
   const categoryStrings = {
     SVOD: t('Stream'),
@@ -27,6 +28,8 @@
     RENT: t('Rent'),
     TVOD: t('Rent Or Buy'),
   }
+
+  let actionWidth = $state(0)
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -44,7 +47,7 @@
   data-playlink={name}
   rel="sponsored">
 
-  <div class="playlink-content">
+  <div class="playlink-content" style:--action-width={actionWidth ? `${actionWidth}px` : null}>
     <img src={removeImageUrlPrefix(logo_url)} alt="" height="36" width="36" />
 
     <span class="name">{name}</span>
@@ -57,7 +60,7 @@
       <span class="cta">{cta_text}</span>
     {/if}
 
-    <div class="action">
+    <div class="action" bind:clientWidth={actionWidth}>
       {action_text || t('Watch')}
     </div>
 
@@ -161,7 +164,7 @@
     z-index: 5;
     display: grid;
     grid-template-areas: "image name action" "image category action";
-    grid-template-columns: $image-size auto margin(6);
+    grid-template-columns: $image-size auto var(--action-width, margin(6));
     align-items: center;
     gap: 0 margin(0.75);
     padding: margin(0.75);

package/src/tests/lib/tracking.test.js

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 
-import { fireQueuedTrackingEvents, queueTrackingEvent, setTrackingSids, track } from '$lib/tracking'
+import { fireQueuedTrackingEvents, isPixelAllowed, queueTrackingEvent, setTrackingSids, track } from '$lib/tracking'
 import { title } from '$lib/fakeData'
 import { getFullUrlPath } from '$lib/url'
 import { fakeFetch } from '../helpers'
@@ -241,4 +241,41 @@ describe('$lib/tracking', () => {
       expect(global.fetch).toHaveBeenCalledTimes(2)
     })
   })
+
+  describe('isPixelAllow', () => {
+    it('Should return false if no config object is set', () => {
+      vi.mocked(hasConsentedTo).mockImplementation(() => true)
+      window.PlayPilotLinkInjections.config = null
+
+      expect(isPixelAllowed()).toBe(false)
+    })
+
+    it('Should return false if config object is without allow_retargeting_pixels', () => {
+      vi.mocked(hasConsentedTo).mockImplementation(() => true)
+      window.PlayPilotLinkInjections.config = { something: true }
+
+      expect(isPixelAllowed()).toBe(false)
+    })
+
+    it('Should return false if config object is allow_retargeting_pixels is false', () => {
+      vi.mocked(hasConsentedTo).mockImplementation(() => true)
+      window.PlayPilotLinkInjections.config = { allow_retargeting_pixels: false }
+
+      expect(isPixelAllowed()).toBe(false)
+    })
+
+    it('Should return true if config object is allow_retargeting_pixels is true', () => {
+      vi.mocked(hasConsentedTo).mockImplementation(() => true)
+      window.PlayPilotLinkInjections.config = { allow_retargeting_pixels: true }
+
+      expect(isPixelAllowed()).toBe(true)
+    })
+
+    it('Should return true if config object is allow_retargeting_pixels is true but hasConsentedTo is false', () => {
+      vi.mocked(hasConsentedTo).mockImplementation(() => false)
+      window.PlayPilotLinkInjections.config = { allow_retargeting_pixels: true }
+
+      expect(isPixelAllowed()).toBe(false)
+    })
+  })
 })

package/src/tests/routes/components/Playlinks/Playlink.test.js

@@ -6,6 +6,7 @@ import { hasConsentedTo } from '$lib/consent'
 
 vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
+  isPixelAllowed: vi.fn(),
 }))
 
 vi.mock('$lib/consent', () => ({

package/src/tests/routes/components/Playlinks/Playlinks.test.js

@@ -9,6 +9,7 @@ import { getContext } from 'svelte'
 
 vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
+  isPixelAllowed: vi.fn(),
 }))
 
 vi.mock('svelte', async (importActual) => ({

package/src/tests/routes/components/Title.test.js

@@ -8,6 +8,7 @@ import { fetchSimilarTitles } from '$lib/api/titles'
 
 vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
+  isPixelAllowed: vi.fn(),
 }))
 
 vi.mock('$lib/api/participants', () => ({

package/src/tests/routes/components/TitleModal.test.js

@@ -13,6 +13,7 @@ vi.mock('$lib/consent', () => ({
 
 vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
+  isPixelAllowed: vi.fn(),
 }))
 
 vi.mock('$lib/api/participants', () => ({

package/src/tests/routes/components/TitlePopover.test.js

@@ -13,6 +13,7 @@ vi.mock('$lib/consent', () => ({
 
 vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
+  isPixelAllowed: vi.fn(),
 }))
 
 vi.mock('$lib/api/participants', () => ({

package/vite.config.js

@@ -1,14 +1,18 @@
 import path from 'path'
+import * as dotenv from 'dotenv'
 import { defineConfig } from 'vitest/config'
 import { sveltekit } from '@sveltejs/kit/vite'
 import { svelte } from '@sveltejs/vite-plugin-svelte'
 import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
 import packageJson from './package.json'
 
+dotenv.config({ path: '.env' })
+
 export default defineConfig(({ command }) => ({
   plugins: [
     command === 'build' ? svelte() : sveltekit(),
     command === 'build' && cssInjectedByJsPlugin(),
+    command === 'build' && injectEnvVariables,
   ],
 
   build: {
@@ -19,7 +23,6 @@ export default defineConfig(({ command }) => ({
         name: 'PlayPilotLinkInjections',
         entryFileNames: 'link-injections.js',
       },
-      external: ['$env/static/public'],
     },
   },
 
@@ -44,3 +47,20 @@ export default defineConfig(({ command }) => ({
     __SCRIPT_VERSION__: JSON.stringify(packageJson.version),
   },
 }))
+
+const injectEnvVariables = {
+  name: 'resolve-env-variables',
+  /** @param {string} id */
+  resolveId(id) {
+    if (id === '$env/static/public') return '\0$env/static/public'
+  },
+  /** @param {string} id */
+  load(id) {
+    if (id === '\0$env/static/public') {
+      return Object.entries(process.env)
+        .filter(([key]) => key.startsWith('PUBLIC_'))
+        .map(([key, value]) => `export const ${key} = ${JSON.stringify(value)};`)
+        .join('\n')
+    }
+  },
+}