@xpadev-net/niconicomments 0.2.42 → 0.2.43

package/dist/bundle.d.ts

@@ -72,6 +72,11 @@ declare let nicoScripts: nicoScript;
 declare const resetNicoScripts: () => void;
 
 
+import { IPlugin } from "@/@types/IPlugins";
+declare let plugins: IPlugin[];
+declare const setPlugins: (input: IPlugin[]) => void;
+
+
 declare const colors: {
     white: string;
     red: string;
@@ -240,6 +245,20 @@ export interface IComment {
   draw: (vpos: number, showCollision: boolean, isDebug: boolean) => void;
 }
 
+import { formattedComment } from "@/@types/format.formatted";
+
+export interface IPluginConstructor {
+  id: string;
+  new (Canvas: HTMLCanvasElement, comments: formattedComment[]): IPlugin;
+}
+
+export interface IPlugin {
+  draw(vpos: number): void;
+  addComments(comments: formattedComment[]): void;
+}
+
+import { IPluginConstructor } from "@/@types/IPlugins";
+
 type configItem<T> = T | { html5: T; flash: T };
 type configSizeItem<T> = { big: T; medium: T; small: T };
 type configResizedItem<T> = { default: T; resized: T };
@@ -299,6 +318,7 @@ type BaseConfig = {
   sameCARange: number;
   letterSpacing: number;
   scriptCharOffset: number;
+  plugins: IPluginConstructor[];
 };
 
 export type Config = Partial<BaseConfig>;
@@ -679,7 +699,7 @@ declare class NiconiComments {
     private getCommentPos;
     private sortComment;
     addComments(...rawComments: formattedComment[]): void;
-    drawCanvas(vpos: number, forceRendering?: boolean): void;
+    drawCanvas(vpos: number, forceRendering?: boolean): boolean;
     clear(): void;
 }
 
@@ -774,12 +794,12 @@ declare const arrayPush: (array: {
 }, key: string | number, push: IComment) => void;
 declare const hex2rgb: (hex: string) => number[];
 declare const hex2rgba: (hex: string) => number[];
-declare const replaceAll: (string: string, target: string, replace: string) => string;
 declare const changeCALayer: (rawData: formattedComment[]) => formattedComment[];
 declare const getConfig: <T>(input: configItem<T>, isFlash?: boolean) => T;
 declare const isFlashComment: (comment: formattedComment) => boolean;
 declare const parseCommandAndNicoScript: (comment: formattedComment) => formattedCommentWithFont;
 declare const getStrokeColor: (comment: formattedCommentWithSize) => string;
+declare const ArrayEqual: (a: unknown[], b: unknown[]) => boolean;
 
 
 export default NiconiComments;

package/dist/bundle.js

@@ -1,5 +1,5 @@
 /*!
-  niconicomments.js v0.2.42
+  niconicomments.js v0.2.43
   (c) 2021 xpadev-net https://xpadev.net
   Released under the MIT License.
 */
@@ -142,14 +142,7 @@
                 if (!value)
                     continue;
                 if (value.nodeName === "chat" &&
-                    !typeAttributeVerify(value, [
-                        "no",
-                        "vpos",
-                        "date",
-                        "date_usec",
-                        "mail",
-                        "premium",
-                    ]))
+                    !typeAttributeVerify(value, ["no", "vpos", "date", "date_usec", "mail"]))
                     return false;
             }
             return true;
@@ -283,7 +276,7 @@
                     config: isObject,
                     format: function (i) {
                         return typeof i === "string" &&
-                            !!i.match(/^(niconicome|formatted|legacy|legacyOwner|owner|v1|default)$/);
+                            !!i.match(/^(niconicome|formatted|legacy|legacyOwner|owner|v1|default|empty)$/);
                     },
                     video: function (i) {
                         return typeof i === "object" && i.nodeName === "VIDEO";
@@ -847,6 +840,7 @@
             sameCARange: 3600,
             sameCAGap: 100,
             sameCAMinScore: 10,
+            plugins: [],
             flashThreshold: 1499871600,
             flashChar: {
                 gulim: "[\u0126\u0127\u0132\u0133\u0138\u013f\u0140\u0149-\u014b\u0166\u0167\u02d0\u02da\u2074\u207f\u2081-\u2084\u2113\u2153\u2154\u215c-\u215e\u2194\u2195\u223c\u249c-\u24b5\u24d0-\u24e9\u25a3-\u25a9\u25b6\u25b7\u25c0\u25c1\u25c8\u25d0\u25d1\u260e\u260f\u261c\u261e\u2660\u2661\u2663-\u2665\u2667-\u2669\u266c\u3131-\u316e\u3200-\u321c\u3260-\u327b\u3380-\u3384\u3388-\u338d\u3390-\u339b\u339f\u33a0\u33a2-\u33ca\u33cf\u33d0\u33d3\u33d6\u33d8\u33db-\u33dd\uf900-\uf928\uf92a-\uf994\uf996\ufa0b\uffe6]",
@@ -1035,12 +1029,6 @@
             return parseInt(str, 16);
         });
     };
