@netless/slide 1.4.55 → 1.4.57

package/README.md

@@ -2,39 +2,17 @@
 
 ## [示例及具体文档参考](https://github.com/netless-io/netless-slide-demo)
 
-## interactive 客户端的同步队列追最新策略
-
-`@netless/slide` 默认按 FIFO 顺序执行所有接收到的同步事件。对于需要在弱网积压时优先追赶最新页面的 interactive 客户端，可以显式启用 `latest-pending-render`；可写端和只读端都可以使用：
-
-```ts
-const slide = new Slide({
-  // 其他配置
-  syncEventQueuePolicy: "latest-pending-render",
-});
-
-slide.setSyncEventQueuePolicy("fifo");
-slide.setSyncEventQueuePolicy("latest-pending-render");
-```
-
-该策略只处理尚未开始执行的 pending 事件：
-
-- 新的 `renderSlide` 到达时，删除同一资源段内排在它之前的 pending 翻页、`nextStep`、`prevStep`、交互动画和媒体操作。
-- 保留最新 `renderSlide`，以及它之后到达的所有操作，并继续按 FIFO 执行。
-- `setResource` 和未知事件是硬边界，不会被删除，也不会跨越边界压缩。
-- 已经开始执行的事件不会被取消；该策略不保证完全不显示 running 中间页。
-- 动态切换策略本身不会清空或重排已有队列；切换后新到达的 `renderSlide` 才会触发压缩。
-- latest 策略下开始执行远端 `renderSlide`，或远端事件形成 pending 积压后，Slide 会暂时阻止本地 `nextStep()`、`prevStep()`、`renderSlide()`、`doRenderSlide()` 和画布交互；同步接收、状态恢复和队列执行不受影响。本机事件优先通过现有 Lock 的 UUID 回包识别，并以 `clientId` 作为补充，不会锁住正在操作的当前控制者。
-- 临时输入锁在同步队列重新空闲后解除，并恢复调用方最近一次通过 `setInteractive()` 设置的权限；不会把原本的只读端恢复成可写。
-
-该能力不会根据 `interactive` 自动开启。调用方应通过自己的灰度开关显式选择；关闭策略时可以恢复为 `fifo`，不会修改调用方原有的本地交互权限。
-
-该策略只在 Slide 的 `mode: "interactive"` 下生效；`sync`、`local` 和 `addLink` mode 会强制使用 `fifo`。这项 mode 保护不能替代调用方的只读权限与 feature flag 判断。
+## changelog
 
-实际发生压缩时，SDK 会通过现有 logger/tracker 记录丢弃分类、保留页码、目标事件接收时间、对应渲染完成时间和追赶输入锁状态；记录中不包含事件 UUID、资源 URL 或 token。
+### 1.4.57 (2026-08-27)
+* 支持在客户端解码并播放本地 GIF 资源，兼容旧版 Safari
+* 修复 WebGL 切页转场被错误关闭的问题
 
-## changelog
+### 1.4.56 (2026-08-25)
+* 修复冻结 (frozen) 恢复 (release) 时画面闪烁问题
+* 完善 Canvas/WebGL 播放器销毁清理，避免状态切换后残留多个 canvas
 
-### 未发布
+### 1.4.55 (2026-08-21)
 * 增加 `latest-pending-render` 同步队列策略，弱网积压时丢弃最后翻页前尚未执行的中间页面操作，并在追赶期间阻止本地输入
 * 修复 PPT 图形内阴影（`innerShadow`）被错误渲染为不透明黑边的问题
   * 按转换数据中的颜色、模糊半径、距离和方向渲染柔化内阴影

package/lib/FrozenMediaState.d.ts

@@ -0,0 +1,13 @@
+export interface FrozenMediaPlaybackState {
+    type: "pause" | "play";
+    time: number;
+}
+export declare type FrozenMediaTimes = {
+    [key: string]: number;
+};
+export declare function captureFrozenMediaTimes(mediaState: {
+    [key: string]: FrozenMediaPlaybackState;
+}, frozenTime: number): FrozenMediaTimes;
+export declare function applyFrozenMediaTimes(mediaState: {
+    [key: string]: FrozenMediaPlaybackState;
+}, frozenMediaTimes: FrozenMediaTimes, releaseTime: number): void;

package/lib/FrozenMediaState.js

