build all packages

packages/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js

@@ -0,0 +1,8 @@
+/*!
+ * artplayer-plugin-danmuku.js v3.1.7
+ * Github: https://github.com/zhw2590582/ArtPlayer#readme
+ * (c) 2017-2019 Harvey Zack
+ * Released under the MIT License.
+ */
+
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).artplayerPluginDanmuku=e()}(this,function(){"use strict";var r=function(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t};var a=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),i.forEach(function(t){r(e,t,n[t])})}return e};var i=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")};function o(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}var t=function(t,e,n){return e&&o(t.prototype,e),n&&o(t,n),t},u={"zh-cn":{"Danmu opacity":"弹幕透明度","Danmu speed":"弹幕速度","Danmu size":"弹幕大小","Danmu text cannot be empty":"弹幕文本不能为空","The length of the danmu does not exceed":"弹幕文本字数不能超过"},"zh-tw":{"Danmu opacity":"彈幕透明度","Danmu speed":"彈幕速度","Danmu size":"弹幕大小","Danmu text cannot be empty":"彈幕文本不能為空","The length of the danmu does not exceed":"彈幕文本字數不能超過"}};function s(i){var t=i.i18n,r=i.events.proxy;return{name:"danmuku-opacity",index:30,html:'\n            <div class="art-setting-header">\n                '.concat(t.get("Danmu opacity"),': <span class="art-value">100</span>%\n            </div>\n            <div class="art-setting-range">\n                <input type="range" value="1" min="0.1" max="1" step="0.1">\n            </div>\n        '),mounted:function(t){var e=t.querySelector("input[type=range]"),n=t.querySelector(".art-value");r(e,"change",function(){var t=e.value;n.innerText=100*Number(t),i.plugins.artplayerPluginDanmuku.config({opacity:Number(t)}),i.on("artplayerPluginDanmuku:config",function(t){e.value!==t.opacity&&(e.value=t.opacity,n.innerText=100*t.opacity)})})}}}function l(i){var t=i.i18n,r=i.events.proxy;return{name:"danmuku-size",index:50,html:'\n            <div class="art-setting-header">\n                '.concat(t.get("Danmu size"),': <span class="art-value">25</span>px\n            </div>\n            <div class="art-setting-range">\n                <input type="range" value="25" min="14" max="30" step="1">\n            </div>\n        '),mounted:function(t){var e=t.querySelector("input[type=range]"),n=t.querySelector(".art-value");r(e,"change",function(){var t=e.value;n.innerText=t,i.plugins.artplayerPluginDanmuku.config({fontSize:Number(t)}),i.on("artplayerPluginDanmuku:config",function(t){e.value!==t.fontSize&&(e.value=t.fontSize,n.innerText=t.fontSize)})})}}}function c(i){var t=i.i18n,r=i.events.proxy;return{name:"danmuku-speed",index:40,html:'\n            <div class="art-setting-header">\n                '.concat(t.get("Danmu speed"),': <span class="art-value">5</span>s\n            </div>\n            <div class="art-setting-range">\n                <input type="range" value="5" min="1" max="10" step="1">\n            </div>\n        '),mounted:function(t){var e=t.querySelector("input[type=range]"),n=t.querySelector(".art-value");r(e,"change",function(){var t=e.value;n.innerText=t,i.plugins.artplayerPluginDanmuku.config({speed:Number(t)}),i.on("artplayerPluginDanmuku:config",function(t){e.value!==t.speed&&(e.value=t.speed,n.innerText=t.speed)})})}}}function p(t,e,n){return t.filter(function(t){return t.$state===e}).map(n)}function f(t,e){var n=t.getBoundingClientRect();return e?n[e]:n}var n=function(t){if(Array.isArray(t))return t};var m=function(t,e){var n=[],i=!0,r=!1,a=void 0;try{for(var o,u=t[Symbol.iterator]();!(i=(o=u.next()).done)&&(n.push(o.value),!e||n.length!==e);i=!0);}catch(t){r=!0,a=t}finally{try{i||null==u.return||u.return()}finally{if(r)throw a}}return n};var h=function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")};var $=function(t,e){return n(t)||m(t,e)||h()};function d(t){return fetch(t).then(function(t){return t.text()}).then(function(t){return function(t){if("string"!=typeof t)return[];var e=t.match(/<d([\S ]*?>[\S ]*?)<\/d>/gi);return e.length?e.map(function(t){var e=t.match(/<d p="(.+)">(.+)<\/d>/),n=$(e,3),i=n[1],r=n[2],a=i.split(",");return 8===a.length&&r.trim()?{text:r,time:Number(a[0]),mode:function(t){switch(t){case 1:case 2:case 3:return"scroll";case 4:case 5:return"static";default:return null}}(Number(a[1])),fontSize:Number(a[2]),color:"#".concat(Number(a[3]).toString(16)),timestamp:Number(a[4]),pool:Number(a[5]),userID:a[6],rowID:Number(a[7])}:null}):[]}(t)})}function y(t,e){var n=$(t.option.margin,2),i=n[0],r=n[1],o=f(t.art.template.$player),a=t.queue.filter(function(t){return t.mode===e.mode&&"emit"===t.$state&&t.$ref&&t.$ref.style.fontLine truncated

packages/artplayer-plugin-danmuku/src/danmuku.js

@@ -12,7 +12,6 @@ export default class Danmuku {
         art.setting.add(speed);
         this.art = art;
         this.queue = [];
-        this.refs = [];
         this.option = {};
         this.config(option);
         this.isStop = false;
@@ -126,52 +125,6 @@ export default class Danmuku {
         });
     }
 
-    getDanmuTop(mode) {
-        const { $player } = this.art.template;
-        const { left: playerLeft, top: playerTop, height: playerHeight, width: playerWidth } = getRect($player);
-        const danmus = this.queue.filter(danmu => danmu.mode === mode && danmu.$state === 'emit');
-
-        if (danmus.length === 0) {
-            return this.option.margin[0];
-        }
-
-        const danmusBySort = danmus
-            .map(danmu => {
-                const { left: danmuLeft, top: danmuTop, width: danmuWidth, height: danmuHeight } = getRect(danmu.$ref);
-                const top = danmuTop - playerTop;
-                const left = danmuLeft - playerLeft;
-                const right = playerWidth - left - danmuWidth;
-                return {
-                    top,
-                    left,
-                    right,
-                    height: danmuHeight,
-                    width: danmuWidth,
-                };
-            })
-            .sort((prev, next) => {
-                return prev.top - next.top;
-            });
-
-        danmusBySort.unshift({
-            top: 0,
-            left: 0,
-            right: 0,
-            height: this.option.margin[0],
-            width: playerWidth,
-        });
-
-        danmusBySort.push({
-            top: playerHeight - this.option.margin[1],
-            left: 0,
-            right: 0,
-            height: this.option.margin[1],
-            width: playerWidth,
-        });
-
-        return getDanmuTop(danmusBySort);
-    }
-
     update() {
         const {
             player,
@@ -203,12 +156,8 @@ export default class Danmuku {
                         );
                     })
                     .forEach(danmu => {
-                        danmu.$state = 'emit';
                         danmu.$ref = getDanmuRef(this.queue);
                         this.$danmuku.appendChild(danmu.$ref);
-                        if (!this.refs.includes(danmu.$ref)) {
-                            this.refs.push(danmu.$ref);
-                        }
                         danmu.$ref.style.opacity = this.option.opacity;
                         danmu.$ref.style.fontSize = `${this.option.fontSize}px`;
                         danmu.$ref.innerText = danmu.text;
@@ -217,7 +166,8 @@ export default class Danmuku {
                         danmu.$restTime = this.option.speed;
                         danmu.$lastStartTime = Date.now();
                         const danmuWidth = getRect(danmu.$ref, 'width');
-                        const danmuTop = this.getDanmuTop(danmu.mode);
+                        const danmuTop = getDanmuTop(this, danmu);
+                        danmu.$state = 'emit';
                         switch (danmu.mode) {
                             case 'scroll': {
                                 danmu.$restWidth = danmuLeft + danmuWidth + 5;
@@ -285,6 +235,7 @@ export default class Danmuku {
         }
 
         this.queue.push({
+            mode: 'scroll',
             ...danmu,
             $state: 'wait',
             $ref: null,

packages/artplayer-plugin-danmuku/src/getDanmuTop.js

@@ -1,5 +1,18 @@
-function getDanmuTopByDiff(danmus) {
+import { getRect } from './utils';
+
+function calculatedTop(danmus) {
     let top = 0;
+    const topMap = {};
+    for (let index = 0; index < danmus.length; index += 1) {
+        const item = danmus[index];
+        if (topMap[item.top]) {
+            topMap[item.top].push(item);
+        } else {
+            topMap[item.top] = [item];
+        }
+    }
+    const topMapKeys = Object.keys(topMap);
+
     let maxDiff = 0;
     for (let index = 1; index < danmus.length; index += 1) {
         const item = danmus[index];
@@ -11,52 +24,82 @@ function getDanmuTopByDiff(danmus) {
             maxDiff = diff;
         }
     }
-    return top;
-}
 
-function getDanmuTopBySparse(danmus) {
-    const topMap = {};
-    for (let index = 0; index < danmus.length; index += 1) {
-        const item = danmus[index];
-        if (topMap[item.top]) {
-            topMap[item.top].push(item);
-        } else {
-            topMap[item.top] = [item];
-        }
-    }
+    if (top === 0) {
+        let maxRight = 0;
+        for (let index = 0; index < topMapKeys.length; index += 1) {
+            let minRight = danmus[0].width;
+            const topKey = topMapKeys[index];
+            const danmuArr = topMap[topKey];
+            for (let index = 0; index < danmuArr.length; index += 1) {
+                const danmu = danmuArr[index];
+                if (danmu.right < minRight) {
+                    minRight = danmu.right;
+                }
+            }
 
-    let maxRight = 0;
-    let top = 0;
-    const topMapKeys = Object.keys(topMap);
-    for (let index = 0; index < topMapKeys.length; index += 1) {
-        let minRight = danmus[0].width;
-        const topKey = topMapKeys[index];
-        const danmuArr = topMap[topKey];
-        for (let index = 0; index < danmuArr.length; index += 1) {
-            const danmu = danmuArr[index];
-            if (danmu.right < minRight) {
-                minRight = danmu.right;
+            if (minRight > maxRight) {
+                maxRight = minRight;
+                [{ top }] = danmuArr;
             }
         }
-
-        if (minRight > maxRight) {
-            maxRight = minRight;
-            [{ top }] = danmuArr;
-        }
     }
 
     if (top === 0) {
-        const randomKey = Math.floor(Math.random() * (2 - topMapKeys.length) + topMapKeys.length - 1);
-        top = topMapKeys[randomKey];
+        [top] = topMapKeys
+            .filter((item, index) => {
+                return index !== 0 && index !== topMapKeys.length - 1;
+            })
+            .sort((prev, next) => {
+                return topMap[prev].length - topMap[next].length;
+            });
     }
 
     return top;
 }
 
-export default function getDanmuTop(danmus) {
-    let top = getDanmuTopByDiff(danmus);
-    if (top === 0) {
-        top = getDanmuTopBySparse(danmus);
+export default function getDanmuTop(ins, danmu) {
+    const [marginTop, marginBottom] = ins.option.margin;
+    const playerData = getRect(ins.art.template.$player);
+    const danmus = ins.queue
+        .filter(
+            item =>
+                item.mode === danmu.mode &&
+                item.$state === 'emit' &&
+                item.$ref &&
+                item.$ref.style.fontSize === danmu.$ref.style.fontSize,
+        )
+        .map(item => {
+            const danmuData = getRect(item.$ref);
+            const { width, height } = danmuData;
+            const top = danmuData.top - playerData.top;
+            const left = danmuData.left - playerData.left;
+            const right = playerData.width - left - width;
+            return { top, left, height, width, right, item };
+        })
+        .sort((prev, next) => {
+            return prev.top - next.top;
+        });
+
+    if (danmus.length === 0) {
+        return marginTop;
     }
-    return top;
+
+    danmus.unshift({
+        top: 0,
+        left: 0,
+        right: 0,
+        height: marginTop,
+        width: playerData.width,
+    });
+
+    danmus.push({
+        top: playerData.height - marginBottom,
+        left: 0,
+        right: 0,
+        height: marginBottom,
+        width: playerData.width,
+    });
+
+    return calculatedTop(danmus);
 }