-    var replaceAll = function (string, target, replace) {
-        while (string.indexOf(target) !== -1) {
-            string = string.replace(target, replace);
-        }
-        return string;
-    };
     var changeCALayer = function (rawData) {
         var userList = {};
         var data = [], index = {};
@@ -1105,79 +1093,76 @@
         var isFlash = isFlashComment(comment);
         var data = parseCommand(comment), string = comment.content, nicoscript = string.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) {
-            var reverse = comment.content.match(/^(?:@|\uff20)\u9006 ?(\u5168|\u30b3\u30e1|\u6295\u30b3\u30e1)?/);
+            var reverse = comment.content.match(/^(?:@|\uff20)\u9006(?:\s+)?(\u5168|\u30b3\u30e1|\u6295\u30b3\u30e1)?/);
             var content = comment.content.split(""), result = [];
             var quote = "", last_i = "", string_1 = "";
-            switch (nicoscript[1]) {
-                case "\u30c7\u30d5\u30a9\u30eb\u30c8":
-                    nicoScripts.default.unshift({
-                        start: comment.vpos,
-                        long: data.long === undefined ? undefined : Math.floor(data.long * 100),
-                        color: data.color,
-                        size: data.size,
-                        font: data.font,
-                        loc: data.loc,
-                    });
-                    break;
-                case "\u9006":
-                    if (!reverse ||
-                        !reverse[1] ||
-                        !typeGuard.nicoScript.range.target(reverse[1]))
-                        break;
-                    if (data.long === undefined) {
-                        data.long = 30;
+            if (nicoscript[1] === "\u30c7\u30d5\u30a9\u30eb\u30c8") {
+                nicoScripts.default.unshift({
+                    start: comment.vpos,
+                    long: data.long === undefined ? undefined : Math.floor(data.long * 100),
+                    color: data.color,
+                    size: data.size,
+                    font: data.font,
+                    loc: data.loc,
+                });
+            }
+            else if (nicoscript[1] === "\u9006" &&
+                reverse &&
+                reverse[1] &&
+                typeGuard.nicoScript.range.target(reverse[1])) {
+                if (data.long === undefined) {
+                    data.long = 30;
+                }
+                nicoScripts.reverse.unshift({
+                    start: comment.vpos,
+                    end: comment.vpos + data.long * 100,
+                    target: reverse[1],
+                });
+            }
+            else if (nicoscript[1] === "\u30b3\u30e1\u30f3\u30c8\u7981\u6b62") {
+                if (data.long === undefined) {
+                    data.long = 30;
+                }
+                nicoScripts.ban.unshift({
+                    start: comment.vpos,
+                    end: comment.vpos + data.long * 100,
+                });
+            }
+            else if (nicoscript[1] === "\u7f6e\u63db") {
+                for (var _i = 0, _a = content.slice(4); _i < _a.length; _i++) {
+                    var i = _a[_i];
+                    if (i.match(/["'\u300c]/) && quote === "") {
+                        quote = i;
                     }
-                    nicoScripts.reverse.unshift({
-                        start: comment.vpos,
-                        end: comment.vpos + data.long * 100,
-                        target: reverse[1],
-                    });
-                    break;
-                case "\u30b3\u30e1\u30f3\u30c8\u7981\u6b62":
-                    if (data.long === undefined) {
-                        data.long = 30;
+                    else if (i.match(/["']/) && quote === i && last_i !== "\\") {
+                        result.push(string_1.replaceAll("\\n", "\n"));
+                        quote = "";
+                        string_1 = "";
                     }
-                    nicoScripts.ban.unshift({
-                        start: comment.vpos,
-                        end: comment.vpos + data.long * 100,
-                    });
-                    break;
-                case "\u7f6e\u63db":
-                    for (var _i = 0, _a = content.slice(4); _i < _a.length; _i++) {
-                        var i = _a[_i];
-                        if (i.match(/["'\u300c]/) && quote === "") {
-                            quote = i;
-                        }
-                        else if (i.match(/["']/) && quote === i && last_i !== "\\") {
-                            result.push(replaceAll(string_1, "\\n", "\n"));
-                            quote = "";
-                            string_1 = "";
-                        }
-                        else if (i.match(/\u300d/) && quote === "\u300c") {
+                    else if (i.match(/\u300d/) && quote === "\u300c") {
+                        result.push(string_1);
+                        quote = "";
+                        string_1 = "";
+                    }
+                    else if (quote === "" && i.match(/\s+/)) {
+                        if (string_1) {
                             result.push(string_1);
-                            quote = "";
                             string_1 = "";
                         }
-                        else if (quote === "" && i.match(/\s+/)) {
-                            if (string_1) {
-                                result.push(string_1);
-                                string_1 = "";
-                            }
-                        }
-                        else {
-                            string_1 += i;
-                        }
-                        last_i = i;
                     }
-                    result.push(string_1);
-                    if (result[0] === undefined ||
-                        (result[2] !== undefined &&
-                            !typeGuard.nicoScript.replace.range(result[2])) ||
-                        (result[3] !== undefined &&
-                            !typeGuard.nicoScript.replace.target(result[3])) ||
-                        (result[4] !== undefined &&
-                            !typeGuard.nicoScript.replace.condition(result[4])))
-                        break;
+                    else {
+                        string_1 += i;
+                    }
+                    last_i = i;
+                }
+                result.push(string_1);
+                if (!(result[0] === undefined ||
+                    (result[2] !== undefined &&
+                        !typeGuard.nicoScript.replace.range(result[2])) ||
+                    (result[3] !== undefined &&
+                        !typeGuard.nicoScript.replace.target(result[3])) ||
+                    (result[4] !== undefined &&
+                        !typeGuard.nicoScript.replace.condition(result[4])))) {
                     nicoScripts.replace.unshift({
                         start: comment.vpos,
                         long: data.long === undefined ? undefined : Math.floor(data.long * 100),
@@ -1203,7 +1188,7 @@
                             return 1;
                         return 0;
                     });
-                    break;
+                }
             }
             data.invisible = true;
         }
@@ -1248,7 +1233,7 @@
                 (item.condition === "\u90e8\u5206\u4e00\u81f4" &&
                     comment.content.indexOf(item.keyword) !== -1)) {
                 if (item.range === "\u5358") {
-                    comment.content = replaceAll(comment.content, item.keyword, item.replace);
+                    comment.content = comment.content.replaceAll(item.keyword, item.replace);
                 }
                 else {
                     comment.content = item.replace;
@@ -1350,6 +1335,9 @@
                 }
             }
         }
+        if (comment.content.startsWith("/")) {
+            result.invisible = true;
+        }
         return result;
     };
     var getStrokeColor = function (comment) {
@@ -1366,6 +1354,15 @@
             ? config.contextStrokeInversionColor
             : config.contextStrokeColor).join(","), ",").concat(config.contextStrokeOpacity, ")");
     };
+    var ArrayEqual = function (a, b) {
+        if (a.length !== b.length)
+            return false;
+        for (var i = 0, n = a.length; i < n; ++i) {
+            if (a[i] !== b[i])
+                return false;
+        }
+        return true;
+    };
 
     var getLineHeight = function (fontSize, isFlash, resized) {
         if (resized === void 0) { resized = false; }
@@ -2370,6 +2367,11 @@
         return FlashComment;
     }());
 
+    var plugins = [];
+    var setPlugins = function (input) {
+        plugins = input;
+    };
+
     var isDebug = false;
     var NiconiComments = (function () {
         function NiconiComments(canvas, data, initOptions) {
@@ -2406,6 +2408,7 @@
                 options.mode = "html5";
             }
             var parsedData = convert2formattedComment(data, formatType);
+            setPlugins(config.plugins.map(function (val) { return new val(canvas, parsedData); }));
             this.video = options.video || undefined;
             this.showCollision = options.showCollision;
             this.showFPS = options.showFPS;
@@ -2563,6 +2566,7 @@
             for (var _i = 0; _i < arguments.length; _i++) {
                 rawComments[_i] = arguments[_i];
             }
+            plugins.forEach(function (val) { return val.addComments(rawComments); });
             var comments = rawComments.reduce(function (pv, val) {
                 if (isFlashComment(val)) {
                     pv.push(new FlashComment(val, _this.context));
@@ -2672,10 +2676,20 @@
             }
         };
         NiconiComments.prototype.drawCanvas = function (vpos, forceRendering) {
+            var _a, _b, _c;
             if (forceRendering === void 0) { forceRendering = false; }
             var drawCanvasStart = performance.now();
             if (this.lastVpos === vpos && !forceRendering)
-                return;
+                return false;
+            var timelineRange = this.timeline[vpos];
+            if (!forceRendering &&
+                (timelineRange === null || timelineRange === void 0 ? void 0 : timelineRange.filter(function (item) { return item.loc === "naka"; }).length) === 0 &&
+                ((_b = (_a = this.timeline[this.lastVpos]) === null || _a === void 0 ? void 0 : _a.filter(function (item) { return item.loc === "naka"; })) === null || _b === void 0 ? void 0 : _b.length) === 0) {
+                var current = timelineRange.filter(function (item) { return item.loc !== "naka"; }), last = ((_c = this.timeline[this.lastVpos]) === null || _c === void 0 ? void 0 : _c.filter(function (item) { return item.loc !== "naka"; })) ||
+                    [];
+                if (ArrayEqual(current, last))
+                    return false;
+            }
             this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
             this.lastVpos = vpos;
             if (this.video) {
@@ -2690,7 +2704,6 @@
                 var offsetX = (this.canvas.width - this.video.videoWidth * scale) * 0.5, offsetY = (this.canvas.height - this.video.videoHeight * scale) * 0.5;
                 this.context.drawImage(this.video, offsetX, offsetY, this.video.videoWidth * scale, this.video.videoHeight * scale);
             }
-            var timelineRange = this.timeline[vpos];
             if (this.showCollision) {
                 var leftCollision = this.collision.left[vpos], rightCollision = this.collision.right[vpos];
                 this.context.fillStyle = "red";
@@ -2701,21 +2714,22 @@
                     }
                 }
                 if (rightCollision) {
-                    for (var _a = 0, rightCollision_1 = rightCollision; _a < rightCollision_1.length; _a++) {
-                        var comment = rightCollision_1[_a];
+                    for (var _d = 0, rightCollision_1 = rightCollision; _d < rightCollision_1.length; _d++) {
+                        var comment = rightCollision_1[_d];
                         this.context.fillRect(config.collisionRange.right, comment.posY, config.contextLineWidth * -1, comment.height);
                     }
                 }
             }
             if (timelineRange) {
-                for (var _b = 0, timelineRange_1 = timelineRange; _b < timelineRange_1.length; _b++) {
-                    var comment = timelineRange_1[_b];
+                for (var _e = 0, timelineRange_1 = timelineRange; _e < timelineRange_1.length; _e++) {
+                    var comment = timelineRange_1[_e];
                     if (comment.invisible) {
                         continue;
                     }
                     comment.draw(vpos, this.showCollision, isDebug);
                 }
             }
+            plugins.forEach(function (val) { return val.draw(vpos); });
             if (this.showFPS) {
                 this.context.font = parseFont("defont", 60);
                 this.context.fillStyle = "#00FF00";
@@ -2739,6 +2753,7 @@
                 }
             }
             logger("drawCanvas complete: ".concat(performance.now() - drawCanvasStart, "ms"));
+            return true;
         };
         NiconiComments.prototype.clear = function () {
             this.context.clearRect(0, 0, config.canvasWidth, config.canvasHeight);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xpadev-net/niconicomments",
-  "version": "0.2.42",
+  "version": "0.2.43",
   "description": "NiconiComments is a comment drawing library that is somewhat compatible with the official Nico Nico Douga player.",
   "main": "dist/bundle.js",
   "types": "dist/bundle.d.ts",