html: add trzsz support

Co-authored-by: Lonny Wong <lonnywong@qq.com>

html/package.json

@@ -49,6 +49,7 @@
     "decko": "^1.2.0",
     "file-saver": "^2.0.5",
     "preact": "^10.11.2",
+    "trzsz": "^0.4.3",
     "whatwg-fetch": "^3.6.2",
     "xterm": "^5.0.0",
     "xterm-addon-canvas": "^0.2.0",

html/src/components/zmodem/index.tsx

@@ -3,6 +3,7 @@ import { h, Component } from 'preact';
 import { saveAs } from 'file-saver';
 import { IDisposable, ITerminalAddon, Terminal } from 'xterm';
 import * as Zmodem from 'zmodem.js/src/zmodem_browser';
+import { TrzszFilter } from 'trzsz';
 
 import { Modal } from '../modal';
 
@@ -21,11 +22,10 @@ export class ZmodemAddon extends Component<Props, State> implements ITerminalAdd
     private keyDispose: IDisposable | undefined;
     private sentry: Zmodem.Sentry;
     private session: Zmodem.Session;
+    private trzszFilter: TrzszFilter;
 
     constructor(props: Props) {
         super(props);
-
-        this.zmodemInit();
     }
 
     render(_: Props, { modal }: State) {
@@ -45,13 +45,15 @@ export class ZmodemAddon extends Component<Props, State> implements ITerminalAdd
 
     activate(terminal: Terminal): void {
         this.terminal = terminal;
+        this.zmodemInit();
+        this.trzszInit();
     }
 
     dispose(): void {}
 
     consume(data: ArrayBuffer) {
         try {
-            this.sentry.consume(data);
+            this.trzszFilter.processServerOutput(data);
         } catch (e) {
             this.handleError(e, 'consume');
         }
@@ -63,6 +65,36 @@ export class ZmodemAddon extends Component<Props, State> implements ITerminalAdd
         this.zmodemReset();
     }
 
+    @bind
+    private trzszInit() {
+        this.trzszFilter = new TrzszFilter({
+            writeToTerminal: (data: string | ArrayBuffer | Uint8Array | Blob) => this.trzszWrite(data),
+            sendToServer: (data: string | Uint8Array) => this.trzszSend(data),
+            terminalColumns: this.terminal.cols,
+        });
+        this.terminal.onResize((size: { cols: number; rows: number }) => {
+            this.trzszFilter.setTerminalColumns(size.cols);
+        });
+    }
+
+    @bind
+    private trzszWrite(data: string | ArrayBuffer | Uint8Array | Blob) {
+        if (this.trzszFilter.isTransferringFiles()) {
+            this.props.writer(data as string);
+        } else {
+            this.sentry.consume(data as ArrayBuffer);
+        }
+    }
+
+    @bind
+    private trzszSend(data: string | Uint8Array) {
+        if (this.trzszFilter.isTransferringFiles()) {
+            this.props.sender(data);
+        } else {
+            this.props.writer(data as string);
+        }
+    }
+
     @bind
     private zmodemInit() {
         this.session = null;
@@ -158,7 +190,6 @@ export class ZmodemAddon extends Component<Props, State> implements ITerminalAdd
     @bind
     private writeProgress(offer: Zmodem.Offer) {
         const { bytesHuman } = this;
-
         const file = offer.get_details();
         const name = file.name;
         const size = file.size;

html/yarn.lock

@@ -6580,6 +6580,11 @@ trim-newlines@^2.0.0:
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-2.0.0.tgz#b403d0b91be50c331dfc4b82eeceb22c3de16d20"
   integrity sha1-tAPQuRvlDDMd/EuC7s6yLD3hbSA=
 
+trzsz@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/trzsz/-/trzsz-0.4.3.tgz#936ff6714c3dc194448d9e091240d615b4e62bb8"
+  integrity sha512-OcOOPM7XN9kNxjuABsxBv8Zyd9pNi9qfXNW8Ad+30BcGmxZI89wRG/Am38hWw2MOiLoqi3SAch7uysqUCG36Gg==
+
 ts-loader@^9.4.1:
   version "9.4.1"
   resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-9.4.1.tgz#b6f3d82db0eac5a8295994f8cb5e4940ff6b1060"