// ==UserScript==
// @name         倍速播放
// @namespace    https://greasyfork.org/zh-CN/users/104201-%E9%BB%84%E7%9B%90
// @version      0.2
// @description  HTML5播放器，倍速功能。可以实现最高10倍数播放。不同网站可以设置不同速率和位置
// @author       黄盐
// @include      *:*
// @noframes
// @run-at       document-end
// @grant        GM_getResourceText
// @grant        GM_addStyle
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_registerMenuCommand
// @require      https://cdn.bootcss.com/vue/2.6.6/vue.js
// @require      https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js
// require       file:///D:\soft\github\greasyforks\speedyPlay/speedy.jqMobile.js
// @downloadURL none
// ==/UserScript==
/* jshint esversion: 6 */

/*!Tdrag 0.0.1 这里经过我修改，要恢复为jQuery插件，可以全部替换[Zepto]为[jQuery]即可*/;(function($,window,document,undefined){Zepto(function(){$.fn.Tdrag=function(opt){var call={scope:null,grid:null,axis:"all",pos:false,handle:null,moveClass:"tezml",dragChange:false,changeMode:"point",cbStart:function(){},cbMove:function(){},cbEnd:function(){},random:false,randomInput:null,animation_options:{duration:800,easing:"ease-out"},disable:false,disableInput:null};var dragfn=new Dragfn(this,opt);if(opt&&$.isEmptyObject(opt)==false){dragfn.options=$.extend(call,opt);}else{dragfn.options=call;}
dragfn.firstRandom=true;var ele=dragfn.$element;dragfn.pack(ele,false);if(dragfn.options.randomInput!=null){$(dragfn.options.randomInput).bind("click",function(){dragfn.pack(ele,true);})}
dragfn.loadJqueryfn()};var Dragfn=function(ele,opt){this.$element=ele;this.options=opt;};Dragfn.prototype={init:function(obj){var self=this;self.ele=self.$element;self.handle=$(obj);self.options=self.options;self.disable=self.options.disable;self._start=false;self._move=false;self._end=false;self.disX=0;self.disY=0;self.zIndex=1000;self.moving=false;self.moves="";self.box=$.type(self.options.scope)==="string"?self.options.scope:null;if(self.options.handle!=null){self.handle=$(obj).find(self.options.handle);}
self.handle.on("mousedown",function(ev){self.start(ev,obj);obj.setCapture&&obj.setCapture();return false;});if(self.options.dragChange){$(obj).on("mousemove",function(ev){self.move(ev,obj);});$(obj).on("mouseup",function(ev){self.end(ev,obj);});}else{$(document).on("mousemove",function(ev){self.move(ev,obj);});$(document).on("mouseup",function(ev){self.end(ev,obj);});}},loadJqueryfn:function(){var self=this;$.extend({sortBox:function(obj){var arr=[];for(var s=0;s<$(obj).length;s++){arr.push($(obj).eq(s));}
for(var i=0;i<arr.length;i++){for(var j=i+1;j<arr.length;j++){if(Number(arr[i].attr("index"))>Number(arr[j].attr("index"))){var temp=arr[i];arr[i]=arr[j];arr[j]=temp;}}}
return arr},randomfn:function(obj){self.pack($(obj),true);},disable_open:function(){self.disable=false;},disable_cloose:function(){self.disable=true;}});},toDisable:function(){var self=this;if(self.options.disableInput!=null){$(self.options.disableInput).bind("click",function(){if(self.disable==true){self.disable=false}else{self.disable=true}})}},start:function(ev,obj){var self=this;self.moved=obj;if(self.disable==true){return false}
self._start=true;var oEvent=ev||event;self.disX=oEvent.clientX-obj.offsetLeft;self.disY=oEvent.clientY-obj.offsetTop;$(obj).css("zIndex",self.zIndex++);self.options.cbStart();},move:function(ev,obj){var self=this;if(self._start!=true){return false}
if(obj!=self.moved){return false}
self._move=true;var oEvent=ev||event;var l=oEvent.clientX-self.disX;var t=oEvent.clientY-self.disY;if(self.box!=null){var rule=self.collTestBox(obj,self.box);if(l>rule.lmax){l=rule.lmax;}else if(l<rule.lmin){l=rule.lmin;}
if(t>rule.tmax){t=rule.tmax;}else if(t<rule.tmin){t=rule.tmin;}}
if(self.options.axis=="all"){obj.style.left=self.grid(obj,l,t).left+'px';obj.style.top=self.grid(obj,l,t).top+'px';}else if(self.options.axis=="y"){obj.style.top=self.grid(obj,l,t).top+'px';}else if(self.options.axis=="x"){obj.style.left=self.grid(obj,l,t).left+'px';}
if(self.options.pos==true){self.moveAddClass(obj);}
self.options.cbMove(obj,self);},end:function(ev,obj){var self=this;if(self._start!=true){return false}
if(self.options.changeMode=="sort"&&self.options.pos==true){self.sortDrag(obj);}else if(self.options.changeMode=="point"&&self.options.pos==true){self.pointDrag(obj);}
if(self.options.pos==true){self.animation(obj,self.aPos[$(obj).attr("index")]);}
self.options.cbEnd();if(self.options.handle!=null){$(obj).find(self.options.handle).unbind("onmousemove");$(obj).find(self.options.handle).unbind("onmouseup");}else{$(obj).unbind("onmousemove");$(obj).unbind("onmouseup");}
obj.releaseCapture&&obj.releaseCapture();self._start=false;},collTestBox:function(obj,obj2){var self=this;var l1=0;var t1=0;var l2=$(obj2).innerWidth()-$(obj).outerWidth();var t2=$(obj2).innerHeight()-$(obj).outerHeight();return{lmin:l1,tmin:t1,lmax:l2,tmax:t2}},grid:function(obj,l,t){var self=this;var json={left:l,top:t};if($.isArray(self.options.grid)&&self.options.grid.length==2){var gx=self.options.grid[0];var gy=self.options.grid[1];json.left=Math.floor((l+gx/2)/gx)*gx;json.top=Math.floor((t+gy/2)/gy)*gy;return json}else if(self.options.grid==null){return json}else{console.log("grid参数传递格式错误");return false}},findNearest:function(obj){var self=this;var iMin=new Date().getTime();var iMinIndex=-1;var ele=self.ele;for(var i=0;i<ele.length;i++){if(obj==ele[i]){continue;}
if(self.collTest(obj,ele[i])){var dis=self.getDis(obj,ele[i]);if(dis<iMin){iMin=dis;iMinIndex=i;}}}
if(iMinIndex==-1){return null;}else{return ele[iMinIndex];}},getDis:function(obj,obj2){var self=this;var l1=obj.offsetLeft+obj.offsetWidth/2;var l2=obj2.offsetLeft+obj2.offsetWidth/2;var t1=obj.offsetTop+obj.offsetHeight/2;var t2=obj2.offsetTop+obj2.offsetHeight/2;var a=l2-l1;var b=t1-t2;return Math.sqrt(a*a+b*b);},collTest:function(obj,obj2){var self=this;var l1=obj.offsetLeft;var r1=obj.offsetLeft+obj.offsetWidth;var t1=obj.offsetTop;var b1=obj.offsetTop+obj.offsetHeight;var l2=obj2.offsetLeft;var r2=obj2.offsetLeft+obj2.offsetWidth;var t2=obj2.offsetTop;var b2=obj2.offsetTop+obj2.offsetHeight;if(r1<l2||r2<l1||t2>b1||b2<t1){return false;}else{return true;}},pack:function(ele,click){var self=this;self.toDisable();if(self.options.pos==false){for(var i=0;i<ele.length;i++){$(ele[i]).css("position","absolute");$(ele[i]).css("margin","0");self.init(ele[i]);}}else if(self.options.pos==true){var arr=[];if(self.options.random||click){while(arr.length<ele.length){var n=self.rnd(0,ele.length);if(!self.finInArr(arr,n)){arr.push(n);}}}
if(self.options.random==false||click!=true){var n=0;while(arr.length<ele.length){arr.push(n);n++}}
if(self.firstRandom==false){var sortarr=[];var n=0;while(sortarr.length<ele.length){sortarr.push(n);n++}
for(var i=0;i<ele.length;i++){$(ele[i]).attr("index",sortarr[i]);$(ele[i]).css("left",self.aPos[sortarr[i]].left);$(ele[i]).css("top",self.aPos[sortarr[i]].top);}}
self.aPos=[];if(self.firstRandom==false){for(var j=0;j<ele.length;j++){self.aPos[j]={left:ele[$(ele).eq(j).attr("index")].offsetLeft,top:ele[$(ele).eq(j).attr("index")].offsetTop};}}else{for(var j=0;j<ele.length;j++){self.aPos[j]={left:ele[j].offsetLeft,top:ele[j].offsetTop};}}
for(var i=0;i<ele.length;i++){$(ele[i]).attr("index",arr[i]);$(ele[i]).css("left",self.aPos[arr[i]].left);$(ele[i]).css("top",self.aPos[arr[i]].top);$(ele[i]).css("position","absolute");$(ele[i]).css("margin","0");self.init(ele[i]);}
self.firstRandom=false;}},moveAddClass:function(obj){var self=this;var oNear=self.findNearest(obj);$(self.$element).removeClass(self.options.moveClass);if(oNear&&$(oNear).hasClass(self.options.moveClass)==false){$(oNear).addClass(self.options.moveClass);}},sort:function(){var self=this;var arr_li=[];for(var s=0;s<self.$element.length;s++){arr_li.push(self.$element[s]);}
for(var i=0;i<arr_li.length;i++){for(var j=i+1;j<arr_li.length;j++){if(Number($(arr_li[i]).attr("index"))>Number($(arr_li[j]).attr("index"))){var temp=arr_li[i];arr_li[i]=arr_li[j];arr_li[j]=temp;}}}
return arr_li;},pointDrag:function(obj){var self=this;var oNear=self.findNearest(obj);if(oNear){self.animation(obj,self.aPos[$(oNear).attr("index")]);self.animation(oNear,self.aPos[$(obj).attr("index")]);var tmp;tmp=$(obj).attr("index");$(obj).attr("index",$(oNear).attr("index"));$(oNear).attr("index",tmp);$(oNear).removeClass(self.options.moveClass);}else if(self.options.changeWhen=="end"){self.animation(obj,self.aPos[$(obj).attr("index")]);}},sortDrag:function(obj){var self=this;var arr_li=self.sort();var oNear=self.findNearest(obj);if(oNear){if(Number($(oNear).attr("index"))>Number($(obj).attr("index"))){var obj_tmp=Number($(obj).attr("index"));$(obj).attr("index",Number($(oNear).attr("index"))+1);for(var i=obj_tmp;i<Number($(oNear).attr("index"))+1;i++){self.animation(arr_li[i],self.aPos[i-1]);self.animation(obj,self.aPos[$(oNear).attr("index")]);$(arr_li[i]).removeClass(self.options.moveClass);$(arr_li[i]).attr("index",Number($(arr_li[i]).attr("index"))-1);}}else if(Number($(obj).attr("index"))>Number($(oNear).attr("index"))){var obj_tmp=Number($(obj).attr("index"));$(obj).attr("index",$(oNear).attr("index"));for(var i=Number($(oNear).attr("index"));i<obj_tmp;i++){self.animation(arr_li[i],self.aPos[i+1]);self.animation(obj,self.aPos[Number($(obj).attr("index"))]);$(arr_li[i]).removeClass(self.options.moveClass);$(arr_li[i]).attr("index",Number($(arr_li[i]).attr("index"))+1);}}}else{self.animation(obj,self.aPos[$(obj).attr("index")]);}},animation:function(obj,json){var self=this;var options=self.options.animation_options;var self=this;var count=Math.round(options.duration/30);var start={};var dis={};for(var name in json){start[name]=parseFloat(self.getStyle(obj,name));if(isNaN(start[name])){switch(name){case 'left':start[name]=obj.offsetLeft;break;case 'top':start[name]=obj.offsetTop;break;case 'width':start[name]=obj.offsetWidth;break;case 'height':start[name]=obj.offsetHeight;break;case 'marginLeft':start[name]=obj.offsetLeft;break;case 'borderWidth':start[name]=0;break;}}
dis[name]=json[name]-start[name];}
var n=0;clearInterval(obj.timer);obj.timer=setInterval(function(){n++;for(var name in json){switch(options.easing){case 'linear':var a=n/count;var cur=start[name]+dis[name]*a;break;case 'ease-in':var a=n/count;var cur=start[name]+dis[name]*a*a*a;break;case 'ease-out':var a=1-n/count;var cur=start[name]+dis[name]*(1-a*a*a);break;}
if(name=='opacity'){obj.style.opacity=cur;obj.style.filter='alpha(opacity:'+cur*100+')';}else{obj.style[name]=cur+'px';}}
if(n==count){clearInterval(obj.timer);options.complete&&options.complete();}},30);},getStyle:function(obj,name){return(obj.currentStyle||getComputedStyle(obj,false))[name];},rnd:function(n,m){return parseInt(Math.random()*(m-n)+n);},finInArr:function(arr,n){for(var i=0;i<arr.length;i++){if(arr[i]==n){return true;}}
return false;}}})})(Zepto,window,document);



