refactor(webapp): refactor VNC encoding selection settings

* refactor the encoding selector to is able to select one encoding at a time (we have the same in RDM)
* add `Default` encoding to the encoding selector list which defaults to sending all encodings to the server, and let it select one (we have the same in RDM)
* added logic to hide the `pixel format` option if _Tight JPEG_ or _Tight PNG_ is selected. These doesn't work well together as Devolutions/IronVNC#924 bug happens.
* removed _Tight PNG_ encoding from the encoding selector and added a checkbox with the same appearing only when `Tight` encoding is selected. _Tight PNG_ is more like an extension for _Tight_ (like `JPEG`), rather than a seperate thign. So, it makes sense to keep it as a setting for _Tight_ encoding.
 * added hiding `JPEG` option for other encodings than _Tight_, as it's only matters when _Tight_ is enabled.

Author: RRRadicalEdward

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

@@ -40,20 +40,39 @@
     </div>
 
     <div class="col-12 gateway-form-group">
-      <web-client-enabled-encodings-control [parentForm]="form"
-                                            [inputFormData]="inputFormData"></web-client-enabled-encodings-control>
+      <web-client-enabled-encoding-control
+        [parentForm]="form"
+        [inputFormData]="inputFormData"
+        (controlReady)="subscribeToSelectedEncodingChanges()"></web-client-enabled-encoding-control>
     </div>
 
-    <div class="col-12 gateway-form-group">
-      <web-client-color-format-control [parentForm]="form"
-        [inputFormData]="inputFormData"></web-client-color-format-control>
+    @if (showTightOptions) {
+      <div class="col-12 gateway-form-group">
+        <web-client-tight-png-enabled-control [parentForm]="form"
+                                              [inputFormData]="inputFormData"
+                                              (controlReady)="subscribeToPngEnabledChanges()"></web-client-tight-png-enabled-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>
+                                               [inputFormData]="inputFormData"
+                                               (controlReady)="subscribeToJpegEnabledChanges()"></web-client-jpeg-quality-level-control>
+      </div>
+    }
+
+    @if (showPixelFormatSelector) {
+      <div class="col-12 gateway-form-group">
+        <web-client-color-format-control [parentForm]="form"
+                                         [inputFormData]="inputFormData"
+                                         [disabled]="pixelFormatSelectorDisabled"
+                                         disabledTooltip="Tight JPEG and Tight PNG do not support custom pixel formats."
+        ></web-client-color-format-control>
+      </div>
+    }
 
     <div class="col-12 gateway-form-group">
       <web-client-enable-cursor-control [parentForm]="form"
-                                         [inputFormData]="inputFormData"></web-client-enable-cursor-control>
+                                        [inputFormData]="inputFormData"></web-client-enable-cursor-control>
     </div>
 
     <div *ngIf="showExtendedClipboardCheckbox" class="col-12 gateway-form-group">

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

@@ -2,6 +2,7 @@ import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 
 import { BaseComponent } from '@shared/bases/base.component';
+import { Encoding } from '@shared/enums/encoding.enum';
 import { VncAuthMode } from '@shared/enums/web-client-auth-mode.enum';
 import { WebFormService } from '@shared/services/web-form.service';
 import { SelectItem } from 'primeng/api';
@@ -14,6 +15,11 @@ interface FormInputVisibility {
   showPasswordInput?: boolean;
 }
 
