@raydiant/playlist-window-manager 0.18.0 → 0.19.0

package/build/PresentationWindow.d.ts

@@ -101,6 +101,7 @@ export default class PresentationWindow {
     private closeChildWindow;
     private enableInteruptLock;
     private disableInteruptLock;
+    private getEmbeddedAppUrl;
     private handleEmbeddedMessage;
     private handleLegacyMessage;
     private handleReady;

package/build/PresentationWindow.js

@@ -449,7 +449,7 @@ var PresentationWindow = /** @class */ (function () {
                         _a = this.options, applicationVersion = _a.applicationVersion, windowId = _a.windowId;
                         if (!this.isEmbeddedApp()) return [3 /*break*/, 3];
                         if (!applicationVersion.embeddedUrlFormat) return [3 /*break*/, 2];
-                        url = embeddedApps_1.default(this.presentation, applicationVersion);
+                        url = this.getEmbeddedAppUrl();
                         this.logInfo("Reload window '" + windowId + "' for embedded app url '" + url + "'");
                         return [4 /*yield*/, this.loadWindow(url)];
                     case 1:
@@ -466,7 +466,11 @@ var PresentationWindow = /** @class */ (function () {
         });
     };
     PresentationWindow.prototype.runGetProperties = function (builderState) {
-        this.sendMessage('run_get_properties', builderState);
+        // 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);
+        }
     };
     PresentationWindow.prototype.isEmbeddedApp = function () {
         var _a = this.options, applicationVersion = _a.applicationVersion, isPreview = _a.isPreview;
@@ -517,7 +521,7 @@ var PresentationWindow = /** @class */ (function () {
                         if (!applicationVersion.embeddedUrlFormat) {
                             throw new Error("Error loading embedded app, missing embeddedUrlFormat for '" + applicationVersion.id + "'");
                         }
-                        url = embeddedApps_1.default(this.presentation, applicationVersion);
+                        url = this.getEmbeddedAppUrl();
                         this.logInfo("Create window '" + windowId + "' for embedded app url '" + url + "'");
                         return [4 /*yield*/, this.createAndLoadWindow(this.appendWindowIdToHash(url, windowId), 
                             // Embedded apps should not have a backgroundColor because some sites expect
@@ -827,6 +831,12 @@ var PresentationWindow = /** @class */ (function () {
             this.disableInterruptLockCallback();
         }
     };
+    PresentationWindow.prototype.getEmbeddedAppUrl = function () {
+        var metadata = {
+            renderMode: this.options.isPreview ? 'preview' : 'live'
+        };
+        return embeddedApps_1.default(this.presentation, this.options.applicationVersion, metadata);
+    };
     PresentationWindow.prototype.handleReady = function () {
         this.didReceiveReady = true;
         this.checkIsReadyCallback();

package/build/embeddedApps.d.ts

@@ -1,2 +1,2 @@
-import { Presentation, ApplicationVersion } from './types';
-export default function createEmbeddedApp(presentation: Presentation, applicationVersion: ApplicationVersion): string;
+import { Presentation, ApplicationVersion, EmbeddedAppMetadata } from './types';
+export default function createEmbeddedApp(presentation: Presentation, applicationVersion: ApplicationVersion, metadata: EmbeddedAppMetadata): string;

package/build/embeddedApps.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-function createEmbeddedApp(presentation, applicationVersion) {
+function createEmbeddedApp(presentation, applicationVersion, metadata) {
     // build matches
-    var parameterRegex = /(:([\w-]+))(.?$|[^\w-])/gm;
+    var parameterRegex = /(:([\w-\$]+))(.?$|[^\w-\$])/gm;
     var matches = [];
     var match = null;
     do {
@@ -17,19 +17,30 @@ function createEmbeddedApp(presentation, applicationVersion) {
         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"
         var _a = queryParamVariableName.split(':'), variableName = _a[1];
-        // Don't replace variables that are numbers to allow setting
-        // port numbers in the embedded app url.
-        if (!isNaN(Number(variableName)))
-            return;
-        var presentationProperty = applicationVersion.presentationProperties.find(function (p) { return p.name === variableName; });
-        // If the presentation property is not found (this shouldn't happen), default to encoding the value.
-        // Otherwise, only skip encoding if the presentation property's encode property is false.
-        var shouldEncodeValue = !presentationProperty || presentationProperty.encode !== false;
-        var value = presentation.applicationVariables[queryParamName];
-        if (value === undefined)
-            value = '';
-        if (Array.isArray(value)) {
-            value = JSON.stringify(value);
+        var shouldEncodeValue = true;
+        var value = '';
+        if (variableName.charAt(0) === '$') {
+            var metadataKey = variableName.slice(1);
+            if (metadataKey === 'renderMode') {
+                value = metadata.renderMode;
+            }
+        }
+        else {
+            // Don't replace variables that are numbers to allow setting
+            // port numbers in the embedded app url.
+            if (!isNaN(Number(variableName)))
+                return;
+            var presentationProperty = applicationVersion.presentationProperties.find(function (p) { return p.name === variableName; });
+            // If the presentation property is not found (this shouldn't happen), default to encoding the value.
+            // Otherwise, only skip encoding if the presentation property's encode property is false.
+            shouldEncodeValue =
+                !presentationProperty || presentationProperty.encode !== false;
+            value = presentation.applicationVariables[queryParamName];
+            if (value === undefined)
+                value = '';
+            if (Array.isArray(value)) {
+                value = JSON.stringify(value);
+            }
         }
         if (shouldEncodeValue) {
             value = encodeURIComponent(value);

package/build/embeddedApps.test.js

@@ -15,50 +15,60 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var embeddedApps_1 = __importDefault(require("./embeddedApps"));
-var createPresentation = function (overrides) { return (__assign({ id: 'id', name: 'name', applicationDeploymentId: 'applicationDeploymentId', themeId: null, applicationVariables: {}, duration: 0, r: {
-        resource: {
-            updatedAt: '',
-            createdAt: ''
-        },
-        presentationsPlaylists: []
-    } }, overrides)); };
-var createApplicationVersion = function (overrides) { return (__assign({ id: 'id', name: 'name', applicationId: 'applicationId', embeddedUrlFormat: null, configurableDuration: false, sourceUrl: null, presentationProperties: [] }, overrides)); };
+var createPresentation = function (overrides) {
+    if (overrides === void 0) { overrides = {}; }
+    return (__assign({ id: 'id', name: 'name', applicationDeploymentId: 'applicationDeploymentId', themeId: null, applicationVariables: {}, duration: 0, r: {
+            resource: {
+                updatedAt: '',
+                createdAt: ''
+            },
+            presentationsPlaylists: []
+        } }, overrides));
+};
+var createApplicationVersion = function (overrides) {
+    if (overrides === void 0) { overrides = {}; }
+    return (__assign({ id: 'id', name: 'name', applicationId: 'applicationId', embeddedUrlFormat: null, configurableDuration: false, sourceUrl: null, presentationProperties: [] }, overrides));
+};
+var createMetadata = function (overrides) {
+    if (overrides === void 0) { overrides = {}; }
+    return (__assign({ renderMode: 'live' }, overrides));
+};
 test('Replaces variable in query parameteers', function () {
     expect(embeddedApps_1.default(createPresentation({ applicationVariables: { foo: 'bar' } }), createApplicationVersion({
         embeddedUrlFormat: 'https://example.com?foo=:foo'
-    }))).toBe('https://example.com?foo=bar');
+    }), createMetadata())).toBe('https://example.com?foo=bar');
 });
 test('Replaces variable in path', function () {
     expect(embeddedApps_1.default(createPresentation({ applicationVariables: { foo: 'bar' } }), createApplicationVersion({
         embeddedUrlFormat: 'https://example.com/:foo'
-    }))).toBe('https://example.com/bar');
+    }), createMetadata())).toBe('https://example.com/bar');
 });
 test('Replaces undefined variable with empty string', function () {
     expect(embeddedApps_1.default(createPresentation({ applicationVariables: {} }), createApplicationVersion({
         embeddedUrlFormat: 'https://example.com/:foo'
-    }))).toBe('https://example.com/');
+    }), createMetadata())).toBe('https://example.com/');
 });
 test('Replaces variable with underscore', function () {
     expect(embeddedApps_1.default(createPresentation({ applicationVariables: { foo_1: 'bar' } }), createApplicationVersion({
         embeddedUrlFormat: 'https://example.com/:foo_1'
-    }))).toBe('https://example.com/bar');
+    }), createMetadata())).toBe('https://example.com/bar');
 });
 test('Replaces variable with hyphen', function () {
     expect(embeddedApps_1.default(createPresentation({ applicationVariables: { 'foo-1': 'bar' } }), createApplicationVersion({
         embeddedUrlFormat: 'https://example.com/:foo-1'
-    }))).toBe('https://example.com/bar');
+    }), createMetadata())).toBe('https://example.com/bar');
 });
 test('Does not replace variable that is a number', function () {
     expect(embeddedApps_1.default(createPresentation({ applicationVariables: { foo: 'bar' } }), createApplicationVersion({
         embeddedUrlFormat: 'http://localhost:8080?foo=:foo'
-    }))).toBe('http://localhost:8080?foo=bar');
+    }), createMetadata())).toBe('http://localhost:8080?foo=bar');
 });
 test('Encodes a variables containing special characters', function () {
     var fooValue = 'Lorem Ipsum. !@#$%^&*()-. More Text';
     var fooValueEncoded = 'Lorem%20Ipsum.%20!%40%23%24%25%5E%26*()-.%20More%20Text';
     expect(embeddedApps_1.default(createPresentation({ applicationVariables: { foo: fooValue } }), createApplicationVersion({
         embeddedUrlFormat: "http://localhost:8080?foo=:foo"
-    }))).toBe("http://localhost:8080?foo=" + fooValueEncoded);
+    }), createMetadata())).toBe("http://localhost:8080?foo=" + fooValueEncoded);
 });
 test('Does not encode value if presentation property disables encoding', function () {
     expect(embeddedApps_1.default(createPresentation({
@@ -66,12 +76,38 @@ test('Does not encode value if presentation property disables encoding', functio
     }), createApplicationVersion({
         embeddedUrlFormat: ":url",
         presentationProperties: [{ name: 'url', encode: false }]
-    }))).toBe("https://raydiant.com");
+    }), createMetadata())).toBe("https://raydiant.com");
 });
 test('Encodes a variables containing an array', function () {
     var fooValue = ['option-a', 'option-b', 'option-c'];
     var fooValueEncoded = '%5B%22option-a%22%2C%22option-b%22%2C%22option-c%22%5D';
     expect(embeddedApps_1.default(createPresentation({ applicationVariables: { foo: fooValue } }), createApplicationVersion({
         embeddedUrlFormat: "http://localhost:8080?foo=:foo"
-    }))).toBe("http://localhost:8080?foo=" + fooValueEncoded);
+    }), createMetadata())).toBe("http://localhost:8080?foo=" + fooValueEncoded);
+});
+test('Replaces $renderMode with metadata', function () {
+    var presentation = createPresentation();
+    var applicationVersion = createApplicationVersion({
+        embeddedUrlFormat: 'https://example.com?renderMode=:$renderMode'
+    });
+    expect(embeddedApps_1.default(presentation, applicationVersion, createMetadata({ renderMode: 'preview' }))).toBe('https://example.com?renderMode=preview');
+    expect(embeddedApps_1.default(presentation, applicationVersion, createMetadata({ renderMode: 'live' }))).toBe('https://example.com?renderMode=live');
+});
+test('Replaces undefined metadata with empty string', function () {
+    var presentation = createPresentation();
+    var applicationVersion = createApplicationVersion({
+        embeddedUrlFormat: 'https://example.com?invalid=:$invalid'
+    });
+    expect(embeddedApps_1.default(presentation, applicationVersion, createMetadata())).toBe('https://example.com?invalid=');
+});
+test('Replace protocol, ip and port', function () {
+    expect(embeddedApps_1.default(createPresentation({
+        applicationVariables: {
+            protocol: 'http',
+            ip: '192.168.1.0',
+            port: 3000
+        }
+    }), createApplicationVersion({
+        embeddedUrlFormat: ":protocol://:ip::port"
+    }), createMetadata())).toBe("http://192.168.1.0:3000");
 });

