@vunk/plus 1.4.6 → 1.5.0

package/components/index2.mjs

@@ -1,9 +1,996 @@
-import { inject, provide, defineComponent, useId, watchEffect, ref, onBeforeUnmount, renderSlot, onMounted, createElementBlock, openBlock, resolveComponent, createBlock, withCtx, createVNode, mergeProps } from 'vue';
+import { inject, provide, watchEffect, onBeforeUnmount, defineComponent, useId, ref, onMounted, renderSlot, computed, watch, createElementBlock, openBlock, resolveComponent, createBlock, withCtx, createVNode, mergeProps } from 'vue';
 import { TickerStatus } from '@vunk/shared/enum';
 import { Deferred, sleep } from '@vunk/shared/promise';
-import { g as getDefaultExportFromCjs } from './_commonjsHelpers.mjs';
+import { c as commonjsGlobal, g as getDefaultExportFromCjs } from './_commonjsHelpers.mjs';
+import { useModelComputed, useDeferred } from '@vunk/core/composables';
 import { _ as _export_sfc } from './_plugin-vue_export-helper.mjs';
 
+var lib = {exports: {}};
+
+(function (module, exports) {
+	(function webpackUniversalModuleDefinition(root, factory) {
+		module.exports = factory();
+	})(commonjsGlobal, function() {
+	return /******/ (function(modules) { // webpackBootstrap
+	/******/ 	// The module cache
+	/******/ 	var installedModules = {};
+
+	/******/ 	// The require function
+	/******/ 	function __webpack_require__(moduleId) {
+
+	/******/ 		// Check if module is in cache
+	/******/ 		if(installedModules[moduleId])
+	/******/ 			return installedModules[moduleId].exports;
+
+	/******/ 		// Create a new module (and put it into the cache)
+	/******/ 		var module = installedModules[moduleId] = {
+	/******/ 			exports: {},
+	/******/ 			id: moduleId,
+	/******/ 			loaded: false
+	/******/ 		};
+
+	/******/ 		// Execute the module function
+	/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+	/******/ 		// Flag the module as loaded
+	/******/ 		module.loaded = true;
+
+	/******/ 		// Return the exports of the module
+	/******/ 		return module.exports;
+	/******/ 	}
+
+
+	/******/ 	// expose the modules object (__webpack_modules__)
+	/******/ 	__webpack_require__.m = modules;
+
+	/******/ 	// expose the module cache
+	/******/ 	__webpack_require__.c = installedModules;
+
+	/******/ 	// __webpack_public_path__
+	/******/ 	__webpack_require__.p = "";
+
+	/******/ 	// Load entry module and return exports
+	/******/ 	return __webpack_require__(0);
+	/******/ })
+	/************************************************************************/
+	/******/ ([
+	/* 0 */
+	/***/ (function(module, exports, __webpack_require__) {
+
+		Object.defineProperty(exports, "__esModule", {
+		    value: true
+		});
+		exports.isNotPNG = isNotPNG;
+		exports.isNotAPNG = isNotAPNG;
+		exports.default = parseAPNG;
+
+		var _crc = __webpack_require__(1);
+
+		var _crc2 = _interopRequireDefault(_crc);
+
+		var _structs = __webpack_require__(2);
+
+		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+		var errNotPNG = new Error('Not a PNG');
+		var errNotAPNG = new Error('Not an animated PNG');
+
+		function isNotPNG(err) {
+		    return err === errNotPNG;
+		}
+		function isNotAPNG(err) {
+		    return err === errNotAPNG;
+		}
+
+		// '\x89PNG\x0d\x0a\x1a\x0a'
+		var PNGSignature = new Uint8Array([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]);
+
+		/**
+		 * Parse APNG data
+		 * @param {ArrayBuffer} buffer
+		 * @return {APNG|Error}
+		 */
+		function parseAPNG(buffer) {
+		    var bytes = new Uint8Array(buffer);
+
+		    if (Array.prototype.some.call(PNGSignature, function (b, i) {
+		        return b !== bytes[i];
+		    })) {
+		        return errNotPNG;
+		    }
+
+		    // fast animation test
+		    var isAnimated = false;
+		    eachChunk(bytes, function (type) {
+		        return !(isAnimated = type === 'acTL');
+		    });
+		    if (!isAnimated) {
+		        return errNotAPNG;
+		    }
+
+		    var preDataParts = [],
+		        postDataParts = [];
+		    var headerDataBytes = null,
+		        frame = null,
+		        frameNumber = 0,
+		        apng = new _structs.APNG();
+
+		    eachChunk(bytes, function (type, bytes, off, length) {
+		        var dv = new DataView(bytes.buffer);
+		        switch (type) {
+		            case 'IHDR':
+		                headerDataBytes = bytes.subarray(off + 8, off + 8 + length);
+		                apng.width = dv.getUint32(off + 8);
+		                apng.height = dv.getUint32(off + 12);
+		                break;
+		            case 'acTL':
+		                apng.numPlays = dv.getUint32(off + 8 + 4);
+		                break;
+		            case 'fcTL':
+		                if (frame) {
+		                    apng.frames.push(frame);
+		                    frameNumber++;
+		                }
+		                frame = new _structs.Frame();
+		                frame.width = dv.getUint32(off + 8 + 4);
+		                frame.height = dv.getUint32(off + 8 + 8);
+		                frame.left = dv.getUint32(off + 8 + 12);
+		                frame.top = dv.getUint32(off + 8 + 16);
+		                var delayN = dv.getUint16(off + 8 + 20);
+		                var delayD = dv.getUint16(off + 8 + 22);
+		                if (delayD === 0) {
+		                    delayD = 100;
+		                }
+		                frame.delay = 1000 * delayN / delayD;
+		                // https://bugzilla.mozilla.org/show_bug.cgi?id=125137
+		                // https://bugzilla.mozilla.org/show_bug.cgi?id=139677
+		                // https://bugzilla.mozilla.org/show_bug.cgi?id=207059
+		                if (frame.delay <= 10) {
+		                    frame.delay = 100;
+		                }
+		                apng.playTime += frame.delay;
+		                frame.disposeOp = dv.getUint8(off + 8 + 24);
+		                frame.blendOp = dv.getUint8(off + 8 + 25);
+		                frame.dataParts = [];
+		                if (frameNumber === 0 && frame.disposeOp === 2) {
+		                    frame.disposeOp = 1;
+		                }
+		                break;
+		            case 'fdAT':
+		                if (frame) {
+		                    frame.dataParts.push(bytes.subarray(off + 8 + 4, off + 8 + length));
+		                }
+		                break;
+		            case 'IDAT':
+		                if (frame) {
+		                    frame.dataParts.push(bytes.subarray(off + 8, off + 8 + length));
+		                }
+		                break;
+		            case 'IEND':
+		                postDataParts.push(subBuffer(bytes, off, 12 + length));
+		                break;
+		            default:
+		                preDataParts.push(subBuffer(bytes, off, 12 + length));
+		        }
+		    });
+
+		    if (frame) {
+		        apng.frames.push(frame);
+		    }
+
+		    if (apng.frames.length == 0) {
+		        return errNotAPNG;
+		    }
+
+		    var preBlob = new Blob(preDataParts),
+		        postBlob = new Blob(postDataParts);
+
+		    apng.frames.forEach(function (frame) {
+		        var bb = [];
+		        bb.push(PNGSignature);
+		        headerDataBytes.set(makeDWordArray(frame.width), 0);
+		        headerDataBytes.set(makeDWordArray(frame.height), 4);
+		        bb.push(makeChunkBytes('IHDR', headerDataBytes));
+		        bb.push(preBlob);
+		        frame.dataParts.forEach(function (p) {
+		            return bb.push(makeChunkBytes('IDAT', p));
+		        });
+		        bb.push(postBlob);
+		        frame.imageData = new Blob(bb, { 'type': 'image/png' });
+		        delete frame.dataParts;
+		        bb = null;
+		    });
+
+		    return apng;
+		}
+
+		/**
+		 * @param {Uint8Array} bytes
+		 * @param {function(string, Uint8Array, int, int): boolean} callback
+		 */
+		function eachChunk(bytes, callback) {
+		    var dv = new DataView(bytes.buffer);
+		    var off = 8,
+		        type = void 0,
+		        length = void 0,
+		        res = void 0;
+		    do {
+		        length = dv.getUint32(off);
+		        type = readString(bytes, off + 4, 4);
+		        res = callback(type, bytes, off, length);
+		        off += 12 + length;
+		    } while (res !== false && type != 'IEND' && off < bytes.length);
+		}
+
+		/**
+		 *
+		 * @param {Uint8Array} bytes
+		 * @param {number} off
+		 * @param {number} length
+		 * @return {string}
+		 */
+		function readString(bytes, off, length) {
+		    var chars = Array.prototype.slice.call(bytes.subarray(off, off + length));
+		    return String.fromCharCode.apply(String, chars);
+		}
+
+		/**
+		 *
+		 * @param {string} x
+		 * @return {Uint8Array}
+		 */
+		function makeStringArray(x) {
+		    var res = new Uint8Array(x.length);
+		    for (var i = 0; i < x.length; i++) {
+		        res[i] = x.charCodeAt(i);
+		    }
+		    return res;
+		}
+
+		/**
+		 * @param {Uint8Array} bytes
+		 * @param {int} start
+		 * @param {int} length
+		 * @return {Uint8Array}
+		 */
+		function subBuffer(bytes, start, length) {
+		    var a = new Uint8Array(length);
+		    a.set(bytes.subarray(start, start + length));
+		    return a;
+		}
+
+		/**
+		 * @param {string} type
+		 * @param {Uint8Array} dataBytes
+		 * @return {Uint8Array}
+		 */
+		var makeChunkBytes = function makeChunkBytes(type, dataBytes) {
+		    var crcLen = type.length + dataBytes.length;
+		    var bytes = new Uint8Array(crcLen + 8);
+		    var dv = new DataView(bytes.buffer);
+
+		    dv.setUint32(0, dataBytes.length);
+		    bytes.set(makeStringArray(type), 4);
+		    bytes.set(dataBytes, 8);
+		    var crc = (0, _crc2.default)(bytes, 4, crcLen);
+		    dv.setUint32(crcLen + 4, crc);
+		    return bytes;
+		};
+
+		var makeDWordArray = function makeDWordArray(x) {
+		    return new Uint8Array([x >>> 24 & 0xff, x >>> 16 & 0xff, x >>> 8 & 0xff, x & 0xff]);
+		};
+
+	/***/ }),
+	/* 1 */
+	/***/ (function(module, exports) {
+
+		Object.defineProperty(exports, "__esModule", {
+		  value: true
+		});
+
+		exports.default = function (bytes) {
+		  var start = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+		  var length = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : bytes.length - start;
+
+		  var crc = -1;
+		  for (var _i = start, l = start + length; _i < l; _i++) {
+		    crc = crc >>> 8 ^ table[(crc ^ bytes[_i]) & 0xFF];
+		  }
+		  return crc ^ -1;
+		};
+
+		var table = new Uint32Array(256);
+
+		for (var i = 0; i < 256; i++) {
+		  var c = i;
+		  for (var k = 0; k < 8; k++) {
+		    c = (c & 1) !== 0 ? 0xEDB88320 ^ c >>> 1 : c >>> 1;
+		  }
+		  table[i] = c;
+		}
+
+		/**
+		 *
+		 * @param {Uint8Array} bytes
+		 * @param {number} start
+		 * @param {number} length
+		 * @return {number}
+		 */
+
+	/***/ }),
+	/* 2 */
+	/***/ (function(module, exports, __webpack_require__) {
+
+		Object.defineProperty(exports, "__esModule", {
+		    value: true
+		});
+		exports.Frame = exports.APNG = undefined;
+
+		var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+		var _player = __webpack_require__(3);
+
+		var _player2 = _interopRequireDefault(_player);
+
+		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+		/**
+		 * @property {number} currFrameNumber
+		 * @property {Frame} currFrame
+		 * @property {boolean} paused
+		 * @property {boolean} ended
+		 */
+		exports.APNG = function () {
+		    function APNG() {
+		        _classCallCheck(this, APNG);
+
+		        this.width = 0;
+		        this.height = 0;
+		        this.numPlays = 0;
+		        this.playTime = 0;
+		        this.frames = [];
+		    }
+		    /** @type {number} */
+
+		    /** @type {number} */
+
+		    /** @type {number} */
+
+		    /** @type {number} */
+
+		    /** @type {Frame[]} */
+
+
+		    _createClass(APNG, [{
+		        key: 'createImages',
+
+
+		        /**
+		         *
+		         * @return {Promise.<*>}
+		         */
+		        value: function createImages() {
+		            return Promise.all(this.frames.map(function (f) {
+		                return f.createImage();
+		            }));
+		        }
+
+		        /**
+		         *
+		         * @param {CanvasRenderingContext2D} context
+		         * @param {boolean} autoPlay
+		         * @return {Promise.<Player>}
+		         */
+
+		    }, {
+		        key: 'getPlayer',
+		        value: function getPlayer(context) {
+		            var _this = this;
+
+		            var autoPlay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+		            return this.createImages().then(function () {
+		                return new _player2.default(_this, context, autoPlay);
+		            });
+		        }
+		    }]);
+
+		    return APNG;
+		}();
+
+		exports.Frame = function () {
+		    function Frame() {
+		        _classCallCheck(this, Frame);
+
+		        this.left = 0;
+		        this.top = 0;
+		        this.width = 0;
+		        this.height = 0;
+		        this.delay = 0;
+		        this.disposeOp = 0;
+		        this.blendOp = 0;
+		        this.imageData = null;
+		        this.imageElement = null;
+		    }
+		    /** @type {number} */
+
+		    /** @type {number} */
+
+		    /** @type {number} */
+
+		    /** @type {number} */
+
+		    /** @type {number} */
+
+		    /** @type {number} */
+
+		    /** @type {number} */
+
+		    /** @type {Blob} */
+
+		    /** @type {HTMLImageElement} */
+
+
+		    _createClass(Frame, [{
+		        key: 'createImage',
+		        value: function createImage() {
+		            var _this2 = this;
+
+		            if (this.imageElement) {
+		                return Promise.resolve();
+		            }
+		            return new Promise(function (resolve, reject) {
+		                var url = URL.createObjectURL(_this2.imageData);
+		                _this2.imageElement = document.createElement('img');
+		                _this2.imageElement.onload = function () {
+		                    URL.revokeObjectURL(url);
+		                    resolve();
+		                };
+		                _this2.imageElement.onerror = function () {
+		                    URL.revokeObjectURL(url);
+		                    _this2.imageElement = null;
+		                    reject(new Error("Image creation error"));
+		                };
+		                _this2.imageElement.src = url;
+		            });
+		        }
+		    }]);
+
+		    return Frame;
+		}();
+
+	/***/ }),
+	/* 3 */
+	/***/ (function(module, exports, __webpack_require__) {
+
+		Object.defineProperty(exports, "__esModule", {
+		    value: true
+		});
+
+		var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+		var _events = __webpack_require__(4);
+
+		var _events2 = _interopRequireDefault(_events);
+
+		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+		function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+		function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+		var _class = function (_EventEmitter) {
+		    _inherits(_class, _EventEmitter);
+
+		    /**
+		     * @param {APNG} apng
+		     * @param {CanvasRenderingContext2D} context
+		     * @param {boolean} autoPlay
+		     */
+
+		    /** @type {number} */
+
+
+		    /** @type {boolean} */
+
+		    /** @type {ImageData} */
+
+
+		    /** @type {APNG} */
+
+		    /** @type {CanvasRenderingContext2D} */
+		    function _class(apng, context, autoPlay) {
+		        _classCallCheck(this, _class);
+
+		        var _this = _possibleConstructorReturn(this, (_class.__proto__ || Object.getPrototypeOf(_class)).call(this));
+
+		        _this.playbackRate = 1.0;
+		        _this._currentFrameNumber = 0;
+		        _this._ended = false;
+		        _this._paused = true;
+		        _this._numPlays = 0;
+		        _this._rafId = null;
+
+		        _this._apng = apng;
+		        _this.context = context;
+		        _this.stop();
+		        if (autoPlay) {
+		            _this.play();
+		        }
+		        return _this;
+		    }
+
+		    /**
+		     *
+		     * @return {number}
+		     */
+
+		    /** @type {number|null} */
+
+		    /** @type {boolean} */
+
+		    /** @type {number} */
+
+		    /** @type {Frame} */
+
+		    /** @type {number} */
+
+
+		    _createClass(_class, [{
+		        key: 'renderNextFrame',
+		        value: function renderNextFrame() {
+		            this._currentFrameNumber = (this._currentFrameNumber + 1) % this._apng.frames.length;
+		            if (this._currentFrameNumber === this._apng.frames.length - 1) {
+		                this._numPlays++;
+		                if (this._apng.numPlays !== 0 && this._numPlays >= this._apng.numPlays) {
+		                    this._ended = true;
+		                    this._paused = true;
+		                }
+		            }
+
+		            if (this._prevFrame && this._prevFrame.disposeOp == 1) {
+		                this.context.clearRect(this._prevFrame.left, this._prevFrame.top, this._prevFrame.width, this._prevFrame.height);
+		            } else if (this._prevFrame && this._prevFrame.disposeOp == 2) {
+		                this.context.putImageData(this._prevFrameData, this._prevFrame.left, this._prevFrame.top);
+		            }
+
+		            var frame = this.currentFrame;
+		            this._prevFrame = frame;
+		            this._prevFrameData = null;
+		            if (frame.disposeOp == 2) {
+		                this._prevFrameData = this.context.getImageData(frame.left, frame.top, frame.width, frame.height);
+		            }
+		            if (frame.blendOp == 0) {
+		                this.context.clearRect(frame.left, frame.top, frame.width, frame.height);
+		            }
+
+		            this.context.drawImage(frame.imageElement, frame.left, frame.top);
+
+		            this.emit('frame', this._currentFrameNumber);
+		            if (this._ended) {
+		                this.emit('end');
+		            }
+		        }
+
+		        // playback
+
+		    }, {
+		        key: 'play',
+		        value: function play() {
+		            var _this2 = this;
+
+		            if (this._rafId) {
+		                cancelAnimationFrame(this._rafId);
+		            }
+
+		            this.emit('play');
+
+		            if (this._ended) {
+		                this.stop();
+		            }
+		            this._paused = false;
+
+		            var nextRenderTime = performance.now() + this.currentFrame.delay / this.playbackRate;
+		            var tick = function tick(now) {
+		                if (_this2._ended || _this2._paused) {
+		                    return;
+		                }
+		                if (now >= nextRenderTime) {
+		                    while (now - nextRenderTime >= _this2._apng.playTime / _this2.playbackRate) {
+		                        nextRenderTime += _this2._apng.playTime / _this2.playbackRate;
+		                        _this2._numPlays++;
+		                    }
+		                    do {
+		                        _this2.renderNextFrame();
+		                        nextRenderTime += _this2.currentFrame.delay / _this2.playbackRate;
+		                    } while (!_this2._ended && !_this2._paused && now > nextRenderTime);
+		                }
+		                _this2._rafId = requestAnimationFrame(tick);
+		            };
+		            this._rafId = requestAnimationFrame(tick);
+		        }
+		    }, {
+		        key: 'pause',
+		        value: function pause() {
+		            if (!this._paused) {
+		                if (this._rafId) {
+		                    cancelAnimationFrame(this._rafId);
+		                    this._rafId = null;
+		                }
+		                this.emit('pause');
+		                this._paused = true;
+		            }
+		        }
+		    }, {
+		        key: 'stop',
+		        value: function stop() {
+		            if (this._rafId) {
+		                cancelAnimationFrame(this._rafId);
+		                this._rafId = null;
+		            }
+		            this.emit('stop');
+		            this._numPlays = 0;
+		            this._ended = false;
+		            this._paused = true;
+		            // render first frame
+		            this._currentFrameNumber = -1;
+		            this.context.clearRect(0, 0, this._apng.width, this._apng.height);
+		            this.renderNextFrame();
+		        }
+		    }, {
+		        key: 'currentFrameNumber',
+		        get: function get() {
+		            return this._currentFrameNumber;
+		        }
+
+		        /**
+		         *
+		         * @return {Frame}
+		         */
+
+		    }, {
+		        key: 'currentFrame',
+		        get: function get() {
+		            return this._apng.frames[this._currentFrameNumber];
+		        }
+		    }, {
+		        key: 'paused',
+		        get: function get() {
+		            return this._paused;
+		        }
+		    }, {
+		        key: 'ended',
+		        get: function get() {
+		            return this._ended;
+		        }
+		    }]);
+
+		    return _class;
+		}(_events2.default);
+
+		exports.default = _class;
+
+	/***/ }),
+	/* 4 */
+	/***/ (function(module, exports) {
+
+		// Copyright Joyent, Inc. and other Node contributors.
+		//
+		// Permission is hereby granted, free of charge, to any person obtaining a
+		// copy of this software and associated documentation files (the
+		// "Software"), to deal in the Software without restriction, including
+		// without limitation the rights to use, copy, modify, merge, publish,
+		// distribute, sublicense, and/or sell copies of the Software, and to permit
+		// persons to whom the Software is furnished to do so, subject to the
+		// following conditions:
+		//
+		// The above copyright notice and this permission notice shall be included
+		// in all copies or substantial portions of the Software.
+		//
+		// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+		// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+		// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
+		// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+		// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+		// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
+		// USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+		function EventEmitter() {
+		  this._events = this._events || {};
+		  this._maxListeners = this._maxListeners || undefined;
+		}
+		module.exports = EventEmitter;
+
+		// Backwards-compat with node 0.10.x
+		EventEmitter.EventEmitter = EventEmitter;
+
+		EventEmitter.prototype._events = undefined;
+		EventEmitter.prototype._maxListeners = undefined;
+
+		// By default EventEmitters will print a warning if more than 10 listeners are
+		// added to it. This is a useful default which helps finding memory leaks.
+		EventEmitter.defaultMaxListeners = 10;
+
+		// Obviously not all Emitters should be limited to 10. This function allows
+		// that to be increased. Set to zero for unlimited.
+		EventEmitter.prototype.setMaxListeners = function(n) {
+		  if (!isNumber(n) || n < 0 || isNaN(n))
+		    throw TypeError('n must be a positive number');
+		  this._maxListeners = n;
+		  return this;
+		};
+
+		EventEmitter.prototype.emit = function(type) {
+		  var er, handler, len, args, i, listeners;
+
+		  if (!this._events)
+		    this._events = {};
+
+		  // If there is no 'error' event listener then throw.
+		  if (type === 'error') {
+		    if (!this._events.error ||
+		        (isObject(this._events.error) && !this._events.error.length)) {
+		      er = arguments[1];
+		      if (er instanceof Error) {
+		        throw er; // Unhandled 'error' event
+		      } else {
+		        // At least give some kind of context to the user
+		        var err = new Error('Uncaught, unspecified "error" event. (' + er + ')');
+		        err.context = er;
+		        throw err;
+		      }
+		    }
+		  }
+
+		  handler = this._events[type];
+
+		  if (isUndefined(handler))
+		    return false;
+
+		  if (isFunction(handler)) {
+		    switch (arguments.length) {
+		      // fast cases
+		      case 1:
+		        handler.call(this);
+		        break;
+		      case 2:
+		        handler.call(this, arguments[1]);
+		        break;
+		      case 3:
+		        handler.call(this, arguments[1], arguments[2]);
+		        break;
+		      // slower
+		      default:
+		        args = Array.prototype.slice.call(arguments, 1);
+		        handler.apply(this, args);
+		    }
+		  } else if (isObject(handler)) {
+		    args = Array.prototype.slice.call(arguments, 1);
+		    listeners = handler.slice();
+		    len = listeners.length;
+		    for (i = 0; i < len; i++)
+		      listeners[i].apply(this, args);
+		  }
+
+		  return true;
+		};
+
+		EventEmitter.prototype.addListener = function(type, listener) {
+		  var m;
+
+		  if (!isFunction(listener))
+		    throw TypeError('listener must be a function');
+
+		  if (!this._events)
+		    this._events = {};
+
+		  // To avoid recursion in the case that type === "newListener"! Before
+		  // adding it to the listeners, first emit "newListener".
+		  if (this._events.newListener)
+		    this.emit('newListener', type,
+		              isFunction(listener.listener) ?
+		              listener.listener : listener);
+
+		  if (!this._events[type])
+		    // Optimize the case of one listener. Don't need the extra array object.
+		    this._events[type] = listener;
+		  else if (isObject(this._events[type]))
+		    // If we've already got an array, just append.
+		    this._events[type].push(listener);
+		  else
+		    // Adding the second element, need to change to array.
+		    this._events[type] = [this._events[type], listener];
+
+		  // Check for listener leak
+		  if (isObject(this._events[type]) && !this._events[type].warned) {
+		    if (!isUndefined(this._maxListeners)) {
+		      m = this._maxListeners;
+		    } else {
+		      m = EventEmitter.defaultMaxListeners;
+		    }
+
+		    if (m && m > 0 && this._events[type].length > m) {
+		      this._events[type].warned = true;
+		      console.error('(node) warning: possible EventEmitter memory ' +
+		                    'leak detected. %d listeners added. ' +
+		                    'Use emitter.setMaxListeners() to increase limit.',
+		                    this._events[type].length);
+		      if (typeof console.trace === 'function') {
+		        // not supported in IE 10
+		        console.trace();
+		      }
+		    }
+		  }
+
+		  return this;
+		};
+
+		EventEmitter.prototype.on = EventEmitter.prototype.addListener;
+
+		EventEmitter.prototype.once = function(type, listener) {
+		  if (!isFunction(listener))
+		    throw TypeError('listener must be a function');
+
+		  var fired = false;
+
+		  function g() {
+		    this.removeListener(type, g);
+
+		    if (!fired) {
+		      fired = true;
+		      listener.apply(this, arguments);
+		    }
+		  }
+
+		  g.listener = listener;
+		  this.on(type, g);
+
+		  return this;
+		};
+
+		// emits a 'removeListener' event iff the listener was removed
+		EventEmitter.prototype.removeListener = function(type, listener) {
+		  var list, position, length, i;
+
+		  if (!isFunction(listener))
+		    throw TypeError('listener must be a function');
+
+		  if (!this._events || !this._events[type])
+		    return this;
+
+		  list = this._events[type];
+		  length = list.length;
+		  position = -1;
+
+		  if (list === listener ||
+		      (isFunction(list.listener) && list.listener === listener)) {
+		    delete this._events[type];
+		    if (this._events.removeListener)
+		      this.emit('removeListener', type, listener);
+
+		  } else if (isObject(list)) {
+		    for (i = length; i-- > 0;) {
+		      if (list[i] === listener ||
+		          (list[i].listener && list[i].listener === listener)) {
+		        position = i;
+		        break;
+		      }
+		    }
+
+		    if (position < 0)
+		      return this;
+
+		    if (list.length === 1) {
+		      list.length = 0;
+		      delete this._events[type];
+		    } else {
+		      list.splice(position, 1);
+		    }
+
+		    if (this._events.removeListener)
+		      this.emit('removeListener', type, listener);
+		  }
+
+		  return this;
+		};
+
+		EventEmitter.prototype.removeAllListeners = function(type) {
+		  var key, listeners;
+
+		  if (!this._events)
+		    return this;
+
+		  // not listening for removeListener, no need to emit
+		  if (!this._events.removeListener) {
+		    if (arguments.length === 0)
+		      this._events = {};
+		    else if (this._events[type])
+		      delete this._events[type];
+		    return this;
+		  }
+
+		  // emit removeListener for all listeners on all events
+		  if (arguments.length === 0) {
+		    for (key in this._events) {
+		      if (key === 'removeListener') continue;
+		      this.removeAllListeners(key);
+		    }
+		    this.removeAllListeners('removeListener');
+		    this._events = {};
+		    return this;
+		  }
+
+		  listeners = this._events[type];
+
+		  if (isFunction(listeners)) {
+		    this.removeListener(type, listeners);
+		  } else if (listeners) {
+		    // LIFO order
+		    while (listeners.length)
+		      this.removeListener(type, listeners[listeners.length - 1]);
+		  }
+		  delete this._events[type];
+
+		  return this;
+		};
+
+		EventEmitter.prototype.listeners = function(type) {
+		  var ret;
+		  if (!this._events || !this._events[type])
+		    ret = [];
+		  else if (isFunction(this._events[type]))
+		    ret = [this._events[type]];
+		  else
+		    ret = this._events[type].slice();
+		  return ret;
+		};
+
+		EventEmitter.prototype.listenerCount = function(type) {
+		  if (this._events) {
+		    var evlistener = this._events[type];
+
+		    if (isFunction(evlistener))
+		      return 1;
+		    else if (evlistener)
+		      return evlistener.length;
+		  }
+		  return 0;
+		};
+
+		EventEmitter.listenerCount = function(emitter, type) {
+		  return emitter.listenerCount(type);
+		};
+
+		function isFunction(arg) {
+		  return typeof arg === 'function';
+		}
+
+		function isNumber(arg) {
+		  return typeof arg === 'number';
+		}
+
+		function isObject(arg) {
+		  return typeof arg === 'object' && arg !== null;
+		}
+
+		function isUndefined(arg) {
+		  return arg === void 0;
+		}
+
+
+	/***/ })
+	/******/ ])
+	});
+} (lib));
+
+var libExports = lib.exports;
+var parseAPNG = /*@__PURE__*/getDefaultExportFromCjs(libExports);
+
 var ExtensionType = /* @__PURE__ */ ((ExtensionType2) => {
   ExtensionType2["Application"] = "application";
   ExtensionType2["WebGLPipes"] = "webgl-pipes";
@@ -20996,6 +21983,10 @@ extensions.handle(ExtensionType.Asset, (extension) => {
 extensions.add(browserExt, webworkerExt);
 
 const props = {
+  url: {
+    type: String,
+    requierd: false
+  },
   data: {
     type: Array,
     default: () => []
@@ -21017,6 +22008,21 @@ const props = {
   frameRate: {
     type: Number,
     default: 24
+  },
+  label: {
+    type: String,
+    default: ""
+  },
+  resize: {
+    type: Function,
+    default: void 0
+  },
+  /**
+   * @description  是否在有资源时预渲染第一帧
+   */
+  prerender: {
+    type: Boolean,
+    default: false
   }
 };
 const emits = {
@@ -21047,67 +22053,315 @@ function usePixiApp() {
   return core;
 }
 
-var _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  __name: "core",
-  props: props,
+function useSprite(props) {
+  const autoResize = props.autoResize ?? true;
+  const resize = props.resize ?? defaultResize;
+  const { application: app, context } = usePixiApp();
+  const sprite = new Sprite();
+  app.stage.addChild(sprite);
+  watchEffect(() => {
+    props.label && (sprite.label = props.label);
+  });
+  autoResize && context.when().then((app2) => {
+    if (sprite.texture) {
+      resizeSprite();
+      app2.renderer.on("resize", resizeSprite);
+    }
+  });
+  function resizeSprite() {
+    if (!app.renderer?.screen)
+      return;
+    const meta = sprite.texture._meta;
+    resize({
+      application: app,
+      sprite,
+      meta
+    });
+  }
+  onBeforeUnmount(() => {
+    app.renderer.off("resize", resizeSprite);
+    app.stage.removeChild(sprite);
+  });
+  function defaultResize() {
+    const scaleX = app.screen.width / sprite.texture.width;
+    const scaleY = app.screen.height / sprite.texture.height;
+    const scale = Math.min(scaleX, scaleY);
+    sprite.scale.set(scale);
+    sprite.x = (app.screen.width - sprite.width) / 2;
+    sprite.y = (app.screen.height - sprite.height) / 2;
+  }
+  return {
+    sprite,
+    resizeSprite,
+    application: app
+  };
+}
+
+var _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "apng",
+  props: {
+    ...props,
+    url: {
+      type: String,
+      required: true
+    }
+  },
   emits,
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const { application: app, context } = usePixiApp();
     const compId = useId();
-    const getAlias = (key) => `${compId}-${key}`;
-    const sprite = new Sprite();
-    app.stage.addChild(sprite);
-    context.when().then((app2) => {
-      if (sprite.texture) {
-        resizeSprite();
-        app2.renderer.on(
-          "resize",
-          () => {
+    const getAlias = (frameIndex) => `${compId}-apng-frame-${frameIndex}`;
+    const { sprite, resizeSprite } = useSprite(props);
+    const frames = ref([]);
+    const index = ref(0);
+    const isLoaded = ref(false);
+    const error = ref("");
+    const textureMap = /* @__PURE__ */ new Map();
+    let timer = null;
+    let reusableCanvas = null;
+    let reusableCtx = null;
+    onMounted(() => loadAPNG(props.url));
+    function getReusableCanvas(width, height) {
+      if (!reusableCanvas) {
+        reusableCanvas = document.createElement("canvas");
+        reusableCtx = reusableCanvas.getContext("2d", {
+          willReadFrequently: true
+        });
+      }
+      if (reusableCanvas.width !== width || reusableCanvas.height !== height) {
+        reusableCanvas.width = width;
+        reusableCanvas.height = height;
+      }
+      return { canvas: reusableCanvas, ctx: reusableCtx };
+    }
+    async function loadAPNG(url) {
+      try {
+        error.value = "";
+        isLoaded.value = false;
+        await cleanup();
+        const response = await fetch(url);
+        if (!response.ok) {
+          throw new Error(`\u52A0\u8F7DAPNG\u5931\u8D25: ${response.status}`);
+        }
+        const arrayBuffer = await response.arrayBuffer();
+        const apng = parseAPNG(arrayBuffer);
+        if (apng instanceof Error) {
+          throw new TypeError(`APNG\u89E3\u6790\u5931\u8D25: ${apng.message}`);
+        }
+        const { canvas, ctx } = getReusableCanvas(apng.width, apng.height);
+        const framePromises = apng.frames.map(async (frame, frameIndex) => {
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+          await frame.createImage();
+          const img = frame.imageElement;
+          ctx.drawImage(img, frame.left, frame.top);
+          const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+          const alias = getAlias(frameIndex);
+          textureMap.set(alias, void 0);
+          ctx.putImageData(imageData, 0, 0);
+          const dataUrl = canvas.toDataURL();
+          Assets.add({ alias, src: dataUrl });
+          const texture = await Assets.load(alias);
+          textureMap.set(alias, texture);
+          if (frameIndex === 0) {
+            sprite.texture = texture;
             resizeSprite();
           }
+          return alias;
+        });
+        frames.value = await Promise.all(framePromises);
+        isLoaded.value = true;
+      } catch (err) {
+        console.error("\u52A0\u8F7DAPNG\u5931\u8D25:", err);
+        error.value = err instanceof Error ? err.message : "\u52A0\u8F7DAPNG\u5931\u8D25";
+        emit("update:status", TickerStatus.stopped);
+      }
+    }
+    function startFrameLoop() {
+      if (timer !== null)
+        return;
+      timer = window.setInterval(() => {
+        if (frames.value.length === 0 || props.status !== TickerStatus.playing) {
+          return;
+        }
+        const currentTexture = textureMap.get(
+          getAlias(index.value)
         );
+        if (currentTexture) {
+          const originIndex = index.value - 1;
+          if (originIndex >= 0 && !props.loop) {
+            Promise.resolve().then(() => sleep(500)).then(() => {
+              Assets.unload(getAlias(originIndex));
+              textureMap.delete(getAlias(originIndex));
+            });
+          }
+          sprite.texture = currentTexture;
+          resizeSprite();
+          index.value = props.loop ? (index.value + 1) % frames.value.length : index.value + 1;
+        } else {
+          if (!props.loop)
+            emit("update:status", TickerStatus.paused);
+        }
+      }, 1e3 / props.frameRate);
+    }
+    function play() {
+      if (!isLoaded.value || frames.value.length <= 1) {
+        return;
+      }
+      emit("update:status", TickerStatus.playing);
+      startFrameLoop();
+    }
+    function pause() {
+      if (timer !== null) {
+        clearInterval(timer);
+        timer = null;
+      }
+      emit("update:status", TickerStatus.paused);
+    }
+    function stop() {
+      if (timer !== null) {
+        clearInterval(timer);
+        timer = null;
+      }
+      index.value = 0;
+      const firstTexture = textureMap.get(getAlias(0));
+      if (firstTexture) {
+        sprite.texture = firstTexture;
+        resizeSprite();
+      }
+      emit("update:status", TickerStatus.stopped);
+    }
+    async function cleanup() {
+      if (timer !== null) {
+        clearInterval(timer);
+        timer = null;
+      }
+      const unloadPromises = [];
+      for (const [alias, texture] of textureMap) {
+        if (texture && texture !== Texture.EMPTY) {
+          unloadPromises.push(Assets.unload(alias));
+        }
+      }
+      await Promise.all(unloadPromises);
+      textureMap.clear();
+      frames.value = [];
+      index.value = 0;
+      isLoaded.value = false;
+      error.value = "";
+      if (reusableCanvas) {
+        reusableCanvas.width = 0;
+        reusableCanvas.height = 0;
+      }
+    }
+    watchEffect(() => {
+      switch (props.status) {
+        case TickerStatus.play:
+          play();
+          break;
+        case TickerStatus.pause:
+          pause();
+          break;
+        case TickerStatus.stop:
+          stop();
+          break;
       }
     });
-    function resizeSprite() {
-      if (!app.renderer?.screen)
-        return;
-      const scaleX = app.screen.width / sprite.texture.width;
-      const scaleY = app.screen.height / sprite.texture.height;
-      const scale = Math.min(scaleX, scaleY);
-      sprite.scale.set(scale);
-      sprite.x = (app.screen.width - sprite.width) / 2;
-      sprite.y = (app.screen.height - sprite.height) / 2;
+    onBeforeUnmount(async () => {
+      await cleanup();
+      reusableCanvas = null;
+      reusableCtx = null;
+    });
+    return (_ctx, _cache) => {
+      return renderSlot(_ctx.$slots, "default");
+    };
+  }
+});
+
+var _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "core",
+  props: {
+    ...props,
+    data: {
+      type: void 0,
+      required: true
+    },
+    frameIndex: {
+      type: Number,
+      default: 0
     }
+  },
+  emits: {
+    ...emits,
+    "load": (e) => e,
+    "update:frameIndex": null,
+    "notFound": (_index) => true
+  },
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const compId = useId();
+    const getAlias = (key) => `${compId}-${key}`;
+    const { sprite, resizeSprite, application } = useSprite(props);
     const textureMap = /* @__PURE__ */ new Map();
+    const completedIndex = ref(0);
+    const enabledData = computed(() => {
+      return props.data.slice(completedIndex.value);
+    });
     watchEffect(() => {
-      for (const key in props.data) {
-        const alias = `${compId}-${key}`;
-        const url = props.data[key];
+      for (const key in enabledData.value) {
+        const theKey = +key + completedIndex.value;
+        const alias = `${compId}-${theKey}`;
+        const src = typeof enabledData.value[key] === "string" ? enabledData.value[key] : enabledData.value[key]?.src;
+        if (!src) {
+          continue;
+        }
         if (textureMap.has(alias)) {
           continue;
         }
         Assets.add({
           alias,
-          src: url
+          src
         });
         textureMap.set(alias, void 0);
         Assets.load(alias).then((res) => {
+          res._meta = enabledData.value[key];
           textureMap.set(alias, res);
-          if (key === "0") {
+          if (props.prerender && theKey === 0) {
             sprite.texture = res;
             resizeSprite();
           }
         });
       }
     });
-    const index = ref(0);
-    let timer = null;
+    emit("load", {
+      application,
+      sprite
+    });
+    const index = useModelComputed({
+      default: 0,
+      key: "frameIndex"
+    }, props, emit);
+    let animationId = null;
+    let lastFrameTime = 0;
     function startFrameLoop() {
-      if (timer !== null)
+      if (animationId !== null)
         return;
-      timer = window.setInterval(() => {
+      lastFrameTime = performance.now();
+      function renderFrame() {
+        const now = performance.now();
+        const frameDuration = 1e3 / props.frameRate;
+        const delta = now - lastFrameTime;
+        if (delta >= frameDuration) {
+          lastFrameTime = now - delta % frameDuration;
+          drawFrame();
+        }
+        if (props.status === TickerStatus.playing) {
+          animationId = requestAnimationFrame(renderFrame);
+        } else {
+          animationId = null;
+        }
+      }
+      function drawFrame() {
         if (props.data.length === 0 || props.status !== TickerStatus.playing) {
           return;
         }
@@ -21129,17 +22383,29 @@ var _sfc_main$3 = /* @__PURE__ */ defineComponent({
                 k: originIndex,
                 v: ""
               });
+              completedIndex.value = originIndex;
             });
           }
           sprite.texture = currentTexture;
           resizeSprite();
           index.value = props.loop ? (index.value + 1) % props.data.length : index.value + 1;
         } else {
+          console.warn(
+            `Texture for index ${index.value} not found. Ensure the texture is loaded.`
+          );
+          emit("notFound", index.value);
           if (!props.loop)
             emit("update:status", TickerStatus.paused);
         }
-      }, 1e3 / props.frameRate);
-    }
+      }
+      animationId = requestAnimationFrame(renderFrame);
+    }
+    onBeforeUnmount(stop);
+    watch(() => props.status, (newStatus) => {
+      newStatus === TickerStatus.play && play();
+      newStatus === TickerStatus.pause && pause();
+      newStatus === TickerStatus.stop && stop();
+    }, { immediate: true });
     function play() {
       if (props.data.length > 0) {
         emit("update:status", TickerStatus.playing);
@@ -21153,34 +22419,21 @@ var _sfc_main$3 = /* @__PURE__ */ defineComponent({
     }
     function stop() {
       emit("update:status", TickerStatus.stopped);
-      if (timer !== null) {
-        clearInterval(timer);
-        timer = null;
+      if (animationId !== null) {
+        cancelAnimationFrame(animationId);
+        animationId = null;
       }
       emit("update:data", []);
       textureMap.clear();
       index.value = 0;
     }
-    onBeforeUnmount(() => {
-      stop();
-      app.stage.removeChild(sprite);
-    });
-    watchEffect(() => {
-      if (props.status === TickerStatus.play) {
-        play();
-      } else if (props.status === TickerStatus.pause) {
-        pause();
-      } else if (props.status === TickerStatus.stop) {
-        stop();
-      }
-    });
     return (_ctx, _cache) => {
       return renderSlot(_ctx.$slots, "default");
     };
   }
 });
 
-var _sfc_main$2 = /* @__PURE__ */ defineComponent({
+var _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "provider",
   setup(__props) {
     initPixiApp();
@@ -21190,6 +22443,155 @@ var _sfc_main$2 = /* @__PURE__ */ defineComponent({
   }
 });
 
+var _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "video",
+  props: {
+    ...props,
+    url: {
+      type: String,
+      required: true
+    }
+  },
+  emits,
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const compId = useId();
+    const getAlias = () => `${compId}-video`;
+    const { sprite, resizeSprite } = useSprite(props);
+    const texture = ref();
+    const video = computed(() => {
+      if (texture.value?.source && texture.value.source.resource) {
+        const resource = texture.value.source.resource;
+        if (resource instanceof HTMLVideoElement) {
+          return resource;
+        }
+      }
+      return null;
+    });
+    const readyDef = useDeferred();
+    const videoError = ref("");
+    readyDef.promise.then(() => {
+      if (props.status === TickerStatus.play) {
+        play();
+      }
+    });
+    watchEffect(() => {
+      video.value && (video.value.loop = props.loop);
+    });
+    onMounted(() => loadVideoTexture(props.url));
+    async function loadVideoTexture(url) {
+      try {
+        videoError.value = "";
+        const alias = getAlias();
+        if (Assets.cache.has(alias)) {
+          await Assets.unload(alias);
+        }
+        Assets.add({ alias, src: url });
+        const videoTexture = await Assets.load(alias);
+        texture.value = videoTexture;
+        sprite.texture = videoTexture;
+        if (video.value) {
+          video.value.loop = props.loop;
+          video.value.muted = true;
+          video.value.crossOrigin = "anonymous";
+          setupVideoEvents(video.value);
+          readyDef.resolve();
+        }
+        resizeSprite();
+        return videoTexture;
+      } catch (error) {
+        console.error("\u52A0\u8F7D\u89C6\u9891\u7EB9\u7406\u5931\u8D25:", error);
+        videoError.value = "\u89C6\u9891\u52A0\u8F7D\u5931\u8D25";
+        return null;
+      }
+    }
+    function setupVideoEvents(video2) {
+      video2.addEventListener("play", () => {
+        if (props.status !== TickerStatus.playing) {
+          emit("update:status", TickerStatus.playing);
+        }
+      });
+      video2.addEventListener("pause", () => {
+        if (props.status !== TickerStatus.paused) {
+          emit("update:status", TickerStatus.paused);
+        }
+      });
+      video2.addEventListener("ended", () => {
+        if (props.loop) {
+          video2.currentTime = 0;
+          video2.play();
+        } else {
+          emit("update:status", TickerStatus.stopped);
+        }
+      });
+      video2.addEventListener("error", (e) => {
+        const error = video2.error;
+        let errorMessage = "\u89C6\u9891\u64AD\u653E\u5931\u8D25";
+        if (error) {
+          switch (error.code) {
+            case error.MEDIA_ERR_ABORTED:
+              errorMessage = "\u89C6\u9891\u64AD\u653E\u88AB\u4E2D\u6B62";
+              break;
+            case error.MEDIA_ERR_NETWORK:
+              errorMessage = "\u7F51\u7EDC\u9519\u8BEF\u5BFC\u81F4\u89C6\u9891\u64AD\u653E\u5931\u8D25";
+              break;
+            case error.MEDIA_ERR_DECODE:
+              errorMessage = "\u89C6\u9891\u89E3\u7801\u5931\u8D25";
+              break;
+            case error.MEDIA_ERR_SRC_NOT_SUPPORTED:
+              errorMessage = "\u4E0D\u652F\u6301\u7684\u89C6\u9891\u683C\u5F0F";
+              break;
+          }
+        }
+        console.error("\u89C6\u9891\u64AD\u653E\u9519\u8BEF:", errorMessage, e);
+        videoError.value = errorMessage;
+        emit("update:status", TickerStatus.stopped);
+      });
+    }
+    async function cleanupVideo() {
+      if (texture.value) {
+        const alias = getAlias();
+        texture.value.destroy(true);
+        texture.value = void 0;
+        if (Assets.cache.has(alias)) {
+          await Assets.unload(alias);
+        }
+      }
+      videoError.value = "";
+    }
+    watchEffect(() => {
+      props.status === TickerStatus.play && play();
+      props.status === TickerStatus.pause && pause();
+      props.status === TickerStatus.stop && stop();
+    });
+    onBeforeUnmount(() => {
+      cleanupVideo();
+    });
+    function play() {
+      if (video.value) {
+        video.value.play().catch((error) => {
+          console.error("\u89C6\u9891\u64AD\u653E\u5931\u8D25:", error);
+          videoError.value = "\u89C6\u9891\u64AD\u653E\u5931\u8D25";
+        });
+      }
+    }
+    function pause() {
+      video.value?.pause();
+    }
+    function stop() {
+      if (video.value) {
+        video.value.pause();
+        video.value.currentTime = 0;
+      }
+      emit("update:status", TickerStatus.stopped);
+    }
+    return (_ctx, _cache) => {
+      return renderSlot(_ctx.$slots, "default");
+    };
+  }
+});
+
 var _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "view",
   props: {
@@ -21229,30 +22631,64 @@ var _sfc_main$1 = /* @__PURE__ */ defineComponent({
 var _sfc_main = defineComponent({
   name: "VkPixiFrame",
   components: {
-    CoreComp: _sfc_main$3,
-    ProviderComp: _sfc_main$2,
-    ViewComp: _sfc_main$1
+    ApngComp: _sfc_main$5,
+    CoreComp: _sfc_main$4,
+    ProviderComp: _sfc_main$3,
+    ViewComp: _sfc_main$1,
+    VideoComp: _sfc_main$2
   },
   props,
-  emits
+  emits,
+  setup(props2) {
+    const isApng = computed(() => {
+      if (!props2.url)
+        return false;
+      const url = props2.url.toLowerCase();
+      return url.includes(".png") && !url.includes(".mp4") && !url.includes(".webm");
+    });
+    const isVideo = computed(() => {
+      if (!props2.url)
+        return false;
+      const url = props2.url.toLowerCase();
+      return url.includes(".mp4") || url.includes(".webm") || url.includes(".mov");
+    });
+    return {
+      isApng,
+      isVideo
+    };
+  }
 });
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ViewComp = resolveComponent("ViewComp");
+  const _component_ApngComp = resolveComponent("ApngComp");
+  const _component_VideoComp = resolveComponent("VideoComp");
   const _component_CoreComp = resolveComponent("CoreComp");
   const _component_ProviderComp = resolveComponent("ProviderComp");
   return openBlock(), createBlock(_component_ProviderComp, null, {
     default: withCtx(() => [
       createVNode(_component_ViewComp),
-      createVNode(
+      _ctx.isApng && _ctx.url ? (openBlock(), createBlock(_component_ApngComp, {
+        key: 0,
+        url: _ctx.url,
+        loop: _ctx.loop,
+        status: _ctx.status,
+        "onUpdate:status": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:status", $event))
+      }, null, 8, ["url", "loop", "status"])) : _ctx.isVideo && _ctx.url ? (openBlock(), createBlock(_component_VideoComp, {
+        key: 1,
+        url: _ctx.url,
+        loop: _ctx.loop,
+        status: _ctx.status,
+        "onUpdate:status": _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:status", $event))
+      }, null, 8, ["url", "loop", "status"])) : (openBlock(), createBlock(
         _component_CoreComp,
-        mergeProps(_ctx.$props, {
-          "onUpdate:status": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:status", $event))
+        mergeProps({ key: 2 }, _ctx.$props, {
+          "onUpdate:status": _cache[2] || (_cache[2] = ($event) => _ctx.$emit("update:status", $event))
         }),
         null,
         16
         /* FULL_PROPS */
-      )
+      ))
     ]),
     _: 1
     /* STABLE */
@@ -21261,11 +22697,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 var VkPixiFrame = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
 var types = /*#__PURE__*/Object.freeze({
-  __proto__: null
+	__proto__: null
 });
 
 VkPixiFrame.install = (app) => {
   app.component(VkPixiFrame.name || "VkPixiFrame", VkPixiFrame);
 };
 
-export { VERSION as $, AbstractRenderer as A, BufferUsage as B, Container as C, DOMAdapter as D, ExtensionType as E, Bounds as F, GpuProgram as G, TexturePool as H, FilterEffect as I, Sprite as J, getAttributeInfoFromFormat as K, unsafeEvalSupported as L, Matrix as M, uid as N, Rectangle as O, Point as P, SystemRunner as Q, RendererType as R, STENCIL_MODES as S, Ticker as T, UPDATE_PRIORITY as U, multiplyColors as V, UPDATE_VISIBLE as W, UPDATE_COLOR as X, UPDATE_BLEND as Y, Color as Z, getLocalBounds as _, EventEmitter as a, deprecation as a0, v8_0_0 as a1, RendererInitHook as a2, Geometry as a3, compileHighShaderGlProgram as a4, colorBitGl as a5, generateTextureBatchBitGl as a6, roundPixelsBitGl as a7, getBatchSamplersUniformGroup as a8, ViewContainer as a9, GraphicsContext as aa, TextStyle as ab, generateTextStyleKey as ac, BatchableGraphics as ad, getAdjustedBlendModeBlend as ae, ViewableBuffer as af, TextureStyle as ag, BitmapFontManager as ah, getBitmapTextLayout as ai, Cache as aj, updateQuadBounds as ak, CanvasTextMetrics as al, nextPow2 as am, fontStringFromTextStyle as an, getCanvasFillStyle as ao, GraphicsContextSystem as ap, VkPixiFrame as aq, _sfc_main$3 as ar, _sfc_main$2 as as, _sfc_main$1 as at, types as au, Buffer as b, BindGroup as c, createIdFromString as d, extensions as e, fastCopy as f, getTextureBatchBindGroup as g, CLEAR as h, CanvasSource as i, TextureSource as j, UniformGroup as k, CanvasPool as l, compileHighShaderGpuProgram as m, colorBit as n, generateTextureBatchBit as o, roundPixelsBit as p, getMaxTexturesPerBatch as q, removeItems as r, Shader as s, Texture as t, GlProgram as u, TextureMatrix as v, warn as w, DefaultBatcher as x, BigPool as y, getGlobalBounds as z };
+export { VERSION as $, AbstractRenderer as A, BufferUsage as B, Container as C, DOMAdapter as D, ExtensionType as E, Bounds as F, GpuProgram as G, TexturePool as H, FilterEffect as I, Sprite as J, getAttributeInfoFromFormat as K, unsafeEvalSupported as L, Matrix as M, uid as N, Rectangle as O, Point as P, SystemRunner as Q, RendererType as R, STENCIL_MODES as S, Ticker as T, UPDATE_PRIORITY as U, multiplyColors as V, UPDATE_VISIBLE as W, UPDATE_COLOR as X, UPDATE_BLEND as Y, Color as Z, getLocalBounds as _, EventEmitter as a, deprecation as a0, v8_0_0 as a1, RendererInitHook as a2, Geometry as a3, compileHighShaderGlProgram as a4, colorBitGl as a5, generateTextureBatchBitGl as a6, roundPixelsBitGl as a7, getBatchSamplersUniformGroup as a8, ViewContainer as a9, GraphicsContext as aa, TextStyle as ab, generateTextStyleKey as ac, BatchableGraphics as ad, getAdjustedBlendModeBlend as ae, ViewableBuffer as af, TextureStyle as ag, BitmapFontManager as ah, getBitmapTextLayout as ai, Cache as aj, updateQuadBounds as ak, CanvasTextMetrics as al, nextPow2 as am, fontStringFromTextStyle as an, getCanvasFillStyle as ao, GraphicsContextSystem as ap, VkPixiFrame as aq, _sfc_main$5 as ar, _sfc_main$4 as as, _sfc_main$3 as at, _sfc_main$2 as au, _sfc_main$1 as av, types as aw, Buffer as b, BindGroup as c, createIdFromString as d, extensions as e, fastCopy as f, getTextureBatchBindGroup as g, CLEAR as h, CanvasSource as i, TextureSource as j, UniformGroup as k, CanvasPool as l, compileHighShaderGpuProgram as m, colorBit as n, generateTextureBatchBit as o, roundPixelsBit as p, getMaxTexturesPerBatch as q, removeItems as r, Shader as s, Texture as t, GlProgram as u, TextureMatrix as v, warn as w, DefaultBatcher as x, BigPool as y, getGlobalBounds as z };