@@ -0,0 +1,18 @@
+export function captureFrozenMediaTimes(mediaState, frozenTime) {
+    var frozenMediaTimes = Object.create(null);
+    for (var key in mediaState) {
+        if (mediaState[key].type === "play") {
+            frozenMediaTimes[key] = frozenTime;
+        }
+    }
+    return frozenMediaTimes;
+}
+export function applyFrozenMediaTimes(mediaState, frozenMediaTimes, releaseTime) {
+    for (var key in mediaState) {
+        var media = mediaState[key];
+        var frozenTime = frozenMediaTimes[key];
+        if (media.type === "play" && frozenTime !== undefined) {
+            media.time = releaseTime - (Math.max(frozenTime, media.time) - media.time);
+        }
+    }
+}

package/lib/RenderSlideVisibility.d.ts

@@ -0,0 +1,20 @@
+declare type VisibilityStyle = {
+    visibility: string;
+};
+declare type DisplayStyle = {
+    display: string;
+};
+declare type RenderSlidePlayer = {
+    view?: {
+        style: VisibilityStyle;
+    } | null;
+};
+declare type RenderSlideElement = {
+    style: VisibilityStyle & DisplayStyle;
+};
+/**
+ * Reveal a completed live render and remove its fallback image.
+ * Frozen and release states own visibility while their player transition is active.
+ */
+export declare function updateRenderSlideVisibility(isReleasing: boolean, player: RenderSlidePlayer | undefined, frame: RenderSlideElement, cacheImage: RenderSlideElement): void;
+export {};

package/lib/RenderSlideVisibility.js

@@ -0,0 +1,16 @@
+/**
+ * Reveal a completed live render and remove its fallback image.
+ * Frozen and release states own visibility while their player transition is active.
+ */
+export function updateRenderSlideVisibility(isReleasing, player, frame, cacheImage) {
+    if (isReleasing || !(player === null || player === void 0 ? void 0 : player.view)) {
+        return;
+    }
+    if (player.view.style.visibility === "hidden") {
+        player.view.style.visibility = "visible";
+    }
+    if (frame.style.visibility === "hidden") {
+        frame.style.visibility = "visible";
+    }
+    cacheImage.style.display = "none";
+}

package/lib/RenderingTaskManager.js