package/build/types.d.ts

@@ -127,3 +127,6 @@ export interface InputState {
     path: Path;
     state: any;
 }
+export interface EmbeddedAppMetadata {
+    renderMode: 'preview' | 'live';
+}

package/package.json

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

package/src/PresentationWindow.ts

@@ -15,7 +15,8 @@ import {
   Logger,
   OpenChildWindowOptions,
   BuilderState,
-  WorkerState
+  WorkerState,
+  EmbeddedAppMetadata
 } from './types';
 
 export interface PresentationWindowOptions {
@@ -324,7 +325,7 @@ export default class PresentationWindow {
 
     if (this.isEmbeddedApp()) {
       if (applicationVersion.embeddedUrlFormat) {
-        const url = createEmbeddedApp(this.presentation, applicationVersion);
+        const url = this.getEmbeddedAppUrl();
 
         this.logInfo(
           `Reload window '${windowId}' for embedded app url '${url}'`
@@ -338,7 +339,11 @@ export default class PresentationWindow {
   }
 
   public runGetProperties(builderState?: BuilderState) {
-    this.sendMessage('run_get_properties', builderState);
+    // 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);
+    }
   }
 
   private isEmbeddedApp() {
@@ -399,7 +404,7 @@ export default class PresentationWindow {
       );
     }
 
-    const url = createEmbeddedApp(this.presentation, applicationVersion);
+    const url = this.getEmbeddedAppUrl();
     this.logInfo(`Create window '${windowId}' for embedded app url '${url}'`);
 
     await this.createAndLoadWindow(
@@ -735,6 +740,18 @@ export default class PresentationWindow {
     }
   }
 
+  private getEmbeddedAppUrl() {
+    const metadata: EmbeddedAppMetadata = {
+      renderMode: this.options.isPreview ? 'preview' : 'live'
+    };
+
+    return createEmbeddedApp(
+      this.presentation,
+      this.options.applicationVersion,
+      metadata
+    );
+  }
+
   private handleEmbeddedMessage = async (type: string, payload?: any) => {
     const { windowId } = this.options;
 

package/src/embeddedApps.test.ts

@@ -1,8 +1,8 @@
 import createEmbeddedApp from './embeddedApps';
-import { Presentation, ApplicationVersion } from './types';
+import { Presentation, ApplicationVersion, EmbeddedAppMetadata } from './types';
 
 const createPresentation = (
-  overrides: Partial<Presentation>
+  overrides: Partial<Presentation> = {}
 ): Presentation => ({
   id: 'id',
   name: 'name',
@@ -21,7 +21,7 @@ const createPresentation = (
 });
 
 const createApplicationVersion = (
-  overrides: Partial<ApplicationVersion>
+  overrides: Partial<ApplicationVersion> = {}
 ): ApplicationVersion => ({
   id: 'id',
   name: 'name',
@@ -33,13 +33,21 @@ const createApplicationVersion = (
   ...overrides
 });
 
+const createMetadata = (
+  overrides: Partial<EmbeddedAppMetadata> = {}
+): EmbeddedAppMetadata => ({
+  renderMode: 'live',
+  ...overrides
+});
+
 test('Replaces variable in query parameteers', () => {
   expect(
     createEmbeddedApp(
       createPresentation({ applicationVariables: { foo: 'bar' } }),
       createApplicationVersion({
         embeddedUrlFormat: 'https://example.com?foo=:foo'
-      })
+      }),
+      createMetadata()
     )
   ).toBe('https://example.com?foo=bar');
 });
@@ -50,7 +58,8 @@ test('Replaces variable in path', () => {
       createPresentation({ applicationVariables: { foo: 'bar' } }),
       createApplicationVersion({
         embeddedUrlFormat: 'https://example.com/:foo'
-      })
+      }),
+      createMetadata()
     )
   ).toBe('https://example.com/bar');
 });
@@ -61,7 +70,8 @@ test('Replaces undefined variable with empty string', () => {
       createPresentation({ applicationVariables: {} }),
       createApplicationVersion({
         embeddedUrlFormat: 'https://example.com/:foo'
-      })
+      }),
+      createMetadata()
     )
   ).toBe('https://example.com/');
 });
