From 4ff2dc8e3d943c9a26d93718ffe1dfacd0860f3c Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Tue, 22 Aug 2023 09:15:24 +0200
Subject: [PATCH] feat: option to download current video frame

---
 src/components/WatchVideo.vue | 18 ++++++++++++++++++
 src/locales/en.json           |  3 ++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index 2e881a55..25a4a0b0 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -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>
diff --git a/src/locales/en.json b/src/locales/en.json
index 97a4d30b..d6eba24f 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -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}",