feat(webapp): granular JPEG Quality option instead of explicit TightLow and TightHigh pseudo-encodings (#1488)

Author: RRRadicalEdward

webapp/package-lock.json

@@ -32,7 +32,7 @@
     "@devolutions/icons": "4.0.8",
     "@devolutions/iron-remote-desktop": "0.9.0",
     "@devolutions/iron-remote-desktop-rdp": "^0.6.0",
-    "@devolutions/iron-remote-desktop-vnc": "^0.5.0",
+    "@devolutions/iron-remote-desktop-vnc": "^0.6.0",
     "@devolutions/terminal-shared": "^1.3.1",
     "@devolutions/web-ssh-gui": "^0.4.0",
     "@devolutions/web-telnet-gui": "^0.3.0",

webapp/package.json

@@ -44,6 +44,11 @@
                                             [inputFormData]="inputFormData"></web-client-enabled-encodings-control>
     </div>
 
+    <div class="col-12 gateway-form-group">
+        <web-client-jpeg-quality-level-control [parentForm]="form"
+                                               [inputFormData]="inputFormData"></web-client-jpeg-quality-level-control>
+    </div>
+
     <div class="col-12 gateway-form-group">
       <web-client-enable-cursor-control [parentForm]="form"
                                          [inputFormData]="inputFormData"></web-client-enable-cursor-control>

webapp/src/client/app/modules/web-client/form/form-components/vnc/vnc-form.component.html

@@ -0,0 +1,22 @@
+<div [formGroup]="parentForm">
+  <div class="gateway-form-input">
+      <p-checkbox formControlName="jpegEnabled"
+                  label="Use Tight JPEG"
+                  binary="true"
+                  (onChange)="toggleCheckbox()"></p-checkbox>
+  </div>
+
+  @if (jpegEnabled) {
+    <div class="gateway-sub-control">
+      <label for="jpegQualityLevel">JPEG Quality Level</label>
+      <div class="gateway-form-input">
+            <p-inputNumber formControlName="jpegQualityLevel"
+                           id="jpegQualityLevel"
+                           mode="decimal"
+                           [min]="0"
+                           [max]="9"
+                           [showButtons]="true"></p-inputNumber>
+      </div>
+    </div>
+  }
+</div>

webapp/src/client/app/modules/web-client/form/form-controls/jpeg-quality-level-control/jpeg-quality-level-control.component.html

@@ -0,0 +1,40 @@
+@import '../../../../../../../assets/css/style/mixins';
+@import "../../../../../../../assets/css/style/variables";
+@import "../../../../../../../assets/css/theme/theme-mode-variables";
+
+:host ::ng-deep p-inputNumber {
+  width: 50px;
+}
+
+.gateway-sub-control {
+  padding: 18px 0 0 0;
+}
+
+.gateway-form-input {
+  display: flex;
+  align-items: center;
+}
+
+.col-pad-right-lg {
+  padding-right: 15px !important;
+}
+.col-pad-right-md {
+  padding-right: 10px !important;
+}
+.col-pad-right-sm {
+  padding-right: 5px !important;
+}
+
+.form-helper-text {
+  line-height: 11px;
+  word-wrap: break-word;
+  color: var(--status-error-text-color);
+  font-size: 11px;
+  font-family: Open Sans;
+  font-weight: 400;
+  padding-left: 0;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 10px;
+  display: inline-flex;
+}

webapp/src/client/app/modules/web-client/form/form-controls/jpeg-quality-level-control/jpeg-quality-level-control.component.scss

@@ -0,0 +1,43 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+import { BaseComponent } from '@shared/bases/base.component';
+import { WebFormService } from '@shared/services/web-form.service';
+
+@Component({
+  selector: 'web-client-jpeg-quality-level-control',
+  templateUrl: 'jpeg-quality-level-control.component.html',
+  styleUrls: ['jpeg-quality-level-control.component.scss'],
+})
+export class JpegQualityLevelControlComponent extends BaseComponent implements OnInit {
+  @Input() parentForm: FormGroup;
+  @Input() inputFormData;
+
+  jpegEnabled = true;
+
+  constructor(private formService: WebFormService) {
+    super();
+  }
+
+  toggleCheckbox() {
+    this.jpegEnabled = !this.jpegEnabled;
+  }
+
+  ngOnInit(): void {
+    this.formService.addControlToForm({
+      formGroup: this.parentForm,
+      controlName: 'jpegEnabled',
+      inputFormData: this.inputFormData,
+      isRequired: false,
+      defaultValue: true,
+    });
+
+    this.formService.addControlToForm({
+      formGroup: this.parentForm,
+      controlName: 'jpegQualityLevel',
+      inputFormData: this.inputFormData,
+      isRequired: false,
+      defaultValue: 9,
+    });
+  }
+}

webapp/src/client/app/modules/web-client/form/form-controls/jpeg-quality-level-control/jpeg-quality-level-control.component.ts

@@ -34,6 +34,7 @@ import {
   enableCursor,
   enabledEncodings,
   enableExtendedClipboard,
+  jpegQualityLevel,
   ultraVirtualDisplay,
   wheelSpeedFactor,
 } from '@devolutions/iron-remote-desktop-vnc';
@@ -451,6 +452,8 @@ export class WebClientVncComponent extends WebClientBaseComponent implements OnI
       enableExtendedClipboard,
       enabledEncodings,
       ultraVirtualDisplay,
+      jpegEnabled,
+      jpegQualityLevel,
       wheelSpeedFactor = 1,
     } = formData;
     const extractedData: ExtractedHostnamePort = this.utils.string.extractHostnameAndPort(hostname, DefaultVncPort);
