update heatmap

2026-10-08 19:06:15 -08:00 · 2023-05-02 19:14:14 +08:00
1 parent db5a7d3567
commit 56af4ca4a4
@@ -10,7 +10,7 @@ var art = new Artplayer({
    setting: true,
    plugins: [
        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku-v2.xml',
+            danmuku: 'http://d.artplayer.org?id=BV1ks411W7r5',
            speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10]
            opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
            fontSize: 25, // 字体大小，支持数字和百分比
@@ -163,7 +163,7 @@ function artplayerPluginDanmuku(option) {
        checkVersion(art);
        const danmuku = new (0, _danmukuDefault.default)(art, option);
        (0, _settingDefault.default)(art, danmuku);
-        if (option.heatmap) (0, _heatmapDefault.default)(art, danmuku);
+        if (option.heatmap) (0, _heatmapDefault.default)(art, danmuku, option.heatmap);
        return {
            name: "artplayerPluginDanmuku",
            emit: danmuku.emit.bind(danmuku),
@@ -187,7 +187,7 @@ function artplayerPluginDanmuku(option) {
 exports.default = artplayerPluginDanmuku;
 artplayerPluginDanmuku.env = "development";
 artplayerPluginDanmuku.version = "5.0.1";
-artplayerPluginDanmuku.build = "2023-05-02 15:25:00";
+artplayerPluginDanmuku.build = "2023-05-02 18:01:36";
 if (typeof window !== "undefined") window["artplayerPluginDanmuku"] = artplayerPluginDanmuku;

 },{"./danmuku":"cv7fe","./setting":"cI0ih","./heatmap":"bZziT","@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"cv7fe":[function(require,module,exports) {
@@ -274,7 +274,7 @@ class Danmuku {
            maxWidth: "number",
            mount: "undefined|htmldivelement",
            theme: "string",
-            heatmap: "boolean",
+            heatmap: "object|boolean",
            beforeEmit: "function"
        };
    }
@@ -1192,18 +1192,25 @@ const line = (pointA, pointB)=>{
        angle: Math.atan2(lengthY, lengthX)
    };
 };
-function heatmap(art, danmuku) {
+function heatmap(art, danmuku, option) {
+    const { query  } = art.constructor.utils;
    art.controls.add({
        name: "heatmap",
        position: "top",
        html: "",
        style: {
-            height: "50px",
+            height: "100px",
            width: "100%",
            pointerEvents: "none"
        },
        mounted ($heatmap) {
+            let $start = null;
+            let $stop = null;
            function update() {
+                $start = null;
+                $stop = null;
+                $heatmap.innerHTML = "";
+                if (danmuku.danmus.length === 0) return;
                const svg = {
                    w: $heatmap.offsetWidth,
                    h: $heatmap.offsetHeight
@@ -1213,22 +1220,30 @@ function heatmap(art, danmuku) {
                    xMax: svg.w,
                    yMin: 0,
                    yMax: 128,
-                    scale: 0.2,
-                    minHeight: Math.floor(svg.h * 0.1),
+                    scale: 0.25,
+                    opacity: 0.2,
+                    minHeight: Math.floor(svg.h * 0.05),
                    sampling: Math.floor(svg.w / 100),
-                    fill: "rgba(255, 255, 255, 0.5)",
                    smoothing: 0.2,
-                    flattening: 0
+                    flattening: 0.2
                };
+                if (typeof option === "object") Object.assign(options, option);
                const points = [];
                const gap = art.duration / svg.w;
                for(let x = 0; x <= svg.w; x += options.sampling){
                    const y = danmuku.danmus.filter(({ time  })=>time > x * gap && time <= (x + options.sampling) * gap).length;
                    points.push([
                        x,
-                        y + options.minHeight
+                        y
                    ]);
                }
+                const lastPoint = points[points.length - 1];
+                const lastX = lastPoint[0];
+                const lastY = lastPoint[1];
+                if (lastX !== svg.w) points.push([
+                    svg.w,
+                    lastY
+                ]);
                const yPoints = points.map((point)=>point[1]);
                const yMin = Math.min(...yPoints);
                const yMax = Math.max(...yPoints);
@@ -1236,7 +1251,7 @@ function heatmap(art, danmuku) {
                for(let i = 0; i < points.length; i++){
                    const point = points[i];
                    const y = point[1];
-                    point[1] = y * (y > yMid ? 1 + options.scale : 1 - options.scale);
+                    point[1] = y * (y > yMid ? 1 + options.scale : 1 - options.scale) + options.minHeight;
                }
                const controlPoint = (current, previous, next, reverse)=>{
                    const p = previous || current;
@@ -1268,14 +1283,38 @@ function heatmap(art, danmuku) {
                });
                const pathD = pointsPositions.reduce((acc, e, i, a)=>i === 0 ? `M ${a[a.length - 1][0]},${svg.h} L ${e[0]},${svg.h} L ${e[0]},${e[1]}` : `${acc} ${bezierCommand(e, i, a)}`, "");
                $heatmap.innerHTML = `
-                  <svg viewBox="0 0 ${svg.w} ${svg.h}">
-                      <path style="fill: var(--art-progress-color, ${options.fill})" d="${pathD}"></path>
-                  </svg>
+                    <svg viewBox="0 0 ${svg.w} ${svg.h}">
+                        <defs>
+                            <linearGradient id="heatmap-solids" x1="0%" y1="0%" x2="100%" y2="0%">
+                                <stop offset="0%" style="stop-color:var(--art-theme);stop-opacity:${options.opacity}" />
+                                <stop offset="0%" style="stop-color:var(--art-theme);stop-opacity:${options.opacity}" id="heatmap-start" />
+                                <stop offset="0%" style="stop-color:var(--art-progress-color);stop-opacity:1" id="heatmap-stop" />
+                                <stop offset="100%" style="stop-color:var(--art-progress-color);stop-opacity:1" />
+                            </linearGradient>
+                        </defs>
+                        <path fill="url(#heatmap-solids)" d="${pathD}"></path>
+                    </svg>
                `;
+                $start = query("#heatmap-start", $heatmap);
+                $stop = query("#heatmap-stop", $heatmap);
+                $start.setAttribute("offset", `${art.played * 100}%`);
+                $stop.setAttribute("offset", `${art.played * 100}%`);
            }
+            art.on("video:timeupdate", ()=>{
+                if ($start && $stop) {
+                    $start.setAttribute("offset", `${art.played * 100}%`);
+                    $stop.setAttribute("offset", `${art.played * 100}%`);
+                }
+            });
+            art.on("setBar", (type, percentage)=>{
+                if ($start && $stop && type === "played") {
+                    $start.setAttribute("offset", `${percentage * 100}%`);
+                    $stop.setAttribute("offset", `${percentage * 100}%`);
+                }
+            });
            art.on("ready", update);
            art.on("resize", update);
-            art.emit("artplayerPluginDanmuku:loaded", update);
+            art.on("artplayerPluginDanmuku:loaded", update);
        }
    });
 }
@@ -1 +1 @@
-{"mappings":"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 truncated
+{"mappings":"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 truncated
@@ -249,7 +249,7 @@ class Artplayer extends (0, _emitterDefault.default) {
        return "development";
    }
    static get build() {
-        return "2023-05-02 15:48:47";
+        return "2023-05-02 17:01:04";
    }
    static get config() {
        return 0, _configDefault.default;
@@ -86,7 +86,7 @@ export default class Danmuku {
            maxWidth: 'number',
            mount: 'undefined|htmldivelement',
            theme: 'string',
-            heatmap: 'boolean',
+            heatmap: 'object|boolean',
            beforeEmit: 'function',
        };
    }
@@ -24,18 +24,29 @@ const line = (pointA, pointB) => {
    };
 };

-export default function heatmap(art, danmuku) {
+export default function heatmap(art, danmuku, option) {
+    const { query } = art.constructor.utils;
+
    art.controls.add({
        name: 'heatmap',
        position: 'top',
        html: '',
        style: {
-            height: '50px',
+            height: '100px',
            width: '100%',
            pointerEvents: 'none',
        },
        mounted($heatmap) {
+            let $start = null;
+            let $stop = null;
+
            function update() {
+                $start = null;
+                $stop = null;
+                $heatmap.innerHTML = '';
+
+                if (danmuku.danmus.length === 0) return;
+
                const svg = {
                    w: $heatmap.offsetWidth,
                    h: $heatmap.offsetHeight,
@@ -46,21 +57,32 @@ export default function heatmap(art, danmuku) {
                    xMax: svg.w,
                    yMin: 0,
                    yMax: 128,
-                    scale: 0.2,
-                    minHeight: Math.floor(svg.h * 0.1),
+                    scale: 0.25,
+                    opacity: 0.2,
+                    minHeight: Math.floor(svg.h * 0.05),
                    sampling: Math.floor(svg.w / 100),
-                    fill: 'rgba(255, 255, 255, 0.5)',
                    smoothing: 0.2,
-                    flattening: 0,
+                    flattening: 0.2,
                };

+                if (typeof option === 'object') {
+                    Object.assign(options, option);
+                }
+
                const points = [];
                const gap = art.duration / svg.w;
                for (let x = 0; x <= svg.w; x += options.sampling) {
                    const y = danmuku.danmus.filter(
                        ({ time }) => time > x * gap && time <= (x + options.sampling) * gap,
                    ).length;
-                    points.push([x, y + options.minHeight]);
+                    points.push([x, y]);
+                }
+
+                const lastPoint = points[points.length - 1];
+                const lastX = lastPoint[0];
+                const lastY = lastPoint[1];
+                if (lastX !== svg.w) {
+                    points.push([svg.w, lastY]);
                }

                const yPoints = points.map((point) => point[1]);
@@ -71,7 +93,7 @@ export default function heatmap(art, danmuku) {
                for (let i = 0; i < points.length; i++) {
                    const point = points[i];
                    const y = point[1];
-                    point[1] = y * (y > yMid ? 1 + options.scale : 1 - options.scale);
+                    point[1] = y * (y > yMid ? 1 + options.scale : 1 - options.scale) + options.minHeight;
                }

                const controlPoint = (current, previous, next, reverse) => {
@@ -108,15 +130,42 @@ export default function heatmap(art, danmuku) {
                );

                $heatmap.innerHTML = `
-                  <svg viewBox="0 0 ${svg.w} ${svg.h}">
-                      <path style="fill: var(--art-progress-color, ${options.fill})" d="${pathD}"></path>
-                  </svg>
+                    <svg viewBox="0 0 ${svg.w} ${svg.h}">
+                        <defs>
+                            <linearGradient id="heatmap-solids" x1="0%" y1="0%" x2="100%" y2="0%">
+                                <stop offset="0%" style="stop-color:var(--art-theme);stop-opacity:${options.opacity}" />
+                                <stop offset="0%" style="stop-color:var(--art-theme);stop-opacity:${options.opacity}" id="heatmap-start" />
+                                <stop offset="0%" style="stop-color:var(--art-progress-color);stop-opacity:1" id="heatmap-stop" />
+                                <stop offset="100%" style="stop-color:var(--art-progress-color);stop-opacity:1" />
+                            </linearGradient>
+                        </defs>
+                        <path fill="url(#heatmap-solids)" d="${pathD}"></path>
+                    </svg>
                `;
+
+                $start = query('#heatmap-start', $heatmap);
+                $stop = query('#heatmap-stop', $heatmap);
+                $start.setAttribute('offset', `${art.played * 100}%`);
+                $stop.setAttribute('offset', `${art.played * 100}%`);
            }

+            art.on('video:timeupdate', () => {
+                if ($start && $stop) {
+                    $start.setAttribute('offset', `${art.played * 100}%`);
+                    $stop.setAttribute('offset', `${art.played * 100}%`);
+                }
+            });
+
+            art.on('setBar', (type, percentage) => {
+                if ($start && $stop && type === 'played') {
+                    $start.setAttribute('offset', `${percentage * 100}%`);
+                    $stop.setAttribute('offset', `${percentage * 100}%`);
+                }
+            });
+
            art.on('ready', update);
            art.on('resize', update);
-            art.emit('artplayerPluginDanmuku:loaded', update);
+            art.on('artplayerPluginDanmuku:loaded', update);
        },
    });
 }
@@ -18,7 +18,7 @@ export default function artplayerPluginDanmuku(option) {
        checkVersion(art);
        const danmuku = new Danmuku(art, option);
        setting(art, danmuku);
-        if (option.heatmap) heatmap(art, danmuku);
+        if (option.heatmap) heatmap(art, danmuku, option.heatmap);
        return {
            name: 'artplayerPluginDanmuku',
            emit: danmuku.emit.bind(danmuku),
@@ -119,7 +119,20 @@ type Option = {
    /**
     * 是否开启弹幕热度图
     */
-    heatmap?: boolean;
+    heatmap?:
+        | boolean
+        | {
+              xMin?: number;
+              xMax?: number;
+              yMin?: number;
+              yMax?: number;
+              scale?: number;
+              opacity?: number;
+              minHeight?: number;
+              sampling?: number;
+              smoothing?: number;
+              flattening?: number;
+          };

    /**
     * 发送弹幕前的自定义校验，返回 true 则可以发送