B站动态首页展示所有正在直播列表

直接在动态首页展示所有的正在直播名单,而不是默认10个

Versione datata 09/05/2022. Vedi la nuova versione l'ultima versione.

  1. // ==UserScript==
  2. // @name B站动态首页展示所有正在直播列表
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.2.3
  5. // @description 直接在动态首页展示所有的正在直播名单,而不是默认10个
  6. // @author tuntun
  7. // @match https://t.bilibili.com/*
  8. // @icon https://www.google.com/s2/favicons?domain=bilibili.com
  9. // @grant GM_addStyle
  10. // @license MIT
  11. // ==/UserScript==
  12.  
  13. (function () {
  14. 'use strict';
  15. GM_addStyle(`
  16. .bili-dyn-live-users {
  17. max-height: calc(100vh - 276px);
  18. overflow-y: overlay;
  19. }
  20. .bili-dyn-live-users::-webkit-scrollbar {
  21. width: 10px; /*滚动条的宽度*/
  22. height: 8px; /*滚动条的高度*/
  23. opacity: 0;
  24. }
  25. .bili-dyn-live-users::-webkit-scrollbar-track-piece {
  26. background-color: #fff; /*滚动条的背景颜色*/
  27. -webkit-border-radius: 0; /*滚动条的圆角宽度*/
  28. opacity: 0;
  29. }
  30. .bili-dyn-live-users::-webkit-scrollbar-thumb {
  31. height: 50px;
  32. background-color: #ccc;
  33. -webkit-border-radius: 4px;
  34. outline: 2px solid #fff;
  35. outline-offset: -2px;
  36. border: 2px solid #fff;
  37. display: none;
  38. }
  39. .bili-dyn-live-users::-webkit-scrollbar-thumb:hover {
  40. background-color: #9f9f9f;
  41. }
  42. .bili-dyn-live-users:hover::-webkit-scrollbar-thumb {
  43. display: block;
  44. }
  45. .bili-dyn-live-users::-webkit-scrollbar-track {
  46. display: none;
  47. }
  48. .bili-dyn-live-users::-webkit-scrollbar-track-piece {
  49. display: none;
  50. }
  51. `)
  52.  
  53. const API = {
  54. // 封装get方法
  55. Get: async (props) => {
  56. const { url: baseUrl, params = {} } = props;
  57. let pStr = Object.keys(params).map((key) => {
  58. return `${key}=${params[key]}`;
  59. }).join('&');
  60. let url = `${baseUrl}${pStr !== '' ? '?' : ''}${pStr}`;
  61. try {
  62. let res = await fetch(url, {
  63. credentials: "include"
  64. });
  65. return (await res.json()).data;
  66. } catch (error) {
  67. console.error('Get Error', error);
  68. }
  69. },
  70. // 通过关键词获取视频数据
  71. getLiver: async (num = 0) => {
  72. try {
  73. let params = {};
  74. if (num !== 0) {
  75. params = {
  76. size: num
  77. }
  78. }
  79. let res = await API.Get({
  80. url: 'https://api.vc.bilibili.com/dynamic_svr/v1/dynamic_svr/w_live_users',
  81. params,
  82. });
  83. return res;
  84. } catch (error) {
  85. console.log('getLiver', error);
  86. }
  87. },
  88. getCard: async (mid) => {
  89. try {
  90. let res = await API.Get({
  91. url: 'https://api.bilibili.com/x/web-interface/card',
  92. params: {
  93. mid,
  94. photo: 'true',
  95. },
  96. });
  97. return res;
  98. } catch (error) {
  99. console.log('getCard', error);
  100. }
  101. }
  102. }
  103.  
  104. const Tool = {
  105. // 大数转万
  106. formatBigNumber: (num) => {
  107. return num > 10000 ? `${(num / 10000).toFixed(2)}万` : num
  108. },
  109. // 字符串转DOM
  110. s2d: (string) => {
  111. return new DOMParser().parseFromString(string, 'text/html').body
  112. .childNodes[0]
  113. },
  114. }
  115.  
  116. const getListItemTemplete = (prop) => {
  117. return `
  118. <div class="bili-dyn-live-users__item">
  119. <a href="${prop.link}" target="_blank" style="display: flex">
  120. <div class="bili-dyn-live-users__item__left">
  121. <div class="bili-dyn-live-users__item__face-container">
  122. <div class="bili-dyn-live-users__item__face">
  123. <div class="bili-awesome-img" style="background-image: url(${prop.face.slice(6)}@47w_47h_1c.webp);">
  124. </div>
  125. </div>
  126. </div>
  127. </div>
  128. <div class="bili-dyn-live-users__item__right">
  129. <div class="bili-dyn-live-users__item__uname bili-ellipsis">
  130. ${prop.uname}
  131. </div>
  132. <div class="bili-dyn-live-users__item__title bili-ellipsis">
  133. ${prop.title}
  134. </div>
  135. </div>
  136. </a>
  137. </div>
  138. `
  139. }
  140.  
  141. const getCardTemplete = async (params) => {
  142. const {mid, x, y} = params;
  143. let data = await API.getCard(mid);
  144. let card = data.card;
  145. return `
  146. <div data-v-6c7ff250="" class="userinfo-wrapper" style="top: ${x}px; left: ${y}px">
  147. <div data-v-1b335720="" data-v-6c7ff250="" class="userinfo-content">
  148. <!---->
  149. <div data-v-1b335720="" class="bg" style="
  150. background-image: url('${data.space.l_img.slice(5)}@120h.webp');
  151. "></div>
  152. <a data-v-1b335720="" href="//space.bilibili.com/${mid}/dynamic" target="_blank" class="face">
  153. <img
  154. data-v-1b335720="" src="${card.face.slice(5)}@50w_50h_1c.webp" />
  155. ${card.official_verify.type !== -1 ? `<div data-v-1b335720="" class="verify-box type-${card.official_verify.type}"></div>` : ''}
  156. </a>
  157. <div data-v-1b335720="" class="info">
  158. <p data-v-1b335720="" class="user">
  159. <a data-v-1b335720="" target="_blank" href="//space.bilibili.com/${mid}/dynamic" class="name ${card.vip.status === 0 ? '' : 'vip'}"
  160. ${card.vip.status === 0 ? '' : 'style="color: rgb(251, 114, 153)"'}>${card.name}</a>
  161. <!----><a data-v-1b335720="" target="_blank" href="//www.bilibili.com/html/help.html#k_5"><img
  162. data-v-1b335720=""
  163. src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAI+SURBVHgB7ZcxbNNAFIb/M0lKsSNgadaSmVZstExIBQmkimaFDgixIhqYEDMgJpoCY1GnlhkhYAkrYu8e5mRBiDptCM31Xlq7cc7xpXGU1NL7Flt353vvv3v33hlgGIZhGIZhEovAGPizeHtFShQxIBJYu/jlW4neUxgDyoGCWrppDIiAXFKPoIDfi7euW8K6jxEgIadJBWFdykPYtvmbWhWtWk1r9wUIiFUp5RWMEHI++/Z93+N3Hj/C/q9KcA7/TeICRkw/Kx8Y7+jjrbBJs+sbOP/5K+xXr2Fisvi0PTb7YSPUIWsq157PWXuHzJ0CBkW6LlrVqtauHWJhO7ByucPOmVmYSF2e8R09k8/j//Z2oD+9cONoPtXftf2dtFSM/334ACfFQsJJvICx1IEwKHQn7i737KcQa34va+2nSICNs/eWI8e4SkT3GeMQGhaUJps/f2jt6blrkfViqAJSV+e1LabU2g/S3cFuaVWfc302UkDsECLDHhNLhcBBpCKXnps/HlutYdjEFlB/+SJQIekgUvEiIRn19KAMsvdxE8PGGEKTxSdaG8VrY2vzsLyrzOA+f9a+dngV/Jxa+U7I+XrpDaKgNBpmSzgOYgnILNwMbW+Wy/7NMEyER0Ot+t6WeeUpznvZimLgEOq+GXoiOsPJ6HzdRVy0HSBHdtV2i6lcz48odLqzjfctiaAz0KtydrJfqRhtmWyGhtA/g+EoyPHGCQ5rHFuEL4B+lIWUK0gAEuITGIZhGIZhmORzAFVa0dNZxTNHAAAAAElFTkSuQmCC"
  164. class="level" /></a>
  165. <span data-v-1b335720="" class="vip-label" style="
  166. background-color: rgb(251, 114, 153);
  167. color: rgb(255, 255, 255);
  168. "><span data-v-1b335720="" class="label-size">年度大会员</span></span>
  169. </p>
  170. <p data-v-1b335720="" class="social">
  171. <a data-v-1b335720="" href="//space.bilibili.com/7706705/fans/follow" target="_blank"><span data-v-1b335720=""
  172. class="follow">281</span><span data-v-1b335720="" class="label">关注</span></a><a data-v-1b335720=""
  173. href="//space.bilibili.com/7706705/fans/fans" target="_blank"><span data-v-1b335720=""
  174. class="fans">48.5万</span><span data-v-1b335720="" class="label">粉丝</span></a><span data-v-1b335720=""><span
  175. data-v-1b335720="" class="like">202.3万</span><span data-v-1b335720="" class="label">获赞</span></span>
  176. </p>
  177. <p data-v-1b335720="" class="verify-desc">
  178. <i data-v-1b335720="" class="verify-icon type--0"></i><span data-v-1b335720="">bilibili个人认证:bilibili
  179. 直播高能主播</span>
  180. </p>
  181. <p data-v-1b335720="" class="sign">
  182. ${card.sign}
  183. </p>
  184. </div>
  185. <div data-v-1b335720="" class="btn-box">
  186. <a data-v-1b335720="" class="like liked"><span data-v-1b335720="">已关注</span></a><a data-v-1b335720=""
  187. href="//message.bilibili.com/#whisper/mid7706705" target="_blank" class="message">发消息</a>
  188. </div>
  189. </div>
  190. </div>
  191. `
  192. }
  193.  
  194. const init = async () => {
  195. let firstGet = await API.getLiver();
  196. let liverNum = firstGet.count;
  197. if (liverNum > 10) {
  198. let liveUpListDom = document.querySelector('.bili-dyn-live-users__body');
  199. if (liveUpListDom) {
  200. liveUpListDom.innerHTML = '';
  201. let allLiver = await API.getLiver(liverNum);
  202. // let addLiverItem = allLiver.items.slice(10);
  203. allLiver.items.forEach(item => {
  204. if (liveUpListDom !== null) {
  205. liveUpListDom.appendChild(Tool.s2d(getListItemTemplete(item)));
  206. }
  207. });
  208. document.querySelector('.bili-dyn-live-users__title span').innerHTML = `(${allLiver.items.length})`
  209. }
  210. }
  211. }
  212.  
  213. const addRefleshBtn = () => {
  214. const header = document.querySelector('.bili-dyn-live-users__header');
  215. const more = document.querySelector('.bili-dyn-live-users__more');
  216. const refleshBtn = Tool.s2d(`
  217. <button style="background: white; color: #99a2aa; cursor: pointer; border: #99a2aa;font-size: 12px;">刷新</button>
  218. `);
  219. try {
  220. header.insertBefore(refleshBtn, more);
  221. refleshBtn.addEventListener('click', async () => {
  222. refleshBtn.innerHTML = '正在刷新';
  223. await init();
  224. refleshBtn.innerHTML = '刷新';
  225. });
  226. refleshBtn.onmouseover = () => {
  227. refleshBtn.style.color = '#00a1d6';
  228. }
  229. refleshBtn.onmouseout = () => {
  230. refleshBtn.style.color = '#99a2aa';
  231. }
  232. } catch (error) {
  233. console.log(error);
  234. }
  235. }
  236. window.addEventListener(
  237. 'load',
  238. async () => {
  239. await init();
  240. addRefleshBtn();
  241. },
  242. )
  243. })();