-
address is {id}
-
connection is from {conn?.connectionId}
+
+
Ready to connect
+ {loading && (
+
+
+
+ )}
+
);
}
diff --git a/desktop/src/assets/success.svg b/desktop/src/assets/success.svg
new file mode 100644
index 0000000..280e340
--- /dev/null
+++ b/desktop/src/assets/success.svg
@@ -0,0 +1,20 @@
+
\ No newline at end of file
diff --git a/desktop/src/qr.ts b/desktop/src/qr.ts
index 848d26d..e9caa8b 100644
--- a/desktop/src/qr.ts
+++ b/desktop/src/qr.ts
@@ -1,37 +1,49 @@
-import QRCodeStyling, {Options} from "qr-code-styling";
+import QRCodeStyling, { Options } from "qr-code-styling";
const options: Options = {
- width: 300,
- height: 300,
- data: "",
+ width: 300,
+ height: 300,
+ data: "",
+ margin: 0,
+ qrOptions: {
+ mode: "Byte",
+ errorCorrectionLevel: "Q",
+ },
+ imageOptions: {
+ hideBackgroundDots: true,
+ imageSize: 0.4,
margin: 0,
- qrOptions: {
+ },
+ dotsOptions: {
+ type: "extra-rounded",
+ color: "#000000",
+ },
+ backgroundOptions: {
+ color: "transparent",
+ },
+ cornersSquareOptions: {
+ type: "extra-rounded",
+ color: "#1FB1E2",
+ },
+ cornersDotOptions: {
+ type: "square",
+ color: "#1FB1E2",
+ },
+};
- mode: "Byte",
- errorCorrectionLevel: "Q"
- },
- imageOptions: {
- hideBackgroundDots: true,
- imageSize: 0.4,
- margin: 0
- },
- dotsOptions: {
- type: "extra-rounded",
- color: "#2786ec"
- },
- backgroundOptions: {
- color: "#ffffff"
- },
- cornersSquareOptions: {
- type: "extra-rounded",
- color: "#595959"
- },
- cornersDotOptions: {
- type: "square",
- color: "#595959"
- },
- }
+function getOptions(url: string) {
+ const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+ return {
+ ...options,
+ data: url,
+ dotsOptions: { type: "extra-rounded", color: isDark ? "white" : "black" },
+ } as Options;
+}
- export function createQR(data: string) {
- return new QRCodeStyling({...options, data})
- }
\ No newline at end of file
+export function createQR(data: string) {
+ return new QRCodeStyling(getOptions(data));
+}
+
+export function updateQR(url: string, qr: QRCodeStyling) {
+ qr.update(getOptions(url));
+}
diff --git a/web/src/App.tsx b/web/src/App.tsx
index d41e1e7..1320103 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1,52 +1,131 @@
-import Peer, { DataConnection } from 'peerjs';
-import { useEffect, useState } from 'react';
-
+import Peer, { DataConnection } from "peerjs";
+import { useEffect, useState } from "react";
enum Action {
VOL_UP,
- VOL_DN
+ VOL_DN,
}
interface Message {
- action: Action
+ action: Action;
}
-
// 8e25320d-7759-469e-b019-035b48593438
function App() {
const params = new URLSearchParams(window.location.search);
-
+ const [loading, setLoading] = useState(true)
// eslint-disable-next-line @typescript-eslint/no-unused-vars
- const [peer,] = useState(new Peer());
- const [conn, setConn] = useState
(null)
+ const [peer] = useState(new Peer({pingInterval: 1000}));
+ const [conn, setConn] = useState(null);
function sendMessage(data: Message) {
- conn?.send(JSON.stringify(data))
+ conn?.send(JSON.stringify(data));
}
-
useEffect(() => {
- const address = params.get('id')
- console.log('connecting to ', address)
- peer.on('open', () => {
- const connection = peer.connect(address!)
- setConn(connection)
- })
-
-
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [])
+ const address = params.get("id");
+ console.log("connecting to ", address);
+ peer.on("open", () => {
+ const connection = peer.connect(address!);
+ setLoading(false)
+ setConn(connection);
+ });
+
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ if (loading) {
+ return (
+
+ CONNECTING
+
+
+ )
+ }
return (
- <>
- connected to {conn?.connectionId}
-
-
- >
- )
+
+
+
+
+
+
+
+
+
+ );
}
-export default App
+export default App;