jassub 2.0.16 → 2.0.18

package/dist/debug.d.ts

@@ -0,0 +1,25 @@
+export interface SubtitleCallbackMetadata {
+    fps: number;
+    processingDuration: number;
+    droppedFrames: number;
+    presentedFrames: number;
+    mistimedFrames: number;
+    presentationTime: DOMHighResTimeStamp;
+    expectedDisplayTime: DOMHighResTimeStamp;
+    width: number;
+    height: number;
+    mediaTime: number;
+    frameDelay: DOMHighResTimeStamp;
+}
+export declare class Debug {
+    fps: (delta: any) => number;
+    processingDuration: (delta: any) => number;
+    droppedFrames: number;
+    presentedFrames: number;
+    mistimedFrames: number;
+    _drop(): void;
+    _startTime: number;
+    _startFrame(): void;
+    onsubtitleFrameCallback?: (now: DOMHighResTimeStamp, metadata: SubtitleCallbackMetadata) => void;
+    _endFrame(meta: VideoFrameCallbackMetadata): void;
+}

package/dist/debug.js

@@ -0,0 +1,41 @@
+import throughput from 'throughput';
+export class Debug {
+    // 5 second average
+    fps = throughput(5);
+    processingDuration = throughput(5);
+    droppedFrames = 0;
+    presentedFrames = 0;
+    mistimedFrames = 0;
+    _drop() {
+        ++this.droppedFrames;
+    }
+    _startTime = 0;
+    _startFrame() {
+        this._startTime = performance.now();
+    }
+    onsubtitleFrameCallback = console.log;
+    _endFrame(meta) {
+        ++this.presentedFrames;
+        const fps = this.fps(1);
+        const now = performance.now();
+        const processingDuration = this.processingDuration((now - this._startTime) / fps);
+        const frameDelay = Math.max(0, meta.expectedDisplayTime - now);
+        if (frameDelay)
+            ++this.mistimedFrames;
+        this.onsubtitleFrameCallback?.(now, {
+            fps,
+            processingDuration,
+            droppedFrames: this.droppedFrames,
+            presentedFrames: this.presentedFrames,
+            mistimedFrames: this.mistimedFrames,
+            presentationTime: now,
+            expectedDisplayTime: meta.expectedDisplayTime + (frameDelay > 0 ? fps / 1000 : 0),
+            frameDelay,
+            width: meta.width,
+            height: meta.height,
+            mediaTime: meta.mediaTime
+        });
+        console.info('%cFPS: %c%f %c| Frame Time: %c%d ms %c| Dropped Frames: %c%d %c| 5s Avg', 'color: #888', 'color: #0f0; font-weight: bold', fps.toFixed(1), 'color: #888', 'color: #0ff; font-weight: bold', processingDuration, 'color: #888', 'color: #f00; font-weight: bold', this.droppedFrames, 'color: #888');
+    }
+}
+//# sourceMappingURL=debug.js.map

package/dist/debug.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"debug.js","sourceRoot":"","sources":["../src/debug.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AAgBnC,MAAM,OAAO,KAAK;IAChB,mBAAmB;IACnB,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,CAAA;IACnB,kBAAkB,GAAG,UAAU,CAAC,CAAC,CAAC,CAAA;IAClC,aAAa,GAAG,CAAC,CAAA;IACjB,eAAe,GAAG,CAAC,CAAA;IACnB,cAAc,GAAG,CAAC,CAAA;IAElB,KAAK;QACH,EAAE,IAAI,CAAC,aAAa,CAAA;IACtB,CAAC;IAED,UAAU,GAAG,CAAC,CAAA;IACd,WAAW;QACT,IAAI,CAAC,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE,CAAA;IACrC,CAAC;IAED,uBAAuB,GAA4E,OAAO,CAAC,GAAG,CAAA;IAE9G,SAAS,CAAE,IAAgC;QACzC,EAAE,IAAI,CAAC,eAAe,CAAA;QACtB,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;QACvB,MAAM,GAAG,GAAG,WAAW,CAAC,GAAG,EAAE,CAAA;QAC7B,MAAM,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,GAAG,CAAC,CAAA;QACjF,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,mBAAmB,GAAG,GAAG,CAAC,CAAA;QAC9D,IAAI,UAAU;YAAE,EAAE,IAAI,CAAC,cAAc,CAAA;QAErC,IAAI,CAAC,uBAAuB,EAAE,CAAC,GAAG,EAAE;YAClC,GAAG;YACH,kBAAkB;YAClB,aAAa,EAAE,IAAI,CAAC,aAAa;YACjC,eAAe,EAAE,IAAI,CAAC,eAAe;YACrC,cAAc,EAAE,IAAI,CAAC,cAAc;YACnC,gBAAgB,EAAE,GAAG;YACrB,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,GAAG,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;YACjF,UAAU;YACV,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,SAAS,EAAE,IAAI,CAAC,SAAS;SAC1B,CAAC,CAAA;QAEF,OAAO,CAAC,IAAI,CACV,yEAAyE,EACzE,aAAa,EACb,gCAAgC,EAChC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EACd,aAAa,EACb,gCAAgC,EAChC,kBAAkB,EAClB,aAAa,EACb,gCAAgC,EAChC,IAAI,CAAC,aAAa,EAClB,aAAa,CACd,CAAA;IACH,CAAC;CACF"}