@@ -1,3 +1,18 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -35,11 +50,24 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import EventEmitter from "eventemitter3";
+var RenderTaskCancelledError = /** @class */ (function (_super) {
+    __extends(RenderTaskCancelledError, _super);
+    function RenderTaskCancelledError(message) {
+        if (message === void 0) { message = "render task cancelled"; }
+        var _this = _super.call(this, message) || this;
+        _this.code = "RENDER_TASK_CANCELLED";
+        _this.name = "AbortError";
+        return _this;
+    }
+    return RenderTaskCancelledError;
+}(Error));
+export { RenderTaskCancelledError };
 var Task = /** @class */ (function () {
     function Task(index, slideIndex, fn, eventHub, id) {
         this.state = "idle";
         this.index = -1;
         this.slideIndex = -1;
+        this.cancelled = false;
         this.fn = fn;
         this.index = index;
         this.slideIndex = slideIndex;
@@ -52,6 +80,9 @@ var Task = /** @class */ (function () {
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
+                        if (this.cancelled) {
+                            return [2 /*return*/];
+                        }
                         this.eventHub.emit("task-start", this);
                         _a.label = 1;
                     case 1:
@@ -60,11 +91,17 @@ var Task = /** @class */ (function () {
                         return [4 /*yield*/, this.fn()];
                     case 2:
                         _a.sent();
+                        if (this.cancelled) {
+                            return [2 /*return*/];
+                        }
                         this.state = "end";
                         this.eventHub.emit("task-end", this);
                         return [3 /*break*/, 4];
                     case 3:
                         e_1 = _a.sent();
+                        if (this.cancelled) {
+                            return [2 /*return*/];
+                        }
                         this.eventHub.emit("task-error", {
                             task: this,
                             error: e_1,
@@ -75,6 +112,9 @@ var Task = /** @class */ (function () {
             });
         });
     };
+    Task.prototype.cancel = function () {
+        this.cancelled = true;
+    };
     return Task;
 }());
 export { Task };
@@ -84,6 +124,7 @@ var RenderingTaskManager = /** @class */ (function () {
         this.eventHub = new EventEmitter();
         this.tasks = [];
         this.index = 0;
+        this.destroyed = false;
         this.eventHub.on("task-end", function (task) {
             var _a;
             var selfIndex = _this.tasks.findIndex(function (t) { return t.index === task.index; });
@@ -98,15 +139,28 @@ var RenderingTaskManager = /** @class */ (function () {
             _this.eventHub.emit("task-end-" + task.id);
         });
         this.eventHub.on("task-error", function (_a) {
-            var task = _a.task;
+            var task = _a.task, error = _a.error;
             var selfIndex = _this.tasks.findIndex(function (t) { return t.index === task.index; });
             if (selfIndex >= 0) {
                 _this.tasks.splice(selfIndex, 1);
                 _this.replaceIdleTask();
             }
-            _this.eventHub.emit("task-error-" + task.id);
+            _this.eventHub.emit("task-error-" + task.id, error);
+        });
+        this.eventHub.on("task-cancel", function (_a) {
+            var task = _a.task, error = _a.error;
+            var selfIndex = _this.tasks.findIndex(function (t) { return t.index === task.index; });
+            if (selfIndex >= 0) {
+                _this.tasks.splice(selfIndex, 1);
+            }
+            _this.eventHub.emit("task-cancel-" + task.id, error);
         });
     }
+    RenderingTaskManager.prototype.cancelTask = function (task) {
+        var error = new RenderTaskCancelledError();
+        task.cancel();
+        this.eventHub.emit("task-cancel", { task: task, error: error });
+    };
     RenderingTaskManager.prototype.replaceIdleTask = function () {
         var _this = this;
         var _a;
@@ -116,11 +170,19 @@ var RenderingTaskManager = /** @class */ (function () {
                 ids.add(i);
             }
         }
-        Array.from(ids).forEach(function (id) {
-            _this.tasks.splice(id, 1);
+        // Remove from the end so deleting one idle task does not shift the
+        // indexes selected for the remaining cancellations.
+        Array.from(ids).sort(function (a, b) { return b - a; }).forEach(function (id) {
+            var task = _this.tasks.splice(id, 1)[0];
+            if (task) {
+                _this.cancelTask(task);
+            }
         });
     };
     RenderingTaskManager.prototype.addTask = function (fn, slideIndex, id) {
+        if (this.destroyed) {
+            return undefined;
+        }
         var task = new Task(this.index++, slideIndex, fn, this.eventHub, id);
         this.tasks.push(task);
         this.tasks.sort(function (a, b) { return a.index - b.index; });
@@ -128,11 +190,21 @@ var RenderingTaskManager = /** @class */ (function () {
         if (this.tasks.length === 1) {
             task.apply();
         }
+        return task;
     };
     RenderingTaskManager.prototype.hasStartTask = function () {
         return this.tasks.some(function (t) { return t.state === "start"; });
     };
     RenderingTaskManager.prototype.destroy = function () {
+        var _this = this;
+        if (this.destroyed) {
+            return;
+        }
+        this.destroyed = true;
+        var tasks = this.tasks.splice(0);
+        tasks.forEach(function (task) {
+            _this.cancelTask(task);
+        });
         this.eventHub.removeAllListeners();
     };
     return RenderingTaskManager;

package/lib/Slide.d.ts

@@ -5,6 +5,7 @@ import { AliTrackLogger } from "./AliTrackLogger";
 import { preloadResource } from "./global";
 export { ErrorType, PreloadCancelledError } from "@netless/ppt-player";
 export type { SyncEventQueuePolicy } from "./SyncTaskManager";
+export declare const LOCAL_GIF_RUNTIME_CAPABILITY = "netless-slide-local-gif-production-client-geometry";
 export declare type UrlInterrupter = (url: string) => Promise<string>;
 export interface ILoaderDelegate {
     /**
@@ -179,6 +180,10 @@ export interface ISlideRenderOptions {
      */
     transitionResolutionLevel?: number;
     antialias?: boolean;
+    /** Maximum compressed bytes accepted for one client-decoded GIF. */
+    localGifMaxCompressedBytes?: number;
+    /** Maximum estimated GIF working set for one cached slide. */
+    localGifMaxWorkingSetBytes?: number;
 }
 export interface INavigatorDelegate {
     gotoPage?: (index: number) => void;
@@ -452,6 +457,7 @@ export declare class Slide extends Slide_base {
     private isAnimating;
     private renderingTaskManager;
     private isLoading;
+    private isReleasing;
     private interactive;
     private syncCatchUpInputBlocked;
     private anchor;