@@ -72,7 +82,8 @@ test('Replaces variable with underscore', () => {
       createPresentation({ applicationVariables: { foo_1: 'bar' } }),
       createApplicationVersion({
         embeddedUrlFormat: 'https://example.com/:foo_1'
-      })
+      }),
+      createMetadata()
     )
   ).toBe('https://example.com/bar');
 });
@@ -83,7 +94,8 @@ test('Replaces variable with hyphen', () => {
       createPresentation({ applicationVariables: { 'foo-1': 'bar' } }),
       createApplicationVersion({
         embeddedUrlFormat: 'https://example.com/:foo-1'
-      })
+      }),
+      createMetadata()
     )
   ).toBe('https://example.com/bar');
 });
@@ -94,7 +106,8 @@ test('Does not replace variable that is a number', () => {
       createPresentation({ applicationVariables: { foo: 'bar' } }),
       createApplicationVersion({
         embeddedUrlFormat: 'http://localhost:8080?foo=:foo'
-      })
+      }),
+      createMetadata()
     )
   ).toBe('http://localhost:8080?foo=bar');
 });
@@ -109,7 +122,8 @@ test('Encodes a variables containing special characters', () => {
       createPresentation({ applicationVariables: { foo: fooValue } }),
       createApplicationVersion({
         embeddedUrlFormat: `http://localhost:8080?foo=:foo`
-      })
+      }),
+      createMetadata()
     )
   ).toBe(`http://localhost:8080?foo=${fooValueEncoded}`);
 });
