mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
1 line
5.4 KiB
JavaScript
1 line
5.4 KiB
JavaScript
(()=>(e,t)=>{function i(e,t,i){if(t in e){Object.defineProperty(e,t,{value:i,enumerable:true,configurable:true,writable:true})}else{e[t]=i}return e}const{getFriendlyTitle:s}=t.import("title");const n=document.createElement("canvas");class o{constructor(e,t,s=false){i(this,"video",void 0);i(this,"url","");i(this,"videoTime",void 0);i(this,"blob",void 0);i(this,"timeStamp",(new Date).getTime());i(this,"withDanmaku",false);this.video=e;this.videoTime=t;this.withDanmaku=s;this.createUrl()}async createUrl(){if(this.withDanmaku){const{playerAgent:e}=await t.importAsync("player-agent");const i=dq(e.query.video.wrap.selector);const s=i.getBoundingClientRect();const o=s.width/s.height;const a=this.video.videoWidth/this.video.videoHeight;if(o>=a){n.height=this.video.videoHeight;n.width=this.video.videoHeight*o}else{n.width=this.video.videoWidth;n.height=this.video.videoWidth/o}}else{n.width=this.video.videoWidth;n.height=this.video.videoHeight}const e=n.getContext("2d");if(e===null){logError("视频截图失败: canvas 未创建或创建失败.");return}const i=(n.width-this.video.videoWidth)/2;const s=(n.height-this.video.videoHeight)/2;e.drawImage(this.video,i,s);if(this.withDanmaku){const t=dq("canvas.bilibili-player-video-danmaku, canvas.dm-canvas");if(t!==null){e.drawImage(t,0,0,n.width,n.height)}}try{n.toBlob((e=>{if(e===null){logError("视频截图失败: 创建 blob 失败.");return}this.blob=e;this.url=URL.createObjectURL(e)}),"image/png")}catch(e){logError("视频截图失败: 操作被浏览器阻止. 这通常发生于电影的试看片段, 请在正片尝试使用截图功能.")}}get filename(){return`${s()} @${this.time.replace(/:/g,"-")} ${this.timeStamp.toString()}.png`}get id(){return this.videoTime.toString()+this.timeStamp.toString()}get time(){const e=Math.trunc(this.videoTime/3600).toString();const t=Math.trunc(this.videoTime/60).toString();const i=(this.videoTime%60).toFixed(2);if(e==="0"){return`${t.padStart(2,"0")}:${i.padStart(5,"0")}`}return`${e}:${t.padStart(2,"0")}:${i.padStart(5,"0")}`}revoke(){URL.revokeObjectURL(this.url)}}const a=(e,t=false)=>{const i=e.currentTime;return new o(e,i,t)};let r={screenshots:[]};Observer.videoChange((async()=>{if(!dq(".video-screenshot-container")){t.applyStyle("videoScreenshotStyle");document.body.insertAdjacentHTML("beforeend",`\n<div class="video-screenshot-container">\n<transition-group class="video-screenshot-list" name="video-screenshot-list" tag="div">\n<video-screenshot v-for="screenshot of screenshots" :filename="screenshot.filename"\n :object-url="screenshot.url" :time="screenshot.time" @discard="discard(screenshot)"\n :key="screenshot.id"></video-screenshot>\n</transition-group>\n<div v-show="showBatch" class="video-screenshot-batch">\n<a class="batch-link" style="display:none" :download="batchFilename"></a>\n<button @click="saveAll">\n<i class="mdi mdi-content-save"></i>全部保存\n</button>\n<button @click="discardAll">\n<i class="mdi mdi-delete-forever"></i>全部丢弃\n</button>\n</div>\n</div>\n`);Vue.component("video-screenshot",{props:{objectUrl:String,filename:String,time:String},template:`\n<div class="video-screenshot-thumbnail">\n<img v-if="objectUrl" :src="objectUrl">\n<div class="mask" v-if="objectUrl">\n<a class="link" style="display:none" :href="objectUrl" :download="filename"></a>\n<button @click="save" class="save" title="保存"><i class="mdi mdi-content-save-outline"></i></button>\n<button @click="discard" title="丢弃" class="discard"><i class="mdi mdi-delete-forever-outline"></i></button>\n<span class="time">{{time}}</span>\n</div>\n<div class="loading" @click="discard" v-else>\n</div>\n</div>\n`,methods:{discard(){this.$emit("discard")},save(){this.$el.querySelector(".link").click();this.discard()}}});r=new Vue({el:".video-screenshot-container",data:{screenshots:[],batchFilename:s()+".zip"},methods:{discard(e){this.screenshots.splice(this.screenshots.indexOf(e),1);e.revoke()},async saveAll(){const{DownloadPackage:e}=await t.importAsync("download-package");const i=new e;this.screenshots.forEach((e=>{i.add(e.filename,e.blob,{date:new Date(e.timeStamp)})}));await i.emit(this.batchFilename);this.discardAll()},discardAll(){this.screenshots.forEach((e=>e.revoke()));this.screenshots=[]}},computed:{showBatch(){return this.screenshots.length>=2}}})}const{playerAgent:i}=await t.importAsync("player-agent");const n=await i.query.video.element();if(n===null){return}const o=await i.query.control.buttons.time();if(o===null||document.querySelector(".video-take-screenshot")){return}const c=`\n<div class="video-take-screenshot">\n<span><i class="mdi mdi-camera"></i></span>\n<div class="player-tooltips bpx-player-tooltip-item tip top-center animation active">\n<div class="tooltip">截图</div>\n</div>\n</div>`;o.insertAdjacentHTML("afterend",c);const d=document.querySelector(".video-take-screenshot");d.addEventListener("click",(async e=>{const t=await i.query.video.element();const s=a(t,e.shiftKey);r.screenshots.unshift(s)}));if(e.touchVideoPlayer){document.querySelectorAll(".video-take-screenshot").forEach((e=>e.classList.add("touch")))}}));return{export:{takeScreenshot:a,screenShotsList:r},unload:()=>document.querySelectorAll(".video-take-screenshot,.video-screenshot-container").forEach((e=>e.setAttribute("style","display: none !important"))),reload:()=>document.querySelectorAll(".video-take-screenshot,.video-screenshot-container").forEach((e=>e.setAttribute("style","display: flex !important")))}})(); |