Persist some viewer settings between sessions.

immense · Nov 14, 2020 · c338baa · c338baa
1 parent ce345ed
commit c338baa
Show file tree

Hide file tree

Showing 13 changed files with 121 additions and 56 deletions.
diff --git a/Server/wwwroot/src/RemoteControl/App.ts b/Server/wwwroot/src/RemoteControl/App.ts
@@ -8,6 +8,7 @@ import { MessageSender } from "./MessageSender.js";
 import { SessionRecorder } from "./SessionRecorder.js";
 import { ApplyInputHandlers } from "./InputEventHandlers.js";
 import { ViewerHubConnection } from "./ViewerHubConnection.js";
+import { GetSettings } from "./SettingsService.js";
 
 
 var queryString = Utilities.ParseSearchString();
@@ -24,8 +25,12 @@ export const ViewerApp = {
     ServiceID: queryString["serviceID"] ? decodeURIComponent(queryString["serviceID"]) : "",
     RequesterName: queryString["requesterName"] ? decodeURIComponent(queryString["requesterName"]) : "",
     Mode: RemoteControlMode.None,
+    Settings: GetSettings(),
 
     Init: () => {
+        UI.AutoQualityAdjustCheckBox.checked = ViewerApp.Settings.autoQualityEnabled;
+        UI.QualitySlider.value = String(ViewerApp.Settings.qualityLevel);
+
         ApplyInputHandlers();
 
         if (queryString["clientID"]) {

diff --git a/Server/wwwroot/src/RemoteControl/BaseDto.ts b/Server/wwwroot/src/RemoteControl/BaseDto.ts
diff --git a/Server/wwwroot/src/RemoteControl/DtoMessageHandler.ts b/Server/wwwroot/src/RemoteControl/DtoMessageHandler.ts
@@ -1,6 +1,6 @@
 import * as UI from "./UI.js";
 import { BaseDtoType } from "../Shared/Enums/BaseDtoType.js";
-import { BaseDto } from "./BaseDto.js";
+import { BaseDto } from "./Interfaces/BaseDto.js";
 import { ViewerApp } from "./App.js";
 import { ShowMessage } from "../Shared/UI.js";
 import { Sound } from "../Shared/Sound.js";
@@ -14,7 +14,7 @@ import {
     ScreenSizeDto,
     FileDto,
     WindowsSessionsDto
-} from "./Dtos.js";
+} from "./Interfaces/Dtos.js";
 import { ReceiveFile } from "./FileTransferService.js";
 
 
@@ -98,6 +98,8 @@ export class DtoMessageHandler {
     }
     HandleScreenData(screenDataDto: ScreenDataDto) {
         UI.UpdateDisplays(screenDataDto.SelectedScreen, screenDataDto.DisplayNames);
+        ViewerApp.MessageSender.SendAutoQualityAdjust(ViewerApp.Settings.autoQualityEnabled);
+        ViewerApp.MessageSender.SendQualityChange(ViewerApp.Settings.qualityLevel);
     }
 
     HandleScreenSize(screenSizeDto: ScreenSizeDto) {

diff --git a/Server/wwwroot/src/RemoteControl/FileTransferService.ts b/Server/wwwroot/src/RemoteControl/FileTransferService.ts
@@ -1,7 +1,7 @@
 import { FileTransferProgress, FileTransferInput, FileTransferNameSpan } from "./UI.js";
 import { ViewerApp } from "./App.js";
 import { ShowMessage } from "../Shared/UI.js";
-import { FileDto } from "./Dtos.js";
+import { FileDto } from "./Interfaces/Dtos.js";
 
 const PartialDownloads: Record<string, Array<Uint8Array>> = {};
 

diff --git a/Server/wwwroot/src/RemoteControl/InputEventHandlers.ts b/Server/wwwroot/src/RemoteControl/InputEventHandlers.ts
@@ -28,12 +28,11 @@
     RecordSessionButton,
     DownloadRecordingButton,
     VideoScreenViewer,
-
     StreamVideoButton,
-
     FileTransferBar,
     FileUploadButtton,
-    FileDownloadButton
+    FileDownloadButton,
+    UpdateStreamingToggled
 } from "./UI.js";
 import { Sound } from "../Shared/Sound.js";
 import { ViewerApp } from "./App.js";
@@ -42,6 +41,7 @@ import { UploadFiles } from "./FileTransferService.js";
 import { RemoteControlMode } from "../Shared/Enums/RemoteControlMode.js";
 import { GetDistanceBetween } from "../Shared/Utilities.js";
 import { ShowMessage } from "../Shared/UI.js";
+import { GetSettings, SetSettings } from "./SettingsService.js";
 
 var lastPointerMove = Date.now();
 var isDragging: boolean;
@@ -195,25 +195,29 @@ export function ApplyInputHandlers() {
         QualityBar.classList.toggle("open");
     })
     QualitySlider.addEventListener("change", (ev) => {
-        ViewerApp.MessageSender.SendQualityChange(Number(QualitySlider.value));
+        var value = Number(QualitySlider.value);
+
+        ViewerApp.Settings.qualityLevel = value;
+        SetSettings(ViewerApp.Settings);
+
+        ViewerApp.MessageSender.SendQualityChange(value);
     });
     StreamVideoButton.addEventListener("click", (ev) => {
-        StreamVideoButton.classList.toggle("toggled");
-        if (StreamVideoButton.classList.contains("toggled")) {
-            ViewerApp.MessageSender.SendToggleWebRtcVideo(true);
-            VideoScreenViewer.removeAttribute("hidden");
-            ScreenViewer.setAttribute("hidden", "hidden");
-            QualityButton.setAttribute("hidden", "hidden");
-        }
-        else {
-            ViewerApp.MessageSender.SendToggleWebRtcVideo(false);
-            ScreenViewer.removeAttribute("hidden");
-            QualityButton.removeAttribute("hidden");
-            VideoScreenViewer.setAttribute("hidden", "hidden");
-        }
+        var toggleOn = !StreamVideoButton.classList.contains("toggled");
+
+        ViewerApp.Settings.streamModeEnabled = toggleOn;
+        SetSettings(ViewerApp.Settings);
+
+        UpdateStreamingToggled(toggleOn);
+        ViewerApp.MessageSender.SendToggleWebRtcVideo(toggleOn);
     });
     AutoQualityAdjustCheckBox.addEventListener("change", ev => {
-        ViewerApp.MessageSender.SendAutoQualityAdjust(AutoQualityAdjustCheckBox.checked);
+        var checked = AutoQualityAdjustCheckBox.checked;
+
+        ViewerApp.Settings.autoQualityEnabled = checked;
+        SetSettings(ViewerApp.Settings);
+
+        ViewerApp.MessageSender.SendAutoQualityAdjust(checked);
     });
 
     [ ScreenViewer, VideoScreenViewer ].forEach(viewer => {

diff --git a/Server/wwwroot/src/RemoteControl/Interfaces/BaseDto.ts b/Server/wwwroot/src/RemoteControl/Interfaces/BaseDto.ts
@@ -0,0 +1,5 @@
+import { BaseDtoType } from "../../Shared/Enums/BaseDtoType.js";
+
+export interface BaseDto {
+    DtoType: BaseDtoType;
+}
diff --git a/Server/wwwroot/src/RemoteControl/Dtos.ts → ...root/src/RemoteControl/Interfaces/Dtos.ts b/Server/wwwroot/src/RemoteControl/Dtos.ts → ...root/src/RemoteControl/Interfaces/Dtos.ts
@@ -1,8 +1,6 @@
 import { BaseDto } from "./BaseDto.js";
-import { BaseDtoType } from "../Shared/Enums/BaseDtoType.js";
-import { CursorInfo } from "../Shared/Models/CursorInfo.js";
-import { Point } from "../Shared/Models/Point.js";
-import { WindowsSession } from "../Shared/Models/WindowsSession.js";
+import { BaseDtoType } from "../../Shared/Enums/BaseDtoType.js";
+import { WindowsSession } from "../../Shared/Models/WindowsSession.js";
 
 export class AutoQualityAdjustDto implements BaseDto {
     constructor(isOn: boolean) {

diff --git a/Server/wwwroot/src/RemoteControl/Interfaces/Settings.ts b/Server/wwwroot/src/RemoteControl/Interfaces/Settings.ts
@@ -0,0 +1,5 @@
+export interface Settings {
+    autoQualityEnabled: boolean;
+    qualityLevel: number;
+    streamModeEnabled: boolean;
+}
diff --git a/Server/wwwroot/src/RemoteControl/MessageSender.ts b/Server/wwwroot/src/RemoteControl/MessageSender.ts
@@ -19,7 +19,7 @@ import {
     WindowsSessionsDto,
     GenericDto,
     ToggleWebRtcVideoDto
-} from "./Dtos.js";
+} from "./Interfaces/Dtos.js";
 import { CreateGUID, When } from "../Shared/Utilities.js";
 import { FileTransferProgress } from "./UI.js";
 import { BaseDtoType } from "../Shared/Enums/BaseDtoType.js";

diff --git a/Server/wwwroot/src/RemoteControl/RtcSession.ts b/Server/wwwroot/src/RemoteControl/RtcSession.ts
@@ -55,6 +55,11 @@ export class RtcSession {
                 UI.ConnectionRelayedIcon.style.display = "none";
 
                 UI.StreamVideoButton.removeAttribute("hidden");
+
+                if (ViewerApp.Settings.streamModeEnabled) {
+                    UI.UpdateStreamingToggled(true);
+                    ViewerApp.MessageSender.SendToggleWebRtcVideo(true);
+                }
             };
         };
         this.PeerConnection.onconnectionstatechange = function (ev) {

diff --git a/Server/wwwroot/src/RemoteControl/SettingsService.ts b/Server/wwwroot/src/RemoteControl/SettingsService.ts
@@ -0,0 +1,29 @@
+import { ViewerApp } from "./App.js";
+import { Settings } from "./Interfaces/Settings.js";
+import { AutoQualityAdjustCheckBox, QualitySlider, UpdateStreamingToggled } from "./UI.js";
+
+const defaultSettings = {
+    autoQualityEnabled: true,
+    qualityLevel: 60,
+    streamModeEnabled: false
+};
+
+
+export function GetSettings(): Settings {
+    try {
+        var settings = localStorage.getItem("Viewer_Settings");
+        if (settings) {
+            return JSON.parse(settings);
+        }
+    }
+    catch (ex) {
+        console.error(ex);
+    }
+
+    SetSettings(defaultSettings);
+    return defaultSettings;
+}
+
+export function SetSettings(settings: Settings) {
+    localStorage.setItem("Viewer_Settings", JSON.stringify(settings));
+}
diff --git a/Server/wwwroot/src/RemoteControl/UI.ts b/Server/wwwroot/src/RemoteControl/UI.ts
@@ -100,6 +100,24 @@ export function SetScreenSize(width: number, height: number) {
     Screen2DContext.clearRect(0, 0, width, height);
 }
 
+export function ToggleConnectUI(shown: boolean) {
+    if (shown) {
+        Screen2DContext.clearRect(0, 0, ScreenViewer.width, ScreenViewer.height);
+        ScreenViewer.setAttribute("hidden", "hidden");
+        VideoScreenViewer.setAttribute("hidden", "hidden");
+        ConnectBox.style.removeProperty("display");
+        StreamVideoButton.classList.remove("toggled");
+        BlockInputButton.classList.remove("toggled");
+        AudioButton.classList.remove("toggled");
+    }
+    else {
+        ConnectButton.removeAttribute("disabled");
+        ConnectBox.style.display = "none";
+        ScreenViewer.removeAttribute("hidden");
+        StatusMessage.innerHTML = "";
+    }
+}
+
 export function UpdateCursor(imageBytes: Uint8Array, hotSpotX: number, hotSpotY: number, cssOverride: string) {
     var targetElement = GetCurrentViewer();
 
@@ -135,6 +153,21 @@ export function UpdateDisplays(selectedDisplay: string, displayNames: string[])
     }
 }
 
+export function UpdateStreamingToggled(toggleOn: boolean) {
+    if (toggleOn) {
+        StreamVideoButton.classList.add("toggled");
+        VideoScreenViewer.removeAttribute("hidden");
+        ScreenViewer.setAttribute("hidden", "hidden");
+        QualityButton.setAttribute("hidden", "hidden");
+    }
+    else {
+        StreamVideoButton.classList.remove("toggled");
+        ScreenViewer.removeAttribute("hidden");
+        QualityButton.removeAttribute("hidden");
+        VideoScreenViewer.setAttribute("hidden", "hidden");
+    }
+}
+
 export function UpdateWindowsSessions(windowsSessions: Array<WindowsSession>) {
     while (WindowsSessionSelect.options.length > 0) {
         WindowsSessionSelect.options.remove(0);

diff --git a/Server/wwwroot/src/RemoteControl/ViewerHubConnection.ts b/Server/wwwroot/src/RemoteControl/ViewerHubConnection.ts
@@ -1,15 +1,13 @@
 import * as UI from "./UI.js";
 import { ViewerApp } from "./App.js";
 import { CursorInfo } from "../Shared/Models/CursorInfo.js";
-import { Sound } from "../Shared/Sound.js";
 import { IceServerModel } from "../Shared/Models/IceServerModel.js";
 import { RemoteControlMode } from "../Shared/Enums/RemoteControlMode.js";
-import { GenericDto } from "./Dtos.js";
-import { ShowMessage, ShowModal } from "../Shared/UI.js";
-import { BaseDto } from "./BaseDto.js";
+import { GenericDto } from "./Interfaces/Dtos.js";
+import { ShowMessage } from "../Shared/UI.js";
+import { BaseDto } from "./Interfaces/BaseDto.js";
 import { WindowsSession } from "../Shared/Models/WindowsSession.js";
 import { BaseDtoType } from "../Shared/Enums/BaseDtoType.js";
-import { DtoMessageHandler } from "./DtoMessageHandler.js";
 
 var signalR = window["signalR"];
 
@@ -25,6 +23,8 @@ export class ViewerHubConnection {
     Connection: HubConnection;
     MessagePack: any = window['MessagePack'];
     PartialCaptureFrames: Uint8Array[] = [];
+
+
     Connect() {
         this.Connection = new signalR.HubConnectionBuilder()
             .withUrl("/ViewerHub")
@@ -36,15 +36,15 @@ export class ViewerHubConnection {
 
         this.Connection.start().then(() => {
             this.SendScreenCastRequestToDevice();
-            this.ToggleConnectUI(false);
+            UI.ToggleConnectUI(false);
         }).catch(err => {
             console.error(err.toString());
             console.log("Connection closed.");
             UI.StatusMessage.innerHTML = `Connection error: ${err.message}`;
-            this.ToggleConnectUI(true);
+            UI.ToggleConnectUI(true);
         });
         this.Connection.closedCallbacks.push((ev) => {
-            this.ToggleConnectUI(true);
+            UI.ToggleConnectUI(true);
         });
 
         ViewerApp.ClipboardWatcher.WatchClipboard();
@@ -77,23 +77,7 @@ export class ViewerHubConnection {
         this.Connection.invoke("SendScreenCastRequestToDevice", ViewerApp.ClientID, ViewerApp.RequesterName, ViewerApp.Mode, ViewerApp.Otp);
     }
 
-    ToggleConnectUI(shown: boolean) {
-        if (shown) {
-            UI.Screen2DContext.clearRect(0, 0, UI.ScreenViewer.width, UI.ScreenViewer.height);
-            UI.ScreenViewer.setAttribute("hidden", "hidden");
-            UI.VideoScreenViewer.setAttribute("hidden", "hidden");
-            UI.ConnectBox.style.removeProperty("display");
-            UI.StreamVideoButton.classList.remove("toggled");
-            UI.BlockInputButton.classList.remove("toggled");
-            UI.AudioButton.classList.remove("toggled");
-        }
-        else {
-            UI.ConnectButton.removeAttribute("disabled");
-            UI.ConnectBox.style.display = "none";
-            UI.ScreenViewer.removeAttribute("hidden");
-            UI.StatusMessage.innerHTML = "";
-        }
-    }
+
 
     private ApplyMessageHandlers(hubConnection) {
         hubConnection.on("SendDtoToBrowser", (dto: ArrayBuffer) => {