TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: option to download current video frame

Browse source
This commit is contained in:
Bnyro 2023-08-22 09:15:24 +02:00
parent a8b3cb973e
commit 4ff2dc8e3d
2 changed files with 20 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/WatchVideo.vue
View file

@ -95,6 +95,9 @@
/>
<div class="ml-auto flex flex-wrap gap-1">
<!-- Subscribe Button -->
<button class="btn flex items-center gap-1 <md:hidden" @click="downloadCurrentFrame">
{{ $t("actions.download_frame") }}<i class="i-fa6-solid:download" />
</button>
<button class="btn flex items-center" @click="showModal = !showModal">
{{ $t("actions.add_to_playlist") }}<font-awesome-icon class="ml-1" icon="circle-plus" />
</button>
@ -699,6 +702,21 @@ export default {
if (paramStr.length > 0) url += "&" + paramStr;
this.$router.push(url);
},
downloadCurrentFrame() {
const video = document.querySelector("video");
const canvas = document.createElement("canvas");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
const context = canvas.getContext("2d");
context.drawImage(video, 0, 0, canvas.width, canvas.height);
let link = document.createElement("a");
const currentTime = Math.round(video.currentTime * 1000) / 1000;
link.download = `${this.video.title}_${currentTime}s.png`;
link.href = canvas.toDataURL();
link.click();
},
},
};
</script>

3
src/locales/en.json
View file

@ -143,7 +143,8 @@
"okay": "Okay",
"show_search_suggestions": "Show search suggestions",
"delete_automatically": "Delete automatically after",
"generate_qrcode": "Generate QR Code"
"generate_qrcode": "Generate QR Code",
"download_frame": "Download frame"
},
"comment": {
"pinned_by": "Pinned by {author}",