Vecorder

直播间内容记录 https://github.com/Xinrea/Vecorder

Versione datata 28/08/2024. Vedi la nuova versione l'ultima versione.

Dovrai installare un'estensione come Tampermonkey, Greasemonkey o Violentmonkey per installare questo script.

You will need to install an extension such as Tampermonkey to install this script.

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Userscripts per installare questo script.

Dovrai installare un'estensione come ad esempio Tampermonkey per installare questo script.

Dovrai installare un gestore di script utente per installare questo script.

(Ho già un gestore di script utente, lasciamelo installare!)

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

(Ho già un gestore di stile utente, lasciamelo installare!)

// ==UserScript==
// @name         Vecorder
// @namespace    https://www.joi-club.cn/
// @version      0.70
// @description  直播间内容记录 https://github.com/Xinrea/Vecorder
// @author       Xinrea
// @license      MIT
// @match        https://live.bilibili.com/*
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_deleteValue
// @require      https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js
// @require      https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js
// @run-at 		 document-end
// ==/UserScript==

function vlog(msg) {
    console.log("[Vecorder]" + msg);
}

function p(msg) {
    return {
        time: new Date().getTime(),
        content: msg,
    };
}

var dbname = "vdb" + getRoomID();

var db = JSON.parse(GM_getValue(dbname, "[]"));
var Option = JSON.parse(GM_getValue("vop", '{"reltime":false,"toffset":0}'));

function nindexOf(n) {
    for (let i in db) {
        if (!db[i].del && db[i].name == n) return i;
    }
    return -1;
}

function tindexOf(id, t) {
    for (let i in db[id].lives) {
        if (!db[id].lives[i].del && db[id].lives[i].title == t) return i;
    }
    return -1;
}

function gc() {
    for (let i = db.length - 1; i >= 0; i--) {
        if (db[i].del) {
            db.splice(i, 1);
            continue;
        }
        for (let j = db[i].lives.length - 1; j >= 0; j--) {
            if (db[i].lives[j].del) {
                db[i].lives.splice(j, 1);
                continue;
            }
        }
    }
    GM_setValue(dbname, JSON.stringify(db));
}

function addPoint(t, msg) {
    console.log("addPoint", t, msg);
    let ltime = t * 1000;
    if (ltime == 0) return;
    let [name, link, title] = getRoomInfo();
    console.log("CurrentRoom:", name, link, title);
    let id = nindexOf(name);
    if (id == -1) {
        db.push({
            name: name,
            link: link,
            del: false,
            lives: [
                {
                    title: title,
                    time: ltime,
                    del: false,
                    points: [p(msg)],
                },
            ],
        });
    } else {
        let lid = tindexOf(id, title);
        if (lid == -1) {
            db[id].lives.push({
                title: title,
                time: ltime,
                points: [p(msg)],
            });
        } else {
            db[id].lives[lid].points.push(p(msg));
        }
    }
    GM_setValue(dbname, JSON.stringify(db));
    $(`#vecorder-list`).replaceWith(dbToListview());
}

function getMsg(body) {
    var vars = body.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == "msg") {
            return decodeURI(pair[1]);
        }
    }
    return false;
}

function getRoomInfo() {
    let resp = $.ajax({
        url: "https://api.live.bilibili.com/xlive/web-room/v1/index/getH5InfoByRoom?room_id="+getRoomID(),
        async: false}).responseJSON.data;
    console.log("RoomInfo:",resp);
    return [resp.anchor_info.base_info.uname, "https://space.bilibili.com/" + resp.room_info.uid, resp.room_info.title]
}

// 根据当前地址获取直播间ID
function getRoomID() {
    let roomid = window.location.pathname.substring(1);
    return roomid; //获取当前房间号
}

function tryAddPoint(msg) {
    // https://api.live.bilibili.com/room/v1/Room/room_init?id={roomID}
    console.log(msg, getRoomID());
    $.ajax({
        url:
        "https://api.live.bilibili.com/room/v1/Room/room_init?id=" + getRoomID(),
        async: true,
        success: function (resp) {
            let t = 0;
            if (resp.data.live_status != 1) t = 0;
            else t = resp.data.live_time;
            addPoint(t, msg);
        },
    });
}

