@eva/plugin-renderer-video 2.1.0-beta.2 → 2.1.0-beta.3

package/dist/plugin-renderer-video.esm.js

@@ -1,490 +0,0 @@
-import { Component, decorators, resource, OBSERVER_TYPE } from '@eva/eva.js';
-import { type } from '@eva/inspector-decorator';
-import { Renderer, RendererSystem } from '@eva/plugin-renderer';
-import { Texture, Sprite } from 'pixi.js';
-
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __decorate(decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
-
-function __metadata(metadataKey, metadataValue) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
-}
-
-function __awaiter(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) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
-/**
- * Phaser 风格的 Video 渲染组件(Eva.js MVP 实现)。
- *
- * 行为:
- * 1. ADD 时 VideoSystem 会创建一个 detached 的 `<video>` DOM 元素 + PixiJS Texture + Sprite,
- *    Sprite 加入到 GameObject 的 PixiJS Container;
- * 2. video 的源 (`<video>.src`) 由 `src` 决定:
- *    - 若注册过同名 VIDEO/IMAGE 资源(且 instance.src 可用),取注册的 url;
- *    - 否则直接当作 URL 使用。
- * 3. 视频进入 `loadeddata` 后即可绘制;
- * 4. CHANGE prop 时按属性增量更新(loop/muted/volume/playbackRate/src);
- * 5. REMOVE/destroy 时停止播放、销毁 video/texture/sprite。
- *
- * 不支持(明确 SKIP):
- * - HLS/DASH/MSE 高级流;
- * - getUserMedia / 透明视频(alpha video / chroma key);
- * - 作为 shader 纹理(Eva.js 无 GLSL 注入);
- * - Phaser saveTexture 把视频转 sprite atlas 的工作流。
- */
-class Video extends Component {
-    constructor() {
-        super(...arguments);
-        this.src = '';
-        this.loop = false;
-        this.autoplay = true;
-        this.muted = true;
-        this.volume = 1;
-        this.playbackRate = 1;
-        this.anchorX = 0.5;
-        this.anchorY = 0.5;
-        this.crossOrigin = 'anonymous';
-        this.playsInline = true;
-        /** Runtime 标记:System 设置,表示视频已经触发过 `ended`。 */
-        this.completed = false;
-    }
-    init(obj) {
-        if (obj)
-            Object.assign(this, obj);
-    }
-    /** 立即播放(若 video 已就绪)。 */
-    play() {
-        if (!this.videoElement)
-            return;
-        try {
-            const ret = this.videoElement.play();
-            if (ret && typeof ret.catch === 'function') {
-                return ret.catch((e) => {
-                    // eslint-disable-next-line no-console
-                    console.warn('[Video] play() rejected:', e);
-                });
-            }
-        }
-        catch (e) {
-            // eslint-disable-next-line no-console
-            console.warn('[Video] play() threw:', e);
-        }
-    }
-    /** 暂停。 */
-    pause() {
-        if (!this.videoElement)
-            return;
-        try {
-            this.videoElement.pause();
-        }
-        catch (_a) {
-            /* ignore */
-        }
-    }
-    /** 跳转到指定时间(秒)。 */
-    setCurrentTime(seconds) {
-        if (!this.videoElement)
-            return;
-        try {
-            this.videoElement.currentTime = Math.max(0, seconds);
-        }
-        catch (_a) {
-            /* ignore */
-        }
-    }
-    /** 把当前帧画到一个独立 canvas 上并返回,用于 snapshot(失败时返回 null)。 */
-    snapshot(area) {
-        var _a, _b, _c, _d;
-        const v = this.videoElement;
-        if (!v || v.readyState < 2)
-            return null;
-        const w = (_a = area === null || area === void 0 ? void 0 : area.width) !== null && _a !== void 0 ? _a : v.videoWidth;
-        const h = (_b = area === null || area === void 0 ? void 0 : area.height) !== null && _b !== void 0 ? _b : v.videoHeight;
-        if (w <= 0 || h <= 0)
-            return null;
-        try {
-            const canvas = document.createElement('canvas');
-            canvas.width = w;
-            canvas.height = h;
-            const ctx = canvas.getContext('2d');
-            if (!ctx)
-                return null;
-            ctx.drawImage(v, (_c = area === null || area === void 0 ? void 0 : area.x) !== null && _c !== void 0 ? _c : 0, (_d = area === null || area === void 0 ? void 0 : area.y) !== null && _d !== void 0 ? _d : 0, w, h, 0, 0, w, h);
-            return canvas;
-        }
-        catch (_e) {
-            return null;
-        }
-    }
-}
-Video.componentName = 'Video';
-__decorate([
-    type('string'),
-    __metadata("design:type", String)
-], Video.prototype, "src", void 0);
-__decorate([
-    type('boolean'),
-    __metadata("design:type", Boolean)
-], Video.prototype, "loop", void 0);
-__decorate([
-    type('boolean'),
-    __metadata("design:type", Boolean)
-], Video.prototype, "autoplay", void 0);
-__decorate([
-    type('boolean'),
-    __metadata("design:type", Boolean)
-], Video.prototype, "muted", void 0);
-__decorate([
-    type('number'),
-    __metadata("design:type", Number)
-], Video.prototype, "volume", void 0);
-__decorate([
-    type('number'),
-    __metadata("design:type", Number)
-], Video.prototype, "playbackRate", void 0);
-__decorate([
-    type('number'),
-    __metadata("design:type", Number)
-], Video.prototype, "anchorX", void 0);
-__decorate([
-    type('number'),
-    __metadata("design:type", Number)
-], Video.prototype, "anchorY", void 0);
-__decorate([
-    type('boolean'),
-    __metadata("design:type", Boolean)
-], Video.prototype, "playsInline", void 0);
-
-/**
- * 把 `src` 解析为可播放 URL。
- * 1. 如果 `src` 是完整 URL(以 http(s):// 或 / 开头,或包含 .mp4/.webm/.ogv 后缀),直接使用。
- * 2. 否则尝试从 resource manager 拿对应资源 base 元数据,优先取 `src.video.url` 或 `src.url`。
- */
-function resolveSrc(src) {
-    if (!src)
-        return '';
-    if (src.startsWith('http://') || src.startsWith('https://') || src.startsWith('//') || src.startsWith('/')) {
-        return src;
-    }
-    if (/\.(mp4|webm|ogv|m4v|mov)(\?|#|$)/i.test(src)) {
-        return src;
-    }
-    // try resource registry
-    try {
-        const all = resource.resourcesMap || resource.resources;
-        if (all && all[src]) {
-            const meta = all[src];
-            const sources = meta.src || meta.data || {};
-            const candidate = sources.video || sources.audio || sources.image || sources;
-            if (candidate === null || candidate === void 0 ? void 0 : candidate.url)
-                return candidate.url;
-            if (candidate === null || candidate === void 0 ? void 0 : candidate.src)
-                return candidate.src;
-        }
-    }
-    catch (_a) {
-        /* ignore */
-    }
-    return src;
-}
-/**
- * 透明 1x1 像素的 PNG，用作未就绪时的占位 texture 资源。
- * 不直接用 Texture.EMPTY 是因为 EMPTY 的 source 在 v8 里某些路径上会触发 isValid 校验。
- */
-const TRANSPARENT_PIXEL_DATA_URL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
-let VideoSystem = class VideoSystem extends Renderer {
-    constructor() {
-        super(...arguments);
-        this.name = 'Video';
-        this.records = {};
-    }
-    init() {
-        this.renderSystem = this.game.getSystem(RendererSystem);
-        this.renderSystem.rendererManager.register(this);
-    }
-    rendererUpdate(gameObject) {
-        var _a, _b, _c, _d, _e;
-        const record = this.records[gameObject.id];
-        if (!record)
-            return;
-        const c = record.component;
-        const v = record.video;
-        // 视频可绘制时把帧拷贝到 canvas，再通过 texture.source.update() 推到 GPU。
-        if (record.ctx && v.readyState >= 2 && v.videoWidth > 0 && v.videoHeight > 0) {
-            // 首次拿到真实尺寸时按 video 自然尺寸调整 canvas 分辨率。
-            if (!record.resizedToVideo) {
-                record.canvas.width = v.videoWidth;
-                record.canvas.height = v.videoHeight;
-                record.resizedToVideo = true;
-                // 重建 texture 以让 PixiJS 感知新的源尺寸。
-                const oldTex = record.texture;
-                const newTex = Texture.from(record.canvas);
-                record.texture = newTex;
-                record.sprite.texture = newTex;
-                if (oldTex && oldTex !== newTex) {
-                    try {
-                        oldTex.destroy(false);
-                    }
-                    catch ( /* ignore */_f) { /* ignore */ }
-                }
-            }
-            try {
-                record.ctx.drawImage(v, 0, 0, record.canvas.width, record.canvas.height);
-                // PixiJS v8: 通过 texture.source.update() 通知 GPU 上传新帧。
-                const src = (_a = record.texture) === null || _a === void 0 ? void 0 : _a.source;
-                if (src) {
-                    if (typeof src.update === 'function')
-                        src.update();
-                    else
-                        src.dirty = true;
-                }
-            }
-            catch (_g) {
-                /* drawImage 在某些跨域场景会抛 SecurityError，忽略让下一帧继续尝试 */
-            }
-        }
-        const w = (_b = c.width) !== null && _b !== void 0 ? _b : (v.videoWidth || 256);
-        const h = (_c = c.height) !== null && _c !== void 0 ? _c : (v.videoHeight || 256);
-        record.sprite.width = w;
-        record.sprite.height = h;
-        record.sprite.anchor.set((_d = c.anchorX) !== null && _d !== void 0 ? _d : 0.5, (_e = c.anchorY) !== null && _e !== void 0 ? _e : 0.5);
-    }
-    componentChanged(changed) {
-        var _a, _b, _c, _d, _e;
-        return __awaiter(this, void 0, void 0, function* () {
-            if (changed.componentName !== 'Video')
-                return;
-            const component = changed.component;
-            const gameObjectId = changed.gameObject.id;
-            if (changed.type === OBSERVER_TYPE.ADD) {
-                const record = this.createRecord(component);
-                this.records[gameObjectId] = record;
-                const container = this.containerManager.getContainer(gameObjectId);
-                if (container)
-                    container.addChildAt(record.sprite, 0);
-                this.attachEndedHandler(record, changed.gameObject);
-                this.startLoad(record);
-            }
-            else if (changed.type === OBSERVER_TYPE.CHANGE) {
-                const record = this.records[gameObjectId];
-                if (!record)
-                    return;
-                const propKey = (_b = (_a = changed.prop) === null || _a === void 0 ? void 0 : _a.prop) === null || _b === void 0 ? void 0 : _b[0];
-                if (propKey === 'src') {
-                    try {
-                        record.video.pause();
-                    }
-                    catch ( /* ignore */_f) { /* ignore */ }
-                    const url = resolveSrc(component.src);
-                    record.video.src = url;
-                    record.component = component;
-                    component.videoElement = record.video;
-                    component.completed = false;
-                    record.resizedToVideo = false;
-                    try {
-                        record.video.load();
-                    }
-                    catch ( /* ignore */_g) { /* ignore */ }
-                    if (component.autoplay !== false)
-                        this.tryPlay(record.video);
-                }
-                else if (propKey === 'loop') {
-                    record.video.loop = !!component.loop;
-                }
-                else if (propKey === 'muted') {
-                    record.video.muted = !!component.muted;
-                }
-                else if (propKey === 'volume') {
-                    record.video.volume = Math.max(0, Math.min(1, (_c = component.volume) !== null && _c !== void 0 ? _c : 1));
-                }
-                else if (propKey === 'playbackRate') {
-                    record.video.playbackRate = (_d = component.playbackRate) !== null && _d !== void 0 ? _d : 1;
-                }
-            }
-            else if (changed.type === OBSERVER_TYPE.REMOVE) {
-                const record = this.records[gameObjectId];
-                if (!record)
-                    return;
-                this.tearDown(record);
-                const container = (_e = this.containerManager) === null || _e === void 0 ? void 0 : _e.getContainer(gameObjectId);
-                if (container)
-                    container.removeChild(record.sprite);
-                try {
-                    record.sprite.destroy({ children: true });
-                }
-                catch ( /* ignore */_h) { /* ignore */ }
-                delete this.records[gameObjectId];
-            }
-        });
-    }
-    createRecord(component) {
-        var _a, _b, _c, _d, _e, _f, _g;
-        const video = document.createElement('video');
-        video.crossOrigin = (_a = component.crossOrigin) !== null && _a !== void 0 ? _a : 'anonymous';
-        video.loop = !!component.loop;
-        video.muted = component.muted !== false;
-        video.volume = Math.max(0, Math.min(1, (_b = component.volume) !== null && _b !== void 0 ? _b : 1));
-        video.playbackRate = (_c = component.playbackRate) !== null && _c !== void 0 ? _c : 1;
-        video.playsInline = component.playsInline !== false;
-        video['webkit-playsinline'] = '';
-        video.preload = 'auto';
-        component.videoElement = video;
-        // 用一个 canvas 作为帧中转：PixiJS 直接把这个 canvas 当 ImageSource，
-        // 完全绕过 PixiJS v8 的 VideoSource（避免 _onPlayStart/_mediaReady 无限递归）。
-        const canvas = document.createElement('canvas');
-        canvas.width = (_d = component.width) !== null && _d !== void 0 ? _d : 256;
-        canvas.height = (_e = component.height) !== null && _e !== void 0 ? _e : 256;
-        const ctx = canvas.getContext('2d');
-        // 占位 texture：用透明 PNG 兜底，绝不传 EMPTY（v8 在某些 isValid 路径上不友好）。
-        const placeholderTex = Texture.from(TRANSPARENT_PIXEL_DATA_URL);
-        const sprite = new Sprite(placeholderTex);
-        sprite.anchor.set((_f = component.anchorX) !== null && _f !== void 0 ? _f : 0.5, (_g = component.anchorY) !== null && _g !== void 0 ? _g : 0.5);
-        return {
-            video,
-            canvas,
-            ctx,
-            texture: placeholderTex,
-            sprite,
-            component,
-            endedHandler: null,
-            resizedToVideo: false,
-        };
-    }
-    attachEndedHandler(record, _go) {
-        const handler = () => {
-            record.component.completed = true;
-            try {
-                record.video.dispatchEvent(new Event('eva-video-complete'));
-            }
-            catch (_a) {
-                /* ignore */
-            }
-        };
-        record.video.addEventListener('ended', handler);
-        record.endedHandler = handler;
-    }
-    startLoad(record) {
-        const url = resolveSrc(record.component.src);
-        record.video.src = url;
-        try {
-            record.video.load();
-        }
-        catch ( /* ignore */_a) { /* ignore */ }
-        if (record.component.autoplay !== false) {
-            // 元数据就绪后再 play，这样 videoWidth/videoHeight 已经稳定。
-            const onCanPlay = () => {
-                record.video.removeEventListener('canplay', onCanPlay);
-                record.video.removeEventListener('loadeddata', onCanPlay);
-                this.tryPlay(record.video);
-            };
-            if (record.video.readyState >= 2) {
-                this.tryPlay(record.video);
-            }
-            else {
-                record.video.addEventListener('canplay', onCanPlay);
-                record.video.addEventListener('loadeddata', onCanPlay);
-            }
-        }
-    }
-    tryPlay(video) {
-        try {
-            const p = video.play();
-            if (p && typeof p.catch === 'function') {
-                p.catch((err) => {
-                    // eslint-disable-next-line no-console
-                    console.warn('[Video] autoplay rejected:', (err === null || err === void 0 ? void 0 : err.message) || err);
-                });
-            }
-        }
-        catch (e) {
-            // eslint-disable-next-line no-console
-            console.warn('[Video] autoplay threw:', e);
-        }
-    }
-    tearDown(record) {
-        try {
-            record.video.pause();
-        }
-        catch ( /* ignore */_a) { /* ignore */ }
-        if (record.endedHandler) {
-            try {
-                record.video.removeEventListener('ended', record.endedHandler);
-            }
-            catch ( /* ignore */_b) { /* ignore */ }
-        }
-        try {
-            record.video.removeAttribute('src');
-            record.video.load();
-        }
-        catch ( /* ignore */_c) { /* ignore */ }
-        if (record.texture) {
-            try {
-                record.texture.destroy(false);
-            }
-            catch ( /* ignore */_d) { /* ignore */ }
-            record.texture = null;
-        }
-    }
-    destroy() {
-        var _a;
-        for (const key in this.records) {
-            const id = parseInt(key);
-            const record = this.records[id];
-            this.tearDown(record);
-            const container = (_a = this.containerManager) === null || _a === void 0 ? void 0 : _a.getContainer(id);
-            if (container)
-                container.removeChild(record.sprite);
-            try {
-                record.sprite.destroy({ children: true });
-            }
-            catch ( /* ignore */_b) { /* ignore */ }
-            delete this.records[id];
-        }
-    }
-};
-VideoSystem.systemName = 'Video';
-VideoSystem = __decorate([
-    decorators.componentObserver({
-        Video: [
-            { prop: ['src'], deep: false },
-            { prop: ['loop'], deep: false },
-            { prop: ['muted'], deep: false },
-            { prop: ['volume'], deep: false },
-            { prop: ['playbackRate'], deep: false },
-        ],
-    })
-], VideoSystem);
-var VideoSystem$1 = VideoSystem;
-
-export { Video, VideoSystem$1 as VideoSystem };