working version

desktop/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@tauri-apps/api": "^1.4.0",
     "peerjs": "^1.5.1",
+    "qr-code-styling": "^1.6.0-rc.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -21,6 +22,7 @@
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.0.3",
     "autoprefixer": "^10.4.16",
+    "daisyui": "^4.4.2",
     "postcss": "^8.4.31",
     "tailwindcss": "^3.3.5",
     "typescript": "^5.0.2",

desktop/src-tauri/Cargo.toml

@@ -16,7 +16,7 @@ tauri-build = { version = "1.4", features = [] }
 tauri = { version = "1.4", features = ["shell-open"] }
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
-enigo = "0.1.3"
+enigo = { version = "0.1.3", features = ["serde_derive", "serde", "with_serde"] }
 
 [features]
 # this feature is used for production builds or when `devPath` points to the filesystem

desktop/src-tauri/src/main.rs

@@ -1,15 +1,39 @@
 // Prevents additional console window on Windows in release, DO NOT REMOVE!!
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
+use enigo::*;
+use std::sync::Mutex;
+use tauri::State;
+
 // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
 #[tauri::command]
 fn greet(name: &str) -> String {
     format!("Hello, {}! You've been greeted from Rust!", name)
 }
 
+struct Controller(Mutex<Enigo>);
+
+#[tauri::command]
+fn press(controller: State<'_, Controller>, key: &str) {
+    let mut controller = (&controller.0).lock().unwrap();
+    match key {
+        "VOL_UP" => {
+            controller.key_down(Key::VolumeUp);
+        },
+        "VOL_DN" => {
+            controller.key_down(Key::VolumeDown);
+        },
+        _ => {}
+    }
+}
+
+
 fn main() {
+    let controller = Enigo::new();
+
     tauri::Builder::default()
-        .invoke_handler(tauri::generate_handler![greet])
+        .manage(Controller(Mutex::new(controller)))
+        .invoke_handler(tauri::generate_handler![press])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }

desktop/src/App.tsx

@@ -1,21 +1,84 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { invoke } from "@tauri-apps/api/tauri";
-import { Peer } from "peerjs";
+import { DataConnection, Peer } from "peerjs";
+import QRCodeStyling from "qr-code-styling";
+import { createQR } from "./qr";
+import { BASE_URL } from "./config";
 
-import "./App.css";
+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 Action {
+  VOL_UP,
+  VOL_DN
+}
+interface Message {
+  action: Action
+}
 
 function App() {
-  const [greetMsg, setGreetMsg] = useState("");
+  const [peer, setPeer] = useState(new Peer());
+  const [id, setId] = useState('')
+  const [conn, setConn] = useState<DataConnection | null>(null)
   const [name, setName] = useState("");
+  const qrDiv = useRef<any>()
+
+
+    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])
+
 
-  async function greet() {
-    // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
-    setGreetMsg(await invoke("greet", { name }));
+
+  function onConnect(connection: DataConnection) {
+
+    setConn(connection)
   }
 
+
+  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)
+  }, [])
+
+
+
   return (
     <div className="container">
-
+      <div>address is {id}</div>
+      <div>connection is from {conn?.connectionId}</div>
+      <div ref={qrDiv} />
     </div>
   );
 }

desktop/src/config.ts

@@ -0,0 +1 @@
+export const BASE_URL = 'https://thewh1teagle.github.io/mobslide/'

desktop/src/main.tsx

@@ -4,7 +4,5 @@ import App from "./App";
 import "./main.css";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <React.StrictMode>
     <App />
-  </React.StrictMode>,
 );

desktop/src/qr.ts

@@ -0,0 +1,37 @@
+import QRCodeStyling, {Options} from "qr-code-styling";
+
+const options: Options = {
+    width: 300,
+    height: 300,
+    data: "",
+    margin: 0,
+    qrOptions: {
+
+      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"
+    },
+  }
+
+  export function createQR(data: string) {
+    return new QRCodeStyling({...options, data})
+  }

desktop/tailwind.config.js

@@ -1,3 +1,5 @@
+import daisyui from 'daisyui'
+
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
@@ -7,6 +9,6 @@ export default {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [daisyui],
 }