let toggle = false;

waitForKeyElements(
    "#control-panel-ctnr-box > div.chat-input-ctnr-new.p-relative > div.right-actions.border-box > button",
    (n) => {
        const input = $(`<div id="point-input"><textarea placeholder="输入内容并回车添加时间点"></textarea></div>`);
        input.bind("keypress", function (event) {
            if (event.keyCode == "13") {
                window.event.returnValue = false;
                console.log("Enter detected");
                tryAddPoint($("#point-input > textarea").val());
                $("#point-input > textarea").val("");
            }
        });
        $(`#control-panel-ctnr-box`).append(input);
    }
);

waitForKeyElements(
    "#control-panel-ctnr-box > div.control-panel-icon-row-new.f-clear.p-relative.superChat > div.icon-left-part-new",
    (n) => {
        // Resize superchat/like buttons
        n[0].style = "width: 70%; align-items: center;";
        n[0].children[0].style = "margin: 0; width: 54px; height: 28px;";
        n[0].children[0].children[0].remove();
        n[0].children[0].children[0].innerText = "留言";
        n[0].children[1].style = "margin: 0; width: 54px; height: 28px; margin-left: 3px;";
        n[0].children[1].children[0].remove();

        $("#control-panel-ctnr-box > div.chat-input-ctnr-new.p-relative > div.chat-input-new.border-box.p-relative").css("height", "30px");
        $("#control-panel-ctnr-box > div.chat-input-ctnr-new.p-relative > div.chat-input-new.border-box.p-relative > textarea").css({"height": "30px", "line-height": "13px", "white-space": "nowrap"});
        // create panel
        let panel = $(
            '<div id="vPanel"><p style="font-size:20px;font-weight:bold;margin:0px;" class="vName">🍊直播笔记</p></div>'
        );
        let contentList = dbToListview();
        panel.append(contentList);
        let clearBtn = $('<button><span class="txt">清空</span></button>');
        clearBtn.attr(
            "style",
            "font-family: sans-serif;\
text-transform: none;\
position: relative;\
box-sizing: border-box;\
line-height: 1;\
margin: 0;\
margin-left: 3px;\
padding: 6px 12px;\
border: 0;\
cursor: pointer;\
outline: none;\
overflow: hidden;\
background-color: #23ade5;\
color: #fff;\
border-radius: 4px;\
min-width: 40px;\
height: 24px;\
font-size: 12px;"
        );
        clearBtn.hover(
            function () {
                clearBtn.css("background-color", "#58bae2");
            },
            function () {
                clearBtn.css("background-color", "#23ade5");
            }
        );
        clearBtn.click(function () {
            contentList.empty();
            db = [];
            GM_deleteValue(dbname);
        });
        panel.append(clearBtn);
        let closeBtn = $(
            '<a style="position:absolute;right:7px;top:5px;font-size:20px;" class="vName">&times;</a>'
        );
        closeBtn.click(function () {
            console.log("Close clicked");
            $("#vPanel").hide()
            gc();
            toggle = false;
            recordBtn.css("background-color", "#23ade5");
        });
        panel.append(closeBtn);
        let timeop = $(`<hr style="border:0;height:1px;background-color:#58bae2;margin-top:10px;margin-bottom:10px;"/><div id="timeop">\
<div><input type="checkbox" id="reltime" value="false" style="vertical-align:middle;margin-right:5px;"/><label for="reltime" class="vName" style="vertical-align:middle;">按相对时间导出</label></div>\
<div style="margin-top:10px;"><label for="toffset" class="vName" style="vertical-align:middle;">时间偏移(秒):</label><input type="number" id="toffset" value="${Option.toffset}" style="vertical-align:middle;width:35px;outline-color:#23ade5;"/></div>\
</div>`);
        panel.append(timeop);
        // Setup recordButton
        let recordBtn = $('<div><span class="txt">记录</span></div>');
        recordBtn.attr(
            "style",
            "font-family: sans-serif;\
display: flex;\
align-items: center;\
position: relative;\
box-sizing: border-box;\
margin-left: 3px;\
padding: 6px 12px;\
cursor: pointer;\
outline: none;\
overflow: hidden;\
background-color: #23ade5;\
color: #fff;\
border-radius: 36px;\
width: 54px;\
height: 28px;\
font-size: 14px;"
        );
        $("#chat-control-panel-vm > div").append(panel);
        $("#vPanel").hide();
        recordBtn.hover(
            function () {
                if (!toggle) recordBtn.css("background-color", "#58bae2");
            },
            function () {
                if (!toggle) recordBtn.css("background-color", "#23ade5");
            }
        );
        recordBtn.click(function () {
            if (toggle) {
                $("#vPanel").hide();
                gc();
                toggle = false;
                $(this).css("background-color", "#58bae2");
                return;
            }
            console.log("Toggle panel");
            $("#vPanel").show();
            if (Option.reltime) {
                $("#reltime").attr("checked", true);
            }
            $("#reltime").change(function () {
                Option.reltime = $(this).prop("checked");
                GM_setValue("vop", JSON.stringify(Option));
            });
            $("#toffset").change(function () {
                Option.toffset = $(this).val();
                GM_setValue("vop", JSON.stringify(Option));
            });
            $(this).css("background-color", "#0d749e");
            toggle = true;
        });
        n.append(recordBtn);

        let styles = $(`<style type="text/css"></style>`);
        styles.text(
            "#vPanel {\
line-height: 1.15;\
font-size: 12px;\
font-family: Arial,Microsoft YaHei,Microsoft Sans Serif,Microsoft SanSerf,\\5FAE8F6F96C59ED1!important;\
display: block;\
box-sizing: border-box;\
background: #fff;\
border: 1px solid #e9eaec;\
border-radius: 8px;\
box-shadow: 0 6px 12px 0 rgba(106,115,133,.22);\
animation: scale-in-ease cubic-bezier(.22,.58,.12,.98) .4s;\
padding: 16px;\
position: absolute;\
right: 4px;\
bottom: 150px;\
z-index: 999;\
transform-origin: right bottom;\
}\
#vPanel ul {\
list-style-type: none;\
padding-inline-start: 0px;\
color: #666;\
}\
#vPanel li {\
margin-top: 10px;\
white-space: nowrap;\
}\
.vName {\
color: #23ade5;\
cursor: pointer;\
}\
#control-panel-ctnr-box > div.chat-input-ctnr-new.p-relative > div.medal-section {\
height: 30px;\
line-height: 13px;\
}\
#point-input {\
padding: 4px 8px;\
background-color: var(--bg2);\
border-radius: 6px;\
border: 1px solid transparent;\
margin-top: 6px;\
}\
#point-input > textarea {\
width: 100%;\
border: 0;\
outline: 0;\
resize: none;\
background-color: var(--bg2);\
color: var(--text2);\
font-size: 13px;\
height: 24px;\
}\
"
        );
        $("head").prepend(styles);
    }
);

