推送A-soul视频
目前为
// ==UserScript==
// @name A-soul视频推送插件
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 推送A-soul视频
// @author tuntun
// @match https://www.bilibili.com/*
// @icon https://i2.hdslb.com/bfs/face/48d65a10a2c643dddc4a51e0a60fae892393417a.jpg
// @grant GM_addStyle
// @grant GM_setValue
// @grant GM_getValue
// @license MIT
// ==/UserScript==
(function() {
'use strict';
console.log('请关注珈乐捏');
let templete = `
<section class="bili-grid">
<div class="video-card-list is-main">
<div class="area-header">
<div class="left">
<a id="A-soul分区" class="the-world area-anchor" data-id="8"></a
><img class="icon" src="https://i2.hdslb.com/bfs/face/48d65a10a2c643dddc4a51e0a60fae892393417a.jpg"></img>
<a
class="title"
href="https://search.bilibili.com/all?keyword=A-soul"
target="_blank"
><span>A-soul分区</span></a
>
</div>
<div class="right">
<button id="refreshVideo" class="primary-btn roll-btn">
<svg style="transform: rotate(0deg)">
<use xlink:href="#widget-roll"></use></svg><span>换一换</span></button
><a
class="primary-btn see-more"
href="https://search.bilibili.com/all?keyword=A-soul"
target="_blank"
><span>查看更多</span><svg><use xlink:href="#widget-arrow"></use></svg></a>
</div>
</div>
<div class="video-card-body">
</div>
</div>
<aside>
<div class="aside-wrap">
<div class="aside-head">
<div class="area-header">
<div class="left">
<!----><!----><a
class="title rank-title"
href="https://www.bilibili.com/v/virtual"
target="_blank"
><span>排行榜</span></a>
</div>
<div class="right">
<a
class="primary-btn see-more"
href="https://www.bilibili.com/v/virtual"
target="_blank"
><span>更多</span><svg><use xlink:href="#widget-arrow"></use></svg></a>
</div>
</div>
</div>
</div>
</aside>
</section>
`;
let asideBody = `
<div class="aside-body">
<div class="aside-core">
<div class="bili-rank-list-video bili-rank-list-video__grid">
<ul class="bili-rank-list-video__list video-rank-list">
<li class="bili-rank-list-video__item">
<div class="bili-rank-list-video__item--wrap">
<span class="bili-rank-list-video__item--index" data-index="1"
>1</span
><a
href="//www.bilibili.com/video/BV1Hi4y1R7gy"
class="rank-video-card"
target="_blank"
data-mod="partition_rank"
data-idx="content"
data-ext="click"
><div class="rank-video-card__image">
<picture class="v-img rank-video-card__cover"
><!---->
<source
srcset="
//i2.hdslb.com/bfs/archive/c92ce434742fb724af5577de2485a1eaff8aa226.jpg@192w_108h_1c_100q.webp
"
type="image/webp" />
<img
src="//i2.hdslb.com/bfs/archive/c92ce434742fb724af5577de2485a1eaff8aa226.jpg@192w_108h_1c_100q"
alt="B站以前的LV6 VS 现在的LV6 2.0"
loading="lazy"
onload=""
/></picture>
</div>
<div class="rank-video-card__info">
<h3
class="rank-video-card__info--tit"
title="B站以前的LV6 VS 现在的LV6 2.0"
>
B站以前的LV6 VS 现在的LV6 2.0
</h3>
</div></a
>
</div>
</li>
<li class="bili-rank-list-video__item">
<div class="bili-rank-list-video__item--wrap">
<span class="bili-rank-list-video__item--index" data-index="2"
>2</span
><a
href="//www.bilibili.com/video/BV1Rb4y1Y7Pw"
class="rank-video-card rank-video-card__concise"
target="_blank"
data-mod="partition_rank"
data-idx="content"
data-ext="click"
><!---->
<div class="rank-video-card__info">
<h3
class="rank-video-card__info--tit"
title="【自制动画】《鬼灭之刃》无限城篇（香奈乎单挑童磨 片段）"
>
【自制动画】《鬼灭之刃》无限城篇（香奈乎单挑童磨 片段）
</h3>
</div></a
>
</div>
</li>
<li class="bili-rank-list-video__item">
<div class="bili-rank-list-video__item--wrap">
<span class="bili-rank-list-video__item--index" data-index="3"
>3</span
><a
href="//www.bilibili.com/video/BV1Z44y177Wt"
class="rank-video-card rank-video-card__concise"
target="_blank"
data-mod="partition_rank"
data-idx="content"
data-ext="click"
><!---->
<div class="rank-video-card__info">
<h3
class="rank-video-card__info--tit"
title="小伙买了80个模型，爆肝一周，只为在家建造一个迷你世界"
>
小伙买了80个模型，爆肝一周，只为在家建造一个迷你世界
</h3>
</div></a
>
</div>
</li>
<li class="bili-rank-list-video__item">
<div class="bili-rank-list-video__item--wrap">
<span class="bili-rank-list-video__item--index" data-index="4"
>4</span
><a
href="//www.bilibili.com/video/BV1mi4y1R7rT"
class="rank-video-card rank-video-card__concise"
target="_blank"
data-mod="partition_rank"
data-idx="content"
data-ext="click"
><!---->
<div class="rank-video-card__info">
<h3
class="rank-video-card__info--tit"
title="准备好了么？来点刺激的！！！【嘉然】"
>
准备好了么？来点刺激的！！！【嘉然】
</h3>
</div></a
>
</div>
</li>
<li class="bili-rank-list-video__item">
<div class="bili-rank-list-video__item--wrap">
<span class="bili-rank-list-video__item--index" data-index="5"
>5</span
><a
href="//www.bilibili.com/video/BV1VD4y1c788"
class="rank-video-card rank-video-card__concise"
target="_blank"
data-mod="partition_rank"
data-idx="content"
data-ext="click"
><!---->
<div class="rank-video-card__info">
<h3
class="rank-video-card__info--tit"
title="顶上海鲜战争12分钟总集篇"
>
顶上海鲜战争12分钟总集篇
</h3>
</div></a
>
</div>
<!---->
</li>
<li class="bili-rank-list-video__item">
<div class="bili-rank-list-video__item--wrap">
<span class="bili-rank-list-video__item--index" data-index="6"
>6</span
><a
href="//www.bilibili.com/video/BV14r4y1S71X"
class="rank-video-card rank-video-card__concise"
target="_blank"
data-mod="partition_rank"
data-idx="content"
data-ext="click"
><!---->
<div class="rank-video-card__info">
<h3
class="rank-video-card__info--tit"
title="【原神手书】荒泷一斗 【Misfit Lunatic】"
>
【原神手书】荒泷一斗 【Misfit Lunatic】
</h3>
</div></a
>
</div>
<!---->
</li>
<li class="bili-rank-list-video__item">
<div class="bili-rank-list-video__item--wrap">
<span class="bili-rank-list-video__item--index" data-index="7"
>7</span
><a
href="//www.bilibili.com/video/BV1jL411L7Vm"
class="rank-video-card rank-video-card__concise"
target="_blank"
data-mod="partition_rank"
data-idx="content"
data-ext="click"
><!---->
<div class="rank-video-card__info">
<h3
class="rank-video-card__info--tit"
title="【平成三萌】摇起来迎接2022~~~~~~"
>
【平成三萌】摇起来迎接2022~~~~~~
</h3>
</div></a
>
</div>
<!---->
</li>
<li class="bili-rank-list-video__item">
<div class="bili-rank-list-video__item--wrap">
<span class="bili-rank-list-video__item--index" data-index="8"
>8</span
><a
href="//www.bilibili.com/video/BV1tY411p7G5"
class="rank-video-card rank-video-card__concise"
target="_blank"
data-mod="partition_rank"
data-idx="content"
data-ext="click"
><!---->
<div class="rank-video-card__info">
<h3
class="rank-video-card__info--tit"
title="你瞧瞧现在哪儿有萌新啊"
>
你瞧瞧现在哪儿有萌新啊
</h3>
</div></a
>
</div>
<!---->
</li>
<li class="bili-rank-list-video__item">
<div class="bili-rank-list-video__item--wrap">
<span class="bili-rank-list-video__item--index" data-index="9"
>9</span
><a
href="//www.bilibili.com/video/BV1ji4y1R7LL"
class="rank-video-card rank-video-card__concise"
target="_blank"
data-mod="partition_rank"
data-idx="content"
data-ext="click"
><!---->
<div class="rank-video-card__info">
<h3
class="rank-video-card__info--tit"
title="女生想让男朋友知道的事有哪些？"
>
女生想让男朋友知道的事有哪些？
</h3>
</div></a
>
</div>
<!---->
</li>
<li class="bili-rank-list-video__item">
<div class="bili-rank-list-video__item--wrap">
<span
class="bili-rank-list-video__item--index"
data-index="10"
>10</span
><a
href="//www.bilibili.com/video/BV12L4y1E7G2"
class="rank-video-card rank-video-card__concise"
target="_blank"
data-mod="partition_rank"
data-idx="content"
data-ext="click"
><!---->
<div class="rank-video-card__info">
<h3
class="rank-video-card__info--tit"
title="看到朋友脱单我比si了还难受"
>
看到朋友脱单我比si了还难受
</h3>
</div></a
>
</div>
<!---->
</li>
</ul>
</div>
<!----><!---->
</div>
</div>`
const Tool = {
// 大数转万
formatBigNumber: (num) => {
return num > 10000 ? `${(num / 10000).toFixed(2)}万` : num
},
// 字符串转DOM
s2d: (string) => {
return new DOMParser().parseFromString(string, 'text/html').body
.childNodes[0]
},
// 发布时间格式化
diffTime: (time) => {
let upData = new Date(parseInt(time, 10) * 1000);
let nowTime = new Date().getTime(),
upTime = upData.getTime(),
Day = 24 * 60 * 60 * 1000,
Hours = 60 * 60 * 1000,
Minutes = 60 * 1000,
diffDay = parseInt((nowTime - upTime) / Day),
diffHours = parseInt((nowTime - upTime) / Hours),
diffMinutes = Math.floor((nowTime - upTime) / Minutes);
// console.log(diffDay, diffHours, diffMinutes);
if(diffDay != 0 && diffDay < 7) {
if ( diffDay === 1 ) {
return '昨天'
}
return diffDay + '天前';
}
else if(diffDay === 0 && diffHours != 0) {
return diffHours + '小时前';
}
else if(diffDay === 0 && diffHours === 0 && diffMinutes != 0) {
return diffMinutes + '分钟前';
}
else if (diffDay === 0 && diffHours === 0 && diffMinutes === 0) {
return '刚刚';
}
else {
let month = upData.getMonth() + 1;
let day = upData.getDate();
return `${month < 10 ? 0 : ''}${month}-${day < 10 ? 0 : ''}${day}`
}
},
// 判断发布时间与现在时间是否过长
isTimeTooLate: (time) => {
let upData = new Date(parseInt(time, 10) * 1000);
let nowTime = new Date().getTime(),
upTime = upData.getTime(),
Day = 24 * 60 * 60 * 1000,
diffDay = parseInt((nowTime - upTime) / Day);
if (diffDay > 30) {
return true;
}
return false;
}
}
const API = {
// 封装get方法
Get: async (props) => {
const { url: baseUrl, params = {} } = props;
let pStr = Object.keys(params).map((key) => {
return `${key}=${params[key]}`;
}).join('&');
let url = `${baseUrl}?${pStr}`;
try {
let res = await fetch(url, {
credentials: "include"
});
return (await res.json()).data;
} catch (error) {
console.error('Get Error', error);
}
},
// 通过关键词获取视频数据
getVideo: async (keyWord, page = 1) => {
try {
let res = await API.Get({
url: 'https://api.bilibili.com/x/web-interface/search/type',
params: {
search_type: 'video',
keyword: keyWord,
page: page,
}
});
return res.result;
} catch (error) {
console.log('getVideo', error);
}
},
}
let videoList = [];
let page = 1;
let searchPage = 1;
let bvList = [];
let pageSize = 10;
// 获取数据并渲染
const getVideoCardTemplete = (data) => {
let videoCardBody = document.querySelector('.video-card-body');
videoCardBody.innerHTML = '';
data.forEach((item, index) => {
if (index < pageSize) {
const {
bvid, pic, mid,
upic, author, play,
like, duration, pubdate } = item;
let title = item.title.replace(/<em class="keyword">(.*?)<\/em>/g, '$1');
let domStr = `
<div class="bili-video-card">
<div class="bili-video-card__skeleton hide">
<div class="bili-video-card__skeleton--cover"></div>
<div class="bili-video-card__skeleton--info">
<div class="bili-video-card__skeleton--face"></div>
<div class="bili-video-card__skeleton--right">
<p class="bili-video-card__skeleton--text"></p>
<p class="bili-video-card__skeleton--text short"></p>
<p class="bili-video-card__skeleton--light"></p>
</div>
</div>
</div>
<div class="bili-video-card__wrap __scale-wrap">
<a
href="//www.bilibili.com/video/${bvid}"
target="_blank"
data-mod="partition_recommend"
data-idx="content"
data-ext="click"
><div class="bili-video-card__image __scale-player-wrap">
<div class="bili-video-card__image--wrap">
<div class="bili-watch-later" style="display: none">
<svg class="bili-watch-later__icon">
<use xlink:href="#widget-watch-later"></use></svg><span
class="bili-watch-later__tip"
style="display: none"
></span>
</div>
<picture class="v-img bili-video-card__cover"
><!---->
<source
srcset="
${pic}@672w_378h_1c_100q.webp
"
type="image/webp" />
<img
src="${pic}@672w_378h_1c_100q"
alt="${title}"
loading="lazy"
onload=""
/></picture>
<div class="v-inline-player"></div>
</div>
<div class="bili-video-card__mask">
<div class="bili-video-card__stats">
<div class="bili-video-card__stats--left">
<span class="bili-video-card__stats--item"
><svg class="bili-video-card__stats--icon">
<use xlink:href="#widget-play-count"></use></svg><span class="bili-video-card__stats--text"
>${Tool.formatBigNumber(play)}</span
></span
><span class="bili-video-card__stats--item"
><svg class="bili-video-card__stats--icon">
<use xlink:href="#widget-agree"></use></svg><span class="bili-video-card__stats--text"
>${Tool.formatBigNumber(like)}</span
></span
>
</div>
<span class="bili-video-card__stats__duration">${duration}</span>
</div>
</div>
</div></a
>
<div class="bili-video-card__info __scale-disable">
<a
href="//space.bilibili.com/${mid}"
target="_blank"
data-mod="partition_recommend"
data-idx="content"
data-ext="click"
><div class="v-avatar bili-video-card__avatar">
<picture class="v-img v-avatar__face"
><!---->
<source
srcset="
${upic.substr(5)}@72w_72h.webp
"
type="image/webp" />
<img
src="${upic.substr(5)}@72w_72h"
alt="${author}"
loading="lazy"
onload="" /></picture
><!---->
</div></a
>
<div class="bili-video-card__info--right">
<a
href="//www.bilibili.com/video/${bvid}"
target="_blank"
data-mod="partition_recommend"
data-idx="content"
data-ext="click"
><h3
class="bili-video-card__info--tit"
title="${title}"
>
${title}
</h3></a
>
<p class="bili-video-card__info--bottom">
<a
class="bili-video-card__info--owner"
href="//space.bilibili.com/${mid}"
target="_blank"
data-mod="partition_recommend"
data-idx="content"
data-ext="click"
><span class="bili-video-card__info--author">${author}</span
><span class="bili-video-card__info--date"
>· ${Tool.diffTime(pubdate)}</span
></a
>
</p>
</div>
</div>
</div>
</div>
`;
videoCardBody.appendChild(Tool.s2d(domStr));
}
});
};
// 填入框架
let main = document.querySelector('.bili-layout');
let gridAll = document.querySelectorAll('.bili-grid');
main.insertBefore(Tool.s2d(templete), gridAll[2]);
// 第一次获取数据并渲染
const applyFirstData = async () => {
refreshVideo();
};
// 换一换
const refreshVideo = async () => {
let firstVideoIndex = (page - 1) * pageSize;
let lastVideoIndex = firstVideoIndex + pageSize - 1;
while(videoList.length < lastVideoIndex + 1) {
let data = await API.getVideo('A-soul', searchPage);
data.forEach((item) => {
if (!Tool.isTimeTooLate(item.pubdate)) {
if (bvList.indexOf(item.bvid) === -1) {
videoList.push(item);
bvList.push(item.bvid);
}
}
});
searchPage++;
};
// console.log(videoList);
// console.log(bvList);
page++;
let applyData = videoList.slice(firstVideoIndex, lastVideoIndex + 1)
getVideoCardTemplete(applyData);
};
applyFirstData();
let refreshVideoBtn = document.querySelector('#refreshVideo');
refreshVideoBtn.addEventListener('click', refreshVideo);
})();