@playpilot/tpi 7.0.4 → 7.2.0

package/package.json

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

package/src/lib/hash.ts

@@ -13,6 +13,14 @@ export function stringToHash(string: string): string {
   return hash.toString(16)
 }
 
-export function generateRandomHash(): string {
-  return (Math.random() + 1).toString(36).substring(7)
+export function generateRandomHash(length = 5): string {
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+
+  let hash = ''
+
+  while (hash.length < length) {
+    hash += characters[Math.floor(Math.random() * characters.length)]
+  }
+
+  return hash
 }

package/src/lib/tracking.ts

@@ -4,6 +4,7 @@ import { isCrawler } from './crawler'
 import { genreSlugsToNames } from './genre'
 import type { TitleData } from './types/title'
 import { getFullUrlPath } from './url'
+import { getUserId, isUserTrackingAllowed } from './user'
 
 const baseUrl = 'https://insights.playpilot.net'
 
@@ -36,6 +37,10 @@ export async function track(event: string, title: TitleData | null = null, paylo
     }
   }
 
+  if (isUserTrackingAllowed()) {
+    payload.user_id = getUserId()
+  }
+
   payload.version = __SCRIPT_VERSION__
   payload.time_since_initialize = window.PlayPilotLinkInjections?.time_at_initialize ? Date.now() - window.PlayPilotLinkInjections.time_at_initialize : 0
   payload.url = getFullUrlPath()

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

