☰

A-soul视频分区插件

自定义分区

目前为 2022-01-11 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         A-soul视频分区插件
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1.4
  5. // @description  自定义分区
  6. // @author       tuntun
  7. // @match        https://www.bilibili.com/*
  8. // @icon         https://i2.hdslb.com/bfs/face/48d65a10a2c643dddc4a51e0a60fae892393417a.jpg
  9. // @grant        GM_addStyle
  10. // @grant        GM_setValue
  11. // @grant        GM_getValue
  12. // @license      MIT
  13. // ==/UserScript==
  14.  
  15. (function() {
  16.   'use strict';
  17.   GM_addStyle(`
  18.     .tuntun-setting-popover {
  19.       width: 300px;
  20.       // height: 200px;
  21.       background-color: white;
  22.       border-radius: 20px;
  23.       position: absolute;
  24.       left: -120px;
  25.       top: 43px;
  26.       box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  27.       transition: opacity 0.5s, height 0.25s;
  28.     }
  29.  
  30.     .tuntun-setting-none {
  31.       opacity: 0;
  32.       height: 0;
  33.       overflow: hidden;
  34.     }
  35.  
  36.     .tuntun-setting-form {
  37.       padding: 15px;
  38.       display: flex;
  39.       flex-direction: column;
  40.       justify-content: center;
  41.     }
  42.  
  43.     .tuntun-setting-btn {
  44.       margin: 0 auto;
  45.       width: 84px;
  46.       height: 38px;
  47.       background-color:#b8a6d9;
  48.       border: none;
  49.       border-radius:10px;
  50.       display:inline-block;
  51.       cursor:pointer;
  52.       color:#ffffff;
  53.       font-family:Arial;
  54.       font-size:17px;
  55.       text-decoration:none;
  56.       text-shadow:0px 0px 0px #9752cc;
  57.     }
  58.     .tuntun-setting-btn:hover {
  59.       background-color:#bc80ea;
  60.     }
  61.     .tuntun-setting-btn:active {
  62.       position:relative;
  63.       top:1px;
  64.     }
  65.  
  66.     .tuntun-setting-input {
  67.       margin-bottom: 15px;
  68.       display: flex;
  69.       align-items: center;
  70.     }
  71.  
  72.     .tuntun-setting-input div {
  73.       margin-right: 10px
  74.     }
  75.  
  76.     .tuntun-setting-input input,select{
  77.       width: 200px;
  78.       border: 1px solid #ccc;
  79.       padding: 7px 0px;
  80.       border-radius: 3px;
  81.       padding-left: 5px;
  82.       transition: border 0.25s
  83.     }
  84.  
  85.     .tuntun-setting-input input:focus{
  86.       outline: none;
  87.       border: 1px solid #B8A6D9;
  88.     }
  89.  
  90.     .tuntun-setting-input select:focus{
  91.       outline: none;
  92.       border: 1px solid #B8A6D9;
  93.     }
  94.     
  95.     .tuntun-setting-imgRadius {
  96.       padding-left: 0px !important;
  97.     }
  98.   `);
  99.  
  100.   const getTemplete = (videoKey, imgUrl = '') => {
  101.     return `
  102.     <section class="bili-grid">
  103.       <div class="video-card-list is-main">
  104.         <div class="area-header" style="z-index: 1000;">
  105.           <div class="left tuntun-part-left">
  106.             <a id="A-soul分区" class="the-world area-anchor" data-id="8"></a>
  107.             <img class="icon tuntun-part-img" src="${imgUrl}"></img>
  108.             <a
  109.               class="title"
  110.               href="https://search.bilibili.com/all?keyword=${videoKey}"
  111.               target="_blank"
  112.               >
  113.               <span>${videoKey}分区</span>
  114.             </a>
  115.           </div>
  116.           <div class="right" style="position: relative;">
  117.             <div id="tuntun-setting" style="position: relative;">
  118.               <button class="primary-btn roll-btn">
  119.                 <span>设置</span></button
  120.               >
  121.               <div
  122.                 class="tuntun-setting-popover tuntun-setting-none"
  123.               >
  124.                 <form class="tuntun-setting-form">
  125.                   <div class="tuntun-setting-input">
  126.                     <div>分区名称:</div>
  127.                     <input type="text" name="name" />
  128.                   </div>
  129.                   <div class="tuntun-setting-input">
  130.                     <div>分区图片:</div>
  131.                     <input type="text" name="picUrl" />
  132.                   </div>
  133.                   <div class="tuntun-setting-input">
  134.                     <div>图片圆角:</div>
  135.                     <input class="tuntun-setting-imgRadius" type="range" min="0" max="50"/>
  136.                   </div>
  137.                   <div class="tuntun-setting-input">
  138.                     <div>时间范围:</div>
  139.                     <select name="timeRange" id="">
  140.                       <option value="7">一周之内</option>
  141.                       <option value="30" selected>一月之内</option>
  142.                       <option value="90">三个月之内</option>
  143.                       <option value="0">不限时间</option>
  144.                     </select>
  145.                   </div>
  146.                   <input class="tuntun-setting-btn" type="submit" value="确认" />
  147.                 </form>
  148.               </div>
  149.             </div>
  150.             <button id="refreshVideo" class="primary-btn roll-btn">
  151.               <svg style="transform: rotate(0deg)">
  152.                 <use xlink:href="#widget-roll"></use></svg><span>换一换</span></button
  153.             >
  154.             <a
  155.               class="primary-btn see-more tuntun-see-more"
  156.               href="https://search.bilibili.com/all?keyword=${videoKey}"
  157.               target="_blank"
  158.               ><span>查看更多</span><svg><use xlink:href="#widget-arrow"></use></svg></a>
  159.           </div>
  160.         </div>
  161.         <div class="video-card-body">
  162.         </div>
  163.       </div>
  164.       <aside>
  165.         <div class="aside-wrap">
  166.           <div class="aside-head">
  167.             <div class="area-header">
  168.               <div class="left">
  169.                 <!----><!----><a
  170.                   class="title rank-title"
  171.                   href="https://www.bilibili.com/v/virtual"
  172.                   target="_blank"
  173.                 ><span>排行榜</span></a>
  174.               </div>
  175.               <div class="right">
  176.                 <a
  177.                   class="primary-btn see-more"
  178.                   href="https://www.bilibili.com/v/virtual"
  179.                   target="_blank"
  180.                   ><span>更多</span><svg><use xlink:href="#widget-arrow"></use></svg></a>
  181.               </div>
  182.             </div>
  183.           </div>
  184.         </div>
  185.       </aside>
  186.     </section>
  187.     `;
  188.   };
  189.  
  190.   let asideBody = `
  191.   <div class="aside-body">
  192.           <div class="aside-core">
  193.             <div class="bili-rank-list-video bili-rank-list-video__grid">
  194.               <ul class="bili-rank-list-video__list video-rank-list">
  195.                 <li class="bili-rank-list-video__item">
  196.                   <div class="bili-rank-list-video__item--wrap">
  197.                     <span class="bili-rank-list-video__item--index" data-index="1"
  198.                       >1</span
  199.                     ><a
  200.                       href="//www.bilibili.com/video/BV1Hi4y1R7gy"
  201.                       class="rank-video-card"
  202.                       target="_blank"
  203.                       data-mod="partition_rank"
  204.                       data-idx="content"
  205.                       data-ext="click"
  206.                       ><div class="rank-video-card__image">
  207.                         <picture class="v-img rank-video-card__cover"
  208.                           ><!---->
  209.                           <source
  210.                             srcset="
  211.                               //i2.hdslb.com/bfs/archive/c92ce434742fb724af5577de2485a1eaff8aa226.jpg@192w_108h_1c_100q.webp
  212.                             "
  213.                             type="image/webp" />
  214.                           <img
  215.                             src="//i2.hdslb.com/bfs/archive/c92ce434742fb724af5577de2485a1eaff8aa226.jpg@192w_108h_1c_100q"
  216.                             alt="B站以前的LV6 VS 现在的LV6 2.0"
  217.                             loading="lazy"
  218.                             onload=""
  219.                         /></picture>
  220.                       </div>
  221.                       <div class="rank-video-card__info">
  222.                         <h3
  223.                           class="rank-video-card__info--tit"
  224.                           title="B站以前的LV6 VS 现在的LV6 2.0"
  225.                         >
  226.                           B站以前的LV6 VS 现在的LV6 2.0
  227.                         </h3>
  228.                       </div></a
  229.                     >
  230.                   </div>
  231.                 </li>
  232.                 <li class="bili-rank-list-video__item">
  233.                   <div class="bili-rank-list-video__item--wrap">
  234.                     <span class="bili-rank-list-video__item--index" data-index="2"
  235.                       >2</span
  236.                     ><a
  237.                       href="//www.bilibili.com/video/BV1Rb4y1Y7Pw"
  238.                       class="rank-video-card rank-video-card__concise"
  239.                       target="_blank"
  240.                       data-mod="partition_rank"
  241.                       data-idx="content"
  242.                       data-ext="click"
  243.                       ><!---->
  244.                       <div class="rank-video-card__info">
  245.                         <h3
  246.                           class="rank-video-card__info--tit"
  247.                           title="【自制动画】《鬼灭之刃》无限城篇（香奈乎单挑童磨 片段）"
  248.                         >
  249.                           【自制动画】《鬼灭之刃》无限城篇（香奈乎单挑童磨 片段）
  250.                         </h3>
  251.                       </div></a
  252.                     >
  253.                   </div>
  254.                 </li>
  255.                 <li class="bili-rank-list-video__item">
  256.                   <div class="bili-rank-list-video__item--wrap">
  257.                     <span class="bili-rank-list-video__item--index" data-index="3"
  258.                       >3</span
  259.                     ><a
  260.                       href="//www.bilibili.com/video/BV1Z44y177Wt"
  261.                       class="rank-video-card rank-video-card__concise"
  262.                       target="_blank"
  263.                       data-mod="partition_rank"
  264.                       data-idx="content"
  265.                       data-ext="click"
  266.                       ><!---->
  267.                       <div class="rank-video-card__info">
  268.                         <h3
  269.                           class="rank-video-card__info--tit"
  270.                           title="小伙买了80个模型，爆肝一周，只为在家建造一个迷你世界"
  271.                         >
  272.                           小伙买了80个模型，爆肝一周，只为在家建造一个迷你世界
  273.                         </h3>
  274.                       </div></a
  275.                     >
  276.                   </div>
  277.                 </li>
  278.                 <li class="bili-rank-list-video__item">
  279.                   <div class="bili-rank-list-video__item--wrap">
  280.                     <span class="bili-rank-list-video__item--index" data-index="4"
  281.                       >4</span
  282.                     ><a
  283.                       href="//www.bilibili.com/video/BV1mi4y1R7rT"
  284.                       class="rank-video-card rank-video-card__concise"
  285.                       target="_blank"
  286.                       data-mod="partition_rank"
  287.                       data-idx="content"
  288.                       data-ext="click"
  289.                       ><!---->
  290.                       <div class="rank-video-card__info">
  291.                         <h3
  292.                           class="rank-video-card__info--tit"
  293.                           title="准备好了么？来点刺激的！！！【嘉然】"
  294.                         >
  295.                           准备好了么？来点刺激的！！！【嘉然】
  296.                         </h3>
  297.                       </div></a
  298.                     >
  299.                   </div>
  300.                 </li>
  301.                 <li class="bili-rank-list-video__item">
  302.                   <div class="bili-rank-list-video__item--wrap">
  303.                     <span class="bili-rank-list-video__item--index" data-index="5"
  304.                       >5</span
  305.                     ><a
  306.                       href="//www.bilibili.com/video/BV1VD4y1c788"
  307.                       class="rank-video-card rank-video-card__concise"
  308.                       target="_blank"
  309.                       data-mod="partition_rank"
  310.                       data-idx="content"
  311.                       data-ext="click"
  312.                       ><!---->
  313.                       <div class="rank-video-card__info">
  314.                         <h3
  315.                           class="rank-video-card__info--tit"
  316.                           title="顶上海鲜战争12分钟总集篇"
  317.                         >
  318.                           顶上海鲜战争12分钟总集篇
  319.                         </h3>
  320.                       </div></a
  321.                     >
  322.                   </div>
  323.                   <!---->
  324.                 </li>
  325.                 <li class="bili-rank-list-video__item">
  326.                   <div class="bili-rank-list-video__item--wrap">
  327.                     <span class="bili-rank-list-video__item--index" data-index="6"
  328.                       >6</span
  329.                     ><a
  330.                       href="//www.bilibili.com/video/BV14r4y1S71X"
  331.                       class="rank-video-card rank-video-card__concise"
  332.                       target="_blank"
  333.                       data-mod="partition_rank"
  334.                       data-idx="content"
  335.                       data-ext="click"
  336.                       ><!---->
  337.                       <div class="rank-video-card__info">
  338.                         <h3
  339.                           class="rank-video-card__info--tit"
  340.                           title="【原神手书】荒泷一斗 【Misfit Lunatic】"
  341.                         >
  342.                           【原神手书】荒泷一斗 【Misfit Lunatic】
  343.                         </h3>
  344.                       </div></a
  345.                     >
  346.                   </div>
  347.                   <!---->
  348.                 </li>
  349.                 <li class="bili-rank-list-video__item">
  350.                   <div class="bili-rank-list-video__item--wrap">
  351.                     <span class="bili-rank-list-video__item--index" data-index="7"
  352.                       >7</span
  353.                     ><a
  354.                       href="//www.bilibili.com/video/BV1jL411L7Vm"
  355.                       class="rank-video-card rank-video-card__concise"
  356.                       target="_blank"
  357.                       data-mod="partition_rank"
  358.                       data-idx="content"
  359.                       data-ext="click"
  360.                       ><!---->
  361.                       <div class="rank-video-card__info">
  362.                         <h3
  363.                           class="rank-video-card__info--tit"
  364.                           title="【平成三萌】摇起来迎接2022~~~~~~"
  365.                         >
  366.                           【平成三萌】摇起来迎接2022~~~~~~
  367.                         </h3>
  368.                       </div></a
  369.                     >
  370.                   </div>
  371.                   <!---->
  372.                 </li>
  373.                 <li class="bili-rank-list-video__item">
  374.                   <div class="bili-rank-list-video__item--wrap">
  375.                     <span class="bili-rank-list-video__item--index" data-index="8"
  376.                       >8</span
  377.                     ><a
  378.                       href="//www.bilibili.com/video/BV1tY411p7G5"
  379.                       class="rank-video-card rank-video-card__concise"
  380.                       target="_blank"
  381.                       data-mod="partition_rank"
  382.                       data-idx="content"
  383.                       data-ext="click"
  384.                       ><!---->
  385.                       <div class="rank-video-card__info">
  386.                         <h3
  387.                           class="rank-video-card__info--tit"
  388.                           title="你瞧瞧现在哪儿有萌新啊"
  389.                         >
  390.                           你瞧瞧现在哪儿有萌新啊
  391.                         </h3>
  392.                       </div></a
  393.                     >
  394.                   </div>
  395.                   <!---->
  396.                 </li>
  397.                 <li class="bili-rank-list-video__item">
  398.                   <div class="bili-rank-list-video__item--wrap">
  399.                     <span class="bili-rank-list-video__item--index" data-index="9"
  400.                       >9</span
  401.                     ><a
  402.                       href="//www.bilibili.com/video/BV1ji4y1R7LL"
  403.                       class="rank-video-card rank-video-card__concise"
  404.                       target="_blank"
  405.                       data-mod="partition_rank"
  406.                       data-idx="content"
  407.                       data-ext="click"
  408.                       ><!---->
  409.                       <div class="rank-video-card__info">
  410.                         <h3
  411.                           class="rank-video-card__info--tit"
  412.                           title="女生想让男朋友知道的事有哪些？"
  413.                         >
  414.                           女生想让男朋友知道的事有哪些？
  415.                         </h3>
  416.                       </div></a
  417.                     >
  418.                   </div>
  419.                   <!---->
  420.                 </li>
  421.                 <li class="bili-rank-list-video__item">
  422.                   <div class="bili-rank-list-video__item--wrap">
  423.                     <span
  424.                       class="bili-rank-list-video__item--index"
  425.                       data-index="10"
  426.                       >10</span
  427.                     ><a
  428.                       href="//www.bilibili.com/video/BV12L4y1E7G2"
  429.                       class="rank-video-card rank-video-card__concise"
  430.                       target="_blank"
  431.                       data-mod="partition_rank"
  432.                       data-idx="content"
  433.                       data-ext="click"
  434.                       ><!---->
  435.                       <div class="rank-video-card__info">
  436.                         <h3
  437.                           class="rank-video-card__info--tit"
  438.                           title="看到朋友脱单我比si了还难受"
  439.                         >
  440.                           看到朋友脱单我比si了还难受
  441.                         </h3>
  442.                       </div></a
  443.                     >
  444.                   </div>
  445.                   <!---->
  446.                 </li>
  447.               </ul>
  448.             </div>
  449.             <!----><!---->
  450.           </div>
  451.     </div>`
  452.  
  453.   const Tool = {
  454.     // 大数转万
  455.     formatBigNumber: (num) => {
  456.       return num > 10000 ? `${(num / 10000).toFixed(2)}万` : num
  457.     },
  458.     // 字符串转DOM
  459.     s2d: (string) => {
  460.       return new DOMParser().parseFromString(string, 'text/html').body
  461.         .childNodes[0]
  462.     },
  463.     // 发布时间格式化
  464.     diffTime: (time) => {
  465.       let upDate = new Date(parseInt(time, 10) * 1000);
  466.       let nowDate = new Date();
  467.       let nowTime = nowDate.getTime(),
  468.           upTime = upDate.getTime(),
  469.           Day = 24 * 60 * 60 * 1000,
  470.           Hours = 60 * 60 * 1000,
  471.           Minutes = 60 * 1000,
  472.           diffDay = parseInt((nowTime - upTime) / Day),
  473.           diffHours = parseInt((nowTime - upTime) / Hours),
  474.           diffMinutes = Math.floor((nowTime - upTime) / Minutes);
  475.       if(diffDay != 0 && diffDay < 7) {
  476.         if ( diffDay === 1 ) {
  477.           return '昨天'
  478.         }
  479.         return diffDay + '天前';
  480.       }
  481.       else if(diffDay === 0 && diffHours != 0) {
  482.         return diffHours + '小时前';
  483.       }
  484.       else if(diffDay === 0 && diffHours === 0 && diffMinutes != 0) {
  485.         return diffMinutes + '分钟前';
  486.       }
  487.       else if (diffDay === 0 && diffHours === 0 && diffMinutes === 0) {
  488.         return '刚刚';
  489.       }
  490.       else {
  491.         let month = upDate.getMonth() + 1;
  492.         let day = upDate.getDate();
  493.         if (nowDate.getFullYear() !== upDate.getFullYear()) {
  494.           return `${upDate.getFullYear()}-${month < 10 ? 0 : ''}${month}-${day < 10 ? 0 : ''}${day}`
  495.         }
  496.         return `${month < 10 ? 0 : ''}${month}-${day < 10 ? 0 : ''}${day}`
  497.       }    
  498.     },
  499.     // 判断发布时间与现在时间是否过长
  500.     isTimeTooLate: (time, rangeDay = 30) => {
  501.       let day = parseInt(rangeDay, 10);
  502.       if (day === 0) {
  503.         return false;
  504.       }
  505.       let upData = new Date(parseInt(time, 10) * 1000);
  506.       let nowTime = new Date().getTime(),
  507.           upTime = upData.getTime(),
  508.           Day = 24 * 60 * 60 * 1000,
  509.           diffDay = parseInt((nowTime - upTime) / Day);
  510.       if (diffDay > day) {
  511.         return true;
  512.       }
  513.       return false;
  514.     }
  515.   }
  516.  
  517.   const API = {
  518.     // 封装get方法
  519.     Get: async (props) => {
  520.       const { url: baseUrl, params = {} } = props;
  521.       let pStr = Object.keys(params).map((key) => {
  522.         return `${key}=${params[key]}`;
  523.       }).join('&');
  524.       let url = `${baseUrl}?${pStr}`;
  525.       try {
  526.         let res = await fetch(url, {
  527.           credentials: "include"
  528.         });
  529.         return (await res.json()).data;
  530.       } catch (error) {
  531.         console.error('Get Error', error);
  532.       }
  533.     },
  534.     // 通过关键词获取视频数据
  535.     getVideo: async (keyWord, page = 1) => {
  536.       try {
  537.         let res = await API.Get({
  538.           url: 'https://api.bilibili.com/x/web-interface/search/type',
  539.           params: {
  540.             search_type: 'video',
  541.             keyword: keyWord,
  542.             page: page,
  543.           }
  544.         });
  545.         return res.result;
  546.       } catch (error) {
  547.         console.log('getVideo', error);
  548.       }
  549.     },
  550.   }
  551.   
  552.   let videoList = [];
  553.   let page = 1;
  554.   let searchPage = 1;
  555.   let bvList = [];
  556.   let pageSize = 10;
  557.   let videoKey = GM_getValue('videoKey', 'A-soul');
  558.   let rangeDay = GM_getValue('rangeDay', '30');
  559.   let imgBorderRadius = GM_getValue('imgBorderRadius', '15');
  560.   let defaultImgUrl = 'https://i2.hdslb.com/bfs/face/48d65a10a2c643dddc4a51e0a60fae892393417a.jpg';
  561.   let imgUrl = GM_getValue('imgUrl', defaultImgUrl);
  562.  
  563.   // 获取数据并渲染
  564.   const getVideoCardTemplete = (data) => {
  565.     let videoCardBody = document.querySelector('.video-card-body');
  566.     videoCardBody.innerHTML = '';
  567.     data.forEach((item, index) => {
  568.       if (index < pageSize) {
  569.         const {
  570.           bvid, pic, mid,
  571.           upic, author, play,
  572.           like, duration, pubdate } = item;
  573.         let title = item.title.replace(/<em class="keyword">(.*?)<\/em>/g, '$1');
  574.         let domStr = `
  575.         <div class="bili-video-card">
  576.           <div class="bili-video-card__skeleton hide">
  577.             <div class="bili-video-card__skeleton--cover"></div>
  578.             <div class="bili-video-card__skeleton--info">
  579.               <div class="bili-video-card__skeleton--face"></div>
  580.               <div class="bili-video-card__skeleton--right">
  581.                 <p class="bili-video-card__skeleton--text"></p>
  582.                 <p class="bili-video-card__skeleton--text short"></p>
  583.                 <p class="bili-video-card__skeleton--light"></p>
  584.               </div>
  585.             </div>
  586.           </div>
  587.           <div class="bili-video-card__wrap __scale-wrap">
  588.             <a
  589.               href="//www.bilibili.com/video/${bvid}"
  590.               target="_blank"
  591.               data-mod="partition_recommend"
  592.               data-idx="content"
  593.               data-ext="click"
  594.               ><div class="bili-video-card__image __scale-player-wrap">
  595.                 <div class="bili-video-card__image--wrap">
  596.                   <div class="bili-watch-later" style="display: none">
  597.                     <svg class="bili-watch-later__icon">
  598.                       <use xlink:href="#widget-watch-later"></use></svg><span
  599.                       class="bili-watch-later__tip"
  600.                       style="display: none"
  601.                     ></span>
  602.                   </div>
  603.                   <picture class="v-img bili-video-card__cover"
  604.                     ><!---->
  605.                     <source
  606.                       srcset="
  607.                         ${pic}@672w_378h_1c_100q.webp
  608.                       "
  609.                       type="image/webp" />
  610.                     <img
  611.                       src="${pic}@672w_378h_1c_100q"
  612.                       alt="${title}"
  613.                       loading="lazy"
  614.                       onload=""
  615.                   /></picture>
  616.                   <div class="v-inline-player"></div>
  617.                 </div>
  618.                 <div class="bili-video-card__mask">
  619.                   <div class="bili-video-card__stats">
  620.                     <div class="bili-video-card__stats--left">
  621.                       <span class="bili-video-card__stats--item"
  622.                         ><svg class="bili-video-card__stats--icon">
  623.                           <use xlink:href="#widget-play-count"></use></svg><span class="bili-video-card__stats--text"
  624.                           >${Tool.formatBigNumber(play)}</span
  625.                         ></span
  626.                       ><span class="bili-video-card__stats--item"
  627.                         ><svg class="bili-video-card__stats--icon">
  628.                           <use xlink:href="#widget-agree"></use></svg><span class="bili-video-card__stats--text"
  629.                           >${Tool.formatBigNumber(like)}</span
  630.                         ></span
  631.                       >
  632.                     </div>
  633.                     <span class="bili-video-card__stats__duration">${duration}</span>
  634.                   </div>
  635.                 </div>
  636.               </div></a
  637.             >
  638.             <div class="bili-video-card__info __scale-disable">
  639.               <a
  640.                 href="//space.bilibili.com/${mid}"
  641.                 target="_blank"
  642.                 data-mod="partition_recommend"
  643.                 data-idx="content"
  644.                 data-ext="click"
  645.                 ><div class="v-avatar bili-video-card__avatar">
  646.                   <picture class="v-img v-avatar__face"
  647.                     ><!---->
  648.                     <source
  649.                       srcset="
  650.                         ${upic.substr(5)}@72w_72h.webp
  651.                       "
  652.                       type="image/webp" />
  653.                     <img
  654.                       src="${upic.substr(5)}@72w_72h"
  655.                       alt="${author}"
  656.                       loading="lazy"
  657.                       onload="" /></picture
  658.                   ><!---->
  659.                 </div></a
  660.               >
  661.               <div class="bili-video-card__info--right">
  662.                 <a
  663.                   href="//www.bilibili.com/video/${bvid}"
  664.                   target="_blank"
  665.                   data-mod="partition_recommend"
  666.                   data-idx="content"
  667.                   data-ext="click"
  668.                   ><h3
  669.                     class="bili-video-card__info--tit"
  670.                     title="${title}"
  671.                   >
  672.                     ${title}
  673.                   </h3></a
  674.                 >
  675.                 <p class="bili-video-card__info--bottom">
  676.                   <a
  677.                     class="bili-video-card__info--owner"
  678.                     href="//space.bilibili.com/${mid}"
  679.                     target="_blank"
  680.                     data-mod="partition_recommend"
  681.                     data-idx="content"
  682.                     data-ext="click"
  683.                     ><span class="bili-video-card__info--author">${author}</span
  684.                     ><span class="bili-video-card__info--date"
  685.                       >· ${Tool.diffTime(pubdate)}</span
  686.                     ></a
  687.                   >
  688.                 </p>
  689.               </div>
  690.             </div>
  691.           </div>
  692.         </div>
  693.         `;
  694.         videoCardBody.appendChild(Tool.s2d(domStr));
  695.       }
  696.     });
  697.   };
  698.  
  699.   // 更新视频
  700.   const refreshVideo = async () => {
  701.     let firstVideoIndex = (page - 1) * pageSize;
  702.     let lastVideoIndex = firstVideoIndex + pageSize - 1;
  703.     while(videoList.length < lastVideoIndex + 1) {
  704.       let data = await API.getVideo(videoKey, searchPage);
  705.       data.forEach((item) => {
  706.         if (!Tool.isTimeTooLate(item.pubdate, rangeDay)) {
  707.           if (bvList.indexOf(item.bvid) === -1) {
  708.             videoList.push(item);
  709.             bvList.push(item.bvid);
  710.           }
  711.         }
  712.       });
  713.       searchPage++;
  714.     };
  715.     page++;
  716.     let applyData = videoList.slice(firstVideoIndex, lastVideoIndex + 1)
  717.     getVideoCardTemplete(applyData);
  718.   };
  719.  
  720.   // 填入框架
  721.   let main = document.querySelector('.bili-layout');
  722.   let gridAll = document.querySelectorAll('.bili-grid');
  723.   let templete = getTemplete(videoKey, imgUrl);
  724.   main.insertBefore(Tool.s2d(templete), gridAll[2]);
  725.  
  726.   // 第一次获取数据并渲染
  727.   const applyFirstData = async () => {
  728.     refreshVideo();
  729.   };
  730.   applyFirstData();
  731.   // 换一换按钮添加更新视频事件
  732.   let refreshVideoBtn = document.querySelector('#refreshVideo');
  733.   refreshVideoBtn.addEventListener('click', refreshVideo);
  734.  
  735.   let aside = document.querySelector('.aside-wrap');
  736.   // popover
  737.   const showpopover = (x, y) => {
  738.     return `
  739.     <div id="asoul-popover" style="position: absolute; z-index: 2000;  top: ${y}px; left: ${x}px;">
  740.       <div class="v-popover is-top" style="padding-bottom: 0px; margin-left: 0px; pointer-events: none;">
  741.         <div class="v-popover-content bili-rank-list-video">
  742.           <div class="rank-video-card__popover">
  743.             <div class="rank-video-card__popover--top">
  744.               <div class="rank-video-card__image rank-video-card__popover--image">
  745.                 <picture class="v-img rank-video-card__cover rank-video-card__popover--cover">
  746.                   <!---->
  747.                   <source srcset="//i1.hdslb.com/bfs/archive/6ac4c468f90987ecd2a51f1753f7d043560ac271.jpg@192w_108h.webp"
  748.                     type="image/webp"><img
  749.                     src="//i1.hdslb.com/bfs/archive/6ac4c468f90987ecd2a51f1753f7d043560ac271.jpg@192w_108h"
  750.                     alt="小伙买了80个模型，爆肝一周，只为在家建造一个迷你世界" loading="lazy" onload="">
  751.                 </picture>
  752.               </div>
  753.               <div class="rank-video-card__info rank-video-card__popover--info">
  754.                 <h3 class="rank-video-card__popover--tit" title="小伙买了80个模型，爆肝一周，只为在家建造一个迷你世界">小伙买了80个模型，爆肝一周，只为在家建造一个迷你世界
  755.                 </h3>
  756.                 <p class="rank-video-card__popover--author"><span>拜托了小翔哥</span><span> · 12-29</span></p>
  757.               </div>
  758.             </div>
  759.             <ul class="rank-video-card__popover--stats">
  760.               <li class="rank-video-card__popover--stats__item"><svg class="rank-video-card__popover--icon">
  761.                   <use xlink:href="#widget-play-count"></use>
  762.                 </svg><span>93万</span></li>
  763.               <li class="rank-video-card__popover--stats__item"><svg class="rank-video-card__popover--icon">
  764.                   <use xlink:href="#widget-danmaku"></use>
  765.                 </svg><span>3931</span></li>
  766.               <li class="rank-video-card__popover--stats__item"><svg class="rank-video-card__popover--icon">
  767.                   <use xlink:href="#widget-favorite"></use>
  768.                 </svg><span>1.3万</span></li>
  769.               <li class="rank-video-card__popover--stats__item"><svg class="rank-video-card__popover--icon">
  770.                   <use xlink:href="#widget-coin"></use>
  771.                 </svg><span>7.6万</span></li>
  772.             </ul>
  773.           </div>
  774.         </div>
  775.       </div>
  776.     </div>
  777.     `
  778.   }
  779.  
  780.   // 侧边
  781.   aside.append(Tool.s2d(asideBody));
  782.  
  783.   let setting = document.querySelector('#tuntun-setting');
  784.   let settingBtn = setting.children[0];
  785.   let settingPop = setting.children[1];
  786.   let settingForm = settingPop.children[0];
  787.   let partNameInput = settingForm.children[0].children[1];
  788.   let partImgUrlInput = settingForm.children[1].children[1];
  789.   let partImgDom = document.querySelector('.tuntun-part-img');
  790.   console.dir(partImgDom);
  791.   partImgDom.style.borderRadius = `${imgBorderRadius}%`;
  792.   let radiusRangeInput = document.querySelector('.tuntun-setting-imgRadius');
  793.   let partTimeRangeInput = settingForm.children[3].children[1];
  794.  
  795.   // 设置按钮点击事件
  796.   settingBtn.addEventListener('click', () => {
  797.     if (settingPop.className === 'tuntun-setting-popover tuntun-setting-none') {
  798.       settingPop.className = 'tuntun-setting-popover';
  799.     } else {
  800.       settingPop.className = 'tuntun-setting-popover tuntun-setting-none';
  801.     }
  802.     partNameInput.value = videoKey;
  803.     partImgUrlInput.value = imgUrl;
  804.     partTimeRangeInput.value = rangeDay;
  805.     radiusRangeInput.value = imgBorderRadius;
  806.     partImgDom.style.borderRadius = `${imgBorderRadius}%`;
  807.   });
  808.  
  809.   // videoKey改变
  810.   const videoKeyChange = (newKey) => {
  811.     let seeMoreBtn = document.querySelector('.tuntun-see-more');
  812.     let headerLeft = document.querySelector('.tuntun-part-left');
  813.     videoKey = newKey;
  814.     videoList = [];
  815.     page = 1;
  816.     searchPage = 1;
  817.     bvList = [];
  818.     GM_setValue('videoKey', newKey);
  819.     seeMoreBtn.href = `https://search.bilibili.com/all?keyword=${newKey}`;
  820.     headerLeft.children[2].href = `https://search.bilibili.com/all?keyword=${newKey}`;
  821.     headerLeft.children[2].children[0].innerHTML = `${newKey}分区`;
  822.     refreshVideo();
  823.   }
  824.  
  825.   // imgUrl改变
  826.   const imgUrlChange = (newUrl) => {
  827.     let partImgDom = document.querySelector('.tuntun-part-img');
  828.     imgUrl = newUrl;
  829.     GM_setValue('imgUrl', newUrl);
  830.     partImgDom.src = newUrl;
  831.   }
  832.  
  833.   // 设置img的圆角
  834.   radiusRangeInput.addEventListener('change', () => {
  835.     partImgDom.style.borderRadius = `${radiusRangeInput.value}%`;
  836.   });
  837.   const imgBorderRadiusChange = (newRadiusNum) => {
  838.     imgBorderRadius = newRadiusNum;
  839.     GM_setValue('imgBorderRadius', newRadiusNum);
  840.   }
  841.  
  842.   // 时间范围改变
  843.   const timeRangeChange = (timeRange) => {
  844.     rangeDay = timeRange;
  845.     videoList = [];
  846.     page = 1;
  847.     searchPage = 1;
  848.     bvList = [];
  849.     GM_setValue('rangeDay', timeRange);
  850.     refreshVideo();
  851.   }
  852.  
  853.   // 设置表单确认
  854.   settingForm.addEventListener('submit', (e) => {
  855.     e.preventDefault();
  856.     if (partNameInput.value !== videoKey) {
  857.       videoKeyChange(partNameInput.value);
  858.     }
  859.     if (partImgUrlInput.value !== imgUrl) {
  860.       imgUrlChange(partImgUrlInput.value);
  861.     }
  862.     if (radiusRangeInput.value !== imgBorderRadius) {
  863.       imgBorderRadiusChange(radiusRangeInput.value);
  864.     }
  865.     if (partTimeRangeInput.value !== rangeDay) {
  866.       timeRangeChange(partTimeRangeInput.value);
  867.     }
  868.     settingPop.className = 'tuntun-setting-popover tuntun-setting-none';
  869.   });
  870.  
  871.  
  872.   // settingBtn.addEventListener('')
  873.  
  874.   // 鼠标移入
  875.   // aside.addEventListener('mousemove', (e) => {
  876.   //   if (e.target.className === 'bili-rank-list-video__item--wrap') {
  877.       
  878.   //   }
  879.   //   let option = e.target.getBoundingClientRect();
  880.   // })
  881.   // aside.addEventListener('mouseleave', () => {
  882.   //   document.body.removeChild(document.querySelector('#asoul-popover'));
  883.   // })
  884. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址