constant id

desktop/package.json

@@ -14,12 +14,15 @@
     "peerjs": "^1.5.1",
     "qr-code-styling": "^1.6.0-rc.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "usehooks-ts": "^2.9.1",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@tauri-apps/cli": "^1.4.0",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
+    "@types/uuid": "^9.0.7",
     "@vitejs/plugin-react": "^4.0.3",
     "autoprefixer": "^10.4.16",
     "daisyui": "^4.4.2",

desktop/src/App.tsx

@@ -1,15 +1,12 @@
-import { useEffect, useRef, useState } from "react";
 import { invoke } from "@tauri-apps/api/tauri";
 import { DataConnection, Peer } from "peerjs";
-import QRCodeStyling from "qr-code-styling";
-import { createQR, updateQR } from "./qr";
-import { BASE_URL } from "./config";
+import { useEffect, useRef, useState } from "react";
+import { useLocalStorage } from 'usehooks-ts';
+import { v4 as uuidv4 } from 'uuid';
 import successSvg from "./assets/success.svg";
+import { BASE_URL } from "./config";
+import { createQR } from "./qr";
 
-enum Status {
-  CONNECTED,
-  WAITING,
-}
 
 enum Action {
   VOL_UP,
@@ -23,14 +20,11 @@ interface Message {
 }
 
 function App() {
+  const [id, ] = useLocalStorage('id', uuidv4())
   const [loading, setLoading] = useState(true);
-  const [status, setStatus] = useState(Status.WAITING);
-  const [peer, setPeer] = useState(new Peer({ pingInterval: 1000 }));
-  const [id, setId] = useState("");
+  const [peer, ] = useState(new Peer(id, { pingInterval: 1000 }));
   const [conn, setConn] = useState<DataConnection | null>(null);
-  const [name, setName] = useState("");
   const qrDiv = useRef<HTMLDivElement>(null);
-  const qrRef = useRef<QRCodeStyling | null>(null);
 
   function onMessage(message: unknown) {
     const data = JSON.parse(message as string) as Message;
@@ -72,8 +66,7 @@ function App() {
   }
 
   useEffect(() => {
-    peer.on("open", (id) => {
-      setId(id);
+    peer.on("open", () => {
       console.log("creating qr");
       const url = `${BASE_URL}?id=${id}`;
       console.log("url => ", url);

web/package.json

@@ -10,13 +10,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "nosleep.js": "^0.12.0",
     "peerjs": "^1.5.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
+    "@types/uuid": "^9.0.7",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
     "@vitejs/plugin-react-swc": "^3.5.0",

web/src/App.tsx

@@ -1,5 +1,10 @@
 import Peer, { DataConnection } from "peerjs";
 import { useEffect, useState } from "react";
+import NoSleep from "nosleep.js";
+import { v4 as uuidv4 } from 'uuid';
+
+const noSleep = new NoSleep();
+
 
 enum Action {
   VOL_UP,
@@ -11,15 +16,21 @@ interface Message {
   action: Action;
 }
 
-// 8e25320d-7759-469e-b019-035b48593438
+
+
 function App() {
   const params = new URLSearchParams(window.location.search);
   const [loading, setLoading] = useState(true);
+  const [id,] = useState(uuidv4())
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [peer] = useState(new Peer({ pingInterval: 1000 }));
+  const [peer] = useState(new Peer(id, { pingInterval: 1000 }));
   const [conn, setConn] = useState<DataConnection | null>(null);
 
   function sendMessage(data: Message) {
+    if (!noSleep.isEnabled) {
+      console.log('No sleep enabled')
+      noSleep.enable()
+    }
     conn?.send(JSON.stringify(data));
   }
 
@@ -89,7 +100,7 @@ function App() {
         </div>
         <div className="flex flex-col gap-5 mt-auto items-center mb-[35%]">
           <button
-            onClick={() => sendMessage({ action: Action.PG_UP })}
+            onClick={() => sendMessage({ action: Action.PG_DN })} // next
             className="btn btn-circle w-[150px] h-[150px]"
           >
             <svg
@@ -108,7 +119,7 @@ function App() {
             </svg>
           </button>
           <button
-            onClick={() => sendMessage({ action: Action.PG_DN })}
+            onClick={() => sendMessage({ action: Action.PG_UP })} // prev
             className="btn btn-circle w-[80px] h-[80px]"
           >
             <svg