feat: implement pointer-lock and keyboard-lock (#352)

* feat: implement pointer-lock and keyboard-lock

* feat: Add Pointer lock functionality and SSL support in dev mode

- Introduced @vitejs/plugin-basic-ssl for enabling SSL in development.
- Added a new script `dev:ssl` to run the development server with SSL.
- Implemented pointer lock feature in the WebRTCVideo component, enhancing user interaction.
- Added a PointerLockBar component to guide users on enabling mouse control.
- Cleaned up the VideoOverlay and WebRTCVideo components for better readability and functionality.

---------

Co-authored-by: Adam Shiervani <adam.shiervani@gmail.com>

ui/vite.config.ts

@@ -1,23 +1,32 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import tsconfigPaths from "vite-tsconfig-paths";
+import basicSsl from "@vitejs/plugin-basic-ssl";
 
 declare const process: {
   env: {
     JETKVM_PROXY_URL: string;
+    USE_SSL: string;
   };
 };
 
 export default defineConfig(({ mode, command }) => {
   const isCloud = mode.indexOf("cloud") !== -1;
   const onDevice = mode === "device";
-  const { JETKVM_PROXY_URL } = process.env;
+  const { JETKVM_PROXY_URL, USE_SSL } = process.env;
+  const useSSL = USE_SSL === "true";
+
+  const plugins = [tsconfigPaths(), react()];
+  if (useSSL) {
+    plugins.push(basicSsl());
+  }
 
   return {
-    plugins: [tsconfigPaths(), react()],
+    plugins,
     build: { outDir: isCloud ? "dist" : "../static" },
     server: {
       host: "0.0.0.0",
+      https: useSSL,
       proxy: JETKVM_PROXY_URL
         ? {
             "/me": JETKVM_PROXY_URL,