Greasy Fork is available in English.
哔哩哔哩推荐模块
当前为
// ==UserScript==
// @name 哔哩哔哩推荐-
// @namespace http://tampermonkey.net/
// @version 0.2
// @description 哔哩哔哩推荐模块
// @author You
// @match https://*.bilibili.com/*
// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant none
// ==/UserScript==
(function() {
'use strict';
/**
* 秒 转 可阅读的时长
* @param secondDuration
*/
function utilSecond2StrChinese(secondDuration = 0) {
let day = Math.floor(secondDuration / (60 * 60 * 24));
secondDuration -= day * (60 * 60 * 24);
let hour = Math.floor(secondDuration / (60 * 60));
secondDuration -= hour * (60 * 60);
let minute = Math.floor(secondDuration / (60));
secondDuration -= minute * (60);
return (day ? day + '天' : '')
+ (hour ? hour + '时' : '')
+ (minute ? minute + '分' : '')
+ (secondDuration ? secondDuration + '秒' : '');
}
/**
* 播放量 转 几万播放量
* @param secondDuration
*/
function utilPlayTimes2TenThousands(playTimes = 0) {
if (playTimes < 10000) {
return playTimes;
}
return (playTimes / 10000).toFixed(1) + '万';
}
/*时间(今年的没年份)*/
function utilDate2Str(date) {
let curDate = new Date();
return !date ? ''
: (date.getFullYear() === curDate.getFullYear() ? '' : date.getFullYear() + '年')
+ (date.getMonth() + 1) + '月'
+ date.getDate() + '日';
}
let html = `
<a class="btn contact-help" id="open-my-recommend" onclick="document.getElementById('my-bilibili-recommend').style.display='block'">推荐页</a>
<div id="my-bilibili-recommend" style="display:none;">
<a class="btn out-btn-my-recommend" id="close-my-recommend">返回</a>
<a class="btn out-btn-my-recommend" id="refresh-my-recommend" style="top:40px">刷新</a>
<a class="btn out-btn-my-recommend" id="top-my-recommend" style="top:80px">顶部</a>
<div class="recommend-content" style="text-align: center;">
</div>
</div>
`;
let style = `
<style>
.out-btn-my-recommend {
position: fixed;
left: 0;
width: 20px;
padding: 3px;
background: #fff;
line-height: 17px;
cursor: pointer;
}
#open-my-recommend {
height: 60px;
top: calc(50% - 100px);
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0,0,0,0);
font: 12px -apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
margin: 0;
outline: none;
cursor: pointer;
touch-action: manipulation;
text-decoration: none;
position: fixed;
z-index: 101;
left: 0;
margin-top: -36px;
width: 28px;
transition: all .3s;
font-size: 12px;
color: #505050;
background: #fff;
border: 1px solid #e7e7e7;
box-shadow: 0 6px 10px 0 #e7e7e7;
border-radius: 0 2px 2px 0;
padding: 8px 7px;
line-height: 14px;
height: 60px;
top: calc(50% - 100px);
}
div#my-bilibili-recommend {
position: fixed;
width: 100%;
height: 100%;
top: 0;
background: #FFF;
z-index: 10000;
overflow: auto;
}
#my-bilibili-recommend .recommend-content {
width: calc(100% - 20px);
float: right;
}
#my-bilibili-recommend .recommend-video {
width: 450px;
height: 170px;
overflow: hidden;
position: relative;
margin: 5px;
display: inline-block;
text-align: left;
}
#my-bilibili-recommend .recommend-video .recommend-video-img {
width: calc(100% - 150px);
overflow: hidden;
height: 100%;
float: left;
}
#my-bilibili-recommend .recommend-video img {
width: 100%;
height: 100%;
object-fit: cover;
}
#my-bilibili-recommend a.recommend-video-info {
display: block;
float: left;
width: 150px;
height: 100%;
position: relative;
font-size: 14px;
}
#my-bilibili-recommend a.recommend-video-info > div {
padding: 0 5px;
}
#my-bilibili-recommend .recommend-video-user {
position: absolute;
bottom: 0;
left: 0;
}
#my-bilibili-recommend .recommend-video-time {
position: absolute;
bottom: 0;
right: 0;
}
#my-bilibili-recommend .recommend-video-play-times {
position: absolute;
bottom: 17px;
}
#my-bilibili-recommend .recommend-video-duration {
position: absolute;
bottom: 34px;
}
#my-bilibili-recommend .recommend-video-play-tags {
position: absolute;
bottom: 17px;
right: 0;
}
#page-follows > div > div.follow-sidenav > div.nav-container.follow-container > div.be-scrollbar.follow-list-container.ps {
max-height: unset !important;
}
#page-fav > div.col-full.clearfix.master > div.fav-sidenav > div:nth-child(1) > div:nth-child(2) #fav-createdList-container {
max-height: unset !important;
}
</style>
`
let div = document.createElement('div');
document.body.append(div);
div.innerHTML += html + style;
function getVideoHtml(video) {
if (document.querySelector('.recommend-video[videoId="'+video.id+'"]') != null) {
return ``;
}
return `
<div class="recommend-video" title="${video.title}" videoId="${video.id}">
<div class="recommend-video-img"><a href="${video.uri}" target="_blank"><img src="${video.pic}"></a></div>
<a class="recommend-video-info" href="${video.uri}" target="_blank">
<div class="recommend-video-title">${video.title.substring(0, 40)}</div>
<div class="recommend-video-play-times">${utilPlayTimes2TenThousands(video.stat.view)}</div>
<div class="recommend-video-user">${video.owner.name}</div>
<div class="recommend-video-duration">${utilSecond2StrChinese(video.duration)}</div>
</a>
</div>
`
}
function eleCommendContent() {
return document.querySelector('#my-bilibili-recommend .recommend-content');
}
document.getElementById('open-my-recommend').onclick = document.getElementById('close-my-recommend').onclick = function () {
let recommend = document.getElementById('my-bilibili-recommend');
if (recommend.style.display === 'none') {
recommend.style.display = 'block';
document.documentElement.style.overflow = 'hidden';
if (containerTooLess()) {
RestGetVideoList();
}
} else {
recommend.style.display = 'none';
document.documentElement.style.overflow = 'auto';
}
};
document.getElementById('refresh-my-recommend').onclick = function () {
eleCommendContent().innerHTML = '';
RestGetVideoList();
};
document.getElementById('top-my-recommend').onclick = function () {
document.querySelector("#my-bilibili-recommend").scrollTop = 0;
};
// RestGetVideoList();
function RestGetVideoList() {
let request = new XMLHttpRequest();
request.open('GET', 'https://api.bilibili.com/x/web-interface/index/top/rcmd?fresh_type=3&fresh=' + Math.random());
request.setRequestHeader("If-Modified-Since","0"); // 清除缓存
request.setRequestHeader('Content-Type', 'application/json');
request.withCredentials = true;
// request.setRequestHeader('cookie', document.cookie);
request.addEventListener('load', function () {
let newHtml = '';
if (JSON.parse(this.responseText).code != 0) {
alert(JSON.parse(this.responseText).message);
return;
}
for (let video of JSON.parse(this.responseText).data.item) {
newHtml += getVideoHtml(video);
}
eleCommendContent().innerHTML += newHtml;
if (containerTooLess()) {
RestGetVideoList()
}
})
request.send();
}
document.getElementById('my-bilibili-recommend').onscroll = function (event) {
if (containerTooLess()) {
RestGetVideoList();
}
};
function containerTooLess() {
let scrollTop = document.getElementById('my-bilibili-recommend').scrollTop;
let height = document.getElementById('my-bilibili-recommend').clientHeight;
let contentHeight = eleCommendContent().clientHeight;
if (scrollTop + height + 50 >= contentHeight) {
return true;
}
return false;
}
let scrollbarWidth = (function getScrollbarWidth() {
var scrollDiv = document.createElement("div");
scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;';
document.body.appendChild(scrollDiv);
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
document.body.removeChild(scrollDiv);
return scrollbarWidth;
})();
// 适应宽度
function myResize() {
//let contentWidth = document.querySelector("#my-bilibili-recommend .recommend-content").offsetWidth - scrollbarWidth;
let maxWidth = 500;
let maxHeight = 180;
let contentWidth = window.innerWidth - 20 - scrollbarWidth;
let width = Math.floor(contentWidth / Math.ceil(contentWidth / maxWidth) - 13);
let height = Math.floor(maxHeight * width / maxWidth);
//let excess = contentWidth % (462 + scrollbarWidth) / (contentWidth / (462 + scrollbarWidth));
//let width = maxWidth + excess;
//let height = 170 + excess;
let newStyle = `
<style>
#my-bilibili-recommend .recommend-video {
width: ${width}px;
height: ${height}px;
}
</style>
`
let div = document.createElement('div');
div.innerHTML += newStyle;
document.body.append(div);
};
myResize();
window.onresize = myResize;
// Your code here...
})();