@@ -123,7 +137,8 @@ test('Does not encode value if presentation property disables encoding', () => {
       createApplicationVersion({
         embeddedUrlFormat: `:url`,
         presentationProperties: [{ name: 'url', encode: false }]
-      })
+      }),
+      createMetadata()
     )
   ).toBe(`https://raydiant.com`);
 });
@@ -138,7 +153,60 @@ test('Encodes a variables containing an array', () => {
       createPresentation({ applicationVariables: { foo: fooValue } }),
       createApplicationVersion({
         embeddedUrlFormat: `http://localhost:8080?foo=:foo`
-      })
+      }),
+      createMetadata()
     )
   ).toBe(`http://localhost:8080?foo=${fooValueEncoded}`);
 });
+
+test('Replaces $renderMode with metadata', () => {
+  const presentation = createPresentation();
+  const applicationVersion = createApplicationVersion({
+    embeddedUrlFormat: 'https://example.com?renderMode=:$renderMode'
+  });
+
+  expect(
+    createEmbeddedApp(
+      presentation,
+      applicationVersion,
+      createMetadata({ renderMode: 'preview' })
+    )
+  ).toBe('https://example.com?renderMode=preview');
+
+  expect(
+    createEmbeddedApp(
+      presentation,
+      applicationVersion,
+      createMetadata({ renderMode: 'live' })
+    )
+  ).toBe('https://example.com?renderMode=live');
+});
+
+test('Replaces undefined metadata with empty string', () => {
+  const presentation = createPresentation();
+  const applicationVersion = createApplicationVersion({
+    embeddedUrlFormat: 'https://example.com?invalid=:$invalid'
+  });
+
+  expect(
+    createEmbeddedApp(presentation, applicationVersion, createMetadata())
+  ).toBe('https://example.com?invalid=');
+});
+
+test('Replace protocol, ip and port', () => {
+  expect(
+    createEmbeddedApp(
+      createPresentation({
+        applicationVariables: {
+          protocol: 'http',
+          ip: '192.168.1.0',
+          port: 3000
+        }
+      }),
+      createApplicationVersion({
+        embeddedUrlFormat: `:protocol://:ip::port`
+      }),
+      createMetadata()
+    )
+  ).toBe(`http://192.168.1.0:3000`);
+});

