// ==UserScript==
// @name         b站视频触控板翻转
// @namespace    http://zhangmaimai.com/
// @version      0.3
// @description  优化b站视频在触控板上的体验，触控板上的上下滑动是与鼠标滚轮翻转的，使用此脚本后当你在b站视频全屏时向下滑动将减少音量（默认为增大）
// @author       maxchang3
// @match        https://www.bilibili.com/video/*
// @icon         https://www.bilibili.com/favicon.ico
// @grant        none
// @downloadURL none
// ==/UserScript==
// Hinter Codes copy and revision from //https://github.com/jeayu/bilibili-quickdo

'use strict';
let hintTimer = null;
let volumeHint = document.querySelectorAll('.bilibili-player-volumeHint')[0];

function initHinter(){
    volumeHint = document.querySelectorAll('.bilibili-player-volumeHint')[0];
    if((volumeHint))return false;
    let hintHTML =`
     <div class="bilibili-player-volumeHint"  style="opacity: 0; display: none;transition:opacity 1s;">
            <span class="bilibili-player-volumeHint-icon">
                <i class="bilibili-player-iconfont bilibili-player-iconfont-volume icon-24soundsmall"></i>
                <i class="bilibili-player-iconfont bilibili-player-iconfont-volume-max icon-24soundlarge"></i>
                <i class="bilibili-player-iconfont bilibili-player-iconfont-volume-min icon-24soundoff"></i>
            </span>
            <span class="bilibili-player-volumeHint-text" id="custom-hint-text">1%</span>
       </div>
    `
    document.querySelector('.bilibili-player-video-wrap').insertAdjacentHTML('beforeend',hintHTML);
    volumeHint = document.querySelectorAll('.bilibili-player-volumeHint')[0];
}

function showHinter(val){
    initHinter();
    clearTimeout(hintTimer);
    volumeHint.style.opacity = 1;
    volumeHint.style.display = 'block';
    document.querySelectorAll('.bilibili-player-volumeHint-text')[0].innerText= val + '%';
    hintTimer = setTimeout(() => {
       volumeHint.style.opacity = 0;
       volumeHint.style.display = 'none';
    }, 500);

}

function handler(e) {
  //阻止默认事件
  e.stopImmediatePropagation();
  e.stopPropagation();
  // 同时接管触控板与鼠标滚轮出发下的提醒，从而避免提醒重复显示的情况，因此对于鼠标触发的值需要额外放大魔数以计算增长音量与wheelDeltaY的关系。
  // 触控板下wheelDeltaY更为精准因此明显小于鼠标，这里以100为阈值。经过测试（罗技MX Anywhere2s下）鼠标最低约在240或360左右，这里为了防止硬件差异选择100。
  // 灵感来自：https://stackoverflow.com/questions/10744645/detect-touchpad-vs-mouse-in-javascript 在这里不需要过于精准的判断，基本够用。
  let isTrackpad = (e.wheelDeltaY && Math.abs(e.wheelDeltaY) < 100);
  let isFullscreen = (Array.from(document.querySelector('body').classList)).includes("player-fullscreen-fix");
  let flag = -1; // Trackpad值转为1与-1，在触控板与鼠标情况下进行加减的逆转。
  let MAGIC_NUMBER = 36000;
  if(isTrackpad && isFullscreen) {flag = 1;MAGIC_NUMBER/=72; };
  let player = document.querySelector(".bilibili-player-video").firstChild;
  let newVolume = player.volume - flag*e.wheelDeltaY/MAGIC_NUMBER;
  newVolume = (newVolume<1)?Math.max(newVolume,0):1; // 小于0取0，大于1取1
  player.volume = newVolume;
  //修改音量条、数字
  document.querySelector('div.bilibili-player-video-volumebar.bui.bui-slider > div > div.bui-bar-wrap > div').style.transform = `scaleY(${newVolume.toFixed(2)})`;
  document.querySelector('div.bilibili-player-video-volumebar .bui-thumb').style.transform = `translateY(${-48*player.volume}px)`;
  document.querySelector('.bilibili-player-video-volume-num').innerText = Math.ceil(newVolume*100)
  //弹出提醒
  showHinter(Math.ceil(player.volume*100))
}

document.addEventListener("DOMMouseScroll", handler, false);
document.addEventListener("wheel", handler, false);