libpag 4.5.4 → 4.5.36

package/src/wechat/binding.ts

@@ -46,4 +46,5 @@ export const binding = (module: PAG) => {
   module.RenderCanvas = RenderCanvas;
   setMixin(module);
   module.currentPlayer = null;
+  module._useSoftwareDecoder = false;
 };

package/src/wechat/pag-view.ts

@@ -114,7 +114,7 @@ export class PAGView extends NativePAGView {
       this.flushingNextFrame = false;
     } catch (e: any) {
       this.flushingNextFrame = false;
-      throw e;
+      console.error(e);
     }
   }
 
@@ -141,6 +141,11 @@ export class PAGView extends NativePAGView {
     }
     this.player.setProgress((this.playTime % duration) / duration);
     const res = await this.flush();
+    if (this.needResetStartTime()) {
+      // The WeChat Mini Program decoder takes a long time to start decoding,
+      // Decoding BMP takes too much time and makes the video reader seek repeatedly.
+      this.startTime = this.getNowTime() * 1000 - this.playTime;
+    }
     this.playFrame = playFrame;
     this.repeatedTimes = count;
     return res;

package/src/wechat/video-reader.ts

@@ -3,6 +3,9 @@ import { removeFile, touchDirectory, writeFile } from './file-utils';
 import { ArrayBufferImage, FrameData } from '@tgfx/wechat/array-buffer-image';
 
 import type { FrameDataOptions, VideoDecoder, wx } from './interfaces';
+import {PAGModule} from "../pag-module";
+import type {PAGPlayer} from "../pag-player";
+import {destroyVerify} from "../utils/decorators";
 
 declare const wx: wx;
 declare const setInterval: (callback: () => void, delay: number) => number;
@@ -27,19 +30,22 @@ export interface TimeRange {
   end: number;
 }
 