package/dist/wasm/types.d.ts

@@ -0,0 +1,138 @@
+// TypeScript bindings for emscripten-generated code.  Automatically generated at compile time.
+declare namespace RuntimeExports {
+    function getTempRet0(val: any): any;
+    function setTempRet0(val: any): any;
+}
+interface WasmModule {
+  __ZdlPvm(_0: number, _1: number): void;
+  _malloc(_0: number): number;
+  _calloc(_0: number, _1: number): number;
+  _emscripten_builtin_free(_0: number): void;
+  ___libc_free(_0: number): void;
+  _emscripten_builtin_malloc(_0: number): number;
+  ___libc_malloc(_0: number): number;
+  __ZdaPv(_0: number): void;
+  __ZdaPvm(_0: number, _1: number): void;
+  __ZdlPv(_0: number): void;
+  __Znaj(_0: number): number;
+  __ZnajSt11align_val_t(_0: number, _1: number): number;
+  __Znwj(_0: number): number;
+  __ZnwjSt11align_val_t(_0: number, _1: number): number;
+  ___libc_calloc(_0: number, _1: number): number;
+  ___libc_realloc(_0: number, _1: number): number;
+  _emscripten_builtin_calloc(_0: number, _1: number): number;
+  _emscripten_builtin_realloc(_0: number, _1: number): number;
+  _malloc_size(_0: number): number;
+  _malloc_usable_size(_0: number): number;
+  _reallocf(_0: number, _1: number): number;
+}
+
+type EmbindString = ArrayBuffer|Uint8Array|Uint8ClampedArray|Int8Array|string;
+export interface ClassHandle {
+  isAliasOf(other: ClassHandle): boolean;
+  delete(): void;
+  deleteLater(): this;
+  isDeleted(): boolean;
+  // @ts-ignore - If targeting lower than ESNext, this symbol might not exist.
+  [Symbol.dispose](): void;
+  clone(): this;
+}
+export interface ASS_Image extends ClassHandle {
+  readonly next: ASS_Image;
+  w: number;
+  h: number;
+  dst_x: number;
+  dst_y: number;
+  stride: number;
+  color: number;
+  readonly bitmap: number;
+}
+
+export interface ASS_Style extends ClassHandle {
+  Bold: number;
+  Italic: number;
+  Underline: number;
+  StrikeOut: number;
+  BorderStyle: number;
+  Alignment: number;
+  MarginL: number;
+  MarginR: number;
+  MarginV: number;
+  Encoding: number;
+  treat_fontname_as_pattern: number;
+  Justify: number;
+  PrimaryColour: number;
+  SecondaryColour: number;
+  OutlineColour: number;
+  BackColour: number;
+  FontSize: number;
+  ScaleX: number;
+  ScaleY: number;
+  Spacing: number;
+  Angle: number;
+  Outline: number;
+  Shadow: number;
+  Blur: number;
+  get Name(): string;
+  set Name(value: EmbindString);
+  get FontName(): string;
+  set FontName(value: EmbindString);
+}
+
+export interface ASS_Event extends ClassHandle {
+  ReadOrder: number;
+  Layer: number;
+  Style: number;
+  MarginL: number;
+  MarginR: number;
+  MarginV: number;
+  Start: number;
+  Duration: number;
+  get Name(): string;
+  set Name(value: EmbindString);
+  get Effect(): string;
+  set Effect(value: EmbindString);
+  get Text(): string;
+  set Text(value: EmbindString);
+}
+
+export interface JASSUB extends ClassHandle {
+  trackColorSpace: number;
+  changed: number;
+  count: number;
+  removeTrack(): void;
+  quitLibrary(): void;
+  reloadFonts(): void;
+  removeAllEvents(): void;
+  styleOverride(_0: ASS_Style): void;
+  disableStyleOverride(): void;
+  setLogLevel(_0: number): void;
+  resizeCanvas(_0: number, _1: number, _2: number, _3: number): void;
+  setMargin(_0: number, _1: number, _2: number, _3: number): void;
+  getEventCount(): number;
+  allocEvent(): number;
+  allocStyle(): number;
+  removeEvent(_0: number): void;
+  getStyleCount(): number;
+  removeStyle(_0: number): void;
+  setMemoryLimits(_0: number, _1: number): void;
+  getEvent(_0: number): ASS_Event | null;
+  getStyle(_0: number): ASS_Style | null;
+  setThreads(_0: number): number;
+  rawRender(_0: number, _1: number): ASS_Image | null;
+  createTrackMem(_0: EmbindString): void;
+  addFont(_0: EmbindString, _1: number, _2: number): void;
+  setDefaultFont(_0: EmbindString): void;
+}
+
+interface EmbindModule {
+  ASS_Image: {};
+  ASS_Style: {};
+  ASS_Event: {};
+  JASSUB: {
+    new(_0: number, _1: number, _2: EmbindString): JASSUB;
+  };
+}
+
+export type MainModule = WasmModule & typeof RuntimeExports & EmbindModule;
+export default function MainModuleFactory (options?: unknown): Promise<MainModule>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jassub",
-  "version": "2.0.16",
+  "version": "2.0.18",
   "description": "libass subtitle renderer for modern browsers",
   "main": "dist/jassub.js",
   "type": "module",
