@netless/slide 1.4.55-alpha.4 → 1.4.55-alpha.6

package/lib/SyncTaskManager.js

@@ -1,33 +1,205 @@
+function assertSyncEventQueuePolicy(policy) {
+    if (policy !== "fifo" && policy !== "latest-pending-render") {
+        throw new Error("Invalid sync event queue policy: " + policy);
+    }
+}
+export function resolveSyncEventQueuePolicy(mode, policy) {
+    if (policy === void 0) { policy = "fifo"; }
+    assertSyncEventQueuePolicy(policy);
+    return mode === "interactive" ? policy : "fifo";
+}
+function isPageScopedEvent(event) {
+    switch (event.type) {
+        case "renderSlide":
+        case "nextStep":
+        case "prevStep":
+        case "interactiveAnim":
+        case "mediaPlay":
+        case "mediaPause":
+        case "mediaSeek":
+        case "mediaFullscreen":
+            return true;
+        default:
+            return false;
+    }
+}
 var SyncTaskManager = /** @class */ (function () {
-    function SyncTaskManager(fn) {
+    function SyncTaskManager(fn, options) {
         var _this = this;
+        if (options === void 0) { options = {}; }
         this.tasks = [];
         this.isDestroy = false;
         this.isScheduling = false;
+        this.isTaskRunning = false;
+        this.isCatchingUp = false;
+        this.compactedTasks = new WeakMap();
+        this.finishTask = function () {
+            _this.isTaskRunning = false;
+            _this.runningTask = undefined;
+            if (_this.isDestroy) {
+                _this.tasks.length = 0;
+                _this.isScheduling = false;
+            }
+            else if (_this.tasks.length > 0) {
+                window.requestAnimationFrame(_this.schedule);
+            }
+            else {
+                _this.isScheduling = false;
+                _this.setCatchUpState(false);
+            }
+        };
         this.schedule = function () {
+            if (_this.isDestroy) {
+                _this.tasks.length = 0;
+                _this.isScheduling = false;
+                return;
+            }
             _this.isScheduling = true;
             var task = _this.tasks.shift();
-            if (task && !_this.isDestroy) {
-                _this.fn(task).finally(function () {
-                    if (_this.tasks.length > 0) {
-                        window.requestAnimationFrame(_this.schedule);
-                    }
-                    else {
-                        _this.isScheduling = false;
+            if (!task) {
+                _this.isScheduling = false;
+                return;
+            }
+            _this.isTaskRunning = true;
+            _this.runningTask = task;
+            var compactInfo = _this.compactedTasks.get(task);
+            try {
+                _this.fn(task).then(function () {
+                    var _a;
+                    _this.compactedTasks.delete(task);
+                    if (compactInfo && !_this.isDestroy) {
+                        try {
+                            (_a = _this.onCompactedRenderComplete) === null || _a === void 0 ? void 0 : _a.call(_this, compactInfo, Date.now());
+                        }
+                        catch ( /* Observability must not interrupt synchronization. */_b) { /* Observability must not interrupt synchronization. */ }
                     }
+                    _this.finishTask();
+                }, function () {
+                    _this.compactedTasks.delete(task);
+                    _this.finishTask();
                 });
             }
+            catch (_a) {
+                _this.compactedTasks.delete(task);
+                _this.finishTask();
+            }
         };
         this.fn = fn;
+        this.policy = options.policy || "fifo";
+        this.onCompact = options.onCompact;
+        this.onCompactedRenderComplete = options.onCompactedRenderComplete;
+        this.onCatchUpStateChange = options.onCatchUpStateChange;
+        this.shouldTrackCatchUpEvent = options.shouldTrackCatchUpEvent;
+        assertSyncEventQueuePolicy(this.policy);
     }
     SyncTaskManager.prototype.destroy = function () {
         this.isDestroy = true;
+        this.isCatchingUp = false;
+        this.runningTask = undefined;
+        this.tasks.length = 0;
+    };
+    SyncTaskManager.prototype.setPolicy = function (policy) {
+        assertSyncEventQueuePolicy(policy);
+        this.policy = policy;
+    };
+    SyncTaskManager.prototype.setCatchUpState = function (isCatchingUp) {
+        var _a;
+        if (this.isCatchingUp === isCatchingUp) {
+            return;
+        }
+        this.isCatchingUp = isCatchingUp;
+        try {
+            (_a = this.onCatchUpStateChange) === null || _a === void 0 ? void 0 : _a.call(this, isCatchingUp);
+        }
+        catch ( /* Observability must not interrupt synchronization. */_b) { /* Observability must not interrupt synchronization. */ }
     };
-    SyncTaskManager.prototype.addTask = function (evt) {
-        this.tasks.push(evt);
+    SyncTaskManager.prototype.isCatchUpEvent = function (event) {
+        var _a, _b;
+        try {
+            return (_b = (_a = this.shouldTrackCatchUpEvent) === null || _a === void 0 ? void 0 : _a.call(this, event)) !== null && _b !== void 0 ? _b : true;
+        }
+        catch (_c) {
+            return true;
+        }
+    };
+    SyncTaskManager.prototype.compactForRender = function (event) {
+        var droppedEventTypes = {};
+        var droppedEventCount = 0;
+        var droppedRenderCount = 0;
+        var droppedStepCount = 0;
+        var droppedAnimationCount = 0;
+        var droppedMediaCount = 0;
+        while (this.tasks.length > 0) {
+            var pendingEvent = this.tasks[this.tasks.length - 1];
+            if (!isPageScopedEvent(pendingEvent)) {
+                break;
+            }
+            this.tasks.pop();
+            this.compactedTasks.delete(pendingEvent);
+            droppedEventCount += 1;
+            droppedEventTypes[pendingEvent.type] = (droppedEventTypes[pendingEvent.type] || 0) + 1;
+            if (pendingEvent.type === "renderSlide") {
+                droppedRenderCount += 1;
+            }
+            else if (pendingEvent.type === "nextStep" || pendingEvent.type === "prevStep") {
+                droppedStepCount += 1;
+            }
+            else if (pendingEvent.type === "interactiveAnim") {
+                droppedAnimationCount += 1;
+            }
+            else {
+                droppedMediaCount += 1;
+            }
+        }
+        if (droppedEventCount === 0) {
+            return undefined;
+        }
+        var boundaryEvent = this.tasks[this.tasks.length - 1];
+        return {
+            policy: "latest-pending-render",
+            droppedEventCount: droppedEventCount,
+            droppedRenderCount: droppedRenderCount,
+            droppedStepCount: droppedStepCount,
+            droppedAnimationCount: droppedAnimationCount,
+            droppedMediaCount: droppedMediaCount,
+            droppedOperationCount: droppedEventCount - droppedRenderCount,
+            droppedEventTypes: droppedEventTypes,
+            retainedSlideIndex: event.index,
+            retainedRenderReceivedAt: Date.now(),
+            hasRunningTask: this.isTaskRunning,
+            hardBoundaryType: boundaryEvent === null || boundaryEvent === void 0 ? void 0 : boundaryEvent.type,
+        };
+    };
+    SyncTaskManager.prototype.addTask = function (event) {
+        var _this = this;
+        var _a;
+        if (this.isDestroy) {
+            return undefined;
+        }
+        var hasPendingWork = this.isTaskRunning || this.tasks.length > 0;
+        var isIncomingCatchUpEvent = this.policy === "latest-pending-render" && this.isCatchUpEvent(event);
+        var hasCatchUpEvent = this.policy === "latest-pending-render" && (isIncomingCatchUpEvent ||
+            (!!this.runningTask && this.isCatchUpEvent(this.runningTask)) ||
+            this.tasks.some(function (pendingEvent) { return _this.isCatchUpEvent(pendingEvent); }));
+        var compactInfo = this.policy === "latest-pending-render" && event.type === "renderSlide" ?
+            this.compactForRender(event) :
+            undefined;
+        this.tasks.push(event);
+        var shouldStartCatchUp = hasCatchUpEvent && (hasPendingWork || (isIncomingCatchUpEvent && event.type === "renderSlide"));
+        if (shouldStartCatchUp) {
+            this.setCatchUpState(true);
+        }
+        if (compactInfo) {
+            this.compactedTasks.set(event, compactInfo);
+            try {
+                (_a = this.onCompact) === null || _a === void 0 ? void 0 : _a.call(this, compactInfo);
+            }
+            catch ( /* Observability must not interrupt synchronization. */_b) { /* Observability must not interrupt synchronization. */ }
+        }
         if (!this.isScheduling) {
             this.schedule();
         }
+        return compactInfo;
     };
     return SyncTaskManager;
 }());

package/lib/typeGuard/SyncEvent.d.ts

@@ -0,0 +1,10 @@
+import { SyncEvent, SyncInteractiveAnimEvent, SyncMediaFullscreenEvent, SyncMediaPauseEvent, SyncMediaPlayEvent, SyncMediaSeekEvent, SyncNextStepEvent, SyncPrevStepEvent, SyncRenderSlideEvent, SyncSetResourceEvent } from "../Slide";
+export declare function isSyncInteractiveAnimEvent(event: SyncEvent): event is SyncInteractiveAnimEvent;
+export declare function isSyncPrevStepEvent(event: SyncEvent): event is SyncPrevStepEvent;
+export declare function isSyncNextStepEvent(event: SyncEvent): event is SyncNextStepEvent;
+export declare function isSyncRenderSlideEvent(event: SyncEvent): event is SyncRenderSlideEvent;
+export declare function isSyncSetResourceEvent(event: SyncEvent): event is SyncSetResourceEvent;
+export declare function isSyncMediaPlayEvent(event: SyncEvent): event is SyncMediaPlayEvent;
+export declare function isSyncMediaPauseEvent(event: SyncEvent): event is SyncMediaPauseEvent;
+export declare function isSyncMediaSeekEvent(event: SyncEvent): event is SyncMediaSeekEvent;
+export declare function isSyncMediaFullscreenEvent(event: SyncEvent): event is SyncMediaFullscreenEvent;

package/lib/typeGuard/SyncEvent.js

@@ -0,0 +1,27 @@
+export function isSyncInteractiveAnimEvent(event) {
+    return event.type === "interactiveAnim";
+}
+export function isSyncPrevStepEvent(event) {
+    return event.type === "prevStep";
+}
+export function isSyncNextStepEvent(event) {
+    return event.type === "nextStep";
+}
+export function isSyncRenderSlideEvent(event) {
+    return event.type === "renderSlide";
+}
+export function isSyncSetResourceEvent(event) {
+    return event.type === "setResource";
+}
+export function isSyncMediaPlayEvent(event) {
+    return event.type === "mediaPlay";
+}
+export function isSyncMediaPauseEvent(event) {
+    return event.type === "mediaPause";
+}
+export function isSyncMediaSeekEvent(event) {
+    return event.type === "mediaSeek";
+}
+export function isSyncMediaFullscreenEvent(event) {
+    return event.type === "mediaFullscreen";
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/slide",
-  "version": "1.4.55-alpha.4",
+  "version": "1.4.55-alpha.6",
   "description": "> TODO: description",
   "author": "huaguzheng <huaguzheng2007@126.com>",
   "homepage": "https://github.com/netless-io/netless-slide-demo",
@@ -16,7 +16,7 @@
   ],
   "scripts": {
     "dev": "tsc",
-    "test": "node __tests__/FrozenMediaState.test.js",
+    "test": "node __tests__/SyncTaskManager.test.js && node __tests__/FrozenMediaState.test.js",
     "build": "webpack --config webpack.config.js",
     "watch": "webpack --config webpack.config.js --watch"
   },
@@ -37,5 +37,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3375eb8aa9ca3007dc644274f08850552f51398f"
+  "gitHead": "dd66331095e888ff187059ed36e6e3dc4050a6e7"
 }