@raydiant/playlist-window-manager 0.0.0-test-1

package/src/WindowLoadError.ts

@@ -0,0 +1,8 @@
+export default class WindowLoadError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'WindowLoadError';
+    // Set prototype for instanceof WindowLoadError checks.
+    Object.setPrototypeOf(this, WindowLoadError.prototype);
+  }
+}

package/src/WindowTimeoutError.ts

@@ -0,0 +1,8 @@
+export default class WindowTimeoutError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'WindowTimeoutError';
+    // Set prototype for instanceof WindowTimeoutError checks.
+    Object.setPrototypeOf(this, WindowTimeoutError.prototype);
+  }
+}

package/src/WindowUnresponsiveError.ts

@@ -0,0 +1,8 @@
+export default class WindowUnresponsiveError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'WindowUnresponsiveError';
+    // Set prototype for instanceof WindowUnresponsiveError checks.
+    Object.setPrototypeOf(this, WindowUnresponsiveError.prototype);
+  }
+}

package/src/embeddedApps.test.ts

@@ -0,0 +1,231 @@
+import createEmbeddedApp from './embeddedApps';
+import { Presentation, ApplicationVersion, EmbeddedAppMetadata } from './types';
+
+const createPresentation = (
+  overrides: Partial<Presentation> = {}
+): Presentation => ({
+  id: 'id',
+  name: 'name',
+  applicationDeploymentId: 'applicationDeploymentId',
+  themeId: null,
+  applicationVariables: {},
+  duration: 0,
+  r: {
+    resource: {
+      updatedAt: '',
+      createdAt: '',
+    },
+    presentationsPlaylists: [],
+  },
+  ...overrides,
+});
+
+const createApplicationVersion = (
+  overrides: Partial<ApplicationVersion> = {}
+): ApplicationVersion => ({
+  id: 'id',
+  name: 'name',
+  applicationId: 'applicationId',
+  embeddedUrlFormat: null,
+  configurableDuration: false,
+  sourceUrl: null,
+  presentationProperties: [],
+  ...overrides,
+});
+
+const createMetadata = (
+  overrides: Partial<EmbeddedAppMetadata> = {}
+): EmbeddedAppMetadata => ({
+  renderMode: 'live',
+  ...overrides,
+});
+
+test('Replaces variable in query parameteers', () => {
+  expect(
+    createEmbeddedApp(
+      createPresentation({ applicationVariables: { foo: 'bar' } }),
+      createApplicationVersion({
+        embeddedUrlFormat: 'https://example.com?foo=:foo',
+      }),
+      createMetadata()
+    )
+  ).toBe('https://example.com?foo=bar');
+});
+
+test('Replaces variable in path', () => {
+  expect(
+    createEmbeddedApp(
+      createPresentation({ applicationVariables: { foo: 'bar' } }),
+      createApplicationVersion({
+        embeddedUrlFormat: 'https://example.com/:foo',
+      }),
+      createMetadata()
+    )
+  ).toBe('https://example.com/bar');
+});
+
+test('Replaces undefined variable with empty string', () => {
+  expect(
+    createEmbeddedApp(
+      createPresentation({ applicationVariables: {} }),
+      createApplicationVersion({
+        embeddedUrlFormat: 'https://example.com/:foo',
+      }),
+      createMetadata()
+    )
+  ).toBe('https://example.com/');
+});
+
+test('Replaces variable with underscore', () => {
+  expect(
+    createEmbeddedApp(
+      createPresentation({ applicationVariables: { foo_1: 'bar' } }),
+      createApplicationVersion({
+        embeddedUrlFormat: 'https://example.com/:foo_1',
+      }),
+      createMetadata()
+    )
+  ).toBe('https://example.com/bar');
+});
+
+test('Replaces variable with hyphen', () => {
+  expect(
+    createEmbeddedApp(
+      createPresentation({ applicationVariables: { 'foo-1': 'bar' } }),
+      createApplicationVersion({
+        embeddedUrlFormat: 'https://example.com/:foo-1',
+      }),
+      createMetadata()
+    )
+  ).toBe('https://example.com/bar');
+});
+
+test('Does not replace variable that is a number', () => {
+  expect(
+    createEmbeddedApp(
+      createPresentation({ applicationVariables: { foo: 'bar' } }),
+      createApplicationVersion({
+        embeddedUrlFormat: 'http://localhost:8080?foo=:foo',
+      }),
+      createMetadata()
+    )
+  ).toBe('http://localhost:8080?foo=bar');
+});
+
+test('Encodes a variables containing special characters', () => {
+  const fooValue = 'Lorem Ipsum. !@#$%^&*()-. More Text';
+  const fooValueEncoded =
+    'Lorem%20Ipsum.%20!%40%23%24%25%5E%26*()-.%20More%20Text';
+
+  expect(
+    createEmbeddedApp(
+      createPresentation({ applicationVariables: { foo: fooValue } }),
+      createApplicationVersion({
+        embeddedUrlFormat: `http://localhost:8080?foo=:foo`,
+      }),
+      createMetadata()
+    )
+  ).toBe(`http://localhost:8080?foo=${fooValueEncoded}`);
+});
+
+test('Does not encode value if presentation property disables encoding', () => {
+  expect(
+    createEmbeddedApp(
+      createPresentation({
+        applicationVariables: { url: 'https://raydiant.com' },
+      }),
+      createApplicationVersion({
+        embeddedUrlFormat: `:url`,
+        presentationProperties: [
+          { type: 'string', name: 'url', encode: false },
+        ],
+      }),
+      createMetadata()
+    )
+  ).toBe(`https://raydiant.com`);
+});
+
+test('Encodes a variables containing an array', () => {
+  const fooValue = ['option-a', 'option-b', 'option-c'];
+  const fooValueEncoded =
+    '%5B%22option-a%22%2C%22option-b%22%2C%22option-c%22%5D';
+
+  expect(
+    createEmbeddedApp(
+      createPresentation({ applicationVariables: { foo: fooValue } }),
+      createApplicationVersion({
+        embeddedUrlFormat: `http://localhost:8080?foo=:foo`,
+      }),
+      createMetadata()
+    )
+  ).toBe(`http://localhost:8080?foo=${fooValueEncoded}`);
+});
+
+test('Replaces $renderMode with metadata', () => {
+  const presentation = createPresentation();
+  const applicationVersion = createApplicationVersion({
+    embeddedUrlFormat: 'https://example.com?renderMode=:$renderMode',
+  });
+
+  expect(
+    createEmbeddedApp(
+      presentation,
+      applicationVersion,
+      createMetadata({ renderMode: 'preview' })
+    )
+  ).toBe('https://example.com?renderMode=preview');
+
+  expect(
+    createEmbeddedApp(
+      presentation,
+      applicationVersion,
+      createMetadata({ renderMode: 'live' })
+    )
+  ).toBe('https://example.com?renderMode=live');
+});
+
+test('Replaces undefined metadata with empty string', () => {
+  const presentation = createPresentation();
+  const applicationVersion = createApplicationVersion({
+    embeddedUrlFormat: 'https://example.com?invalid=:$invalid',
+  });
+
+  expect(
+    createEmbeddedApp(presentation, applicationVersion, createMetadata())
+  ).toBe('https://example.com?invalid=');
+});
+
+test('Replace protocol, ip and port', () => {
+  expect(
+    createEmbeddedApp(
+      createPresentation({
+        applicationVariables: {
+          protocol: 'http',
+          ip: '192.168.1.0',
+          port: 3000,
+        },
+      }),
+      createApplicationVersion({
+        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

@@ -0,0 +1,74 @@
+import { Presentation, ApplicationVersion, EmbeddedAppMetadata } from './types';
+
+export default function createEmbeddedApp(
+  presentation: Presentation,
+  applicationVersion: ApplicationVersion,
+  metadata: EmbeddedAppMetadata
+) {
+  // build matches
+  const parameterRegex = /(:([\w-\$]+))(.?$|[^\w-\$])/gm;
+  const matches = [];
+  let match = null;
+  do {
+    match = parameterRegex.exec(applicationVersion.embeddedUrlFormat || '');
+
+    if (match) {
+      matches.push(match);
+    }
+  } while (match !== null);
+
+  // replace
+  let url = applicationVersion.embeddedUrlFormat || '';
+  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"
+
+    const [, variableName] = queryParamVariableName.split(':');
+
+    let shouldEncodeValue = true;
+    let value: any = '';
+
+    if (variableName.charAt(0) === '$') {
+      const metadataKey = variableName.slice(1);
+      if (metadataKey === 'renderMode') {
+        value = metadata.renderMode;
+      }
+    } else {
+      // Don't replace variables that are numbers to allow setting
+      // port numbers in the embedded app url.
+      if (!isNaN(Number(variableName))) return;
+
+      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.
+      shouldEncodeValue =
+        !presentationProperty || presentationProperty.encode !== false;
+
+      value = presentation.applicationVariables[queryParamName];
+      if (value === undefined) value = '';
+      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) {
+      value = encodeURIComponent(value);
+    }
+
+    url = url.replace(queryParamVariableName, value);
+  });
+
+  return url;
+}

package/src/index.ts

@@ -0,0 +1,13 @@
+import PlaylistWindowManager from './PlaylistWindowManager';
+export * from './PlaylistWindowManager';
+export { PlaylistWindowManager };
+
+import PlaylistWindowManagerState from './PlaylistWindowManagerState';
+export * from './PlaylistWindowManagerState';
+export { PlaylistWindowManagerState };
+
+import PresentationWindow from './PresentationWindow';
+export * from './PresentationWindow';
+export { PresentationWindow };
+
+export * from './types';

package/src/preload.ts

@@ -0,0 +1,27 @@
+import { ipcRenderer, IpcRendererEvent } from 'electron';
+
+interface RaydiantInternals {
+  sendMessage: (windowId: string, type: string, payload?: any) => void;
+  receiveMessage?: (message: string) => void;
+}
+
+const internals: RaydiantInternals = {
+  sendMessage: (windowId: string, type: string, payload?: any) => {
+    ipcRenderer.send(windowId, type, payload);
+  }
+};
+
+// Set __RAYDIANT_INTERNALS on window so it is accessible in to the running application.
+(window as any).__RAYDIANT_INTERNALS = internals;
+
+// Forward messages from the main process to the app (render process) via receiveMessage.
+// __RAYDIANT_INTERNALS.receiveMessage is required to be set by the app with the Raydiant SDK.
+ipcRenderer.on('electron-main', (_: IpcRendererEvent, message: string) => {
+  if (typeof internals.receiveMessage === 'function') {
+    internals.receiveMessage(message);
+  } else {
+    console.error(
+      'Failed to handle message from main process, receiveMessage is not defined'
+    );
+  }
+});

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

@@ -0,0 +1,175 @@
+export interface Playlist {
+  id: string;
+}
+
+export interface Presentation {
+  id: string;
+  name: string;
+  applicationDeploymentId: string;
+  themeId: string | null;
+  applicationVariables: { [key: string]: any };
+  duration: number;
+  r: {
+    resource: {
+      updatedAt: string;
+      createdAt: string;
+    };
+    presentationsPlaylists: Array<{ playlistId: string }>;
+  };
+}
+
+export interface ApplicationVersion {
+  id: string;
+  name: string;
+  applicationId: string;
+  embeddedUrlFormat: string | null;
+  configurableDuration: boolean;
+  sourceUrl: string | null;
+  presentationProperties: Array<{
+    name: string;
+    type: string;
+    encode?: boolean;
+  }>;
+}
+
+export interface Font {
+  id: string;
+  name: string;
+  weight: string;
+  fileUpload: {
+    url: string;
+  };
+}
+export interface Theme {
+  id: string;
+  name: string;
+  backgroundColor: string;
+  backgroundImage: string;
+  backgroundImagePortrait: string;
+  headingTextColor: string;
+  headingFont: string;
+  heading2TextColor: string;
+  heading2Font: string;
+  bodyTextColor: string;
+  bodyFont: string;
+  borderColor: string;
+  headingFontNew: Font | null;
+  heading2FontNew: Font | null;
+  bodyFontNew: Font | null;
+  backgroundImageFileUpload: {
+    url: string;
+  } | null;
+  backgroundScale: 'fit' | 'fill' | null;
+}
+
+export interface Device {
+  id: string;
+  name: string | null;
+}
+
+export interface WindowBounds {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface WorkerState {
+  [key: string]: any;
+}
+
+export interface PreviewState {
+  inputs: Record<string, any>;
+}
+
+export interface CreateWindowOptions {
+  windowId: string;
+  parentWindowId?: string;
+  bounds?: WindowBounds;
+  backgroundColor?: string;
+
+  // Called when attaching a message listener to the inner window.
+  // The callback function will receive the message type (ie. presentation_ready)
+  // and a message payload if provided.
+  receiveMessageCallback?: (type: string, payload?: any) => void;
+
+  // Called when a window is unresponsive or crashed to move on to the next presentation.
+  errorCallback: (err: any) => void;
+}
+
+export interface Logger {
+  debug(message: any, context?: { [key: string]: any }): void;
+  info(message: any, context?: { [key: string]: any }): void;
+  warn(message: any, context?: { [key: string]: any }): void;
+  error(message: any, context?: { [key: string]: any }): void;
+}
+
+export interface PresentationWindowRenderer {
+  // Called when a new window needs to be created. It will be called once
+  // for the current window and again for the next window. A created window
+  // is hidden until the manager says it's active.
+  createWindow(options: CreateWindowOptions): void;
+
+  // Called when a window should be loaded with a URL, returns a promise that
+  // resolves when the window has finished loading.
+  loadWindow(windowId: string, url: string): Promise<void>;
+
+  // Called when a window's bounds beed to be updated.
+  updateWindowBounds(windowId: string, bounds: WindowBounds): void;
+
+  // Called when a window should be shown.
+  showWindow(windowId: string, isFocused: boolean): void;
+
+  // Called when a window should be hidden.
+  hideWindow(windowId: string): void;
+
+  // Called when a window should be destoyed, returns a promise that resolves
+  // when the window is finished unloading.
+  removeWindow(windowId: string): Promise<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;
+
+  // Called when unmuting a window.
+  unMuteWindow(windowId: string): void;
+}
+
+export interface OpenChildWindowOptions {
+  windowId: string;
+  playlistId: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  isFocused: boolean;
+  isMuted: boolean;
+  theme?: Theme;
+}
+
+export type Path = Array<string | number>;
+
+export interface BuilderState {
+  inputs: InputState[];
+  profileId?: string;
+}
+
+export interface InputState {
+  path: Path;
+  state: any;
+}
+
+export interface EmbeddedAppMetadata {
+  renderMode: 'preview' | 'live';
+}
+
+export interface AnalyticsEvent {
+  type: string;
+  source: string;
+  productCategory?: string | null;
+}