B站首页看？！
// ==UserScript==
// @name ！！
// @namespace https://bilibili.com
// @version 1.1.0
// @description B站首页看？！
// @author You
// @match https://www.bilibili.com/*
// @icon https://www.google.com/s2/favicons?domain=bilibili.com
// @grant GM_addStyle
// @license MIT
// ==/UserScript==
/*
原作者：https://www.v2ex.com/t/818992#reply10
https://greasyfork.org/zh-CN/scripts/436110-b%E7%AB%99-%E5%91%A8%E5%A7%90
如有侵权，立即删除。
*/
;(function () {
'use strict'
GM_addStyle(`
#bili_zhoushuyi .popover-video-card {
display: none;
}
#bili_zhoushuyi a:hover+.popover-video-card {
display: block;
}
`)
const TITLE = '王冰冰'
const KEY_WORDS = '王冰冰'
const CHANNEL_ID = 4785500
const ICON =
'data:image/jpg;base64,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'
const bigFans = [
]
let currentPage = 1
let page = 0
let videoList = []
let page_size = 12
async function getDetail(bvid) {
let res = await fetch(
`https://api.bilibili.com/x/web-interface/archive/stat?bvid=${bvid}`,
)
return (await res.json()).data
}
async function getNewVideo() {
let res = await fetch(
`https://api.bilibili.com/x/web-interface/search/type?context=&order=pubdate&keyword=${KEY_WORDS}&search_type=video&page=${currentPage++}`,
)
videoList = videoList.concat((await res.json()).data.result)
}
async function getHotVideo() {
let res = await fetch(
`https://api.bilibili.com/x/web-interface/web/channel/multiple/list?channel_id=${CHANNEL_ID}&sort_type=hot&offset=&page_size=${page_size}`,
)
return (await res.json()).data.list[0].items
}
function bigNumber(num) {
return num > 10000 ? `${(num / 10000).toFixed(2)}万` : num
}
function s2d(string) {
return new DOMParser().parseFromString(string, 'text/html').body
.childNodes[0]
}
async function refresh() {
page++
if (videoList.length < page * page_size + page_size) {
await getNewVideo()
}
drawVideos()
}
function timeFormat(time) {
let res = []
let [s = 0, m = 0, h = 0] = time.split(':').reverse()
res.unshift(String(s).padStart(2, '0'))
res.unshift(String(m % 60).padStart(2, '0'))
res.unshift(String(h % 60).padStart(2, '0'))
return res.join(':')
}
function drawVideos() {
const VIDEO_DOM = document.querySelector('#bili_zhoushuyi .zone-list-box')
VIDEO_DOM.innerHTML = ''
videoList
.slice(page * page_size, page * page_size + page_size)
//.sort((a, b) => {
// return bigFans.includes(b.mid) ? 1 : -1
//})
.forEach((item) => {
let title = item.title.replace(/<em class="keyword">(.*?)<\/em>/g, '$1')
let DOM = s2d(`
<div class="video-card-common">
<div class="card-pic card-pic-hover"><a href="//www.bilibili.com/video/${
item.bvid
}" target="_blank"><img
src="${item.pic}"
alt="">
<div class="count">
<div class="left"><span><i class="bilifont bili-icon_shipin_bofangshu"></i>
${item.play}
</span><span><i class="bilifont bili-icon_shipin_dianzanshu"></i>${
item.favorites
}</span></div>
<div class="right"><span>${timeFormat(item.duration)}</span></div>
</div><i class="crown ${
bigFans.includes(item.mid) ? 'gold' : ''
}"></i>
</a>
<div class="watch-later-video van-watchlater black"><span class="wl-tips" style="display: none;"></span>
</div>
</div><a href="//www.bilibili.com/video/${
item.bvid
}" target="_blank" title="${title}"
class="title">
${title}
</a><a href="//space.bilibili.com/${
item.mid
}/" target="_blank" class="up"><i
class="bilifont bili-icon_xinxi_UPzhu"></i>${item.author}
</a>
</div>`)
VIDEO_DOM.append(DOM)
})
}
async function drawFirst(item) {
const RANK_DOM = document.querySelector('#bili_zhoushuyi .rank-list')
let firstDetail = await getDetail(item.bvid)
let firstTitle = item.name.replace(/<em class="keyword">(.*?)<\/em>/g, '$1')
let first = `
<div class="rank-wrap"><span class="number on">1</span>
<div class="preview">
<div class="pic">
<a href="//www.bilibili.com/video/${
item.bvid
}" target="_blank" class="link">
<img src="${item.cover}" alt="${firstTitle}">
</a>
<div class="watch-later-video van-watchlater black"><span class="wl-tips" style="display: none;"></span>
</div>
</div>
<div class="txt"><a href="//www.bilibili.com/video/${
item.bvid
}" target="_blank" class="link">
<p title="${firstTitle}">${firstTitle}</p>
</a><span>播放次数：${bigNumber(firstDetail.view)}</span></div>
</div>
<div class="popover-video-card pvc" style="display: none;">
<div class="content"><img src="${item.cover}" alt="">
<div class="info">
<p class="f-title">${firstTitle}</p>
<p class="subtitle"><span class="name">${item.author_name}</span>
<span class="point">·</span><span class="time">2021-11-22</span></p>
</div>
</div>
<div class="count">
<ul>
<li><i class="bilifont bili-icon_shipin_bofangshu"></i><span>${bigNumber(
firstDetail.view,
)}</span></li>
<li><i class="bilifont bili-icon_shipin_danmushu"></i><span>${bigNumber(
firstDetail.danmaku,
)}</span></li>
<li><i class="bilifont bili-icon_shipin_shoucangshu"></i><span>${bigNumber(
firstDetail.favorite,
)}</span></li>
<li><i class="bilifont bili-icon_shipin_yingbishu"></i><span>${bigNumber(
firstDetail.coin,
)}</span></li>
</ul>
</div>
</div>
</div>
`
RANK_DOM.append(s2d(first))
}
async function drawHot() {
const RANK_DOM = document.querySelector('#bili_zhoushuyi .rank-list')
let rankList = await getHotVideo()
await drawFirst(rankList.shift())
rankList.forEach((item, index) => {
let title = item.name.replace(/<em class="keyword">(.*?)<\/em>/g, '$1')
let DOM = s2d(`
<div class="rank-wrap"><span class="number ${index < 2 && 'on'}">${
index + 2
}</span>
<a href="//www.bilibili.com/video/${
item.bvid
}" target="_blank" class="link">
<p title="${title}" class="title">${title}</p>
</a>
<div class="popover-video-card pvc">
<div class="content"><img
src="${item.cover}" alt="">
<div class="info">
<p class="f-title">${title}</p>
<p class="subtitle"><span class="name">${
item.author_name
}</span><span class="point">·</span><span
class="time">${timeFormat(item.duration)}</span></p>
</div>
</div>
<div class="count">
<ul>
<li><i class="bilifont bili-icon_shipin_bofangshu"></i><span>${
item.view_count
}</span></li>
<li><i class="bilifont bili-icon_shipin_danmushu"></i><span>-</span></li>
<li><i class="bilifont bili-icon_shipin_shoucangshu"></i><span>-</span></li>
<li><i class="bilifont bili-icon_shipin_yingbishu"></i><span>-</span></li>
</ul>
</div>
</div>
</div>`)
RANK_DOM.append(DOM)
})
}
const zhoujieDOM = `
<div id="bili_zhoushuyi">
<div class="space-between report-wrap-module report-scroll-module" id="bili_report_douga" scrollshow="true">
<div class="card-list">
<header class="storey-title">
<div class="l-con"> <img class="svg-icon" src="${ICON}" /> <a
href="https://search.bilibili.com/all?keyword=${KEY_WORDS}" target="_blank" class="name">${TITLE}</a></div>
<div class="exchange-btn">
<div class="btn btn-change zhoujie-refresh"><i class="bilifont bili-icon_caozuo_huanyihuan"></i> 换一换 </div><a
href="https://search.bilibili.com/all?keyword=${KEY_WORDS}&order=pubdate" target="_blank" class="btn more">
更多 <i class="bilifont bili-icon_caozuo_qianwang"></i></a>
</div>
</header>
<div class="zone-list-box"> </div>
</div>
<div class="rank-list">
<header class="rank-header"><span class="name">排行榜</span><a
href="https://www.bilibili.com/v/channel/${CHANNEL_ID}?tab=multiple" target="_blank" class="more">更多<i
class="bilifont bili-icon_caozuo_qianwang"></i></a></header>
</div>
</div>
</div>`
window.addEventListener(
'load',
async function () {
let content = document.querySelector('.first-screen')
let anchor = document.querySelector('#reportFirst2')
let init = s2d(zhoujieDOM)
// 插入初始模版
content.insertBefore(init, anchor)
//点击事件
document
.querySelector('.zhoujie-refresh')
.addEventListener('click', refresh)
// 插入最新视频
await getNewVideo()
drawVideos()
// 插入热门视频
drawHot()
},
false,
)
})()