@@ -8,6 +8,7 @@
     "dist/wasm/*",
     "dist/worker/*",
     "dist/jassub.*",
+    "dist/debug.*",
     "!dist/wasm/jassub-worker-modern.js",
     "README.md",
     "LICENSE",

package/dist/jassub.js

@@ -1,286 +0,0 @@
-/* eslint-disable camelcase */
-import 'rvfc-polyfill';
-import { proxy, releaseProxy } from 'abslink';
-import { wrap } from 'abslink/w3c';
-import { Debug } from "./debug.js";
-const webYCbCrMap = {
-    rgb: 'RGB',
-    bt709: 'BT709',
-    // these might not be exactly correct? oops?
-    bt470bg: 'BT601', // alias BT.601 PAL... whats the difference?
-    smpte170m: 'BT601' // alias BT.601 NTSC... whats the difference?
-};
-export default class JASSUB {
-    timeOffset;
-    prescaleFactor;
-    prescaleHeightLimit;
-    maxRenderHeight;
-    debug;
-    renderer;
-    ready;
-    busy = false;
-    _video;
-    _videoWidth = 0;
-    _videoHeight = 0;
-    _videoColorSpace = null;
-    _canvas;
-    _canvasParent;
-    _ctrl = new AbortController();
-    _ro = new ResizeObserver(() => this.resize());
-    _destroyed = false;
-    _lastDemandTime;
-    _skipped = false;
-    _worker;
-    constructor(opts) {
-        if (!globalThis.Worker)
-            throw new Error('Worker not supported');
-        if (!opts)
-            throw new Error('No options provided');
-        if (!opts.video && !opts.canvas)
-            throw new Error('You should give video or canvas in options.');
-        JASSUB._test();
-        this.timeOffset = opts.timeOffset ?? 0;
-        this._video = opts.video;
-        this._canvas = opts.canvas ?? document.createElement('canvas');
-        if (this._video && !opts.canvas) {
-            this._canvasParent = document.createElement('div');
-            this._canvasParent.className = 'JASSUB';
-            this._canvasParent.style.position = 'relative';
-            this._canvas.style.display = 'block';
-            this._canvas.style.position = 'absolute';
-            this._canvas.style.pointerEvents = 'none';
-            this._canvasParent.appendChild(this._canvas);
-            this._video.insertAdjacentElement('afterend', this._canvasParent);
-        }
-        const ctrl = this._canvas.transferControlToOffscreen();
-        this.debug = opts.debug ? new Debug() : null;
-        this.prescaleFactor = opts.prescaleFactor ?? 1.0;
-        this.prescaleHeightLimit = opts.prescaleHeightLimit ?? 1080;
-        this.maxRenderHeight = opts.maxRenderHeight ?? 0; // 0 - no limit.
-        // yes this is awful, but bundlers check for new Worker(new URL()) patterns, so can't use new Worker(workerUrl ?? new URL(...)) ... bruh
-        this._worker = opts.workerUrl
-            ? new Worker(opts.workerUrl, { name: 'jassub-worker', type: 'module' })
-            : new Worker(new URL('./worker/worker.js', import.meta.url), { name: 'jassub-worker', type: 'module' });
-        const Renderer = wrap(this._worker);
-        const modern = opts.modernWasmUrl ?? new URL('./wasm/jassub-worker-modern.wasm', import.meta.url).href;
-        const fallback = opts.wasmUrl ?? new URL('./wasm/jassub-worker.wasm', import.meta.url).href;
-        this.ready = (async () => {
-            this.renderer = await new Renderer({
-                wasmUrl: JASSUB._supportsSIMD ? modern : fallback,
-                width: ctrl.width,
-                height: ctrl.height,
-                subUrl: opts.subUrl,
-                subContent: opts.subContent ?? null,
-                fonts: opts.fonts ?? [],
-                availableFonts: opts.availableFonts ?? { 'liberation sans': './default.woff2' },
-                fallbackFont: opts.fallbackFont ?? 'liberation sans',
-                debug: !!opts.debug,
-                libassMemoryLimit: opts.libassMemoryLimit ?? 0,
-                libassGlyphLimit: opts.libassGlyphLimit ?? 0,
-                // @ts-expect-error TS doesn't know about queryLocalFonts
-                useLocalFonts: typeof queryLocalFonts !== 'undefined' && (opts.useLocalFonts ?? true)
-            }, proxy(font => this._getLocalFont(font)));
-            await this.renderer.ready();
-        })();
-        if (this._video)
-            this.setVideo(this._video);
-        this._worker.postMessage({ name: 'offscreenCanvas', ctrl }, [ctrl]);
-    }
-    static _supportsSIMD;
-    static _test() {
-        if (JASSUB._supportsSIMD != null)
-            return;
-        try {
-            JASSUB._supportsSIMD = WebAssembly.validate(Uint8Array.of(0, 97, 115, 109, 1, 0, 0, 0, 1, 5, 1, 96, 0, 1, 123, 3, 2, 1, 0, 10, 10, 1, 8, 0, 65, 0, 253, 15, 253, 98, 11));
-        }
-        catch (e) {
-            JASSUB._supportsSIMD = false;
-        }
-        const module = new WebAssembly.Module(Uint8Array.of(0x0, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00));
-        if (!(module instanceof WebAssembly.Module) || !(new WebAssembly.Instance(module) instanceof WebAssembly.Instance))
-            throw new Error('WASM not supported');
-    }
-    async resize(force = !!this._video?.paused, width = 0, height = 0, top = 0, left = 0) {
-        await this.ready;
-        if ((!width || !height) && this._video) {
-            const videoSize = this._getVideoPosition();
-            let renderSize = null;
-            // support anamorphic video
-            if (this._videoWidth) {
-                const widthRatio = this._video.videoWidth / this._videoWidth;
-                const heightRatio = this._video.videoHeight / this._videoHeight;
-                renderSize = this._computeCanvasSize((videoSize.width || 0) / widthRatio, (videoSize.height || 0) / heightRatio);
-            }
-            else {
-                renderSize = this._computeCanvasSize(videoSize.width || 0, videoSize.height || 0);
-            }
-            width = renderSize.width;
-            height = renderSize.height;
-            if (this._canvasParent) {
-                top = videoSize.y - (this._canvasParent.getBoundingClientRect().top - this._video.getBoundingClientRect().top);
-                left = videoSize.x;
-            }
-            this._canvas.style.width = videoSize.width + 'px';
-            this._canvas.style.height = videoSize.height + 'px';
-        }
-        this._canvas.style.top = top + 'px';
-        this._canvas.style.left = left + 'px';
-        await this.renderer._canvas(width, height, (this._videoWidth || this._video?.videoWidth) ?? width, (this._videoHeight || this._video?.videoHeight) ?? height);
-        if (force && this._lastDemandTime)
-            this._demandRender();
-    }
-    _getVideoPosition(width = this._video.videoWidth, height = this._video.videoHeight) {
-        const videoRatio = width / height;
-        const { offsetWidth, offsetHeight } = this._video;
-        const elementRatio = offsetWidth / offsetHeight;
-        width = offsetWidth;
-        height = offsetHeight;
-        if (elementRatio > videoRatio) {
-            width = Math.floor(offsetHeight * videoRatio);
-        }
-        else {
-            height = Math.floor(offsetWidth / videoRatio);
-        }
-        const x = (offsetWidth - width) / 2;
-        const y = (offsetHeight - height) / 2;
-        return { width, height, x, y };
-    }
-    _computeCanvasSize(width = 0, height = 0) {
-        const scalefactor = this.prescaleFactor <= 0 ? 1.0 : this.prescaleFactor;
-        const ratio = self.devicePixelRatio || 1;
-        if (height <= 0 || width <= 0) {
-            width = 0;
-            height = 0;
-        }
-        else {
-            const sgn = scalefactor < 1 ? -1 : 1;
-            let newH = height * ratio;
-            if (sgn * newH * scalefactor <= sgn * this.prescaleHeightLimit) {
-                newH *= scalefactor;
-            }
-            else if (sgn * newH < sgn * this.prescaleHeightLimit) {
-                newH = this.prescaleHeightLimit;
-            }
-            if (this.maxRenderHeight > 0 && newH > this.maxRenderHeight)
-                newH = this.maxRenderHeight;
-            width *= newH / height;
-            height = newH;
-        }
-        return { width, height };
-    }
-    async setVideo(video) {
-        await this.ready;
-        if (video instanceof HTMLVideoElement) {
-            this._removeListeners();
-            this._video = video;
-            this._video.requestVideoFrameCallback((now, data) => this._handleRVFC(data));
-            // everything else is unreliable for this, loadedmetadata and loadeddata included.
-            if ('VideoFrame' in globalThis) {
-                video.addEventListener('loadedmetadata', () => this._updateColorSpace(), this._ctrl);
-                if (video.readyState > 2)
-                    this._updateColorSpace();
-            }
-            if (video.videoWidth > 0)
-                this.resize();
-            this._ro.observe(video);
-        }
-        else {
-            throw new Error('Video element invalid!');
-        }
-    }
-    async _sendLocalFont(name) {
-        try {
-            // @ts-expect-error ts doesnt know
-            const fontData = await queryLocalFonts();
-            // @ts-expect-error ts doesnt know
-            const font = fontData?.find(obj => obj.fullName.toLowerCase() === name);
-            if (font) {
-                const blob = await font.blob();
-                this.renderer.addFont(new Uint8Array(await blob.arrayBuffer()));
-            }
-        }
-        catch (e) {
-            console.warn('Local fonts API:', e);
-        }
-    }
-    async _getLocalFont(font) {
-        try {
-            // electron by default has all permissions enabled, and it doesn't have perm query
-            // if this happens, just send it
-            if (navigator?.permissions?.query) {
-                // @ts-expect-error TS doesn't know about local-fonts
-                const permission = await navigator.permissions.query({ name: 'local-fonts' });
-                if (permission.state === 'granted') {
-                    await this._sendLocalFont(font);
-                }
-            }
-            else {
-                await this._sendLocalFont(font);
-            }
-        }
-        catch (e) {
-            console.warn('Local fonts API:', e);
-        }
-    }
-    _handleRVFC(data) {
-        if (this._destroyed)
-            return;
-        this._lastDemandTime = data;
-        this._demandRender();
-        this._video.requestVideoFrameCallback((now, data) => this._handleRVFC(data));
-    }
-    async _demandRender() {
-        const { mediaTime, width, height } = this._lastDemandTime;
-        if (width !== this._videoWidth || height !== this._videoHeight) {
-            this._videoWidth = width;
-            this._videoHeight = height;
-            this.resize(false);
-        }
-        if (this.busy) {
-            this._skipped = true;
-            this.debug?._drop();
-            return;
-        }
-        this.busy = true;
-        this._skipped = false;
-        this.debug?._startFrame();
-        await this.renderer._draw(mediaTime + this.timeOffset);
-        this.debug?._endFrame(this._lastDemandTime);
-        this.busy = false;
-        if (this._skipped)
-            this._demandRender();
-    }
-    async _updateColorSpace() {
-        await this.ready;
-        this._video.requestVideoFrameCallback(async () => {
-            try {
-                const frame = new VideoFrame(this._video);
-                frame.close();
-                await this.renderer._setColorSpace(webYCbCrMap[frame.colorSpace.matrix]);
-            }
-            catch (e) {
-                // sources can be tainted
-                console.warn(e);
-            }
-        });
-    }
-    _removeListeners() {
-        if (this._video) {
-            if (this._ro)
-                this._ro.unobserve(this._video);
-            this._ctrl.abort();
-            this._ctrl = new AbortController();
-        }
-    }
-    async destroy() {
-        if (this._destroyed)
-            return;
-        this._destroyed = true;
-        if (this._video && this._canvasParent)
-            this._video.parentNode?.removeChild(this._canvasParent);
-        this._removeListeners();
-        await this.renderer[releaseProxy]();
-        this._worker.terminate();
-    }
-}
-//# sourceMappingURL=jassub.js.map