@@ -70,6 +70,11 @@ export type ConfigResponse = {
    */
   categorize_playlinks?: boolean
 
+  /**
+   * By default no user identifiable data is tracked. This can be changed using this option. User ids are stored in localStorage and sent along with any tracking request.
+   */
+  allow_user_id_tracking?: 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/lib/user.ts

@@ -0,0 +1,21 @@
+import { generateRandomHash } from './hash'
+
+export const localStorageUserKey = 'playpilot_user_id'
+
+export function getUserId(): string | null {
+  if (!isUserTrackingAllowed()) return null
+
+  try {
+    const userId = localStorage.getItem(localStorageUserKey)
+    if (userId) return userId
+
+    localStorage.setItem(localStorageUserKey, generateRandomHash(16))
+    return localStorage.getItem(localStorageUserKey)
+  } catch {
+    return null
+  }
+}
+
+export function isUserTrackingAllowed(): boolean {
+  return !!window.PlayPilotLinkInjections?.config?.allow_user_id_tracking
+}

package/src/routes/components/YouTubeEmbedOverlay.svelte

@@ -10,6 +10,7 @@
   const { embeddable_url = '', onclose }: Props = $props()
 
   const videoId = $derived(getVideoId(embeddable_url))
+  const color = window?.getComputedStyle(document.body).getPropertyValue('--playpilot-primary')?.replace('#', '') || 'fa548a'
 
   // Gets the YouTube ID from a url, can be a large number of different formats
   // https://stackoverflow.com/a/54200105/1665157
@@ -23,7 +24,7 @@
 
 <div class="overlay" transition:fade={{ duration: 100 }}>
   {#if videoId}
-    <iframe width="600" height="338" src="https://www.youtube.com/embed/{videoId}?autoplay=true" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+    <iframe width="600" height="338" src="https://video.playpilot.net/?video_id={videoId}&color={color}&autoplay=true&playsinline=true&controls=play,mute,fullscreen,progress,current-time" title="YouTube video player" frameborder="0" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
   {:else}
     Something went wrong
   {/if}

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

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { stringToHash } from '$lib/hash'
+import { generateRandomHash, stringToHash } from '$lib/hash'
 
 describe('$lib/hash', () => {
   describe('stringToHash', () => {
@@ -25,4 +25,23 @@ describe('$lib/hash', () => {
       expect(() => stringToHash(longString)).not.toThrow()
     })
   })
+
+  describe('generateRandomHash', () => {
+    it('Should generate a random 5 character hash by default', () => {
+      expect(generateRandomHash()).toHaveLength(5)
+    })
+
+    it('Should generate a string of given length', () => {
+      expect(generateRandomHash(0)).toHaveLength(0)
+      expect(generateRandomHash(1)).toHaveLength(1)
+      expect(generateRandomHash(12)).toHaveLength(12)
+      expect(generateRandomHash(61)).toHaveLength(61)
+      expect(generateRandomHash(250)).toHaveLength(250)
+    })
+
+    it('Should generate random strings each time', () => {
+      expect(generateRandomHash()).not.toBe(generateRandomHash())
+      expect(generateRandomHash(10)).not.toBe(generateRandomHash(10))
+    })
+  })
 })

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

@@ -6,6 +6,7 @@ import { getFullUrlPath } from '$lib/url'
 import { fakeFetch } from '../helpers'
 import { hasConsentedTo } from '$lib/consent'
 import { isCrawler } from '$lib/crawler'
+import { getUserId } from '$lib/user'
 
 vi.mock('$lib/consent', () => ({
   hasConsentedTo: vi.fn(() => true),
@@ -206,6 +207,32 @@ describe('$lib/tracking', () => {
         }),
       )
     })
+
+    it('Should include user_id if tracking is allowed', () => {
+      window.PlayPilotLinkInjections.config = { allow_user_id_tracking: true }
+
+      const userId = getUserId()
+
+      track('Some Event')
+      expect(global.fetch).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          body: expect.stringContaining(`"user_id":"${userId}"`),
+        }),
+      )
+    })
+
+    it('Should not include user_id if tracking is not allowed', () => {
+      window.PlayPilotLinkInjections.config = { allow_user_id_tracking: false }
+
+      track('Some Event')
+      expect(global.fetch).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          body: expect.not.stringContaining('user_id'),
+        }),
+      )
+    })
   })
 
   describe('setTrackingSids', () => {

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

@@ -0,0 +1,57 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { getUserId, isUserTrackingAllowed, localStorageUserKey } from '$lib/user'
+
+describe('user.ts', () => {
+  describe('getUserId', () => {
+    beforeEach(() => {
+    // @ts-ignore
+      window.PlayPilotLinkInjections = {
+        config: {
+          allow_user_id_tracking: true,
+        },
+      }
+    })
+
+    it('Should return random hash by default', () => {
+      expect(getUserId()).toBeTruthy()
+    })
+
+    it('Should return the previously set value', () => {
+      localStorage.setItem(localStorageUserKey, 'some_value')
+
+      expect(getUserId()).toBe('some_value')
+    })
+
+    it('Should return null if allow_user_id_tracking is not set', () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections = {}
+
+      expect(getUserId()).toBe(null)
+
+      localStorage.setItem(localStorageUserKey, 'some_value')
+
+      expect(getUserId()).toBe(null)
+    })
+
+    it('Should return the same id when called multiple times', () => {
+      expect(getUserId()).toBe(getUserId())
+    })
+  })
+
+  describe('isUserTrackingAllowed', () => {
+    beforeEach(() => {
+    // @ts-ignore
+      window.PlayPilotLinkInjections = {}
+    })
+
+    it('Should return true if user tracking is allowed', () => {
+      window.PlayPilotLinkInjections.config = { allow_user_id_tracking: true }
+
+      expect(isUserTrackingAllowed()).toBe(true)
+    })
+
+    it('Should return false if user tracking is not allowed', () => {
+      expect(isUserTrackingAllowed()).toBe(false)
+    })
+  })
+})

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

@@ -8,7 +8,7 @@ describe('YouTubeEmbedOverlay.svelte', () => {
     const { container } = render(YouTubeEmbedOverlay, { embeddable_url: 'youtube.com/watch?v=abc', onclose: () => null })
 
     // @ts-ignore
-    expect(container.querySelector('iframe').src).toBe('https://www.youtube.com/embed/abc?autoplay=true')
+    expect(container.querySelector('iframe').src).toBe('https://video.playpilot.net/?video_id=abc&autoplay=true&playsinline=true&controls=play,mute,fullscreen,progress,current-time&color=#fa548a')
   })
 
   it('Should render error message if embeddable_url is invalid', () => {