From 30c83c3d0d6ffd60b42770dc1e7617160ecd329a Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Fri, 4 Aug 2023 16:19:25 +0200
Subject: [PATCH] fix: use an async component for sharing qr codes

---
 src/components/QrCode.vue     | 30 ++++++++++++++++++++++++++++++
 src/components/ShareModal.vue | 22 ++++++++++------------
 2 files changed, 40 insertions(+), 12 deletions(-)
 create mode 100644 src/components/QrCode.vue

diff --git a/src/components/QrCode.vue b/src/components/QrCode.vue
new file mode 100644
index 00000000..8bb2c6d8
--- /dev/null
+++ b/src/components/QrCode.vue
@@ -0,0 +1,30 @@
+<template>
+    <canvas ref="qrCodeCanvas" class="mx-auto my-2" />
+</template>
+<script>
+import QRCode from "qrcode";
+
+export default {
+    props: {
+        text: {
+            type: String,
+            required: true,
+        },
+    },
+    watch: {
+        text() {
+            this.generateQrCode();
+        },
+    },
+    mounted() {
+        this.generateQrCode();
+    },
+    methods: {
+        generateQrCode() {
+            QRCode.toCanvas(this.$refs.qrCodeCanvas, this.text, error => {
+                if (error) console.error(error);
+            });
+        },
+    },
+};
+</script>
diff --git a/src/components/ShareModal.vue b/src/components/ShareModal.vue
index ccfd391e..5ba46668 100644
--- a/src/components/ShareModal.vue
+++ b/src/components/ShareModal.vue
@@ -13,25 +13,30 @@
             <label v-t="'actions.with_timecode'" for="withTimeCode" />
             <input id="withTimeCode" v-model="withTimeCode" type="checkbox" @change="onChange" />
         </div>
-        <div v-if="withTimeCode" class="flex justify-between mt-2">
+        <div v-if="withTimeCode" class="flex justify-between mt-2 items-center">
             <label v-t="'actions.time_code'" />
             <input v-model="timeStamp" class="input w-12" type="text" @change="onChange" />
         </div>
         <a :href="generatedLink" target="_blank">
             <h3 class="mt-4" v-text="generatedLink" />
         </a>
-        <canvas v-show="showQrCode" ref="qrCodeCanvas" class="mx-auto my-2" />
+        <QrCode v-if="showQrCode" :text="generatedLink" />
         <div class="flex justify-end mt-4">
-            <button v-t="'actions.generate_qrcode'" class="btn" @click="generateQrCode()" />
-            <button v-t="'actions.follow_link'" class="btn" @click="followLink()" />
+            <button v-t="'actions.generate_qrcode'" class="btn" @click="showQrCode = !showQrCode" />
+            <button v-t="'actions.follow_link'" class="btn ml-3" @click="followLink()" />
             <button v-t="'actions.copy_link'" class="btn ml-3" @click="copyLink()" />
         </div>
     </ModalComponent>
 </template>
 
+<script setup>
+import { defineAsyncComponent } from "vue";
+
+const QrCode = defineAsyncComponent(() => import("./QrCode.vue"));
+</script>
+
 <script>
 import ModalComponent from "./ModalComponent.vue";
-import QRCode from "qrcode";
 
 export default {
     components: {
@@ -105,13 +110,6 @@ export default {
             this.setPreference("shareWithTimeCode", this.withTimeCode, true);
             this.setPreference("shareAsPipedLink", this.pipedLink, true);
             this.setPreference("shareWithPlaylist", this.withPlaylist, true);
-            if (this.showQrCode) this.generateQrCode();
-        },
-        generateQrCode() {
-            QRCode.toCanvas(this.$refs.qrCodeCanvas, this.generatedLink, error => {
-                if (error) console.error(error);
-                else this.showQrCode = true;
-            });
         },
     },
 };