design and working

thewh1teagle · Nov 19, 2023 · dc7ff6b · dc7ff6b
1 parent b22f960
commit dc7ff6b
Show file tree

Hide file tree

Showing 6 changed files with 293 additions and 118 deletions.
diff --git a/desktop/index.html b/desktop/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-theme="">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />

diff --git a/desktop/src-tauri/src/main.rs b/desktop/src-tauri/src/main.rs
@@ -23,6 +23,12 @@ fn press(controller: State<'_, Controller>, key: &str) {
         "VOL_DN" => {
             controller.key_down(Key::VolumeDown);
         },
+        "PG_UP" => {
+            controller.key_down(Key::PageUp);
+        },
+        "PG_DN" => {
+            controller.key_down(Key::PageDown);
+        },
         _ => {}
     }
 }

diff --git a/desktop/src/App.tsx b/desktop/src/App.tsx
@@ -2,83 +2,141 @@ 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 } from "./qr";
+import { createQR, updateQR } from "./qr";
 import { BASE_URL } from "./config";
+import successSvg from "./assets/success.svg";
 
-const qrCode = new QRCodeStyling({
-  width: 300,
-  height: 300,
-  image:
-    "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg",
-  dotsOptions: {
-    color: "#4267b2",
-    type: "rounded"
-  },
-  imageOptions: {
-    crossOrigin: "anonymous",
-    margin: 20
-  }
-});
+enum Status {
+  CONNECTED,
+  WAITING,
+}
 
 enum Action {
   VOL_UP,
-  VOL_DN
+  VOL_DN,
+  PG_UP,
+  PG_DN,
 }
+
 interface Message {
-  action: Action
+  action: Action;
 }
 
 function App() {
-  const [peer, setPeer] = useState(new Peer());
-  const [id, setId] = useState('')
-  const [conn, setConn] = useState<DataConnection | null>(null)
+  const [loading, setLoading] = useState(true);
+  const [status, setStatus] = useState(Status.WAITING);
+  const [peer, setPeer] = useState(new Peer({ pingInterval: 1000 }));
+  const [id, setId] = useState("");
+  const [conn, setConn] = useState<DataConnection | null>(null);
   const [name, setName] = useState("");
-  const qrDiv = useRef<any>()
+  const qrDiv = useRef<HTMLDivElement>(null);
+  const qrRef = useRef<QRCodeStyling | null>(null);
 
+  function onMessage(message: unknown) {
+    const data = JSON.parse(message as string) as Message;
+    invoke("press", { key: Action[data.action].toString() });
+  }
 
-    function onMessage(message: unknown) {
-      const data = JSON.parse(message as string) as Message
-      switch (data.action) {
-        case Action.VOL_UP: {
-          invoke('press', {key: 'VOL_UP'})
-          break;
-        }
-        case Action.VOL_DN: {
-          invoke('press', {key: 'VOL_DN'})
-          break;
-        }
-      }
-    }
-
-    useEffect(() => {
-      conn?.on('data', onMessage)
-    }, [conn])
-
-
+  useEffect(() => {
+    conn?.on("data", onMessage);
+  }, [conn]);
 
   function onConnect(connection: DataConnection) {
+    connection.on("iceStateChanged", (state) => {
+      if (state === "disconnected" || state == "closed") {
+        onDisconnect();
+      }
+    });
+    setConn(connection);
+  }
+
+  async function renderQR() {
+    const url = `${BASE_URL}?id=${id}`;
+    if (qrDiv.current) {
+      qrDiv.current.innerHTML = "";
+    }
+    const newQR = createQR(url);
 
-    setConn(connection)
+    const element = await newQR._getElement();
+    setLoading(false);
+    if (element) {
+      qrDiv.current?.appendChild(element);
+    }
   }
+  async function onDisconnect() {
+    console.log("disconnected");
+    renderQR()
 
+    // qrRef?.current?.update({data: url})
+    setConn(null);
+  }
 
   useEffect(() => {
-    peer.on('open', id => {
-      setId(id)
-      console.log('creating qr')
-      const qr = createQR(`${BASE_URL}?id=${id}`)
-      qr.append(qrDiv.current)
-    })
-    peer.on('connection', onConnect)
-  }, [])
+    peer.on("open", (id) => {
+      setId(id);
+      console.log("creating qr");
+      const url = `${BASE_URL}?id=${id}`;
+      console.log("url => ", url);
+     renderQR() 
+    });
+    peer.on("connection", onConnect);
+  }, []);
+
+  function copyURL() {
+    const url = `${BASE_URL}?id=${id}`;
+    navigator.clipboard.writeText(url);
+  }
 
-
+  if (conn) {
+    return (
+      <div className="flex flex-col items-center justify-center w-full h-[100vh]">
+        <span className="text-3xl mb-5">CONNECTED</span>
+        <img alt="" src={successSvg} />
+      </div>
+    );
+  }
 
   return (
-    <div className="container">
-      <div>address is {id}</div>
-      <div>connection is from {conn?.connectionId}</div>
+    <div className="flex flex-col w-[100vw] h-[100vh] items-center justify-center">
+      <span className="text-3xl mb-5">Ready to connect</span>
       <div ref={qrDiv} />
+      {loading && (
+        <div className="flex items-center justify-center w-[300px] h-[300px] rounded-xl bg-neutral">
+          <span className="loading loading-spinner loading-lg p-0"></span>
+        </div>
+      )}
+      <button className="btn mt-5" onClick={copyURL}>
+        <svg
+          stroke="currentColor"
+          className="w-5 h-5"
+          fill="currentColor"
+          stroke-width="0"
+          viewBox="0 0 512 512"
+          height="1em"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect
+            width="336"
+            height="336"
+            x="128"
+            y="128"
+            fill="none"
+            stroke-linejoin="round"
+            stroke-width="32"
+            rx="57"
+            ry="57"
+          ></rect>
+          <path
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="32"
+            d="M383.5 128l.5-24a56.16 56.16 0 00-56-56H112a64.19 64.19 0 00-64 64v216a56.16 56.16 0 0056 56h24"
+          ></path>
+        </svg>
+        COPY URL
+      </button>
     </div>
   );
 }

diff --git a/desktop/src/assets/success.svg b/desktop/src/assets/success.svg
diff --git 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})
-  }
+export function createQR(data: string) {
+  return new QRCodeStyling(getOptions(data));
+}
+
+export function updateQR(url: string, qr: QRCodeStyling) {
+  qr.update(getOptions(url));
+}