@xpadev-net/niconicomments 0.2.56 → 0.2.58

package/dist/bundle.js

@@ -1,5 +1,5 @@
 /*!
-  niconicomments.js v0.2.56
+  niconicomments.js v0.2.58
   (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)) {
@@ -546,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,
@@ -562,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 = "";
@@ -609,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,
@@ -635,11 +645,11 @@
         });
     };
     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|\u30dc\u30bf\u30f3)(?:\s(.+))?/);
+        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(commands);
+            processAtButton(comment, commands);
             return;
         }
         if (!comment.owner)
@@ -680,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;
@@ -711,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,
@@ -721,9 +731,26 @@
             message: options[2],
         });
     };
-    const processAtButton = (commands) => {
+    const processAtButton = (comment, commands) => {
+        const args = parseBrackets(comment.content);
+        if (args[1] === undefined)
+            return;
         commands.invisible = false;
-        commands.button = true;
+        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);
@@ -740,7 +767,6 @@
             _live: false,
             invisible: false,
             long: undefined,
-            button: false,
         };
         for (const command of commands) {
             parseCommand(comment, command, result, isFlash);
@@ -752,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;
@@ -785,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;
@@ -970,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);
@@ -989,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;
             }
@@ -1001,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;
@@ -1121,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;
@@ -1140,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;
@@ -1222,6 +1249,108 @@
             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 = {}) {
@@ -1257,7 +1386,7 @@
         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 line = lines[j];
@@ -1300,7 +1429,9 @@
         __proto__: null,
         ArrayEqual: ArrayEqual,
         ArrayPush: ArrayPush,
+        buildAtButtonComment: buildAtButtonComment,
         changeCALayer: changeCALayer,
+        getButtonParts: getButtonParts,
         getCharSize: getCharSize,
         getConfig: getConfig,
         getDefaultCommand: getDefaultCommand,
@@ -1343,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 =
@@ -1412,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);
@@ -1420,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();
             }
@@ -1438,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();
             }
@@ -1458,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;
@@ -1523,14 +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;
         pluginName = "FlashComment";
+        buttonImage;
+        buttonContext;
         constructor(comment, context) {
             super(comment, context);
             this._globalScale ??= getConfig(config.commentScale, true);
+            const button = this.createCanvas();
+            this.buttonImage = button.image;
+            this.buttonContext = button.context;
         }
         get content() {
             return this.comment.rawContent;
@@ -1545,7 +1733,7 @@
                 lineOffset,
             };
             const val = content[0];
-            if (val && val.font) {
+            if (val?.font) {
                 comment.font = val.font;
             }
             this.comment = this.getCommentSize(comment);
@@ -1557,7 +1745,7 @@
         }
         convertComment(comment) {
             this._globalScale = getConfig(config.commentScale, true);
-            return this.getCommentSize(this.parseCommandAndNicoscript(comment));
+            return getButtonParts(this.getCommentSize(this.parseCommandAndNicoscript(comment)));
         }
         getCommentSize(parsedData) {
             if (parsedData.invisible) {
@@ -1584,6 +1772,9 @@
                 measure.width *= options.scale;
             }
             this.context.restore();
+            if (parsedData.button && !parsedData.button.hidden) {
+                measure.width += getConfig(config.atButtonPadding, true) * 4;
+            }
             return {
                 ...parsedData,
                 height: measure.height * this._globalScale,
@@ -1601,9 +1792,9 @@
         }
         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 {
@@ -1615,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,
@@ -1694,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)
@@ -1739,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.comment.scale *
-                (this.comment.layer === -1 ? options.scale : 1);
-            context.scale(scale * this.comment.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);
@@ -1769,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) {
@@ -1779,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 {
@@ -1875,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 {
@@ -2044,6 +2309,12 @@
             }
             return image;
         }
+        getButtonImage() {
+            return undefined;
+        }
+        isHovered() {
+            return false;
+        }
     }
 
     var index = /*#__PURE__*/Object.freeze({
@@ -2199,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);
@@ -2365,6 +2636,8 @@
                 },
             ],
             nakaCommentSpeedOffset: 0.95,
+            atButtonPadding: 5,
+            atButtonRadius: 7,
         };
         updateConfig(defaultConfig);
     };
@@ -2520,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;
@@ -2542,11 +2816,12 @@
     };
     const fromFormatted = (data) => {
         return data.map((comment) => {
-            if (typeGuard.formatted.legacyComment(comment)) {
+            if (!typeGuard.formatted.comment(comment)) {
                 return {
                     ...comment,
                     layer: -1,
                     user_id: 0,
+                    is_my_post: false,
                 };
             }
             return comment;
@@ -2570,6 +2845,7 @@
                     mail: [],
                     user_id: -1,
                     layer: -1,
+                    is_my_post: false,
                 };
                 if (value.mail) {
                     tmpParam.mail = value.mail.split(/\s+/g);
@@ -2608,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,
@@ -2616,6 +2892,7 @@
                 mail: [],
                 user_id: -1,
                 layer: -1,
+                is_my_post: false,
             };
             if (commentData[1]) {
                 tmpParam.mail = commentData[1].split(/[\s+]/g);
@@ -2644,6 +2921,7 @@
                 mail: [],
                 user_id: -1,
                 layer: -1,
+                is_my_post: false,
             };
             if (value.command) {
                 tmpParam.mail = value.command.split(/\s+/g);
@@ -2671,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");
@@ -2707,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 &&
@@ -2763,7 +3042,6 @@
         utils: index$1
     });
 
-    let isDebug = false;
     class NiconiComments {
         enableLegacyPiP;
         showCollision;
@@ -2789,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;
@@ -2811,7 +3089,7 @@
                 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;
@@ -2832,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;
             }, []);
@@ -2842,10 +3120,14 @@
             for (const plugin of config.plugins) {
                 try {
                     const canvas = generateCanvas();
+                    const pluginInstance = new plugin(canvas, instances);
                     plugins.push({
                         canvas,
-                        instance: new plugin(canvas, instances),
+                        instance: pluginInstance,
                     });
+                    if (pluginInstance.transformComments) {
+                        instances = pluginInstance.transformComments(instances);
+                    }
                 }
                 catch (e) {
                     console.error("Failed to init plugin");
@@ -2892,9 +3174,10 @@
                 pv.push(createCommentInstance(val, this.context));
                 return pv;
             }, []);
+            console.log(comments);
             for (const plugin of plugins) {
                 try {
-                    plugin.instance.addComments(comments);
+                    plugin.instance.addComments?.(comments);
                 }
                 catch (e) {
                     console.error("Failed to add comments");
@@ -2911,7 +3194,7 @@
                 }
             }
         }
-        drawCanvas(vpos, forceRendering = false) {
+        drawCanvas(vpos, forceRendering = false, cursor) {
             const drawCanvasStart = performance.now();
             if (this.lastVpos === vpos && !forceRendering)
                 return false;
@@ -2922,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;
@@ -2930,17 +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.instance.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`);
@@ -2960,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) {
@@ -2975,7 +3258,7 @@
                     if (comment.invisible) {
                         continue;
                     }
-                    comment.draw(vpos, this.showCollision, isDebug);
+                    comment.draw(vpos, this.showCollision, cursor);
                 }
             }
         }
@@ -3016,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();
             }
         }
@@ -3030,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)