qrcode

README.md

@@ -14,5 +14,6 @@
 * [ ] Fix turn server settings to work on all servers
 * [ ] Fix edge cases
 * [x] DaisyUI redesign
-* [ ] QRCode
+* [x] QRCode
+* [ ] More cleaning
 * [ ] Multiple files

eslint.config.mjs

@@ -11,6 +11,7 @@ export default [
         ...globals.browser,
         Peer: "readonly",
         lucide: "readonly",
+        QRCode: "readonly",
       },
     },
   },

index.html

@@ -7,6 +7,7 @@
   <link rel="stylesheet" href="material-colors.css" />
   <script src="https://cdn.jsdelivr.net/npm/peerjs@1.5.4/dist/peerjs.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/lucide@0/dist/umd/lucide.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/qrcode-js-package@1/qrcode.min.js"></script>
   <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
   <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
   <link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
@@ -63,6 +64,8 @@
               <label for="file-input" class="btn btn-primary w-full"><i icon="file-up"></i> Select file</label>
               <input @change="onFileChange" id="file-input" type="file" class="hidden" />
             </div>
+            <div ref="qrcode" id="qrcode" :class="serverIsReady ? '' : 'hidden'" class="w-full mt-2">
+            </div>
             <div v-if="serverIsReady" @click="onShare" class="mt-2 w-full btn btn-primary">
               <i icon="share-2"></i> {{ shareText }}
             </div>

main.js

@@ -10,6 +10,16 @@ const utils = {
       },
     });
   },
+  makeQrCode(element, text) {
+    return new QRCode(element, {
+      text,
+      width: 1024,
+      height: 1024,
+      colorDark: "#ffffff",
+      colorLight: "#00000000",
+      correctLevel: QRCode.CorrectLevel.L,
+    });
+  },
   userAgent(raw) {
     // https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Browser_detection_using_the_user_agent#which_part_of_the_user_agent_contains_the_information_you_are_looking_for
     const userAgents = [
@@ -341,6 +351,7 @@ const app = createApp({
       this.error = null;
       if (this.isServer) {
         this.server.url = `${window.location.href}?s=${id}`;
+        utils.makeQrCode(this.$refs.qrcode, this.server.url);
       } else {
         this.clientOpenConnection();
       }

style.css

@@ -20,3 +20,10 @@ h6 .lucide {
 .hero {
   background-image: url(./background.jpg);
 }
+
+#qrcode img,
+#qrcode canvas {
+  object-fit: fill;
+  aspect-ratio: 1 / 1;
+  width: 100%;
+}