@raydiant/playlist-window-manager 0.29.1 → 0.30.0

package/build/testUtils.js

@@ -62,12 +62,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createRenderer = exports.createLogger = exports.createRuleEngineState = exports.createPlaylistWindowManagerState = exports.createApplicationVersion = exports.createPresentationRelationships = exports.createPresentation = exports.createPresentationWindow = void 0;
+exports.flush = exports.createFakeSurfaceHost = exports.createRecordingRenderer = exports.createRenderer = exports.createLogger = exports.createRuleEngineState = exports.createPlaylistWindowManagerState = exports.createApplicationVersion = exports.createPresentationRelationships = exports.createPresentation = exports.createPresentationWindow = void 0;
 var re = __importStar(require("@raydiant/playlist-rule-engine"));
 var PresentationWindow_1 = __importDefault(require("./PresentationWindow"));
 var PlaylistWindowManagerState_1 = __importDefault(require("./PlaylistWindowManagerState"));
+// Orders calls recorded by the renderer and the fake surface host against
+// each other.
+var sequence = 0;
+var nextSequence = function () {
+    sequence += 1;
+    return sequence;
+};
 function createPresentationWindow(overrides) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     if (overrides === void 0) { overrides = {}; }
     return new PresentationWindow_1.default({
         windowId: (_a = overrides.windowId) !== null && _a !== void 0 ? _a : 'test',
@@ -76,9 +83,9 @@ function createPresentationWindow(overrides) {
         publishedAt: (_b = overrides.publishedAt) !== null && _b !== void 0 ? _b : 'publishedAt',
         playlistWindowManagerState: (_c = overrides.playlistWindowManagerState) !== null && _c !== void 0 ? _c : createPlaylistWindowManagerState(),
         ruleEngineState: (_d = overrides.ruleEngineState) !== null && _d !== void 0 ? _d : createRuleEngineState(),
-        logger: createLogger(),
-        workerState: (_e = overrides.workerState) !== null && _e !== void 0 ? _e : {},
-        renderer: (_f = overrides.renderer) !== null && _f !== void 0 ? _f : {
+        logger: (_e = overrides.logger) !== null && _e !== void 0 ? _e : createLogger(),
+        workerState: (_f = overrides.workerState) !== null && _f !== void 0 ? _f : {},
+        renderer: (_g = overrides.renderer) !== null && _g !== void 0 ? _g : {
             createWindow: function () { },
             loadWindow: function () {
                 return __awaiter(this, void 0, void 0, function () { return __generator(this, function (_a) {
@@ -101,6 +108,7 @@ function createPresentationWindow(overrides) {
         getTerminal: overrides.getTerminal,
         isPreview: overrides.isPreview,
         device: overrides.device,
+        surfaceBroker: overrides.surfaceBroker,
     });
 }
 exports.createPresentationWindow = createPresentationWindow;
@@ -210,3 +218,317 @@ function createRenderer() {
     };
 }
 exports.createRenderer = createRenderer;
+// A renderer that records every call in order, across every window, and lets
+// a test play the app's side of the message channel through its hooks.
+function createRecordingRenderer() {
+    var calls = [];
+    // Messages the apps sent the window manager, in the same order as calls.
+    var received = [];
+    var callbacks = {};
+    var errorCallbacks = {};
+    var hooks = {};
+    var record = function (method, windowId) {
+        var args = [];
+        for (var _i = 2; _i < arguments.length; _i++) {
+            args[_i - 2] = arguments[_i];
+        }
+        calls.push({ method: method, windowId: windowId, args: args, seq: nextSequence() });
+    };
+    var renderer = {
+        createWindow: function (opts) {
+            callbacks[opts.windowId] = opts.receiveMessageCallback || (function () { return null; });
+            errorCallbacks[opts.windowId] = opts.errorCallback;
+            record('createWindow', opts.windowId, opts.backgroundColor);
+        },
+        loadWindow: function (windowId) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    record('loadWindow', windowId);
+                    if (hooks.onLoad)
+                        hooks.onLoad(windowId);
+                    return [2 /*return*/];
+                });
+            });
+        },
+        updateWindowBounds: function (windowId, bounds) {
+            record('updateWindowBounds', windowId, bounds);
+        },
+        showWindow: function (windowId, isFocused) {
+            record('showWindow', windowId, isFocused);
+        },
+        hideWindow: function (windowId) {
+            record('hideWindow', windowId);
+        },
+        removeWindow: function (windowId) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    record('removeWindow', windowId);
+                    delete callbacks[windowId];
+                    return [2 /*return*/];
+                });
+            });
+        },
+        sendMessageString: function (windowId, message) {
+            var _a = JSON.parse(message), type = _a.type, payload = _a.payload;
+            record('sendMessageString', windowId, type, payload);
+            if (hooks.onMessage)
+                hooks.onMessage(windowId, type, payload);
+        },
+        sendMessageObject: function (windowId, type, payload) {
+            record('sendMessageObject', windowId, type, payload);
+        },
+        muteWindow: function (windowId) {
+            record('muteWindow', windowId);
+        },
+        unMuteWindow: function (windowId) {
+            record('unMuteWindow', windowId);
+        },
+        setWindowBackground: function (windowId, color) {
+            record('setWindowBackground', windowId, color);
+        },
+    };
+    return {
+        renderer: renderer,
+        calls: calls,
+        received: received,
+        hooks: hooks,
+        // Deliver a message from the app in a window to the window manager.
+        receive: function (windowId, type, payload) {
+            var callback = callbacks[windowId];
+            if (!callback)
+                return;
+            received.push({
+                method: type,
+                windowId: windowId,
+                args: [payload],
+                seq: nextSequence(),
+            });
+            callback(type, payload);
+        },
+        // Report a window as crashed or unresponsive, as a renderer would.
+        fail: function (windowId, err) {
+            var callback = errorCallbacks[windowId];
+            if (callback && callbacks[windowId])
+                callback(err);
+        },
+        // Windows created and not yet removed, oldest first.
+        liveWindowIds: function () {
+            return Object.keys(callbacks);
+        },
+    };
+}
+exports.createRecordingRenderer = createRecordingRenderer;
+// A stand-in for the Signage Stick host's video surface, typed to the video
+// contract. It records every call in order and records a rule break, rather
+// than throwing, so a test can play a whole playlist and then assert that no
+// rule was broken.
+function createFakeSurfaceHost(opts) {
+    var _a, _b, _c;
+    if (opts === void 0) { opts = {}; }
+    var decoders = (_a = opts.decoders) !== null && _a !== void 0 ? _a : 4;
+    var refuseNext = opts.refuse;
+    var hangNext = (_b = opts.hang) !== null && _b !== void 0 ? _b : false;
+    var hangShowNext = (_c = opts.hangShow) !== null && _c !== void 0 ? _c : false;
+    var calls = [];
+    var violations = [];
+    var states = {};
+    var hung = [];
+    var lastId = 0;
+    var record = function (method, args, id) {
+        calls.push({ id: id, method: method, args: args, seq: nextSequence() });
+    };
+    var emit = function (id, event) {
+        var state = states[id];
+        if (!state)
+            throw new Error("No fake surface ".concat(id));
+        if (event.type === 'first_frame')
+            state.firstFrame = true;
+        if (state.listener) {
+            state.listener(event);
+        }
+        else {
+            state.buffered.push(event);
+        }
+    };
+    var live = function () {
+        return Object.keys(states)
+            .map(function (key) { return states[Number(key)]; })
+            .filter(function (s) { return s.live; });
+    };
+    var checkBounds = function (bounds) {
+        var values = [bounds.x, bounds.y, bounds.width, bounds.height];
+        if (values.some(function (v) { return Math.round(v) !== v; })) {
+            violations.push("fractional bounds ".concat(JSON.stringify(bounds)));
+        }
+    };
+    var createSurface = function () {
+        lastId += 1;
+        var id = lastId;
+        var state = {
+            id: id,
+            live: true,
+            firstFrame: false,
+            muted: true,
+            shown: false,
+            listener: null,
+            buffered: [],
+        };
+        states[id] = state;
+        return {
+            id: id,
+            show: function (showOpts) {
+                record('show', [showOpts], id);
+                if (!state.live)
+                    return Promise.resolve();
+                if (!state.firstFrame) {
+                    violations.push("surface ".concat(id, " shown before first_frame"));
+                }
+                live()
+                    .filter(function (s) { return s !== state && s.shown && !s.muted; })
+                    .forEach(function (s) {
+                    violations.push("surface ".concat(id, " shown before surface ").concat(s.id, " was muted"));
+                });
+                state.shown = true;
+                if (hangShowNext) {
+                    hangShowNext = false;
+                    return new Promise(function () { return undefined; });
+                }
+                return Promise.resolve();
+            },
+            hide: function (hideOpts) {
+                record('hide', [hideOpts], id);
+                state.shown = false;
+                return Promise.resolve();
+            },
+            play: function () {
+                record('play', [], id);
+                if (opts.playingAfterMs !== undefined) {
+                    setTimeout(function () {
+                        if (state.live)
+                            emit(id, { type: 'playing' });
+                    }, opts.playingAfterMs);
+                }
+                return Promise.resolve();
+            },
+            pause: function () {
+                record('pause', [], id);
+                return Promise.resolve();
+            },
+            seek: function (seconds) {
+                record('seek', [seconds], id);
+                return Promise.resolve();
+            },
+            setBounds: function (r) {
+                record('setBounds', [r], id);
+                checkBounds(r);
+                return Promise.resolve();
+            },
+            setMuted: function (m) {
+                record('setMuted', [m], id);
+                if (!m && state.live) {
+                    live()
+                        .filter(function (s) { return s !== state && !s.muted; })
+                        .forEach(function (s) {
+                        violations.push("surface ".concat(id, " unmuted while surface ").concat(s.id, " sounds"));
+                    });
+                }
+                if (state.live)
+                    state.muted = m;
+                return Promise.resolve();
+            },
+            close: function () {
+                record('close', [], id);
+                state.live = false;
+                return Promise.resolve();
+            },
+            onEvent: function (fn) {
+                state.listener = fn;
+                var buffered = state.buffered;
+                state.buffered = [];
+                buffered.forEach(function (e) { return fn(e); });
+            },
+        };
+    };
+    var surfaces = {
+        openVideo: function (videoOpts) {
+            record('openVideo', [videoOpts]);
+            checkBounds(videoOpts.bounds);
+            if (hangNext) {
+                hangNext = false;
+                return new Promise(function (resolve) {
+                    hung.push(function () { return resolve(createSurface()); });
+                });
+            }
+            if (refuseNext) {
+                var reason = refuseNext;
+                refuseNext = undefined;
+                return Promise.reject(new Error(reason));
+            }
+            if (live().length >= decoders) {
+                return Promise.reject(new Error('no_decoder'));
+            }
+            if (live().length >= 2) {
+                violations.push('a third live surface');
+            }
+            var surface = createSurface();
+            calls[calls.length - 1].id = surface.id;
+            return Promise.resolve(surface);
+        },
+        onHole: function (open) {
+            record('onHole', [open]);
+        },
+    };
+    return {
+        surfaces: surfaces,
+        calls: calls,
+        violations: violations,
+        // Raises an event on a surface, as the host would.
+        emit: emit,
+        // Lets a hung open resolve, late.
+        releaseHung: function () {
+            hung.splice(0).forEach(function (release) { return release(); });
+        },
+        liveIds: function () {
+            return live().map(function (s) { return s.id; });
+        },
+        lastId: function () {
+            return lastId;
+        },
+        // The next open is refused, as the host would refuse it.
+        refuseNext: function (reason) {
+            refuseNext = reason;
+        },
+        hangNextOpen: function () {
+            hangNext = true;
+        },
+        hangNextShow: function () {
+            hangShowNext = true;
+        },
+    };
+}
+exports.createFakeSurfaceHost = createFakeSurfaceHost;
+// Lets pending promise callbacks and zero-delay timers run.
+function flush(times) {
+    if (times === void 0) { times = 5; }
+    return __awaiter(this, void 0, void 0, function () {
+        var i;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    i = 0;
+                    _a.label = 1;
+                case 1:
+                    if (!(i < times)) return [3 /*break*/, 4];
+                    return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 0); })];
+                case 2:
+                    _a.sent();
+                    _a.label = 3;
+                case 3:
+                    i += 1;
+                    return [3 /*break*/, 1];
+                case 4: return [2 /*return*/];
+            }
+        });
+    });
+}
+exports.flush = flush;

