@raydiant/playlist-window-manager 0.26.2 → 0.27.1

package/build/PresentationWindow.d.ts

@@ -154,4 +154,5 @@ export default class PresentationWindow {
     private releaseInterruptLock;
     private createLockTimeout;
     private runInterruptCallback;
+    private getRenderMode;
 }

package/build/PresentationWindow.js

@@ -659,17 +659,30 @@ var PresentationWindow = /** @class */ (function () {
         this.forceMute = forceMute;
     };
     PresentationWindow.prototype.reload = function () {
+        var _a;
         return __awaiter(this, void 0, void 0, function () {
-            var _a, applicationVersion, windowId, updatedInputs, url;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
+            var _b, applicationVersion, windowId, updatedInputs, url;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
                     case 0:
-                        _a = this.options, applicationVersion = _a.applicationVersion, windowId = _a.windowId;
+                        _b = this.options, applicationVersion = _b.applicationVersion, windowId = _b.windowId;
                         if (!this.isEmbeddedApp()) return [3 /*break*/, 4];
                         if (!applicationVersion.embeddedUrlFormat) return [3 /*break*/, 3];
                         if (!this.previewSubscriptions.has('inputs')) return [3 /*break*/, 1];
                         this.logInfo("Reload window '".concat(windowId, "' for embedded app preview state"));
                         updatedInputs = transformInputValues(this.presentation.applicationVariables);
+                        // Add metadata to inputs if they exist in the URL template. These need to be
+                        // consistent with metadata keys in embeddedApps.ts.
+                        if (applicationVersion.embeddedUrlFormat.includes(':$renderMode')) {
+                            updatedInputs['$renderMode'] = this.getRenderMode();
+                        }
+                        if (applicationVersion.embeddedUrlFormat.includes(':$token')) {
+                            updatedInputs['$token'] = this.presentation.token;
+                        }
+                        if (applicationVersion.embeddedUrlFormat.includes(':$deviceId')) {
+                            updatedInputs['$deviceId'] = (_a = this.options.device) === null || _a === void 0 ? void 0 : _a.id;
+                        }
+                        // Send the updated inputs to the embedded app if they have changed.
                         if (!(0, fast_deep_equal_1.default)(updatedInputs, this.previewState.inputs)) {
                             this.sendMessageObject('preview-inputs', updatedInputs);
                         }
@@ -680,13 +693,13 @@ var PresentationWindow = /** @class */ (function () {
                         this.logInfo("Reload window '".concat(windowId, "' for embedded app url '").concat(url, "'"));
                         return [4 /*yield*/, this.loadWindow(url)];
                     case 2:
-                        _b.sent();
-                        _b.label = 3;
+                        _c.sent();
+                        _c.label = 3;
                     case 3: return [3 /*break*/, 5];
                     case 4:
                         this.logInfo("Reload window '".concat(windowId, "'"));
                         this.sendRenderMessage();
-                        _b.label = 5;
+                        _c.label = 5;
                     case 5: return [2 /*return*/];
                 }
             });
@@ -1144,10 +1157,13 @@ var PresentationWindow = /** @class */ (function () {
         }
     };
     PresentationWindow.prototype.getEmbeddedAppUrl = function () {
-        var _a = this.options, windowId = _a.windowId, appRendererOfflineSupport = _a.appRendererOfflineSupport;
+        var _a = this.options, windowId = _a.windowId, appRendererOfflineSupport = _a.appRendererOfflineSupport, device = _a.device;
         var metadata = {
-            renderMode: this.options.isPreview ? 'preview' : 'live',
+            renderMode: this.getRenderMode(),
         };
+        if (device) {
+            metadata.deviceId = device.id;
+        }
         var url = (0, embeddedApps_1.default)(this.presentation, this.options.applicationVersion, metadata);
         return this.getFullAppRendererUrl({
             appRendererUrl: url,
@@ -1375,6 +1391,9 @@ var PresentationWindow = /** @class */ (function () {
         }
         this.previouslyLocked = currentlyLocked;
     };
+    PresentationWindow.prototype.getRenderMode = function () {
+        return this.options.isPreview ? 'preview' : 'live';
+    };
     return PresentationWindow;
 }());
 exports.default = PresentationWindow;
@@ -1405,7 +1424,12 @@ var transformInputValues = function (inputs) {
             transformed[key] = [];
             for (var _c = 0, value_1 = value; _c < value_1.length; _c++) {
                 var item = value_1[_c];
-                transformed[key].push(transformInputValues(item));
+                if (typeof item === 'object' && item !== null) {
+                    transformed[key].push(transformInputValues(item));
+                }
+                else {
+                    transformed[key].push(item);
+                }
             }
         }
         else {

package/build/PresentationWindow.test.js

@@ -111,12 +111,21 @@ describe('embedded apps', function () {
                     window = (0, testUtils_1.createPresentationWindow)({
                         windowId: 'test-reload-message',
                         presentation: (0, testUtils_1.createPresentation)({
-                            applicationVariables: { input: 'test' },
+                            applicationVariables: {
+                                input: 'test',
+                                multi: [],
+                            },
+                            token: 'token',
                         }),
                         applicationVersion: (0, testUtils_1.createApplicationVersion)({
-                            embeddedUrlFormat: 'http://test.local/:input',
-                            presentationProperties: [{ name: 'input', type: 'string' }],
+                            embeddedUrlFormat: 'http://test.local/:input?renderMode=:$renderMode&token=:$token&deviceId=:$deviceId',
+                            presentationProperties: [
+                                { name: 'input', type: 'string' },
+                                { name: 'multi', type: 'select' },
+                            ],
                         }),
+                        isPreview: true,
+                        device: { id: 'device-id', name: 'device-name' },
                         renderer: testRenderer,
                     });
                     return [4 /*yield*/, window.load()];
@@ -124,13 +133,25 @@ describe('embedded apps', function () {
                     _a.sent();
                     // Subscribe to receive input updates via message.
                     testRenderer.runReceiveMessageCallback('preview-subscribe', 'inputs');
-                    window.setPresentation((0, testUtils_1.createPresentation)({ applicationVariables: { input: 'updated' } }), (0, testUtils_1.createPlaylistWindowManagerState)(), (0, testUtils_1.createRuleEngineState)());
+                    window.setPresentation((0, testUtils_1.createPresentation)({
+                        applicationVariables: {
+                            input: 'updated',
+                            multi: ['a', 'b', 'c'],
+                        },
+                        token: 'token',
+                    }), (0, testUtils_1.createPlaylistWindowManagerState)(), (0, testUtils_1.createRuleEngineState)());
                     return [4 /*yield*/, window.reload()];
                 case 2:
                     _a.sent();
                     // loadWindow should only be called once for the initial load.
                     expect(testRenderer.loadWindow).toHaveBeenCalledTimes(1);
-                    expect(testRenderer.sendMessageObject).toHaveBeenCalledWith('test-reload-message', 'preview-inputs', { input: 'updated' });
+                    expect(testRenderer.sendMessageObject).toHaveBeenCalledWith('test-reload-message', 'preview-inputs', {
+                        $renderMode: 'preview',
+                        $token: 'token',
+                        $deviceId: 'device-id',
+                        input: 'updated',
+                        multi: ['a', 'b', 'c'],
+                    });
                     // sendMessageObject should not be called again for the same inputs.
                     return [4 /*yield*/, window.reload()];
                 case 3:

package/build/embeddedApps.js

@@ -13,6 +13,7 @@ function createEmbeddedApp(presentation, applicationVersion, metadata) {
     } while (match !== null);
     // replace
     var url = applicationVersion.embeddedUrlFormat || '';
+    var queryIndex = url.indexOf('?');
     matches.forEach(function (m) {
         var queryParamVariableName = m[1]; // Where the value of your input will be injected. E.g. ":location"
         var queryParamName = m[2]; // The query param name. E.g. "location"
@@ -20,6 +21,8 @@ function createEmbeddedApp(presentation, applicationVersion, metadata) {
         var shouldEncodeValue = true;
         var value = '';
         if (variableName.charAt(0) === '$') {
+            var variableIndex = url.indexOf(queryParamVariableName);
+            var isPartOfQuery = queryIndex != -1 && variableIndex > queryIndex;
             var metadataKey = variableName.slice(1);
             if (metadataKey === 'renderMode') {
                 value = metadata.renderMode;
@@ -27,6 +30,18 @@ function createEmbeddedApp(presentation, applicationVersion, metadata) {
             else if (metadataKey === 'token') {
                 value = presentation.token;
             }
+            else if (metadataKey === 'deviceId') {
+                if (metadata.deviceId) {
+                    value = metadata.deviceId;
+                }
+                else {
+                    // If :$deviceId is part of the URL path, avoid creating a broken URL if metadata.deviceId is not defined.
+                    // This will use the variable name as the value instead of an empty string.
+                    if (!isPartOfQuery) {
+                        value = queryParamVariableName;
+                    }
+                }
+            }
         }
         else {
             // Don't replace variables that are numbers to allow setting

package/build/embeddedApps.test.js

@@ -128,3 +128,24 @@ test('Replaces $token with presentation token', function () {
     });
     expect((0, embeddedApps_1.default)(presentation, applicationVersion, createMetadata())).toBe('https://example.com?token=abc');
 });
+test('Replaces $deviceId with metadata deviceId when provided', function () {
+    var presentation = createPresentation();
+    var applicationVersion = createApplicationVersion({
+        embeddedUrlFormat: 'https://example.com/:$deviceId/content',
+    });
+    expect((0, embeddedApps_1.default)(presentation, applicationVersion, createMetadata({ deviceId: 'device-id' }))).toBe('https://example.com/device-id/content');
+});
+test('Do not replace $deviceId when in the URI with metadata not defined', function () {
+    var presentation = createPresentation();
+    var applicationVersion = createApplicationVersion({
+        embeddedUrlFormat: 'https://example.com/:$deviceId/content',
+    });
+    expect((0, embeddedApps_1.default)(presentation, applicationVersion, createMetadata())).toBe("https://example.com/".concat(encodeURIComponent(':$deviceId'), "/content"));
+});
+test('Replaces $deviceId with empty string when in the query string and metadata not defined', function () {
+    var presentation = createPresentation();
+    var applicationVersion = createApplicationVersion({
+        embeddedUrlFormat: 'https://example.com/content?device=:$deviceId',
+    });
+    expect((0, embeddedApps_1.default)(presentation, applicationVersion, createMetadata())).toBe("https://example.com/content?device=");
+});

package/build/testUtils.js

@@ -99,6 +99,8 @@ function createPresentationWindow(overrides) {
             unMuteWindow: function () { },
         },
         getTerminal: overrides.getTerminal,
+        isPreview: overrides.isPreview,
+        device: overrides.device,
     });
 }
 exports.createPresentationWindow = createPresentationWindow;
@@ -113,6 +115,7 @@ function createPresentation(overrides) {
         applicationVariables: (_e = overrides.applicationVariables) !== null && _e !== void 0 ? _e : {},
         duration: (_f = overrides.duration) !== null && _f !== void 0 ? _f : 1,
         r: createPresentationRelationships(overrides.r),
+        token: overrides.token,
     };
 }
 exports.createPresentation = createPresentation;

package/build/types.d.ts

@@ -135,6 +135,7 @@ export interface InputState {
 }
 export interface EmbeddedAppMetadata {
     renderMode: 'preview' | 'live';
+    deviceId?: string;
 }
 export interface AnalyticsEvent {
     type: string;

package/package.json

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

package/src/PresentationWindow.test.ts

@@ -81,12 +81,22 @@ describe('embedded apps', () => {
     const window = createPresentationWindow({
       windowId: 'test-reload-message',
       presentation: createPresentation({
-        applicationVariables: { input: 'test' },
+        applicationVariables: {
+          input: 'test',
+          multi: [],
+        },
+        token: 'token',
       }),
       applicationVersion: createApplicationVersion({
-        embeddedUrlFormat: 'http://test.local/:input',
-        presentationProperties: [{ name: 'input', type: 'string' }],
+        embeddedUrlFormat:
+          'http://test.local/:input?renderMode=:$renderMode&token=:$token&deviceId=:$deviceId',
+        presentationProperties: [
+          { name: 'input', type: 'string' },
+          { name: 'multi', type: 'select' },
+        ],
       }),
+      isPreview: true,
+      device: { id: 'device-id', name: 'device-name' },
       renderer: testRenderer,
     });
 
@@ -96,7 +106,13 @@ describe('embedded apps', () => {
     testRenderer.runReceiveMessageCallback('preview-subscribe', 'inputs');
 
     window.setPresentation(
-      createPresentation({ applicationVariables: { input: 'updated' } }),
+      createPresentation({
+        applicationVariables: {
+          input: 'updated',
+          multi: ['a', 'b', 'c'],
+        },
+        token: 'token',
+      }),
       createPlaylistWindowManagerState(),
       createRuleEngineState()
     );
@@ -109,7 +125,13 @@ describe('embedded apps', () => {
     expect(testRenderer.sendMessageObject).toHaveBeenCalledWith(
       'test-reload-message',
       'preview-inputs',
-      { input: 'updated' }
+      {
+        $renderMode: 'preview',
+        $token: 'token',
+        $deviceId: 'device-id',
+        input: 'updated',
+        multi: ['a', 'b', 'c'],
+      }
     );
 
     // sendMessageObject should not be called again for the same inputs.

package/src/PresentationWindow.ts

@@ -427,6 +427,8 @@ export default class PresentationWindow {
 
     if (this.isEmbeddedApp()) {
       if (applicationVersion.embeddedUrlFormat) {
+        // If the embedded app has subscribed to inputs event, send it the updated inputs
+        // with postMessage. Otherwise, reload the window with the new inputs.
         if (this.previewSubscriptions.has('inputs')) {
           this.logInfo(
             `Reload window '${windowId}' for embedded app preview state`
@@ -436,6 +438,21 @@ export default class PresentationWindow {
             this.presentation.applicationVariables
           );
 
+          // Add metadata to inputs if they exist in the URL template. These need to be
+          // consistent with metadata keys in embeddedApps.ts.
+          if (applicationVersion.embeddedUrlFormat.includes(':$renderMode')) {
+            updatedInputs['$renderMode'] = this.getRenderMode();
+          }
+
+          if (applicationVersion.embeddedUrlFormat.includes(':$token')) {
+            updatedInputs['$token'] = this.presentation.token;
+          }
+
+          if (applicationVersion.embeddedUrlFormat.includes(':$deviceId')) {
+            updatedInputs['$deviceId'] = this.options.device?.id;
+          }
+
+          // Send the updated inputs to the embedded app if they have changed.
           if (!deepEqual(updatedInputs, this.previewState.inputs)) {
             this.sendMessageObject('preview-inputs', updatedInputs);
           }
@@ -953,12 +970,16 @@ export default class PresentationWindow {
   }
 
   private getEmbeddedAppUrl() {
-    const { windowId, appRendererOfflineSupport } = this.options;
+    const { windowId, appRendererOfflineSupport, device } = this.options;
 
     const metadata: EmbeddedAppMetadata = {
-      renderMode: this.options.isPreview ? 'preview' : 'live',
+      renderMode: this.getRenderMode(),
     };
 
+    if (device) {
+      metadata.deviceId = device.id;
+    }
+
     const url = createEmbeddedApp(
       this.presentation,
       this.options.applicationVersion,
@@ -1626,6 +1647,10 @@ export default class PresentationWindow {
 
     this.previouslyLocked = currentlyLocked;
   }
+
+  private getRenderMode() {
+    return this.options.isPreview ? 'preview' : 'live';
+  }
 }
 
 const isValidCreateObjectURLResultPayload = (
@@ -1657,7 +1682,11 @@ const transformInputValues = (inputs: Record<string, any>) => {
       // 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));
+        if (typeof item === 'object' && item !== null) {
+          transformed[key].push(transformInputValues(item));
+        } else {
+          transformed[key].push(item);
+        }
       }
     } else {
       transformed[key] = value;

package/src/embeddedApps.test.ts

@@ -240,3 +240,40 @@ test('Replaces $token with presentation token', () => {
     createEmbeddedApp(presentation, applicationVersion, createMetadata())
   ).toBe('https://example.com?token=abc');
 });
+
+test('Replaces $deviceId with metadata deviceId when provided', () => {
+  const presentation = createPresentation();
+  const applicationVersion = createApplicationVersion({
+    embeddedUrlFormat: 'https://example.com/:$deviceId/content',
+  });
+
+  expect(
+    createEmbeddedApp(
+      presentation,
+      applicationVersion,
+      createMetadata({ deviceId: 'device-id' })
+    )
+  ).toBe('https://example.com/device-id/content');
+});
+
+test('Do not replace $deviceId when in the URI with metadata not defined', () => {
+  const presentation = createPresentation();
+  const applicationVersion = createApplicationVersion({
+    embeddedUrlFormat: 'https://example.com/:$deviceId/content',
+  });
+
+  expect(
+    createEmbeddedApp(presentation, applicationVersion, createMetadata())
+  ).toBe(`https://example.com/${encodeURIComponent(':$deviceId')}/content`);
+});
+
+test('Replaces $deviceId with empty string when in the query string and metadata not defined', () => {
+  const presentation = createPresentation();
+  const applicationVersion = createApplicationVersion({
+    embeddedUrlFormat: 'https://example.com/content?device=:$deviceId',
+  });
+
+  expect(
+    createEmbeddedApp(presentation, applicationVersion, createMetadata())
+  ).toBe(`https://example.com/content?device=`);
+});

package/src/embeddedApps.ts

@@ -19,6 +19,7 @@ export default function createEmbeddedApp(
 
   // replace
   let url = applicationVersion.embeddedUrlFormat || '';
+  const queryIndex = url.indexOf('?');
   matches.forEach((m) => {
     const queryParamVariableName = m[1]; // Where the value of your input will be injected. E.g. ":location"
     const queryParamName = m[2]; // The query param name. E.g. "location"
@@ -29,11 +30,24 @@ export default function createEmbeddedApp(
     let value: any = '';
 
     if (variableName.charAt(0) === '$') {
+      const variableIndex = url.indexOf(queryParamVariableName);
+      const isPartOfQuery = queryIndex != -1 && variableIndex > queryIndex;
+
       const metadataKey = variableName.slice(1);
       if (metadataKey === 'renderMode') {
         value = metadata.renderMode;
       } else if (metadataKey === 'token') {
         value = presentation.token;
+      } else if (metadataKey === 'deviceId') {
+        if (metadata.deviceId) {
+          value = metadata.deviceId;
+        } else {
+          // If :$deviceId is part of the URL path, avoid creating a broken URL if metadata.deviceId is not defined.
+          // This will use the variable name as the value instead of an empty string.
+          if (!isPartOfQuery) {
+            value = queryParamVariableName;
+          }
+        }
       }
     } else {
       // Don't replace variables that are numbers to allow setting

package/src/testUtils.ts

@@ -39,6 +39,8 @@ export function createPresentationWindow(
       unMuteWindow() {},
     },
     getTerminal: overrides.getTerminal,
+    isPreview: overrides.isPreview,
+    device: overrides.device,
   });
 }
 
@@ -54,6 +56,7 @@ export function createPresentation(
     applicationVariables: overrides.applicationVariables ?? {},
     duration: overrides.duration ?? 1,
     r: createPresentationRelationships(overrides.r),
+    token: overrides.token,
   };
 }
 

package/src/types.ts

@@ -167,6 +167,7 @@ export interface InputState {
 
 export interface EmbeddedAppMetadata {
   renderMode: 'preview' | 'live';
+  deviceId?: string;
 }
 
 export interface AnalyticsEvent {