添加静止弹幕

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

@@ -1,3 +1,17 @@
+export function getMode(key) {
+    switch (key) {
+        case 1:
+        case 2:
+        case 3:
+            return 'scroll';
+        case 4:
+        case 5:
+            return 'static';
+        default:
+            return null;
+    }
+}
+
 export function bilibiliDanmuParseFromXml(xmlString) {
     if (typeof xmlString !== 'string') return [];
     const srtList = xmlString.match(/<d([\S ]*?>[\S ]*?)<\/d>/gi);
@@ -9,7 +23,7 @@ export function bilibiliDanmuParseFromXml(xmlString) {
                 ? {
                     text,
                     time: Number(attr[0]),
-                    mode: Number(attr[1]),
+                    mode: getMode(Number(attr[1])),
                     fontSize: Number(attr[2]),
                     color: `#${Number(attr[3]).toString(16)}`,
                     timestamp: Number(attr[4]),

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

@@ -1,8 +1,15 @@
-import { bilibiliDanmuParseFromUrl } from './bilibiliDanmuParse';
+import i18n from './i18n';
+import { opacity, size, speed } from './setting';
+import { filter, getRect } from './utils';
+import { bilibiliDanmuParseFromUrl } from './bilibili';
 import getDanmuTop from './getDanmuTop';
 
 export default class Danmuku {
     constructor(art, option) {
+        art.i18n.update(i18n);
+        art.setting.add(opacity);
+        art.setting.add(size);
+        art.setting.add(speed);
         this.art = art;
         this.queue = [];
         this.refs = [];
@@ -11,42 +18,27 @@ export default class Danmuku {
         this.isStop = false;
         this.animationFrameTimer = null;
         this.$danmuku = art.template.$danmuku;
-        art.i18n.update(Danmuku.i18n);
         art.on('video:play', this.start.bind(this));
         art.on('video:playing', this.start.bind(this));
         art.on('video:pause', this.stop.bind(this));
         art.on('video:waiting', this.stop.bind(this));
-        art.on('resize', this.resize.bind(this));
         art.on('destroy', this.stop.bind(this));
         if (typeof this.option.danmuku === 'function') {
             this.option.danmuku().then(danmus => {
-                danmus.forEach(this.addToQueue.bind(this));
+                danmus.forEach(this.emit.bind(this));
                 art.emit('artplayerPluginDanmuku:loaded');
             });
         } else if (typeof this.option.danmuku === 'string') {
             bilibiliDanmuParseFromUrl(this.option.danmuku).then(danmus => {
-                danmus.forEach(this.addToQueue.bind(this));
+                danmus.forEach(this.emit.bind(this));
                 art.emit('artplayerPluginDanmuku:loaded');
             });
         } else {
-            this.option.danmuku.forEach(this.addToQueue.bind(this));
+            this.option.danmuku.forEach(this.emit.bind(this));
             art.emit('artplayerPluginDanmuku:loaded');
         }
     }
 
-    static get i18n() {
-        return {
-            'zh-cn': {
-                'Danmu text cannot be empty': '弹幕文本不能为空',
-                'The length of the danmu does not exceed': '弹幕文本字数不能超过',
-            },
-            'zh-tw': {
-                'Danmu text cannot be empty': '彈幕文本不能為空',
-                'The length of the danmu does not exceed': '彈幕文本字數不能超過',
-            },
-        };
-    }
-
     static get option() {
         return {
             danmuku: [],
@@ -69,11 +61,6 @@ export default class Danmuku {
         };
     }
 
-    static getRect(ref, key) {
-        const result = ref.getBoundingClientRect();
-        return key ? result[key] : result;
-    }
-
     config(option) {
         const {
             utils: { clamp },
@@ -90,99 +77,54 @@ export default class Danmuku {
         this.art.emit('artplayerPluginDanmuku:config', this.option);
     }
 
-    emit(danmu) {
-        const { $player } = this.art.template;
-        danmu.$ref = this.getDanmuRef();
-        danmu.$ref.style.opacity = this.option.opacity;
-        danmu.$ref.style.fontSize = `${this.option.fontSize}px`;
-        danmu.$ref.innerText = danmu.text;
-        danmu.$ref.style.color = danmu.color;
-        const playerWidth = Danmuku.getRect($player, 'width');
-        const danmuWidth = Danmuku.getRect(danmu.$ref, 'width');
-        danmu.$restWidth = playerWidth + danmuWidth + 5;
-        danmu.$restTime = this.option.speed;
-        danmu.$lastStartTime = Date.now();
-        danmu.$ref.style.left = `${playerWidth}px`;
-        danmu.$ref.style.top = `${this.getDanmuTop()}px`;
-        danmu.$ref.style.transform = `translateX(${-danmu.$restWidth}px) translateY(0px) translateZ(0px)`;
-        danmu.$ref.style.transition = `transform ${danmu.$restTime}s linear 0s`;
-        if (danmu.border) {
-            danmu.$ref.style.border = `1px solid ${danmu.border}`;
-        }
-        danmu.$state = 'emit';
-    }
-
-    static continue(danmu) {
-        danmu.$lastStartTime = Date.now();
-        danmu.$ref.style.transform = `translateX(${-danmu.$restWidth}px) translateY(0px) translateZ(0px)`;
-        danmu.$ref.style.transition = `transform ${danmu.$restTime}s linear 0s`;
-        danmu.$state = 'emit';
-    }
-
-    resize() {
-        const { $player } = this.art.template;
-        const { width: playerWidth } = Danmuku.getRect($player);
-        this.queue.forEach(danmu => {
-            danmu.$state = 'wait';
-        });
-        this.refs.forEach($ref => {
-            $ref.style.left = `${playerWidth}px`;
-            $ref.style.border = 'none';
-            $ref.style.transform = 'translateX(0px) translateY(0px) translateZ(0px)';
-            $ref.style.transition = 'transform 0s linear 0s';
+    continue() {
+        filter(this.queue, 'stop', danmu => {
+            danmu.$state = 'emit';
+            danmu.$lastStartTime = Date.now();
+            switch (danmu.mode) {
+                case 'scroll':
+                    danmu.$ref.style.transform = `translateX(${-danmu.$restWidth}px) translateY(0px) translateZ(0px)`;
+                    danmu.$ref.style.transition = `transform ${danmu.$restTime}s linear 0s`;
+                    break;
+                default:
+                    break;
+            }
         });
     }
 
-    suspend(danmu) {
+    suspend() {
         const { $player } = this.art.template;
-        const { left: playerLeft, width: playerWidth } = Danmuku.getRect($player);
-        const { left: danmuLeft } = Danmuku.getRect(danmu.$ref);
-        danmu.$restTime -= (Date.now() - danmu.$lastStartTime) / 1000;
-        const translateX = playerWidth - (danmuLeft - playerLeft) + 5;
-        danmu.$ref.style.transform = `translateX(${-translateX}px) translateY(0px) translateZ(0px)`;
-        danmu.$ref.style.transition = 'transform 0s linear 0s';
-        danmu.$state = 'stop';
-    }
-
-    addToQueue(danmu) {
-        const { notice, player, i18n } = this.art;
-        if (!danmu.text.trim()) {
-            notice.show(i18n.get('Danmu text cannot be empty'));
-            return;
-        }
-
-        if (danmu.text.length > this.option.maxlength) {
-            notice.show(`${i18n.get('The length of the danmu does not exceed')} ${this.option.maxlength}`);
-            return;
-        }
-
-        if (typeof danmu.time !== 'number') {
-            danmu.time = player.currentTime;
-        }
-
-        this.queue.push({
-            ...danmu,
-            $state: 'wait',
-            $ref: null,
-            $restTime: 0,
-            $lastStartTime: 0,
+        const { left: playerLeft, width: playerWidth } = getRect($player);
+        filter(this.queue, 'emit', danmu => {
+            danmu.$state = 'stop';
+            const { left: danmuLeft } = getRect(danmu.$ref);
+            danmu.$restTime -= (Date.now() - danmu.$lastStartTime) / 1000;
+            const translateX = playerWidth - (danmuLeft - playerLeft) + 5;
+            switch (danmu.mode) {
+                case 'scroll':
+                    danmu.$ref.style.transform = `translateX(${-translateX}px) translateY(0px) translateZ(0px)`;
+                    danmu.$ref.style.transition = 'transform 0s linear 0s';
+                    break;
+                default:
+                    break;
+            }
         });
     }
 
     getDanmuRef() {
         const { $player } = this.art.template;
         const { setStyles, append } = this.art.constructor.utils;
-        const playerLeft = Danmuku.getRect($player, 'left');
+        const playerLeft = getRect($player, 'left');
 
         const waitDanmu = this.queue.find(danmu => {
             if (danmu.$ref) {
-                const { left: danmuLeft, width: danmuWidth } = Danmuku.getRect(danmu.$ref);
-                return danmu.$state === 'emit' && playerLeft > danmuLeft + danmuWidth;
+                const { left: danmuLeft, width: danmuWidth } = getRect(danmu.$ref);
+                return danmu.$state === 'wait' || (danmu.$state === 'emit' && playerLeft > danmuLeft + danmuWidth);
             }
             return false;
         });
 
-        if (waitDanmu) {
+        if (waitDanmu && waitDanmu.$state === 'emit') {
             waitDanmu.$state = 'wait';
             waitDanmu.$ref.style.border = 'none';
             waitDanmu.$ref.style.transform = 'translateX(0px) translateY(0px) translateZ(0px)';
@@ -215,7 +157,7 @@ export default class Danmuku {
 
     getDanmuTop() {
         const { $player } = this.art.template;
-        const { left: playerLeft, top: playerTop, height: playerHeight, width: playerWidth } = Danmuku.getRect($player);
+        const { left: playerLeft, top: playerTop, height: playerHeight, width: playerWidth } = getRect($player);
         const danmus = this.queue.filter(danmu => danmu.$state === 'emit');
 
         if (danmus.length === 0) {
@@ -224,9 +166,7 @@ export default class Danmuku {
 
         const danmusBySort = danmus
             .map(danmu => {
-                const { left: danmuLeft, top: danmuTop, width: danmuWidth, height: danmuHeight } = Danmuku.getRect(
-                    danmu.$ref,
-                );
+                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;
@@ -262,7 +202,10 @@ export default class Danmuku {
     }
 
     update() {
-        const { player } = this.art;
+        const {
+            player,
+            template: { $player },
+        } = this.art;
         this.animationFrameTimer = window.requestAnimationFrame(() => {
             if (player.playing) {
                 this.queue
@@ -274,7 +217,35 @@ export default class Danmuku {
                         );
                     })
                     .forEach(danmu => {
-                        this.emit(danmu);
+                        danmu.$state = 'emit';
+                        danmu.$ref = this.getDanmuRef();
+                        danmu.$ref.style.opacity = this.option.opacity;
+                        danmu.$ref.style.fontSize = `${this.option.fontSize}px`;
+                        danmu.$ref.innerText = danmu.text;
+                        danmu.$ref.style.color = danmu.color;
+                        danmu.$ref.style.border = danmu.border ? `1px solid ${danmu.color}` : 'none';
+                        danmu.$restTime = this.option.speed;
+                        danmu.$lastStartTime = Date.now();
+                        const danmuWidth = getRect(danmu.$ref, 'width');
+                        const danmuTop = this.getDanmuTop(danmu.mode);
+                        switch (danmu.mode) {
+                            case 'scroll': {
+                                const danmuLeft = getRect($player, 'width');
+                                danmu.$restWidth = danmuLeft + danmuWidth + 5;
+                                danmu.$ref.style.left = `${danmuLeft}px`;
+                                danmu.$ref.style.top = `${danmuTop}px`;
+                                danmu.$ref.style.transform = `translateX(${-danmu.$restWidth}px) translateY(0px) translateZ(0px)`;
+                                danmu.$ref.style.transition = `transform ${danmu.$restTime}s linear 0s`;
+                                break;
+                            }
+                            case 'static':
+                                danmu.$ref.style.top = `${danmuTop}px`;
+                                danmu.$ref.style.left = '50%';
+                                danmu.$ref.style.marginLeft = `-${danmuWidth / 2}px`;
+                                break;
+                            default:
+                                break;
+                        }
                     });
             }
 
@@ -286,22 +257,14 @@ export default class Danmuku {
 
     stop() {
         this.isStop = true;
-        this.queue
-            .filter(danmu => danmu.$state === 'emit')
-            .forEach(danmu => {
-                this.suspend(danmu);
-            });
+        this.suspend();
         window.cancelAnimationFrame(this.animationFrameTimer);
         this.art.emit('artplayerPluginDanmuku:stop');
     }
 
     start() {
         this.isStop = false;
-        this.queue
-            .filter(danmu => danmu.$state === 'stop')
-            .forEach(danmu => {
-                Danmuku.continue(danmu);
-            });
+        this.continue();
         this.update();
         this.art.emit('artplayerPluginDanmuku:start');
     }
@@ -315,4 +278,30 @@ export default class Danmuku {
         this.$danmuku.style = 'none';
         this.art.emit('artplayerPluginDanmuku:hide');
     }
+
+    emit(danmu) {
+        const { notice, player, i18n } = this.art;
+        if (!danmu.text.trim()) {
+            notice.show(i18n.get('Danmu text cannot be empty'));
+            return;
+        }
+
+        if (danmu.text.length > this.option.maxlength) {
+            notice.show(`${i18n.get('The length of the danmu does not exceed')} ${this.option.maxlength}`);
+            return;
+        }
+
+        if (typeof danmu.time !== 'number') {
+            danmu.time = player.currentTime;
+        }
+
+        this.queue.push({
+            ...danmu,
+            $state: 'wait',
+            $ref: null,
+            $restTime: 0,
+            $lastStartTime: 0,
+            $restWidth: 0,
+        });
+    }
 }

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

@@ -3,10 +3,14 @@ export default {
         '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': '彈幕文本字數不能超過',
     },
 };

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

@@ -1,20 +1,11 @@
-import * as bilibili from './bilibiliDanmuParse';
 import Danmuku from './danmuku';
-import i18n from './i18n';
-import settingOpacity from './settingOpacity';
-import settingSpeed from './settingSpeed';
-import settingSize from './settingSize';
 
-function artplayerPluginDanmuku(option) {
+export default function artplayerPluginDanmuku(option) {
     return art => {
         const danmuku = new Danmuku(art, option);
-        art.i18n.update(i18n);
-        art.setting.add(settingOpacity);
-        art.setting.add(settingSpeed);
-        art.setting.add(settingSize);
         return {
             name: 'artplayerPluginDanmuku',
-            emit: danmuku.addToQueue.bind(danmuku),
+            emit: danmuku.emit.bind(danmuku),
             config: danmuku.config.bind(danmuku),
             start: danmuku.start.bind(danmuku),
             stop: danmuku.stop.bind(danmuku),
@@ -22,7 +13,4 @@ function artplayerPluginDanmuku(option) {
             show: danmuku.show.bind(danmuku),
         };
     };
-}
-
-artplayerPluginDanmuku.bilibili = bilibili;
-export default artplayerPluginDanmuku;
+}

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

@@ -0,0 +1,116 @@
+export function opacity(art) {
+    const {
+        i18n,
+        events: { proxy },
+    } = art;
+
+    return {
+        name: 'danmuku-opacity',
+        index: 30,
+        html: `
+            <div class="art-setting-header">
+                ${i18n.get('Danmu opacity')}: <span class="art-value">100</span>%
+            </div>
+            <div class="art-setting-range">
+                <input type="range" value="1" min="0.1" max="1" step="0.1">
+            </div>
+        `,
+        mounted: $setting => {
+            const $range = $setting.querySelector('input[type=range]');
+            const $value = $setting.querySelector('.art-value');
+            proxy($range, 'change', () => {
+                const { value } = $range;
+                $value.innerText = Number(value) * 100;
+
+                art.plugins.artplayerPluginDanmuku.config({
+                    opacity: Number(value),
+                });
+
+                art.on('artplayerPluginDanmuku:config', config => {
+                    if ($range.value !== config.opacity) {
+                        $range.value = config.opacity;
+                        $value.innerText = config.opacity * 100;
+                    }
+                });
+            });
+        },
+    };
+}
+
+export function size(art) {
+    const {
+        i18n,
+        events: { proxy },
+    } = art;
+
+    return {
+        name: 'danmuku-size',
+        index: 50,
+        html: `
+            <div class="art-setting-header">
+                ${i18n.get('Danmu size')}: <span class="art-value">25</span>px
+            </div>
+            <div class="art-setting-range">
+                <input type="range" value="25" min="14" max="30" step="1">
+            </div>
+        `,
+        mounted: $setting => {
+            const $range = $setting.querySelector('input[type=range]');
+            const $value = $setting.querySelector('.art-value');
+            proxy($range, 'change', () => {
+                const { value } = $range;
+                $value.innerText = value;
+
+                art.plugins.artplayerPluginDanmuku.config({
+                    fontSize: Number(value),
+                });
+
+                art.on('artplayerPluginDanmuku:config', config => {
+                    if ($range.value !== config.fontSize) {
+                        $range.value = config.fontSize;
+                        $value.innerText = config.fontSize;
+                    }
+                });
+            });
+        },
+    };
+}
+
+export function speed(art) {
+    const {
+        i18n,
+        events: { proxy },
+    } = art;
+
+    return {
+        name: 'danmuku-speed',
+        index: 40,
+        html: `
+            <div class="art-setting-header">
+                ${i18n.get('Danmu speed')}: <span class="art-value">5</span>s
+            </div>
+            <div class="art-setting-range">
+                <input type="range" value="5" min="1" max="10" step="1">
+            </div>
+        `,
+        mounted: $setting => {
+            const $range = $setting.querySelector('input[type=range]');
+            const $value = $setting.querySelector('.art-value');
+            proxy($range, 'change', () => {
+                const { value } = $range;
+                $value.innerText = value;
+
+                art.plugins.artplayerPluginDanmuku.config({
+                    speed: Number(value),
+                });
+
+                art.on('artplayerPluginDanmuku:config', config => {
+                    if ($range.value !== config.speed) {
+                        $range.value = config.speed;
+                        $value.innerText = config.speed;
+                    }
+                });
+            });
+        },
+    };
+}

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

@@ -1,38 +0,0 @@
-export default function setting(art) {
-    const {
-        i18n,
-        events: { proxy },
-    } = art;
-
-    return {
-        name: 'danmuku-opacity',
-        index: 30,
-        html: `
-            <div class="art-setting-header">
-                ${i18n.get('Danmu opacity')}: <span class="art-value">100</span>%
-            </div>
-            <div class="art-setting-range">
-                <input type="range" value="1" min="0.1" max="1" step="0.1">
-            </div>
-        `,
-        mounted: $setting => {
-            const $range = $setting.querySelector('input[type=range]');
-            const $value = $setting.querySelector('.art-value');
-            proxy($range, 'change', () => {
-                const { value } = $range;
-                $value.innerText = Number(value) * 100;
-
-                art.plugins.artplayerPluginDanmuku.config({
-                    opacity: Number(value),
-                });
-
-                art.on('artplayerPluginDanmuku:config', config => {
-                    if ($range.value !== config.opacity) {
-                        $range.value = config.opacity;
-                        $value.innerText = config.opacity * 100;
-                    }
-                });
-            });
-        },
-    };
-}

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

@@ -1,38 +0,0 @@
-export default function setting(art) {
-    const {
-        i18n,
-        events: { proxy },
-    } = art;
-
-    return {
-        name: 'danmuku-size',
-        index: 50,
-        html: `
-            <div class="art-setting-header">
-                ${i18n.get('Danmu size')}: <span class="art-value">25</span>px
-            </div>
-            <div class="art-setting-range">
-                <input type="range" value="25" min="14" max="30" step="1">
-            </div>
-        `,
-        mounted: $setting => {
-            const $range = $setting.querySelector('input[type=range]');
-            const $value = $setting.querySelector('.art-value');
-            proxy($range, 'change', () => {
-                const { value } = $range;
-                $value.innerText = value;
-
-                art.plugins.artplayerPluginDanmuku.config({
-                    fontSize: Number(value),
-                });
-
-                art.on('artplayerPluginDanmuku:config', config => {
-                    if ($range.value !== config.fontSize) {
-                        $range.value = config.fontSize;
-                        $value.innerText = config.fontSize;
-                    }
-                });
-            });
-        },
-    };
-}

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

@@ -1,38 +0,0 @@
-export default function setting(art) {
-    const {
-        i18n,
-        events: { proxy },
-    } = art;
-
-    return {
-        name: 'danmuku-speed',
-        index: 40,
-        html: `
-            <div class="art-setting-header">
-                ${i18n.get('Danmu speed')}: <span class="art-value">5</span>s
-            </div>
-            <div class="art-setting-range">
-                <input type="range" value="5" min="1" max="10" step="1">
-            </div>
-        `,
-        mounted: $setting => {
-            const $range = $setting.querySelector('input[type=range]');
-            const $value = $setting.querySelector('.art-value');
-            proxy($range, 'change', () => {
-                const { value } = $range;
-                $value.innerText = value;
-
-                art.plugins.artplayerPluginDanmuku.config({
-                    speed: Number(value),
-                });
-
-                art.on('artplayerPluginDanmuku:config', config => {
-                    if ($range.value !== config.speed) {
-                        $range.value = config.speed;
-                        $value.innerText = config.speed;
-                    }
-                });
-            });
-        },
-    };
-}

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

@@ -0,0 +1,8 @@
+export function filter(queue, state, callback) {
+    return queue.filter(danmu => danmu.$state === state).map(callback);
+}
+
+export function getRect(ref, key) {
+    const result = ref.getBoundingClientRect();
+    return key ? result[key] : result;
+}