package/build/types.d.ts

@@ -113,6 +113,7 @@ export interface PresentationWindowRenderer {
     muteWindow(windowId: string): void;
     unMuteWindow(windowId: string): void;
     sendOnlineStatus?(windowId: string, isOnline: boolean): void;
+    setWindowBackground?(windowId: string, color: string): void;
 }
 export interface OpenChildWindowOptions {
     windowId: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raydiant/playlist-window-manager",
-  "version": "0.29.1",
+  "version": "0.30.0",
   "description": "Window manager for playlist playback.",
   "main": "build/index.js",
   "scripts": {
@@ -24,6 +24,7 @@
     "@types/uuid": "8.3.0",
     "electron": "38.0.0",
     "jest": "^24.8.0",
+    "mockdate": "^3.0.2",
     "ts-jest": "^24.0.2",
     "typescript": "^4.1.2"
   }

package/src/IFrameRenderer.test.ts

@@ -0,0 +1,88 @@
+import IFrameRenderer from './IFrameRenderer';
+
+function setup() {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const renderer = new IFrameRenderer(container);
+  const received: Array<[string, unknown]> = [];
+  renderer.createWindow({
+    windowId: 'w1',
+    backgroundColor: '#000000',
+    receiveMessageCallback: (type, payload) => received.push([type, payload]),
+    errorCallback: () => undefined,
+  });
+  const frame = container.querySelector('iframe') as HTMLIFrameElement;
+
+  const post = (type: string, source: Window | null) => {
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        data: `raydiant:${JSON.stringify({ windowId: 'w1', type })}`,
+        source,
+      })
+    );
+  };
+
+  const teardown = () => {
+    renderer.destroy();
+    document.body.removeChild(container);
+  };
+
+  return { renderer, frame, received, post, teardown };
+}
+
+describe('only the window’s own frame asks for a video surface', () => {
+  test.each(['open_video', 'video_bounds', 'video_hole_open', 'close_video'])(
+    "%s from another frame's source is dropped",
+    (type) => {
+      const { frame, received, post, teardown } = setup();
+      const other = document.createElement('iframe');
+      document.body.appendChild(other);
+
+      post(type, other.contentWindow);
+      expect(received).toEqual([]);
+
+      post(type, frame.contentWindow);
+      expect(received).toEqual([[type, undefined]]);
+
+      document.body.removeChild(other);
+      teardown();
+    }
+  );
+
+  test("every other message keeps today's routing by window id", () => {
+    const { received, post, teardown } = setup();
+
+    post('presentation_ready', null);
+    expect(received).toEqual([['presentation_ready', undefined]]);
+
+    teardown();
+  });
+});
+
+describe('the frame background', () => {
+  test('setWindowBackground sets the frame’s inline background', () => {
+    const { renderer, frame, teardown } = setup();
+    expect(frame.style.backgroundColor).toBe('rgb(0, 0, 0)');
+
+    renderer.setWindowBackground('w1', 'transparent');
+    expect(frame.style.backgroundColor).toBe('transparent');
+
+    renderer.setWindowBackground('w1', '#000000');
+    expect(frame.style.backgroundColor).toBe('rgb(0, 0, 0)');
+
+    teardown();
+  });
+});
+
+describe('no colour scheme', () => {
+  test('a created frame declares no color-scheme', () => {
+    const { frame, renderer, teardown } = setup();
+    renderer.showWindow('w1', false);
+    renderer.setWindowBackground('w1', 'transparent');
+
+    expect(frame.style.getPropertyValue('color-scheme')).toBe('');
+    expect(frame.getAttribute('style')).not.toMatch(/color-scheme/);
+
+    teardown();
+  });
+});

