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

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

@@ -0,0 +1,495 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var eva_js = require('@eva/eva.js');
+var inspectorDecorator = require('@eva/inspector-decorator');
+var pluginRenderer = require('@eva/plugin-renderer');
+var pixi_js = require('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 eva_js.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([
+    inspectorDecorator.type('string'),
+    __metadata("design:type", String)
+], Video.prototype, "src", void 0);
+__decorate([
+    inspectorDecorator.type('boolean'),
+    __metadata("design:type", Boolean)
+], Video.prototype, "loop", void 0);
+__decorate([
+    inspectorDecorator.type('boolean'),
+    __metadata("design:type", Boolean)
+], Video.prototype, "autoplay", void 0);
+__decorate([
+    inspectorDecorator.type('boolean'),
+    __metadata("design:type", Boolean)
+], Video.prototype, "muted", void 0);
+__decorate([
+    inspectorDecorator.type('number'),
+    __metadata("design:type", Number)
+], Video.prototype, "volume", void 0);
+__decorate([
+    inspectorDecorator.type('number'),
+    __metadata("design:type", Number)
+], Video.prototype, "playbackRate", void 0);
+__decorate([
+    inspectorDecorator.type('number'),
+    __metadata("design:type", Number)
+], Video.prototype, "anchorX", void 0);
+__decorate([
+    inspectorDecorator.type('number'),
+    __metadata("design:type", Number)
+], Video.prototype, "anchorY", void 0);
+__decorate([
+    inspectorDecorator.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 = eva_js.resource.resourcesMap || eva_js.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 pluginRenderer.Renderer {
+    constructor() {
+        super(...arguments);
+        this.name = 'Video';
+        this.records = {};
+    }
+    init() {
+        this.renderSystem = this.game.getSystem(pluginRenderer.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 = pixi_js.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 === eva_js.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 === eva_js.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 === eva_js.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 = pixi_js.Texture.from(TRANSPARENT_PIXEL_DATA_URL);
+        const sprite = new pixi_js.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([
+    eva_js.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;
+
+exports.Video = Video;
+exports.VideoSystem = VideoSystem$1;

package/dist/plugin-renderer-video.cjs.prod.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@eva/eva.js"),t=require("@eva/inspector-decorator"),o=require("@eva/plugin-renderer"),r=require("pixi.js");function n(e,t,o,r){var n,i=arguments.length,d=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)d=Reflect.decorate(e,t,o,r);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(d=(i<3?n(d):i>3?n(t,o,d):n(t,o))||d);return i>3&&d&&Object.defineProperty(t,o,d),d}function i(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function d(e,t,o,r){return new(o||(o=Promise))(function(n,i){function d(e){try{s(r.next(e))}catch(e){i(e)}}function a(e){try{s(r.throw(e))}catch(e){i(e)}}function s(e){var t;e.done?n(e.value):(t=e.value,t instanceof o?t:new o(function(e){e(t)})).then(d,a)}s((r=r.apply(e,t||[])).next())})}"function"==typeof SuppressedError&&SuppressedError;class a extends e.Component{constructor(){super(...arguments),this.src="",this.loop=!1,this.autoplay=!0,this.muted=!0,this.volume=1,this.playbackRate=1,this.anchorX=.5,this.anchorY=.5,this.crossOrigin="anonymous",this.playsInline=!0,this.completed=!1}init(e){e&&Object.assign(this,e)}play(){if(this.videoElement)try{const e=this.videoElement.play();if(e&&"function"==typeof e.catch)return e.catch(e=>{console.warn("[Video] play() rejected:",e)})}catch(e){console.warn("[Video] play() threw:",e)}}pause(){if(this.videoElement)try{this.videoElement.pause()}catch(e){}}setCurrentTime(e){if(this.videoElement)try{this.videoElement.currentTime=Math.max(0,e)}catch(e){}}snapshot(e){var t,o,r,n;const i=this.videoElement;if(!i||i.readyState<2)return null;const d=null!==(t=null==e?void 0:e.width)&&void 0!==t?t:i.videoWidth,a=null!==(o=null==e?void 0:e.height)&&void 0!==o?o:i.videoHeight;if(d<=0||a<=0)return null;try{const t=document.createElement("canvas");t.width=d,t.height=a;const o=t.getContext("2d");return o?(o.drawImage(i,null!==(r=null==e?void 0:e.x)&&void 0!==r?r:0,null!==(n=null==e?void 0:e.y)&&void 0!==n?n:0,d,a,0,0,d,a),t):null}catch(e){return null}}}function s(t){if(!t)return"";if(t.startsWith("http://")||t.startsWith("https://")||t.startsWith("//")||t.startsWith("/"))return t;if(/\.(mp4|webm|ogv|m4v|mov)(\?|#|$)/i.test(t))return t;try{const o=e.resource.resourcesMap||e.resource.resources;if(o&&o[t]){const e=o[t],r=e.src||e.data||{},n=r.video||r.audio||r.image||r;if(null==n?void 0:n.url)return n.url;if(null==n?void 0:n.src)return n.src}}catch(e){}return t}a.componentName="Video",n([t.type("string"),i("design:type",String)],a.prototype,"src",void 0),n([t.type("boolean"),i("design:type",Boolean)],a.prototype,"loop",void 0),n([t.type("boolean"),i("design:type",Boolean)],a.prototype,"autoplay",void 0),n([t.type("boolean"),i("design:type",Boolean)],a.prototype,"muted",void 0),n([t.type("number"),i("design:type",Number)],a.prototype,"volume",void 0),n([t.type("number"),i("design:type",Number)],a.prototype,"playbackRate",void 0),n([t.type("number"),i("design:type",Number)],a.prototype,"anchorX",void 0),n([t.type("number"),i("design:type",Number)],a.prototype,"anchorY",void 0),n([t.type("boolean"),i("design:type",Boolean)],a.prototype,"playsInline",void 0);let c=class extends o.Renderer{constructor(){super(...arguments),this.name="Video",this.records={}}init(){this.renderSystem=this.game.getSystem(o.RendererSystem),this.renderSystem.rendererManager.register(this)}rendererUpdate(e){var t,o,n,i,d;const a=this.records[e.id];if(!a)return;const s=a.component,c=a.video;if(a.ctx&&c.readyState>=2&&c.videoWidth>0&&c.videoHeight>0){if(!a.resizedToVideo){a.canvas.width=c.videoWidth,a.canvas.height=c.videoHeight,a.resizedToVideo=!0;const e=a.texture,t=r.Texture.from(a.canvas);if(a.texture=t,a.sprite.texture=t,e&&e!==t)try{e.destroy(!1)}catch(e){}}try{a.ctx.drawImage(c,0,0,a.canvas.width,a.canvas.height);const e=null===(t=a.texture)||void 0===t?void 0:t.source;e&&("function"==typeof e.update?e.update():e.dirty=!0)}catch(e){}}const l=null!==(o=s.width)&&void 0!==o?o:c.videoWidth||256,p=null!==(n=s.height)&&void 0!==n?n:c.videoHeight||256;a.sprite.width=l,a.sprite.height=p,a.sprite.anchor.set(null!==(i=s.anchorX)&&void 0!==i?i:.5,null!==(d=s.anchorY)&&void 0!==d?d:.5)}componentChanged(t){var o,r,n,i,a;return d(this,void 0,void 0,function*(){if("Video"!==t.componentName)return;const d=t.component,c=t.gameObject.id;if(t.type===e.OBSERVER_TYPE.ADD){const e=this.createRecord(d);this.records[c]=e;const o=this.containerManager.getContainer(c);o&&o.addChildAt(e.sprite,0),this.attachEndedHandler(e,t.gameObject),this.startLoad(e)}else if(t.type===e.OBSERVER_TYPE.CHANGE){const e=this.records[c];if(!e)return;const a=null===(r=null===(o=t.prop)||void 0===o?void 0:o.prop)||void 0===r?void 0:r[0];if("src"===a){try{e.video.pause()}catch(e){}const t=s(d.src);e.video.src=t,e.component=d,d.videoElement=e.video,d.completed=!1,e.resizedToVideo=!1;try{e.video.load()}catch(e){}!1!==d.autoplay&&this.tryPlay(e.video)}else"loop"===a?e.video.loop=!!d.loop:"muted"===a?e.video.muted=!!d.muted:"volume"===a?e.video.volume=Math.max(0,Math.min(1,null!==(n=d.volume)&&void 0!==n?n:1)):"playbackRate"===a&&(e.video.playbackRate=null!==(i=d.playbackRate)&&void 0!==i?i:1)}else if(t.type===e.OBSERVER_TYPE.REMOVE){const e=this.records[c];if(!e)return;this.tearDown(e);const t=null===(a=this.containerManager)||void 0===a?void 0:a.getContainer(c);t&&t.removeChild(e.sprite);try{e.sprite.destroy({children:!0})}catch(e){}delete this.records[c]}})}createRecord(e){var t,o,n,i,d,a,s;const c=document.createElement("video");c.crossOrigin=null!==(t=e.crossOrigin)&&void 0!==t?t:"anonymous",c.loop=!!e.loop,c.muted=!1!==e.muted,c.volume=Math.max(0,Math.min(1,null!==(o=e.volume)&&void 0!==o?o:1)),c.playbackRate=null!==(n=e.playbackRate)&&void 0!==n?n:1,c.playsInline=!1!==e.playsInline,c["webkit-playsinline"]="",c.preload="auto",e.videoElement=c;const l=document.createElement("canvas");l.width=null!==(i=e.width)&&void 0!==i?i:256,l.height=null!==(d=e.height)&&void 0!==d?d:256;const p=l.getContext("2d"),u=r.Texture.from("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="),v=new r.Sprite(u);return v.anchor.set(null!==(a=e.anchorX)&&void 0!==a?a:.5,null!==(s=e.anchorY)&&void 0!==s?s:.5),{video:c,canvas:l,ctx:p,texture:u,sprite:v,component:e,endedHandler:null,resizedToVideo:!1}}attachEndedHandler(e,t){const o=()=>{e.component.completed=!0;try{e.video.dispatchEvent(new Event("eva-video-complete"))}catch(e){}};e.video.addEventListener("ended",o),e.endedHandler=o}startLoad(e){const t=s(e.component.src);e.video.src=t;try{e.video.load()}catch(e){}if(!1!==e.component.autoplay){const t=()=>{e.video.removeEventListener("canplay",t),e.video.removeEventListener("loadeddata",t),this.tryPlay(e.video)};e.video.readyState>=2?this.tryPlay(e.video):(e.video.addEventListener("canplay",t),e.video.addEventListener("loadeddata",t))}}tryPlay(e){try{const t=e.play();t&&"function"==typeof t.catch&&t.catch(e=>{console.warn("[Video] autoplay rejected:",(null==e?void 0:e.message)||e)})}catch(e){console.warn("[Video] autoplay threw:",e)}}tearDown(e){try{e.video.pause()}catch(e){}if(e.endedHandler)try{e.video.removeEventListener("ended",e.endedHandler)}catch(e){}try{e.video.removeAttribute("src"),e.video.load()}catch(e){}if(e.texture){try{e.texture.destroy(!1)}catch(e){}e.texture=null}}destroy(){var e;for(const t in this.records){const o=parseInt(t),r=this.records[o];this.tearDown(r);const n=null===(e=this.containerManager)||void 0===e?void 0:e.getContainer(o);n&&n.removeChild(r.sprite);try{r.sprite.destroy({children:!0})}catch(e){}delete this.records[o]}}};c.systemName="Video",c=n([e.decorators.componentObserver({Video:[{prop:["src"],deep:!1},{prop:["loop"],deep:!1},{prop:["muted"],deep:!1},{prop:["volume"],deep:!1},{prop:["playbackRate"],deep:!1}]})],c);var l=c;exports.Video=a,exports.VideoSystem=l;

package/dist/plugin-renderer-video.d.ts

@@ -0,0 +1,118 @@
+import { Component } from '@eva/eva.js';
+import { ComponentChanged } from '@eva/eva.js';
+import { ContainerManager } from '@eva/plugin-renderer';
+import { GameObject } from '@eva/eva.js';
+import { Renderer } from '@eva/plugin-renderer';
+import { RendererManager } from '@eva/plugin-renderer';
+import { RendererSystem } from '@eva/plugin-renderer';
+
+/**
+ * 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 的工作流。
+ */
+export declare class Video extends Component<VideoParams> {
+    static componentName: string;
+    src: string;
+    loop: boolean;
+    autoplay: boolean;
+    muted: boolean;
+    volume: number;
+    playbackRate: number;
+    width?: number;
+    height?: number;
+    anchorX: number;
+    anchorY: number;
+    onComplete?: string;
+    crossOrigin?: 'anonymous' | 'use-credentials' | '';
+    playsInline: boolean;
+    /** Runtime 标记:System 设置,表示视频已经触发过 `ended`。 */
+    completed: boolean;
+    /** 由 System 在 ADD 后写回,便于业务侧 component.play()/pause() 直接操控底层 video。 */
+    videoElement?: HTMLVideoElement;
+    init(obj?: VideoParams): void;
+    /** 立即播放(若 video 已就绪)。 */
+    play(): Promise<void> | void;
+    /** 暂停。 */
+    pause(): void;
+    /** 跳转到指定时间(秒)。 */
+    setCurrentTime(seconds: number): void;
+    /** 把当前帧画到一个独立 canvas 上并返回,用于 snapshot(失败时返回 null)。 */
+    snapshot(area?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }): HTMLCanvasElement | null;
+}
+
+/**
+ * Phaser-style Video 组件入参(MVP)。
+ *
+ * 注意:
+ * - `src` 既可以是已注册到资源加载器的资源 key,也可以直接是 .mp4/.webm 等可播放 URL。
+ * - 浏览器的 autoplay 限制要求视频必须 muted=true 才能在没有用户交互时播放。
+ * - 视频通过隐藏的 `<video>` 元素 + PixiJS `Texture.from(video)` 接入 ECS 渲染管线。
+ */
+export declare interface VideoParams {
+    /** 视频 URL 或 DSL assets 中的资源 key。 */
+    src: string;
+    /** 是否循环播放,默认 false。 */
+    loop?: boolean;
+    /** 是否在加载完成后自动开始播放,默认 true。 */
+    autoplay?: boolean;
+    /** 是否静音,默认 true(浏览器自动播放限制下必须为 true)。 */
+    muted?: boolean;
+    /** 音量 0~1,默认 1。 */
+    volume?: number;
+    /** 播放速率,默认 1。 */
+    playbackRate?: number;
+    /** 显示宽度;不填则使用 video 的 videoWidth(回落到 256)。 */
+    width?: number;
+    /** 显示高度;不填则使用 video 的 videoHeight(回落到 256)。 */
+    height?: number;
+    /** Sprite anchor X,默认 0.5。 */
+    anchorX?: number;
+    /** Sprite anchor Y,默认 0.5。 */
+    anchorY?: number;
+    /** 命名钩子:视频播放结束 (ended 事件)时触发,DSL 中保存事件 key 供宿主消费。 */
+    onComplete?: string;
+    /** 跨域设置,默认 'anonymous'(允许 canvas 取像素 / snapshot)。 */
+    crossOrigin?: 'anonymous' | 'use-credentials' | '';
+    /** 是否 inline 播放(iOS 必需),默认 true。 */
+    playsInline?: boolean;
+}
+
+export declare class VideoSystem extends Renderer {
+    static systemName: string;
+    name: string;
+    private records;
+    renderSystem: RendererSystem;
+    rendererManager: RendererManager;
+    containerManager: ContainerManager;
+    init(): void;
+    rendererUpdate(gameObject: GameObject): void;
+    componentChanged(changed: ComponentChanged): Promise<void>;
+    private createRecord;
+    private attachEndedHandler;
+    private startLoad;
+    private tryPlay;
+    private tearDown;
+    destroy(): void;
+}
+
+export { }