@xpadev-net/niconicomments 0.2.55 → 0.2.57

package/dist/bundle.js

@@ -1,5 +1,5 @@
 /*!
-  niconicomments.js v0.2.55
+  niconicomments.js v0.2.57
   (c) 2021 xpadev-net https://xpadev.net
   Released under the MIT License.
 */
@@ -48,6 +48,11 @@
         setPlugins: setPlugins
     });
 
+    let isDebug = false;
+    const setIsDebug = (val) => {
+        isDebug = val;
+    };
+
     let defaultConfig;
     const updateConfig = (config) => {
         defaultConfig = config;
@@ -147,7 +152,7 @@
     };
 
     const hex2rgb = (hex) => {
-        if (hex.slice(0, 1) === "#")
+        if (hex.startsWith("#"))
             hex = hex.slice(1);
         if (hex.length === 3)
             hex =
@@ -162,7 +167,7 @@
         });
     };
     const hex2rgba = (hex) => {
-        if (hex.slice(0, 1) === "#")
+        if (hex.startsWith("#"))
             hex = hex.slice(1);
         if (hex.length === 4)
             hex =
@@ -252,6 +257,7 @@
                 "mail",
                 "user_id",
                 "layer",
+                "is_my_post",
             ]),
             comments: (i) => {
                 if (typeof i !== "object")
@@ -390,27 +396,30 @@
         },
         nicoScript: {
             range: {
-                target: (i) => typeof i === "string" && !!i.match(/^(?:\u6295?\u30b3\u30e1|\u5168)$/),
+                target: (i) => typeof i === "string" &&
+                    !!RegExp(/^(?:\u6295?\u30b3\u30e1|\u5168)$/).exec(i),
             },
             replace: {
-                range: (i) => typeof i === "string" && !!i.match(/^[\u5358\u5168]$/),
+                range: (i) => typeof i === "string" && !!RegExp(/^[\u5358\u5168]$/).exec(i),
                 target: (i) => typeof i === "string" &&
-                    !!i.match(/^(?:\u30b3\u30e1|\u6295\u30b3\u30e1|\u5168|\u542b\u3080|\u542b\u307e\u306a\u3044)$/),
+                    !!RegExp(/^(?:\u30b3\u30e1|\u6295\u30b3\u30e1|\u5168|\u542b\u3080|\u542b\u307e\u306a\u3044)$/).exec(i),
                 condition: (i) => typeof i === "string" &&
-                    !!i.match(/^(?:\u90e8\u5206\u4e00\u81f4|\u5b8c\u5168\u4e00\u81f4)$/),
+                    !!RegExp(/^(?:\u90e8\u5206\u4e00\u81f4|\u5b8c\u5168\u4e00\u81f4)$/).exec(i),
             },
         },
         comment: {
-            font: (i) => typeof i === "string" && !!i.match(/^(?:gothic|mincho|defont)$/),
-            loc: (i) => typeof i === "string" && !!i.match(/^(?:ue|naka|shita)$/),
-            size: (i) => typeof i === "string" && !!i.match(/^(?:big|medium|small)$/),
+            font: (i) => typeof i === "string" && !!RegExp(/^(?:gothic|mincho|defont)$/).exec(i),
+            loc: (i) => typeof i === "string" && !!RegExp(/^(?:ue|naka|shita)$/).exec(i),
+            size: (i) => typeof i === "string" && !!RegExp(/^(?:big|medium|small)$/).exec(i),
             command: {
-                key: (i) => typeof i === "string" && !!i.match(/^(?:full|ender|_live|invisible)$/),
+                key: (i) => typeof i === "string" &&
+                    !!RegExp(/^(?:full|ender|_live|invisible)$/).exec(i),
             },
             color: (i) => typeof i === "string" && Object.keys(colors).includes(i),
-            colorCode: (i) => typeof i === "string" && !!i.match(/^#(?:[0-9a-z]{3}|[0-9a-z]{6})$/),
+            colorCode: (i) => typeof i === "string" &&
+                !!RegExp(/^#(?:[0-9a-z]{3}|[0-9a-z]{6})$/).exec(i),
             colorCodeAllowAlpha: (i) => typeof i === "string" &&
-                !!i.match(/^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/),
+                !!RegExp(/^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/).exec(i),
         },
         config: {
             initOptions: (item) => {
@@ -429,7 +438,7 @@
                     scale: isNumber,
                     config: isObject,
                     format: (i) => typeof i === "string" &&
-                        !!i.match(/^(XMLDocument|niconicome|formatted|legacy|legacyOwner|owner|v1|default|empty)$/),
+                        !!RegExp(/^(XMLDocument|niconicome|formatted|legacy|legacyOwner|owner|v1|default|empty)$/).exec(i),
                     video: (i) => typeof i === "object" && i.nodeName === "VIDEO",
                 };
                 for (const key of Object.keys(keys)) {
@@ -442,6 +451,20 @@
                 return true;
             },
         },
+        internal: {
+            CommentMeasuredContentItem: (i) => objectVerify(i, ["content", "slicedContent", "width"]),
+            CommentMeasuredContentItemArray: (i) => Array.isArray(i) &&
+                i.every(typeGuard.internal.CommentMeasuredContentItem),
+            MultiConfigItem: (i) => typeof i === "object" && objectVerify(i, ["html5", "flash"]),
+            HTML5Fonts: (i) => i === "defont" || i === "mincho" || i === "gothic",
+            MeasureInput: (i) => objectVerify(i, [
+                "font",
+                "content",
+                "lineHeight",
+                "charSize",
+                "lineCount",
+            ]),
+        },
     };
     const objectVerify = (item, keys) => {
         if (typeof item !== "object" || !item)
@@ -468,13 +491,10 @@
     });
 
     const getConfig = (input, isFlash = false) => {
-        if (Object.prototype.hasOwnProperty.call(input, "html5") &&
-            Object.prototype.hasOwnProperty.call(input, "flash")) {
+        if (typeGuard.internal.MultiConfigItem(input)) {
             return input[isFlash ? "flash" : "html5"];
         }
-        else {
-            return input;
-        }
+        return input;
     };
 
     const isLineBreakResize = (comment) => {
@@ -535,12 +555,12 @@
         processNicoscript(comment, commands);
         const defaultCommand = getDefaultCommand(comment.vpos);
         applyNicoScriptReplace(comment, commands);
-        const size = commands.size || defaultCommand.size || "medium";
+        const size = commands.size ?? defaultCommand.size ?? "medium";
         return {
             size: size,
-            loc: commands.loc || defaultCommand.loc || "naka",
-            color: commands.color || defaultCommand.color || "#FFFFFF",
-            font: commands.font || defaultCommand.font || "defont",
+            loc: commands.loc ?? defaultCommand.loc ?? "naka",
+            color: commands.color ?? defaultCommand.color ?? "#FFFFFF",
+            font: commands.font ?? defaultCommand.font ?? "defont",
             fontSize: getConfig(config.fontSize, isFlash)[size].default,
             long: commands.long ? Math.floor(Number(commands.long) * 100) : 300,
             flash: isFlash,
@@ -551,26 +571,27 @@
             strokeColor: commands.strokeColor,
             wakuColor: commands.wakuColor,
             fillColor: commands.fillColor,
+            button: commands.button,
         };
     };
     const parseBrackets = (input) => {
         const content = input.split(""), result = [];
         let quote = "", last_i = "", string = "";
         for (const i of content) {
-            if (i.match(/["'\u300c]/) && quote === "") {
+            if (RegExp(/^["'\u300c]$/).exec(i) && quote === "") {
                 quote = i;
             }
-            else if (i.match(/["']/) && quote === i && last_i !== "\\") {
+            else if (RegExp(/^["']$/).exec(i) && quote === i && last_i !== "\\") {
                 result.push(string.replaceAll("\\n", "\n"));
                 quote = "";
                 string = "";
             }
-            else if (i.match(/\u300d/) && quote === "\u300c") {
+            else if (i === "\u300d" && quote === "\u300c") {
                 result.push(string);
                 quote = "";
                 string = "";
             }
-            else if (quote === "" && i.match(/\s+/)) {
+            else if (quote === "" && RegExp(/^\s+$/).exec(i)) {
                 if (string) {
                     result.push(string);
                     string = "";
@@ -598,10 +619,10 @@
             start: comment.vpos,
             long: commands.long === undefined ? undefined : Math.floor(commands.long * 100),
             keyword: result[0],
-            replace: result[1] || "",
-            range: result[2] || "\u5358",
-            target: result[3] || "\u30b3\u30e1",
-            condition: result[4] || "\u90e8\u5206\u4e00\u81f4",
+            replace: result[1] ?? "",
+            range: result[2] ?? "\u5358",
+            target: result[3] ?? "\u30b3\u30e1",
+            condition: result[4] ?? "\u90e8\u5206\u4e00\u81f4",
             color: commands.color,
             size: commands.size,
             font: commands.font,
@@ -624,8 +645,14 @@
         });
     };
     const processNicoscript = (comment, commands) => {
-        const nicoscript = comment.content.match(/^[@\uff20](\u30c7\u30d5\u30a9\u30eb\u30c8|\u7f6e\u63db|\u9006|\u30b3\u30e1\u30f3\u30c8\u7981\u6b62|\u30b7\u30fc\u30af\u7981\u6b62|\u30b8\u30e3\u30f3\u30d7)(.*)/);
-        if (!nicoscript || !comment.owner)
+        const nicoscript = RegExp(/^[@\uff20](\u30c7\u30d5\u30a9\u30eb\u30c8|\u7f6e\u63db|\u9006|\u30b3\u30e1\u30f3\u30c8\u7981\u6b62|\u30b7\u30fc\u30af\u7981\u6b62|\u30b8\u30e3\u30f3\u30d7|\u30dc\u30bf\u30f3)(?:\s(.+))?/).exec(comment.content);
+        if (!nicoscript)
+            return;
+        if (nicoscript[1] === "\u30dc\u30bf\u30f3" && nicoscript[2]) {
+            processAtButton(comment, commands);
+            return;
+        }
+        if (!comment.owner)
             return;
         commands.invisible = true;
         if (nicoscript[1] === "\u30c7\u30d5\u30a9\u30eb\u30c8") {
@@ -663,8 +690,8 @@
         });
     };
     const processReverseScript = (comment, commands) => {
-        const reverse = comment.content.match(/^[@\uff20]\u9006(?:\s+)?(\u5168|\u30b3\u30e1|\u6295\u30b3\u30e1)?/);
-        if (!reverse || !reverse[1] || !typeGuard.nicoScript.range.target(reverse[1]))
+        const reverse = RegExp(/^[@\uff20]\u9006(?:\s+)?(\u5168|\u30b3\u30e1|\u6295\u30b3\u30e1)?/).exec(comment.content);
+        if (!reverse?.[1] || !typeGuard.nicoScript.range.target(reverse[1]))
             return;
         if (commands.long === undefined) {
             commands.long = 30;
@@ -694,8 +721,8 @@
         });
     };
     const processJumpScript$1 = (comment, commands, input) => {
-        const options = input.match(/\s*((?:sm|so|nm|\uff53\uff4d|\uff53\uff4f|\uff4e\uff4d)?[1-9\uff11-\uff19][0-9\uff11-\uff19]*|#[0-9]+:[0-9]+(?:\.[0-9]+)?)\s+(.*)/);
-        if (!options || !options[1])
+        const options = RegExp(/\s*((?:sm|so|nm|\uff53\uff4d|\uff53\uff4f|\uff4e\uff4d)?[1-9\uff11-\uff19][0-9\uff11-\uff19]*|#[0-9]+:[0-9]+(?:\.[0-9]+)?)\s+(.*)/).exec(input);
+        if (!options?.[1])
             return;
         nicoScripts.jump.unshift({
             start: comment.vpos,
@@ -704,6 +731,27 @@
             message: options[2],
         });
     };
+    const processAtButton = (comment, commands) => {
+        const args = parseBrackets(comment.content);
+        if (args[1] === undefined)
+            return;
+        commands.invisible = false;
+        const content = RegExp(/^(?:(?<before>.*?)\[)?(?<body>.*?)(?:\](?<after>[^\]]*?))?$/su).exec(args[1]);
+        const message = {
+            before: content.groups?.before ?? "",
+            body: content.groups?.body ?? "",
+            after: content.groups?.after ?? "",
+        };
+        commands.button = {
+            message,
+            commentMessage: args[2] ?? `${message.before}${message.body}${message.after}`,
+            commentVisible: args[3] !== "\u975e\u8868\u793a",
+            commentMail: args[4]?.split(",") ?? [],
+            limit: Number(args[5] ?? 1),
+            local: comment.mail.includes("local"),
+            hidden: comment.mail.includes("hidden"),
+        };
+    };
     const parseCommands = (comment) => {
         const commands = comment.mail, isFlash = isFlashComment(comment);
         const result = {
@@ -730,22 +778,22 @@
     };
     const parseCommand = (comment, _command, result, isFlash) => {
         const command = _command.toLowerCase();
-        const long = command.match(/^[@\uff20]([0-9.]+)/);
+        const long = RegExp(/^[@\uff20]([0-9.]+)/).exec(command);
         if (long) {
             result.long = Number(long[1]);
             return;
         }
-        const strokeColor = getColor(command.match(/^nico:stroke:(.+)$/));
+        const strokeColor = getColor(RegExp(/^nico:stroke:(.+)$/).exec(command));
         if (strokeColor) {
             result.strokeColor ??= strokeColor;
             return;
         }
-        const rectColor = getColor(command.match(/^nico:waku:(.+)$/));
+        const rectColor = getColor(RegExp(/^nico:waku:(.+)$/).exec(command));
         if (rectColor) {
             result.wakuColor ??= rectColor;
             return;
         }
-        const fillColor = getColor(command.match(/^nico:fill:(.+)$/));
+        const fillColor = getColor(RegExp(/^nico:fill:(.+)$/).exec(command));
         if (fillColor) {
             result.fillColor ??= fillColor;
             return;
@@ -763,7 +811,7 @@
             result.color ??= config.colors[command];
             return;
         }
-        const colorCode = command.match(/^#(?:[0-9a-z]{3}|[0-9a-z]{6})$/);
+        const colorCode = RegExp(/^#(?:[0-9a-z]{3}|[0-9a-z]{6})$/).exec(command);
         if (colorCode && comment.premium) {
             result.color ??= colorCode[0].toUpperCase();
             return;
@@ -948,7 +996,7 @@
     const changeCALayer = (rawData) => {
         const userScoreList = getUsersScore(rawData);
         const filteredComments = removeDuplicateCommentArt(rawData);
-        const commentArts = filteredComments.filter((comment) => (userScoreList[comment.user_id] || 0) >= config.sameCAMinScore &&
+        const commentArts = filteredComments.filter((comment) => (userScoreList[comment.user_id] ?? 0) >= config.sameCAMinScore &&
             !comment.owner);
         const commentArtsGroupedByUser = groupCommentsByUser(commentArts);
         const commentArtsGroupedByTimes = groupCommentsByTime(commentArtsGroupedByUser);
@@ -967,7 +1015,7 @@
                 comment.mail.includes("full")) {
                 userScoreList[comment.user_id] += 5;
             }
-            const lineCount = (comment.content.match(/\r\n|\n|\r/g) || []).length;
+            const lineCount = (comment.content.match(/\r\n|\n|\r/g) ?? []).length;
             if (lineCount > 2) {
                 userScoreList[comment.user_id] += lineCount / 2;
             }
@@ -979,7 +1027,7 @@
         return comments.filter((comment) => {
             const key = `${comment.content}@@${[...comment.mail]
             .sort()
-            .filter((e) => !e.match(/@[\d.]+|184|device:.+|patissier|ca/))
+            .filter((e) => !RegExp(/@[\d.]+|184|device:.+|patissier|ca/).exec(e))
             .join("")}`, lastComment = index[key];
             if (lastComment === undefined) {
                 index[key] = comment;
@@ -1091,7 +1139,7 @@
         return index;
     };
     const getFlashFontName = (font) => {
-        if (font.match("^simsun.+"))
+        if (font === "simsunStrong" || font === "simsunWeak")
             return "simsun";
         if (font === "gothic")
             return "defont";
@@ -1099,11 +1147,11 @@
     };
     const parseContent = (content) => {
         const results = [];
-        const lines = (content.match(/\n|[^\n]+/g) || []).map((val) => Array.from(val.match(/[ -~｡-ﾟ]+|[^ -~｡-ﾟ]+/g) || []));
+        const lines = Array.from(content.match(/\n|[^\n]+/g) ?? []);
         for (const line of lines) {
             const lineContent = parseLine(line);
             const firstContent = lineContent[0];
-            if (firstContent && firstContent.font) {
+            if (firstContent?.font) {
                 results.push(...lineContent.map((val) => {
                     if (!val.font) {
                         val.font = firstContent.font;
@@ -1118,8 +1166,9 @@
         return results;
     };
     const parseLine = (line) => {
+        const parts = Array.from(line.match(/[ -~｡-ﾟ]+|[^ -~｡-ﾟ]+/g) ?? []);
         const lineContent = [];
-        for (const part of line) {
+        for (const part of parts) {
             if (part.match(/[ -~｡-ﾟ]+/g) !== null) {
                 lineContent.push({ content: part, slicedContent: part.split("\n") });
                 continue;
@@ -1200,6 +1249,115 @@
             font: getFlashFontName(secondVal.font),
         });
     };
+    const getButtonParts = (comment) => {
+        let leftParts = undefined;
+        const parts = [];
+        const atButtonPadding = getConfig(config.atButtonPadding, true);
+        const lineOffset = comment.lineOffset;
+        const lineHeight = comment.fontSize * comment.lineHeight;
+        const offsetKey = comment.resizedY ? "resized" : "default";
+        const offsetY = config.commentYPaddingTop[offsetKey] +
+            comment.fontSize *
+                comment.lineHeight *
+                config.commentYOffset[comment.size][offsetKey];
+        let leftOffset = 0, lineCount = 0, isLastButton = false;
+        for (const item of comment.content) {
+            const lines = item.slicedContent;
+            for (let j = 0, n = lines.length; j < n; j++) {
+                const line = lines[j];
+                if (line === undefined)
+                    continue;
+                const posY = (lineOffset + lineCount + 1) * lineHeight + offsetY;
+                const partWidth = item.width[j] ?? 0;
+                if (comment.button && !comment.button.hidden) {
+                    if (!isLastButton && item.isButton) {
+                        leftParts = {
+                            type: "left",
+                            left: leftOffset + atButtonPadding,
+                            top: posY - lineHeight + atButtonPadding,
+                            width: partWidth + atButtonPadding,
+                            height: lineHeight,
+                        };
+                        leftOffset += atButtonPadding * 2;
+                    }
+                    else if (isLastButton && item.isButton) {
+                        parts.push({
+                            type: "middle",
+                            left: leftOffset,
+                            top: posY - lineHeight + atButtonPadding,
+                            width: partWidth,
+                            height: lineHeight,
+                        });
+                    }
+                    else if (isLastButton && !item.isButton) {
+                        if (leftParts) {
+                            comment.buttonObjects = {
+                                left: leftParts,
+                                middle: parts,
+                                right: {
+                                    type: "right",
+                                    right: leftOffset + atButtonPadding,
+                                    top: posY - lineHeight + atButtonPadding,
+                                    height: lineHeight,
+                                },
+                            };
+                        }
+                        return comment;
+                    }
+                }
+                if (j < n - 1) {
+                    leftOffset = 0;
+                    lineCount += 1;
+                    continue;
+                }
+                leftOffset += partWidth;
+            }
+            isLastButton = !!item.isButton;
+        }
+        if (comment.button && !comment.button.hidden && isLastButton && leftParts) {
+            const posY = (lineOffset + lineCount + 1) * lineHeight + offsetY;
+            comment.buttonObjects = {
+                left: leftParts,
+                middle: parts,
+                right: {
+                    type: "right",
+                    right: leftOffset + atButtonPadding,
+                    top: posY - lineHeight + atButtonPadding,
+                    height: lineHeight,
+                },
+            };
+        }
+        return comment;
+    };
+    const buildAtButtonComment = (comment, vpos) => {
+        if (!comment.button || comment.button.limit <= 0)
+            return;
+        comment.button.limit -= 1;
+        const mail = [...comment.button.commentMail];
+        if (!comment.button.commentVisible) {
+            mail.push("invisible");
+        }
+        return {
+            id: -1,
+            vpos,
+            content: comment.button.commentMessage,
+            date: -1,
+            date_usec: -1,
+            owner: false,
+            premium: true,
+            mail,
+            user_id: -10,
+            layer: -1,
+            is_my_post: true,
+        };
+    };
+
+    class TypeGuardError extends Error {
+        constructor(options = {}) {
+            super("Type Guard Error\nAn error occurred due to unexpected values\nPlease contact the developer on GitHub", options);
+        }
+    }
+    TypeGuardError.prototype.name = "TypeGuardError";
 
     const getLineHeight = (fontSize, isFlash, resized = false) => {
         const lineCounts = getConfig(config.lineCounts, isFlash), CommentStageSize = getConfig(config.CommentStageSize, isFlash), lineHeight = CommentStageSize.height / lineCounts.doubleResized[fontSize], defaultLineCount = lineCounts.default[fontSize];
@@ -1228,10 +1386,13 @@
         let currentWidth = 0;
         for (const item of comment.content) {
             const lines = item.content.split("\n");
-            context.font = parseFont(item.font || comment.font, fontSize);
+            context.font = parseFont(item.font ?? comment.font, fontSize);
             const width = [];
             for (let j = 0, n = lines.length; j < n; j++) {
-                const measure = context.measureText(lines[j]);
+                const line = lines[j];
+                if (line === undefined)
+                    throw new TypeGuardError();
+                const measure = context.measureText(line);
                 currentWidth += measure.width;
                 width.push(measure.width);
                 if (j < lines.length - 1) {
@@ -1268,7 +1429,9 @@
         __proto__: null,
         ArrayEqual: ArrayEqual,
         ArrayPush: ArrayPush,
+        buildAtButtonComment: buildAtButtonComment,
         changeCALayer: changeCALayer,
+        getButtonParts: getButtonParts,
         getCharSize: getCharSize,
         getConfig: getConfig,
         getDefaultCommand: getDefaultCommand,
@@ -1311,12 +1474,15 @@
         context;
         cacheKey;
         comment;
+        pos;
         posY;
         pluginName = "BaseComment";
         image;
+        buttonImage;
         constructor(comment, context) {
             this.context = context;
             this.posY = 0;
+            this.pos = { x: 0, y: 0 };
             comment.content = comment.content.replace(/\t/g, "\u2003\u2003");
             this.comment = this.convertComment(comment);
             this.cacheKey =
@@ -1380,7 +1546,7 @@
             console.error("convertComment method is not implemented", comment);
             throw new NotImplementedError(this.pluginName, "convertComment");
         }
-        draw(vpos, showCollision, debug) {
+        draw(vpos, showCollision, cursor) {
             if (isBanActive(vpos))
                 return;
             const reverse = isReverseActive(vpos, this.comment.owner);
@@ -1388,13 +1554,17 @@
             const posY = this.comment.loc === "shita"
                 ? config.canvasHeight - this.posY - this.comment.height
                 : this.posY;
+            this.pos = {
+                x: posX,
+                y: posY,
+            };
             this._drawBackgroundColor(posX, posY);
-            this._draw(posX, posY);
+            this._draw(posX, posY, cursor);
             this._drawRectColor(posX, posY);
             this._drawCollision(posX, posY, showCollision);
-            this._drawDebugInfo(posX, posY, debug);
+            this._drawDebugInfo(posX, posY);
         }
-        _draw(posX, posY) {
+        _draw(posX, posY, cursor) {
             if (this.image === undefined) {
                 this.image = this.getTextImage();
             }
@@ -1406,6 +1576,10 @@
                 else {
                     this.context.globalAlpha = 1;
                 }
+                if (this.comment.button && !this.comment.button.hidden) {
+                    const button = this.getButtonImage(posX, posY, cursor);
+                    button && drawImage(this.context, button, posX, posY);
+                }
                 drawImage(this.context, this.image, posX, posY);
                 this.context.restore();
             }
@@ -1426,8 +1600,8 @@
                 this.context.restore();
             }
         }
-        _drawDebugInfo(posX, posY, debug) {
-            if (debug) {
+        _drawDebugInfo(posX, posY) {
+            if (isDebug) {
                 this.context.save();
                 const font = this.context.font;
                 const fillStyle = this.context.fillStyle;
@@ -1491,19 +1665,60 @@
                 context,
             };
         }
+        getButtonImage(posX, posY, cursor) {
+            console.error("getButtonImage method is not implemented", posX, posY, cursor);
+            throw new NotImplementedError(this.pluginName, "getButtonImage");
+        }
+        isHovered(cursor, posX, posY) {
+            console.error("isHovered method is not implemented", posX, posY, cursor);
+            throw new NotImplementedError(this.pluginName, "getButtonImage");
+        }
     }
 
+    const drawLeftBorder = (context, left, top, width, height, radius) => {
+        context.save();
+        context.beginPath();
+        context.moveTo(left + width, top);
+        context.lineTo(left + radius, top);
+        context.quadraticCurveTo(left, top, left, top + radius);
+        context.lineTo(left, top + height - radius);
+        context.quadraticCurveTo(left, top + height, left + radius, top + height);
+        context.lineTo(left + width, top + height);
+        context.stroke();
+        context.restore();
+    };
+    const drawMiddleBorder = (context, left, top, width, height) => {
+        context.save();
+        context.beginPath();
+        context.moveTo(left + width, top);
+        context.lineTo(left, top);
+        context.moveTo(left + width, top + height);
+        context.lineTo(left, top + height);
+        context.stroke();
+        context.restore();
+    };
+    const drawRightBorder = (context, right, top, height, radius) => {
+        context.save();
+        context.beginPath();
+        context.moveTo(right - radius, top);
+        context.quadraticCurveTo(right, top, right, top + radius);
+        context.lineTo(right, top + height - radius);
+        context.quadraticCurveTo(right, top + height, right - radius, top + height);
+        context.stroke();
+        context.restore();
+    };
+
     class FlashComment extends BaseComment {
         _globalScale;
-        scale;
-        scaleX;
         pluginName = "FlashComment";
+        buttonImage;
+        buttonContext;
         constructor(comment, context) {
             super(comment, context);
-            this.scale ??= 1;
-            this.scaleX ??= 1;
             this._globalScale ??= getConfig(config.commentScale, true);
-            this.posY ??= 0;
+            const button = this.createCanvas();
+            this.buttonImage = button.image;
+            this.buttonContext = button.context;
         }
         get content() {
             return this.comment.rawContent;
@@ -1518,7 +1733,7 @@
                 lineOffset,
             };
             const val = content[0];
-            if (val && val.font) {
+            if (val?.font) {
                 comment.font = val.font;
             }
             this.comment = this.getCommentSize(comment);
@@ -1529,50 +1744,57 @@
             delete this.image;
         }
         convertComment(comment) {
-            this.scale = 1;
-            this.scaleX = 1;
             this._globalScale = getConfig(config.commentScale, true);
-            this.posY = 0;
-            return this.getCommentSize(this.parseCommandAndNicoscript(comment));
+            return getButtonParts(this.getCommentSize(this.parseCommandAndNicoscript(comment)));
         }
         getCommentSize(parsedData) {
-            this.context.save();
-            this.context.font = parseFont(parsedData.font, parsedData.fontSize);
-            const size = parsedData;
             if (parsedData.invisible) {
-                size.height = 0;
-                size.width = 0;
-                size.lineHeight = 0;
-                size.fontSize = 0;
-                size.resized = false;
-                size.resizedX = false;
-                size.resizedY = false;
-                size.charSize = 0;
-                this.context.restore();
-                return size;
+                return {
+                    ...parsedData,
+                    height: 0,
+                    width: 0,
+                    lineHeight: 0,
+                    fontSize: 0,
+                    resized: false,
+                    resizedX: false,
+                    resizedY: false,
+                    charSize: 0,
+                    scale: 1,
+                    scaleX: 1,
+                    content: [],
+                };
             }
-            const measure = this.measureText(parsedData);
-            if (options.scale !== 1 && size.layer === -1) {
+            this.context.save();
+            this.context.font = parseFont(parsedData.font, parsedData.fontSize);
+            const measure = this.measureText({ ...parsedData, scale: 1 });
+            if (options.scale !== 1 && parsedData.layer === -1) {
                 measure.height *= options.scale;
                 measure.width *= options.scale;
             }
-            size.height = measure.height * this._globalScale;
-            size.width = measure.width * this._globalScale;
-            size.lineHeight = measure.lineHeight;
-            size.fontSize = measure.fontSize;
-            size.content = measure.content;
-            size.resized = measure.resized;
-            size.resizedX = measure.resizedX;
-            size.resizedY = measure.resizedY;
-            size.charSize = measure.charSize;
             this.context.restore();
-            return size;
+            if (parsedData.button && !parsedData.button.hidden) {
+                measure.width += getConfig(config.atButtonPadding, true) * 4;
+            }
+            return {
+                ...parsedData,
+                height: measure.height * this._globalScale,
+                width: measure.width * this._globalScale,
+                lineHeight: measure.lineHeight,
+                fontSize: measure.fontSize,
+                resized: measure.resized,
+                resizedX: measure.resizedX,
+                resizedY: measure.resizedY,
+                charSize: measure.charSize,
+                scale: measure.scale,
+                scaleX: measure.scaleX,
+                content: measure.content,
+            };
         }
         parseCommandAndNicoscript(comment) {
             const data = parseCommandAndNicoScript(comment);
-            const { content, lineCount, lineOffset } = this.parseContent(comment.content);
+            const { content, lineCount, lineOffset } = this.parseContent(comment.content, data.button);
             const val = content[0];
-            if (val && val.font) {
+            if (val?.font) {
                 data.font = val.font;
             }
             return {
@@ -1584,16 +1806,23 @@
                 lineOffset,
             };
         }
-        parseContent(input) {
-            const content = parseContent(input);
-            const lineCount = content.reduce((pv, val) => {
-                return pv + (val.content.match(/\n/g)?.length || 0);
-            }, 1);
-            const lineOffset = (input.match(new RegExp(config.FlashScriptChar.super, "g"))?.length ||
+        parseContent(input, button) {
+            const content = button
+                ? [
+                    ...parseContent(button.message.before),
+                    ...parseContent(button.message.body).map((val) => {
+                        val.isButton = true;
+                        return val;
+                    }),
+                    ...parseContent(button.message.after),
+                ]
+                : parseContent(input);
+            const lineCount = (input.match(/\n/g)?.length ?? 0) + 1;
+            const lineOffset = (input.match(new RegExp(config.FlashScriptChar.super, "g"))?.length ??
                 0) *
                 -1 *
                 config.scriptCharOffset +
-                (input.match(new RegExp(config.FlashScriptChar.sub, "g"))?.length || 0) *
+                (input.match(new RegExp(config.FlashScriptChar.sub, "g"))?.length ?? 0) *
                     config.scriptCharOffset;
             return {
                 content,
@@ -1615,32 +1844,34 @@
             const { width_arr, spacedWidth_arr } = this._measureContent(comment);
             const leadLine = (function () {
                 let max = 0, index = -1;
-                for (let i = 0, l = spacedWidth_arr.length; i < l; i++) {
-                    const val = spacedWidth_arr[i];
-                    if (val && max < val) {
+                spacedWidth_arr.forEach((val, i) => {
+                    if (max < val) {
                         max = val;
                         index = i;
                     }
-                }
+                });
                 return { max, index };
             })();
             const width = leadLine.max;
-            this.scaleX = leadLine.max / (width_arr[leadLine.index] || 1);
-            const width_max = width * this.scale;
+            const scaleX = leadLine.max / (width_arr[leadLine.index] ?? 1);
+            const width_max = width * comment.scale;
             const height = (comment.fontSize * comment.lineHeight * lineCount +
                 config.commentYPaddingTop[comment.resizedY ? "resized" : "default"]) *
-                this.scale;
+                comment.scale;
             if (comment.loc !== "naka") {
                 const widthLimit = getConfig(config.CommentStageSize, true)[comment.full ? "fullWidth" : "width"];
                 if (width_max > widthLimit && !comment.resizedX) {
                     comment.fontSize = configFontSize[comment.size].default;
                     comment.lineHeight = configLineHeight[comment.size].default;
-                    this.scale = widthLimit / width_max;
+                    comment.scale = widthLimit / width_max;
                     comment.resizedX = true;
                     comment.resized = true;
                     return this.measureText(comment);
                 }
             }
+            if (!typeGuard.internal.CommentMeasuredContentItemArray(comment.content)) {
+                throw new TypeGuardError();
+            }
             return {
                 width: width_max,
                 charSize: 0,
@@ -1651,6 +1882,8 @@
                 content: comment.content,
                 resizedX: !!comment.resizedX,
                 resizedY: !!comment.resizedY,
+                scale: comment.scale,
+                scaleX,
             };
         }
         _measureContent(comment) {
@@ -1659,7 +1892,7 @@
             for (const item of comment.content) {
                 const lines = item.content.split("\n");
                 const widths = [];
-                this.context.font = parseFont(item.font || comment.font, comment.fontSize);
+                this.context.font = parseFont(item.font ?? comment.font, comment.fontSize);
                 for (let i = 0, n = lines.length; i < n; i++) {
                     const value = lines[i];
                     if (value === undefined)
@@ -1690,13 +1923,13 @@
                 for (let i = 0, n = this.comment.lineCount; i < n; i++) {
                     const linePosY = ((i + 1) * (this.comment.fontSize * this.comment.lineHeight) +
                         config.commentYPaddingTop[this.comment.resizedY ? "resized" : "default"]) *
-                        this.scale;
+                        this.comment.scale;
                     this.context.strokeStyle = `rgba(255,255,0,0.25)`;
                     this.context.strokeRect(posX, posY + linePosY * this._globalScale, this.comment.width, this.comment.fontSize *
                         this.comment.lineHeight *
                         -1 *
                         this._globalScale *
-                        this.scale *
+                        this.comment.scale *
                         (this.comment.layer === -1 ? options.scale : 1));
                 }
                 this.context.restore();
@@ -1704,27 +1937,19 @@
         }
         _generateTextImage() {
             const { image, context } = this.createCanvas();
-            image.width = this.comment.width;
-            image.height = this.comment.height;
-            context.strokeStyle = getStrokeColor(this.comment);
-            context.fillStyle = this.comment.color;
-            context.textAlign = "start";
-            context.textBaseline = "alphabetic";
-            context.lineWidth = 4;
-            context.font = parseFont(this.comment.font, this.comment.fontSize);
-            const scale = this._globalScale *
-                this.scale *
-                (this.comment.layer === -1 ? options.scale : 1);
-            context.scale(scale * this.scaleX, scale);
+            this._setupCanvas(image, context);
+            const atButtonPadding = getConfig(config.atButtonPadding, true);
             const lineOffset = this.comment.lineOffset;
+            const lineHeight = this.comment.fontSize * this.comment.lineHeight;
             const offsetKey = this.comment.resizedY ? "resized" : "default";
             const offsetY = config.commentYPaddingTop[offsetKey] +
                 this.comment.fontSize *
                     this.comment.lineHeight *
                     config.commentYOffset[this.comment.size][offsetKey];
-            let lastFont = this.comment.font, leftOffset = 0, lineCount = 0;
+            let lastFont = this.comment.font, leftOffset = 0, lineCount = 0, isLastButton = false;
+            console.log(this.comment);
             for (const item of this.comment.content) {
-                const font = item.font || this.comment.font;
+                const font = item.font ?? this.comment.font;
                 if (lastFont !== font) {
                     lastFont = font;
                     context.font = parseFont(font, this.comment.fontSize);
@@ -1734,9 +1959,16 @@
                     const line = lines[j];
                     if (line === undefined)
                         continue;
-                    const posY = (lineOffset + lineCount + 1) *
-                        (this.comment.fontSize * this.comment.lineHeight) +
-                        offsetY;
+                    const posY = (lineOffset + lineCount + 1) * lineHeight + offsetY;
+                    const partWidth = item.width[j] ?? 0;
+                    if (this.comment.button && !this.comment.button.hidden) {
+                        if (!isLastButton && item.isButton) {
+                            leftOffset += atButtonPadding * 2;
+                        }
+                        else if (isLastButton && !item.isButton) {
+                            leftOffset += atButtonPadding * 2;
+                        }
+                    }
                     context.strokeText(line, leftOffset, posY);
                     context.fillText(line, leftOffset, posY);
                     if (j < n - 1) {
@@ -1744,11 +1976,79 @@
                         lineCount += 1;
                         continue;
                     }
-                    leftOffset += item.width[j] || 0;
+                    leftOffset += partWidth;
                 }
+                isLastButton = !!item.isButton;
             }
             return image;
         }
+        getButtonImage(posX, posY, cursor) {
+            if (!this.comment.button || this.comment.button.hidden)
+                return undefined;
+            const { image, context } = this._setupCanvas(this.buttonImage, this.buttonContext);
+            const parts = this.comment.buttonObjects;
+            if (!parts)
+                return undefined;
+            const atButtonRadius = getConfig(config.atButtonRadius, true);
+            const isHover = this.isHovered(cursor, posX, posY);
+            context.save();
+            context.strokeStyle = isHover ? this.comment.color : "white";
+            drawLeftBorder(context, parts.left.left, parts.left.top, parts.left.width, parts.left.height, atButtonRadius);
+            for (const part of parts.middle) {
+                drawMiddleBorder(context, part.left, part.top, part.width, part.height);
+            }
+            drawRightBorder(context, parts.right.right, parts.right.top, parts.right.height, atButtonRadius);
+            context.restore();
+            return image;
+        }
+        isHovered(_cursor, _posX, _posY) {
+            if (!_cursor || !this.comment.buttonObjects)
+                return false;
+            const { left, middle, right } = this.comment.buttonObjects;
+            const scale = this._globalScale *
+                this.comment.scale *
+                (this.comment.layer === -1 ? options.scale : 1);
+            const posX = (_posX ?? this.pos.x) / scale;
+            const posY = (_posY ?? this.pos.y) / scale;
+            const cursor = {
+                x: _cursor.x / scale,
+                y: _cursor.y / scale,
+            };
+            if (cursor.x < posX ||
+                posX + this.comment.width < cursor.x ||
+                cursor.y < posY + left.top ||
+                posY + right.top + right.height < cursor.y) {
+                return false;
+            }
+            const atButtonPadding = getConfig(config.atButtonPadding, true);
+            const between = (val, min, max) => {
+                return min < val && val < max;
+            };
+            for (const part of [left, ...middle]) {
+                if (between(cursor.x, posX + part.left, posX + part.left + part.width) &&
+                    between(cursor.y, posY + part.top, posY + part.top + part.height)) {
+                    return true;
+                }
+            }
+            return (between(cursor.x, posX + right.right - atButtonPadding, posX + right.right + atButtonPadding * 2) && between(cursor.y, posY + right.top, posY + right.top + right.height));
+        }
+        _setupCanvas(image, context) {
+            const atButtonPadding = getConfig(config.atButtonPadding, true);
+            image.width = this.comment.width;
+            image.height =
+                this.comment.height + (this.comment.button ? atButtonPadding * 2 : 0);
+            context.strokeStyle = getStrokeColor(this.comment);
+            context.fillStyle = this.comment.color;
+            context.textAlign = "start";
+            context.textBaseline = "alphabetic";
+            context.lineWidth = 4;
+            context.font = parseFont(this.comment.font, this.comment.fontSize);
+            const scale = this._globalScale *
+                this.comment.scale *
+                (this.comment.layer === -1 ? options.scale : 1);
+            context.scale(scale * this.comment.scaleX, scale);
+            return { image, context };
+        }
     }
 
     class HTML5Comment extends BaseComment {
@@ -1780,38 +2080,46 @@
             return this.getCommentSize(this.parseCommandAndNicoscript(comment));
         }
         getCommentSize(parsedData) {
-            this.context.save();
-            this.context.font = parseFont(parsedData.font, parsedData.fontSize);
-            const size = parsedData;
             if (parsedData.invisible) {
-                size.height = 0;
-                size.width = 0;
-                size.lineHeight = 0;
-                size.fontSize = 0;
-                size.resized = false;
-                size.resizedX = false;
-                size.resizedY = false;
-                size.charSize = 0;
                 this.context.restore();
-                return size;
+                return {
+                    ...parsedData,
+                    height: 0,
+                    width: 0,
+                    lineHeight: 0,
+                    fontSize: 0,
+                    resized: false,
+                    resizedX: false,
+                    resizedY: false,
+                    charSize: 0,
+                    content: [],
+                    scaleX: 1,
+                    scale: 1,
+                };
             }
-            const measure = this.measureText(parsedData);
-            if (options.scale !== 1 && size.layer === -1) {
+            this.context.save();
+            this.context.font = parseFont(parsedData.font, parsedData.fontSize);
+            const measure = this.measureText({ ...parsedData, scale: 1 });
+            if (options.scale !== 1 && parsedData.layer === -1) {
                 measure.height *= options.scale;
                 measure.width *= options.scale;
                 measure.fontSize *= options.scale;
             }
-            size.height = measure.height;
-            size.width = measure.width;
-            size.lineHeight = measure.lineHeight;
-            size.fontSize = measure.fontSize;
-            size.content = measure.content;
-            size.resized = measure.resized;
-            size.resizedX = measure.resizedX;
-            size.resizedY = measure.resizedY;
-            size.charSize = measure.charSize;
             this.context.restore();
-            return size;
+            return {
+                ...parsedData,
+                height: measure.height,
+                width: measure.width,
+                lineHeight: measure.lineHeight,
+                fontSize: measure.fontSize,
+                resized: measure.resized,
+                resizedX: measure.resizedX,
+                resizedY: measure.resizedY,
+                charSize: measure.charSize,
+                content: measure.content,
+                scaleX: measure.scaleX,
+                scale: measure.scale,
+            };
         }
         parseCommandAndNicoscript(comment) {
             const data = parseCommandAndNicoScript(comment);
@@ -1832,7 +2140,7 @@
                 slicedContent: input.split("\n"),
             });
             const lineCount = content.reduce((pv, val) => {
-                return pv + (val.content.match(/\n/g)?.length || 0);
+                return pv + (val.content.match(/\n/g)?.length ?? 0);
             }, 1);
             const lineOffset = 0;
             return {
@@ -1865,21 +2173,28 @@
                     continue;
                 item.width = itemWidth[i];
             }
-            comment.fontSize = (comment.charSize || 0) * 0.8;
+            comment.fontSize = (comment.charSize ?? 0) * 0.8;
+            if (!typeGuard.internal.CommentMeasuredContentItemArray(comment.content)) {
+                throw new TypeGuardError();
+            }
             return {
                 width: width * scale,
                 height: height * scale,
                 resized: !!comment.resized,
                 fontSize: comment.fontSize,
-                lineHeight: comment.lineHeight || 0,
+                lineHeight: comment.lineHeight ?? 0,
                 content: comment.content,
                 resizedX: !!comment.resizedX,
                 resizedY: !!comment.resizedY,
-                charSize: comment.charSize || 0,
+                charSize: comment.charSize ?? 0,
+                scaleX: 1,
+                scale: 1,
             };
         }
         _measureComment(comment) {
             const widthLimit = getConfig(config.CommentStageSize, false)[comment.full ? "fullWidth" : "width"];
+            if (!typeGuard.internal.MeasureInput(comment))
+                throw new TypeGuardError();
             const measureResult = measure(comment, this.context);
             if (comment.loc !== "naka" && measureResult.width > widthLimit) {
                 return this._processResizeX(comment, measureResult.width);
@@ -1893,9 +2208,11 @@
             const scale = widthLimit / width;
             comment.resizedX = true;
             let _comment = { ...comment };
-            _comment.charSize = (_comment.charSize || 0) * scale;
-            _comment.lineHeight = (_comment.lineHeight || 0) * scale;
+            _comment.charSize = (_comment.charSize ?? 0) * scale;
+            _comment.lineHeight = (_comment.lineHeight ?? 0) * scale;
             _comment.fontSize = _comment.charSize * 0.8;
+            if (!typeGuard.internal.MeasureInput(_comment))
+                throw new TypeGuardError();
             let result = measure(_comment, this.context);
             if (result.width > widthLimit) {
                 while (result.width >= widthLimit) {
@@ -1919,7 +2236,7 @@
                 _comment = lastComment;
             }
             if (comment.resizedY) {
-                const scale = (_comment.charSize || 0) / (comment.charSize || 0);
+                const scale = (_comment.charSize ?? 0) / (comment.charSize ?? 0);
                 comment.charSize = scale * charSize;
                 comment.lineHeight = scale * lineHeight;
             }
@@ -1927,7 +2244,9 @@
                 comment.charSize = _comment.charSize;
                 comment.lineHeight = _comment.lineHeight;
             }
-            comment.fontSize = (comment.charSize || 0) * 0.8;
+            comment.fontSize = (comment.charSize ?? 0) * 0.8;
+            if (!typeGuard.internal.MeasureInput(comment))
+                throw new TypeGuardError();
             return measure(comment, this.context);
         }
         _drawCollision(posX, posY, showCollision) {
@@ -1937,11 +2256,12 @@
                 this.context.strokeStyle = "rgba(0,255,255,1)";
                 this.context.strokeRect(posX, posY, this.comment.width, this.comment.height);
                 for (let i = 0, n = this.comment.lineCount; i < n; i++) {
+                    if (!typeGuard.internal.HTML5Fonts(this.comment.font))
+                        throw new TypeGuardError();
                     const linePosY = (this.comment.lineHeight * (i + 1) +
                         (this.comment.charSize - this.comment.lineHeight) / 2 +
                         this.comment.lineHeight * -0.16 +
-                        (config.fonts[this.comment.font]?.offset ||
-                            0)) *
+                        (config.fonts[this.comment.font]?.offset || 0)) *
                         scale;
                     this.context.strokeStyle = "rgba(255,255,0,0.5)";
                     this.context.strokeRect(posX, posY + linePosY, this.comment.width, this.comment.fontSize * -1 * scale);
@@ -1969,6 +2289,8 @@
                 (this.comment.layer === -1 ? options.scale : 1);
             context.scale(drawScale, drawScale);
             let lineCount = 0;
+            if (!typeGuard.internal.HTML5Fonts(this.comment.font))
+                throw new TypeGuardError();
             const offsetY = (this.comment.charSize - this.comment.lineHeight) / 2 +
                 this.comment.lineHeight * -0.16 +
                 (config.fonts[this.comment.font]?.offset || 0);
@@ -1987,6 +2309,12 @@
             }
             return image;
         }
+        getButtonImage() {
+            return undefined;
+        }
+        isHovered() {
+            return false;
+        }
     }
 
     var index = /*#__PURE__*/Object.freeze({
@@ -2142,17 +2470,17 @@
 
     const initConfig = () => {
         const platform = (function (ua) {
-            if (ua.match(/windows nt 6\.[12]/i))
+            if (RegExp(/windows nt 6\.[12]/i).exec(ua))
                 return "win7";
-            else if (ua.match(/windows nt (6\.3|10\.\d+)|win32/i))
+            else if (RegExp(/windows nt (6\.3|10\.\d+)|win32/i).exec(ua))
                 return "win8_1";
-            else if (ua.match(/windows nt/i))
+            else if (RegExp(/windows nt/i).exec(ua))
                 return "win";
-            else if (ua.match(/mac os x 10(.|_)(9|10)/i))
+            else if (RegExp(/mac os x 10(.|_)(9|10)/i).exec(ua))
                 return "mac10_9";
-            else if (ua.match(/mac os x 10(.|_)\d{2}|darwin/i))
+            else if (RegExp(/mac os x 10(.|_)\d{2}|darwin/i).exec(ua))
                 return "mac10_11";
-            else if (ua.match(/mac os x/i))
+            else if (RegExp(/mac os x/i).exec(ua))
                 return "mac";
             return "other";
         })(typeof navigator !== "undefined" ? navigator.userAgent : process.platform);
@@ -2308,6 +2636,8 @@
                 },
             ],
             nakaCommentSpeedOffset: 0.95,
+            atButtonPadding: 5,
+            atButtonRadius: 7,
         };
         updateConfig(defaultConfig);
     };
@@ -2463,14 +2793,15 @@
                 mail: [],
                 user_id: -1,
                 layer: -1,
+                is_my_post: false,
             };
             if (item.getAttribute("mail")) {
-                tmpParam.mail = item.getAttribute("mail")?.split(/\s+/g) || [];
+                tmpParam.mail = item.getAttribute("mail")?.split(/\s+/g) ?? [];
             }
             if (tmpParam.content.startsWith("/") && tmpParam.owner) {
                 tmpParam.mail.push("invisible");
             }
-            const userId = item.getAttribute("user_id") || "";
+            const userId = item.getAttribute("user_id") ?? "";
             const isUserExist = userList.indexOf(userId);
             if (isUserExist === -1) {
                 tmpParam.user_id = userList.length;
@@ -2484,16 +2815,17 @@
         return data_;
     };
     const fromFormatted = (data) => {
-        const tmpData = data;
-        if (!typeGuard.formatted.comments(data)) {
-            for (const item of tmpData) {
-                item.layer = -1;
-                item.user_id = 0;
-                if (!item.date_usec)
-                    item.date_usec = 0;
+        return data.map((comment) => {
+            if (!typeGuard.formatted.comment(comment)) {
+                return {
+                    ...comment,
+                    layer: -1,
+                    user_id: 0,
+                    is_my_post: false,
+                };
             }
-        }
-        return tmpData;
+            return comment;
+        });
     };
     const fromLegacy = (data) => {
         const data_ = [], userList = [];
@@ -2513,6 +2845,7 @@
                     mail: [],
                     user_id: -1,
                     layer: -1,
+                    is_my_post: false,
                 };
                 if (value.mail) {
                     tmpParam.mail = value.mail.split(/\s+/g);
@@ -2551,7 +2884,7 @@
             const tmpParam = {
                 id: i,
                 vpos: Number(commentData[0]) * 100,
-                content: commentData[2] || "",
+                content: commentData[2] ?? "",
                 date: i,
                 date_usec: 0,
                 owner: true,
@@ -2559,6 +2892,7 @@
                 mail: [],
                 user_id: -1,
                 layer: -1,
+                is_my_post: false,
             };
             if (commentData[1]) {
                 tmpParam.mail = commentData[1].split(/[\s+]/g);
@@ -2587,6 +2921,7 @@
                 mail: [],
                 user_id: -1,
                 layer: -1,
+                is_my_post: false,
             };
             if (value.command) {
                 tmpParam.mail = value.command.split(/\s+/g);
@@ -2614,6 +2949,7 @@
                     mail: value.commands,
                     user_id: -1,
                     layer: -1,
+                    is_my_post: value.isMyPost,
                 };
                 if (tmpParam.content.startsWith("/") && tmpParam.owner) {
                     tmpParam.mail.push("invisible");
@@ -2650,7 +2986,7 @@
         return data;
     };
     const time2vpos = (time_str) => {
-        const time = time_str.match(/^(?:(\d+):(\d+)\.(\d+)|(\d+):(\d+)|(\d+)\.(\d+)|(\d+))$/);
+        const time = RegExp(/^(?:(\d+):(\d+)\.(\d+)|(\d+):(\d+)|(\d+)\.(\d+)|(\d+))$/).exec(time_str);
         if (time) {
             if (time[1] !== undefined &&
                 time[2] !== undefined &&
@@ -2706,7 +3042,6 @@
         utils: index$1
     });
 
-    let isDebug = false;
     class NiconiComments {
         enableLegacyPiP;
         showCollision;
@@ -2732,7 +3067,7 @@
                 throw new InvalidOptionError();
             setOptions(Object.assign(defaultOptions, initOptions));
             setConfig(Object.assign(defaultConfig, options.config));
-            isDebug = options.debug;
+            setIsDebug(options.debug);
             resetImageCache();
             resetNicoScripts();
             this.canvas = canvas;
@@ -2754,16 +3089,18 @@
                 options.mode = "html5";
             }
             const parsedData = convert2formattedComment(data, formatType);
-            this.video = options.video || undefined;
+            this.video = options.video ?? undefined;
             this.showCollision = options.showCollision;
             this.showFPS = options.showFPS;
             this.showCommentCount = options.showCommentCount;
             this.enableLegacyPiP = options.enableLegacyPiP;
             this.timeline = {};
-            this.collision = ["ue", "shita", "right", "left"].reduce((pv, value) => {
-                pv[value] = [];
-                return pv;
-            }, {});
+            this.collision = {
+                ue: [],
+                shita: [],
+                left: [],
+                right: [],
+            };
             this.lastVpos = -1;
             this.preRendering(parsedData);
             logger(`constructor complete: ${performance.now() - constructorStart}ms`);
@@ -2773,7 +3110,7 @@
             if (options.keepCA) {
                 rawData = changeCALayer(rawData);
             }
-            const instances = rawData.reduce((pv, val) => {
+            let instances = rawData.reduce((pv, val) => {
                 pv.push(createCommentInstance(val, this.context));
                 return pv;
             }, []);
@@ -2782,7 +3119,15 @@
             const plugins = [];
             for (const plugin of config.plugins) {
                 try {
-                    plugins.push(new plugin(this.canvas, instances));
+                    const canvas = generateCanvas();
+                    const pluginInstance = new plugin(canvas, instances);
+                    plugins.push({
+                        canvas,
+                        instance: pluginInstance,
+                    });
+                    if (pluginInstance.transformComments) {
+                        instances = pluginInstance.transformComments(instances);
+                    }
                 }
                 catch (e) {
                     console.error("Failed to init plugin");
@@ -2829,9 +3174,10 @@
                 pv.push(createCommentInstance(val, this.context));
                 return pv;
             }, []);
+            console.log(comments);
             for (const plugin of plugins) {
                 try {
-                    plugin.addComments(comments);
+                    plugin.instance.addComments?.(comments);
                 }
                 catch (e) {
                     console.error("Failed to add comments");
@@ -2848,7 +3194,7 @@
                 }
             }
         }
-        drawCanvas(vpos, forceRendering = false) {
+        drawCanvas(vpos, forceRendering = false, cursor) {
             const drawCanvasStart = performance.now();
             if (this.lastVpos === vpos && !forceRendering)
                 return false;
@@ -2859,7 +3205,7 @@
                 timelineRange?.filter((item) => item.loc === "naka").length === 0 &&
                 this.timeline[this.lastVpos]?.filter((item) => item.loc === "naka")
                     ?.length === 0) {
-                const current = timelineRange.filter((item) => item.loc !== "naka"), last = this.timeline[this.lastVpos]?.filter((item) => item.loc !== "naka") ||
+                const current = timelineRange.filter((item) => item.loc !== "naka"), last = this.timeline[this.lastVpos]?.filter((item) => item.loc !== "naka") ??
                     [];
                 if (ArrayEqual(current, last))
                     return false;
@@ -2867,16 +3213,17 @@
             this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
             this.lastVpos = vpos;
             this._drawVideo();
-            this._drawCollision(vpos);
-            this._drawComments(timelineRange, vpos);
             for (const plugin of plugins) {
                 try {
-                    plugin.draw(vpos);
+                    plugin.instance.draw?.(vpos);
+                    this.context.drawImage(plugin.canvas, 0, 0);
                 }
                 catch (e) {
                     console.error(`Failed to draw comments`);
                 }
             }
+            this._drawCollision(vpos);
+            this._drawComments(timelineRange, vpos, cursor);
             this._drawFPS(drawCanvasStart);
             this._drawCommentCount(timelineRange?.length);
             logger(`drawCanvas complete: ${performance.now() - drawCanvasStart}ms`);
@@ -2896,7 +3243,7 @@
                 this.context.drawImage(this.video, offsetX, offsetY, this.video.videoWidth * scale, this.video.videoHeight * scale);
             }
         }
-        _drawComments(timelineRange, vpos) {
+        _drawComments(timelineRange, vpos, cursor) {
             if (timelineRange) {
                 const targetComment = (() => {
                     if (config.commentLimit === undefined) {
@@ -2911,7 +3258,7 @@
                     if (comment.invisible) {
                         continue;
                     }
-                    comment.draw(vpos, this.showCollision, isDebug);
+                    comment.draw(vpos, this.showCollision, cursor);
                 }
             }
         }
@@ -2952,8 +3299,8 @@
                 this.context.font = parseFont("defont", 60);
                 this.context.fillStyle = "#00FF00";
                 this.context.strokeStyle = `rgba(${hex2rgb(config.contextStrokeColor).join(",")},${config.contextStrokeOpacity})`;
-                this.context.strokeText(`Count:${count || 0}`, 100, 200);
-                this.context.fillText(`Count:${count || 0}`, 100, 200);
+                this.context.strokeText(`Count:${count ?? 0}`, 100, 200);
+                this.context.fillText(`Count:${count ?? 0}`, 100, 200);
                 this.context.restore();
             }
         }
@@ -2966,6 +3313,20 @@
         clear() {
             this.context.clearRect(0, 0, config.canvasWidth, config.canvasHeight);
         }
+        click(vpos, pos) {
+            const _comments = this.timeline[vpos];
+            if (!_comments)
+                return;
+            const comments = [..._comments].reverse();
+            for (const comment of comments) {
+                if (comment.isHovered(pos)) {
+                    const newComment = buildAtButtonComment(comment.comment, vpos);
+                    if (!newComment)
+                        continue;
+                    this.addComments(newComment);
+                }
+            }
+        }
     }
     const logger = (msg) => {
         if (isDebug)