@raydiant/playlist-window-manager 0.20.0 → 0.21.0

package/src/embeddedApps.test.ts

@@ -13,11 +13,11 @@ const createPresentation = (
   r: {
     resource: {
       updatedAt: '',
-      createdAt: ''
+      createdAt: '',
     },
-    presentationsPlaylists: []
+    presentationsPlaylists: [],
   },
-  ...overrides
+  ...overrides,
 });
 
 const createApplicationVersion = (
@@ -30,14 +30,14 @@ const createApplicationVersion = (
   configurableDuration: false,
   sourceUrl: null,
   presentationProperties: [],
-  ...overrides
+  ...overrides,
 });
 
 const createMetadata = (
   overrides: Partial<EmbeddedAppMetadata> = {}
 ): EmbeddedAppMetadata => ({
   renderMode: 'live',
-  ...overrides
+  ...overrides,
 });
 
 test('Replaces variable in query parameteers', () => {
@@ -45,7 +45,7 @@ test('Replaces variable in query parameteers', () => {
     createEmbeddedApp(
       createPresentation({ applicationVariables: { foo: 'bar' } }),
       createApplicationVersion({
-        embeddedUrlFormat: 'https://example.com?foo=:foo'
+        embeddedUrlFormat: 'https://example.com?foo=:foo',
       }),
       createMetadata()
     )
@@ -57,7 +57,7 @@ test('Replaces variable in path', () => {
     createEmbeddedApp(
       createPresentation({ applicationVariables: { foo: 'bar' } }),
       createApplicationVersion({
-        embeddedUrlFormat: 'https://example.com/:foo'
+        embeddedUrlFormat: 'https://example.com/:foo',
       }),
       createMetadata()
     )
@@ -69,7 +69,7 @@ test('Replaces undefined variable with empty string', () => {
     createEmbeddedApp(
       createPresentation({ applicationVariables: {} }),
       createApplicationVersion({
-        embeddedUrlFormat: 'https://example.com/:foo'
+        embeddedUrlFormat: 'https://example.com/:foo',
       }),
       createMetadata()
     )
@@ -81,7 +81,7 @@ test('Replaces variable with underscore', () => {
     createEmbeddedApp(
       createPresentation({ applicationVariables: { foo_1: 'bar' } }),
       createApplicationVersion({
-        embeddedUrlFormat: 'https://example.com/:foo_1'
+        embeddedUrlFormat: 'https://example.com/:foo_1',
       }),
       createMetadata()
     )
@@ -93,7 +93,7 @@ test('Replaces variable with hyphen', () => {
     createEmbeddedApp(
       createPresentation({ applicationVariables: { 'foo-1': 'bar' } }),
       createApplicationVersion({
-        embeddedUrlFormat: 'https://example.com/:foo-1'
+        embeddedUrlFormat: 'https://example.com/:foo-1',
       }),
       createMetadata()
     )
@@ -105,7 +105,7 @@ test('Does not replace variable that is a number', () => {
     createEmbeddedApp(
       createPresentation({ applicationVariables: { foo: 'bar' } }),
       createApplicationVersion({
-        embeddedUrlFormat: 'http://localhost:8080?foo=:foo'
+        embeddedUrlFormat: 'http://localhost:8080?foo=:foo',
       }),
       createMetadata()
     )
@@ -121,7 +121,7 @@ test('Encodes a variables containing special characters', () => {
     createEmbeddedApp(
       createPresentation({ applicationVariables: { foo: fooValue } }),
       createApplicationVersion({
-        embeddedUrlFormat: `http://localhost:8080?foo=:foo`
+        embeddedUrlFormat: `http://localhost:8080?foo=:foo`,
       }),
       createMetadata()
     )
@@ -132,11 +132,13 @@ test('Does not encode value if presentation property disables encoding', () => {
   expect(
     createEmbeddedApp(
       createPresentation({
-        applicationVariables: { url: 'https://raydiant.com' }
+        applicationVariables: { url: 'https://raydiant.com' },
       }),
       createApplicationVersion({
         embeddedUrlFormat: `:url`,
-        presentationProperties: [{ name: 'url', encode: false }]
+        presentationProperties: [
+          { type: 'string', name: 'url', encode: false },
+        ],
       }),
       createMetadata()
     )
@@ -152,7 +154,7 @@ test('Encodes a variables containing an array', () => {
     createEmbeddedApp(
       createPresentation({ applicationVariables: { foo: fooValue } }),
       createApplicationVersion({
-        embeddedUrlFormat: `http://localhost:8080?foo=:foo`
+        embeddedUrlFormat: `http://localhost:8080?foo=:foo`,
       }),
       createMetadata()
     )
@@ -162,7 +164,7 @@ test('Encodes a variables containing an array', () => {
 test('Replaces $renderMode with metadata', () => {
   const presentation = createPresentation();
   const applicationVersion = createApplicationVersion({
-    embeddedUrlFormat: 'https://example.com?renderMode=:$renderMode'
+    embeddedUrlFormat: 'https://example.com?renderMode=:$renderMode',
   });
 
   expect(
@@ -185,7 +187,7 @@ test('Replaces $renderMode with metadata', () => {
 test('Replaces undefined metadata with empty string', () => {
   const presentation = createPresentation();
   const applicationVersion = createApplicationVersion({
-    embeddedUrlFormat: 'https://example.com?invalid=:$invalid'
+    embeddedUrlFormat: 'https://example.com?invalid=:$invalid',
   });
 
   expect(
@@ -200,13 +202,30 @@ test('Replace protocol, ip and port', () => {
         applicationVariables: {
           protocol: 'http',
           ip: '192.168.1.0',
-          port: 3000
-        }
+          port: 3000,
+        },
       }),
       createApplicationVersion({
-        embeddedUrlFormat: `:protocol://:ip::port`
+        embeddedUrlFormat: `:protocol://:ip::port`,
       }),
       createMetadata()
     )
   ).toBe(`http://192.168.1.0:3000`);
 });
+
+test('File input uses url as value', () => {
+  expect(
+    createEmbeddedApp(
+      createPresentation({
+        applicationVariables: { file: { url: 'https://image.png' } },
+      }),
+      createApplicationVersion({
+        embeddedUrlFormat: `https://example.come?image=:file`,
+        presentationProperties: [{ type: 'file', name: 'file' }],
+      }),
+      createMetadata()
+    )
+  ).toBe(
+    `https://example.come?image=${encodeURIComponent('https://image.png')}`
+  );
+});

package/src/embeddedApps.ts

@@ -19,7 +19,7 @@ export default function createEmbeddedApp(
 
   // replace
   let url = applicationVersion.embeddedUrlFormat || '';
-  matches.forEach(m => {
+  matches.forEach((m) => {
     const queryParamVariableName = m[1]; // Where the value of your input will be injected. E.g. ":location"
     const queryParamName = m[2]; // The query param name. E.g. "location"
 
@@ -38,9 +38,10 @@ export default function createEmbeddedApp(
       // port numbers in the embedded app url.
       if (!isNaN(Number(variableName))) return;
 
-      const presentationProperty = applicationVersion.presentationProperties.find(
-        p => p.name === variableName
-      );
+      const presentationProperty =
+        applicationVersion.presentationProperties.find(
+          (p) => p.name === variableName
+        );
 
       // If the presentation property is not found (this shouldn't happen), default to encoding the value.
       // Otherwise, only skip encoding if the presentation property's encode property is false.
@@ -52,6 +53,14 @@ export default function createEmbeddedApp(
       if (Array.isArray(value)) {
         value = JSON.stringify(value);
       }
+
+      // Presentation property specific handling.
+      if (presentationProperty) {
+        // If the presentation property is a file, use the url property as the value.
+        if (presentationProperty.type === 'file' && value && value.url) {
+          value = value.url;
+        }
+      }
     }
 
     if (shouldEncodeValue) {

package/src/testUtils.ts

@@ -0,0 +1,159 @@
+import * as re from '@raydiant/playlist-rule-engine';
+import PresentationWindow, {
+  PresentationWindowOptions,
+} from './PresentationWindow';
+import PlaylistWindowManagerState, {
+  PlaylistWindowManagerStateOptions,
+} from './PlaylistWindowManagerState';
+import {
+  Presentation,
+  ApplicationVersion,
+  Logger,
+  CreateWindowOptions,
+} from './types';
+
+export function createPresentationWindow(
+  overrides: Partial<PresentationWindowOptions> = {}
+): PresentationWindow {
+  return new PresentationWindow({
+    windowId: overrides.windowId ?? 'test',
+    presentation: createPresentation(overrides.presentation),
+    applicationVersion: createApplicationVersion(overrides.applicationVersion),
+    publishedAt: overrides.publishedAt ?? 'publishedAt',
+    playlistWindowManagerState:
+      overrides.playlistWindowManagerState ??
+      createPlaylistWindowManagerState(),
+    ruleEngineState: overrides.ruleEngineState ?? createRuleEngineState(),
+    logger: createLogger(),
+    workerState: overrides.workerState ?? {},
+    renderer: overrides.renderer ?? {
+      createWindow() {},
+      async loadWindow() {},
+      updateWindowBounds() {},
+      showWindow() {},
+      hideWindow() {},
+      async removeWindow() {},
+      sendMessageString() {},
+      sendMessageObject() {},
+      muteWindow() {},
+      unMuteWindow() {},
+    },
+  });
+}
+
+export function createPresentation(
+  overrides: Partial<Presentation> = {}
+): Presentation {
+  return {
+    id: overrides.id ?? 'id',
+    name: overrides.name ?? 'name',
+    applicationDeploymentId:
+      overrides.applicationDeploymentId ?? 'applicationDeploymentId',
+    themeId: overrides.themeId ?? null,
+    applicationVariables: overrides.applicationVariables ?? {},
+    duration: overrides.duration ?? 1,
+    r: createPresentationRelationships(overrides.r),
+  };
+}
+
+export function createPresentationRelationships(
+  overrides: Partial<Presentation['r']> = {}
+): Presentation['r'] {
+  return {
+    resource: overrides.resource ?? {
+      updatedAt: 'updatedAt',
+      createdAt: 'createdAt',
+    },
+    presentationsPlaylists: overrides.presentationsPlaylists ?? [],
+  };
+}
+
+export function createApplicationVersion(
+  overrides: Partial<ApplicationVersion> = {}
+): ApplicationVersion {
+  return {
+    id: overrides.id ?? 'id',
+    name: overrides.name ?? 'name',
+    applicationId: overrides.applicationId ?? 'applicationId',
+    embeddedUrlFormat: overrides.embeddedUrlFormat ?? null,
+    configurableDuration: overrides.configurableDuration ?? false,
+    sourceUrl: overrides.sourceUrl ?? null,
+    presentationProperties: overrides.presentationProperties ?? [],
+  };
+}
+
+export function createPlaylistWindowManagerState(
+  overrides: Partial<PlaylistWindowManagerStateOptions> = {}
+): PlaylistWindowManagerState {
+  return new PlaylistWindowManagerState({
+    presentations: overrides.presentations ?? {},
+    applicationVersions: overrides.applicationVersions ?? {},
+    themes: overrides.themes ?? {},
+    publishedAt: overrides.publishedAt ?? 'publishedAt',
+  });
+}
+
+export function createRuleEngineState(
+  playlists: {
+    [index: string]: re.Playlist;
+  } = {},
+  presentations: {
+    [index: string]: re.Presentation;
+  } = {},
+  rulesDataStore: re.RulesDataStore = {},
+  isMultitimezoneEnabled: boolean = false
+): re.State {
+  return new re.State(
+    playlists,
+    presentations,
+    rulesDataStore,
+    isMultitimezoneEnabled
+  );
+}
+
+export function createLogger(overrides: Partial<Logger> = {}) {
+  const noop = () => {};
+  return {
+    debug: overrides.debug ?? noop,
+    info: overrides.info ?? noop,
+    warn: overrides.warn ?? noop,
+    error: overrides.error ?? noop,
+  };
+}
+
+export function createRenderer() {
+  let createWindowOpts: CreateWindowOptions | null = null;
+
+  return {
+    createWindow: jest.fn((opts: CreateWindowOptions) => {
+      createWindowOpts = opts;
+    }),
+    loadWindow: jest.fn(),
+    updateWindowBounds: jest.fn(),
+    showWindow: jest.fn(),
+    hideWindow: jest.fn(),
+    removeWindow: jest.fn(),
+    sendMessageString: jest.fn(),
+    sendMessageObject: jest.fn(),
+    muteWindow: jest.fn(),
+    unMuteWindow: jest.fn(),
+    runReceiveMessageCallback(type: string, payload: any) {
+      if (createWindowOpts?.receiveMessageCallback) {
+        createWindowOpts.receiveMessageCallback(type, payload);
+      } else {
+        throw new Error(
+          'No receiveMessageCallback defined, make sure to call window.load first'
+        );
+      }
+    },
+    runErrorCallback(error: Error) {
+      if (createWindowOpts?.errorCallback) {
+        createWindowOpts.errorCallback(error);
+      } else {
+        throw new Error(
+          'No errorCallback defined, make sure to call window.load first'
+        );
+      }
+    },
+  };
+}

package/src/types.ts

@@ -25,7 +25,11 @@ export interface ApplicationVersion {
   embeddedUrlFormat: string | null;
   configurableDuration: boolean;
   sourceUrl: string | null;
-  presentationProperties: Array<{ name: string; encode?: boolean }>;
+  presentationProperties: Array<{
+    name: string;
+    type: string;
+    encode?: boolean;
+  }>;
 }
 
 export interface Font {
@@ -74,6 +78,10 @@ export interface WorkerState {
   [key: string]: any;
 }
 
+export interface PreviewState {
+  inputs: Record<string, any>;
+}
+
 export interface CreateWindowOptions {
   windowId: string;
   parentWindowId?: string;
@@ -119,8 +127,11 @@ export interface PresentationWindowRenderer {
   // when the window is finished unloading.
   removeWindow(windowId: string): Promise<void>;
 
-  // Called when sending a message to the inner window.
-  sendMessage(windowId: string, message: string): void;
+  // Called when sending a message string to the inner window.
+  sendMessageString(windowId: string, message: string): void;
+
+  // Called when sending a message object to the inner window.
+  sendMessageObject(windowId: string, type: string, payload?: any): void;
 
   // Called when muting a window.
   muteWindow(windowId: string): void;