Add QR code next to DM link

src/components/CopyLink.vue

@@ -1,11 +1,17 @@
 <template>
+<div>
   <v-expand-transition>
     <v-card class="ma-3" v-show="locationLink" flat>
       <v-container>
         <slot/>
         <v-row cols="12" class="qr-container ma-3">
-          <v-col cols="auto" v-if="$slots.qrCode">
-            <slot name="qrCode"/>
+          <v-col cols="auto">
+            <canvas
+              @click.stop="showFullScreenQR = true"
+              ref="roomQr"
+              class="qr"
+              id="room-qr"
+            ></canvas>
           </v-col>
           <v-col align-self="center" class="public-link">
             <div class="link">{{ locationLink }}</div>
@@ -15,55 +21,93 @@
           <v-col align="center" class="mt-0 pt-0">
             <v-btn
               id="btn-copy-room-link"
-              :color="publicRoomLinkCopied ? '#DEE6FF' : 'black'"
+              :color="locationLinkCopied ? '#DEE6FF' : 'black'"
               depressed
               @click.stop="copyRoomLink"
-              :class="{'filled-button' : true, 'link-copied-in-place' : publicRoomLinkCopied}"
-              >{{ $t(`room_info.${publicRoomLinkCopied ? 'link_copied' : i18nCopyLinkKey}`) }}</v-btn
+              :class="{'filled-button' : true, 'link-copied-in-place' : locationLinkCopied}"
+              >{{ $t(`room_info.${locationLinkCopied ? 'link_copied' : i18nCopyLinkKey}`) }}</v-btn
             >
           </v-col>
         </v-row>
       </v-container>
     </v-card>
   </v-expand-transition>
+  <QRCodePopup :show="showFullScreenQR" :message="locationLink" @close="showFullScreenQR = false" />
+</div>
 </template>
 
 <script>
+import QRCode from "qrcode";
+import QRCodePopup from './QRCodePopup.vue';
+
 export default {
-props: {
-  locationLink: {
-    type: String
+  components: {
+    QRCodePopup
   },
-  i18nCopyLinkKey: {
-    type: String,
-    default: 'copy_link'
-  }
-},
-data() {
-  return {
-    publicRoomLinkCopied: false,
-  }
-},
-methods: {
-  copyRoomLink() {
-    if(this.publicRoomLinkCopied) return
-    const self = this;
-    this.$copyText(this.locationLink).then(
-      function (ignored) {
-        // Success!
-        self.publicRoomLinkCopied = true;
-        setInterval(() => {
-          // Hide again
-          self.publicRoomLinkCopied = false;
-        }, 3000);
-      },
-      function (e) {
-        console.log(e);
+  props: {
+    locationLink: {
+      type: String
+    },
+    i18nCopyLinkKey: {
+      type: String,
+      default: 'copy_link'
+    }
+  },
+  data() {
+    return {
+      locationLinkCopied: false,
+      showFullScreenQR: false,
+    }
+  },
+  methods: {
+    copyRoomLink() {
+      if(this.locationLinkCopied) return
+      const self = this;
+      this.$copyText(this.locationLink).then(
+        function (ignored) {
+          // Success!
+          self.locationLinkCopied = true;
+          setInterval(() => {
+            // Hide again
+            self.locationLinkCopied = false;
+          }, 3000);
+        },
+        function (e) {
+          console.log(e);
+        }
+      );
+    },
+    updateQRCode() {
+      var fullUrl = this.locationLink;
+      var canvas = this.$refs.roomQr;
+      if (fullUrl && canvas) {
+        QRCode.toCanvas(
+          canvas,
+          fullUrl,
+          {
+            type: "image/png",
+            margin: 1,
+            width: 60,
+          },
+          function (error) {
+            if (error) console.error(error);
+            else console.log("success!");
+          }
+        );
       }
-    );
+    },
+  },
+  watch: {
+    locationLink: {
+      handler() {
+        this.updateQRCode();
+      }
+    }
+  },
+  mounted() {
+    this.updateQRCode();
   }
 }
-}
 </script>
 
 <style lang="scss">