This commit is contained in:
the1812 2019-05-27 14:36:42 +08:00
parent b46be1937a
commit 26bfcaea8e
7 changed files with 37 additions and 12 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
.video-take-screenshot{padding:0 6px 0 18px;height:100%;cursor:pointer;display:none!important}.bilibili-player-video-control-bottom .video-take-screenshot{display:flex!important}.video-take-screenshot span{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.video-take-screenshot i{font-size:20px;color:#fff;transform:scale(1);opacity:.9;transition:.4s cubic-bezier(.18,.89,.32,1.28)}.bilibili-player.mode-fullscreen .video-take-screenshot i,.bilibili-player.mode-webfullscreen .video-take-screenshot i{font-size:24px}.video-take-screenshot:hover i{transform:scale(1.05);opacity:1}.video-take-screenshot:active i{transform:scale(.95);opacity:1}.video-screenshot-container{position:relative;--screenshot-width:240px;--screenshot-width-negative:calc(0px - var(--screenshot-width));--screenshot-height:135px;--thumbnail-margin-vertical:12px;--thumbnail-margin-horizontal:24px;--screenshot-list-width:calc(2 * var(--thumbnail-margin-horizontal) + var(--screenshot-width))}.video-screenshot-batch{position:fixed;bottom:0;right:0;z-index:20000;display:flex;width:var(--screenshot-list-width);align-items:center;justify-content:space-evenly}.video-screenshot-batch button{background:#000c;color:#fff;border:none;border-radius:10px 10px 0 0;font-size:12pt;cursor:pointer;outline:0!important;padding:8px 12px;display:flex;justify-content:center;align-items:center}.video-screenshot-batch button i{font-size:14pt;margin-right:4px}.video-screenshot-container,.video-screenshot-container *{transition:.2s ease-out}.video-screenshot-list{position:fixed;top:0;right:0;z-index:20000;padding:var(--thumbnail-margin-vertical) 0;pointer-events:none;height:calc(100% - 2 * var(--thumbnail-margin-vertical) - 48px);width:var(--screenshot-list-width);overflow:auto}.video-screenshot-list *{pointer-events:initial}.video-screenshot-list-enter{opacity:0;transform:translateX(var(--screenshot-width-negative))}.video-screenshot-list-leave-to{opacity:0;transform:translateX(var(--screenshot-width))}.video-screenshot-thumbnail img{max-width:var(--screenshot-width);max-height:var(--screenshot-height);display:block;background-color:#000}.video-screenshot-thumbnail{margin:var(--thumbnail-margin-vertical) var(--thumbnail-margin-horizontal);position:relative;transition:.35s cubic-bezier(.18,.89,.32,1.28);width:var(--screenshot-width);height:var(--screenshot-height);background-color:#000;display:flex;justify-content:center;align-items:center}@keyframes spinner{to{transform:translate(-50%,-50%) rotate(360deg)}}.video-screenshot-thumbnail .loading::before{content:"";box-sizing:border-box;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(0);width:24px;height:24px;border-radius:50%;border:3px solid #8888;border-top-color:var(--theme-color);animation:.6s linear infinite spinner}.video-screenshot-thumbnail.video-screenshot-list-leave-active{position:absolute;transition:.35s cubic-bezier(.6,-.28,.74,.05)}.video-screenshot-thumbnail .mask{position:absolute;opacity:0;top:0;left:0;width:100%;height:100%;background:#0008;display:flex;justify-content:space-around;align-items:center;transition:none;pointer-events:none}.video-screenshot-thumbnail:hover .mask{opacity:1}.video-screenshot-thumbnail .mask button{background:#000a;color:#fff;border:none;border-radius:50%;font-size:24pt;cursor:pointer;width:48px;height:48px;pointer-events:initial;outline:0!important}
.video-take-screenshot{padding:0 6px 0 18px;height:100%;cursor:pointer;display:none!important}.bilibili-player-video-control-bottom .video-take-screenshot{display:flex!important}.video-take-screenshot span{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.video-take-screenshot i{font-size:20px;color:#fff;transform:scale(1);opacity:.9;transition:.4s cubic-bezier(.18,.89,.32,1.28)}.bilibili-player.mode-fullscreen .video-take-screenshot i,.bilibili-player.mode-webfullscreen .video-take-screenshot i{font-size:24px}.video-take-screenshot:hover i{transform:scale(1.05);opacity:1}.video-take-screenshot:active i{transform:scale(.95);opacity:1}.video-screenshot-container{position:relative;--screenshot-width:240px;--screenshot-width-negative:calc(0px - var(--screenshot-width));--screenshot-height:135px;--thumbnail-margin-vertical:12px;--thumbnail-margin-horizontal:24px;--screenshot-list-width:calc(2 * var(--thumbnail-margin-horizontal) + var(--screenshot-width))}.video-screenshot-batch{position:fixed;bottom:0;right:0;z-index:20000;display:flex;width:var(--screenshot-list-width);align-items:center;justify-content:space-evenly}.video-screenshot-batch button{background:#000c;color:#fff;border:none;border-radius:10px 10px 0 0;font-size:12pt;cursor:pointer;outline:0!important;padding:8px 12px;display:flex;justify-content:center;align-items:center}.video-screenshot-batch button i{font-size:14pt;margin-right:4px}.video-screenshot-container,.video-screenshot-container *{transition:.2s ease-out}.video-screenshot-list{position:fixed;top:0;right:0;z-index:20000;padding:var(--thumbnail-margin-vertical) 0;pointer-events:none;height:calc(100% - 2 * var(--thumbnail-margin-vertical) - 48px);width:var(--screenshot-list-width);overflow:auto}.video-screenshot-list *{pointer-events:initial}.video-screenshot-list-enter{opacity:0;transform:translateX(var(--screenshot-width-negative))}.video-screenshot-list-leave-to{opacity:0;transform:translateX(var(--screenshot-width))}.video-screenshot-thumbnail img{max-width:var(--screenshot-width);max-height:var(--screenshot-height);display:block;background-color:#000}.video-screenshot-thumbnail{margin:var(--thumbnail-margin-vertical) var(--thumbnail-margin-horizontal);position:relative;transition:.35s cubic-bezier(.18,.89,.32,1.28);width:var(--screenshot-width);height:var(--screenshot-height);background-color:#000;display:flex;justify-content:center;align-items:center}@keyframes spinner{to{transform:translate(-50%,-50%) rotate(360deg)}}.video-screenshot-thumbnail .loading::before{content:"";box-sizing:border-box;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(0);width:24px;height:24px;border-radius:50%;border:3px solid #8888;border-top-color:var(--theme-color);animation:.6s linear infinite spinner}.video-screenshot-thumbnail.video-screenshot-list-leave-active{position:absolute;transition:.35s cubic-bezier(.6,-.28,.74,.05)}.video-screenshot-thumbnail .mask{position:absolute;opacity:0;top:0;left:0;width:100%;height:100%;background:#0008;display:flex;justify-content:space-around;align-items:center;transition:none;pointer-events:none}.video-screenshot-thumbnail:hover .mask{opacity:1}.video-screenshot-thumbnail .mask .time{color:#fff;position:absolute;bottom:0;left:4px;font-size:10pt}.video-screenshot-thumbnail .mask button{background:#000a;color:#fff;border:none;border-radius:50%;font-size:24pt;cursor:pointer;width:48px;height:48px;pointer-events:initial;outline:0!important}

View File

@ -1 +1 @@
(()=>{return(e,t)=>{const{getFriendlyTitle:i}=t.import("title");const n=document.createElement("canvas");class s{constructor(e,t){this.url="";this.timeStamp=(new Date).getTime();this.video=e;this.videoTime=t;this.createUrl()}async createUrl(){n.width=this.video.videoWidth;n.height=this.video.videoHeight;const e=n.getContext("2d");if(e===null){throw new Error("视频截图失败: canvas 未创建或创建失败.")}e.drawImage(this.video,0,0);n.toBlob(e=>{if(e===null){throw new Error("视频截图失败: 创建 blob 失败.")}this.blob=e;this.url=URL.createObjectURL(e)},"image/png")}get filename(){return`${i()} @${this.videoTime.toString()}:${this.timeStamp.toString()}.png`}get id(){return this.videoTime.toString()+this.timeStamp.toString()}revoke(){URL.revokeObjectURL(this.url)}}const o=e=>{const t=e.currentTime;return new s(e,t)};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" v-bind:filename="screenshot.filename" v-bind:object-url="screenshot.url" v-on:discard="discard(screenshot)" v-bind: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" v-bind:download="batchFilename"></a>\n <button v-on:click="saveAll">\n <i class="mdi mdi-content-save"></i>全部保存\n </button>\n <button v-on: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},template:`\n <div class="video-screenshot-thumbnail">\n <img v-if="objectUrl" v-bind:src="objectUrl">\n <div class="mask" v-if="objectUrl">\n <a class="link" style="display:none" v-bind:href="objectUrl" v-bind:download="filename"></a>\n <button v-on:click="save" class="save" title="保存"><i class="mdi mdi-content-save-outline"></i></button>\n <button v-on:click="discard" title="丢弃" class="discard"><i class="mdi mdi-delete-forever-outline"></i></button>\n </div>\n <div class="loading" v-else>\n </div>\n </div>`,methods:{discard(){this.$emit("discard")},save(){this.$el.querySelector(".link").click();this.discard()}}});const r=new Vue({el:".video-screenshot-container",data:{screenshots:[],batchFilename:i()+".zip"},methods:{discard(e){this.screenshots.splice(this.screenshots.indexOf(e),1);e.revoke()},async saveAll(){const e=new JSZip;this.screenshots.forEach(t=>{e.file(t.filename,t.blob,{date:new Date(t.timeStamp)})});const t=await e.generateAsync({type:"blob"});const i=this.$el.querySelector(".batch-link");i.href=URL.createObjectURL(t);i.click();URL.revokeObjectURL(i.href);i.href="";this.discardAll()},discardAll(){this.screenshots.forEach(e=>e.revoke());this.screenshots=[]}},computed:{showBatch(){return this.screenshots.length>=2}}});const c=`\n <div class="video-take-screenshot" title="截图">\n <span><i class="mdi mdi-camera"></i></span>\n </div>`;Observer.videoChange(async()=>{const t=await SpinQuery.select("#bofqi video");if(t===null){return}if(e.framePlayback){const e=await SpinQuery.select(".frame-playback.prev-frame");if(e===null||document.querySelector(".video-take-screenshot")){return}e.insertAdjacentHTML("beforebegin",c)}else{const e=await SpinQuery.select(".bilibili-player-video-time");if(e===null||document.querySelector(".video-take-screenshot")){return}e.insertAdjacentHTML("afterend",c)}const i=document.querySelector(".video-take-screenshot");i.addEventListener("click",async()=>{const e=await SpinQuery.select("#bofqi video");const t=o(e);r.screenshots.unshift(t)});document.addEventListener("keydown",e=>{if(document.activeElement&&["input","textarea"].includes(document.activeElement.nodeName.toLowerCase())){return}if(e.ctrlKey&&e.altKey&&e.key.toLowerCase()==="c"){e.stopPropagation();e.preventDefault();i.click()}})});return{export:{takeScreenshot:o,screenShotsList:r},unload:()=>document.querySelectorAll(".bilibili-player-video-control-bottom .video-take-screenshot,.video-screenshot-container").forEach(e=>e.setAttribute("style","display: none !important")),reload:()=>document.querySelectorAll(".bilibili-player-video-control-bottom .video-take-screenshot,.video-screenshot-container").forEach(e=>e.setAttribute("style","display: flex !important"))}}})();
(()=>{return(e,t)=>{const{getFriendlyTitle:i}=t.import("title");const n=document.createElement("canvas");class s{constructor(e,t){this.url="";this.timeStamp=(new Date).getTime();this.video=e;this.videoTime=t;this.createUrl()}async createUrl(){n.width=this.video.videoWidth;n.height=this.video.videoHeight;const e=n.getContext("2d");if(e===null){throw new Error("视频截图失败: canvas 未创建或创建失败.")}e.drawImage(this.video,0,0);n.toBlob(e=>{if(e===null){throw new Error("视频截图失败: 创建 blob 失败.")}this.blob=e;this.url=URL.createObjectURL(e)},"image/png")}get filename(){return`${i()} @${this.time}-${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);return`${e.padStart(2,"0")}:${t.padStart(2,"0")}:${i.padStart(5,"0")}`}revoke(){URL.revokeObjectURL(this.url)}}const o=e=>{const t=e.currentTime;return new s(e,t)};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" v-bind:filename="screenshot.filename" v-bind:object-url="screenshot.url" v-bind:time="screenshot.time" v-on:discard="discard(screenshot)" v-bind: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" v-bind:download="batchFilename"></a>\n <button v-on:click="saveAll">\n <i class="mdi mdi-content-save"></i>全部保存\n </button>\n <button v-on: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" v-bind:src="objectUrl">\n <div class="mask" v-if="objectUrl">\n <a class="link" style="display:none" v-bind:href="objectUrl" v-bind:download="filename"></a>\n <button v-on:click="save" class="save" title="保存"><i class="mdi mdi-content-save-outline"></i></button>\n <button v-on: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" v-else>\n </div>\n </div>`,methods:{discard(){this.$emit("discard")},save(){this.$el.querySelector(".link").click();this.discard()}}});const r=new Vue({el:".video-screenshot-container",data:{screenshots:[],batchFilename:i()+".zip"},methods:{discard(e){this.screenshots.splice(this.screenshots.indexOf(e),1);e.revoke()},async saveAll(){const e=new JSZip;this.screenshots.forEach(t=>{e.file(t.filename,t.blob,{date:new Date(t.timeStamp)})});const t=await e.generateAsync({type:"blob"});const i=this.$el.querySelector(".batch-link");i.href=URL.createObjectURL(t);i.click();URL.revokeObjectURL(i.href);i.href="";this.discardAll()},discardAll(){this.screenshots.forEach(e=>e.revoke());this.screenshots=[]}},computed:{showBatch(){return this.screenshots.length>=2}}});const c=`\n <div class="video-take-screenshot" title="截图">\n <span><i class="mdi mdi-camera"></i></span>\n </div>`;Observer.videoChange(async()=>{const t=await SpinQuery.select("#bofqi video");if(t===null){return}if(e.framePlayback){const e=await SpinQuery.select(".frame-playback.prev-frame");if(e===null||document.querySelector(".video-take-screenshot")){return}e.insertAdjacentHTML("beforebegin",c)}else{const e=await SpinQuery.select(".bilibili-player-video-time");if(e===null||document.querySelector(".video-take-screenshot")){return}e.insertAdjacentHTML("afterend",c)}const i=document.querySelector(".video-take-screenshot");i.addEventListener("click",async()=>{const e=await SpinQuery.select("#bofqi video");const t=o(e);r.screenshots.unshift(t)});document.addEventListener("keydown",e=>{if(document.activeElement&&["input","textarea"].includes(document.activeElement.nodeName.toLowerCase())){return}if(e.ctrlKey&&e.altKey&&e.key.toLowerCase()==="c"){e.stopPropagation();e.preventDefault();i.click()}})});return{export:{takeScreenshot:o,screenShotsList:r},unload:()=>document.querySelectorAll(".bilibili-player-video-control-bottom .video-take-screenshot,.video-screenshot-container").forEach(e=>e.setAttribute("style","display: none !important")),reload:()=>document.querySelectorAll(".bilibili-player-video-control-bottom .video-take-screenshot,.video-screenshot-container").forEach(e=>e.setAttribute("style","display: flex !important"))}}})();

View File

@ -183,6 +183,14 @@
{
opacity: 1;
}
.video-screenshot-thumbnail .mask .time
{
color: #fff;
position: absolute;
bottom: 0;
left: 4px;
font-size: 10pt;
}
.video-screenshot-thumbnail .mask button
{
background: #000a;

View File

@ -26,11 +26,17 @@ class Screenshot {
}, "image/png");
}
get filename() {
return `${getFriendlyTitle()} @${this.videoTime.toString()}:${this.timeStamp.toString()}.png`;
return `${getFriendlyTitle()} @${this.time}-${this.timeStamp.toString()}.png`;
}
get id() {
return this.videoTime.toString() + this.timeStamp.toString();
}
get time() {
const hour = Math.trunc(this.videoTime / 3600).toString();
const minute = Math.trunc(this.videoTime / 60).toString();
const second = (this.videoTime % 60).toFixed(2);
return `${hour.padStart(2, "0")}:${minute.padStart(2, "0")}:${second.padStart(5, "0")}`;
}
revoke() {
URL.revokeObjectURL(this.url);
}
@ -43,7 +49,7 @@ resources.applyStyle("videoScreenshotStyle");
document.body.insertAdjacentHTML("beforeend", /*html*/ `
<div class="video-screenshot-container">
<transition-group class="video-screenshot-list" name="video-screenshot-list" tag="div">
<video-screenshot v-for="screenshot of screenshots" v-bind:filename="screenshot.filename" v-bind:object-url="screenshot.url" v-on:discard="discard(screenshot)" v-bind:key="screenshot.id"></video-screenshot>
<video-screenshot v-for="screenshot of screenshots" v-bind:filename="screenshot.filename" v-bind:object-url="screenshot.url" v-bind:time="screenshot.time" v-on:discard="discard(screenshot)" v-bind:key="screenshot.id"></video-screenshot>
</transition-group>
<div v-show="showBatch" class="video-screenshot-batch">
<a class="batch-link" style="display:none" v-bind:download="batchFilename"></a>
@ -60,6 +66,7 @@ Vue.component("video-screenshot", {
props: {
objectUrl: String,
filename: String,
time: String,
},
template: /*html*/ `
<div class="video-screenshot-thumbnail">
@ -68,6 +75,7 @@ Vue.component("video-screenshot", {
<a class="link" style="display:none" v-bind:href="objectUrl" v-bind:download="filename"></a>
<button v-on:click="save" class="save" title="保存"><i class="mdi mdi-content-save-outline"></i></button>
<button v-on:click="discard" title="丢弃" class="discard"><i class="mdi mdi-delete-forever-outline"></i></button>
<span class="time">{{time}}</span>
</div>
<div class="loading" v-else>
</div>

View File

@ -37,12 +37,19 @@ class Screenshot
}
get filename()
{
return `${getFriendlyTitle()} @${this.videoTime.toString()}:${this.timeStamp.toString()}.png`;
return `${getFriendlyTitle()} @${this.time}-${this.timeStamp.toString()}.png`;
}
get id()
{
return this.videoTime.toString() + this.timeStamp.toString();
}
get time()
{
const hour = Math.trunc(this.videoTime / 3600).toString();
const minute = Math.trunc(this.videoTime / 60).toString();
const second = (this.videoTime % 60).toFixed(2);
return `${hour.padStart(2, "0")}:${minute.padStart(2, "0")}:${second.padStart(5, "0")}`;
}
revoke()
{
URL.revokeObjectURL(this.url);
@ -57,7 +64,7 @@ resources.applyStyle("videoScreenshotStyle");
document.body.insertAdjacentHTML("beforeend", /*html*/`
<div class="video-screenshot-container">
<transition-group class="video-screenshot-list" name="video-screenshot-list" tag="div">
<video-screenshot v-for="screenshot of screenshots" v-bind:filename="screenshot.filename" v-bind:object-url="screenshot.url" v-on:discard="discard(screenshot)" v-bind:key="screenshot.id"></video-screenshot>
<video-screenshot v-for="screenshot of screenshots" v-bind:filename="screenshot.filename" v-bind:object-url="screenshot.url" v-bind:time="screenshot.time" v-on:discard="discard(screenshot)" v-bind:key="screenshot.id"></video-screenshot>
</transition-group>
<div v-show="showBatch" class="video-screenshot-batch">
<a class="batch-link" style="display:none" v-bind:download="batchFilename"></a>
@ -74,6 +81,7 @@ Vue.component("video-screenshot", {
props: {
objectUrl: String,
filename: String,
time: String,
},
template: /*html*/`
<div class="video-screenshot-thumbnail">
@ -82,6 +90,7 @@ Vue.component("video-screenshot", {
<a class="link" style="display:none" v-bind:href="objectUrl" v-bind:download="filename"></a>
<button v-on:click="save" class="save" title="保存"><i class="mdi mdi-content-save-outline"></i></button>
<button v-on:click="discard" title="丢弃" class="discard"><i class="mdi mdi-delete-forever-outline"></i></button>
<span class="time">{{time}}</span>
</div>
<div class="loading" v-else>
</div>