@raydiant/playlist-window-manager 0.29.1 → 0.30.0

package/build/PresentationWindow.js

@@ -80,8 +80,47 @@ var embeddedApps_1 = __importDefault(require("./embeddedApps"));
 var PlaylistWindowManager_1 = __importDefault(require("./PlaylistWindowManager"));
 var WindowTimeoutError_1 = __importDefault(require("./WindowTimeoutError"));
 var WindowLoadError_1 = __importDefault(require("./WindowLoadError"));
+var SurfaceBroker_1 = require("./SurfaceBroker");
 // TODO: Automatically inject latest version when building in CI.
-var defaultAppRendererUrl = 'https://apps.raydiant.com/3.1.0/index.html';
+var defaultAppRendererUrl = 'https://apps.raydiant.com/3.1.1/index.html';
+// The urls a window may open a surface for besides its content url: the
+// Videos app probes for these renditions beside the original.
+var RENDITION_SUFFIXES = ['_4K', '_720p', '_480p'];
+var isValidRect = function (value) {
+    return value &&
+        typeof value === 'object' &&
+        isFiniteNumber(value.x) &&
+        isFiniteNumber(value.y) &&
+        isFiniteNumber(value.width) &&
+        isFiniteNumber(value.height);
+};
+var isFiniteNumber = function (value) {
+    return typeof value === 'number' && isFinite(value);
+};
+var roundRect = function (rect) { return ({
+    x: Math.round(rect.x),
+    y: Math.round(rect.y),
+    width: Math.round(rect.width),
+    height: Math.round(rect.height),
+}); };
+// Every string held under a `url` key, at any depth.
+var collectUrls = function (value, urls) {
+    if (urls === void 0) { urls = []; }
+    if (Array.isArray(value)) {
+        value.forEach(function (item) { return collectUrls(item, urls); });
+    }
+    else if (value && typeof value === 'object') {
+        Object.keys(value).forEach(function (key) {
+            if (key === 'url' && typeof value[key] === 'string') {
+                urls.push(value[key]);
+            }
+            else {
+                collectUrls(value[key], urls);
+            }
+        });
+    }
+    return urls;
+};
 var isValidNumber = function (value) {
     return typeof value === 'number' && !isNaN(value);
 };
