大点儿操作方便
目前為
// ==UserScript==
// @name B站直播增强型关注列表 Beta
// @namespace http://tampermonkey.net/
// @version 1.0.1
// @description 大点儿操作方便
// @author SoraYuki & TGSAN
// @include /https:\/\/live.bilibili.com\/.*/
// @grant none
// @noframes
// ==/UserScript==
(function () {
'use strict';
let followListOpened = false; // 关注列表开启状态
let followListLoading = false; //
function createLiveCard(avatarUrl, userName, titleName, link) {
let textStyle = "display: block; line-height: 1; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;";
let avatarStyle = "background-image: url("" + avatarUrl + ""); vertical-align: top; width: 45px; height: 45px; margin-top: 15px; margin-left: 10px; display: inline-block; border-radius: 50%; background-color: #999; background-size: cover;";
let cardRoot = document.createElement("div");
cardRoot.style = "width: 100%; height: max-content;";
let innerHTML = '<a href="' + link + '" target="_blank" style="text-decoration: none; margin: 0;">';
innerHTML += '<div style="' + avatarStyle + '"></div>';
innerHTML += '<div style="vertical-align: top; display: inline-block; padding-left: 8px; overflow-x: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; width: calc(100% - 60px);">';
innerHTML += '<p style="font-size: 15px; color: #000; ' + textStyle + '">' + userName + '</p>';
innerHTML += '<p style="font-size: 12px; color: #999; ' + textStyle + '">' + titleName + '</p>';
innerHTML += '</div>';
cardRoot.innerHTML = innerHTML;
console.log(innerHTML);
console.log(cardRoot);
return cardRoot;
}
function clearList(followListBodyDiv) {
while (followListBodyDiv.lastElementChild) {
followListBodyDiv.removeChild(followListBodyDiv.lastElementChild);
}
}
async function loadList(followListBodyDiv) {
clearList(followListBodyDiv);
// 标题
let titleDiv = document.createElement("div");
titleDiv.style = "width: max-content; padding: 20px 10px 10px 10px;";
titleDiv.innerHTML = '<span style="font-size: 18px; color: #23ade6; line-height: 24px;"></span>';
followListBodyDiv.appendChild(titleDiv);
let titleText = titleDiv.children[0];
titleText.innerText = "我的关注 - 载入中...";
let j;
try {
let result = await fetch('https://api.live.bilibili.com/relation/v1/Feed/getList?page=1&page_size=10', { credentials: 'include' });
j = await result.json();
} catch (e) {
alert("关注列表拉取失败");
return;
}
let count = j.data.count;
let offset = 0;
while (count > offset) {
if (offset > 0) {
let result = await fetch('https://api.live.bilibili.com/relation/v1/Feed/getList?page=' + (offset / 10 + 1) + '&page_size=10', { credentials: 'include' });
j = await result.json();
}
for (let i = 0; i < j.data.rooms.length; ++i) {
let x = j.data.rooms[i];
followListBodyDiv.appendChild(createLiveCard(x.face, x.uname, x.title, x.link));
}
offset += j.data.rooms.length;
}
// 页脚
let footerDiv = document.createElement("div");
footerDiv.style = "height: 20px;";
followListBodyDiv.appendChild(footerDiv);
titleText.innerText = "我的关注";
};
let initIntervalId = setInterval(function () {
let oldFollowBtn = document.querySelector(".side-bar-btn[data-upgrade-intro='Follow']"); // 直播间
if (oldFollowBtn == null) {
oldFollowBtn = document.querySelector(".sidebar-btn[title='关注']"); // 首页
}
if (oldFollowBtn != null) {
let newFollowBtn = oldFollowBtn.cloneNode(true);
oldFollowBtn.parentNode.replaceChild(newFollowBtn, oldFollowBtn);
let followListFrameDiv = document.createElement("div");
followListFrameDiv.id = "plugin-follow-list-div";
followListFrameDiv.style.setProperty("position", "fixed");
followListFrameDiv.style.setProperty("height", "100vh");
followListFrameDiv.style.setProperty("width", "0px");
followListFrameDiv.style.setProperty("background-color", "rgba(255, 255, 255, 1)");
followListFrameDiv.style.setProperty("opacity", "0");
followListFrameDiv.style.setProperty("z-index", "9999");
followListFrameDiv.style.setProperty("top", "0");
followListFrameDiv.style.setProperty("left", "0");
followListFrameDiv.style.setProperty("box-shadow", "rgba(0, 0, 0, 0.22) 1px 0px 12px 0px");
followListFrameDiv.style.setProperty("transition", "opacity .4s cubic-bezier(.22,.58,.12,.98), width .4s cubic-bezier(.22,.58,.12,.98)");
followListFrameDiv.style.setProperty("overflow-y", "auto");
followListFrameDiv.style.setProperty("pointer-events", "none");
document.body.appendChild(followListFrameDiv);
let followListBodyDiv = document.createElement("div");
followListBodyDiv.style.setProperty("height", "100%");
followListBodyDiv.style.setProperty("width", "100%");
followListFrameDiv.appendChild(followListBodyDiv);
newFollowBtn.addEventListener('click', function () {
if (followListOpened === true) {
followListOpened = false;
followListFrameDiv.style.setProperty("width", "0px");
followListFrameDiv.style.setProperty("opacity", "0");
followListFrameDiv.style.setProperty("pointer-events", "none");
clearList(followListBodyDiv);
} else {
followListOpened = true;
followListFrameDiv.style.setProperty("width", "320px");
followListFrameDiv.style.setProperty("opacity", "1");
followListFrameDiv.style.setProperty("pointer-events", "auto");
if (followListLoading === false) {
followListLoading = true;
loadList(followListBodyDiv).then(function () {
followListLoading = false;
if (followListOpened === false) {
clearList(followListBodyDiv);
}
});
}
}
});
clearInterval(initIntervalId);
}
}, 100);
})();