mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-21 21:17:26 +00:00
fix: use an async component for sharing qr codes
This commit is contained in:
parent
b2ab3af93b
commit
30c83c3d0d
30
src/components/QrCode.vue
Normal file
30
src/components/QrCode.vue
Normal file
@ -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>
|
@ -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;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user