@@ -140,6 +179,8 @@ var PresentationWindow = /** @class */ (function () {
         this.disableInterruptLockCallback = null;
         this.analyticsEventCallback = null;
         this.chargeRequestCallback = null;
+        this.didPaintSinceLastPlay = false;
+        this.firstPaintResolvers = [];
         this.forceMute = false;
         this.error = null;
         this.workerState = {};
@@ -152,6 +193,17 @@ var PresentationWindow = /** @class */ (function () {
         this.createObjectURLTimeouts = {};
         this.interruptLocks = {};
         this.previouslyLocked = false;
+        this.surface = null;
+        // Once a window has been shown without a ready surface, or has given one
+        // up, it is offered none from then on and its app keeps <video>.
+        this.surfaceWithdrawn = false;
+        this.surfaceShow = null;
+        this.wakeSurfaceShow = [];
+        this.holeOpenWaiter = null;
+        this.playingWaiter = null;
+        this.isPlayHeld = false;
+        this.isRemoved = false;
+        this.frameBackground = '#000000';
         this.handleEmbeddedMessage = function (type, payload) { return __awaiter(_this, void 0, void 0, function () {
             var windowId, workerState, lock, lock, lock;
             return __generator(this, function (_a) {
@@ -359,6 +411,11 @@ var PresentationWindow = /** @class */ (function () {
                         }
                         break;
                     }
+                    case 'open_video': {
+                        // An embedded app is never offered a video surface.
+                        this.refuseVideo('not_offered');
+                        break;
+                    }
                     default: {
                         this.logWarning("Received unknown embedded message type: ".concat(type));
                     }
@@ -367,7 +424,7 @@ var PresentationWindow = /** @class */ (function () {
             });
         }); };
         this.handleLegacyMessage = function (type, payload) { return __awaiter(_this, void 0, void 0, function () {
-            var _a, windowId, onPresentationProperties;
+            var _a, windowId, onPresentationProperties, surface;
             return __generator(this, function (_b) {
                 _a = this.options, windowId = _a.windowId, onPresentationProperties = _a.onPresentationProperties;
                 if (type === 'loaded') {
@@ -382,6 +439,11 @@ var PresentationWindow = /** @class */ (function () {
                     this.logInfo("Received 'presentation_complete' from window '".concat(windowId, "'"));
                     this.handleComplete();
                 }
+                if (type === 'first_painted') {
+                    this.logDebug("Received 'first_painted' from window '".concat(windowId, "'"));
+                    this.didPaintSinceLastPlay = true;
+                    this.resolveFirstPaintWaiters();
+                }
                 if (type === 'enable_interrupt_lock') {
                     this.logInfo("Received 'enable_interrupt_lock' from window '".concat(windowId, "'"));
                     this.enableInteruptLock();
@@ -404,6 +466,33 @@ var PresentationWindow = /** @class */ (function () {
                         this.logWarning("Invalid payload received for 'open_child_window', ignoring");
                     }
                 }
+                if (type === 'open_video') {
+                    this.handleOpenVideo(payload);
+                }
+                if (type === 'video_bounds') {
+                    this.handleVideoBounds(payload);
+                }
+                if (type === 'video_hole_open') {
+                    this.logInfo("Received 'video_hole_open' from window '".concat(windowId, "'"));
+                    surface = this.surface;
+                    if (this.holeOpenWaiter) {
+                        this.holeOpenWaiter();
+                    }
+                    else if (surface &&
+                        surface.firstFrame &&
+                        !surface.holeOpen &&
+                        !this.surfaceShow) {
+                        // Opened before the window is shown, so a swap may play and reveal
+                        // it before showing its surface.
+                        surface.isHolePreopened = true;
+                    }
+                }
+                if (type === 'close_video') {
+                    this.logInfo("Received 'close_video' from window '".concat(windowId, "'"));
+                    if (this.surface) {
+                        this.dropSurface(this.surface);
+                    }
+                }
                 if (type === 'close_child_window') {
                     // TODO: Validate close_child_window message payload.
                     this.logInfo("Received 'close_child_window', windowId=".concat(payload.windowId));
@@ -449,9 +538,40 @@ var PresentationWindow = /** @class */ (function () {
         }
         return this.loadLegacyApp();
     };
-    PresentationWindow.prototype.show = function (isFocused) {
+    // Shows the window. A window holding a surface with its first frame and
+    // bounds shows the surface first and reveals its frame only once the app
+    // has opened its hole; onReveal then runs in the reveal's task. Given
+    // showAfterRevealMs by a swap, a surface whose app opened its hole while
+    // hidden is played, then revealed, then shown instead. The promise
+    // resolves once the frame is revealed and any such show has settled, or
+    // the window is removed.
+    PresentationWindow.prototype.show = function (isFocused, onReveal, showAfterRevealMs) {
         var _this = this;
         if (isFocused === void 0) { isFocused = true; }
+        if (this.surfaceShow) {
+            return this.surfaceShow;
+        }
+        var surface = this.surface;
+        if (surface && surface.holeOpen) {
+            this.showFrame(isFocused);
+            return Promise.resolve();
+        }
+        if (surface && this.isSurfaceReady(surface)) {
+            var showing = showAfterRevealMs !== undefined && surface.isHolePreopened
+                ? this.showSurfaceAfterReveal(surface, isFocused, showAfterRevealMs, onReveal)
+                : this.showSurface(surface, isFocused, onReveal);
+            this.surfaceShow = showing.then(function () {
+                _this.surfaceShow = null;
+            });
+            return this.surfaceShow;
+        }
+        // Shown before its surface was ready: the app keeps <video>.
+        this.withdrawSurface();
+        this.showFrame(isFocused);
+        return Promise.resolve();
+    };
+    PresentationWindow.prototype.showFrame = function (isFocused) {
+        var _this = this;
         var _a = this.options, windowId = _a.windowId, renderer = _a.renderer;
         // Show the main window and focus it before any child windows. Showing a child
         // window that requires focus will move focus from the main window to the child.
@@ -488,7 +608,7 @@ var PresentationWindow = /** @class */ (function () {
     };
     PresentationWindow.prototype.remove = function () {
         return __awaiter(this, void 0, void 0, function () {
-            var _a, windowId, renderer, err_1;
+            var _a, windowId, renderer, surface, surfaceBroker, err_1;
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
@@ -510,23 +630,43 @@ var PresentationWindow = /** @class */ (function () {
                             clearTimeout(this.configurableDurationTimeout);
                             this.configurableDurationTimeout = null;
                         }
+                        // Release anything waiting on a paint signal so callers never hang on a
+                        // window that is going away.
+                        this.resolveFirstPaintWaiters();
+                        // Release a surface show in progress; a removed window is never revealed.
+                        this.isRemoved = true;
+                        this.isPlayHeld = false;
+                        this.wakeSurfaceShowWaiters();
                         // Remove any child window managers.
                         Object.values(this.windowManagers).forEach(function (wm) {
                             wm.destroy();
                         });
-                        _b.label = 1;
+                        surface = this.surface;
+                        surfaceBroker = this.options.surfaceBroker;
+                        if (!(surface && surfaceBroker)) return [3 /*break*/, 2];
+                        this.surface = null;
+                        if (surface.handle) {
+                            this.sendVideoMessage('video_closing');
+                        }
+                        return [4 /*yield*/, surfaceBroker.close(windowId)];
                     case 1:
-                        _b.trys.push([1, 3, , 4]);
-                        return [4 /*yield*/, renderer.removeWindow(windowId)];
+                        _b.sent();
+                        if (surface.holeOpen) {
+                            surfaceBroker.onHole(false);
+                        }
+                        _b.label = 2;
                     case 2:
+                        _b.trys.push([2, 4, , 5]);
+                        return [4 /*yield*/, renderer.removeWindow(windowId)];
+                    case 3:
                         _b.sent();
                         this.logInfo("Removed window '".concat(windowId, "'"));
-                        return [3 /*break*/, 4];
-                    case 3:
+                        return [3 /*break*/, 5];
+                    case 4:
                         err_1 = _b.sent();
                         this.logError("Failed to remove window '".concat(windowId, "' with '").concat(err_1.message, "'"));
-                        return [3 /*break*/, 4];
-                    case 4: return [2 /*return*/];
+                        return [3 /*break*/, 5];
+                    case 5: return [2 /*return*/];
                 }
             });
         });
@@ -540,6 +680,17 @@ var PresentationWindow = /** @class */ (function () {
     PresentationWindow.prototype.play = function () {
         var _this = this;
         var _a = this.options, applicationVersion = _a.applicationVersion, presentation = _a.presentation;
+        // A window holding a surface plays only once its frame is revealed over
+        // an open hole, so its first paint follows the hole opening.
+        var surface = this.surface;
+        if (surface && !surface.holeOpen) {
+            this.isPlayHeld = true;
+            return;
+        }
+        this.isPlayHeld = false;
+        // Each play starts a new paint cycle; 'first_painted' arrives once the
+        // window has presented a frame after this play.
+        this.didPaintSinceLastPlay = false;
         if (applicationVersion.configurableDuration) {
             var durationMs = Math.max(presentation.duration * 1000, 5000);
             if (this.configurableDurationTimeout) {
@@ -553,6 +704,20 @@ var PresentationWindow = /** @class */ (function () {
         }
         if (!this.isEmbeddedApp()) {
             this.sendMessageString('play');
+            // A replay seeks to the start rather than reopening, which would cost
+            // a new first frame with nothing in the hole meanwhile.
+            if (surface && surface.handle) {
+                if (surface.isPlayingAhead) {
+                    surface.isPlayingAhead = false;
+                }
+                else {
+                    if (surface.plays > 0) {
+                        surface.handle.seek(0);
+                    }
+                    surface.handle.play();
+                    surface.plays += 1;
+                }
+            }
             // Play any child window managers.
             Object.values(this.windowManagers).forEach(function (wm) {
                 // We only want to trigger play on child windows the first play of the main window or if
@@ -579,6 +744,75 @@ var PresentationWindow = /** @class */ (function () {
     PresentationWindow.prototype.reset = function () {
         this.didReceiveComplete = false;
     };
+    // Resolves when the window reports its first painted frame after the most
+    // recent play, or after timeoutMs, whichever comes first. Only app-renderer
+    // windows emit the paint signal; anything else exits via the timeout.
+    PresentationWindow.prototype.waitForFirstPaint = function (timeoutMs) {
+        var _this = this;
+        if (this.didPaintSinceLastPlay) {
+            return Promise.resolve();
+        }
+        return new Promise(function (resolve) {
+            var settled = false;
+            var settle = function () {
+                if (settled)
+                    return;
+                settled = true;
+                clearTimeout(timer);
+                var index = _this.firstPaintResolvers.indexOf(settle);
+                if (index !== -1) {
+                    _this.firstPaintResolvers.splice(index, 1);
+                }
+                resolve();
+            };
+            var timer = setTimeout(settle, timeoutMs);
+            _this.firstPaintResolvers.push(settle);
+        });
+    };
+    // Stop delivering this window's events (complete, error, analytics, charge,
+    // interrupt locks) to the window manager. Used when the outgoing window is
+    // kept on screen only as a visual backdrop during a swap overlap — a late
+    // event from it must not be attributed to the incoming window.
+    PresentationWindow.prototype.detachCallbacks = function () {
+        this.readyCallback = null;
+        this.completeCallback = null;
+        this.errorCallback = null;
+        this.enableInterruptLockCallback = null;
+        this.disableInterruptLockCallback = null;
+        this.analyticsEventCallback = null;
+        this.chargeRequestCallback = null;
+    };
+    // Mute the window's audio channel. On the IFrameRenderer this is best-effort
+    // (iframes expose no mute API); BrowserWindow renderers mute for real.
+    PresentationWindow.prototype.mute = function () {
+        var _a = this.options, windowId = _a.windowId, renderer = _a.renderer;
+        renderer.muteWindow(windowId);
+    };
+    PresentationWindow.prototype.wasRemoved = function () {
+        return this.isRemoved;
+    };
+    // The window holds a video surface, opened or still opening.
+    PresentationWindow.prototype.holdsSurface = function () {
+        return this.surface !== null;
+    };
+    // A swap is taking this window off screen: mute its surface and tell the
+    // broker its close follows, or mute the window as today when it has none.
+    PresentationWindow.prototype.muteSurfaceOrFrame = function () {
+        var _a = this.options, windowId = _a.windowId, surfaceBroker = _a.surfaceBroker;
+        var surface = this.surface;
+        if (surface && surface.handle && surfaceBroker) {
+            surface.handle.setMuted(true);
+            surfaceBroker.leaving(windowId);
+        }
+        else {
+            this.mute();
+        }
+    };
+    PresentationWindow.prototype.resolveFirstPaintWaiters = function () {
+        var resolvers = this.firstPaintResolvers;
+        this.firstPaintResolvers = [];
+        resolvers.forEach(function (resolve) { return resolve(); });
+    };
     PresentationWindow.prototype.onComplete = function (callback) {
         this.completeCallback = callback;
     };
@@ -604,6 +838,12 @@ var PresentationWindow = /** @class */ (function () {
         if (this.isEmbeddedApp()) {
             return this.didEmbeddedAppLoad;
         }
+        // A window holding a surface is ready only once its first frame has
+        // arrived and the app has sized its hole from it.
+        var surface = this.surface;
+        if (surface && !this.isSurfaceReady(surface)) {
+            return false;
+        }
         return this.didReceiveReady && this.allChildWindowManagersReady();
     };
     PresentationWindow.prototype.isComplete = function () {
@@ -844,12 +1084,12 @@ var PresentationWindow = /** @class */ (function () {
                     case 0:
                         _a = this.options, windowId = _a.windowId, _b = _a.appRendererUrl, appRendererUrl = _b === void 0 ? defaultAppRendererUrl : _b, appRendererOfflineSupport = _a.appRendererOfflineSupport, backgroundColor = _a.backgroundColor;
                         this.logInfo("Create window '".concat(windowId, "'"));
+                        this.frameBackground = backgroundColor || '#000000'; // Default to black bg for Raydiant apps
                         return [4 /*yield*/, this.createAndLoadWindow(this.getFullAppRendererUrl({
                                 appRendererUrl: appRendererUrl,
                                 windowId: windowId,
                                 appRendererOfflineSupport: appRendererOfflineSupport,
-                            }), backgroundColor || '#000000', // Default to black bg for Raydiant apps
-                            this.handleLegacyMessage)];
+                            }), this.frameBackground, this.handleLegacyMessage)];
                     case 1:
                         _c.sent();
                         return [4 /*yield*/, this.waitForPesentationReady()];
@@ -976,31 +1216,20 @@ var PresentationWindow = /** @class */ (function () {
         return nextTheme;
     };
     PresentationWindow.prototype.sendRenderMessage = function () {
-        var _a = this.options, applicationVersion = _a.applicationVersion, isPreview = _a.isPreview, device = _a.device;
+        var _a = this.options, applicationVersion = _a.applicationVersion, isPreview = _a.isPreview, device = _a.device, surfaceBroker = _a.surfaceBroker;
+        // The offer of a video surface; app renderer 3.2.0 gives the app its
+        // miraVideo prop only when this is set.
+        var surfaceOffer = surfaceBroker ? { nativeVideo: true } : {};
         // 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.sendMessageString('render', {
-                builderState: this.builderState,
-                presentation: __assign(__assign({}, this.presentation), { applicationVariables: __assign(__assign({}, this.presentation.applicationVariables), { 
+            this.sendMessageString('render', __assign({ builderState: this.builderState, presentation: __assign(__assign({}, this.presentation), { applicationVariables: __assign(__assign({}, this.presentation.applicationVariables), { 
                         // 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 }) }),
-                theme: this.buildTheme(),
-                applicationVersion: applicationVersion,
-                device: device,
-                isPreview: isPreview,
-            });
+                        mute: true, muted: true }) }), theme: this.buildTheme(), applicationVersion: applicationVersion, device: device, isPreview: isPreview }, surfaceOffer));
         }
         else {
-            this.sendMessageString('render', {
-                builderState: this.builderState,
-                presentation: this.presentation,
-                theme: this.buildTheme(),
-                applicationVersion: applicationVersion,
-                device: device,
-                isPreview: isPreview,
-            });
+            this.sendMessageString('render', __assign({ builderState: this.builderState, presentation: this.presentation, theme: this.buildTheme(), applicationVersion: applicationVersion, device: device, isPreview: isPreview }, surfaceOffer));
         }
     };
     PresentationWindow.prototype.openChildWindow = function (windowName, playlistId, bounds, forceMute, isFocused, themeOverride) {
@@ -1185,6 +1414,347 @@ var PresentationWindow = /** @class */ (function () {
             appRendererOfflineSupport: appRendererOfflineSupport,
         });
     };
+    PresentationWindow.prototype.handleOpenVideo = function (payload) {
+        var _this = this;
+        var _a = this.options, windowId = _a.windowId, surfaceBroker = _a.surfaceBroker, presentation = _a.presentation;
+        this.logInfo("Received 'open_video' from window '".concat(windowId, "', url=").concat(payload && payload.url));
+        if (!surfaceBroker || this.surfaceWithdrawn || this.isEmbeddedApp()) {
+            this.refuseVideo('not_offered');
+            return;
+        }
+        if (this.surface) {
+            this.logWarning("Ignoring 'open_video' from window '".concat(windowId, "', it already holds a surface"));
+            return;
+        }
+        if (!payload ||
+            typeof payload !== 'object' ||
+            typeof payload.url !== 'string' ||
+            !isValidRect(payload.bounds) ||
+            !this.isOfferedVideoUrl(payload.url)) {
+            this.refuseVideo('not_offered');
+            return;
+        }
+        var surface = {
+            handle: null,
+            wantsSound: payload.muted === false,
+            firstFrame: false,
+            bounds: null,
+            holeOpen: false,
+            isHolePreopened: false,
+            isPlayingAhead: false,
+            plays: 0,
+        };
+        this.surface = surface;
+        surfaceBroker
+            .open(windowId, {
+            url: payload.url,
+            bounds: roundRect(payload.bounds),
+            // Always opened muted; sound waits for the show.
+            muted: true,
+            label: presentation.id,
+        }, function (event) { return _this.handleSurfaceEvent(surface, event); }, function (reason) {
+            if (_this.surface !== surface)
+                return;
+            _this.sendVideoMessage('video_refused', { reason: reason });
+            _this.dropSurface(surface);
+        })
+            .then(function (handle) {
+            if (_this.surface !== surface)
+                return;
+            surface.handle = handle;
+            _this.sendVideoMessage('video_opened');
+        }, function (err) {
+            if (_this.surface !== surface)
+                return;
+            var reason = err instanceof SurfaceBroker_1.SurfaceRefusal ? err.reason : 'unsupported';
+            // The broker has logged its refusal.
+            if (reason !== 'closed') {
+                _this.sendVideoMessage('video_refused', { reason: reason });
+            }
+            _this.dropSurface(surface);
+        });
+    };
+    PresentationWindow.prototype.handleVideoBounds = function (payload) {
+        var surface = this.surface;
+        if (!surface || !surface.handle)
+            return;
+        if (!payload || !isValidRect(payload.bounds)) {
+            this.logWarning("Invalid payload received for 'video_bounds', ignoring");
+            return;
+        }
+        var bounds = roundRect(payload.bounds);
+        surface.handle.setBounds(bounds);
+        if (surface.firstFrame) {
+            var wasSized = surface.bounds !== null;
+            surface.bounds = bounds;
+            if (!wasSized) {
+                this.checkIsReadyCallback();
+            }
+        }
+    };
+    PresentationWindow.prototype.handleSurfaceEvent = function (surface, event) {
+        if (this.surface !== surface)
+            return;
+        // A stall is the host's to ride out, but it reaches the app: an app that
+        // times its own complete holds that timer until the next 'playing'.
+        if (event.type === 'first_frame') {
+            surface.firstFrame = true;
+        }
+        this.sendVideoMessage('video_event', event);
+        if (event.type === 'playing' && this.playingWaiter) {
+            this.playingWaiter();
+        }
+        if (event.type === 'error') {
+            this.dropSurface(surface);
+        }
+    };
+    PresentationWindow.prototype.isSurfaceReady = function (surface) {
+        return !!surface.handle && surface.firstFrame && surface.bounds !== null;
+    };
+    // Only an http(s) url the presentation holds, or one of its renditions,
+    // opens a surface: it is the url the app would give <video>.
+    PresentationWindow.prototype.isOfferedVideoUrl = function (url) {
+        if (!/^https?:\/\//i.test(url))
+            return false;
+        return collectUrls(this.presentation.applicationVariables).some(function (offered) {
+            return url === offered ||
+                RENDITION_SUFFIXES.some(function (suffix) { return url === "".concat(offered).concat(suffix); });
+        });
+    };
+    // Shows a ready surface: the host's show() is awaited, the app is told to
+    // open its hole, and the frame is revealed once it has. One deadline covers
+    // both waits; past it the app keeps <video> and the frame shows as today.
+    PresentationWindow.prototype.showSurface = function (surface, isFocused, onReveal) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, surfaceShowDeadlineMs, handle, passDeadline, deadline, timer, wake, woken, holeOpen, finish, outcome;
+            var _this = this;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = this.options.surfaceShowDeadlineMs, surfaceShowDeadlineMs = _a === void 0 ? SurfaceBroker_1.DEFAULT_SURFACE_SWAP_DELAY_MS : _a;
+                        handle = surface.handle;
+                        passDeadline = function () { return undefined; };
+                        deadline = new Promise(function (resolve) {
+                            passDeadline = resolve;
+                        });
+                        timer = setTimeout(function () { return passDeadline('deadline'); }, surfaceShowDeadlineMs);
+                        wake = function () { return undefined; };
+                        woken = new Promise(function (resolve) {
+                            wake = function () { return resolve('woken'); };
+                        });
+                        this.wakeSurfaceShow.push(wake);
+                        holeOpen = new Promise(function (resolve) {
+                            _this.holeOpenWaiter = function () { return resolve('hole_open'); };
+                        });
+                        finish = function () {
+                            clearTimeout(timer);
+                            _this.holeOpenWaiter = null;
+                            _this.wakeSurfaceShow = _this.wakeSurfaceShow.filter(function (w) { return w !== wake; });
+                        };
+                        return [4 /*yield*/, Promise.race([
+                                handle.show().then(function () { return 'shown'; }, function () { return 'failed'; }),
+                                deadline,
+                                woken,
+                            ])];
+                    case 1:
+                        outcome = _b.sent();
+                        if (!(outcome === 'shown' && this.surface === surface && !this.isRemoved)) return [3 /*break*/, 3];
+                        if (surface.wantsSound && !this.forceMute) {
+                            handle.setMuted(false);
+                        }
+                        this.sendVideoMessage('video_shown');
+                        return [4 /*yield*/, Promise.race([holeOpen, deadline, woken])];
+                    case 2:
+                        outcome = _b.sent();
+                        _b.label = 3;
+                    case 3:
+                        finish();
+                        if (this.isRemoved) {
+                            return [2 /*return*/];
+                        }
+                        if (outcome === 'hole_open' && this.surface === surface) {
+                            this.revealOverHole(surface, isFocused, onReveal);
+                            return [2 /*return*/];
+                        }
+                        // A show the host rejected falls back as a missed deadline does, under
+                        // the host's own answer.
+                        if ((outcome === 'deadline' || outcome === 'failed') &&
+                            this.surface === surface) {
+                            this.refuseVideo(outcome === 'failed' ? 'unsupported' : 'deadline');
+                            this.dropSurface(surface);
+                        }
+                        // The surface is gone: the frame shows and plays as today.
+                        this.showFrame(isFocused);
+                        this.releaseHeldPlay();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    // A swap's incoming surface whose app opened its hole while hidden. It
+    // plays first, still hidden and muted, and the frame is revealed over the
+    // outgoing surface once it reports playing, so the picture is moving when
+    // it appears and no first frame is held. The surface is shown
+    // showAfterRevealMs later: it reaches the screen sooner than the frame
+    // does, so the two land together. Sound waits for the show, so it never
+    // overlaps the outgoing surface's. A surface that never reports playing is
+    // revealed at the show deadline; past a second deadline on the show the
+    // app keeps <video> in the frame already revealed.
+    PresentationWindow.prototype.showSurfaceAfterReveal = function (surface, isFocused, showAfterRevealMs, onReveal) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, surfaceShowDeadlineMs, handle, timers, after, wake, woken, isHeld, playing, isRevealed, outcome;
+            var _this = this;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = this.options.surfaceShowDeadlineMs, surfaceShowDeadlineMs = _a === void 0 ? SurfaceBroker_1.DEFAULT_SURFACE_SWAP_DELAY_MS : _a;
+                        handle = surface.handle;
+                        timers = [];
+                        after = function (ms, value) {
+                            return new Promise(function (resolve) {
+                                timers.push(setTimeout(function () { return resolve(value); }, ms));
+                            });
+                        };
+                        wake = function () { return undefined; };
+                        woken = new Promise(function (resolve) {
+                            wake = function () { return resolve('woken'); };
+                        });
+                        this.wakeSurfaceShow.push(wake);
+                        isHeld = function () { return !_this.isRemoved && _this.surface === surface; };
+                        playing = new Promise(function (resolve) {
+                            _this.playingWaiter = function () { return resolve('playing'); };
+                        });
+                        handle.play();
+                        surface.plays += 1;
+                        surface.isPlayingAhead = true;
+                        isRevealed = false;
+                        return [4 /*yield*/, Promise.race([
+                                playing,
+                                after(surfaceShowDeadlineMs, 'no_playing'),
+                                woken,
+                            ])];
+                    case 1:
+                        outcome = _b.sent();
+                        this.playingWaiter = null;
+                        if (outcome === 'no_playing') {
+                            this.logWarning("No 'playing' from the surface of window '".concat(this.options.windowId, "', revealing it anyway"));
+                        }
+                        if (!((outcome === 'playing' || outcome === 'no_playing') && isHeld())) return [3 /*break*/, 3];
+                        isRevealed = true;
+                        this.revealOverHole(surface, isFocused, onReveal);
+                        return [4 /*yield*/, Promise.race([
+                                after(showAfterRevealMs, 'show'),
+                                woken,
+                            ])];
+                    case 2:
+                        outcome = _b.sent();
+                        _b.label = 3;
+                    case 3:
+                        if (!(outcome === 'show' && isHeld())) return [3 /*break*/, 5];
+                        return [4 /*yield*/, Promise.race([
+                                handle.show().then(function () { return 'shown'; }, function () { return 'failed'; }),
+                                after(surfaceShowDeadlineMs, 'deadline'),
+                                woken,
+                            ])];
+                    case 4:
+                        outcome = _b.sent();
+                        _b.label = 5;
+                    case 5:
+                        timers.forEach(function (timer) { return clearTimeout(timer); });
+                        this.wakeSurfaceShow = this.wakeSurfaceShow.filter(function (w) { return w !== wake; });
+                        if (this.isRemoved) {
+                            return [2 /*return*/];
+                        }
+                        if (outcome === 'shown' && this.surface === surface) {
+                            if (surface.wantsSound && !this.forceMute) {
+                                handle.setMuted(false);
+                            }
+                            this.sendVideoMessage('video_shown');
+                            return [2 /*return*/];
+                        }
+                        if ((outcome === 'deadline' || outcome === 'failed') &&
+                            this.surface === surface) {
+                            this.refuseVideo(outcome === 'failed' ? 'unsupported' : 'deadline');
+                            this.dropSurface(surface);
+                        }
+                        // The surface went before its reveal: the frame shows and plays as today.
+                        if (!isRevealed) {
+                            this.showFrame(isFocused);
+                            this.releaseHeldPlay();
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    // Reveals the frame over its surface's open hole, and runs the caller's
+    // onReveal and any held play in that same task.
+    PresentationWindow.prototype.revealOverHole = function (surface, isFocused, onReveal) {
+        var _a = this.options, windowId = _a.windowId, renderer = _a.renderer, surfaceBroker = _a.surfaceBroker;
+        surface.holeOpen = true;
+        surfaceBroker.onHole(true);
+        if (renderer.setWindowBackground) {
+            renderer.setWindowBackground(windowId, 'transparent');
+        }
+        this.showFrame(isFocused);
+        if (onReveal)
+            onReveal();
+        this.releaseHeldPlay();
+    };
+    // Shown before its surface was ready: any surface it holds closes and the
+    // window is offered none from then on.
+    PresentationWindow.prototype.withdrawSurface = function () {
+        this.surfaceWithdrawn = true;
+        var surface = this.surface;
+        if (surface) {
+            this.refuseVideo('not_offered');
+            this.dropSurface(surface);
+        }
+    };
+    // The window gives its surface up: closed through the broker, its hole
+    // reported closed and its frame background restored. It holds none from
+    // then on, and counts ready and swaps as any other window.
+    PresentationWindow.prototype.dropSurface = function (surface) {
+        var _a = this.options, windowId = _a.windowId, renderer = _a.renderer, surfaceBroker = _a.surfaceBroker;
+        if (this.surface !== surface || !surfaceBroker)
+            return;
+        this.surface = null;
+        this.surfaceWithdrawn = true;
+        surfaceBroker.close(windowId);
+        if (surface.holeOpen) {
+            surface.holeOpen = false;
+            surfaceBroker.onHole(false);
+            if (renderer.setWindowBackground) {
+                renderer.setWindowBackground(windowId, this.frameBackground);
+            }
+        }
+        this.wakeSurfaceShowWaiters();
+        this.checkIsReadyCallback();
+    };
+    PresentationWindow.prototype.wakeSurfaceShowWaiters = function () {
+        var waiters = this.wakeSurfaceShow;
+        this.wakeSurfaceShow = [];
+        waiters.forEach(function (wake) { return wake(); });
+    };
+    PresentationWindow.prototype.releaseHeldPlay = function () {
+        if (this.isPlayHeld) {
+            this.isPlayHeld = false;
+            this.play();
+        }
+    };
+    PresentationWindow.prototype.refuseVideo = function (reason) {
+        this.logWarning("Sending 'video_refused' to window '".concat(this.options.windowId, "', reason=").concat(reason));
+        this.sendVideoMessage('video_refused', { reason: reason });
+    };
+    // Every video message rides the string channel the app renderer reads.
+    PresentationWindow.prototype.sendVideoMessage = function (type, payload) {
+        try {
+            this.sendMessageString(type, payload);
+        }
+        catch (err) {
+            this.logWarning("Failed to send '".concat(type, "' with '").concat(err.message, "'"));
+        }
+    };
     PresentationWindow.prototype.handleReady = function () {
         this.didReceiveReady = true;
         this.checkIsReadyCallback();