// ==UserScript==
// @name         B站视频观看总进度
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  给B站多P视频下方添加一个总进度
// @author       汐涌及岸
// @match        https://www.bilibili.com/video/*
// @icon         https://www.bilibili.com/favicon.ico
// @grant        none
// @downloadURL none
// ==/UserScript==

//等待播放器加载完成
let waitPlayerLoad = setInterval(() => { if(!window.player) return; initTotalProgress(); clearInterval(waitPlayerLoad)}, 1000);
//格式化
const HHmmss = second => [Math.floor(second/3600),Math.floor(second/60)%60,second%60].map(n=>n.toString().padStart(2,0)).join(':')
//初始化
async function initTotalProgress() {
  let data =  await fetch('https://api.bilibili.com/x/web-interface/view?bvid='+bvid).then(resp=>resp.json()).then(json=>json.data)
  if (data.pages.length<=1) return
  let total_duration = data.duration
  let multi_duration = data.pages.map(p=>p.duration)
  let p = parseInt(new URLSearchParams(location.search).get('p'))||1
  let before_duration = p>1?multi_duration.slice(0,p-1).reduce((t,d)=>t+d):0
  //嵌入元素
  if(!window.video_watch_progress){
      document.querySelector('.bilibili-player-video-time').insertAdjacentHTML('beforeBegin', `<span id='video_watch_progress' style='color:#eee;padding-left:12px;'></span>`);
  }
  //进度条刷新
  player.addEventListener(bPlayer.events.progressUpdate,()=>{
    let now_duration = parseInt(player.getCurrentTime()) + before_duration
    document.querySelector('#video_watch_progress').innerHTML =
    '<b>总进度</b> ' + HHmmss(now_duration) + ' / ' + HHmmss(total_duration) + '<b>&emsp;百分比</b> ' + (now_duration / total_duration * 100).toFixed(2) + '%'
  })
  //切换分P时重新初始化
  new MutationObserver(initTotalProgress).observe(document.querySelector(".bilibili-player-video"), { attributes: true, childList: true, subtree: true });
}