Update to lean-qr 2

Author: davidje13

src/frontend/package-lock.json

@@ -15,7 +15,7 @@
     "@openfonts/open-sans_all": "1.x",
     "classnames": "2.x",
     "json-immutability-helper": "3.x",
-    "lean-qr": "1.x",
+    "lean-qr": "2.x",
     "react": "18.x",
     "react-dom": "18.x",
     "react-hook-awaited": "1.x",

src/frontend/package.json

@@ -1,26 +1,7 @@
-import React, { useRef, useEffect, memo } from 'react';
+import React from 'react';
 import { generate, correction } from 'lean-qr';
-import './QR.less';
+import { makeAsyncComponent } from 'lean-qr/extras/react';
 
-interface PropsT {
-  content: string;
-}
-
-export default memo(({ content }: PropsT) => {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-
-  useEffect(() => {
-    if (canvasRef.current) {
-      try {
-        const code = generate(content, { minCorrectionLevel: correction.Q });
-        code.toCanvas(canvasRef.current);
-      } catch (e) {
-        canvasRef.current.width = 1;
-        canvasRef.current.height = 1;
-        console.warn('Failed to render QR code', content);
-      }
-    }
-  }, [canvasRef]);
-
-  return <canvas className="qr-code" ref={canvasRef} />;
+export default makeAsyncComponent(React, generate, {
+  minCorrectionLevel: correction.Q,
 });

src/frontend/src/components/common/QR.less

@@ -21,6 +21,7 @@
     width: ~'calc(80vh - 52px - 3.2em)';
     min-width: 350px;
     max-width: ~'calc(100vw - 96px)';
+    aspect-ratio: 1;
     margin: 0 auto;
   }
 

src/frontend/src/components/common/QR.tsx

@@ -14,7 +14,7 @@ export default memo(({ onClose }: PropsT) => {
     <div className="popup-invite">
       <p>Attendees can join on their computer or phone:</p>
       <p className="link">{url}</p>
-      <QR content={url} />
+      <QR className="qr-code" content={url} />
       <p className="dialog-options">
         <WrappedButton onClick={onClose} className="primary">
           Close

src/frontend/src/components/retro/InvitePopup.less

@@ -5,3 +5,4 @@ import './ws';
 import './timers';
 import './consoleCheck';
 import './crypto';
+import './textEncoder';

src/frontend/src/components/retro/InvitePopup.tsx

@@ -0,0 +1,4 @@
+import { TextEncoder } from 'node:util';
+
+// https://github.com/jsdom/jsdom/issues/2524
+global.TextEncoder = TextEncoder;