@playpilot/tpi 7.2.0 → 7.3.1

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.2.0",
+	"version": "7.3.1",
 	"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/Description.svelte

@@ -40,6 +40,7 @@
   .paragraph {
     display: block;
     margin: margin(1) 0 0;
+    font-family: theme(description-font-family, font-family);
   }
 
   .show-more {

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

@@ -100,6 +100,7 @@
     position: relative;
     background: theme(playlink-background, lighter);
     box-shadow: theme(playlink-shadow, shadow);
+    border: theme(playlink-border, 0);
     border-radius: theme(playlink-border-radius, border-radius);
     color: theme(playlink-text-color, text-color) !important;
     font-weight: theme(playlink-font-weight, inherit);

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

@@ -41,8 +41,9 @@
     margin: margin(1) 0 margin(0.5);
     font-size: theme(rail-title-font-size, 18px);
     line-height: normal;
-    font-weight: inherit;
+    font-weight: theme(rail-title-font-weight, inherit);
     color: theme(rail-title-text-color, text-color);
+    font-family: theme(rail-title-font-family, font-family);
   }
 
   .rail {

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,15 @@ describe('explore.js', () => {
 
       expect(unmount).toHaveBeenCalled()
     })
+
+    it('Should remove custom style tag', () => {
+      document.body.innerHTML = `<div data-playpilot-explore></div><script id="${exploreCustomStyleId}"></script>`
+
+      insertExplore()
+      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://video.playpilot.net/?video_id=abc&autoplay=true&playsinline=true&controls=play,mute,fullscreen,progress,current-time&color=#fa548a')
+    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'],
   },