@smallwei/avue 3.9.1 → 3.9.3

package/es/src/plugin/video/index.mjs

@@ -1,55 +1,101 @@
-/*! Avue.js v3.9.1 | (c) 2017-2026 Smallwei | Released under the MIT License. */
-class RecordVideo {
-    constructor(videoObj) {
-        this.video = videoObj;
-        this.mediaRecorder = null;
-        this.chunks = [];
-    }
-    init() {
-        return new Promise((resolve, reject) => {
-            navigator.mediaDevices
-                .getUserMedia({
-                audio: true,
-                video: true,
-            })
-                .then((stream) => {
-                if ('srcObject' in this.video) {
-                    this.video.srcObject = stream;
-                }
-                else {
-                    this.video.src = window.URL.createObjectURL(stream);
-                }
-                this.video.addEventListener('loadmetadata', () => {
-                    this.video.play();
-                });
-                this.mediaRecorder = new MediaRecorder(stream);
-                this.mediaRecorder.addEventListener('dataavailable', (e) => {
-                    this.chunks.push(e.data);
-                });
-                resolve();
-            })
-                .catch((error) => {
-                reject(error);
-            });
-        });
-    }
-    startRecord() {
-        if (this.mediaRecorder && this.mediaRecorder.state === 'inactive') {
-            this.mediaRecorder.start();
-        }
-    }
-    stopRecord() {
-        if (this.mediaRecorder && this.mediaRecorder.state === 'recording') {
-            this.mediaRecorder.stop();
-        }
-    }
-    isSupport() {
-        const flag = navigator.mediaDevices && navigator.mediaDevices.getUserMedia;
-        if (flag) {
-            return true;
-        }
-        return false;
-    }
-}
-
-export { RecordVideo as default };
+/*! Avue.js v3.9.3 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+class RecordVideo {
+    constructor(videoObj) {
+        this.video = videoObj;
+        this.mediaRecorder = null;
+        this.stream = null;
+        this.chunks = [];
+        this.objectUrl = null;
+        this.destroyed = false;
+        this.handleLoadedMetadata = () => {
+            const playResult = this.video.play();
+            if (playResult && typeof playResult.catch === 'function') {
+                playResult.catch(() => undefined);
+            }
+        };
+        this.handleDataAvailable = (event) => {
+            if (event.data && event.data.size > 0) {
+                this.chunks.push(event.data);
+            }
+        };
+    }
+    init() {
+        if (!this.isSupport()) {
+            return Promise.reject(new Error('MediaDevices.getUserMedia is not supported'));
+        }
+        this.destroyed = false;
+        return navigator.mediaDevices
+            .getUserMedia({
+            audio: true,
+            video: true,
+        })
+            .then((stream) => {
+            if (this.destroyed) {
+                stream.getTracks().forEach((track) => track.stop());
+                return;
+            }
+            this.stream = stream;
+            if ('srcObject' in this.video) {
+                this.video.srcObject = stream;
+            }
+            else {
+                this.objectUrl = window.URL.createObjectURL(stream);
+                this.video.src = this.objectUrl;
+            }
+            this.video.addEventListener('loadedmetadata', this.handleLoadedMetadata);
+            this.mediaRecorder = new MediaRecorder(stream);
+            this.mediaRecorder.addEventListener('dataavailable', this.handleDataAvailable);
+        })
+            .catch((error) => {
+            this.destroy();
+            throw error;
+        });
+    }
+    startRecord() {
+        if (this.mediaRecorder && this.mediaRecorder.state === 'inactive') {
+            this.chunks = [];
+            this.mediaRecorder.start();
+        }
+    }
+    stopRecord() {
+        if (this.mediaRecorder && this.mediaRecorder.state === 'recording') {
+            this.mediaRecorder.stop();
+        }
+    }
+    isSupport() {
+        const flag = typeof navigator !== 'undefined' &&
+            navigator.mediaDevices &&
+            navigator.mediaDevices.getUserMedia;
+        if (flag) {
+            return true;
+        }
+        return false;
+    }
+    destroy() {
+        this.destroyed = true;
+        this.video.removeEventListener('loadedmetadata', this.handleLoadedMetadata);
+        if (this.mediaRecorder) {
+            this.mediaRecorder.removeEventListener('dataavailable', this.handleDataAvailable);
+            if (this.mediaRecorder.state !== 'inactive') {
+                this.mediaRecorder.stop();
+            }
+        }
+        if (this.stream) {
+            this.stream.getTracks().forEach((track) => track.stop());
+        }
+        this.video.pause();
+        if ('srcObject' in this.video) {
+            this.video.srcObject = null;
+        }
+        if (this.objectUrl) {
+            window.URL.revokeObjectURL(this.objectUrl);
+            this.video.removeAttribute('src');
+        }
+        this.mediaRecorder = null;
+        this.stream = null;
+        this.objectUrl = null;
+        this.chunks = [];
+    }
+}
+
+export { RecordVideo as default };

package/es/src/plugin/watermark/index.mjs

@@ -1,118 +1,118 @@
-/*! Avue.js v3.9.1 | (c) 2017-2026 Smallwei | Released under the MIT License. */
-import WaterMark from './watermark.mjs';
-import { dataURLtoFile } from '../../utils/util.mjs';
-
-let canvas;
-let ctx;
-const configDefault = {
-    width: 200,
-    height: 200,
-};
-const config = {
-    text: 'avueJS',
-    fontFamily: 'microsoft yahei',
-    color: '#999',
-    fontSize: 16,
-    opacity: 100,
-    bottom: 10,
-    right: 10,
-    ratio: 1,
-};
-function $Watermark (opt = {}) {
-    return new WaterMark(opt);
-}
-function detailImg(file, option = {}) {
-    return new Promise((resolve) => {
-        const { text, fontFamily, color, fontSize, opacity, bottom, right, ratio } = option;
-        initParams();
-        fileToBase64(file, initImg);
-        function initParams() {
-            config.text = text || config.text;
-            config.fontFamily = fontFamily || config.fontFamily;
-            config.color = color || config.color;
-            config.fontSize = fontSize || config.fontSize;
-            config.opacity = opacity || config.opacity;
-            config.bottom = bottom || config.bottom;
-            config.right = right || config.right;
-            config.ratio = ratio || config.ratio;
-        }
-        function initImg(data) {
-            const img = new Image();
-            img.src = data;
-            img.onload = function () {
-                const width = img.width;
-                const height = img.height;
-                cretedCanvas(width, height);
-                ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(img, 0, 0, width, height);
-                setText(width, height);
-                const currentCanvas = document.getElementById('canvas');
-                resolve(dataURLtoFile(currentCanvas.toDataURL(file.type, config.ratio), file.name));
-            };
-        }
-        function cretedCanvas(width, height) {
-            canvas = document.getElementById('canvas');
-            if (canvas === null) {
-                canvas = document.createElement('canvas');
-                canvas.id = 'canvas';
-                canvas.className = 'avue-canvas';
-                document.body.appendChild(canvas);
-            }
-            ctx = canvas.getContext('2d');
-            canvas.width = width;
-            canvas.height = height;
-        }
-        function setText(width, height) {
-            const txt = config.text;
-            const param = calcParam(txt, width, height);
-            if (!ctx)
-                return;
-            ctx.font = param.fontSize + 'px ' + config.fontFamily;
-            ctx.fillStyle = config.color;
-            ctx.globalAlpha = config.opacity / 100;
-            ctx.fillText(txt, param.x, param.y);
-        }
-        function calcParam(txt, width, height) {
-            let x;
-            let y;
-            const calcFontSize = config.fontSize / configDefault.width;
-            const fontSize = calcFontSize * width;
-            if (config.bottom) {
-                y = configDefault.height - config.bottom;
-            }
-            else {
-                y = config.top;
-            }
-            if (config.right) {
-                x = configDefault.width - config.right;
-            }
-            else {
-                x = config.left;
-            }
-            if (!ctx) {
-                return { x: 0, y: 0, fontSize };
-            }
-            ctx.font = config.fontSize + 'px ' + config.fontFamily;
-            const txtWidth = Number(ctx.measureText(txt).width);
-            x = x - txtWidth;
-            const calcPosX = x / configDefault.width;
-            const calcPosY = y / configDefault.height;
-            x = calcPosX * width;
-            y = calcPosY * height;
-            return {
-                x,
-                y,
-                fontSize,
-            };
-        }
-        function fileToBase64(rawFile, callback) {
-            const reader = new FileReader();
-            reader.readAsDataURL(rawFile);
-            reader.onload = function (e) {
-                var _a;
-                callback((_a = e.target) === null || _a === void 0 ? void 0 : _a.result);
-            };
-        }
-    });
-}
-
-export { $Watermark as default, detailImg };
+/*! Avue.js v3.9.3 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+import WaterMark from './watermark.mjs';
+import { dataURLtoFile } from '../../utils/util.mjs';
+
+let canvas;
+let ctx;
+const configDefault = {
+    width: 200,
+    height: 200,
+};
+const config = {
+    text: 'avueJS',
+    fontFamily: 'microsoft yahei',
+    color: '#999',
+    fontSize: 16,
+    opacity: 100,
+    bottom: 10,
+    right: 10,
+    ratio: 1,
+};
+function $Watermark (opt = {}) {
+    return new WaterMark(opt);
+}
+function detailImg(file, option = {}) {
+    return new Promise((resolve) => {
+        const { text, fontFamily, color, fontSize, opacity, bottom, right, ratio } = option;
+        initParams();
+        fileToBase64(file, initImg);
+        function initParams() {
+            config.text = text || config.text;
+            config.fontFamily = fontFamily || config.fontFamily;
+            config.color = color || config.color;
+            config.fontSize = fontSize || config.fontSize;
+            config.opacity = opacity || config.opacity;
+            config.bottom = bottom || config.bottom;
+            config.right = right || config.right;
+            config.ratio = ratio || config.ratio;
+        }
+        function initImg(data) {
+            const img = new Image();
+            img.src = data;
+            img.onload = function () {
+                const width = img.width;
+                const height = img.height;
+                cretedCanvas(width, height);
+                ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(img, 0, 0, width, height);
+                setText(width, height);
+                const currentCanvas = document.getElementById('canvas');
+                resolve(dataURLtoFile(currentCanvas.toDataURL(file.type, config.ratio), file.name));
+            };
+        }
+        function cretedCanvas(width, height) {
+            canvas = document.getElementById('canvas');
+            if (canvas === null) {
+                canvas = document.createElement('canvas');
+                canvas.id = 'canvas';
+                canvas.className = 'avue-canvas';
+                document.body.appendChild(canvas);
+            }
+            ctx = canvas.getContext('2d');
+            canvas.width = width;
+            canvas.height = height;
+        }
+        function setText(width, height) {
+            const txt = config.text;
+            const param = calcParam(txt, width, height);
+            if (!ctx)
+                return;
+            ctx.font = param.fontSize + 'px ' + config.fontFamily;
+            ctx.fillStyle = config.color;
+            ctx.globalAlpha = config.opacity / 100;
+            ctx.fillText(txt, param.x, param.y);
+        }
+        function calcParam(txt, width, height) {
+            let x;
+            let y;
+            const calcFontSize = config.fontSize / configDefault.width;
+            const fontSize = calcFontSize * width;
+            if (config.bottom) {
+                y = configDefault.height - config.bottom;
+            }
+            else {
+                y = config.top;
+            }
+            if (config.right) {
+                x = configDefault.width - config.right;
+            }
+            else {
+                x = config.left;
+            }
+            if (!ctx) {
+                return { x: 0, y: 0, fontSize };
+            }
+            ctx.font = config.fontSize + 'px ' + config.fontFamily;
+            const txtWidth = Number(ctx.measureText(txt).width);
+            x = x - txtWidth;
+            const calcPosX = x / configDefault.width;
+            const calcPosY = y / configDefault.height;
+            x = calcPosX * width;
+            y = calcPosY * height;
+            return {
+                x,
+                y,
+                fontSize,
+            };
+        }
+        function fileToBase64(rawFile, callback) {
+            const reader = new FileReader();
+            reader.readAsDataURL(rawFile);
+            reader.onload = function (e) {
+                var _a;
+                callback((_a = e.target) === null || _a === void 0 ? void 0 : _a.result);
+            };
+        }
+    });
+}
+
+export { $Watermark as default, detailImg };

package/es/src/plugin/watermark/watermark.mjs

@@ -1,51 +1,51 @@
-/*! Avue.js v3.9.1 | (c) 2017-2026 Smallwei | Released under the MIT License. */
-import { randomId } from '../../utils/util.mjs';
-
-class WaterMark {
-    constructor(opt = {}) {
-        this.CONTAINERID = randomId();
-        this.drawCanvas = this.drawCanvas.bind(this);
-        this.parentObserver = this.parentObserver.bind(this);
-        this.Repaint = this.Repaint.bind(this);
-        this.styleStr = '';
-        this.isOberserve = false;
-        this.init(opt);
-        this.drawCanvas();
-        this.parentObserver();
-    }
-    init(opt) {
-        this.option = Object.assign({
-            width: 400,
-            height: 200,
-            text: 'avueJS',
-            fontSize: '30px',
-            fontStyle: 'microsoft yahei',
-            textAlign: 'center',
-            color: 'rgba(100,100,100,0.15)',
-            degree: -20,
-        }, opt);
-    }
-    drawCanvas() {
-        this.isOberserve = true;
-        const divContainer = document.createElement('div');
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
-        divContainer.id = this.CONTAINERID;
-        canvas.width = this.option.width;
-        canvas.height = this.option.height;
-        if (!context)
-            return;
-        context.font = `${this.option.fontSize} ${this.option.fontStyle}`;
-        context.textAlign = this.option.textAlign;
-        context.fillStyle = this.option.color;
-        context.translate(canvas.width / 2, canvas.height / 2);
-        context.rotate((this.option.degree * Math.PI) / 180);
-        context.fillText(this.option.text, 0, 0);
-        const backgroundUrl = canvas.toDataURL('image/png');
-        const flag = this.option.id;
-        let el = null;
-        if (flag)
-            el = document.getElementById(flag);
+/*! Avue.js v3.9.3 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+import { randomId } from '../../utils/util.mjs';
+
+class WaterMark {
+    constructor(opt = {}) {
+        this.CONTAINERID = randomId();
+        this.drawCanvas = this.drawCanvas.bind(this);
+        this.parentObserver = this.parentObserver.bind(this);
+        this.Repaint = this.Repaint.bind(this);
+        this.styleStr = '';
+        this.isOberserve = false;
+        this.init(opt);
+        this.drawCanvas();
+        this.parentObserver();
+    }
+    init(opt) {
+        this.option = Object.assign({
+            width: 400,
+            height: 200,
+            text: 'avueJS',
+            fontSize: '30px',
+            fontStyle: 'microsoft yahei',
+            textAlign: 'center',
+            color: 'rgba(100,100,100,0.15)',
+            degree: -20,
+        }, opt);
+    }
+    drawCanvas() {
+        this.isOberserve = true;
+        const divContainer = document.createElement('div');
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+        divContainer.id = this.CONTAINERID;
+        canvas.width = this.option.width;
+        canvas.height = this.option.height;
+        if (!context)
+            return;
+        context.font = `${this.option.fontSize} ${this.option.fontStyle}`;
+        context.textAlign = this.option.textAlign;
+        context.fillStyle = this.option.color;
+        context.translate(canvas.width / 2, canvas.height / 2);
+        context.rotate((this.option.degree * Math.PI) / 180);
+        context.fillText(this.option.text, 0, 0);
+        const backgroundUrl = canvas.toDataURL('image/png');
+        const flag = this.option.id;
+        let el = null;
+        if (flag)
+            el = document.getElementById(flag);
         this.styleStr = `
       position:${flag ? 'absolute' : 'fixed'};
       top:0;
@@ -55,58 +55,58 @@ class WaterMark {
       z-index:9999;
       pointer-events:none;
       background-repeat:repeat;
-      background-image:url('${backgroundUrl}')`;
-        divContainer.setAttribute('style', this.styleStr);
-        if (flag && el) {
-            el.appendChild(divContainer);
-        }
-        else {
-            document.body.appendChild(divContainer);
-        }
-        this.wmObserver(divContainer);
-        this.isOberserve = false;
-    }
-    wmObserver(divContainer) {
-        const wmConf = { attributes: true, childList: true, characterData: true };
-        const wmObserver = new MutationObserver((mo) => {
-            if (!this.isOberserve) {
-                const target = mo[0].target;
-                target.setAttribute('style', this.styleStr);
-                target.setAttribute('id', this.CONTAINERID);
-                wmObserver.takeRecords();
-            }
-        });
-        wmObserver.observe(divContainer, wmConf);
-    }
-    parentObserver() {
-        var _a;
-        const bodyObserver = new MutationObserver(() => {
-            if (!this.isOberserve) {
-                const wm = document.querySelector(`#${this.CONTAINERID}`);
-                if (!wm) {
-                    this.drawCanvas();
-                }
-                else if (wm.getAttribute('style') !== this.styleStr) {
-                    wm.setAttribute('style', this.styleStr);
-                }
-            }
-        });
-        const parentNode = (_a = document.querySelector(`#${this.CONTAINERID}`)) === null || _a === void 0 ? void 0 : _a.parentNode;
-        if (parentNode) {
-            bodyObserver.observe(parentNode, { childList: true });
-        }
-    }
-    Repaint(opt = {}) {
-        this.remove();
-        this.init(opt);
-        this.drawCanvas();
-    }
-    remove() {
-        var _a;
-        this.isOberserve = true;
-        const wm = document.querySelector(`#${this.CONTAINERID}`);
-        (_a = wm === null || wm === void 0 ? void 0 : wm.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(wm);
-    }
-}
-
-export { WaterMark as default };
+      background-image:url('${backgroundUrl}')`;
+        divContainer.setAttribute('style', this.styleStr);
+        if (flag && el) {
+            el.appendChild(divContainer);
+        }
+        else {
+            document.body.appendChild(divContainer);
+        }
+        this.wmObserver(divContainer);
+        this.isOberserve = false;
+    }
+    wmObserver(divContainer) {
+        const wmConf = { attributes: true, childList: true, characterData: true };
+        const wmObserver = new MutationObserver((mo) => {
+            if (!this.isOberserve) {
+                const target = mo[0].target;
+                target.setAttribute('style', this.styleStr);
+                target.setAttribute('id', this.CONTAINERID);
+                wmObserver.takeRecords();
+            }
+        });
+        wmObserver.observe(divContainer, wmConf);
+    }
+    parentObserver() {
+        var _a;
+        const bodyObserver = new MutationObserver(() => {
+            if (!this.isOberserve) {
+                const wm = document.querySelector(`#${this.CONTAINERID}`);
+                if (!wm) {
+                    this.drawCanvas();
+                }
+                else if (wm.getAttribute('style') !== this.styleStr) {
+                    wm.setAttribute('style', this.styleStr);
+                }
+            }
+        });
+        const parentNode = (_a = document.querySelector(`#${this.CONTAINERID}`)) === null || _a === void 0 ? void 0 : _a.parentNode;
+        if (parentNode) {
+            bodyObserver.observe(parentNode, { childList: true });
+        }
+    }
+    Repaint(opt = {}) {
+        this.remove();
+        this.init(opt);
+        this.drawCanvas();
+    }
+    remove() {
+        var _a;
+        this.isOberserve = true;
+        const wm = document.querySelector(`#${this.CONTAINERID}`);
+        (_a = wm === null || wm === void 0 ? void 0 : wm.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(wm);
+    }
+}
+
+export { WaterMark as default };