package/src/embeddedApps.ts

@@ -1,11 +1,12 @@
-import { Presentation, ApplicationVersion } from './types';
+import { Presentation, ApplicationVersion, EmbeddedAppMetadata } from './types';
 
 export default function createEmbeddedApp(
   presentation: Presentation,
-  applicationVersion: ApplicationVersion
+  applicationVersion: ApplicationVersion,
+  metadata: EmbeddedAppMetadata
 ) {
   // build matches
-  const parameterRegex = /(:([\w-]+))(.?$|[^\w-])/gm;
+  const parameterRegex = /(:([\w-\$]+))(.?$|[^\w-\$])/gm;
   const matches = [];
   let match = null;
   do {
@@ -23,24 +24,36 @@ export default function createEmbeddedApp(
     const queryParamName = m[2]; // The query param name. E.g. "location"
 
     const [, variableName] = queryParamVariableName.split(':');
-    // Don't replace variables that are numbers to allow setting
-    // port numbers in the embedded app url.
-    if (!isNaN(Number(variableName))) return;
-
-    const presentationProperty = applicationVersion.presentationProperties.find(
-      p => p.name === variableName
-    );
-
-    // If the presentation property is not found (this shouldn't happen), default to encoding the value.
-    // Otherwise, only skip encoding if the presentation property's encode property is false.
-    const shouldEncodeValue =
-      !presentationProperty || presentationProperty.encode !== false;
-
-    let value = presentation.applicationVariables[queryParamName];
-    if (value === undefined) value = '';
-    if (Array.isArray(value)) {
-      value = JSON.stringify(value);
+
+    let shouldEncodeValue = true;
+    let value: any = '';
+
+    if (variableName.charAt(0) === '$') {
+      const metadataKey = variableName.slice(1);
+      if (metadataKey === 'renderMode') {
+        value = metadata.renderMode;
+      }
+    } else {
+      // Don't replace variables that are numbers to allow setting
+      // port numbers in the embedded app url.
+      if (!isNaN(Number(variableName))) return;
+
+      const presentationProperty = applicationVersion.presentationProperties.find(
+        p => p.name === variableName
+      );
+
+      // If the presentation property is not found (this shouldn't happen), default to encoding the value.
+      // Otherwise, only skip encoding if the presentation property's encode property is false.
+      shouldEncodeValue =
+        !presentationProperty || presentationProperty.encode !== false;
+
+      value = presentation.applicationVariables[queryParamName];
+      if (value === undefined) value = '';
+      if (Array.isArray(value)) {
+        value = JSON.stringify(value);
+      }
     }
+
     if (shouldEncodeValue) {
       value = encodeURIComponent(value);
     }

package/src/types.ts

@@ -152,3 +152,7 @@ export interface InputState {
   path: Path;
   state: any;
 }
+
+export interface EmbeddedAppMetadata {
+  renderMode: 'preview' | 'live';
+}