@raydiant/playlist-window-manager 0.16.0 → 0.18.0

package/build/IFrameRenderer.d.ts

@@ -15,4 +15,5 @@ export default class IFrameRenderer implements PresentationWindowRenderer {
     destroy(): void;
     private getWindow;
     private globalMessageHandler;
+    private deserializeMessage;
 }

package/build/IFrameRenderer.js

@@ -35,34 +35,28 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var messagePrefix = 'raydiant:';
 var IFrameRenderer = /** @class */ (function () {
     function IFrameRenderer(container) {
         var _this = this;
         this.container = container;
         this.windows = {};
         this.globalMessageHandler = function (event) {
-            var _a;
-            var windowId;
-            var type;
-            var payload;
-            try {
-                (_a = JSON.parse(event.data), windowId = _a.windowId, type = _a.type, payload = _a.payload);
-            }
-            catch (err) {
-                console.warn("Invalid message received from iframe '" + JSON.stringify(event.data) + "', ignoring message");
-                return;
-            }
-            if (!windowId) {
-                // ignore messages that don't have windowId
-                // such message are comming from 3rd party IFrames like google
-                return;
-            }
-            var window = _this.getWindow(windowId);
-            if (!window) {
-                throw new Error("Failed add receive message callback to window, window with window id: '" + windowId + "' was not found");
-            }
-            if (window.receiveMessageCallback) {
-                window.receiveMessageCallback(type, payload);
+            // Ignore messages that don't start with the message prefix.
+            if (typeof event.data === 'string' &&
+                event.data.startsWith(messagePrefix)) {
+                var _a = _this.deserializeMessage(event.data), windowId = _a.windowId, type = _a.type, payload = _a.payload;
+                if (!windowId || !type) {
+                    console.warn("Invalid message received from child window '" + event.data + "'");
+                    return;
+                }
+                var window_1 = _this.getWindow(windowId);
+                if (!window_1) {
+                    throw new Error("Failed add receive message callback to window, window with window id: '" + windowId + "' was not found");
+                }
+                if (window_1.receiveMessageCallback) {
+                    window_1.receiveMessageCallback(type, payload);
+                }
             }
         };
         // Post message is a single channel for all window so we need to
@@ -178,7 +172,7 @@ var IFrameRenderer = /** @class */ (function () {
         if (!window.frame.contentWindow) {
             throw new Error("Failed to send message '" + message + "', contentWindow missing for '" + windowId + "'");
         }
-        window.frame.contentWindow.postMessage(message, '*');
+        window.frame.contentWindow.postMessage("" + messagePrefix + message, '*');
     };
     IFrameRenderer.prototype.muteWindow = function (windowId) {
         var window = this.getWindow(windowId);
@@ -202,6 +196,21 @@ var IFrameRenderer = /** @class */ (function () {
     IFrameRenderer.prototype.getWindow = function (windowId) {
         return this.windows[windowId];
     };
+    IFrameRenderer.prototype.deserializeMessage = function (message) {
+        var _a;
+        var windowId = '';
+        var type = '';
+        var payload;
+        var json = message.substring(messagePrefix.length);
+        try {
+            // Messages are sent as json in the format of { type: string, payload: unknown }.
+            (_a = JSON.parse(json), windowId = _a.windowId, type = _a.type, payload = _a.payload);
+        }
+        catch (err) {
+            // Not a valid message, return empty type and payload.
+        }
+        return { windowId: windowId, type: type, payload: payload };
+    };
     return IFrameRenderer;
 }());
 exports.default = IFrameRenderer;

package/build/PresentationWindow.d.ts

@@ -58,6 +58,7 @@ export default class PresentationWindow {
     private error;
     private workerState;
     private workerSubscriptions;
+    private runtimeSubscriptions;
     constructor(options: PresentationWindowOptions);
     load(): Promise<void>;
     show(isFocused?: boolean): void;
@@ -102,6 +103,8 @@ export default class PresentationWindow {
     private disableInteruptLock;
     private handleEmbeddedMessage;
     private handleLegacyMessage;
+    private handleReady;
+    private handleComplete;
     private handleError;
     private logDebug;
     private logInfo;

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/2.0.0/index.html';
+var defaultAppRendererUrl = 'https://apps.raydiant.com/3.0.0/index.html';
 var isValidNumber = function (value) {
     return typeof value === 'number' && !isNaN(value);
 };
@@ -91,35 +91,85 @@ var PresentationWindow = /** @class */ (function () {
         this.error = null;
         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;
-                if (type === '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
-                            });
+                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;
                     }
-                    else {
-                        this.logWarning("Invalid payload for worker-subscribe message: " + payload);
+                    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;
                     }
-                }
-                else if (type === 'worker-unsubscribe') {
-                    if (typeof payload === 'string') {
-                        this.logInfo("Received 'worker-unsubscribe' from window '" + windowId + "'");
-                        // The payload is the worker name.
-                        this.workerSubscriptions.delete(payload);
+                    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;
                     }
-                    else {
-                        this.logWarning("Invalid payload for worker-unsubscribe message: " + payload);
+                    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*/];
@@ -135,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 + "'");
@@ -318,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 () {
@@ -351,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;
         }
@@ -774,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());
     };

package/build/preload.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var electron_1 = require("electron");
 var internals = {
     sendMessage: function (windowId, type, payload) {
-        electron_1.ipcRenderer.send.apply(electron_1.ipcRenderer, [windowId, type].concat(payload));
+        electron_1.ipcRenderer.send(windowId, type, payload);
     }
 };
 // Set __RAYDIANT_INTERNALS on window so it is accessible in to the running application.

package/package.json

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

package/src/IFrameRenderer.ts

@@ -9,6 +9,8 @@ interface IFrameRendererWindow {
   receiveMessageCallback?: (type: string, payload?: any) => void;
 }
 
+const messagePrefix = 'raydiant:';
+
 export default class IFrameRenderer implements PresentationWindowRenderer {
   private windows: {
     [windowId: string]: IFrameRendererWindow;
@@ -153,7 +155,7 @@ export default class IFrameRenderer implements PresentationWindowRenderer {
       );
     }
 
-    window.frame.contentWindow.postMessage(message, '*');
+    window.frame.contentWindow.postMessage(`${messagePrefix}${message}`, '*');
   }
 
   public muteWindow(windowId: string) {
@@ -187,36 +189,46 @@ export default class IFrameRenderer implements PresentationWindowRenderer {
   }
 
   private globalMessageHandler = (event: MessageEvent) => {
-    let windowId: string;
-    let type: string;
-    let payload: any;
-
-    try {
-      ({ windowId, type, payload } = JSON.parse(event.data));
-    } catch (err) {
-      console.warn(
-        `Invalid message received from iframe '${JSON.stringify(
-          event.data
-        )}', ignoring message`
-      );
-      return;
+    // Ignore messages that don't start with the message prefix.
+    if (
+      typeof event.data === 'string' &&
+      event.data.startsWith(messagePrefix)
+    ) {
+      const { windowId, type, payload } = this.deserializeMessage(event.data);
+
+      if (!windowId || !type) {
+        console.warn(
+          `Invalid message received from child window '${event.data}'`
+        );
+        return;
+      }
+
+      const window = this.getWindow(windowId);
+      if (!window) {
+        throw new Error(
+          `Failed add receive message callback to window, window with window id: '${windowId}' was not found`
+        );
+      }
+
+      if (window.receiveMessageCallback) {
+        window.receiveMessageCallback(type, payload);
+      }
     }
+  };
 
-    if (!windowId) {
-      // ignore messages that don't have windowId
-      // such message are comming from 3rd party IFrames like google
-      return;
-    }
+  private deserializeMessage(message: string) {
+    let windowId = '';
+    let type = '';
+    let payload: unknown;
 
-    const window = this.getWindow(windowId);
-    if (!window) {
-      throw new Error(
-        `Failed add receive message callback to window, window with window id: '${windowId}' was not found`
-      );
+    const json = message.substring(messagePrefix.length);
+    try {
+      // Messages are sent as json in the format of { type: string, payload: unknown }.
+      ({ windowId, type, payload } = JSON.parse(json));
+    } catch (err) {
+      // Not a valid message, return empty type and payload.
     }
 
-    if (window.receiveMessageCallback) {
-      window.receiveMessageCallback(type, payload);
-    }
-  };
+    return { windowId, type, payload };
+  }
 }

package/src/PresentationWindow.ts

@@ -51,7 +51,7 @@ export interface PresentationWindowOptions {
 }
 
 // TODO: Automatically inject latest version when building in CI.
-const defaultAppRendererUrl = 'https://apps.raydiant.com/2.0.0/index.html';
+const defaultAppRendererUrl = 'https://apps.raydiant.com/3.0.0/index.html';
 
 const isValidNumber = (value: any) =>
   typeof value === 'number' && !isNaN(value);
@@ -86,6 +86,7 @@ export default class PresentationWindow {
 
   private workerState: WorkerState = {};
   private workerSubscriptions = new Set<string>();
+  private runtimeSubscriptions = new Set<string>();
 
   constructor(private options: PresentationWindowOptions) {
     this.builderState = options.builderState;
@@ -218,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();
@@ -260,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;
     }
@@ -731,37 +738,103 @@ export default class PresentationWindow {
   private handleEmbeddedMessage = async (type: string, payload?: any) => {
     const { windowId } = this.options;
 
-    if (type === '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
-          });
+    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);
         }
-      } else {
-        this.logWarning(
-          `Invalid payload for worker-subscribe message: ${payload}`
-        );
+        break;
       }
-    } else if (type === '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}`
-        );
+      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}`);
       }
     }
   };
@@ -776,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') {
@@ -871,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;
 

package/src/preload.ts

@@ -7,7 +7,7 @@ interface RaydiantInternals {
 
 const internals: RaydiantInternals = {
   sendMessage: (windowId: string, type: string, payload?: any) => {
-    ipcRenderer.send(windowId, type, ...payload);
+    ipcRenderer.send(windowId, type, payload);
   }
 };