function dbToListview() {
    let urlObject = window.URL || window.webkitURL || window;
    let content = $(`<ul id="vecorder-list"></ul>`);
    for (let i in db) {
        let list = $("<li></li>");
        if (db[i].del) {
            continue;
        }
        let innerlist = $("<ul></ul>");
        for (let j in db[i].lives) {
            if (db[i].lives[j].del) continue;
            let item = $(
                "<li>" +
                `[${moment(db[i].lives[j].time).format("YYYY/MM/DD")}]` +
                db[i].lives[j].title +
                "[" +
                db[i].lives[j].points.length +
                "]" +
                "</li>"
            );
            let ep = $('<a class="vName" style="font-weight:bold;">[导出]</a>');
            let cx = $(
                '<a class="vName" style="color:red;font-weight:bold;">[删除]</a>'
            );
            ep.click(function () {
                exportRaw(
                    db[i].lives[j],
                    db[i].name,
                    `[${db[i].name}][${db[i].lives[j].title}][${moment(
                        db[i].lives[j].time
                    ).format("YYYY-MM-DD")}]`
        );
            });
            cx.click(function () {
                if (db[i].lives.length == 1) {
                    db[i].del = true;
                    item.remove();
                    list.remove();
                } else {
                    db[i].lives[j].del = true;
                    item.remove();
                }
                GM_setValue(dbname, JSON.stringify(db));
            });
            item.append(ep);
            item.prepend(cx);
            innerlist.append(item);
        }
        list.append(innerlist);
        content.append(list);
    }
    return content;
}

