TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix: use an async component for sharing qr codes

Browse source
This commit is contained in:
Bnyro 2023-08-04 16:19:25 +02:00
parent b2ab3af93b
commit 30c83c3d0d
2 changed files with 40 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/components/QrCode.vue Normal file
View 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>

22
src/components/ShareModal.vue
View file

@ -13,25 +13,30 @@
<label v-t="'actions.with_timecode'" for="withTimeCode" /> <label v-t="'actions.with_timecode'" for="withTimeCode" />
<input id="withTimeCode" v-model="withTimeCode" type="checkbox" @change="onChange" /> <input id="withTimeCode" v-model="withTimeCode" type="checkbox" @change="onChange" />
</div> </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'" /> <label v-t="'actions.time_code'" />
<input v-model="timeStamp" class="input w-12" type="text" @change="onChange" /> <input v-model="timeStamp" class="input w-12" type="text" @change="onChange" />
</div> </div>
<a :href="generatedLink" target="_blank"> <a :href="generatedLink" target="_blank">
<h3 class="mt-4" v-text="generatedLink" /> <h3 class="mt-4" v-text="generatedLink" />
</a> </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"> <div class="flex justify-end mt-4">
<button v-t="'actions.generate_qrcode'" class="btn" @click="generateQrCode()" /> <button v-t="'actions.generate_qrcode'" class="btn" @click="showQrCode = !showQrCode" />
<button v-t="'actions.follow_link'" class="btn" @click="followLink()" /> <button v-t="'actions.follow_link'" class="btn ml-3" @click="followLink()" />
<button v-t="'actions.copy_link'" class="btn ml-3" @click="copyLink()" /> <button v-t="'actions.copy_link'" class="btn ml-3" @click="copyLink()" />
</div> </div>
</ModalComponent> </ModalComponent>
</template> </template>
<script setup>
import { defineAsyncComponent } from "vue";
const QrCode = defineAsyncComponent(() => import("./QrCode.vue"));
</script>
<script> <script>
import ModalComponent from "./ModalComponent.vue"; import ModalComponent from "./ModalComponent.vue";
import QRCode from "qrcode";
export default { export default {
components: { components: {
@ -105,13 +110,6 @@ export default {
this.setPreference("shareWithTimeCode", this.withTimeCode, true); this.setPreference("shareWithTimeCode", this.withTimeCode, true);
this.setPreference("shareAsPipedLink", this.pipedLink, true); this.setPreference("shareAsPipedLink", this.pipedLink, true);
this.setPreference("shareWithPlaylist", this.withPlaylist, 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;
});
}, },
}, },
}; };