@raydiant/playlist-window-manager 0.0.0-electron-upgrade-1

package/src/PresentationWindow.ts

@@ -0,0 +1,1434 @@
+import * as RE from '@raydiant/playlist-rule-engine';
+import deepEqual from 'fast-deep-equal';
+import { v4 as uuidv4 } from 'uuid';
+import createEmbeddedApp from './embeddedApps';
+import PlaylistWindowManagerState from './PlaylistWindowManagerState';
+import PlaylistWindowManager from './PlaylistWindowManager';
+import WindowTimeoutError from './WindowTimeoutError';
+import WindowLoadError from './WindowLoadError';
+import {
+  Presentation,
+  ApplicationVersion,
+  Theme,
+  Device,
+  PresentationWindowRenderer,
+  WindowBounds,
+  Logger,
+  OpenChildWindowOptions,
+  BuilderState,
+  WorkerState,
+  EmbeddedAppMetadata,
+  AnalyticsEvent,
+  PreviewState,
+  Charge,
+  ChargeRequest,
+  ChargeResponse,
+  Terminal,
+} from './types';
+
+export interface PresentationWindowOptions {
+  windowManager?: PlaylistWindowManager;
+  windowId: string;
+  windowName?: string;
+  parentWindowId?: string;
+  builderState?: BuilderState;
+  presentation: Presentation;
+  applicationVersion: ApplicationVersion;
+  theme?: Theme;
+  device?: Device;
+  playlistId?: string;
+  playlistName?: string;
+  rule?: RE.Rule | null;
+  publishedAt: string;
+  playlistWindowManagerState: PlaylistWindowManagerState;
+  ruleEngineState: RE.State;
+  logger: Logger;
+  globalRule?: RE.Rule;
+  renderer: PresentationWindowRenderer;
+  readyTimeoutDurationSeconds?: number;
+  appRendererUrl?: string;
+  bounds?: WindowBounds;
+  backgroundColor?: string;
+  isPreview?: boolean;
+  forceMute?: boolean;
+  workerState: WorkerState;
+  onPresentationProperties?: (
+    properties: any[],
+    string: { [key: string]: string }
+  ) => void;
+  getTerminal?: () => Terminal | null;
+}
+
+// TODO: Automatically inject latest version when building in CI.
+const defaultAppRendererUrl = 'https://apps.raydiant.com/3.0.4/index.html';
+
+const isValidNumber = (value: any) =>
+  typeof value === 'number' && !isNaN(value);
+
+const isValidAnalyticsEvent = (value: any): value is AnalyticsEvent =>
+  value &&
+  typeof value === 'object' &&
+  typeof value.type === 'string' &&
+  typeof value.source === 'string' &&
+  (typeof value.productCategory === 'string' ||
+    value.productCategory === undefined ||
+    value.productCategory === null);
+
+const isValidChargeRequest = (value: any): value is ChargeRequest =>
+  value &&
+  typeof value === 'object' &&
+  typeof value.requestId === 'string' &&
+  typeof value.amount === 'number' &&
+  (value.tags === undefined ||
+    value.tags === null ||
+    typeof value.tags === 'object') &&
+  (value.idempotencyId === undefined ||
+    value.idempotencyId === null ||
+    typeof value.idempotencyId === 'string');
+
+export default class PresentationWindow {
+  private didReceiveReady: boolean = false;
+  private readyCallback: (() => void) | null = null;
+  private didReceiveComplete: boolean = false;
+  private completeCallback: (() => void) | null = null;
+  private errorCallback: ((err: Error) => void) | null = null;
+  private readyTimeout: ReturnType<typeof setTimeout> | null = null;
+  private windowManagers: { [windowId: string]: PlaylistWindowManager } = {};
+  private focusedWindowManager: PlaylistWindowManager | null = null;
+  private didEmbeddedAppLoad: boolean = false;
+  private lastPlayedAt: Date | null = null;
+  private configurableDurationTimeout: ReturnType<typeof setTimeout> | null =
+    null;
+  private isWindowLocked: boolean = false;
+  private isChildWindowLocked: { [windowId: string]: boolean } = {};
+  private enableInterruptLockCallback: (() => void) | null = null;
+  private disableInterruptLockCallback: (() => void) | null = null;
+  private analyticsEventCallback: ((event: AnalyticsEvent) => void) | null =
+    null;
+  private chargeRequestCallback: ((request: ChargeRequest) => void) | null =
+    null;
+
+  private builderState: BuilderState | undefined;
+  private presentation: Presentation;
+  private playlistWindowManagerState: PlaylistWindowManagerState;
+  private ruleEngineState: RE.State;
+  private theme: Theme | undefined;
+  private forceMute: boolean = false;
+  private error: Error | null = null;
+
+  private workerState: WorkerState = {};
+  private workerSubscriptions = new Set<string>();
+  private runtimeSubscriptions = new Set<string>();
+  private previewSubscriptions = new Set<string>();
+  private previewState: PreviewState = { inputs: {} };
+  private paymentSubscriptions = new Set<string>();
+
+  private createObjectURLResolvers: Record<string, (url: string) => void> = {};
+  private createObjectURLTimeouts: Record<
+    string,
+    ReturnType<typeof setTimeout>
+  > = {};
+
+  constructor(private options: PresentationWindowOptions) {
+    this.builderState = options.builderState;
+    this.presentation = options.presentation;
+    this.playlistWindowManagerState = options.playlistWindowManagerState;
+    this.ruleEngineState = options.ruleEngineState;
+    this.theme = options.theme;
+    this.forceMute = options.forceMute || false;
+    this.workerState = options.workerState;
+  }
+
+  public load(): Promise<void> {
+    if (this.isEmbeddedApp()) {
+      return this.loadEmbeddedApp();
+    }
+    return this.loadLegacyApp();
+  }
+
+  public show(isFocused: boolean = true): void {
+    const { windowId, renderer } = this.options;
+
+    // Show the main window and focus it before any child windows. Showing a child
+    // window that requires focus will move focus from the main window to the child.
+    renderer.showWindow(windowId, isFocused);
+
+    // Windows are created muted, check if we should unmute the window when showing.
+    // This ensures presentations that use audio take precendence over SYB playback on device.
+    // This checks the presentation for mute properties when shown but does not handle the case
+    // when an app becomes unmuted or muted while running (ie. someone interacting with a video player).
+    // A possible better solution would be to have apps fire an event when they need audio.
+    const isMuted = this.shouldMute();
+    if (!isMuted) {
+      renderer.unMuteWindow(windowId);
+    }
+
+    // Show child windows after main window, setting focus if necessary.
+    let isChildWindowFocused = false;
+    Object.values(this.windowManagers).map((wm) => {
+      if (
+        isFocused &&
+        this.focusedWindowManager &&
+        this.focusedWindowManager === wm
+      ) {
+        isChildWindowFocused = true;
+        wm.show(true);
+      } else {
+        wm.show(false);
+      }
+    });
+
+    this.logInfo(
+      `Show window '${windowId}' isMuted=${isMuted} isFocused=${isFocused}${
+        isChildWindowFocused ? ` isChildWindowFocused=true` : ''
+      }`
+    );
+  }
+
+  public hide(): void {
+    const { windowId, renderer } = this.options;
+    // Hide child windows before main window.
+    Object.values(this.windowManagers).map((wm) => wm.hide());
+    renderer.hideWindow(windowId);
+  }
+
+  public async remove(): Promise<void> {
+    const { windowId, renderer } = this.options;
+
+    // Clean up callbacks
+    this.readyCallback = null;
+    this.completeCallback = null;
+    this.errorCallback = null;
+    this.enableInterruptLockCallback = null;
+    this.disableInterruptLockCallback = null;
+
+    // Clean up subscriptions
+    this.workerSubscriptions.clear();
+
+    // Clear timers
+    if (this.readyTimeout) {
+      clearTimeout(this.readyTimeout);
+      this.readyTimeout = null;
+    }
+    if (this.configurableDurationTimeout) {
+      clearTimeout(this.configurableDurationTimeout);
+      this.configurableDurationTimeout = null;
+    }
+
+    // Remove any child window managers.
+    Object.values(this.windowManagers).forEach((wm) => {
+      wm.destroy();
+    });
+
+    // Remove the main window after removing all the child window managers.
+    try {
+      await renderer.removeWindow(windowId);
+      this.logInfo(`Removed window '${windowId}'`);
+    } catch (err: any) {
+      this.logError(
+        `Failed to remove window '${windowId}' with '${err.message}'`
+      );
+    }
+  }
+
+  // Method to modify the rule engine state for the inner playlist windows (called from outer playlist window manager)
+  public reinitializePresentationWindowRuleEngineState(
+    newRulesDataStoreObj: RE.RulesDataStore
+  ) {
+    Object.values(this.windowManagers).forEach((wm) => {
+      wm.reinitializeRuleEngineState(newRulesDataStoreObj);
+    });
+  }
+
+  public play(): void {
+    const { applicationVersion, presentation } = this.options;
+
+    if (applicationVersion.configurableDuration) {
+      const durationMs = Math.max(presentation.duration * 1000, 5000);
+      if (this.configurableDurationTimeout) {
+        clearTimeout(this.configurableDurationTimeout);
+      }
+      this.configurableDurationTimeout = setTimeout(() => {
+        if (this.completeCallback) {
+          this.completeCallback();
+        }
+      }, durationMs);
+    }
+
+    if (!this.isEmbeddedApp()) {
+      this.sendMessageString('play');
+
+      // Play any child window managers.
+      Object.values(this.windowManagers).forEach((wm) => {
+        // We only want to trigger play on child windows the first play of the main window or if
+        // the child window is paused.
+        if (!wm.isPlaying() || wm.isPaused()) {
+          wm.play();
+        }
+      });
+    } else if (this.runtimeSubscriptions.has('play')) {
+      // If the embedded app has subscribed to the play event, send it a play event.
+      this.sendMessageString('play');
+    }
+
+    this.lastPlayedAt = new Date();
+  }
+
+  public pause() {
+    // Pause all child window managers.
+    Object.values(this.windowManagers).forEach((wm) => wm.pause());
+  }
+
+  public resume() {
+    // Resume all child window managers.
+    Object.values(this.windowManagers).forEach((wm) => wm.resume());
+  }
+
+  public reset(): void {
+    this.didReceiveComplete = false;
+  }
+
+  public onComplete(callback: (() => void) | null) {
+    this.completeCallback = callback;
+  }
+
+  public onError(callback: ((err: Error) => void) | null) {
+    this.errorCallback = callback;
+  }
+
+  public onEnableInterruptLock(callback: (() => void) | null) {
+    this.enableInterruptLockCallback = callback;
+  }
+
+  public onDisableInterruptLock(callback: (() => void) | null) {
+    this.disableInterruptLockCallback = callback;
+  }
+
+  public onAnalyticsEvent(callback: ((event: AnalyticsEvent) => void) | null) {
+    this.analyticsEventCallback = callback;
+  }
+
+  public onChargeRequest(callback: ((request: ChargeRequest) => void) | null) {
+    this.chargeRequestCallback = callback;
+  }
+
+  public isReady() {
+    // TODO: To support the 'ready' event in embedded apps, they will need to tell the
+    // runtime that it should wait for ready instead of DOMLoaded. This could be a "wait
+    // for ready"  option in the Developer Portal.
+    if (this.isEmbeddedApp()) {
+      return this.didEmbeddedAppLoad;
+    }
+    return this.didReceiveReady && this.allChildWindowManagersReady();
+  }
+
+  public isComplete() {
+    return this.didReceiveComplete;
+  }
+
+  public isPlaying() {
+    return this.lastPlayedAt !== null;
+  }
+
+  public updateBounds(bounds: WindowBounds) {
+    const { windowId, renderer } = this.options;
+    renderer.updateWindowBounds(windowId, bounds);
+  }
+
+  public didError() {
+    return !!this.error;
+  }
+
+  public isLocked() {
+    return (
+      this.isWindowLocked ||
+      Object.values(this.isChildWindowLocked).some(Boolean)
+    );
+  }
+
+  public setPresentation(
+    presentation: Presentation,
+    playlistWindowManagerState: PlaylistWindowManagerState,
+    ruleEngineState: RE.State
+  ) {
+    this.presentation = presentation;
+    this.ruleEngineState = ruleEngineState;
+    this.playlistWindowManagerState = playlistWindowManagerState;
+  }
+
+  public setTheme(theme?: Theme) {
+    this.theme = theme;
+  }
+
+  public setBuilderState(builderState?: BuilderState) {
+    this.builderState = builderState;
+  }
+
+  public setForceMute(forceMute: boolean) {
+    this.forceMute = forceMute;
+  }
+
+  public async reload() {
+    const { applicationVersion, windowId } = this.options;
+
+    if (this.isEmbeddedApp()) {
+      if (applicationVersion.embeddedUrlFormat) {
+        if (this.previewSubscriptions.has('inputs')) {
+          this.logInfo(
+            `Reload window '${windowId}' for embedded app preview state`
+          );
+
+          const updatedInputs = transformInputValues(
+            this.presentation.applicationVariables
+          );
+
+          if (!deepEqual(updatedInputs, this.previewState.inputs)) {
+            this.sendMessageObject('preview-inputs', updatedInputs);
+          }
+
+          this.previewState.inputs = updatedInputs;
+        } else {
+          const url = this.getEmbeddedAppUrl();
+
+          this.logInfo(
+            `Reload window '${windowId}' for embedded app url '${url}'`
+          );
+          await this.loadWindow(url);
+        }
+      }
+    } else {
+      this.logInfo(`Reload window '${windowId}'`);
+      this.sendRenderMessage();
+    }
+  }
+
+  public runGetProperties(builderState?: BuilderState) {
+    // Do no support conditional properties for embedded apps. We will likely
+    // change the way conditional properties work.
+    if (!this.isEmbeddedApp()) {
+      this.sendMessageString('run_get_properties', builderState);
+    }
+  }
+
+  public async createObjectURL(blob: Blob): Promise<string> {
+    if (this.isEmbeddedApp()) {
+      return this.createObjectURLForEmbeddedApp(blob);
+    }
+
+    return URL.createObjectURL(blob);
+  }
+
+  public sendChargeResponse(response: ChargeResponse) {
+    // TODO: Instead of sending the charge to all windows, we should only send it to the app
+    // that requested the charge. We probably don't want to use the windowId to avoid missing
+    // the events in case the window was closed/restarted. Since we are only sending the charge
+    // id and status this seems ok for now but need to be mindful of sending any sensitive data.
+    this.sendMessageObject('payments-charge-response', {
+      requestId: response.requestId,
+      charge: response.charge,
+      error: response.error,
+    });
+    // Forward the event to the child window managers.
+    Object.values(this.windowManagers).forEach((wm) =>
+      wm.sendChargeResponse(response)
+    );
+  }
+
+  public sendCharge(charge: Charge) {
+    // TODO: Instead of sending the charge to all windows, we should only send it to the app
+    // that requested the charge.
+    if (this.paymentSubscriptions.has('charge')) {
+      this.sendMessageObject('payments-charge-event', { charge });
+    }
+    // Forward the event to the child window managers.
+    Object.values(this.windowManagers).forEach((wm) => wm.sendCharge(charge));
+  }
+
+  public sendTerminal(terminal: Terminal | null) {
+    if (this.paymentSubscriptions.has('terminal')) {
+      this.sendMessageObject('payments-terminal-event', { terminal });
+    }
+    // Forward the event to the child window managers.
+    Object.values(this.windowManagers).forEach((wm) =>
+      wm.sendTerminal(terminal)
+    );
+  }
+
+  private isEmbeddedApp() {
+    const { applicationVersion, isPreview } = this.options;
+
+    // If the application has a source url, always use it for rendering the preview.
+    // This fixes an issue with Hoopla which is an embedded app but uses a legacy app
+    // for it's preview.
+    if (isPreview && applicationVersion.sourceUrl) {
+      return false;
+    }
+
+    return !!applicationVersion.embeddedUrlFormat;
+  }
+
+  private allChildWindowManagersReady(): boolean {
+    // Return true if the presentation doesn't contain any playlists.
+    if (this.presentation.r.presentationsPlaylists.length === 0) {
+      return true;
+    }
+
+    return Object.values(this.windowManagers).every((wm) => wm.isReady());
+  }
+
+  private checkIsReadyCallback() {
+    if (this.isReady()) {
+      if (this.readyTimeout) {
+        clearTimeout(this.readyTimeout);
+      }
+
+      if (this.readyCallback) {
+        this.readyCallback();
+      }
+
+      // Trigger the enable interrupt lock callback if the presentation fired
+      // enable_interrupt_lock before presentation_ready.
+      if (this.isLocked() && this.enableInterruptLockCallback) {
+        this.enableInterruptLockCallback();
+      }
+    }
+  }
+
+  private appendWindowIdToHash(urlStr: string, windowId: string) {
+    const url = new URL(urlStr);
+    const hashParams = new URLSearchParams(url.hash.slice(1));
+    hashParams.set('__raydiantWindowId', windowId);
+    url.hash = hashParams.toString();
+
+    return url.toString();
+  }
+
+  private async loadEmbeddedApp(): Promise<void> {
+    const { windowId, applicationVersion } = this.options;
+
+    if (!applicationVersion.embeddedUrlFormat) {
+      throw new Error(
+        `Error loading embedded app, missing embeddedUrlFormat for '${applicationVersion.id}'`
+      );
+    }
+
+    const url = this.getEmbeddedAppUrl();
+    this.logInfo(`Create window '${windowId}' for embedded app url '${url}'`);
+
+    await this.createAndLoadWindow(
+      url,
+      // Embedded apps should not have a backgroundColor because some sites expect
+      // the browser default of white will be applied.
+      '#ffffff',
+      this.handleEmbeddedMessage
+    );
+    this.didEmbeddedAppLoad = true;
+
+    this.checkIsReadyCallback();
+  }
+
+  private async loadLegacyApp(): Promise<void> {
+    const {
+      windowId,
+      appRendererUrl = defaultAppRendererUrl,
+      backgroundColor,
+    } = this.options;
+
+    this.logInfo(`Create window '${windowId}'`);
+
+    await this.createAndLoadWindow(
+      this.appendWindowIdToHash(appRendererUrl, windowId),
+      backgroundColor || '#000000', // Default to black bg for Raydiant apps
+      this.handleLegacyMessage
+    );
+
+    await this.waitForPesentationReady();
+  }
+
+  private async createAndLoadWindow(
+    url: string,
+    backgroundColor?: string,
+    receiveMessageCallback?: (type: string, payload?: any) => void
+  ) {
+    const { windowId, parentWindowId, renderer, bounds } = this.options;
+
+    renderer.createWindow({
+      windowId,
+      parentWindowId,
+      bounds,
+      backgroundColor,
+      receiveMessageCallback,
+      errorCallback: this.handleError,
+    });
+
+    // Mute new window. This ensures preloaded windows are muted by default and
+    // prevents opening an audio channel on the device for SYB playback. When using
+    // the BrowserWindowRenderer this will call setAudioMuted(true) but the IFrameRenderer
+    // has no API for muting so we rely on apps that use mute presentation props to be
+    // initially muted before playing.
+    this.logInfo(`Mute window ${windowId}`);
+    renderer.muteWindow(windowId);
+
+    await this.loadWindow(url);
+  }
+
+  private async loadWindow(url: string) {
+    const { windowId, renderer } = this.options;
+    try {
+      await renderer.loadWindow(windowId, url);
+      this.logInfo(`Loaded window '${windowId}'`);
+    } catch (err: any) {
+      this.handleError(
+        new WindowLoadError(`Failed to load window with '${err.message}'`)
+      );
+    }
+  }
+
+  // Send a JSON stringified message to the renderer. This is the legacy way of sending
+  // messages and should be deprecated in favor of sendMessageObject.
+  private sendMessageString(type: string, payload?: any) {
+    const { windowId, renderer } = this.options;
+    const message = JSON.stringify({ type, payload, windowId });
+
+    this.logInfo(`Sending '${type}' to window '${windowId}'`);
+    renderer.sendMessageString(windowId, message);
+  }
+
+  // Send a message object to the renderer. This is the preferred way of sending messages
+  // going forward since it allows for more complex payloads like ArrayBuffers (for File Inputs).
+  private sendMessageObject(type: string, payload?: any) {
+    const { windowId, renderer } = this.options;
+
+    this.logInfo(`Sending '${type}' to window '${windowId}'`);
+    renderer.sendMessageObject(windowId, type, payload);
+  }
+
+  private waitForPesentationReady(): Promise<void> {
+    const { windowId, readyTimeoutDurationSeconds = 30 } = this.options;
+
+    return new Promise<void>((resolve) => {
+      if (this.didReceiveReady) {
+        resolve();
+      } else {
+        this.readyCallback = () => {
+          resolve();
+        };
+
+        if (this.readyTimeout) {
+          clearTimeout(this.readyTimeout);
+        }
+
+        this.readyTimeout = setTimeout(() => {
+          this.handleError(
+            new WindowTimeoutError(
+              `Window ${windowId} timed out after ${readyTimeoutDurationSeconds} seconds`
+            )
+          );
+          // Resolve the promise is the window times out. This ensures windowManager.load() resolves
+          // even if the current window times out. Fixes an issue where the boot screen isn't removed
+          // if the first presentation times out.
+          resolve();
+        }, readyTimeoutDurationSeconds * 1000);
+      }
+    });
+  }
+
+  private buildTheme(): Theme | undefined {
+    if (!this.theme) return;
+
+    const nextTheme = { ...this.theme };
+
+    if (nextTheme.headingFontNew && nextTheme.headingFontNew.fileUpload) {
+      nextTheme.headingFont =
+        nextTheme.headingFontNew.fileUpload.url || nextTheme.headingFont;
+    }
+
+    if (nextTheme.heading2FontNew && nextTheme.heading2FontNew.fileUpload) {
+      nextTheme.heading2Font =
+        nextTheme.heading2FontNew.fileUpload.url || nextTheme.heading2Font;
+    }
+
+    if (nextTheme.bodyFontNew && nextTheme.bodyFontNew.fileUpload) {
+      nextTheme.bodyFont =
+        nextTheme.bodyFontNew.fileUpload.url || nextTheme.bodyFont;
+    }
+
+    if (nextTheme.backgroundImageFileUpload) {
+      nextTheme.backgroundImage =
+        nextTheme.backgroundImageFileUpload.url || nextTheme.backgroundImage;
+    }
+
+    return nextTheme;
+  }
+
+  private sendRenderMessage() {
+    const { applicationVersion, isPreview, device } = this.options;
+    // IFrames do not have a mute/unmute API so we are overriding any mute properties
+    // to support muting MZ zones when using the IFrameRenderer (SecondScreen).
+    if (this.forceMute) {
+      this.sendMessageString('render', {
+        builderState: this.builderState,
+        presentation: {
+          ...this.presentation,
+          applicationVariables: {
+            ...this.presentation.applicationVariables,
+            // TODO: We need a better way to identify mute properties (ie. PropType.mute())
+            // Force mute the presentation, existing apps use either mute or muted.
+            mute: true,
+            muted: true,
+          },
+        },
+        theme: this.buildTheme(),
+        applicationVersion,
+        device,
+        isPreview,
+      });
+    } else {
+      this.sendMessageString('render', {
+        builderState: this.builderState,
+        presentation: this.presentation,
+        theme: this.buildTheme(),
+        applicationVersion,
+        device,
+        isPreview,
+      });
+    }
+  }
+
+  private async openChildWindow(
+    windowName: string,
+    playlistId: string,
+    bounds: WindowBounds,
+    forceMute: boolean = false,
+    isFocused: boolean = false,
+    themeOverride?: any
+  ) {
+    const {
+      windowId,
+      renderer,
+      device,
+      readyTimeoutDurationSeconds,
+      appRendererUrl,
+      logger,
+      isPreview,
+    } = this.options;
+    const parentWindowManager = this.options.windowManager;
+
+    let windowManager = this.windowManagers[windowName];
+
+    if (windowManager) {
+      const prevBounds = windowManager.getBounds();
+      const prevThemeOverride = windowManager.getThemeOverride();
+      const prevRuleEngine = windowManager.getRuleEngine();
+      const prevForceMute = windowManager.getForceMute();
+
+      const didBoundsChange = prevBounds
+        ? !deepEqual(bounds, prevBounds)
+        : true;
+
+      if (didBoundsChange) {
+        windowManager.updateBounds(bounds);
+      }
+
+      const didForceMuteChange = forceMute !== prevForceMute;
+      const didThemeOverrideChange = prevThemeOverride
+        ? !deepEqual(themeOverride, prevThemeOverride)
+        : true;
+
+      if (didForceMuteChange || didThemeOverrideChange) {
+        windowManager.setThemeOverride(themeOverride);
+        windowManager.setForceMute(forceMute);
+        windowManager.reload();
+      }
+
+      const didPlaylistChange = prevRuleEngine
+        ? playlistId !== prevRuleEngine.playlistId
+        : true;
+
+      if (didPlaylistChange) {
+        windowManager.reinitialize(
+          this.playlistWindowManagerState,
+          this.createRuleEngine(playlistId),
+          true
+        );
+      }
+    } else {
+      windowManager = new PlaylistWindowManager({
+        parentWindowId: windowId,
+        windowName,
+        ruleEngine: this.createRuleEngine(playlistId),
+        state: this.playlistWindowManagerState,
+        logger,
+        device,
+        readyTimeoutDurationSeconds: readyTimeoutDurationSeconds,
+        appRendererUrl: appRendererUrl,
+        bounds: {
+          x: bounds.x,
+          y: bounds.y,
+          width: bounds.width,
+          height: bounds.height,
+        },
+        backgroundColor: 'transparent',
+        themeOverride,
+        forceMute,
+        isPreview,
+        onEnableInterruptLock: () => this.enableInteruptLock(windowName),
+        onDisableInterruptLock: () => this.disableInteruptLock(windowName),
+        getTerminal: this.options.getTerminal,
+      });
+
+      // Hook up child window manager events to bubble up to the parent.
+      if (parentWindowManager) {
+        windowManager.on('window_preload_error', (metadata) => {
+          parentWindowManager.emit('window_preload_error', metadata);
+        });
+        windowManager.on('window_play', (metadata) => {
+          parentWindowManager.emit('window_play', metadata);
+        });
+        windowManager.on('window_end_success', (metadata) => {
+          parentWindowManager.emit('window_end_success', metadata);
+        });
+        windowManager.on('window_end_error', (metadata) => {
+          parentWindowManager.emit('window_end_error', metadata);
+        });
+        windowManager.on('window_analytics_event', (metadata) => {
+          parentWindowManager.emit('window_analytics_event', metadata);
+        });
+        windowManager.on('window_charge_request', (metadata) => {
+          parentWindowManager.emit('window_charge_request', metadata);
+        });
+      }
+
+      this.windowManagers[windowName] = windowManager;
+
+      windowManager.setRenderer(renderer);
+      await windowManager.load();
+
+      // The child window manager should be focused instead of the main window when focus() is called
+      // on the main window. Setting focus currently only happens on window create and can't be updated.
+      // This really only exists to support using VR with the remote in MZ. Only one child window can have
+      // focus, the last window to send an open window message wins. Handling focus needs more thought now
+      // that we have Secondscreen. We need to be extra careful about forcing focus in a touch environment.
+      if (isFocused) {
+        this.focusedWindowManager = windowManager;
+      }
+
+      // If a child window is opened and the presentation is already playing (Kiosk),
+      // play the window after opening it. Otherwise we'll will wait until the presentation
+      // is ready and has received play before playing it.
+      if (this.isPlaying()) {
+        windowManager.play();
+      } else {
+        this.checkIsReadyCallback();
+      }
+    }
+  }
+
+  private closeChildWindow(windowName: string) {
+    const windowManager = this.windowManagers[windowName];
+    if (windowManager) {
+      windowManager.destroy();
+      delete this.windowManagers[windowName];
+    } else {
+      this.logWarning(
+        `Failed to close child window manager for '${windowName}'.`
+      );
+    }
+  }
+
+  private enableInteruptLock(windowName?: string) {
+    if (windowName) {
+      this.isChildWindowLocked[windowName] = true;
+    } else {
+      this.isWindowLocked = true;
+    }
+
+    // If the presentation is ready and locked, trigger the enable interrupt callback.
+    if (this.isReady() && this.isLocked() && this.enableInterruptLockCallback) {
+      this.enableInterruptLockCallback();
+    }
+  }
+
+  private disableInteruptLock(windowName?: string) {
+    if (windowName) {
+      this.isChildWindowLocked[windowName] = false;
+    } else {
+      this.isWindowLocked = false;
+    }
+
+    // If the presentation is ready and unlocked, trigger the disable interrupt callback.
+    if (
+      this.isReady() &&
+      !this.isLocked() &&
+      this.disableInterruptLockCallback
+    ) {
+      this.disableInterruptLockCallback();
+    }
+  }
+
+  private getEmbeddedAppUrl() {
+    const { windowId } = this.options;
+
+    const metadata: EmbeddedAppMetadata = {
+      renderMode: this.options.isPreview ? 'preview' : 'live',
+    };
+
+    const url = createEmbeddedApp(
+      this.presentation,
+      this.options.applicationVersion,
+      metadata
+    );
+
+    return this.appendWindowIdToHash(url, windowId);
+  }
+
+  private handleEmbeddedMessage = async (type: string, payload?: any) => {
+    const { windowId } = this.options;
+
+    switch (type) {
+      case 'ready': {
+        this.logInfo(`Received 'ready' from window '${windowId}'`);
+        this.handleReady();
+        break;
+      }
+
+      case 'complete': {
+        if (payload === undefined) {
+          this.logInfo(`Received 'complete' from window '${windowId}'`);
+          this.handleComplete();
+        } else {
+          this.logInfo(
+            `Received 'complete' with error from window '${windowId}, error=${payload}'`
+          );
+          this.handleError(payload);
+        }
+        break;
+      }
+
+      case 'runtime-subscribe': {
+        if (typeof payload === 'string') {
+          this.logInfo(
+            `Received 'runtime-subscribe' from window '${windowId}'`
+          );
+          // The payload is the event name (ex. 'play').
+          this.runtimeSubscriptions.add(payload);
+
+          // Immediately send play if the app if already playing.
+          if (this.isPlaying()) {
+            this.sendMessageString('play');
+          }
+        } else {
+          this.logWarning(
+            `Invalid payload for runtime-subscribe message: ${payload}`
+          );
+        }
+        break;
+      }
+
+      case 'runtime-unsubscribe': {
+        if (typeof payload === 'string') {
+          this.logInfo(
+            `Received 'runtime-unsubscribe' from window '${windowId}'`
+          );
+          // The payload is the event name (ex. 'play').
+          this.runtimeSubscriptions.delete(payload);
+        } else {
+          this.logWarning(
+            `Invalid payload for runtime-subscribe message: ${payload}`
+          );
+        }
+        break;
+      }
+
+      case 'worker-subscribe': {
+        if (typeof payload === 'string') {
+          this.logInfo(`Received 'worker-subscribe' from window '${windowId}'`);
+
+          // The payload is the worker name.
+          this.workerSubscriptions.add(payload);
+
+          // Send the current state to the worker if it exists as soon
+          // as the app subscribes.
+          const workerState = this.workerState[payload];
+          if (workerState !== undefined) {
+            this.sendMessageString('worker-state', {
+              name: payload,
+              state: workerState,
+            });
+          }
+        } else {
+          this.logWarning(
+            `Invalid payload for worker-subscribe message: ${payload}`
+          );
+        }
+        break;
+      }
+
+      case 'worker-unsubscribe': {
+        if (typeof payload === 'string') {
+          this.logInfo(
+            `Received 'worker-unsubscribe' from window '${windowId}'`
+          );
+
+          // The payload is the worker name.
+          this.workerSubscriptions.delete(payload);
+        } else {
+          this.logWarning(
+            `Invalid payload for worker-unsubscribe message: ${payload}`
+          );
+        }
+        break;
+      }
+
+      case 'analytics-event': {
+        if (isValidAnalyticsEvent(payload)) {
+          if (this.analyticsEventCallback) {
+            this.analyticsEventCallback(payload);
+          }
+        } else {
+          this.logWarning(
+            `Invalid payload for analytics-event message: ${payload}`
+          );
+        }
+        break;
+      }
+
+      case 'create-object-url-result': {
+        if (isValidCreateObjectURLResultPayload(payload)) {
+          // Resolve promise with the local blob URL.
+          if (this.createObjectURLResolvers[payload.requestId]) {
+            this.createObjectURLResolvers[payload.requestId](payload.url);
+            delete this.createObjectURLResolvers[payload.requestId];
+          }
+          // Clear the timeout for the request.
+          if (this.createObjectURLTimeouts[payload.requestId]) {
+            clearTimeout(this.createObjectURLTimeouts[payload.requestId]);
+            delete this.createObjectURLTimeouts[payload.requestId];
+          }
+        } else {
+          this.logWarning(
+            `Invalid payload for create-object-url-result message: ${payload}`
+          );
+        }
+        break;
+      }
+
+      case 'preview-subscribe': {
+        if (typeof payload === 'string') {
+          this.logInfo(
+            `Received 'preview-subscribe' from window '${windowId}'`
+          );
+          // The payload is the event name (ex. 'inputs').
+          this.previewSubscriptions.add(payload);
+        } else {
+          this.logWarning(
+            `Invalid payload for preview-subscribe message: ${payload}`
+          );
+        }
+        break;
+      }
+
+      case 'preview-unsubscribe': {
+        if (typeof payload === 'string') {
+          this.logInfo(
+            `Received 'preview-unsubscribe' from window '${windowId}'`
+          );
+          // The payload is the event name (ex. 'inputs').
+          this.previewSubscriptions.delete(payload);
+        } else {
+          this.logWarning(
+            `Invalid payload for preview-subscribe message: ${payload}`
+          );
+        }
+        break;
+      }
+
+      case 'payments-charge-request': {
+        if (isValidChargeRequest(payload)) {
+          if (this.chargeRequestCallback) {
+            this.chargeRequestCallback(payload);
+          }
+        } else {
+          this.logWarning(
+            `Invalid payload for payments-charge-request message: ${payload}`
+          );
+        }
+        break;
+      }
+
+      case 'payments-subscribe': {
+        if (typeof payload === 'string') {
+          this.logInfo(`Received 'worker-subscribe' from window '${windowId}'`);
+          // The payload is the payment subscription type (ex. 'charge', 'terminal')
+          this.paymentSubscriptions.add(payload);
+
+          // Immediately send terminal when subscribing.
+          if (payload === 'terminal' && this.options.getTerminal) {
+            this.sendMessageObject('payments-terminal-event', {
+              terminal: this.options.getTerminal(),
+            });
+          }
+        } else {
+          this.logWarning(
+            `Invalid payload for payments-subscribe message: ${payload}`
+          );
+        }
+        break;
+      }
+
+      case 'payments-unsubscribe': {
+        if (typeof payload === 'string') {
+          this.logInfo(
+            `Received 'payments-unsubscribe' from window '${windowId}'`
+          );
+          this.paymentSubscriptions.delete(payload);
+        } else {
+          this.logWarning(
+            `Invalid payload for payments-unsubscribe message: ${payload}`
+          );
+        }
+        break;
+      }
+
+      default: {
+        this.logWarning(`Received unknown embedded message type: ${type}`);
+      }
+    }
+  };
+
+  private handleLegacyMessage = async (type: string, payload?: any) => {
+    const { windowId, onPresentationProperties } = this.options;
+
+    if (type === 'loaded') {
+      this.logInfo(`Received 'loaded' from window '${windowId}'`);
+      this.sendRenderMessage();
+    }
+
+    if (type === 'presentation_ready') {
+      this.logInfo(`Received 'presentation_ready' from window '${windowId}'`);
+      this.handleReady();
+    }
+
+    if (type === 'presentation_complete') {
+      this.logInfo(
+        `Received 'presentation_complete' from window '${windowId}'`
+      );
+      this.handleComplete();
+    }
+
+    if (type === 'enable_interrupt_lock') {
+      this.logInfo(
+        `Received 'enable_interrupt_lock' from window '${windowId}'`
+      );
+      this.enableInteruptLock();
+    }
+
+    if (type === 'disable_interrupt_lock') {
+      this.logInfo(
+        `Received 'disable_interrupt_lock' from window '${windowId}'`
+      );
+      this.disableInteruptLock();
+    }
+
+    if (type === 'open_child_window') {
+      this.logInfo(
+        `Received 'open_child_window' from window '${windowId}', windowId=${payload.windowId} playlistId=${payload.playlistId} isMuted=${payload.isMuted} x=${payload.x} y=${payload.y} width=${payload.width} height=${payload.height}`
+      );
+      if (this.isValidOpenChildWindowPayload(payload)) {
+        this.openChildWindow(
+          payload.windowId,
+          payload.playlistId,
+          {
+            x: Math.round(payload.x),
+            y: Math.round(payload.y),
+            width: Math.round(payload.width),
+            height: Math.round(payload.height),
+          },
+          payload.isMuted,
+          payload.isFocused,
+          payload.theme
+        );
+      } else {
+        this.logWarning(
+          `Invalid payload received for 'open_child_window', ignoring`
+        );
+      }
+    }
+
+    if (type === 'close_child_window') {
+      // TODO: Validate close_child_window message payload.
+      this.logInfo(
+        `Received 'close_child_window', windowId=${payload.windowId}`
+      );
+      this.closeChildWindow(payload.windowId);
+    }
+
+    if (type === 'log_error') {
+      this.handleError(
+        `Received error from window '${windowId}', error=${JSON.stringify(
+          payload
+        )}`
+      );
+    }
+
+    if (type === 'log_info') {
+      this.logInfo(
+        `Received info log from window '${windowId}', message=${JSON.stringify(
+          payload
+        )}`
+      );
+    }
+
+    if (type === 'log_debug') {
+      this.logDebug(
+        `Received info debug from window '${windowId}', message=${JSON.stringify(
+          payload
+        )}`
+      );
+    }
+
+    if (type === 'presentation_properties') {
+      this.logInfo(
+        `Received 'presentation_properties' from window '${windowId}'`
+      );
+      if (onPresentationProperties) {
+        onPresentationProperties(payload.properties, payload.strings);
+      }
+    }
+  };
+
+  private handleReady() {
+    this.didReceiveReady = true;
+    this.checkIsReadyCallback();
+  }
+
+  private handleComplete() {
+    this.didReceiveComplete = true;
+    if (this.completeCallback) {
+      this.completeCallback();
+    }
+  }
+
+  private handleError = (error: any) => {
+    this.error = error;
+
+    const message = error instanceof Error ? error.message : error;
+    this.logError(message);
+
+    if (this.errorCallback) {
+      this.errorCallback(error);
+    }
+  };
+
+  private logDebug(message: any) {
+    this.options.logger.debug(message, this.getLogContext());
+  }
+
+  private logInfo(message: any) {
+    this.options.logger.info(message, this.getLogContext());
+  }
+
+  private logWarning(message: any) {
+    this.options.logger.warn(message, this.getLogContext());
+  }
+
+  private logError(message: any) {
+    this.options.logger.error(message, this.getLogContext());
+  }
+
+  private getLogContext() {
+    const {
+      windowId,
+      windowName,
+      parentWindowId,
+      presentation,
+      applicationVersion,
+      publishedAt,
+      playlistId,
+      playlistName,
+      rule,
+    } = this.options;
+
+    return {
+      windowId,
+      windowName,
+      parentWindowId,
+      presentationId: presentation.id,
+      presentationName: presentation.name,
+      applicationId: applicationVersion.applicationId,
+      applicationVersionName: applicationVersion.name,
+      applicationVersionId: applicationVersion.id,
+      publishedAt,
+      playlistId,
+      playlistName,
+      rule,
+    };
+  }
+
+  public metadata() {
+    return this.getLogContext();
+  }
+
+  public runWorkerSubscriptions(state: WorkerState) {
+    // For each worker subscription, compare the previous state to the new state.
+    // If the state has changed, send the new state to the subscription.
+    for (const workerName of Array.from(this.workerSubscriptions)) {
+      const workerState = state[workerName];
+      const previousWorkerState = this.workerState[workerName];
+
+      if (
+        workerState !== undefined &&
+        !deepEqual(workerState, previousWorkerState)
+      ) {
+        this.sendMessageString('worker-state', {
+          name: workerName,
+          state: workerState,
+        });
+      }
+    }
+
+    // Persist the new state so we can compare if the previous values have changed..
+    this.workerState = state;
+  }
+
+  private createRuleEngine(playlistId: string) {
+    const { globalRule } = this.options;
+    return new RE.RuleEngine(
+      playlistId,
+      this.ruleEngineState,
+      globalRule
+        ? {
+            // Append to the global rule with an AND to filter out other presentations
+            // that have playlists. Prevents MZ in MZ, Kiosk in Kiosk, MZ in Kiosk, etc...
+            type: 'and',
+            group: [
+              globalRule,
+              {
+                type: 'equals',
+                left: { var: ['target', 'hasPlaylists'] },
+                right: { const: false },
+              },
+            ],
+          }
+        : {
+            // A global rule was not provided so we don't need to combine the rule with an AND.
+            type: 'equals',
+            left: { var: ['target', 'hasPlaylists'] },
+            right: { const: false },
+          }
+    );
+  }
+
+  private isValidOpenChildWindowPayload(
+    payload?: any
+  ): payload is OpenChildWindowOptions {
+    if (!payload) return false;
+    if (typeof payload !== 'object') return false;
+    if (!payload.windowId) return false;
+    if (!payload.playlistId) return false;
+    if (!isValidNumber(payload.x)) return false;
+    if (!isValidNumber(payload.y)) return false;
+    if (!isValidNumber(payload.width)) return false;
+    if (!isValidNumber(payload.height)) return false;
+
+    return true;
+  }
+
+  private shouldMute() {
+    if (this.forceMute) {
+      return true;
+    }
+    // Check app vars for muted properties. This is gross because it relies on
+    // presentation properties having specific names. A better solution is needed
+    // long term.
+    const appVars = this.presentation.applicationVariables;
+    const hasMuteProp = appVars.mute === true || appVars.muted === true;
+    if (hasMuteProp) {
+      return true;
+    }
+    const isMutedMultizone =
+      appVars.muteZone1 === true && appVars.muteZone2 === true;
+    return isMutedMultizone;
+  }
+
+  private createObjectURLForEmbeddedApp(blob: Blob): Promise<string> {
+    return new Promise((resolve, reject) => {
+      // Handle multiple concurrent createObjectURL calls by creating a request id for each
+      // call. We send the request id along with the message to the running app and the app
+      // sends the request id back with the result so we can resolve the correct promise.
+      const requestId = uuidv4();
+      this.createObjectURLResolvers[requestId] = resolve;
+
+      // Start a timer to reject the promise if the app doesn't respond with the create object
+      // url result within 1 second. This should be more or less instant.
+      this.createObjectURLTimeouts[requestId] = setTimeout(() => {
+        const error = new Error(
+          `Timed out waiting for the create-object-url-result message for request id ${requestId}`
+        );
+        reject(error);
+        delete this.createObjectURLResolvers[requestId];
+        delete this.createObjectURLTimeouts[requestId];
+      }, 1000);
+
+      // Create a FileReader object to read the file data as an ArrayBuffer.
+      const reader = new FileReader();
+
+      reader.addEventListener(
+        'load',
+        () => {
+          const buffer = reader.result;
+
+          // Check if buffer is an ArrayBuffer
+          if (buffer instanceof ArrayBuffer) {
+            // Send the ArrayBuffer to the running app to create the local file blob URL.
+            this.sendMessageObject('create-object-url', { requestId, buffer });
+          }
+        },
+        false
+      );
+
+      reader.readAsArrayBuffer(blob);
+
+      return '';
+    });
+  }
+}
+
+const isValidCreateObjectURLResultPayload = (
+  payload: any
+): payload is { requestId: string; url: string } => {
+  return (
+    // Ensure payload is an object.
+    typeof payload === 'object' &&
+    payload !== null &&
+    // Ensure requestId is a string.
+    'requestId' in payload &&
+    typeof payload['requestId'] === 'string' &&
+    // Ensure payload.file is an object.
+    'url' in payload &&
+    typeof payload['url'] === 'string'
+  );
+};
+
+const transformInputValues = (inputs: Record<string, any>) => {
+  const transformed: Record<string, any> = {};
+
+  // Recursively traverse inputs, transforming any file input values to remove internal
+  // properties like file_upload_id.
+  for (const [key, value] of Object.entries(inputs)) {
+    if (typeof value === 'object' && value !== null && 'url' in value) {
+      // Value is a file input, strip out the file_upload_id property.
+      transformed[key] = { url: value.url };
+    } else if (Array.isArray(value)) {
+      // Value is an array input, traverse each item in the array for file input values.
+      transformed[key] = [];
+      for (const item of value) {
+        transformed[key].push(transformInputValues(item));
+      }
+    } else {
+      transformed[key] = value;
+    }
+  }
+
+  return transformed;
+};