Merge pull request #2765 from Bnyro/qr-share

feat: qrcode share option

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>

src/components/ShareModal.vue

@@ -13,20 +13,28 @@
             <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" />
+            <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>
+        <QrCode v-if="showQrCode" :text="generatedLink" />
         <div class="flex justify-end mt-4">
-            <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";
 
@@ -59,6 +67,7 @@ export default {
             withPlaylist: true,
             timeStamp: null,
             hasPlaylist: false,
+            showQrCode: false,
         };
     },
     computed: {

src/locales/en.json

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