+@destroyVerify
 export class VideoReader {
   public static async create(
-    mp4Data: Uint8Array,
-    width: number,
-    height: number,
-    frameRate: number,
-    staticTimeRanges: TimeRange[],
+      mp4Data: Uint8Array,
+      width: number,
+      height: number,
+      frameRate: number,
+      staticTimeRanges: TimeRange[],
   ): Promise<VideoReader> {
     return new VideoReader(mp4Data, width, height, frameRate, staticTimeRanges);
   }
 
   public isSought = false; // Web SDK use this property to check if video is seeked
   public isPlaying = false; // Web SDK use this property to check if video is playing
+  public isDestroyed = false;
+  private player: PAGPlayer | null = null;
 
   private readonly frameRate: number;
   private currentFrame: number;
@@ -55,11 +61,11 @@ export class VideoReader {
   private arrayBufferImage = new ArrayBufferImage(new ArrayBuffer(0), 0, 0);
 
   public constructor(
-    mp4Data: Uint8Array,
-    width: number,
-    height: number,
-    frameRate: number,
-    staticTimeRanges: TimeRange[],
+      mp4Data: Uint8Array,
+      width: number,
+      height: number,
+      frameRate: number,
+      staticTimeRanges: TimeRange[],
   ) {
     this.frameRate = frameRate;
     this.currentFrame = -1;
@@ -75,10 +81,12 @@ export class VideoReader {
     this.videoDecoderPromise = this.videoDecoder.start({ source: this.mp4Path, mode: 1 }).then(() => {
       this.startGetFrameDataLoop();
     });
+    this.linkPlayer(PAGModule.currentPlayer);
   }
 
   public async prepare(targetFrame: number) {
     if (targetFrame === this.currentFrame) return;
+    this.isSought = false;
     // Wait for videoDecoder ready
     await this.videoDecoderPromise;
     if (this.frameDataBuffers.length > 0) {
@@ -94,6 +102,8 @@ export class VideoReader {
 
     if (targetFrame !== this.bufferIndex) {
       this.seeking = true;
+      this.isSought = true;
+      this.bufferIndex = targetFrame;
       await this.videoDecoder.seek(Math.floor((targetFrame / this.frameRate) * 1000));
       this.seeking = false;
     }
@@ -106,6 +116,10 @@ export class VideoReader {
     return this.arrayBufferImage;
   }
 
+  public getCurrentFrame(): number {
+    return this.currentFrame;
+  }
+
   public async play() {
     // Web SDK use this function to play video.
   }
@@ -124,11 +138,16 @@ export class VideoReader {
   }
 
   public onDestroy() {
+    if (this.player) {
+      this.player.unlinkVideoReader(this);
+      this.player = null;
+    }
     this.clearFrameDataLoop();
     this.videoDecoder.remove();
     if (this.mp4Path) {
       removeFile(this.mp4Path);
     }
+    this.isDestroyed = true;
   }
 
   private getFrameData() {
@@ -186,4 +205,11 @@ export class VideoReader {
     }
     this.getFrameDataLooping = false;
   }
-}
+
+  private linkPlayer(player: PAGPlayer | null) {
+    this.player = player;
+    if (player) {
+      player.linkVideoReader(this);
+    }
+  }
+}

package/types/web/src/constant.d.ts

@@ -1,7 +1,7 @@
 /**
  * VideoDecode wait frame num.
  */
-export declare const VIDEO_DECODE_WAIT_FRAME = 3;
+export declare const VIDEO_DECODE_WAIT_FRAME = 1;
 /**
  * VideoDecode seek timeout frame num.
  */

package/types/web/src/core/video-reader.d.ts

@@ -1,9 +1,10 @@
 import type { TimeRange, VideoReader as VideoReaderInterfaces } from '../interfaces';
 export declare class VideoReader {
-    static create(source: Uint8Array | HTMLVideoElement, width: number, height: number, frameRate: number, staticTimeRanges: TimeRange[]): VideoReaderInterfaces;
+    static create(source: Uint8Array | HTMLVideoElement, width: number, height: number, frameRate: number, staticTimeRanges: TimeRange[]): Promise<VideoReaderInterfaces>;
     isSought: boolean;
     isPlaying: boolean;
     bitmap: ImageBitmap | null;
+    isDestroyed: boolean;
     private videoEl;
     private frameRate;
     private canplay;
@@ -16,6 +17,7 @@ export declare class VideoReader {
     private bitmapCanvas;
     private bitmapCtx;
     private currentFrame;
+    private targetFrame;
     constructor(source: Uint8Array | HTMLVideoElement, width: number, height: number, frameRate: number, staticTimeRanges: TimeRange[]);
     prepare(targetFrame: number, playbackRate: number): Promise<void>;
     getCurrentFrame(): number;

package/types/web/src/interfaces.d.ts

@@ -13,7 +13,13 @@ export interface VideoReader {
     pause: () => void;
     stop: () => void;
 }
-export type VideoDecoderConstructor = new (mp4Data: Uint8Array, width: number, height: number, frameRate: number, staticTimeRanges: TimeRange[]) => VideoReader;
+export interface VideoReaderManager {
+    getVideoReaderByID: (id: number) => VideoReader | undefined;
+    destroy: () => void;
+}
+export interface VideoDecoderConstructor {
+    create: (mp4Data: Uint8Array, width: number, height: number, frameRate: number, staticTimeRanges: TimeRange[]) => Promise<VideoReader>;
+}
 export interface FontMetrics {
     ascent: number;
     descent: number;

package/types/web/src/pag-player.d.ts

@@ -2,13 +2,16 @@ import { PAGSurface } from './pag-surface';
 import { Matrix } from './core/matrix';
 import { PAGComposition } from './pag-composition';
 import type { PAGLayer } from './pag-layer';
-import { PAGScaleMode, Rect, VecArray } from './types';
+import { type PAGScaleMode, type Rect, VecArray } from './types';
 import type { VideoReader } from './interfaces';
+import { VideoReaderManager } from "./video-reader-manager";
 export declare class PAGPlayer {
     static create(): PAGPlayer;
     wasmIns: any;
     isDestroyed: boolean;
     videoReaders: VideoReader[];
+    protected pagComposition: PAGComposition | null;
+    protected videoReaderManager: VideoReaderManager | null;
     constructor(wasmIns: any);
     /**
      * Set the progress of play position, the value is from 0.0 to 1.0.
@@ -182,4 +185,12 @@ export declare class PAGPlayer {
      * Unlink VideoReader from PAGPlayer.
      */
     unlinkVideoReader(videoReader: VideoReader): void;
+    /**
+     * Prepares the video frame for the current composition before rendering.
+     */
+    private prepareVideoFrame;
+    /**
+     * Destroys the video reader manager and releases all associated resources.
+     */
+    destroyVideoReaderManager(): void;
 }

package/types/web/src/pag-view.d.ts

@@ -207,6 +207,6 @@ export declare class PAGView {
     protected setTimer(): void;
     protected clearTimer(): void;
     protected resetSize(useScale?: boolean): void;
+    protected needResetStartTime(): boolean;
     private updateFPS;
-    private needResetStartTime;
 }

package/types/web/src/types.d.ts

@@ -15,6 +15,7 @@ import { PAGImageLayer } from './pag-image-layer';
 import { PAGSolidLayer } from './pag-solid-layer';
 import { Matrix as ClassMatrix } from './core/matrix';
 import { RenderCanvas } from './core/render-canvas';
+import { VideoReaderManager } from "./interfaces";
 import type { ScalerContextConstructor, VideoDecoderConstructor } from './interfaces';
 import type { ArrayBufferImage } from '../../third_party/tgfx/web/src/wechat/array-buffer-image';
 import type { TGFXPathFillType, TGFXLineCap, TGFXLineJoin, EmscriptenGL, ctor, Point, Vector, Rect } from '../../third_party/tgfx/web/src/types';
@@ -94,6 +95,12 @@ export interface PAG extends EmscriptenModule {
     registerSoftwareDecoderFactory: (factory: SoftwareDecoderFactory | null) => void;
     SDKVersion: () => string;
     currentPlayer: PAGPlayer | null;
+    videoReaderManager: VideoReaderManager | null;
+    _videoInfoManager: {
+        _Make: (pagFile: any) => any;
+        _HasVideo: (pagFile: any) => any;
+    };
+    _useSoftwareDecoder: boolean;
     [key: string]: any;
 }
 /**

package/types/web/src/video-reader-manager.d.ts

@@ -0,0 +1,60 @@
+import type { VideoReader } from "./interfaces";
+/**
+ * VideoReaderManager is responsible for managing multiple VideoReader instances.
+ * It handles video decoder initialization, frame preparation, and lifecycle management.
+ */
+export declare class VideoReaderManager {
+    /**
+     * Checks whether the given PAG composition contains any video content.
+     * @param wasmIns - The WebAssembly instance to check
+     * @returns True if the composition contains video, false otherwise
+     */
+    static HasVideo(wasmIns: any): boolean;
+    /**
+     * Factory method to create and initialize a VideoReaderManager instance.
+     * @param wasmIns - The WebAssembly instance containing video information
+     * @returns A promise that resolves to a fully initialized VideoReaderManager instance
+     */
+    static make(wasmIns: any): Promise<VideoReaderManager>;
+    /** WebAssembly instance for video information management */
+    wasmIns: any;
+    /** Array of video IDs managed by this instance */
+    videoIDs: Array<number>;
+    /** Flag indicating whether this instance has been destroyed */
+    isDestroyed: boolean;
+    /** Map storing VideoReader instances indexed by video ID */
+    private videoReaderMap;
+    /**
+     * Constructor for VideoReaderManager.
+     * Initializes the WASM instance and retrieves all video IDs.
+     * @param wasmIns - The WebAssembly instance
+     * @throws Error if VideoReaderManager creation fails
+     */
+    constructor(wasmIns: any);
+    /**
+     * Creates VideoReader instances for all videos in the PAG file.
+     * For each video ID, retrieves MP4 data and initializes the corresponding VideoReader.
+     * Also prepares the first frame with the initial playback rate.
+     */
+    createVideoReader(): Promise<void>;
+    /**
+     * Retrieves a VideoReader instance by video ID.
+     * Marks the video as using hardware decoding (software decode disabled).
+     * @param id - The video ID
+     * @returns The VideoReader instance or undefined if not found
+     * @throws Error if VideoReader is not found for the given ID
+     */
+    getVideoReaderByID(id: number): VideoReader | undefined;
+    /**
+     * Prepares target frames for all videos based on current playback position.
+     * This method is called during rendering to ensure the correct frames are decoded.
+     * It handles both hardware and software decoding modes.
+     */
+    prepareTargetFrame(): Promise<void>;
+    /**
+     * Destroys the VideoReaderManager instance and cleans up all resources.
+     * This includes destroying the WASM instance, all VideoReader instances,
+     * and clearing internal maps.
+     */
+    destroy(): void;
+}