@playpilot/tpi 7.1.0 → 7.3.0

package/events.md

@@ -9,6 +9,11 @@ All events share a common payload:
 - `organization_sid`: The sid for the related organization
 - `domain_sid`: The sid for the related domain
 - `device`: Basic device info containing the screen type, size, touch, and orientation
+  - `type`: "desktop" or "mobile"
+  - `width`: Screen width in pixels
+  - `height`: Screen height in pixels
+  - `touch`: Whether the device uses touch controls or not
+  - `orientation`: "landscape-primary", "landscape-secondary", "portrait-primary", "portrait-secondary", or "undefined"
 
 Events related to titles share an additional set of data (referred to below as `Title`):
 

package/package.json

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

package/src/lib/explore.ts

@@ -3,6 +3,7 @@ import Explore from '../routes/components/Explore/Explore.svelte'
 
 export const exploreParentSelector = '[data-playpilot-explore]'
 export const explorePreConsentSelector = '[data-playpilot-pre-consent-explore]'
+export const exploreCustomStyleId = 'playpilot-explore-custom-style'
 
 let exploreInsertedComponent: object | null = null
 
@@ -19,6 +20,8 @@ export function insertExplore(): void {
 
   target.innerHTML = ''
   exploreInsertedComponent = mount(Explore, { target })
+
+  insertExploreCustomStyle()
 }
 
 export function destroyExplore(): void {
@@ -26,6 +29,8 @@ export function destroyExplore(): void {
 
   unmount(exploreInsertedComponent)
   exploreInsertedComponent = null
+
+  document.querySelector('#' + exploreCustomStyleId)?.remove()
 }
 
 /**
@@ -37,7 +42,7 @@ export function insertExploreIntoNavigation(): boolean {
   const config = window.PlayPilotLinkInjections.config
   if (!config) return false
 
-  const { explore_navigation_selector: selector, explore_navigation_label: label, explore_navigation_path: path, explore_navigation_insert_position: insertPosition } = window.PlayPilotLinkInjections.config
+  const { explore_navigation_selector: selector, explore_navigation_label: label, explore_navigation_path: path, explore_navigation_insert_position: insertPosition } = config
   if (!selector) return false
 
   // Make sure to remove an element we created if it already exists. Should not be possible under normal circumstances.
@@ -59,3 +64,16 @@ export function insertExploreIntoNavigation(): boolean {
 
   return true
 }
+
+function insertExploreCustomStyle(): void {
+  const customStyleString = window.PlayPilotLinkInjections.config?.explore_custom_style
+
+  if (!customStyleString) return
+
+  const styleElement = document.createElement('style')
+
+  styleElement.textContent = customStyleString
+  styleElement.id = exploreCustomStyleId
+
+  document.body.appendChild(styleElement)
+}

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

@@ -100,4 +100,5 @@ export type ConfigResponse = {
   explore_navigation_path?: string
   explore_navigation_insert_position?: InsertPosition
   explore_insert_cta_in_tpi?: boolean
+  explore_custom_style?: string
 }

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/routes/explore/+page.svelte

@@ -16,6 +16,7 @@
         explore_navigation_selector: 'nav a:last-child',
         explore_navigation_label: 'Streaming guide',
         explore_navigation_path: '/explore',
+        explore_custom_style: 'main { border: 2px solid white }',
       },
     }
   }

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

@@ -1,6 +1,7 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { destroyExplore, explorePreConsentSelector, insertExplore, insertExploreIntoNavigation } from '$lib/explore'
+import { destroyExplore, exploreCustomStyleId, explorePreConsentSelector, insertExplore, insertExploreIntoNavigation } from '$lib/explore'
 import { mount, unmount } from 'svelte'
+import { waitFor } from '@testing-library/svelte'
 vi.mock('svelte', () => ({
   mount: vi.fn(() => true),
   unmount: vi.fn(),
@@ -49,6 +50,34 @@ describe('explore.js', () => {
 
       expect(document.querySelector(explorePreConsentSelector)).not.toBeTruthy()
     })
+
+    it('Should insert custom style tag if config object is given', async () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections = {
+        config: {
+          explore_custom_style: 'main { color: red; }',
+        },
+      }
+
+      insertExplore()
+
+      await waitFor(() => {
+        expect(document.querySelector('#' + exploreCustomStyleId)).toBeTruthy()
+      })
+    })
+
+    it('Should not insert custom style tag if config value is not given', async () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections = {
+        config: {
+          explore_custom_style: '',
+        },
+      }
+
+      insertExplore()
+
+      expect(document.querySelector('#' + exploreCustomStyleId)).not.toBeTruthy()
+    })
   })
 
   describe('destroyExplore', () => {
@@ -64,6 +93,14 @@ describe('explore.js', () => {
 
       expect(unmount).toHaveBeenCalled()
     })
+
+    it('Should remove custom style tag', () => {
+      document.body.innerHTML = `<script id="${exploreCustomStyleId}"></script>`
+
+      destroyExplore()
+
+      expect(document.querySelector('#' + exploreCustomStyleId)).not.toBeTruthy()
+    })
   })
 
   describe('insertExploreIntoNavigation', () => {

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&color=fa548a&autoplay=true&playsinline=true&controls=play,mute,fullscreen,progress,current-time')
   })
 
   it('Should render error message if embeddable_url is invalid', () => {

package/vite._main.config.js

@@ -14,6 +14,7 @@ export default defineConfig(() => ({
         entryFileNames: 'link-injections.js',
       },
     },
+    chunkSizeWarningLimit: 10,
   },
 
   resolve: {

package/vite.config.js

@@ -17,6 +17,14 @@ export default defineConfig(() => ({
 
   test: {
     environment: 'happy-dom',
+    environmentOptions: {
+      happyDOM: {
+        settings: {
+          enableJavaScriptEvaluation: true,
+          disableJavaScriptFileLoading: true,
+        },
+      },
+    },
     include: ['src/**/*.{test,spec}.{js,ts}'],
     setupFiles: ['src/tests/setup.js'],
   },