@raydiant/playlist-window-manager 0.20.0 → 0.21.1

package/src/PresentationWindow.ts

@@ -1,5 +1,6 @@
 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';
@@ -17,7 +18,8 @@ import {
   BuilderState,
   WorkerState,
   EmbeddedAppMetadata,
-  AnalyticsEvent
+  AnalyticsEvent,
+  PreviewState,
 } from './types';
 
 export interface PresentationWindowOptions {
@@ -53,7 +55,7 @@ export interface PresentationWindowOptions {
 }
 
 // TODO: Automatically inject latest version when building in CI.
-const defaultAppRendererUrl = 'https://apps.raydiant.com/3.0.0/index.html';
+const defaultAppRendererUrl = 'https://apps.raydiant.com/3.0.1/index.html';
 
 const isValidNumber = (value: any) =>
   typeof value === 'number' && !isNaN(value);
@@ -74,21 +76,18 @@ export default class PresentationWindow {
   private completeCallback: (() => void) | null = null;
   private errorCallback: ((err: Error) => void) | null = null;
   private readyTimeout: ReturnType<typeof setTimeout> | null = null;
-  // private completeThrottleTimeout: 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 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 analyticsEventCallback: ((event: AnalyticsEvent) => void) | null =
+    null;
 
   private builderState: BuilderState | undefined;
   private presentation: Presentation;
@@ -101,6 +100,14 @@ export default class PresentationWindow {
   private workerState: WorkerState = {};
   private workerSubscriptions = new Set<string>();
   private runtimeSubscriptions = new Set<string>();
+  private previewSubscriptions = new Set<string>();
+  private previewState: PreviewState = { inputs: {} };
+
+  private createObjectURLResolvers: Record<string, (url: string) => void> = {};
+  private createObjectURLTimeouts: Record<
+    string,
+    ReturnType<typeof setTimeout>
+  > = {};
 
   constructor(private options: PresentationWindowOptions) {
     this.builderState = options.builderState;
@@ -138,7 +145,7 @@ export default class PresentationWindow {
 
     // Show child windows after main window, setting focus if necessary.
     let isChildWindowFocused = false;
-    Object.values(this.windowManagers).map(wm => {
+    Object.values(this.windowManagers).map((wm) => {
       if (
         isFocused &&
         this.focusedWindowManager &&
@@ -161,7 +168,7 @@ export default class PresentationWindow {
   public hide(): void {
     const { windowId, renderer } = this.options;
     // Hide child windows before main window.
-    Object.values(this.windowManagers).map(wm => wm.hide());
+    Object.values(this.windowManagers).map((wm) => wm.hide());
     renderer.hideWindow(windowId);
   }
 
@@ -189,7 +196,7 @@ export default class PresentationWindow {
     }
 
     // Remove any child window managers.
-    Object.values(this.windowManagers).forEach(wm => {
+    Object.values(this.windowManagers).forEach((wm) => {
       wm.destroy();
     });
 
@@ -197,7 +204,7 @@ export default class PresentationWindow {
     try {
       await renderer.removeWindow(windowId);
       this.logInfo(`Removed window '${windowId}'`);
-    } catch (err) {
+    } catch (err: any) {
       this.logError(
         `Failed to remove window '${windowId}' with '${err.message}'`
       );
@@ -208,7 +215,7 @@ export default class PresentationWindow {
   public reinitializePresentationWindowRuleEngineState(
     newRulesDataStoreObj: RE.RulesDataStore
   ) {
-    Object.values(this.windowManagers).forEach(wm => {
+    Object.values(this.windowManagers).forEach((wm) => {
       wm.reinitializeRuleEngineState(newRulesDataStoreObj);
     });
   }
@@ -229,10 +236,10 @@ export default class PresentationWindow {
     }
 
     if (!this.isEmbeddedApp()) {
-      this.sendMessage('play');
+      this.sendMessageString('play');
 
       // Play any child window managers.
-      Object.values(this.windowManagers).forEach(wm => {
+      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()) {
@@ -241,7 +248,7 @@ export default class PresentationWindow {
       });
     } 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.sendMessageString('play');
     }
 
     this.lastPlayedAt = new Date();
@@ -249,12 +256,12 @@ export default class PresentationWindow {
 
   public pause() {
     // Pause all child window managers.
-    Object.values(this.windowManagers).forEach(wm => wm.pause());
+    Object.values(this.windowManagers).forEach((wm) => wm.pause());
   }
 
   public resume() {
     // Resume all child window managers.
-    Object.values(this.windowManagers).forEach(wm => wm.resume());
+    Object.values(this.windowManagers).forEach((wm) => wm.resume());
   }
 
   public reset(): void {
@@ -342,12 +349,28 @@ export default class PresentationWindow {
 
     if (this.isEmbeddedApp()) {
       if (applicationVersion.embeddedUrlFormat) {
-        const url = this.getEmbeddedAppUrl();
+        if (this.previewSubscriptions.has('inputs')) {
+          this.logInfo(
+            `Reload window '${windowId}' for embedded app preview state`
+          );
 
-        this.logInfo(
-          `Reload window '${windowId}' for embedded app url '${url}'`
-        );
-        await this.loadWindow(url);
+          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}'`);
@@ -359,10 +382,18 @@ export default class PresentationWindow {
     // Do no support conditional properties for embedded apps. We will likely
     // change the way conditional properties work.
     if (!this.isEmbeddedApp()) {
-      this.sendMessage('run_get_properties', builderState);
+      this.sendMessageString('run_get_properties', builderState);
     }
   }
 
+  public async createObjectURL(blob: Blob): Promise<string> {
+    if (this.isEmbeddedApp()) {
+      return this.createObjectURLForEmbeddedApp(blob);
+    }
+
+    return URL.createObjectURL(blob);
+  }
+
   private isEmbeddedApp() {
     const { applicationVersion, isPreview } = this.options;
 
@@ -382,7 +413,7 @@ export default class PresentationWindow {
       return true;
     }
 
-    return Object.values(this.windowManagers).every(wm => wm.isReady());
+    return Object.values(this.windowManagers).every((wm) => wm.isReady());
   }
 
   private checkIsReadyCallback() {
@@ -440,7 +471,7 @@ export default class PresentationWindow {
     const {
       windowId,
       appRendererUrl = defaultAppRendererUrl,
-      backgroundColor
+      backgroundColor,
     } = this.options;
 
     this.logInfo(`Create window '${windowId}'`);
@@ -467,7 +498,7 @@ export default class PresentationWindow {
       bounds,
       backgroundColor,
       receiveMessageCallback,
-      errorCallback: this.handleError
+      errorCallback: this.handleError,
     });
 
     // Mute new window. This ensures preloaded windows are muted by default and
@@ -486,25 +517,36 @@ export default class PresentationWindow {
     try {
       await renderer.loadWindow(windowId, url);
       this.logInfo(`Loaded window '${windowId}'`);
-    } catch (err) {
+    } catch (err: any) {
       this.handleError(
         new WindowLoadError(`Failed to load window with '${err.message}'`)
       );
     }
   }
 
-  private sendMessage(type: string, payload?: any) {
+  // 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.sendMessage(windowId, message);
+    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 => {
+    return new Promise<void>((resolve) => {
       if (this.didReceiveReady) {
         resolve();
       } else {
@@ -564,7 +606,7 @@ export default class PresentationWindow {
     // 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.sendMessage('render', {
+      this.sendMessageString('render', {
         builderState: this.builderState,
         presentation: {
           ...this.presentation,
@@ -573,22 +615,22 @@ export default class PresentationWindow {
             // 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
-          }
+            muted: true,
+          },
         },
         theme: this.buildTheme(),
         applicationVersion,
         device,
-        isPreview
+        isPreview,
       });
     } else {
-      this.sendMessage('render', {
+      this.sendMessageString('render', {
         builderState: this.builderState,
         presentation: this.presentation,
         theme: this.buildTheme(),
         applicationVersion,
         device,
-        isPreview
+        isPreview,
       });
     }
   }
@@ -608,7 +650,7 @@ export default class PresentationWindow {
       readyTimeoutDurationSeconds,
       appRendererUrl,
       logger,
-      isPreview
+      isPreview,
     } = this.options;
     const parentWindowManager = this.options.windowManager;
 
@@ -664,31 +706,31 @@ export default class PresentationWindow {
           x: bounds.x,
           y: bounds.y,
           width: bounds.width,
-          height: bounds.height
+          height: bounds.height,
         },
         backgroundColor: 'transparent',
         themeOverride,
         forceMute,
         isPreview,
         onEnableInterruptLock: () => this.enableInteruptLock(windowName),
-        onDisableInterruptLock: () => this.disableInteruptLock(windowName)
+        onDisableInterruptLock: () => this.disableInteruptLock(windowName),
       });
 
       // Hook up child window manager events to bubble up to the parent.
       if (parentWindowManager) {
-        windowManager.on('window_preload_error', metadata => {
+        windowManager.on('window_preload_error', (metadata) => {
           parentWindowManager.emit('window_preload_error', metadata);
         });
-        windowManager.on('window_play', metadata => {
+        windowManager.on('window_play', (metadata) => {
           parentWindowManager.emit('window_play', metadata);
         });
-        windowManager.on('window_end_success', metadata => {
+        windowManager.on('window_end_success', (metadata) => {
           parentWindowManager.emit('window_end_success', metadata);
         });
-        windowManager.on('window_end_error', metadata => {
+        windowManager.on('window_end_error', (metadata) => {
           parentWindowManager.emit('window_end_error', metadata);
         });
-        windowManager.on('window_analytics_event', metadata => {
+        windowManager.on('window_analytics_event', (metadata) => {
           parentWindowManager.emit('window_analytics_event', metadata);
         });
       }
@@ -764,7 +806,7 @@ export default class PresentationWindow {
     const { windowId } = this.options;
 
     const metadata: EmbeddedAppMetadata = {
-      renderMode: this.options.isPreview ? 'preview' : 'live'
+      renderMode: this.options.isPreview ? 'preview' : 'live',
     };
 
     const url = createEmbeddedApp(
@@ -809,7 +851,7 @@ export default class PresentationWindow {
 
           // Immediately send play if the app if already playing.
           if (this.isPlaying()) {
-            this.sendMessage('play');
+            this.sendMessageString('play');
           }
         } else {
           this.logWarning(
@@ -845,9 +887,9 @@ export default class PresentationWindow {
           // as the app subscribes.
           const workerState = this.workerState[payload];
           if (workerState !== undefined) {
-            this.sendMessage('worker-state', {
+            this.sendMessageString('worker-state', {
               name: payload,
-              state: workerState
+              state: workerState,
             });
           }
         } else {
@@ -881,6 +923,56 @@ export default class PresentationWindow {
         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;
+      }
+
       default: {
         this.logWarning(`Received unknown embedded message type: ${type}`);
       }
@@ -933,7 +1025,7 @@ export default class PresentationWindow {
             x: Math.round(payload.x),
             y: Math.round(payload.y),
             width: Math.round(payload.width),
-            height: Math.round(payload.height)
+            height: Math.round(payload.height),
           },
           payload.isMuted,
           payload.isFocused,
@@ -1037,7 +1129,7 @@ export default class PresentationWindow {
       publishedAt,
       playlistId,
       playlistName,
-      rule
+      rule,
     } = this.options;
 
     return {
@@ -1052,7 +1144,7 @@ export default class PresentationWindow {
       publishedAt,
       playlistId,
       playlistName,
-      rule
+      rule,
     };
   }
 
@@ -1071,9 +1163,9 @@ export default class PresentationWindow {
         workerState !== undefined &&
         !deepEqual(workerState, previousWorkerState)
       ) {
-        this.sendMessage('worker-state', {
+        this.sendMessageString('worker-state', {
           name: workerName,
-          state: workerState
+          state: workerState,
         });
       }
     }
@@ -1097,15 +1189,15 @@ export default class PresentationWindow {
               {
                 type: 'equals',
                 left: { var: ['target', 'hasPlaylists'] },
-                right: { const: false }
-              }
-            ]
+                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 }
+            right: { const: false },
           }
     );
   }
@@ -1141,4 +1233,85 @@ export default class PresentationWindow {
       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;
+};