+interface TightOptions {
+  jpeg: boolean;
+  png: boolean;
+}
+
 @Component({
   selector: 'vnc-form',
   templateUrl: 'vnc-form.component.html',
@@ -31,9 +37,16 @@ export class VncFormComponent extends BaseComponent implements OnInit {
   };
 
   showMoreSettings = false;
+  showPixelFormatSelector = false;
+  showTightOptions = false;
   showExtendedClipboardCheckbox = false;
   showAutoClipboardCheckbox = false;
 
+  pixelFormatSelectorDisabled = false;
+
+  selectedEncoding = Encoding.Default;
+  tightOptions: TightOptions = { jpeg: true, png: true };
+
   constructor(
     private formService: WebFormService,
     private cdr: ChangeDetectorRef,
@@ -97,6 +110,75 @@ export class VncFormComponent extends BaseComponent implements OnInit {
     this.showAutoClipboardCheckbox = new UAParser().getEngine().name === 'Blink' && window.isSecureContext;
   }
 
+  subscribeToSelectedEncodingChanges(): void {
+    this.form
+      .get('enabledEncoding')
+      .valueChanges.pipe(
+        takeUntil(this.destroyed$),
+        startWith(this.form.get('enabledEncoding').value as Encoding),
+        switchMap((encoding: Encoding) => {
+          this.showPixelFormatSelector = encoding !== Encoding.Default;
+          this.showTightOptions = encoding === Encoding.Tight;
+          this.selectedEncoding = encoding;
+
+          return of(undefined);
+        }),
+      )
+      .subscribe({
+        error: (error) => console.error('Failed to subscribe to selected encoding changes', error),
+      });
+  }
+
+  subscribeToJpegEnabledChanges(): void {
+    this.form
+      .get('jpegEnabled')
+      .valueChanges.pipe(
+        takeUntil(this.destroyed$),
+        startWith(this.form.get('jpegEnabled').value as boolean),
+        switchMap((jpegEnabled: boolean) => {
+          this.tightOptions.jpeg = jpegEnabled;
+          this.updatePixelFormatOptionState();
+          this.cdr.detectChanges();
+
+          return of(undefined);
+        }),
+      )
+      .subscribe({
+        error: (error) => console.error('Failed to subscribe to jpeg enabled changes', error),
+      });
+  }
+
+  subscribeToPngEnabledChanges(): void {
+    this.form
+      .get('pngEnabled')
+      .valueChanges.pipe(
+        takeUntil(this.destroyed$),
+        startWith(this.form.get('pngEnabled').value as boolean),
+        switchMap((pngEnabled: boolean) => {
+          this.tightOptions.png = pngEnabled;
+          this.updatePixelFormatOptionState();
+          this.cdr.detectChanges();
+
+          return of(undefined);
+        }),
+      )
+      .subscribe({
+        error: (error) => console.error('Failed to subscribe to jpeg enabled changes', error),
+      });
+  }
+
+  private updatePixelFormatOptionState(): void {
+    const { jpeg, png } = this.tightOptions;
+
+    // Disable PixelFormat option for Tight JPEG and Tight PNG.
+    if (this.selectedEncoding === Encoding.Tight && (jpeg || png)) {
+      this.pixelFormatSelectorDisabled = true;
+      return;
+    }
+
+    this.pixelFormatSelectorDisabled = false;
+  }
+
   private subscribeToAuthModeChanges(): void {
     this.form
       .get('authMode')

webapp/src/client/app/modules/web-client/form/form-controls/color-format-control/color-format-control.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { BaseComponent } from '@shared/bases/base.component';
 import { ColorFormat } from '@shared/enums/color-format.enum';
@@ -10,9 +10,11 @@ import { WebFormService } from '@shared/services/web-form.service';
   templateUrl: 'color-format-control.component.html',
   styleUrls: ['color-format-control.component.scss'],
 })
-export class ColorFormatControlComponent extends BaseComponent implements OnInit {
+export class ColorFormatControlComponent extends BaseComponent implements OnInit, OnDestroy, OnChanges {
   @Input() parentForm: FormGroup;
   @Input() inputFormData;
+  @Input() disabled: boolean;
+  @Input() disabledTooltip: string;
 
   colorFormatOptions: SelectItemWithTooltip[];
 
@@ -22,16 +24,51 @@ export class ColorFormatControlComponent extends BaseComponent implements OnInit
 
   ngOnInit(): void {
     this.colorFormatOptions = this.formService.getColorFormatOptions();
-    this.formService.addControlToForm({
-      formGroup: this.parentForm,
-      controlName: 'colorFormat',
-      inputFormData: this.inputFormData,
-      isRequired: false,
-      defaultValue: ColorFormat.Default,
-    });
+
+    if (!this.parentForm.contains('colorFormat')) {
+      this.formService.addControlToForm({
+        formGroup: this.parentForm,
+        controlName: 'colorFormat',
+        inputFormData: this.inputFormData,
+        isRequired: false,
+        defaultValue: ColorFormat.Default,
+      });
+    } else {
+      this.parentForm.get('colorFormat').enable();
+    }
+
+    if (this.disabled) {
+      this.parentForm.get('colorFormat').disable();
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const disabled = changes.disabled;
+    if (disabled) {
+      // First `ngOnChanges` runs before `ngOnInit`.
+      if (disabled.firstChange) {
+        return;
+      }
+
+      if (disabled.currentValue) {
+        this.parentForm.get('colorFormat').disable();
+      } else {
+        this.parentForm.get('colorFormat').enable();
+      }
+    }
+  }
+
+  ngOnDestroy() {
+    super.ngOnDestroy();
+    // Disable the control to ignore it when reading the form. At the same time, the value is preserved.
+    this.parentForm.get('colorFormat').disable();
   }
 
   getSelectedTooltip(): string {
+    if (this.disabled) {
+      return this.disabledTooltip;
+    }
+
     const selectedOptionValue = this.parentForm.get('colorFormat')?.value;
     return this.colorFormatOptions.find((item) => item.value === selectedOptionValue)?.tooltipText || '';
   }

webapp/src/client/app/modules/web-client/form/form-controls/enabled-encoding-control/enabled-encoding-control.component.html

@@ -0,0 +1,10 @@
+<div [formGroup]="parentForm">
+  <label for="enabledEncoding">Enabled Encoding</label>
+  <div class="gateway-form-input">
+    <p-dropdown id="enabledEncoding"
+                styleClass="full-with-dropdown"
+                appendTo="body"
+                formControlName="enabledEncoding"
+                [options]="supportedEncodings"/>
+  </div>
+</div>

webapp/src/client/app/modules/web-client/form/form-controls/enabled-encodings-control/enabled-encodings-control.component.scss renamed to webapp/src/client/app/modules/web-client/form/form-controls/enabled-encoding-control/enabled-encoding-control.component.scss

@@ -1,19 +1,21 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { Encoding } from '@gateway/shared/enums/encoding.enum';
 import { BaseComponent } from '@shared/bases/base.component';
 import { WebFormService } from '@shared/services/web-form.service';
 import { SelectItem } from 'primeng/api';
 
 @Component({
-  selector: 'web-client-enabled-encodings-control',
-  templateUrl: 'enabled-encodings-control.component.html',
-  styleUrls: ['enabled-encodings-control.component.scss'],
+  selector: 'web-client-enabled-encoding-control',
+  templateUrl: 'enabled-encoding-control.component.html',
+  styleUrls: ['enabled-encoding-control.component.scss'],
 })
-export class EnabledEncodingsControlComponent extends BaseComponent implements OnInit {
+export class EnabledEncodingControlComponent extends BaseComponent implements OnInit {
   @Input() parentForm: FormGroup;
   @Input() inputFormData;
 
+  @Output() controlReady = new EventEmitter<void>();
+
   supportedEncodings: SelectItem[];
 
   constructor(private formService: WebFormService) {
@@ -24,10 +26,12 @@ export class EnabledEncodingsControlComponent extends BaseComponent implements O
     this.supportedEncodings = this.formService.getSupportedEncodings();
     this.formService.addControlToForm({
       formGroup: this.parentForm,
-      controlName: 'enabledEncodings',
+      controlName: 'enabledEncoding',
       inputFormData: this.inputFormData,
       isRequired: false,
-      defaultValue: Encoding.getAllEncodings(),
+      defaultValue: Encoding.Default,
     });
+
+    this.controlReady.emit();
   }
 }

webapp/src/client/app/modules/web-client/form/form-controls/enabled-encodings-control/enabled-encodings-control.component.ts renamed to webapp/src/client/app/modules/web-client/form/form-controls/enabled-encoding-control/enabled-encoding-control.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 
 import { BaseComponent } from '@shared/bases/base.component';
@@ -9,10 +9,12 @@ import { WebFormService } from '@shared/services/web-form.service';
   templateUrl: 'jpeg-quality-level-control.component.html',
   styleUrls: ['jpeg-quality-level-control.component.scss'],
 })
-export class JpegQualityLevelControlComponent extends BaseComponent implements OnInit {
+export class JpegQualityLevelControlComponent extends BaseComponent implements OnInit, OnDestroy {
   @Input() parentForm: FormGroup;
   @Input() inputFormData;
 
+  @Output() controlReady = new EventEmitter<void>();
+
   jpegEnabled = true;
 
   constructor(private formService: WebFormService) {
@@ -24,20 +26,34 @@ export class JpegQualityLevelControlComponent extends BaseComponent implements O
   }
 
   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,
-    });
+    if (!this.parentForm.contains('jpegEnabled')) {
+      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,
+      });
+
+      this.controlReady.emit();
+    } else {
+      this.parentForm.get('jpegEnabled').enable();
+    }
+
+    this.jpegEnabled = this.parentForm.get('jpegEnabled').value;
+  }
+
+  ngOnDestroy() {
+    super.ngOnDestroy();
+    // Disable the control to ignore it when reading the form. At the same time, the value is preserved.
+    this.parentForm.get('jpegEnabled').disable();
   }
 }

webapp/src/client/app/modules/web-client/form/form-controls/enabled-encodings-control/enabled-encodings-control.component.html

@@ -0,0 +1,7 @@
+<div [formGroup]="parentForm">
+  <div class="gateway-form-input">
+      <p-checkbox formControlName="pngEnabled"
+                  label="Use Tight PNG"
+                  binary="true"></p-checkbox>
+  </div>
+</div>