(function() {
  'use strict';
  // 检测到video元素之后，显示为绿色或者黄色 。鼠标划到模块上面的时候，透明度变为0.平时透明度是0.3左右。
  // 另外一点，刚刚开始的 时候 ，要持续一段时间检测文档的状态。如果一段时间都没有找到Video元素的话。就 把元素 移除。不要占着位置。
  // 又或者，在没有检测 到video元素之前，不要显示功能模块。检测到之后，也就是准备好之后，再显示不迟。
  /**
   * ░░░░░░░░░░░░░░░░░░░░░░░░▄░░
   * ░░░░░░░░░▐█░░░░░░░░░░░▄▀▒▌░
   * ░░░░░░░░▐▀▒█░░░░░░░░▄▀▒▒▒▐
   * ░░░░░░░▐▄▀▒▒▀▀▀▀▄▄▄▀▒▒▒▒▒▐
   * ░░░░░▄▄▀▒░▒▒▒▒▒▒▒▒▒█▒▒▄█▒▐
   * ░░░▄▀▒▒▒░░░▒▒▒░░░▒▒▒▀██▀▒▌
   * ░░▐▒▒▒▄▄▒▒▒▒░░░▒▒▒▒▒▒▒▀▄▒▒
   * ░░▌░░▌█▀▒▒▒▒▒▄▀█▄▒▒▒▒▒▒▒█▒▐
   * ░▐░░░▒▒▒▒▒▒▒▒▌██▀▒▒░░░▒▒▒▀▄
   * ░▌░▒▄██▄▒▒▒▒▒▒▒▒▒░░░░░░▒▒▒▒
   * ▀▒▀▐▄█▄█▌▄░▀▒▒░░░░░░░░░░▒▒▒
   * 单身狗就这样默默地看着你，一句话也不说。
   */
  // 未完善： 优酷等网站，视频是分段加载的，刚开始设置好了速率，但是再播放一段，就又恢复原来的速度了。需要启动另外一个周期计时器，不断检测播放速率。
  // 目前腾讯视频没有这个问题

  var SpeedyPlay = (function(){
    let O = {
      "CSS": `
        /* 禁止选中文字 */
        .noselect {
          -webkit-touch-callout: none; /* iOS Safari */
          -webkit-user-select: none; /* Chrome/Safari/Opera */
          -khtml-user-select: none; /* Konqueror */
          -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currentlynot supported by any browser */
        }
       /* 调速框样式 */ 
        #speedDiv{
          position:fixed;
          top:500px;
          left: 100px;
          z-index:999999;
          overflow:hidden;
          width:50px;
          padding:5px; border:1px solid #999;
          border-radius:50px;
          display:grid;
          grid-template-columns: 50px 50px 300px 50px;
          grid-template-rows: 50px;
          grid-column-gap: 5px;
          justify-content:flex-start;
          align-items:center;
          opacity:0.4;
        }
        #speedDiv:hover,#speedDiv:focus,#speedDiv:active{
          width:auto;
          padding-right:15px;
          opacity:1;
        }
        #speedDiv span,#speedDiv input,.speedText{
          font-weight: bolder;
          background: #FF0;
          display: grid;
          text-align: center;
        }
        #speedDiv .speedText{
          height: 50px;
          width: 50px;
          line-height: 50px;
          vertical-align: middle; /*必须设置 line-height, 这个才可用*/
          font-size: 30px;
          border-radius: 50px;
          cursor:move;
        }
        #speedDiv span[name='slowDown']{
          transform: rotateY(180deg);
        }
        #speedDiv input{
          width:50px;
          height:50px;
          border-radius:35px;
          display:inline-block;
          text-align:center;
          border:3px solid #333;
          margin-right: 5px;
        }
        #speedDiv span{
          font-size: 35px;
          height: 50px;
          width: 50px;
          border-radius:5px;
          cursor:pointer;
        }

        /*横条样式*/
        #speedDiv input[type='range']{
          -webkit-appearance: none;/*清除系统默认样式*/
          border: 0;
          width: 300px;
          background: -webkit-linear-gradient(#ff0, #ff0) no-repeat, #999;/*设置左边颜色为#ff0，右边颜色为#999*/
          /*  background-size: 75% 100%;设置左右宽度比例*/
          height: 15px;/*横条的高度*/
        }
        /*拖动块的样式*/
        #speedDiv input[type=range]::-webkit-slider-thumb {
          -webkit-appearance: none;/*清除系统默认样式*/
          height: 40px;/*拖动块高度*/
          width: 40px;/*拖动块宽度*/
          background: #fff;/*拖动块背景*/
          border-radius: 50%; /*外观设置为圆形*/
          border: solid 2px cyan; /*设置边框*/
          cursor: pointer;
        }`,
    };

    O.speedDivOuterHTML = `
      <div id="speedDiv" class="noselect" unselectable="on">
        <b class="speedText" @dblclick="resetSpeed"><center>{{speed}}</center></b>
        <span name="slowDown" @click.prevent="slowDown">♞</span>
        <input type="range" v-model.number="speed" min=0 max=10 :step=0.1 @input="changeRange" 
        :style="backgroundSize()"/>
        <span name="speedUp" @click.prevent="speedUp">✈</span>
      </div>
    `;

    // 获取当前站点取得名称
    O.getSiteName = function(){
      return location.host.replace(/\./g, '');
    };

    O.getSiteSpeed = function(){
      let speedCollete = GM_getValue('speedCollete', {});
      let siteName = O.getSiteName();
      return speedCollete.hasOwnProperty(siteName) ? speedCollete[siteName] : 1.0;
    };

    O.getSitePosition = function(){
      let positionCollect = GM_getValue('positionCollect', {});
      let siteName = O.getSiteName();
      return positionCollect.hasOwnProperty(siteName) ? positionCollect[siteName] : {left: 50, top: 100};
    };

    // 根据不同的网站，设置不同的速度。存储键名用 location.host 字母来拼接
    // 还有设置不同的位置
    // 按照不同频道读取各自的播放速度，未完成
    O.saveSpeed = function(speed){
      if(typeof speed != 'number'){
        O.log(`速度值设置错误，应该提供数值类型，${speed} 是 ${typeof speed} 类型！`, 'error');
        return false;
      }
      let speedCollete = GM_getValue('speedCollete', {});
      let siteName = O.getSiteName();
      speedCollete[siteName] = speed;
      GM_setValue('speedCollete', speedCollete);
      return true;
    };

    O.savePosition = function(left, top){
      if(typeof left != 'number' || typeof top != 'number'){
        O.log(`位置值设置错误，应该提供数值类型，现在 left:${typeof left}，top: ${typeof top}`, 'error');
        return false;
      }
      let positionCollect = GM_getValue('positionCollect', {});
      let siteName = O.getSiteName();
      positionCollect[siteName] = {
        left: left,
        top: top
      };
      GM_setValue('positionCollect', positionCollect);
      O.log(left+'--'+top);
      return true;
    };
    
    O.log = function(message,msgType="normal"){
      let style = {
        hint: `background:#ff0; border-left: 5px solid #333; padding:1px 3px; font-weight:bold;`,
        normal: `background:lightgreen;padding:1px 5px 1px 2px; border-right: 3px solid darkblue;`,
        warning: `background:#FFFBE5;padding:1px 5px 1px 2px; border-right: 3px solid darkblue;`,
        error: `background:red;padding:1px 5px 1px 2px; border-right: 3px solid darkblue;`
      };
      console.log("%c SpeedyPlay Info: %c"+message, style.hint, style[msgType]);
    };

    // 如果网页环境满足调速情况，才构造调速模块
    // window.sessionStorage.setItem("playbackRate", Math.min(videoRate, 4.0));
    O.showUp = function(){
      GM_addStyle(O.CSS);
      $('body').first().before(O.speedDivOuterHTML);
      setTimeout(()=>{
        $('#speedDiv').Tdrag({
          handle:".speedText",
          // 拖拽结束后调用
          cbEnd: ()=>{
            O.savePosition(parseInt($('#speedDiv').css('left')), parseInt($('#speedDiv').css('top')));
          }
        });
      }, 600);
      
      let speedDiv = $('#speedDiv');

      let speedDivPosition = O.getSitePosition();
      speedDiv.css({
        'left': speedDivPosition.left+'px',
        'top': speedDivPosition.top+'px'
      });

      O.speedVue = new Vue({
        el: "#speedDiv",
        data: {
          speed: O.getSiteSpeed(),
        },
        methods: {
          slowDown: function(){
            let speed = Number((this.speed - 0.1).toFixed(1));
            this.speed = speed >= 0.1 ? speed : 0.1;
            this.changeSpeed();
          },
          speedUp: function(){
            let speed = Number((this.speed - (-0.1)).toFixed(1));
            this.speed = speed <= 10 ? speed :10;
            this.changeSpeed();
          },
          resetSpeed: function(){
            this.speed = 1;
            this.changeSpeed();
          },
          changeSpeed: function(){
            // GM_setValue("speed", this.speed);
            O.saveSpeed(this.speed);
            // 这里默认只对第一个 video 元素进行调速。多 video 的页面暂时不考虑
            try {
              let videos = document.querySelectorAll("video");
              if(location.host == "v.qq.com"){
                window.sessionStorage.setItem("playbackRate", Math.min(this.speed, 4.0));
              }else{
                videos.forEach(vdo=>{vdo.playbackRate = this.speed;});                
              }
              if(videos[0] && videos[0].playbackRate){
                O.log(this.speed+"倍速", "normal");
              }
            } catch(e) {
              O.log("没有找到HTML5播放器!!!", "warning");
            }
          },
          changeRange: function(){
            // GM_setValue("speed", this.speed);
            O.saveSpeed(this.speed);
            this.changeSpeed();
          },
          backgroundSize: function(){
            return `background-size:${this.speed*10}% 100%`;
          },
        }
      });
    };

    O.setPlaybackRate = function(){
      // 腾讯视频，最高4.0 倍速度，需要通过设置 sessionStorage 值来改变。目前没有找到直接操作的方法
      let videos = document.querySelectorAll("video");
      // 按照不同频道读取各自的播放速度，未完成
      let videoRate = O.getSiteSpeed();
      if(location.host == "v.qq.com"){
        window.sessionStorage.setItem("playbackRate", Math.min(videoRate, 4.0));
      }else{
        videos.forEach((vdo)=>{vdo.playbackRate = videoRate;});
      }
      O.log(videos[0].playbackRate);      
    };

    // 检测页面是否有 video 元素，如果有，并且可以设置 video.playbackRate 属性，那么就出现速度框，否则就不显示。
    // 循环检测 30s ，如果都没有找到 video 元素，那就不再检测了
    O.isReady = function(){
      let checkVideoCounter = 0;
      window.checkVideoTimer = setInterval(()=>{
        let videos = document.querySelectorAll("video");
        if(videos.length){
          clearInterval(checkVideoTimer);
          O.showUp();
          O.setPlaybackRate();
        }else if(checkVideoCounter>30){
          clearInterval(checkVideoTimer);
        }else{
          O.log('waiting...');
          checkVideoCounter ++;
        }
      },1000);
    };

    // ===  END ===
    return O;
  })();

  SpeedyPlay.isReady();

})();