// ==UserScript==
// @name         b站首页推荐纯享版
// @namespace    http://tampermonkey.net/
// @version      1.3.1
// @description  这是一个清爽版b站首页的脚本，可以使得首页只有首页推荐
// @author       Waflare
// @match        https://www.bilibili.com/
// @icon         https://www.google.com/s2/favicons?domain=bilibili.com
// @grant        GM_addStyle
// @grant        GM_xmlhttpRequest
// @require      https://code.jquery.com/jquery-3.6.0.js
// @license      GPL
// @downloadURL none
// ==/UserScript==

(function() {
  'use strict';
  function getFrontPage() {
    let url = 'https://api.bilibili.com/x/web-interface/index/top/rcmd?fresh_type=3';
    return new Promise((resolve, reject) => {
      GM_xmlhttpRequest({
        method: 'GET',
        url: url,
        onload: (r) => {
          let result = JSON.parse(r.response).data.item;
          resolve(result);
        }
      })
    })
  }

  function getTemplate(item) {
    return `
      <div class='w_item' id='${item.bvid}'>
        <div class='w_img_box'>
          <img src='${item.pic}' />
        </div>
        <div class='w_footer'>
          <div class="w_face">
            <img src='${item.owner.face}' />
          </div>
          <div class='w_detail'>
            <div class='w_title'>${item.title}</div>
            <div class='w_up'>${item.owner.name}</div>
            <div class='w_stat'>
              <div>${formatNum(item.stat.view)}次观看</div>
              <div>${formatNum(item.stat.like)}个点赞</div>
            </div>
          </div>
        </div>
      </div>
    `
  }

  function gotoPage(url) {
    let _url = url;
    return function() {
      console.log(_url);
      window.open(_url, '_blank');
    }
  }

  async function formatData() {
    let data_1 = await getFrontPage();
    let data_2 = await getFrontPage();
    let data = [...data_1, ...data_2];
    console.log(data);
    $('#internationalHeader').after(`
      <div id="w_body">
        <div id="w_content"></div>
      </div>
    `);
    for (let item of data) {
      $('#w_content').append(getTemplate(item));
      $(`#${item.bvid}`).on('click', gotoPage(item.uri));
    }
    $('#w_body').append('<div id="w_btn">顶</div>');
    $('#w_btn').on('click', backTop);
  }

  let timer = null;
  function backTop() {
    cancelAnimationFrame(timer);
    timer = requestAnimationFrame(function fn(){
        var oTop = document.body.scrollTop || document.documentElement.scrollTop;
        if(oTop > 0){
            scrollTo(0,oTop-50);
            timer = requestAnimationFrame(fn);
        }else{
            cancelAnimationFrame(timer);
        }    
    });
  }

  async function moreVideo() {
    let data = await getFrontPage();
    for (let item of data) {
      $('#w_content').append(getTemplate(item));
      $(`#${item.bvid}`).on('click', gotoPage(item.uri));
    }
  }

  formatData();

  function formatNum(num) {
    if (!num) {
      return '0';
    }
    if(num < 10000) {
      return num.toString();
    } else {
      return (num / 10000).toFixed(1).toString() + '万';
    }
  }

  let timeout = null;
  window.onscroll = function() {
    //距离顶部的距离
    var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
    //可视区的高度
    var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
    //滚动条的总高度
    var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
    //滚动条到底部的条件
    if(scrollTop+windowHeight >= scrollHeight - 10){
      timeout && clearTimeout(timeout);
      timeout = setTimeout(() => {
        moreVideo();
      }, 300);
    }

    const back_top = document.getElementById('w_btn');
    if(scrollTop > 20) {
      back_top.style.display = 'block';
    } else {
      back_top.style.display = 'none';
    }
  }

  GM_addStyle(`
    .international-home {
      min-height: 100vh;
    }
    .international-home .storey-box, .international-footer {
      display: none;
    }
    .international-home .first-screen {
      display: none;
    }
    #w_body {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 40px;
    }

    @media screen and (max-width: 1870px) {
      #w_content {
        width: 1414px !important;
      }
      .w_item {
        width: 270px !important;
      }
    }

    @media screen and (max-width: 1654px) {
      #w_content {
        width: 1198px !important;
      }
      .w_item {
        width: 225px !important;
      }
    }

    @media screen and (max-width: 1438px) {
      #w_content {
        width: 999px !important;
      }
      .w_item {
        width: 186px !important;
      }
    }

    #w_content {
      max-width: 1610px;
      display: flex;
      justify-content: flex-start;
      flex-flow: wrap;
    }
    .w_item {
      width: 310px;
      margin-bottom: 10px;
      display: flex;
      flex-direction: column;
      margin-left: 10px;
    }
    .w_item:hover {
      cursor: pointer;
      transform: scale(1.01);
    }
    .w_item > .w_img_box{
      position: relative;
      overflow: hidden;
      padding-top: 62.5%;
      background-image: url('https://i.w3tt.com/2021/12/05/BAH9l.png');
    }
    .w_img_box > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }
    .w_item > .w_detail {
      width: 100%;
    }
    .w_footer {
      display: flex;
    }
    .w_footer > .w_face {
      width: 56px;
      padding: 10px;
      box-size: border-sizing;
    }
    .w_footer > .w_detail {
      flex: 1;
    }
    .w_face > img {
      width: 36px;
      height: 36px;
      border-radius: 50%;
    }
    .w_detail > .w_title {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      font-size: 16px;
      line-height: 22px;
      border-top: 10px solid transparent;
      border-bottom: 5px solid transparent;
    }
    .w_detail > .w_up {
      font-size: 14px;
      color: #606060;
    }
    .w_detail > .w_stat {
      font-size: 12px;
      color: #606060;
      line-height: 18px;
      display: flex;
      justify-content: space-between;
    }
    #w_btn {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      line-height: 50px;
      font-size: 20px;
      text-align: center;
      color: #9999b2;
      font-weight: 600;
      background-color: #f6f9fa;
      position: fixed;
      bottom: 30px;
      right: 30px;
    }
    #w_btn:hover {
      cursor: pointer;
    }
  `)
})();