Refact. Flutter web, mid commit (#7494)

Signed-off-by: fufesou <shuanglongchen@yeah.net>

flutter/web/README.md

@@ -6,10 +6,12 @@
 
 - [x] Outgoing
 - [ ] Address book
+- [ ] Force relay
 
 ### Unsupported
 
 1. Incoming
 2. LAN
+3. Gpu texture render. We use WebGL instead.
 
 ### No plans

flutter/web/js/src/connection.ts

@@ -6,7 +6,7 @@ import * as sha256 from "fast-sha256";
 import * as globals from "./globals";
 import { decompress, mapKey, sleep } from "./common";
 
-const PORT = 21116;
+export const PORT = 21116;
 const HOSTS = [
   "rs-sg.rustdesk.com",
   "rs-cn.rustdesk.com",
@@ -15,7 +15,7 @@ const HOSTS = [
 let HOST = localStorage.getItem("rendezvous-server") || HOSTS[0];
 const SCHEMA = "ws://";
 
-type MsgboxCallback = (type: string, title: string, text: string) => void;
+type MsgboxCallback = (type: string, title: string, text: string, link: string) => void;
 type DrawCallback = (data: Uint8Array) => void;
 //const cursorCanvas = document.createElement("canvas");
 
@@ -41,6 +41,7 @@ export default class Connection {
     this._msgs = [];
     this._id = "";
     this._videoTestSpeed = [0, 0];
+    this._options = {};
     //this._cursors = {};
   }
 
@@ -318,8 +319,8 @@ export default class Connection {
     }
   }
 
-  msgbox(type_: string, title: string, text: string) {
-    this._msgbox?.(type_, title, text);
+  msgbox(type_: string, title: string, text: string, link: string = '') {
+    this._msgbox?.(type_, title, text, link);
   }
 
   draw(frame: any) {
@@ -541,9 +542,20 @@ export default class Connection {
     return this._options[name];
   }
 
+  getToggleOption(name: string): Boolean {
+    // TODO: more default settings
+    const defaultToggleTrue = [
+      'show-remote-cursor',
+      'privacy-mode',
+      'enable-file-transfer',
+      'allow_swap_key',
+    ];
+    return this._options[name] || (defaultToggleTrue.includes(name) ? true : false);
+  }
+
   // TODO:
   getStatus(): String {
-    return JSON.stringify({status_num: 10});
+    return JSON.stringify({ status_num: 10 });
   }
 
   // TODO:
@@ -558,8 +570,10 @@ export default class Connection {
     }
     this._options["tm"] = new Date().getTime();
     const peers = globals.getPeers();
-    peers[this._id] = this._options;
-    localStorage.setItem("peers", JSON.stringify(peers));
+    if (peers) {
+      peers[this._id] = this._options;
+      localStorage.setItem("peers", JSON.stringify(peers));
+    }
   }
 
   inputKey(

flutter/web/js/src/globals.js

@@ -1,4 +1,5 @@
 import Connection from "./connection";
+import PORT from "./connection";
 import _sodium from "libsodium-wrappers";
 import { CursorData } from "./message";
 import { loadVp9 } from "./codec";
@@ -16,11 +17,11 @@ export function isDesktop() {
   return !isMobile();
 }
 
-export function msgbox(type, title, text) {
+export function msgbox(type, title, text, link) {
   if (!type || (type == 'error' && !text)) return;
   const text2 = text.toLowerCase();
   var hasRetry = checkIfRetry(type, title, text) ? 'true' : '';
-  onGlobalEvent(JSON.stringify({ name: 'msgbox', type, title, text, hasRetry }));
+  onGlobalEvent(JSON.stringify({ name: 'msgbox', type, title, text, link: link ?? '', hasRetry }));
 }
 
 function jsonfyForDart(payload) {
@@ -257,13 +258,17 @@ window.setByName = (name, value) => {
       value = JSON.parse(value);
       localStorage.setItem(value.name, value.value);
       break;
-    case 'option:local':
+    case 'options':
       value = JSON.parse(value);
-      localStorage.setItem('option:local:' + value.name, value.value);
+      for (const [key, value] of Object.entries(value)) {
+        localStorage.setItem(key, value);
+      }
       break;
+    case 'option:local':
     case 'option:flutter:local':
+    case 'option:flutter:peer':
       value = JSON.parse(value);
-      localStorage.setItem('option:flutter:local:' + value.name, value.value);
+      localStorage.setItem(name + ':' + value.name, value.value);
       break;
     case 'peer_option':
       value = JSON.parse(value);
@@ -281,6 +286,14 @@ window.setByName = (name, value) => {
     case 'discover':
       // TODO: discover
       break;
+    case 'session_add_sync':
+      return sessionAdd(value);
+    case 'session_start':
+      sessionStart(value);
+      break;
+    case 'session_close':
+      sessionClose(value);
+      break;
     default:
       break;
   }
@@ -317,17 +330,32 @@ function _getByName(name, arg) {
       return curConn.getOption(arg) || false;
     case 'option':
       return localStorage.getItem(arg);
+    case 'options':
+      const keys = [
+        'custom-rendezvous-server',
+        'relay-server',
+        'api-server',
+        'key'
+      ];
+      const obj = {};
+      keys.forEach(key => {
+        const v = localStorage.getItem(key);
+        if (v) obj[key] = v;
+      });
+      return JSON.stringify(obj);
     case 'option:local':
-      return localStorage.getItem('option:local:' + arg);
     case 'option:flutter:local':
-      return localStorage.getItem('option:flutter:local:' + arg);
+    case 'option:flutter:peer':
+      return localStorage.getItem(name + ':' + arg);
     case 'image_quality':
       return curConn.getImageQuality();
     case 'translate':
       arg = JSON.parse(arg);
       return translate(arg.locale, arg.text);
-    case 'peer_option':
+    case 'option:peer':
       return curConn.getOption(arg);
+    case 'option:toggle':
+      return curConn.getToggleOption(arg);
     case 'get_conn_status':
       if (curConn) {
         return curConn.getStatus();
@@ -360,6 +388,8 @@ function _getByName(name, arg) {
       return localStorage.getItem('peers-recent') ?? '{}';
     case 'load_lan_peers_sync':
       return localStorage.getItem('peers-lan') ?? '{}';
+    case 'api_server':
+      return getApiServer();
   }
   return '';
 }
@@ -391,15 +421,15 @@ window.init = async () => {
 }
 
 export function getPeers() {
-  return _getJsonObj('peers');
+  return getJsonObj('peers');
 }
 
 export function getRecentPeers() {
-  return _getJsonObj('peers-recent');
+  return getJsonObj('peers-recent');
 }
 
 export function getLanPeers() {
-  return _getJsonObj('peers-lan');
+  return getJsonObj('peers-lan');
 }
 
 export function getJsonObj(key) {
@@ -456,3 +486,94 @@ function removeDiscovered(id) {
   }
 }
 // ========================== peers end ===========================
+
+// ========================== session begin ==========================
+function sessionAdd(value) {
+  try {
+    const data = JSON.parse(value);
+    window.curConn?.close();
+    const conn = new Connection();
+    if (data['password']) {
+      // TODO: encrypt password
+      conn.setOption('password', data['password'])
+    } else {
+      conn.setOption('password', undefined);
+    }
+    setConn(conn);
+    return '';
+  } catch (e) {
+    return e.message;
+  }
+}
+
+function sessionStart(value) {
+  try {
+    const conn = getConn();
+    if (!conn) {
+      return;
+    }
+
+    const data = JSON.parse(value);
+    if (data['id']) {
+      startConn(data['id']);
+    } else {
+      msgbox('error', 'Error', 'No id found in session data ' + value, '');
+    }
+  } catch (e) {
+    // TODO: better error handling
+    msgbox('error', 'Error', e.message, '');
+  }
+}
+
+function sessionClose(value) {
+  close();
+}
+// ========================== session end ===========================
+
+// ========================== settings begin ==========================
+function increasePort(host, offset) {
+  function isIPv6(str) {
+    const ipv6Pattern = /^([0-9a-fA-F]{0,4}:){1,7}[0-9a-fA-F]{0,4}$/;
+    return ipv6Pattern.test(str);
+  }
+
+  if (isIPv6(host)) {
+    if (host.startsWith('[')) {
+      let tmp = host.split(']:');
+      if (tmp.length === 2) {
+        let port = parseInt(tmp[1]) || 0;
+        if (port > 0) {
+          return `${tmp[0]}]:${port + offset}`;
+        }
+      }
+    }
+  } else if (host.includes(':')) {
+    let tmp = host.split(':');
+    if (tmp.length === 2) {
+      let port = parseInt(tmp[1]) || 0;
+      if (port > 0) {
+        return `${tmp[0]}:${port + offset}`;
+      }
+    }
+  }
+  return host;
+}
+
+function getApiServer() {
+  const api_server = localStorage.getItem('api-server');
+  if (api_server) {
+    return api_server;
+  }
+
+  const custom_rendezvous_server = localStorage.getItem('custom-rendezvous-server');
+  if (custom_rendezvous_server) {
+    let s = increasePort(custom_rendezvous_server, -2);
+    if (s == custom_rendezvous_server) {
+      return `http://${s}:${PORT - 2}`;
+    } else {
+      return `http://${s}`;
+    }
+  }
+  return 'https://admin.rustdesk.com';
+}
+// ========================== settings end ===========================