Bilibili-Evolved/touch/touch-player.min.js
2018-09-10 20:59:33 +08:00

1 line
10 KiB
JavaScript

(()=>{return(t,e)=>{const i=t=>{let e=0;let i=0;while(t&&!isNaN(t.offsetLeft)&&!isNaN(t.offsetTop)){e+=t.offsetLeft-t.scrollLeft;i+=t.offsetTop-t.scrollTop;t=t.offsetParent}return{x:e,y:i}};const s=(t,e=1)=>{const i=t.toString();const s=i.indexOf(".");if(s!==-1){if(i.length-s>e+1){return i.substring(0,s+e+1)}else{return i}}else{return i+".0"}};const o=t=>{t=Math.abs(t);const e=Math.floor(t/3600);const i=Math.floor((t-e*3600)/60);const o=t-e*3600-i*60;let n=s(o)+"秒";if(i>0){n=i+"分"+n}if(e>0){n=e+"时"+n}return n};const n=t=>{t=Math.abs(t);const e=Math.floor(t/3600);const i=Math.floor((t-e*3600)/60);const o=t-e*3600-i*60;let n=(o<10?"0":"")+s(o);n=(i<10?"0":"")+i+":"+n;n=(e<10?"0":"")+e+":"+n;return n};class l{constructor(t){this.action=new a(t);this.onTouchStart=null;this.onTouchEnd=null;this._direction=null;t.addEventListener("touchstart",t=>{this._xDown=t.touches[0].clientX;this._yDown=t.touches[0].clientY;if(this.onTouchStart){this.onTouchStart(t)}});t.addEventListener("touchmove",e=>{if(!this._xDown||!this._yDown){return}const s=e.touches[0].clientX;const o=e.touches[0].clientY;const n=i(t);const l={x:(e.touches[0].pageX-n.x)/t.clientWidth,y:(e.touches[0].pageY-n.y)/t.clientHeight,width:t.clientWidth,height:t.clientHeight};const a=this._xDown-s;const c=this._yDown-o;if(!this._direction){let t="";if(Math.abs(a)>Math.abs(c)){t="horizontal"}else{t="vertical"}this._direction=t;e.preventDefault()}else{if(this._direction==="vertical"){this.action.startAction(this._direction,c,l)}else if(this._direction==="horizontal"){this.action.startAction(this._direction,-a,l)}e.preventDefault()}});t.addEventListener("touchend",t=>{this._xDown=null;this._yDown=null;this._direction=null;if(this.onTouchEnd){this.onTouchEnd(t)}})}}class a{constructor(t){this.lowSpeedForward=null;this.lowSpeedBackward=null;this.mediumSpeedForward=null;this.mediumSpeedBackward=null;this.highSpeedForward=null;this.highSpeedBackward=null;this.lowVolumeUp=null;this.lowVolumeDown=null;this.mediumVolumeUp=null;this.mediumVolumeDown=null;this.highVolumeUp=null;this.highVolumeDown=null;this.speedCancel=null;this.volumeCancel=null;this.minSwipeDistance=20;this.onActionStart=null;this.onActionEnd=null;this._element=t;this._touchStart=false;this._startPosition=null;this._lastAction=null;t.addEventListener("touchstart",t=>{this._touchStart=true});t.addEventListener("touchend",t=>{this._startPosition=null;this.onActionEnd&&this.onActionEnd(this._lastAction);this._lastAction=null})}startAction(t,e,i){if(this._touchStart){this.onActionStart&&this.onActionStart(t);this._startPosition=i;this._touchStart=false}if(t==="vertical"){if(Math.abs(e)<this.minSwipeDistance){this.volumeCancel&&this.volumeCancel();this._lastAction=null}else{let t=0;let s=undefined;let o=undefined;if(this._startPosition.x<1/3){t=.4;s=this.lowVolumeUp;o=this.lowVolumeDown}else if(this._startPosition.x>=1/3&&this._startPosition.x<=2/3){t=1;s=this.mediumVolumeUp;o=this.mediumVolumeDown}else{t=2;s=this.highVolumeUp;o=this.highVolumeDown}if(e>0){const o=Math.round(t*100*(e-this.minSwipeDistance)/(1.5*i.height));s&&s(o);this._lastAction={type:"volume",volume:o}}else{const s=Math.round(t*100*(e+this.minSwipeDistance)/(1.5*i.height));o&&o(s);this._lastAction={type:"volume",volume:s}}}}else if(t==="horizontal"){if(i.y<1/3&&(i.x<.1||i.x>.9)||Math.abs(e)<this.minSwipeDistance){this.speedCancel&&this.speedCancel();this._lastAction=null}else{let t=0;let i=undefined;let s=undefined;if(this._startPosition.y<1/3){t=.05;i=this.lowSpeedForward;s=this.lowSpeedBackward}else if(this._startPosition.y>=1/3&&this._startPosition.y<=2/3){t=.2;i=this.mediumSpeedForward;s=this.mediumSpeedBackward}else{t=1;i=this.highSpeedForward;s=this.highSpeedBackward}if(e>0){const s=(e-this.minSwipeDistance)*t;i&&i(s);this._lastAction={type:"playback",seconds:s}}else{const i=(e+this.minSwipeDistance)*t;s&&s(i);this._lastAction={type:"playback",seconds:i}}}}}}class c{constructor(){const t=window.location.href;const e=t.match(/av([\d]+)/);this.aid=e[1];const i=t.match(/p=([\d]+)/);this.page=i?i[1]:1;this.pagesData=null;this.cidMap={};this.cidData={};this.supportWebp=c.supportWebp;downloadText(t,t=>this.findCid(t))}findCid(t){const e=t.match(/"pages":(\[[^\0]*\]),"embedPlayer"/);if(e){this.pagesData=JSON.parse(e[1]);this.pagesData.forEach(t=>{this.cidMap[t.page]=t.cid})}}getVideoshot(t,e){if(!this.cidData[this.page]){downloadText(`https://api.bilibili.com/x/player/videoshot?aid=${this.aid}&cid=${this.cidMap[this.page]}&index=1`,i=>{this.cidData[this.page]=JSON.parse(i).data;this.getVideoshot(t,e)})}else{const i=this.cidData[this.page];const s=i.index;let o=0;for(let e=0;e<s.length-2;e++){if(t>=s[e]&&t<s[e+1]){o=e;break}}let n=i.image;if(this.supportWebp){n=n.map(t=>t.replace(".jpg",".jpg@.webp"))}const l=parseInt(i.pv_x_len)||10;const a=parseInt(i.pv_y_len)||10;const c=parseInt(i.pv_x_size)||160;const r=parseInt(i.pv_y_size)||90;const h=-(o%100%l)*c;const d=-Math.floor(o%100/a)*r;e({width:c,height:r,backgroundImage:`url(${n[Math.floor(o/100)]})`,backgroundPosition:`${h}px ${d}px`})}}static get supportWebp(){try{const t=document.createElement("canvas");if(t.getContext&&t.getContext("2d"))try{return t.toDataURL("image/webp").indexOf("data:image/webp")===0}catch(t){return false}else return false}catch(t){return false}}}function r(e){if($(".touch-video-box").length!==0){return}$(".bilibili-player-video-subtitle").before(`\n <div class='touch-video-box-wrapper'>\n <div class='touch-video-box adjust-closed'>\n <div class='touch-video-info'></div>\n <div class='touch-progress'></div>\n </div>\n </div>`);const i=$("video");const a=i.prop("duration");const r=new l(e.get(0));const h=document.getElementsByClassName("touch-video-info")[0];const d=document.getElementsByClassName("touch-video-box")[0];let u=Math.round(i.prop("volume")*100);const p=t=>{t/=100;if(t<0){t=0}else if(t>1){t=1}i.prop("volume",t);$(".bilibili-player-video-volume-num").text(Math.round(t*100));$(".bui-thumb").css("transform",`translateY(-${48*t}px)`);$(".bui-track-vertical .bui-bar").css("transform",`scaleY(${t})`);if(t===0){$(".bilibili-player-video-btn-volume").addClass(".video-state-volume-min");$(".bilibili-player-video-btn-volume").removeClass(".video-state-volume-max");i.prop("muted",true)}else if(t===1){$(".bilibili-player-video-btn-volume").removeClass(".video-state-volume-min");$(".bilibili-player-video-btn-volume").addClass(".video-state-volume-max");i.prop("muted",false)}else{$(".bilibili-player-video-btn-volume").removeClass(".video-state-volume-min");$(".bilibili-player-video-btn-volume").removeClass(".video-state-volume-max");i.prop("muted",false)}};if(t.touchVideoPlayerAnimation){d.classList.add("animation")}r.action.onActionStart=(t=>{d.classList.add("adjust-opened");h.innerHTML="";u=Math.round(i.prop("volume")*100)});const m=new c;const v=t=>{return e=>{const l=i.prop("currentTime");let c=l+e;let r=s(100*c/a);let d=e;if(c>a){c=a;r=100;d=a-l}else if(c<0){c=0;r=0;d=l}const u=`${n(l)} →<br/>${n(c)} (${r}%)`;const p=`\n <div class='touch-row'>\n <div class='touch-row-item'>\n <span class='touch-speed'>${t}速</span>\n </div>\n <div class='touch-row-item-wide'>\n <span class='touch-info'>进度: ${e>0?"+":"-"}${o(d)}</span>\n </div>\n </div>\n <div class='touch-row'>\n <div class='videoshot-wrapper touch-row-item'>\n <div class='videoshot'></div>\n </div>\n <div class='touch-row-item-wide'>\n <span class='touch-result'>${u}</span>\n </div>\n </div>\n `;h.innerHTML=p;m.getVideoshot(c,t=>$(".videoshot").css(t));$(".touch-progress").css("transform",`scaleX(${r/100})`)}};r.action.lowSpeedBackward=v("低");r.action.lowSpeedForward=v("低");r.action.mediumSpeedBackward=v("中");r.action.mediumSpeedForward=v("中");r.action.highSpeedBackward=v("高");r.action.highSpeedForward=v("高");const f=t=>{return e=>{let i=u+e;let s=Math.abs(e);if(i>100){i=100;s=100-u}else if(i<0){i=0;s=u}const o=`${u}${i}`;p(i);const n=`\n <div class='touch-row'>\n <div class='touch-row-item'>\n <span class='touch-speed'>${t}速</span>\n </div>\n <div class='touch-row-item-wide'>\n <span class='touch-info'>音量: ${e>0?"+":"-"}${s}</span>\n </div>\n </div>\n <div class='touch-row'>\n <div class='touch-row-item'>\n <span class='touch-result'>${o}</span>\n </div>\n </div>\n `;h.innerHTML=n;$(".touch-progress").css("transform",`scaleX(${i/100})`)}};r.action.lowVolumeUp=f("低");r.action.lowVolumeDown=f("低");r.action.mediumVolumeUp=f("中");r.action.mediumVolumeDown=f("中");r.action.highVolumeUp=f("高");r.action.highVolumeDown=f("高");r.action.speedCancel=(()=>{h.innerHTML=`松开手指,取消进退`;$(".touch-progress").css("transform","scaleX(0)")});r.action.volumeCancel=(()=>{h.innerHTML=`松开手指,取消调整`;$(".touch-progress").css("transform","scaleX(0)");p(u)});if(!unsafeWindow.TOUCH_PLAYER_DEBUG){r.action.onActionEnd=(t=>{h.innerHTML="";if(t){if(t.type==="playback"){let e=i.prop("currentTime");e+=t.seconds;if(e<0){e=0}else if(e>a){e=a}i.prop("currentTime",e)}}d.classList.remove("adjust-opened")})}}function h(t){const e=$(".bilibili-player-video");const i="touch-video-control-show";const s=e.data("events").click[0].handler;console.log(s);e.unbind("click");let o=false;const n=(e,o)=>{if(e){console.log(s);s(o)}else{t.toggleClass(i)}};e.on("click",t=>{if(!o){o=true;setTimeout(()=>{if(o){o=false;n(false,t)}},400)}else{o=false;n(true,t)}})}SpinQuery.any(()=>$(".bilibili-player-iconfont,.bilibili-player-video-quality-menu"),t=>t.unbind("click"));new SpinQuery(()=>$(".bilibili-player-video"),t=>t.length>0&&$("video").length>0&&$("video").prop("duration"),r).start();if(t.touchVideoPlayerDoubleTapControl){new SpinQuery(()=>$(".bilibili-player-area"),t=>t.length>0&&$(".bilibili-player-video").data("events"),h).start()}e.applyStyle("touchPlayerStyle","bilibili-touch-video-player");return{ajaxReload:false}}})();