☰

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

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

目前為 2022-04-20 提交的版本，檢視 最新版本。

// ==UserScript==
// @name         B站动态首页展示所有正在直播列表
// @namespace    http://tampermonkey.net/
// @version      0.2.1
// @description  直接在动态首页展示所有的正在直播名单，而不是默认10个
// @author       tuntun
// @match        https://t.bilibili.com/*
// @icon         https://www.google.com/s2/favicons?domain=bilibili.com
// @grant        GM_addStyle
// @license      MIT
// ==/UserScript==

(function () {
  'use strict';
  GM_addStyle(`
    .bili-dyn-live-users {
      max-height: calc(100vh - 276px);
      overflow-y: overlay;
    }
    
    .bili-dyn-live-users::-webkit-scrollbar {
      width: 10px; /*滚动条的宽度*/
      height: 8px; /*滚动条的高度*/
      opacity: 0;
    }
    
    .bili-dyn-live-users::-webkit-scrollbar-track-piece {
      background-color: #fff; /*滚动条的背景颜色*/
      -webkit-border-radius: 0; /*滚动条的圆角宽度*/
      opacity: 0;
    }
    
    .bili-dyn-live-users::-webkit-scrollbar-thumb {
      height: 50px;
      background-color: #ccc;
      -webkit-border-radius: 4px;
      outline: 2px solid #fff;
      outline-offset: -2px;
      border: 2px solid #fff;
      display: none;
    }
    .bili-dyn-live-users::-webkit-scrollbar-thumb:hover {
      background-color: #9f9f9f;
    }
    
    .bili-dyn-live-users:hover::-webkit-scrollbar-thumb {
      display: block;
    
    }
    
    .bili-dyn-live-users::-webkit-scrollbar-track {
      display: none;
    }
    
    .bili-dyn-live-users::-webkit-scrollbar-track-piece {
      display: none;
    }
  `)

  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 !== '' ? '?' : ''}${pStr}`;
      try {
        let res = await fetch(url, {
          credentials: "include"
        });
        return (await res.json()).data;
      } catch (error) {
        console.error('Get Error', error);
      }
    },
    // 通过关键词获取视频数据
    getLiver: async (num = 0) => {
      try {
        let params = {};
        if (num !== 0) {
          params = {
            size: num
          }
        }
        let res = await API.Get({
          url: 'https://api.vc.bilibili.com/dynamic_svr/v1/dynamic_svr/w_live_users',
          params,
        });
        return res;
      } catch (error) {
        console.log('getLiver', error);
      }
    },
    getCard: async (mid) => {
      try {
        let res = await API.Get({
          url: 'https://api.bilibili.com/x/web-interface/card',
          params: {
            mid,
            photo: 'true',
          },
        });
        return res;
      } catch (error) {
        console.log('getCard', error);
      }
    }
  }

  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]
    },
  }

  const getListItemTemplete = (prop) => {
    return `
      <div class="bili-dyn-live-users__item" onclick="window.open('${prop.link}');">
        <div class="bili-dyn-live-users__item__left">
          <div class="bili-dyn-live-users__item__face-container">
            <div class="bili-dyn-live-users__item__face">
              <div class="bili-awesome-img" style="background-image: url(${prop.face.slice(6)}@47w_47h_1c.webp);">
              </div>
            </div>
          </div>
        </div>
        <div class="bili-dyn-live-users__item__right">
          <div class="bili-dyn-live-users__item__uname bili-ellipsis">
            ${prop.uname}
          </div>
          <div class="bili-dyn-live-users__item__title bili-ellipsis">
            ${prop.title}
          </div>
        </div>
      </div>
    `
  }

  const init = async () => {
    let firstGet = await API.getLiver();
    let liverNum = firstGet.count;
    if (liverNum > 10) {
      let liveUpListDom = document.querySelector('.bili-dyn-live-users__body');
      liveUpListDom.innerHTML = '';
      let allLiver = await API.getLiver(liverNum);
      // let addLiverItem = allLiver.items.slice(10);
      allLiver.items.forEach(item => {
        if (liveUpListDom !== null) {
          liveUpListDom.appendChild(Tool.s2d(getListItemTemplete(item)));
        }
      });
    }
  }
 
  window.addEventListener(
    'load',
    async () => {
      await init();
    },
  )
})();