☰

B站直播SC悬浮窗

将B站直播的SC部分展开显示到一个悬浮窗

目前为 2024-01-07 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         B站直播SC悬浮窗
  3. // @namespace    https://gitee.com/zhangsongqiang/userscript/
  4. // @version      0.5
  5. // @description  将B站直播的SC部分展开显示到一个悬浮窗
  6. // @author       Zhangsq37
  7. // @match        https://live.bilibili.com/*
  8. // @icon https://www.google.com/s2/favicons?sz=64&domain=bilibili.com
  9. // @grant GM_addStyle
  10. // @grant GM_registerMenuCommand
  11. // @license MIT
  12. // @grant unsafeWindow
  13. // ==/UserScript==
  14.  
  15. (function () {
  16.  
  17.     const styles_superchat_items = `
  18.    div.superchatItem {
  19.            width: 85%;
  20.            height: auto;
  21.            border: 2px solid gray;
  22.            border-radius: 10px;
  23.            padding: 0%;
  24.            margin: 5%;
  25.            margin-right: 10%;
  26.    
  27.            transition: background-color 2s;
  28.        }
  29.    
  30.        div.superchatItem>div.sc_title {
  31.            width: 100%;
  32.            padding-top: 4px;
  33.            padding-bottom: 4px;
  34.            display: flex;
  35.            flex-wrap: wrap;
  36.            justify-content: space-between;
  37.            background-color: #ffffffe0;
  38.    
  39.            border-top-left-radius: 10px;
  40.            border-top-right-radius: 10px;
  41.        }
  42.    
  43.        div.superchatItem>div.sc_title>div.sc_sender {
  44.            min-width: 60%;
  45.            max-width: 65%;
  46.            height: 20px;
  47.            display: flex;
  48.            padding-left: 5px;
  49.    
  50.            white-space: nowrap;
  51.            overflow: hidden;
  52.            text-overflow: ellipsis;
  53.        }
  54.    
  55.        div.superchatItem>div.sc_title>div.sc_sender>div.sender_fans_medal_label {
  56.            border-top-left-radius: 6px;
  57.            border-bottom-left-radius: 6px;
  58.            padding-left: 4px;
  59.            padding-right: 4px;
  60.            padding-bottom: 4px;
  61.            /*text-align: center;
  62.            text-justify: auto;*/
  63.            color: white;
  64.        }
  65.    
  66.        div.superchatItem>div.sc_title>div.sc_sender>div.sender_fans_medal_level {
  67.            border-top-right-radius: 6px;
  68.            border-bottom-right-radius: 6px;
  69.            padding-left: 4px;
  70.            padding-right: 4px;
  71.            /*text-align: center*/
  72.            ;
  73.        }
  74.    
  75.        div.superchatItem>div.sc_title>div.sc_sender>div.sender_uname>a {
  76.            text-decoration: none;
  77.            padding-left: 10px;
  78.            color: #a70404bd;
  79.    
  80.        }
  81.    
  82.        div.superchatItem>div.sc_title>div.sc_info {
  83.            width: 30%;
  84.            display: flex;
  85.            flex-wrap: nowrap;
  86.            justify-content: flex-end;
  87.        }
  88.    
  89.        div.superchatItem>div.sc_title>div.sc_info>div.sc_sendtime {
  90.            color: #000000ae;
  91.            font-weight: bold;
  92.            padding-left: 20px;
  93.            padding-right: 20px;
  94.            display: inline-block;
  95.        }
  96.    
  97.        div.superchatItem>div.sc_title>div.sc_info>div.sc_price {
  98.            color: #00000050;
  99.            font-weight: bold;
  100.            padding-right: 5px;
  101.            display: inline-block;
  102.        }
  103.    
  104.    
  105.        div.superchatItem>div.sc_content {
  106.            padding: 5px;
  107.            text-align: left;
  108.            padding-left: 10px;
  109.            padding-right: 10px;
  110.            border-bottom-left-radius: 10px;
  111.            border-bottom-right-radius: 10px;
  112.            word-break: break-all;
  113.            /* 只对英文起作用，以字母作为换行依据 */
  114.            word-wrap: break-word;
  115.            /* 只对英文起作用，以单词作为换行依据 */
  116.            white-space: pre-wrap;
  117.            /* 只对中文起作用，强制换行 */
  118.        }
  119.    
  120.        div.superchatItem>div.superchat_progress {
  121.            width: 100%;
  122.            height: 3px;
  123.            border-radius: 2px;
  124.        }
  125.    
  126.        div.superchatItem>div.superchat_progress>div.superchat_progress_value {
  127.            width: 100%;
  128.            height: 3px;
  129.            border-radius: 1px;
  130.            background-color: #00000060;
  131.            transition: width 1s linear;
  132.        }
  133.    `;
  134.  
  135.     class SuperChatMonitor {
  136.         Monitor(ChatPanelContainer = null) {
  137.             var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
  138.             const options = { childList: true };
  139.             this.ChatPanelContainer = ChatPanelContainer;
  140.             const chat_mutation = new MutationObserver(this.monitor_callback);
  141.             chat_mutation.observe(this.ChatPanelContainer, options);
  142.             this.SuperchatHistroy = [];
  143.             this.handle_new_superchat_data = (superchat_data) => { };
  144.         }
  145.  
  146.         monitor_callback = (mutationRecoards, observer) => {
  147.             mutationRecoards.forEach(mutationRecoard => {
  148.                 if (mutationRecoard.type == "childList") {
  149.                     mutationRecoard.addedNodes.forEach(
  150.                         addnode => {
  151.                             if (addnode.classList.contains("superChat-card-detail")) {//是SC
  152.                                 this.parse_new_superchat_callback(addnode);
  153.                                 console.info(addnode);
  154.                             }
  155.                         }
  156.                     );
  157.                 }
  158.                 else {
  159.                     console.error(mutationRecoard);
  160.                 }
  161.             });
  162.         }
  163.  
  164.         parse_new_superchat_callback(new_superchat) {
  165.             console.log('new superchat');
  166.             var send_time = parseInt(new_superchat.getAttribute("data-ts")) * 1000;
  167.             var sender_uname = new_superchat.getAttribute("data-uname");
  168.             var sender_uid = new_superchat.getAttribute("data-uid");
  169.             var send_content = new_superchat.getAttribute("data-danmaku");
  170.         
  171.             var superChatPrice = parseInt(new_superchat.querySelector("div.card-item-top-right").innerText.split("0电池")[0]);
  172.             var sender_fans_medal_label = new_superchat.querySelector("span.fans-medal-content");
  173.             var sender_fans_medal_level = new_superchat.querySelector("div.fans-medal-level");
  174.             if (sender_fans_medal_label) {
  175.                 sender_fans_medal_label = sender_fans_medal_label.innerText;
  176.                 sender_fans_medal_level = sender_fans_medal_level.innerText;
  177.             }
  178.             var superchat_data = { sender_uname, sender_uid, send_content, superChatPrice, sender_fans_medal_label, sender_fans_medal_level, send_time };
  179.             this.SuperchatHistroy.push(superchat_data);
  180.  
  181.             this.handle_new_superchat_data(superchat_data); //回调函数，用于处理解析出的数据
  182.         }
  183.  
  184.         send_history_superchat() {
  185.             this.SuperchatHistroy.forEach(
  186.                 (history_sc_data) => {
  187.                     this.handle_new_superchat_data(history_sc_data);
  188.                 }
  189.             )
  190.         }
  191.     }
  192.  
  193.     class SuperChatItem {
  194.         constructor(superchat_data) {
  195.             this.sender_uname = superchat_data.sender_uname;
  196.             this.sender_uid = superchat_data.sender_uid;
  197.             this.sender_fans_medal_label = superchat_data.sender_fans_medal_label;
  198.             this.sender_fans_medal_level = superchat_data.sender_fans_medal_level;
  199.             this.send_content = superchat_data.send_content;
  200.             this.superChatPrice = superchat_data.superChatPrice;
  201.             this.send_time = superchat_data.send_time;
  202.         }
  203.         generateNode() {
  204.             var div_superchatItem = document.createElement("div");
  205.             div_superchatItem.className = "superchatItem";
  206.             div_superchatItem.style.backgroundColor = this.get_sc_background_color();
  207.             var div_sc_title = document.createElement("div");
  208.             div_sc_title.className = "sc_title";
  209.             var div_sc_sender = document.createElement("div");
  210.             div_sc_sender.className = "sc_sender";
  211.             var div_sender_fans_medal_label = document.createElement("div");
  212.             div_sender_fans_medal_label.className = "sender_fans_medal_label";
  213.             var div_sender_fans_medal_level = document.createElement("div");
  214.             div_sender_fans_medal_level.className = "sender_fans_medal_level";
  215.  
  216.             if (this.sender_fans_medal_label) {
  217.                 var fans_medal_color = this.get_fans_medal_color();
  218.                 div_sender_fans_medal_label.style.border = "1px solid " + fans_medal_color;
  219.                 div_sender_fans_medal_label.style.backgroundColor = fans_medal_color;
  220.                 div_sender_fans_medal_label.innerText = this.sender_fans_medal_label;
  221.  
  222.                 div_sender_fans_medal_level.style.border = "1px solid " + fans_medal_color;
  223.                 div_sender_fans_medal_level.style.color = fans_medal_color;
  224.                 div_sender_fans_medal_level.innerText = this.sender_fans_medal_level;
  225.             }
  226.             else {
  227.                 div_sender_fans_medal_label.style.visibility = "hidden";
  228.                 div_sender_fans_medal_level.style.visibility = "hidden";
  229.  
  230.             }
  231.             var div_sender_uname = document.createElement("div");
  232.             div_sender_uname.className = "sender_uname";
  233.  
  234.  
  235.             var a_uname = document.createElement("a");
  236.             a_uname.href = "https://space.bilibili.com/" + this.sender_uid;
  237.             a_uname.target = "_blank";
  238.             a_uname.innerText = this.sender_uname;
  239.             a_uname.title = this.sender_uname;
  240.  
  241.             div_sender_uname.appendChild(a_uname);
  242.             div_sc_sender.appendChild(div_sender_fans_medal_label);
  243.             div_sc_sender.appendChild(div_sender_fans_medal_level);
  244.             div_sc_sender.appendChild(div_sender_uname);
  245.  
  246.             var div_sc_info = document.createElement("div");
  247.             div_sc_info.className = "sc_info";
  248.  
  249.             var div_sc_sendtime = document.createElement("div");
  250.             div_sc_sendtime.className = "sc_sendtime";
  251.             div_sc_sendtime.setAttribute("send-time", this.send_time.toString());
  252.             div_sc_sendtime.innerText = (new Date(this.send_time)).toLocaleTimeString();
  253.  
  254.             var div_sc_price = document.createElement("div");
  255.             div_sc_price.className = "sc_price";
  256.             div_sc_price.innerText = "￥" + this.superChatPrice;
  257.  
  258.             div_sc_info.appendChild(div_sc_sendtime);
  259.             div_sc_info.appendChild(div_sc_price);
  260.  
  261.             div_sc_title.appendChild(div_sc_sender);
  262.             div_sc_title.appendChild(div_sc_info);
  263.  
  264.             var div_sc_content = document.createElement("div");
  265.             div_sc_content.className = "sc_content";
  266.             div_sc_content.innerHTML = this.send_content + ' ';
  267.  
  268.             var div_superchat_progress = document.createElement("div");
  269.             div_superchat_progress.className = "superchat_progress";
  270.  
  271.             var div_superchat_progress_value = document.createElement("div");
  272.             div_superchat_progress_value.className = "superchat_progress_value";
  273.             div_superchat_progress.appendChild(div_superchat_progress_value);
  274.  
  275.             div_superchatItem.appendChild(div_sc_title);
  276.             div_superchatItem.appendChild(div_sc_content);
  277.             div_superchatItem.appendChild(div_superchat_progress);
  278.  
  279.             this.progress = div_superchat_progress_value;
  280.             this.set_progress();
  281.             this.div_superchatItem = div_superchatItem;
  282.             return div_superchatItem;
  283.         }
  284.  
  285.         get_sc_background_color() {
  286.             let price = this.superChatPrice;
  287.             if ((price >= 30) && (price < 50)) {
  288.                 return "#2c64b4";
  289.             } else if ((price >= 50) && (price < 100)) {
  290.                 return "#447c9c";
  291.             } else if ((price >= 100) && (price < 500)) {
  292.                 return "#c89c24";
  293.             } else if ((price >= 500) && (price < 1000)) {
  294.                 return "#e49444";
  295.             } else if ((price >= 1000) && (price < 2000)) {
  296.                 return "#e44c4c";
  297.             } else if (price >= 2000) {
  298.                 return "#ac1c34";
  299.             } else {
  300.                 return "#ffffff";
  301.             }
  302.         }
  303.  
  304.         get_sc_show_time() {
  305.             let price = this.superChatPrice;
  306.             if ((price >= 30) && (price < 50)) {
  307.                 return 60;
  308.             } else if ((price >= 50) && (price < 100)) {
  309.                 return 120;
  310.             } else if ((price >= 100) && (price < 500)) {
  311.                 return 300;
  312.             } else if ((price >= 500) && (price < 1000)) {
  313.                 return 1800;
  314.             } else if ((price >= 1000) && (price < 2000)) {
  315.                 return 3600;
  316.             } else if (price >= 2000) {
  317.                 return 7200;
  318.             } else {
  319.                 return 1;
  320.             }
  321.         };
  322.  
  323.         get_fans_medal_color() {
  324.             let fans_medal_level = this.sender_fans_medal_level;
  325.             if ((fans_medal_level > 0) && (fans_medal_level <= 4)) {
  326.                 return "#5c968e";
  327.             } else if ((fans_medal_level > 4) && (fans_medal_level <= 8)) {
  328.                 return "#5d7b9e";
  329.             } else if ((fans_medal_level > 8) && (fans_medal_level <= 12)) {
  330.                 return "#8c7ca4";
  331.             } else if ((fans_medal_level > 12) && (fans_medal_level <= 16)) {
  332.                 return "#bc6484";
  333.             } else if ((fans_medal_level > 16) && (fans_medal_level <= 20)) {
  334.                 return "#c49c24";
  335.             } else if ((fans_medal_level > 20) && (fans_medal_level <= 24)) {
  336.                 return "#2c6a61";
  337.             } else if ((fans_medal_level > 24) && (fans_medal_level <= 28)) {
  338.                 return "#142464";
  339.             } else if ((fans_medal_level > 28) && (fans_medal_level <= 32)) {
  340.                 return "#442474";
  341.             } else if ((fans_medal_level > 32) && (fans_medal_level <= 36)) {
  342.                 return "#942347";
  343.             } else if ((fans_medal_level > 36) && (fans_medal_level <= 40)) {
  344.                 return "#fc7424";
  345.             } else {
  346.                 return "#000000";
  347.             }
  348.         };
  349.  
  350.         set_progress() {
  351.             this.sc_show_time = this.sc_leave_time = this.get_sc_show_time();
  352.             this.timer = setInterval(() => {
  353.                 this.sc_leave_time -= 1;
  354.                 if (this.sc_leave_time == 0) {
  355.                     this.progress.style.width = "0%";
  356.                     this.div_superchatItem.style.backgroundColor = "lightgray";
  357.                     clearInterval(this.timer);
  358.                 }
  359.                 else {
  360.                     this.progress.style.width = (this.sc_leave_time * 100 / this.sc_show_time).toString() + "%";
  361.                 }
  362.             }, 1000);
  363.         }
  364.  
  365.         static set_styles() {
  366.             GM_addStyle(styles_superchat_items);
  367.         }
  368.     }
  369.  
  370.     class FloatingWindow {
  371.         constructor() {
  372.             if (document.querySelector("div#superChat_Display_Panel")) {
  373.                 console.warn("悬浮窗口已存在！！！");
  374.             }
  375.             else {
  376.                 console.log("创建悬浮窗口");
  377.                 //顶栏的控制栏
  378.                 var checkbox_superchat_auto_scroll = document.createElement("input");
  379.                 checkbox_superchat_auto_scroll.id = "checkbox_superchat_auto_scroll";
  380.                 checkbox_superchat_auto_scroll.type = "checkbox";
  381.  
  382.                 var label_for_superchat_auto_scroll_heckbox = document.createElement("label");
  383.                 label_for_superchat_auto_scroll_heckbox.setAttribute("for", "checkbox_superchat_auto_scroll");
  384.                 label_for_superchat_auto_scroll_heckbox.innerText = "SC自动滚动";
  385.  
  386.                 checkbox_superchat_auto_scroll.onchange = () => {
  387.                     if (checkbox_superchat_auto_scroll.checked) {
  388.                         superChat_Display_Panel.scrollTo(0, 999999999);
  389.                     }
  390.                 };
  391.  
  392.                 var div_checkbox_superchat_auto_scroll = document.createElement("div");
  393.                 div_checkbox_superchat_auto_scroll.className = "div_checkbox_superchat_auto_scroll";
  394.                 div_checkbox_superchat_auto_scroll.style.paddingLeft = "10px";
  395.                 div_checkbox_superchat_auto_scroll.appendChild(checkbox_superchat_auto_scroll);
  396.                 div_checkbox_superchat_auto_scroll.appendChild(label_for_superchat_auto_scroll_heckbox);
  397.  
  398.                 var superChat_Display_Panel_CtrlBar = document.createElement("div");
  399.                 superChat_Display_Panel_CtrlBar.id = "superChat_Display_Panel_CtrlBar";
  400.                 superChat_Display_Panel_CtrlBar.appendChild(div_checkbox_superchat_auto_scroll);
  401.  
  402.                 //主体显示区
  403.                 var superChat_Display_Panel = document.createElement("div");
  404.                 superChat_Display_Panel.id = "superChat_Display_Panel";
  405.                 superChat_Display_Panel.style.width = "100%";
  406.                 superChat_Display_Panel.style.border = "1px solid gray";
  407.  
  408.                 //包含和插入的容器
  409.                 var superChat_Display_Container = document.createElement("div");
  410.                 superChat_Display_Container.id = "superChat_Display_Container";
  411.                 superChat_Display_Container.style.width = "400px";
  412.                 superChat_Display_Container.style.height = "220px";
  413.                 superChat_Display_Container.style.border = "1px solid black";
  414.                 superChat_Display_Container.style.borderRadius = "10px";
  415.                 superChat_Display_Container.style.zIndex = "999999999";
  416.                 superChat_Display_Container.appendChild(superChat_Display_Panel_CtrlBar);
  417.                 superChat_Display_Container.appendChild(superChat_Display_Panel);
  418.  
  419.                 document.body.appendChild(superChat_Display_Container);
  420.  
  421.                 FloatingWindow.dragToMove(superChat_Display_Panel_CtrlBar, superChat_Display_Container);
  422.  
  423.                 this.superChat_Display_Panel = superChat_Display_Panel;
  424.                 this.superChat_Display_Container = superChat_Display_Container;
  425.                 this.checkbox_superchat_auto_scroll = checkbox_superchat_auto_scroll;
  426.             }
  427.         }
  428.  
  429.         remove() {
  430.             this.superChat_Display_Container.remove();
  431.         }
  432.  
  433.         add_new_superchat_item(new_superchatItem) {
  434.             this.superChat_Display_Panel.appendChild(new_superchatItem);
  435.             if (this.checkbox_superchat_auto_scroll.checked) {
  436.                 this.superChat_Display_Panel.scrollTo(0, 999999999);
  437.             }
  438.         }
  439.  
  440.         static set_styles() {
  441.             const styles_superchat_panel = `div#superChat_Display_Panel_CtrlBar {
  442.                width: 100%;
  443.                height: 20px;
  444.                display: flex;
  445.                flex-wrap: nowrap;
  446.                justify-content: space-between;
  447.            }
  448.        
  449.            div#superChat_Display_Panel {
  450.                margin-bottom: 10px;
  451.                overflow-y: scroll;
  452.                min-height: 260px;
  453.                height: calc(100% - 40px);
  454.            }
  455.        
  456.            div#superChat_Display_Container {
  457.                min-width: 400px;
  458.                min-height: 300px;
  459.                padding-bottom: 10px;
  460.                resize: both;
  461.                overflow-x: hidden;
  462.                overflow-y: auto;
  463.        
  464.                position: absolute;
  465.        
  466.                top:150px;
  467.                right: 0px;
  468.        
  469.            }`;
  470.             GM_addStyle(styles_superchat_panel);
  471.         }
  472.  
  473.         static dragToMove(dragNode, moveNode) {//（被拖动的Part,被移动的整体）
  474.             dragNode.onmousedown = function (event) {
  475.                 event = event || window.event
  476.                 //获取鼠标按下时的坐标
  477.                 let x = event.clientX
  478.                 let y = event.clientY
  479.                 //获取鼠标按下时距离div边框的距离
  480.                 let ol = x - moveNode.offsetLeft
  481.                 let ot = y - moveNode.offsetTop
  482.                 //使用document的原因:防止用户拖拽速度过快导致元素的onmousemove事件失效，所以把onmousemove事件绑定在document上就能避免失效
  483.                 document.onmousemove = function (event) {
  484.                     event = event || window.event
  485.                     moveNode.style.left = event.clientX - ol + 'px'
  486.                     moveNode.style.top = event.clientY - ot + 'px'
  487.                 }
  488.                 //取消onmousemove事件和onmouseup事件
  489.                 document.onmouseup = function () {
  490.                     document.onmousemove = 'null'
  491.                     document.onmouseup = 'null'
  492.                 }
  493.             }
  494.         };
  495.  
  496.     }
  497.  
  498.     const new_window_html =
  499.         `
  500.        <!DOCTYPE html>
  501.        <html lang="en">
  502.        <head>
  503.            <meta charset="UTF-8">
  504.            <meta http-equiv="X-UA-Compatible" content="IE=edge">
  505.            <meta name="viewport" content="width=device-width, initial-scale=1.0">
  506.            <title>Document</title>
  507.        </head>
  508.        <body>
  509.            <style id="styles_superchat_items"></style>
  510.            <style>
  511.                :root {
  512.                    height: 100%;
  513.                }
  514.        
  515.                body {
  516.                    margin: 0px;
  517.                    height: 100%;
  518.                }
  519.        
  520.                div#ctrlbar {
  521.                    position: fixed;
  522.                    margin: 0px;
  523.                    padding: 0px;
  524.                    width: 100%;
  525.                    height: 5%;
  526.                    bottom: 0%;
  527.                    border: 1px solid;
  528.                }
  529.        
  530.                div#superchat-item-area {
  531.                    height: 95%;
  532.                    overflow-y: scroll;
  533.                }
  534.            </style>
  535.            <div id="superchat-item-area">
  536.        
  537.            </div>
  538.            <div id="ctrlbar">
  539.                <input type="checkbox" name="" id="check_auto_scroll">
  540.                <label for="check_auto_scroll">SC自动滚动</label>
  541.                &nbsp;
  542.                &nbsp;
  543.                &nbsp;
  544.                &nbsp;
  545.                <span id = 'ScCount'></span>
  546.            </div>
  547.            <script>
  548.                
  549.                //window.onload = window.onresize = () => {
  550.                //    var devicewidth = document.documentElement.clientWidth;
  551.                //    var scale = devicewidth / 1920;
  552.                //    document.body.style.zoom = scale;
  553.                //};
  554.  
  555.                var superchat_display_panel = document.querySelector("div#superchat-item-area");
  556.                var check_auto_scroll = document.querySelector("input#check_auto_scroll");
  557.                check_auto_scroll.onchange = () => {
  558.                    if (check_auto_scroll.checked) {
  559.                        superchat_display_panel.scrollTo(0, 99999999999999999);
  560.                    }
  561.                }
  562.                var add_new_superchat_item = (sc_item) => {
  563.                    superchat_display_panel.appendChild(sc_item);
  564.                    if (check_auto_scroll.checked) {
  565.                        superchat_display_panel.scrollTo(0, 99999999999999999);
  566.                    }
  567.                }
  568.                var set_styles = (stylesheet) => {
  569.                    document.querySelector("style#styles_superchat_items").innerHTML = stylesheet;
  570.                }
  571.            </script>
  572.        </body>
  573.        </html>
  574.    `;
  575.  
  576.     class NewWindow {
  577.         constructor() {
  578.             this.display_window = window.open("", 'newwindow', 'height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
  579.             this.display_window.resizeTo(400, 600);
  580.             this.display_window.document.write(new_window_html);
  581.             this.set_styles();
  582.             this.sc_count_element = this.display_window.document.querySelector('span#ScCount');
  583.         }
  584.  
  585.         add_new_superchat_item(sc_item) {
  586.             this.display_window.add_new_superchat_item(sc_item);
  587.         }
  588.  
  589.         set_superchat_count(cnt) {
  590.             this.sc_count_element.innerText = '共计' + cnt + '个SC';
  591.         }
  592.  
  593.         set_styles() {
  594.             this.display_window.set_styles(styles_superchat_items);
  595.         }
  596.         remove() {
  597.             if (!this.display_window.closed) {
  598.                 this.display_window.close();
  599.             }
  600.         }
  601.     }
  602.  
  603.     class SuperchatDisplayManager {
  604.         constructor(ChatPanelContainer) {
  605.             this.sc_monitor = new SuperChatMonitor();
  606.             this.sc_monitor.Monitor(ChatPanelContainer);
  607.             this.sc_display = null;
  608.         }
  609.  
  610.         DisplayInFloatingWindow() {
  611.             if (this.sc_display) {
  612.                 if (this.sc_display.constructor.name == "FloatingWindow") {
  613.                     return;
  614.                 }
  615.                 else {
  616.                     this.sc_display.remove();
  617.                 }
  618.             }
  619.             this.sc_display = new FloatingWindow();
  620.             this.sc_monitor.handle_new_superchat_data = (sc_data) => { this.sc_display.add_new_superchat_item(new SuperChatItem(sc_data).generateNode()); }   //设置处理SC的回调函数
  621.             this.sc_monitor.send_history_superchat();//恢复历史记录
  622.         }
  623.  
  624.         DisplayInNewWindow() {
  625.             if (this.sc_display) {
  626.                 if (this.sc_display.constructor.name == "NewWindow") {
  627.                     return;
  628.                 }
  629.                 else {
  630.                     this.sc_display.remove();
  631.                 }
  632.             }
  633.             this.sc_display = new NewWindow();
  634.             this.sc_monitor.handle_new_superchat_data = (sc_data) => { this.sc_display.add_new_superchat_item(new SuperChatItem(sc_data).generateNode()); this.sc_display.set_superchat_count(this.sc_monitor.SuperchatHistroy.length); };   //设置处理SC的回调函数
  635.             this.sc_monitor.send_history_superchat();//恢复历史记录
  636.         }
  637.  
  638.         close() {
  639.             if (!this.sc_display) {
  640.                 return;
  641.             }
  642.             else {
  643.                 this.sc_monitor.handle_new_superchat_data = null;
  644.                 this.sc_display.remove();
  645.             }
  646.         }
  647.     }
  648.  
  649.     SuperChatItem.set_styles();
  650.     FloatingWindow.set_styles();
  651.  
  652.     var ChatPanelContainer = document.querySelector("div#chat-history-list>div#chat-items");
  653.     if (ChatPanelContainer) {
  654.         var sc_manager = new SuperchatDisplayManager(ChatPanelContainer);
  655.         GM_registerMenuCommand("以悬浮窗展示", () => { sc_manager.DisplayInFloatingWindow(); });
  656.         GM_registerMenuCommand("以新窗口展示", () => { sc_manager.DisplayInNewWindow(); });
  657.         GM_registerMenuCommand("关闭SC窗口", () => { sc_manager.close() });
  658.     };
  659. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址