弹幕显示名称

try to take over the world!
当前为 2021-03-01 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         弹幕显示名称
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://live.bilibili.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    document.body.insertAdjacentHTML('afterBegin',`<style>
nav,.wrap{   width: auto !important;   max-width: 1400px !important;   margin: auto;}
.wrap>ul{    display: flex !important;    flex-wrap: wrap;    justify-content: center;}
.bilibili-live-player-video-danmaku i{font-size:60%;text-decoration: underline;opacity:1}
.highline{ outline: 3px solid; }
</stype>`);
    //本地储存
    let localkey = 'iikmkjmpaadaobahmlepeloendndfphd.localdata';
    let localdata = new Proxy(JSON.parse(localStorage[localkey]||'{}') ,{
        set(self,key,val){
            self[key] = val;
            localStorage[localkey] = JSON.stringify(self);
            return true;
        }
    });
    //高亮边框
    let menuObserver = new MutationObserver((mu,obs)=>{
        mu.forEach(xx=>{
            let el = xx.addedNodes[0];
            if(!el||el.className.trim()!="context-menu-submenu"){
                return;
            }
            let ul = el.querySelector('.context-menu-ul');
            let uid = el.querySelector('[href*=http]').getAttribute('href').match(/\d+$/)[0];
            ul.insertAdjacentHTML('afterBegin',`<li class="context-menu-function"><a data-uid='${uid}' class="xx">高亮uid/取消高亮</a></li>`);
        });
        document.querySelectorAll('.bilibili-live-player-context-menu-container .xx').forEach(xx=>{
            xx.onclick=xxx=>{
                xxx = xxx.target;
                localdata[xxx.dataset.uid] = localdata[xxx.dataset.uid]?0:1;
                document.querySelectorAll(`.bilibili-live-player-video-danmaku [data-uid="${xxx.dataset.uid}"]`).forEach(xx=>{
                    localdata[xxx.dataset.uid] ? xx.classList.add('highline') : xx.classList.remove('highline') ;
                });
                document.querySelectorAll('.bilibili-live-player-context-menu-container').forEach(xx=>{
                    xx.setAttribute('style','top: -9999px; left: -9999px;');
                })
            };
        });
    });
    document.querySelectorAll('.bilibili-live-player-context-menu-container>ul').forEach(dm=>{
        menuObserver.observe(dm, { attributes: false, childList: true, subtree: false } );
    })
    //名称备注
    let danmakuObserver = new MutationObserver((mu, obs) => {
        document.querySelectorAll('.bilibili-live-player-video-danmaku>:not([style*=done])').forEach(xx=>{
            if(xx.querySelector('i')){
                xx.setAttribute('style',xx.getAttribute('style')+(';done'));
                return;
            }
            let tt = xx.innerHTML.replaceAll('\\','\\\\').replaceAll('"','\\"');
            let lw = document.querySelectorAll(`.chat-items>.danmaku-item[data-danmaku*="${tt}"]:not([style*=done])`);
            if(lw.length){
                lw = lw[lw.length-1];
                let ic = lw.querySelector('[class*=-icon]:empty');
                ic && (xx.innerHTML+= `<b class='chat-history-panel' style='display:inline-block;background:none;float:left'>`
                       + `<span class='chat-history-list' style='padding:0;font-size:100%;'>`
                       + `<span class='chat-item danmaku-item' style=padding:0>${ic.outerHTML}</span></span></b>`);
                xx.innerHTML+=`<i style=';'>${lw.dataset.uname}</i>`;

                let ts = xx.getAttribute('style').match(/transform\s+([\d\.]+)/);
                ts = parseFloat( ts&&ts[1] );
                ts && setTimeout(xxx=>{
                    xx.setAttribute('style',xx.getAttribute('style')+`;display:none`);
                },ts*1000);
                lw.setAttribute('style',lw.getAttribute('style')+(';done'));
                xx.setAttribute('style',xx.getAttribute('style')+(';done'));
                xx.setAttribute('data-uid',lw.dataset.uid);
                if(localdata[lw.dataset.uid]){
                    xx.classList.add('highline');
                }
            }
        });
    });
    document.querySelectorAll('.chat-items,.bilibili-live-player-video-danmaku').forEach(dm=>{
        danmakuObserver.observe(dm, { attributes: false, childList: true, subtree: false } );
    });

})();
欢迎访问Greasy Fork镜像