function exportRaw(live, v, fname) {
    var urlObject = window.URL || window.webkitURL || window;
    var export_blob = new Blob([rawToString(live, v)]);
    var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
    save_link.href = urlObject.createObjectURL(export_blob);
    save_link.download = fname;
    save_link.click();
}

function rawToString(live, v) {
    let r =
        "# 由Vecorder自动生成,不妨关注下可爱的@轴伊Joi_Channel:https://space.bilibili.com/61639371/\n";
    r += `# ${v} \n`;
    r += `# ${live.title} - 直播开始时间:${moment(live.time).format(
        "YYYY-MM-DD HH:mm:ss"
    )}\n\n`;
    for (let i in live.points) {
        if (!Option.reltime)
            r += `[${moment(live.points[i].time)
                .add(Option.toffset, "seconds")
                .format("HH:mm:ss")}] ${live.points[i].content}\n`;
        else {
            let seconds =
                moment(live.points[i].time).diff(moment(live.time), "second") +
                Number(Option.toffset);
            let minutes = Math.floor(seconds / 60);
            let hours = Math.floor(minutes / 60);
            seconds = seconds % 60;
            minutes = minutes % 60;
            r += `[${f(hours)}:${f(minutes)}:${f(seconds)}] ${
        live.points[i].content
        }\n`;
        }
    }
    return r;
}

function f(num) {
    if (String(num).length > 2) return num;
    return (Array(2).join(0) + num).slice(-2);
}

function waitForKeyElements(
selectorTxt /* Required: The jQuery selector string that
                        specifies the desired element(s).
                    */,
    actionFunction /* Required: The code to run when elements are
                        found. It is passed a jNode to the matched
                        element.
                    */,
    bWaitOnce /* Optional: If false, will continue to scan for
                        new elements even after the first match is
                        found.
                    */,
    iframeSelector /* Optional: If set, identifies the iframe to
                        search.
                    */
) {
    var targetNodes, btargetsFound;

    if (typeof iframeSelector == "undefined") targetNodes = $(selectorTxt);
    else targetNodes = $(iframeSelector).contents().find(selectorTxt);

    if (targetNodes && targetNodes.length > 0) {
        btargetsFound = true;
        /*--- Found target node(s).  Go through each and act if they
            are new.
        */
        targetNodes.each(function () {
            var jThis = $(this);
            var alreadyFound = jThis.data("alreadyFound") || false;

            if (!alreadyFound) {
                //--- Call the payload function.
                var cancelFound = actionFunction(jThis);
                if (cancelFound) btargetsFound = false;
                else jThis.data("alreadyFound", true);
            }
        });
    } else {
        btargetsFound = false;
    }

    //--- Get the timer-control variable for this selector.
    var controlObj = waitForKeyElements.controlObj || {};
    var controlKey = selectorTxt.replace(/[^\w]/g, "_");
    var timeControl = controlObj[controlKey];

    //--- Now set or clear the timer as appropriate.
    if (btargetsFound && bWaitOnce && timeControl) {
        //--- The only condition where we need to clear the timer.
        clearInterval(timeControl);
        delete controlObj[controlKey];
    } else {
        //--- Set a timer, if needed.
        if (!timeControl) {
            timeControl = setInterval(function () {
                waitForKeyElements(
                    selectorTxt,
                    actionFunction,
                    bWaitOnce,
                    iframeSelector
                );
            }, 300);
            controlObj[controlKey] = timeControl;
        }
    }
    waitForKeyElements.controlObj = controlObj;
}