@raydiant/playlist-window-manager 0.15.2 → 0.17.0

package/build/PlaylistWindowManager.d.ts

@@ -1,6 +1,6 @@
 import * as RE from '@raydiant/playlist-rule-engine';
 import EventEmitter from 'eventemitter3';
-import { PresentationWindowRenderer, Device, WindowBounds, Theme, Logger } from './types';
+import { PresentationWindowRenderer, Device, WindowBounds, Theme, Logger, WorkerState } from './types';
 import PlaylistWindowManagerState from './PlaylistWindowManagerState';
 export interface PlaylistWindowManagerOptions {
     ruleEngine: RE.RuleEngine;
@@ -40,6 +40,7 @@ export default class PlaylistWindowManager extends EventEmitter {
     private themeOverride?;
     private forceMute;
     private isFocused;
+    private workerState;
     constructor(options: PlaylistWindowManagerOptions);
     private currentPresentationId;
     private nextPresentationId;
@@ -73,6 +74,7 @@ export default class PlaylistWindowManager extends EventEmitter {
     hide(): Promise<void>;
     isReady(): boolean;
     isLocked(): boolean;
+    runWorkerSubscriptions(state: WorkerState): void;
     private createWindow;
     private loadCurrentWindow;
     private shouldPreload;

package/build/PlaylistWindowManager.js

@@ -93,6 +93,7 @@ var PlaylistWindowManager = /** @class */ (function (_super) {
         _this.lastCompleteAt = null;
         _this.forceMute = false;
         _this.isFocused = false;
+        _this.workerState = {};
         _this.handleEnableInterruptLock = function () {
             var onEnableInterruptLock = _this.options.onEnableInterruptLock;
             if (onEnableInterruptLock) {
@@ -619,6 +620,18 @@ var PlaylistWindowManager = /** @class */ (function (_super) {
         }
         return this.currentWindow.isLocked();
     };
+    PlaylistWindowManager.prototype.runWorkerSubscriptions = function (state) {
+        // Persist worker state so new windows can be initialized with it.
+        this.workerState = state;
+        // Run worker subcriptions on the current window.
+        if (this.currentWindow) {
+            this.currentWindow.runWorkerSubscriptions(state);
+        }
+        // Run worker subscriptions on the next window.
+        if (this.nextWindow) {
+            this.nextWindow.runWorkerSubscriptions(state);
+        }
+    };
     PlaylistWindowManager.prototype.createWindow = function (pr) {
         var _a = this.options, readyTimeoutDurationSeconds = _a.readyTimeoutDurationSeconds, appRendererUrl = _a.appRendererUrl, backgroundColor = _a.backgroundColor, device = _a.device, logger = _a.logger, windowName = _a.windowName, parentWindowId = _a.parentWindowId, isPreview = _a.isPreview;
         if (!this.ruleEngine) {
@@ -660,7 +673,8 @@ var PlaylistWindowManager = /** @class */ (function (_super) {
             playlistWindowManagerState: this.state,
             ruleEngineState: this.ruleEngine.state,
             globalRule: this.ruleEngine.globalRule,
-            isPreview: isPreview
+            isPreview: isPreview,
+            workerState: this.workerState
         });
     };
     PlaylistWindowManager.prototype.loadCurrentWindow = function () {

package/build/PresentationWindow.d.ts

@@ -1,7 +1,7 @@
 import * as RE from '@raydiant/playlist-rule-engine';
 import PlaylistWindowManagerState from './PlaylistWindowManagerState';
 import PlaylistWindowManager from './PlaylistWindowManager';
-import { Presentation, ApplicationVersion, Theme, Device, PresentationWindowRenderer, WindowBounds, Logger, BuilderState } from './types';
+import { Presentation, ApplicationVersion, Theme, Device, PresentationWindowRenderer, WindowBounds, Logger, BuilderState, WorkerState } from './types';
 export interface PresentationWindowOptions {
     windowManager?: PlaylistWindowManager;
     windowId: string;
@@ -27,6 +27,7 @@ export interface PresentationWindowOptions {
     backgroundColor?: string;
     isPreview?: boolean;
     forceMute?: boolean;
+    workerState: WorkerState;
     onPresentationProperties?: (properties: any[], string: {
         [key: string]: string;
     }) => void;
@@ -55,6 +56,9 @@ export default class PresentationWindow {
     private theme;
     private forceMute;
     private error;
+    private workerState;
+    private workerSubscriptions;
+    private runtimeSubscriptions;
     constructor(options: PresentationWindowOptions);
     load(): Promise<void>;
     show(isFocused?: boolean): void;
@@ -84,8 +88,9 @@ export default class PresentationWindow {
     private isEmbeddedApp;
     private allChildWindowManagersReady;
     private checkIsReadyCallback;
+    private appendWindowIdToHash;
     private loadEmbeddedApp;
-    private loadRaydiantApp;
+    private loadLegacyApp;
     private createAndLoadWindow;
     private loadWindow;
     private sendMessage;
@@ -96,7 +101,10 @@ export default class PresentationWindow {
     private closeChildWindow;
     private enableInteruptLock;
     private disableInteruptLock;
-    private handleMessage;
+    private handleEmbeddedMessage;
+    private handleLegacyMessage;
+    private handleReady;
+    private handleComplete;
     private handleError;
     private logDebug;
     private logInfo;
@@ -117,6 +125,7 @@ export default class PresentationWindow {
         playlistName: string | undefined;
         rule: RE.RuleOperatorType | RE.RuleGroupType | RE.RuleScheduleType | null | undefined;
     };
+    runWorkerSubscriptions(state: WorkerState): void;
     private createRuleEngine;
     private isValidOpenChildWindowPayload;
     private shouldMute;

package/build/PresentationWindow.js

@@ -63,7 +63,7 @@ var PlaylistWindowManager_1 = __importDefault(require("./PlaylistWindowManager")
 var WindowTimeoutError_1 = __importDefault(require("./WindowTimeoutError"));
 var WindowLoadError_1 = __importDefault(require("./WindowLoadError"));
 // TODO: Automatically inject latest version when building in CI.
-var defaultAppRendererUrl = 'https://apps.raydiant.com/1.4.7/index.html';
+var defaultAppRendererUrl = 'https://apps.raydiant.com/2.0.0/index.html';
 var isValidNumber = function (value) {
     return typeof value === 'number' && !isNaN(value);
 };
@@ -89,7 +89,93 @@ var PresentationWindow = /** @class */ (function () {
         this.disableInterruptLockCallback = null;
         this.forceMute = false;
         this.error = null;
-        this.handleMessage = function (type, payload) { return __awaiter(_this, void 0, void 0, function () {
+        this.workerState = {};
+        this.workerSubscriptions = new Set();
+        this.runtimeSubscriptions = new Set();
+        this.handleEmbeddedMessage = function (type, payload) { return __awaiter(_this, void 0, void 0, function () {
+            var windowId, workerState;
+            return __generator(this, function (_a) {
+                windowId = this.options.windowId;
+                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.sendMessage('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);
+                            workerState = this.workerState[payload];
+                            if (workerState !== undefined) {
+                                this.sendMessage('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;
+                    }
+                    default: {
+                        this.logWarning("Received unknown embedded message type: " + type);
+                    }
+                }
+                return [2 /*return*/];
+            });
+        }); };
+        this.handleLegacyMessage = function (type, payload) { return __awaiter(_this, void 0, void 0, function () {
             var _a, windowId, onPresentationProperties;
             return __generator(this, function (_b) {
                 _a = this.options, windowId = _a.windowId, onPresentationProperties = _a.onPresentationProperties;
@@ -99,15 +185,11 @@ var PresentationWindow = /** @class */ (function () {
                 }
                 if (type === 'presentation_ready') {
                     this.logInfo("Received 'presentation_ready' from window '" + windowId + "'");
-                    this.didReceiveReady = true;
-                    this.checkIsReadyCallback();
+                    this.handleReady();
                 }
                 if (type === 'presentation_complete') {
                     this.logInfo("Received 'presentation_complete' from window '" + windowId + "'");
-                    this.didReceiveComplete = true;
-                    if (this.completeCallback) {
-                        this.completeCallback();
-                    }
+                    this.handleComplete();
                 }
                 if (type === 'enable_interrupt_lock') {
                     this.logInfo("Received 'enable_interrupt_lock' from window '" + windowId + "'");
@@ -168,12 +250,13 @@ var PresentationWindow = /** @class */ (function () {
         this.ruleEngineState = options.ruleEngineState;
         this.theme = options.theme;
         this.forceMute = options.forceMute || false;
+        this.workerState = options.workerState;
     }
     PresentationWindow.prototype.load = function () {
         if (this.isEmbeddedApp()) {
             return this.loadEmbeddedApp();
         }
-        return this.loadRaydiantApp();
+        return this.loadLegacyApp();
     };
     PresentationWindow.prototype.show = function (isFocused) {
         var _this = this;
@@ -225,6 +308,8 @@ var PresentationWindow = /** @class */ (function () {
                         this.errorCallback = null;
                         this.enableInterruptLockCallback = null;
                         this.disableInterruptLockCallback = null;
+                        // Clean up subscriptions
+                        this.workerSubscriptions.clear();
                         // Clear timers
                         if (this.readyTimeout) {
                             clearTimeout(this.readyTimeout);
@@ -279,13 +364,17 @@ var PresentationWindow = /** @class */ (function () {
             this.sendMessage('play');
             // Play any child window managers.
             Object.values(this.windowManagers).forEach(function (wm) {
-                // We only want trigger play on child windows the first play of the main window or if
+                // 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.sendMessage('play');
+        }
         this.lastPlayedAt = new Date();
     };
     PresentationWindow.prototype.pause = function () {
@@ -312,6 +401,9 @@ var PresentationWindow = /** @class */ (function () {
         this.disableInterruptLockCallback = callback;
     };
     PresentationWindow.prototype.isReady = function () {
+        // 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;
         }
@@ -379,7 +471,7 @@ var PresentationWindow = /** @class */ (function () {
     PresentationWindow.prototype.isEmbeddedApp = function () {
         var _a = this.options, applicationVersion = _a.applicationVersion, isPreview = _a.isPreview;
         // 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 Raydiant app
+        // 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;
@@ -408,6 +500,13 @@ var PresentationWindow = /** @class */ (function () {
             }
         }
     };
+    PresentationWindow.prototype.appendWindowIdToHash = function (urlStr, windowId) {
+        var url = new URL(urlStr);
+        var hashParams = new URLSearchParams(url.hash.slice(1));
+        hashParams.set('__raydiantWindowId', windowId);
+        url.hash = hashParams.toString();
+        return url.toString();
+    };
     PresentationWindow.prototype.loadEmbeddedApp = function () {
         return __awaiter(this, void 0, void 0, function () {
             var _a, windowId, applicationVersion, url;
@@ -420,16 +519,11 @@ var PresentationWindow = /** @class */ (function () {
                         }
                         url = embeddedApps_1.default(this.presentation, applicationVersion);
                         this.logInfo("Create window '" + windowId + "' for embedded app url '" + url + "'");
-                        // Embedded apps should not have a backgroundColor bexcause some sites expect
-                        // the browser default of white will be applied. We also don't attach the message
-                        // listeners for embedded apps. We could eventually allow embedded apps to send
-                        // lifecycle events but we should consider namespacing our message events.
-                        return [4 /*yield*/, this.createAndLoadWindow(url, '#ffffff')];
+                        return [4 /*yield*/, this.createAndLoadWindow(this.appendWindowIdToHash(url, windowId), 
+                            // Embedded apps should not have a backgroundColor because some sites expect
+                            // the browser default of white will be applied.
+                            '#ffffff', this.handleEmbeddedMessage)];
                     case 1:
-                        // Embedded apps should not have a backgroundColor bexcause some sites expect
-                        // the browser default of white will be applied. We also don't attach the message
-                        // listeners for embedded apps. We could eventually allow embedded apps to send
-                        // lifecycle events but we should consider namespacing our message events.
                         _b.sent();
                         this.didEmbeddedAppLoad = true;
                         this.checkIsReadyCallback();
@@ -438,17 +532,16 @@ var PresentationWindow = /** @class */ (function () {
             });
         });
     };
-    PresentationWindow.prototype.loadRaydiantApp = function () {
+    PresentationWindow.prototype.loadLegacyApp = function () {
         return __awaiter(this, void 0, void 0, function () {
-            var _a, windowId, _b, appRendererUrl, backgroundColor, url;
+            var _a, windowId, _b, appRendererUrl, backgroundColor;
             return __generator(this, function (_c) {
                 switch (_c.label) {
                     case 0:
                         _a = this.options, windowId = _a.windowId, _b = _a.appRendererUrl, appRendererUrl = _b === void 0 ? defaultAppRendererUrl : _b, backgroundColor = _a.backgroundColor;
-                        url = appRendererUrl + "#windowId=" + windowId;
                         this.logInfo("Create window '" + windowId + "'");
-                        return [4 /*yield*/, this.createAndLoadWindow(url, backgroundColor || '#000000', // Default to black bg for Raydiant apps
-                            this.handleMessage)];
+                        return [4 /*yield*/, this.createAndLoadWindow(this.appendWindowIdToHash(appRendererUrl, windowId), backgroundColor || '#000000', // Default to black bg for Raydiant apps
+                            this.handleLegacyMessage)];
                     case 1:
                         _c.sent();
                         return [4 /*yield*/, this.waitForPesentationReady()];
@@ -734,6 +827,16 @@ var PresentationWindow = /** @class */ (function () {
             this.disableInterruptLockCallback();
         }
     };
+    PresentationWindow.prototype.handleReady = function () {
+        this.didReceiveReady = true;
+        this.checkIsReadyCallback();
+    };
+    PresentationWindow.prototype.handleComplete = function () {
+        this.didReceiveComplete = true;
+        if (this.completeCallback) {
+            this.completeCallback();
+        }
+    };
     PresentationWindow.prototype.logDebug = function (message) {
         this.options.logger.debug(message, this.getLogContext());
     };
@@ -766,6 +869,24 @@ var PresentationWindow = /** @class */ (function () {
     PresentationWindow.prototype.metadata = function () {
         return this.getLogContext();
     };
+    PresentationWindow.prototype.runWorkerSubscriptions = function (state) {
+        // 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 (var _i = 0, _a = Array.from(this.workerSubscriptions); _i < _a.length; _i++) {
+            var workerName = _a[_i];
+            var workerState = state[workerName];
+            var previousWorkerState = this.workerState[workerName];
+            if (workerState !== undefined &&
+                !fast_deep_equal_1.default(workerState, previousWorkerState)) {
+                this.sendMessage('worker-state', {
+                    name: workerName,
+                    state: workerState
+                });
+            }
+        }
+        // Persist the new state so we can compare if the previous values have changed..
+        this.workerState = state;
+    };
     PresentationWindow.prototype.createRuleEngine = function (playlistId) {
         var globalRule = this.options.globalRule;
         return new RE.RuleEngine(playlistId, this.ruleEngineState, globalRule

package/build/preload.js

@@ -1,20 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var electron_1 = require("electron"); // eslint-disable-line
-var sendMessage = function (windowId, type, payload) {
-    electron_1.ipcRenderer.send.apply(electron_1.ipcRenderer, [windowId, type].concat(payload));
+var electron_1 = require("electron");
+var internals = {
+    sendMessage: function (windowId, type, payload) {
+        electron_1.ipcRenderer.send(windowId, type, payload);
+    }
 };
-var messageHandler = function (_, message) {
-    var receiveMessage = window.receiveMessage;
-    if (typeof receiveMessage === 'function') {
-        receiveMessage(message);
+// Set __RAYDIANT_INTERNALS on window so it is accessible in to the running application.
+window.__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.
+electron_1.ipcRenderer.on('electron-main', function (_, message) {
+    if (typeof internals.receiveMessage === 'function') {
+        internals.receiveMessage(message);
     }
     else {
-        throw new Error('receiveMessage is not defined');
+        console.error('Failed to handle message from main process, receiveMessage is not defined');
     }
-};
-// Add sendMessage and messageHandler to window so that app renderer knows we're
-// running in an Electron environment.
-window.sendMessage = sendMessage;
-window.messageHandler = messageHandler;
-electron_1.ipcRenderer.on('electron-main', messageHandler);
+});

package/build/types.d.ts

@@ -71,6 +71,9 @@ export interface WindowBounds {
     width: number;
     height: number;
 }
+export interface WorkerState {
+    [key: string]: any;
+}
 export interface CreateWindowOptions {
     windowId: string;
     parentWindowId?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raydiant/playlist-window-manager",
-  "version": "0.15.2",
+  "version": "0.17.0",
   "description": "Window manager for playlist playback.",
   "main": "build/index.js",
   "scripts": {

package/src/PlaylistWindowManager.ts

@@ -6,7 +6,8 @@ import {
   Device,
   WindowBounds,
   Theme,
-  Logger
+  Logger,
+  WorkerState
 } from './types';
 import PresentationWindow from './PresentationWindow';
 import PlaylistWindowManagerState from './PlaylistWindowManagerState';
@@ -99,6 +100,8 @@ export default class PlaylistWindowManager extends EventEmitter {
   private forceMute: boolean = false;
   private isFocused: boolean = false;
 
+  private workerState: WorkerState = {};
+
   constructor(private options: PlaylistWindowManagerOptions) {
     super();
 
@@ -421,6 +424,21 @@ export default class PlaylistWindowManager extends EventEmitter {
     return this.currentWindow.isLocked();
   }
 
+  public runWorkerSubscriptions(state: WorkerState) {
+    // Persist worker state so new windows can be initialized with it.
+    this.workerState = state;
+
+    // Run worker subcriptions on the current window.
+    if (this.currentWindow) {
+      this.currentWindow.runWorkerSubscriptions(state);
+    }
+
+    // Run worker subscriptions on the next window.
+    if (this.nextWindow) {
+      this.nextWindow.runWorkerSubscriptions(state);
+    }
+  }
+
   private createWindow(pr: RE.NextPresentationID): PresentationWindow {
     const {
       readyTimeoutDurationSeconds,
@@ -483,7 +501,8 @@ export default class PlaylistWindowManager extends EventEmitter {
       playlistWindowManagerState: this.state,
       ruleEngineState: this.ruleEngine.state,
       globalRule: this.ruleEngine.globalRule,
-      isPreview
+      isPreview,
+      workerState: this.workerState
     });
   }
 

package/src/PresentationWindow.ts

@@ -14,7 +14,8 @@ import {
   WindowBounds,
   Logger,
   OpenChildWindowOptions,
-  BuilderState
+  BuilderState,
+  WorkerState
 } from './types';
 
 export interface PresentationWindowOptions {
@@ -42,6 +43,7 @@ export interface PresentationWindowOptions {
   backgroundColor?: string;
   isPreview?: boolean;
   forceMute?: boolean;
+  workerState: WorkerState;
   onPresentationProperties?: (
     properties: any[],
     string: { [key: string]: string }
@@ -49,7 +51,7 @@ export interface PresentationWindowOptions {
 }
 
 // TODO: Automatically inject latest version when building in CI.
-const defaultAppRendererUrl = 'https://apps.raydiant.com/1.4.7/index.html';
+const defaultAppRendererUrl = 'https://apps.raydiant.com/2.0.0/index.html';
 
 const isValidNumber = (value: any) =>
   typeof value === 'number' && !isNaN(value);
@@ -82,6 +84,10 @@ export default class PresentationWindow {
   private forceMute: boolean = false;
   private error: Error | null = null;
 
+  private workerState: WorkerState = {};
+  private workerSubscriptions = new Set<string>();
+  private runtimeSubscriptions = new Set<string>();
+
   constructor(private options: PresentationWindowOptions) {
     this.builderState = options.builderState;
     this.presentation = options.presentation;
@@ -89,13 +95,14 @@ export default class PresentationWindow {
     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.loadRaydiantApp();
+    return this.loadLegacyApp();
   }
 
   public show(isFocused: boolean = true): void {
@@ -154,6 +161,9 @@ export default class PresentationWindow {
     this.enableInterruptLockCallback = null;
     this.disableInterruptLockCallback = null;
 
+    // Clean up subscriptions
+    this.workerSubscriptions.clear();
+
     // Clear timers
     if (this.readyTimeout) {
       clearTimeout(this.readyTimeout);
@@ -209,12 +219,15 @@ export default class PresentationWindow {
 
       // Play any child window managers.
       Object.values(this.windowManagers).forEach(wm => {
-        // We only want trigger play on child windows the first play of the main window or if
+        // 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.sendMessage('play');
     }
 
     this.lastPlayedAt = new Date();
@@ -251,6 +264,9 @@ export default class PresentationWindow {
   }
 
   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;
     }
@@ -329,7 +345,7 @@ export default class PresentationWindow {
     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 Raydiant app
+    // 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;
@@ -365,6 +381,15 @@ export default class PresentationWindow {
     }
   }
 
+  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;
 
@@ -375,34 +400,35 @@ export default class PresentationWindow {
     }
 
     const url = createEmbeddedApp(this.presentation, applicationVersion);
-
     this.logInfo(`Create window '${windowId}' for embedded app url '${url}'`);
 
-    // Embedded apps should not have a backgroundColor bexcause some sites expect
-    // the browser default of white will be applied. We also don't attach the message
-    // listeners for embedded apps. We could eventually allow embedded apps to send
-    // lifecycle events but we should consider namespacing our message events.
-    await this.createAndLoadWindow(url, '#ffffff');
+    await this.createAndLoadWindow(
+      this.appendWindowIdToHash(url, windowId),
+      // 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 loadRaydiantApp(): Promise<void> {
+  private async loadLegacyApp(): Promise<void> {
     const {
       windowId,
       appRendererUrl = defaultAppRendererUrl,
       backgroundColor
     } = this.options;
 
-    let url = `${appRendererUrl}#windowId=${windowId}`;
-
     this.logInfo(`Create window '${windowId}'`);
+
     await this.createAndLoadWindow(
-      url,
+      this.appendWindowIdToHash(appRendererUrl, windowId),
       backgroundColor || '#000000', // Default to black bg for Raydiant apps
-      this.handleMessage
+      this.handleLegacyMessage
     );
+
     await this.waitForPesentationReady();
   }
 
@@ -709,7 +735,111 @@ export default class PresentationWindow {
     }
   }
 
-  private handleMessage = async (type: string, payload?: any) => {
+  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.sendMessage('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.sendMessage('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;
+      }
+
+      default: {
+        this.logWarning(`Received unknown embedded message type: ${type}`);
+      }
+    }
+  };
+
+  private handleLegacyMessage = async (type: string, payload?: any) => {
     const { windowId, onPresentationProperties } = this.options;
 
     if (type === 'loaded') {
@@ -719,18 +849,14 @@ export default class PresentationWindow {
 
     if (type === 'presentation_ready') {
       this.logInfo(`Received 'presentation_ready' from window '${windowId}'`);
-      this.didReceiveReady = true;
-      this.checkIsReadyCallback();
+      this.handleReady();
     }
 
     if (type === 'presentation_complete') {
       this.logInfo(
         `Received 'presentation_complete' from window '${windowId}'`
       );
-      this.didReceiveComplete = true;
-      if (this.completeCallback) {
-        this.completeCallback();
-      }
+      this.handleComplete();
     }
 
     if (type === 'enable_interrupt_lock') {
@@ -814,6 +940,18 @@ export default class PresentationWindow {
     }
   };
 
+  private handleReady() {
+    this.didReceiveReady = true;
+    this.checkIsReadyCallback();
+  }
+
+  private handleComplete() {
+    this.didReceiveComplete = true;
+    if (this.completeCallback) {
+      this.completeCallback();
+    }
+  }
+
   private handleError = (error: any) => {
     this.error = error;
 
@@ -874,6 +1012,28 @@ export default class PresentationWindow {
     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.sendMessage('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(

package/src/preload.ts

@@ -1,21 +1,27 @@
-import { ipcRenderer, IpcRendererEvent } from 'electron'; // eslint-disable-line
+import { ipcRenderer, IpcRendererEvent } from 'electron';
 
-const sendMessage = (windowId: string, type: string, payload?: any) => {
-  ipcRenderer.send(windowId, type, ...payload);
-};
+interface RaydiantInternals {
+  sendMessage: (windowId: string, type: string, payload?: any) => void;
+  receiveMessage?: (message: string) => void;
+}
 
-const messageHandler = (_: IpcRendererEvent, message: string) => {
-  const receiveMessage = (window as any).receiveMessage;
-  if (typeof receiveMessage === 'function') {
-    receiveMessage(message);
-  } else {
-    throw new Error('receiveMessage is not defined');
+const internals: RaydiantInternals = {
+  sendMessage: (windowId: string, type: string, payload?: any) => {
+    ipcRenderer.send(windowId, type, payload);
   }
 };
 
-// Add sendMessage and messageHandler to window so that app renderer knows we're
-// running in an Electron environment.
-(window as any).sendMessage = sendMessage;
-(window as any).messageHandler = messageHandler;
+// Set __RAYDIANT_INTERNALS on window so it is accessible in to the running application.
+(window as any).__RAYDIANT_INTERNALS = internals;
 
-ipcRenderer.on('electron-main', messageHandler);
+// 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/types.ts

@@ -70,6 +70,10 @@ export interface WindowBounds {
   height: number;
 }
 
+export interface WorkerState {
+  [key: string]: any;
+}
+
 export interface CreateWindowOptions {
   windowId: string;
   parentWindowId?: string;