// ==UserScript==
// @name         bilibili播放视频倍速自定义，可记忆
// @namespace    EsfB2XVPmbThEv39bdxQR2hzid30iMF9
// @version      0.4
// @description  bilibili播放视频倍速自定义，刷新浏览器也不会丢失之前设置的速度
// @author       tomoya
// @include      http*://*bilibili.com/video/*
// @grant        none
// @downloadURL none
// ==/UserScript==

(function () {
  'use strict';

  let style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = "#video_speed_div button { outline: 0; padding: 3px 5px; margin-left: 10px; background-color: #e2e0e0; border: 0; color: #222; cursor: pointer;} .video_speed_div-button-active { border: 0!important; background-color: #00b5e5!important; color: #fff!important; }";
  document.getElementsByTagName('head').item(0).appendChild(style);

  let videoSpeedElement = document.createElement("div");
  videoSpeedElement.setAttribute("id", "video_speed_div");

  let speedArr = [1, 1.25, 1.5, 1.75, 2, 2.5, 3, 3.5, 4, 4.5, 5];

  for (let i = 0; i < speedArr.length; i++) {
    let speed = speedArr[i];
    let btn = document.createElement("button");
    btn.innerHTML = "x" + speed;
    btn.setAttribute("id", "third_video_plugin_btn_" + speed);
    btn.addEventListener("click", changeVideoSpeed);
    videoSpeedElement.appendChild(btn);
  }

  let videoElement = document.querySelector("#playerWrap");
  let videoWidth = videoElement.clientWidth;
  let videoHeight = videoElement.clientHeight;
  let videoOffsetTop = videoElement.offsetTop;
  let videoOffsetLeft = videoElement.offsetLeft;

  videoSpeedElement.style.textAlign = "right";
  videoSpeedElement.style.width = "500px";
  videoSpeedElement.style.height = "30px";
  videoSpeedElement.style.position = "fixed";
  videoSpeedElement.style.top = (videoOffsetTop - 30) + "px";
  videoSpeedElement.style.left = (videoOffsetLeft + videoWidth - 500) + "px";

  let btns = videoSpeedElement.querySelector("button");
  for (let i = 0; i < btns.length; i++) {
    btns[i].style.paddingTop = "3px";
    btns[i].style.paddingBottom = "3px";
    btns[i].style.paddingLeft = "5px";
    btns[i].style.paddingRight = "5px";
    btns[i].style.marginLeft = "10px";
  }

  document.body.appendChild(videoSpeedElement);

  // 加载之间已经设置的速度
  let third_video_plugin_speed = localStorage.getItem("third_video_plugin_speed");
  if (third_video_plugin_speed) {
    for (let i = 0; i < videoSpeedElement.childNodes.length; i++) {
      let btn = videoSpeedElement.childNodes[i];
      if (btn.getAttribute("id") === "third_video_plugin_btn_" + third_video_plugin_speed) {
        btn.click();
      }
    }
    document.getElementById("third_video_plugin_btn_" + third_video_plugin_speed).click();
  }

  function changeVideoSpeed(e) {
    let speed = parseFloat(e.target.innerHTML.replace("x", ""));
    let bilibili_player_settings = JSON.parse(sessionStorage.getItem("bilibili_player_settings"));
    let video_status = bilibili_player_settings.video_status;
    video_status.videospeed = speed;
    bilibili_player_settings.video_status = video_status;
    sessionStorage.setItem("bilibili_player_settings", JSON.stringify(bilibili_player_settings));
    localStorage.setItem("third_video_plugin_speed", speed);
    document.querySelector("video:first-child").playbackRate = speed;
    for (let i = 0; i < videoSpeedElement.childNodes.length; i++) {
      let btn = videoSpeedElement.childNodes[i];
      btn.setAttribute("class", "");
    }
    e.target.setAttribute("class", "video_speed_div-button-active");
  }

})();