package/src/IFrameRenderer.ts

@@ -3,6 +3,7 @@ import {
   CreateWindowOptions,
   WindowBounds,
 } from './types';
+import { VIDEO_REQUESTS } from './surfaces';
 
 interface IFrameRendererWindow {
   frame: HTMLIFrameElement;
@@ -219,6 +220,17 @@ export default class IFrameRenderer implements PresentationWindowRenderer {
     // mute presentation properties.
   }
 
+  public setWindowBackground(windowId: string, color: string) {
+    const window = this.getWindow(windowId);
+    if (!window) {
+      throw new Error(
+        `Failed to set window background, missing window id '${windowId}'`
+      );
+    }
+
+    window.frame.style.backgroundColor = color;
+  }
+
   public destroy() {
     window.removeEventListener('message', this.globalMessageHandler, false);
   }
@@ -246,6 +258,15 @@ export default class IFrameRenderer implements PresentationWindowRenderer {
         );
       }
 
+      // A surface costs a hardware decoder, so only the window's own frame may
+      // ask for one; any frame can post here and name any window.
+      if (
+        VIDEO_REQUESTS.indexOf(type) !== -1 &&
+        event.source !== window.frame.contentWindow
+      ) {
+        return;
+      }
+
       if (window.receiveMessageCallback) {
         window.receiveMessageCallback(type, payload);
       }