From 54628ad9487e993e112007f4a31357a9379a6497 Mon Sep 17 00:00:00 2001 From: the1812 Date: Thu, 16 May 2019 17:59:23 +0800 Subject: [PATCH] Add video screenshot --- bilibili-evolved.offline.user.js | 12 +++- bilibili-evolved.preview-offline.user.js | 12 +++- bilibili-evolved.preview.user.js | 8 +++ bilibili-evolved.user.js | 8 +++ client/resource-manifest.js | 7 ++ client/settings.js | 1 + min/screenshot.min.css | 1 + min/screenshot.min.js | 1 + video/screenshot/screenshot.css | 27 +++++++ video/screenshot/screenshot.js | 79 ++++++++++++++++++++ video/screenshot/screenshot.ts | 92 ++++++++++++++++++++++++ 11 files changed, 246 insertions(+), 2 deletions(-) create mode 100644 min/screenshot.min.css create mode 100644 min/screenshot.min.js create mode 100644 video/screenshot/screenshot.css create mode 100644 video/screenshot/screenshot.js create mode 100644 video/screenshot/screenshot.ts diff --git a/bilibili-evolved.offline.user.js b/bilibili-evolved.offline.user.js index 52d77abdd..da5da9efd 100644 --- a/bilibili-evolved.offline.user.js +++ b/bilibili-evolved.offline.user.js @@ -1,6 +1,6 @@ // ==UserScript== // @name Bilibili Evolved (Offline) -// @version 303.93 +// @version 304.09 // @description Bilibili Evolved 的离线版, 所有功能都已内置于脚本中. // @author Grant Howard, Coulomb-G // @copyright 2019, Grant Howard (https://github.com/the1812) & Coulomb-G (https://github.com/Coulomb-G) @@ -229,6 +229,7 @@ const settings = { favoritesRedirect: true, outerWatchlater: true, hideOldEntry: true, + videoScreenshot: false, cache: {}, }; const fixedSettings = { @@ -1094,6 +1095,8 @@ offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/m offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/min/remove-promotions.min.js"] = (()=>{return(e,n)=>{SpinQuery.any(()=>document.querySelectorAll(".gg-pic"),e=>{e.forEach(e=>{const n=e.parentElement;n.style.display="none";const t=[...n.parentElement.childNodes].indexOf(n)+1;const l=n.parentElement.parentElement.querySelector(`.pic li:nth-child(${t})`);if(l){l.style.visibility="hidden"}})})}})(); offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/min/remove-top-mask.min.js"] = (()=>{return(e,t)=>{const o=`.bilibili-player-video-top { display: none !important; }`;const n="remove-top-mask-style";const l=()=>t.applyStyleFromText(``);const r=()=>{const e=document.getElementById(n);if(e){e.remove()}};l();return{reload:l,unload:r}}})(); offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/min/remove-watermark.min.js"] = (()=>{return(i,l)=>{const n="bilibili-live-watermark";if($(`#${n}`).length===0){l.applyStyleFromText(`\n \n `)}}})(); +offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/min/screenshot.min.css"] = `.video-take-screenshot{padding-left:12px;height:100%;cursor:pointer}.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)}.video-take-screenshot:hover i{transform:scale(1.1);opacity:1}`; +offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/min/screenshot.min.js"] = (()=>{return(e,t)=>{let n=null;let s=null;const o=e=>{if(n===null||s===null){n=document.createElement("canvas");n.width=e.videoWidth;n.height=e.videoHeight;s=n.getContext("2d")}return new Promise((t,o)=>{if(n===null||s===null){o("视频截图失败: canvas 未创建或创建失败.");return}s.drawImage(e,0,0);n.toBlob(e=>{if(e===null){o("视频截图失败: 创建 blob 失败.");return}t(e)},"image/png")})};t.applyStyle("videoScreenshotStyle");document.body.insertAdjacentHTML("beforeend",`\n
\n \n
\n`);Vue.component("video-screenshot",{data(){return{objectUrl:""}},props:{blob:Blob},methods:{created(){this.objectUrl=URL.createObjectURL(this.blob)}},template:`
\n \n
`});const i=new Vue({el:".video-screenshot-list",data:{screenshots:[]}});Observer.videoChange(async()=>{const e=await SpinQuery.select("#bofqi video");const t=await SpinQuery.select(".bilibili-player-video-time");if(e===null||t===null||document.querySelector(".video-take-screenshot")){return}t.insertAdjacentHTML("afterend",`\n
\n \n
`);const n=document.querySelector(".video-take-screenshot");if(n===null){return}n.addEventListener("click",async()=>{const t=await o(e);i.screenshots.push(t)})});return{export:{takeScreenshot:o,screenShotsList:i}}}})(); offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/min/scrollbar.min.css"] = `::-webkit-scrollbar{width:5px!important;height:5px!important}::-webkit-scrollbar-corner,::-webkit-scrollbar-track{background:0 0!important}::-webkit-resizer,::-webkit-scrollbar-thumb{background:#aaa}::-webkit-scrollbar-thumb:hover{background:#888}*{scrollbar-color:#aaa transparent;scrollbar-width:thin!important}`; offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/min/settings-search.min.js"] = (()=>{return(t,e)=>{class s{constructor(){this.input=document.querySelector(".gui-settings-search");const t=[...document.querySelectorAll(".gui-settings-content>ul>li")];const e=t=>e=>e.classList.contains("category")===t;this.categories=t.filter(e(true));this.items=t.filter(e(false));this.importToolTips().then(()=>this.input.addEventListener("input",()=>this.keywordChange()))}async importToolTips(){if(typeof getI18nKey==="undefined"){console.error("请更新脚本后再使用设置搜索功能.");return}const{toolTips:t}=await e.importAsync(`settings-tooltip.${getI18nKey()}`);this.toolTips=t}keywordChange(){const t=this.input.value.trim();if(!t){this.categories.concat(this.items).forEach(t=>t.classList.add("folded"));return}this.items.forEach(e=>{const s=e.querySelector("input").getAttribute("key");const i=Resource.displayNames[s]+this.toolTips.get(s).replace(/<.*>|<\/.*>/g,"");if(i.includes(t)){e.classList.remove("folded")}else{e.classList.add("folded")}});this.foldCategories()}foldCategories(){for(const e of this.categories){function t(){let t=e.nextElementSibling;while(t!==null&&!t.classList.contains("category")){if(!t.classList.contains("folded")){return"remove"}t=t.nextElementSibling}return"add"}e.classList[t()]("folded")}}}return{export:{SettingsSearch:s}}}})(); offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/min/settings-side-bar.min.js"] = (()=>{return(e,i)=>{if(document.querySelector(".gui-settings-icon-panel")===null){document.body.insertAdjacentHTML("beforeend",`\n
\n
\n \n
\n
\n \n
\n
`);document.querySelector(".gui-settings").addEventListener("click",e=>{if(e.shiftKey===false){document.querySelectorAll(".gui-settings-box,.gui-settings-mask").forEach(e=>e.classList.add("opened"))}else{document.querySelectorAll(".bilibili-evolved-about,.gui-settings-mask").forEach(e=>e.classList.add("opened"))}});document.querySelector(".gui-settings-widgets").addEventListener("click",()=>{document.querySelectorAll(".gui-settings-widgets-box,.gui-settings-mask").forEach(e=>e.classList.add("opened"))})}}})(); @@ -1923,6 +1926,13 @@ Resource.manifest = { slip: "debounce.js" }, }, + videoScreenshot: { + path: "screenshot.min.js", + style: true, + displayNames: { + videoScreenshot: "启用视频截图", + }, + }, }; const resourceManifest = Resource.manifest; class StyleManager diff --git a/bilibili-evolved.preview-offline.user.js b/bilibili-evolved.preview-offline.user.js index 6e59b3ce0..b47abb956 100644 --- a/bilibili-evolved.preview-offline.user.js +++ b/bilibili-evolved.preview-offline.user.js @@ -1,6 +1,6 @@ // ==UserScript== // @name Bilibili Evolved (Preview Offline) -// @version 303.93 +// @version 304.09 // @description Bilibili Evolved 的预览离线版, 可以抢先体验新功能, 并且所有功能都已内置于脚本中. // @author Grant Howard, Coulomb-G // @copyright 2019, Grant Howard (https://github.com/the1812) & Coulomb-G (https://github.com/Coulomb-G) @@ -229,6 +229,7 @@ const settings = { favoritesRedirect: true, outerWatchlater: true, hideOldEntry: true, + videoScreenshot: false, cache: {}, }; const fixedSettings = { @@ -1094,6 +1095,8 @@ offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/m offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/min/remove-promotions.min.js"] = (()=>{return(e,n)=>{SpinQuery.any(()=>document.querySelectorAll(".gg-pic"),e=>{e.forEach(e=>{const n=e.parentElement;n.style.display="none";const t=[...n.parentElement.childNodes].indexOf(n)+1;const l=n.parentElement.parentElement.querySelector(`.pic li:nth-child(${t})`);if(l){l.style.visibility="hidden"}})})}})(); offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/min/remove-top-mask.min.js"] = (()=>{return(e,t)=>{const o=`.bilibili-player-video-top { display: none !important; }`;const n="remove-top-mask-style";const l=()=>t.applyStyleFromText(``);const r=()=>{const e=document.getElementById(n);if(e){e.remove()}};l();return{reload:l,unload:r}}})(); offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/min/remove-watermark.min.js"] = (()=>{return(i,l)=>{const n="bilibili-live-watermark";if($(`#${n}`).length===0){l.applyStyleFromText(`\n \n `)}}})(); +offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/min/screenshot.min.css"] = `.video-take-screenshot{padding-left:12px;height:100%;cursor:pointer}.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)}.video-take-screenshot:hover i{transform:scale(1.1);opacity:1}`; +offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/min/screenshot.min.js"] = (()=>{return(e,t)=>{let n=null;let s=null;const o=e=>{if(n===null||s===null){n=document.createElement("canvas");n.width=e.videoWidth;n.height=e.videoHeight;s=n.getContext("2d")}return new Promise((t,o)=>{if(n===null||s===null){o("视频截图失败: canvas 未创建或创建失败.");return}s.drawImage(e,0,0);n.toBlob(e=>{if(e===null){o("视频截图失败: 创建 blob 失败.");return}t(e)},"image/png")})};t.applyStyle("videoScreenshotStyle");document.body.insertAdjacentHTML("beforeend",`\n
\n \n
\n`);Vue.component("video-screenshot",{data(){return{objectUrl:""}},props:{blob:Blob},methods:{created(){this.objectUrl=URL.createObjectURL(this.blob)}},template:`
\n \n
`});const i=new Vue({el:".video-screenshot-list",data:{screenshots:[]}});Observer.videoChange(async()=>{const e=await SpinQuery.select("#bofqi video");const t=await SpinQuery.select(".bilibili-player-video-time");if(e===null||t===null||document.querySelector(".video-take-screenshot")){return}t.insertAdjacentHTML("afterend",`\n
\n \n
`);const n=document.querySelector(".video-take-screenshot");if(n===null){return}n.addEventListener("click",async()=>{const t=await o(e);i.screenshots.push(t)})});return{export:{takeScreenshot:o,screenShotsList:i}}}})(); offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/min/scrollbar.min.css"] = `::-webkit-scrollbar{width:5px!important;height:5px!important}::-webkit-scrollbar-corner,::-webkit-scrollbar-track{background:0 0!important}::-webkit-resizer,::-webkit-scrollbar-thumb{background:#aaa}::-webkit-scrollbar-thumb:hover{background:#888}*{scrollbar-color:#aaa transparent;scrollbar-width:thin!important}`; offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/min/settings-search.min.js"] = (()=>{return(t,e)=>{class s{constructor(){this.input=document.querySelector(".gui-settings-search");const t=[...document.querySelectorAll(".gui-settings-content>ul>li")];const e=t=>e=>e.classList.contains("category")===t;this.categories=t.filter(e(true));this.items=t.filter(e(false));this.importToolTips().then(()=>this.input.addEventListener("input",()=>this.keywordChange()))}async importToolTips(){if(typeof getI18nKey==="undefined"){console.error("请更新脚本后再使用设置搜索功能.");return}const{toolTips:t}=await e.importAsync(`settings-tooltip.${getI18nKey()}`);this.toolTips=t}keywordChange(){const t=this.input.value.trim();if(!t){this.categories.concat(this.items).forEach(t=>t.classList.add("folded"));return}this.items.forEach(e=>{const s=e.querySelector("input").getAttribute("key");const i=Resource.displayNames[s]+this.toolTips.get(s).replace(/<.*>|<\/.*>/g,"");if(i.includes(t)){e.classList.remove("folded")}else{e.classList.add("folded")}});this.foldCategories()}foldCategories(){for(const e of this.categories){function t(){let t=e.nextElementSibling;while(t!==null&&!t.classList.contains("category")){if(!t.classList.contains("folded")){return"remove"}t=t.nextElementSibling}return"add"}e.classList[t()]("folded")}}}return{export:{SettingsSearch:s}}}})(); offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/min/settings-side-bar.min.js"] = (()=>{return(e,i)=>{if(document.querySelector(".gui-settings-icon-panel")===null){document.body.insertAdjacentHTML("beforeend",`\n
\n
\n \n
\n
\n \n
\n
`);document.querySelector(".gui-settings").addEventListener("click",e=>{if(e.shiftKey===false){document.querySelectorAll(".gui-settings-box,.gui-settings-mask").forEach(e=>e.classList.add("opened"))}else{document.querySelectorAll(".bilibili-evolved-about,.gui-settings-mask").forEach(e=>e.classList.add("opened"))}});document.querySelector(".gui-settings-widgets").addEventListener("click",()=>{document.querySelectorAll(".gui-settings-widgets-box,.gui-settings-mask").forEach(e=>e.classList.add("opened"))})}}})(); @@ -1923,6 +1926,13 @@ Resource.manifest = { slip: "debounce.js" }, }, + videoScreenshot: { + path: "screenshot.min.js", + style: true, + displayNames: { + videoScreenshot: "启用视频截图", + }, + }, }; const resourceManifest = Resource.manifest; class StyleManager diff --git a/bilibili-evolved.preview.user.js b/bilibili-evolved.preview.user.js index aad3b03d4..a2684834e 100644 --- a/bilibili-evolved.preview.user.js +++ b/bilibili-evolved.preview.user.js @@ -228,6 +228,7 @@ const settings = { favoritesRedirect: true, outerWatchlater: true, hideOldEntry: true, + videoScreenshot: false, cache: {}, }; const fixedSettings = { @@ -1849,6 +1850,13 @@ Resource.manifest = { slip: "debounce.js" }, }, + videoScreenshot: { + path: "screenshot.min.js", + style: true, + displayNames: { + videoScreenshot: "启用视频截图", + }, + }, }; const resourceManifest = Resource.manifest; class StyleManager diff --git a/bilibili-evolved.user.js b/bilibili-evolved.user.js index c111fbe6c..39dac2f03 100644 --- a/bilibili-evolved.user.js +++ b/bilibili-evolved.user.js @@ -228,6 +228,7 @@ const settings = { favoritesRedirect: true, outerWatchlater: true, hideOldEntry: true, + videoScreenshot: false, cache: {}, }; const fixedSettings = { @@ -1849,6 +1850,13 @@ Resource.manifest = { slip: "debounce.js" }, }, + videoScreenshot: { + path: "screenshot.min.js", + style: true, + displayNames: { + videoScreenshot: "启用视频截图", + }, + }, }; const resourceManifest = Resource.manifest; class StyleManager diff --git a/client/resource-manifest.js b/client/resource-manifest.js index f20a8cc43..68769f34a 100644 --- a/client/resource-manifest.js +++ b/client/resource-manifest.js @@ -603,5 +603,12 @@ Resource.manifest = { slip: "debounce.js" }, }, + videoScreenshot: { + path: "screenshot.min.js", + style: true, + displayNames: { + videoScreenshot: "启用视频截图", + }, + }, }; export const resourceManifest = Resource.manifest; \ No newline at end of file diff --git a/client/settings.js b/client/settings.js index c8c1d6ef0..1a0f1c6ce 100644 --- a/client/settings.js +++ b/client/settings.js @@ -109,6 +109,7 @@ export const settings = { favoritesRedirect: true, outerWatchlater: true, hideOldEntry: true, + videoScreenshot: false, cache: {}, }; const fixedSettings = { diff --git a/min/screenshot.min.css b/min/screenshot.min.css new file mode 100644 index 000000000..8414e5cd3 --- /dev/null +++ b/min/screenshot.min.css @@ -0,0 +1 @@ +.video-take-screenshot{padding-left:12px;height:100%;cursor:pointer}.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)}.video-take-screenshot:hover i{transform:scale(1.1);opacity:1} \ No newline at end of file diff --git a/min/screenshot.min.js b/min/screenshot.min.js new file mode 100644 index 000000000..e10c4c147 --- /dev/null +++ b/min/screenshot.min.js @@ -0,0 +1 @@ +(()=>{return(e,t)=>{let n=null;let s=null;const o=e=>{if(n===null||s===null){n=document.createElement("canvas");n.width=e.videoWidth;n.height=e.videoHeight;s=n.getContext("2d")}return new Promise((t,o)=>{if(n===null||s===null){o("视频截图失败: canvas 未创建或创建失败.");return}s.drawImage(e,0,0);n.toBlob(e=>{if(e===null){o("视频截图失败: 创建 blob 失败.");return}t(e)},"image/png")})};t.applyStyle("videoScreenshotStyle");document.body.insertAdjacentHTML("beforeend",`\n
\n \n
\n`);Vue.component("video-screenshot",{data(){return{objectUrl:""}},props:{blob:Blob},methods:{created(){this.objectUrl=URL.createObjectURL(this.blob)}},template:`
\n \n
`});const i=new Vue({el:".video-screenshot-list",data:{screenshots:[]}});Observer.videoChange(async()=>{const e=await SpinQuery.select("#bofqi video");const t=await SpinQuery.select(".bilibili-player-video-time");if(e===null||t===null||document.querySelector(".video-take-screenshot")){return}t.insertAdjacentHTML("afterend",`\n
\n \n
`);const n=document.querySelector(".video-take-screenshot");if(n===null){return}n.addEventListener("click",async()=>{const t=await o(e);i.screenshots.push(t)})});return{export:{takeScreenshot:o,screenShotsList:i}}}})(); \ No newline at end of file diff --git a/video/screenshot/screenshot.css b/video/screenshot/screenshot.css new file mode 100644 index 000000000..4b1eb7802 --- /dev/null +++ b/video/screenshot/screenshot.css @@ -0,0 +1,27 @@ +.video-take-screenshot +{ + padding-left: 12px; + height: 100%; + cursor: pointer; +} +.video-take-screenshot span +{ + display: flex; + align-items: center; + justify-content: center; + height: 100%; + width: 100%; +} +.video-take-screenshot i +{ + font-size: 20px; + color: white; + transform: scale(1); + opacity: 0.9; + transition: all .4s cubic-bezier(0.18, 0.89, 0.32, 1.28); +} +.video-take-screenshot:hover i +{ + transform: scale(1.1); + opacity: 1; +} \ No newline at end of file diff --git a/video/screenshot/screenshot.js b/video/screenshot/screenshot.js new file mode 100644 index 000000000..aa583f09d --- /dev/null +++ b/video/screenshot/screenshot.js @@ -0,0 +1,79 @@ +let canvas = null; +let context = null; +export const takeScreenshot = (video) => { + if (canvas === null || context === null) { + canvas = document.createElement("canvas"); + canvas.width = video.videoWidth; + canvas.height = video.videoHeight; + context = canvas.getContext("2d"); + } + return new Promise((resolve, reject) => { + if (canvas === null || context === null) { + reject("视频截图失败: canvas 未创建或创建失败."); + return; + } + context.drawImage(video, 0, 0); + canvas.toBlob(blob => { + if (blob === null) { + reject("视频截图失败: 创建 blob 失败."); + return; + } + resolve(blob); + }, "image/png"); + }); +}; +resources.applyStyle("videoScreenshotStyle"); +document.body.insertAdjacentHTML("beforeend", /*html*/ ` +
+ +
+`); +Vue.component("video-screenshot", { + data() { + return { + objectUrl: "", + }; + }, + props: { + blob: Blob + }, + methods: { + created() { + this.objectUrl = URL.createObjectURL(this.blob); + }, + }, + template: /*html*/ `
+ +
`, +}); +const screenShotsList = new Vue({ + el: ".video-screenshot-list", + data: { + screenshots: [], + }, +}); +Observer.videoChange(async () => { + const video = await SpinQuery.select("#bofqi video"); + const time = await SpinQuery.select(".bilibili-player-video-time"); + if (video === null || time === null || document.querySelector(".video-take-screenshot")) { + return; + } + time.insertAdjacentHTML("afterend", /*html*/ ` +
+ +
`); + const screenshotButton = document.querySelector(".video-take-screenshot"); + if (screenshotButton === null) { + return; + } + screenshotButton.addEventListener("click", async () => { + const blob = await takeScreenshot(video); + screenShotsList.screenshots.push(blob); + }); +}); +export default { + export: { + takeScreenshot, + screenShotsList, + }, +}; diff --git a/video/screenshot/screenshot.ts b/video/screenshot/screenshot.ts new file mode 100644 index 000000000..290dd440c --- /dev/null +++ b/video/screenshot/screenshot.ts @@ -0,0 +1,92 @@ +let canvas: HTMLCanvasElement | null = null; +let context: CanvasRenderingContext2D | null = null; +export const takeScreenshot = (video: HTMLVideoElement) => +{ + if (canvas === null || context === null) + { + canvas = document.createElement("canvas"); + canvas.width = video.videoWidth; + canvas.height = video.videoHeight; + context = canvas.getContext("2d"); + } + return new Promise((resolve, reject) => + { + if (canvas === null || context === null) + { + reject("视频截图失败: canvas 未创建或创建失败."); + return; + } + context.drawImage(video, 0, 0); + canvas.toBlob(blob => + { + if (blob === null) + { + reject("视频截图失败: 创建 blob 失败."); + return; + } + resolve(blob); + }, "image/png"); + }); +} +resources.applyStyle("videoScreenshotStyle"); +document.body.insertAdjacentHTML("beforeend", /*html*/` +
+ +
+`); +Vue.component("video-screenshot", { + data() + { + return { + objectUrl: "", + }; + }, + props: { + blob: Blob + }, + methods: { + created() + { + this.objectUrl = URL.createObjectURL(this.blob); + }, + + }, + template: /*html*/`
+ +
`, +}); +const screenShotsList = new Vue({ + el: ".video-screenshot-list", + data: { + screenshots: [] as Blob[], + }, +}); +Observer.videoChange(async () => +{ + const video = await SpinQuery.select("#bofqi video") as HTMLVideoElement; + const time = await SpinQuery.select(".bilibili-player-video-time"); + if (video === null || time === null || document.querySelector(".video-take-screenshot")) + { + return; + } + time.insertAdjacentHTML("afterend", /*html*/` +
+ +
`); + const screenshotButton = document.querySelector(".video-take-screenshot"); + if (screenshotButton === null) + { + return; + } + screenshotButton.addEventListener("click", async () => + { + const blob = await takeScreenshot(video); + screenShotsList.screenshots.push(blob); + }); +}); +export default { + export: { + takeScreenshot, + screenShotsList, + }, +}; \ No newline at end of file