@@ -471,6 +474,7 @@ export class WebClientVncComponent extends WebClientBaseComponent implements OnI
       screenSize: desktopScreenSize,
       sessionId,
       enabledEncodings: enabledEncodings.join(','),
+      jpegQualityLevel: jpegEnabled ? jpegQualityLevel : undefined,
       enableCursor,
       enableExtendedClipboard: enableExtendedClipboard ?? false,
       ultraVirtualDisplay,
@@ -520,6 +524,10 @@ export class WebClientVncComponent extends WebClientBaseComponent implements OnI
       configBuilder.withExtension(enabledEncodings(Encoding.getAllEncodings().join(',')));
     }
 
+    if (connectionParameters.jpegQualityLevel != null) {
+      configBuilder.withExtension(jpegQualityLevel(connectionParameters.jpegQualityLevel));
+    }
+
     const config = configBuilder.build();
 
     this.setKeyboardUnicodeMode(true);

webapp/src/client/app/modules/web-client/vnc/web-client-vnc.component.ts

@@ -37,6 +37,7 @@ import { AutoClipboardControlComponent } from './form/form-controls/auto-clipboa
 import { EnabledEncodingsControlComponent } from './form/form-controls/enabled-encodings-control/enabled-encodings-control.component';
 import { ExtendedClipboardControlComponent } from './form/form-controls/extended-clipboard-control/extended-clipboard-control.component';
 import { FileControlComponent } from './form/form-controls/file-control/file-control.component';
+import { JpegQualityLevelControlComponent } from './form/form-controls/jpeg-quality-level-control/jpeg-quality-level-control.component';
 import { ResolutionQualityControlComponent } from './form/form-controls/resolution-quality-control/resolution-quality-control.component';
 import { UltraVirtualDisplayControlComponent } from './form/form-controls/ultra-virtual-display-control/ultra-virtual-display-control.component';
 import { NetScanComponent } from './net-scan/net-scan.component';
@@ -79,6 +80,7 @@ const routes: Routes = [
     UsernameControlComponent,
     PasswordControlComponent,
     ExtendedClipboardControlComponent,
+    JpegQualityLevelControlComponent,
     ScreenSizeControlComponent,
     EnableDisplayConfigurationControlComponent,
     KdcUrlControlComponent,

webapp/src/client/app/modules/web-client/web-client.module.ts

@@ -5,8 +5,6 @@ enum Encoding {
   Zlib = 'zlib',
   Hextile = 'hextile',
   Tight = 'tight',
-  JpegLow = 'jpeg-low',
-  JpegHigh = 'jpeg-high',
   TightPng = 'tight-png',
 }
 

webapp/src/client/app/shared/enums/encoding.enum.ts

@@ -36,6 +36,7 @@ export interface IronVNCConnectionParameters {
   token?: string;
   screenSize?: DesktopSize;
   enabledEncodings?: string;
+  jpegQualityLevel?: number;
   enableCursor: boolean;
   enableExtendedClipboard: boolean;
   ultraVirtualDisplay: boolean;