From 1bc2feec92abd7ce573ff8c2a6373e1e790cd011 Mon Sep 17 00:00:00 2001
From: Ubuntu <howardzchung@gmail.com>
Date: Mon, 18 Mar 2024 07:40:51 +0000
Subject: [PATCH] add ui elements for bitrate

---
 src/components/App/App.tsx           | 46 ++++++++++++++++++++++++++++
 src/components/VBrowser/VBrowser.tsx | 19 +++++++++---
 src/components/VBrowser/index.ts     |  3 +-
 src/components/VBrowser/types.d.ts   |  1 +
 4 files changed, 64 insertions(+), 5 deletions(-)

diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index 6f241d4e66..20348b586b 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -125,6 +125,7 @@ interface AppState {
   isErrorAuth: boolean;
   settings: Settings;
   vBrowserResolution: string;
+  vBrowserQuality: string;
   isVBrowserLarge: boolean;
   nonPlayableMedia: boolean;
   currentTab: string;
@@ -189,6 +190,7 @@ export default class App extends React.Component<AppProps, AppState> {
     isErrorAuth: false,
     settings: {},
     vBrowserResolution: '1280x720@30',
+    vBrowserQuality: '1',
     isVBrowserLarge: false,
     nonPlayableMedia: false,
     currentTab:
@@ -431,6 +433,7 @@ export default class App extends React.Component<AppProps, AppState> {
           nonPlayableMedia: false,
           isVBrowserLarge: data.isVBrowserLarge,
           vBrowserResolution: '1280x720@30',
+          vBrowserQuality: '1',
           controller: data.controller,
           isLiveHls: false,
         },
@@ -2276,6 +2279,45 @@ export default class App extends React.Component<AppProps, AppState> {
                             ]}
                           ></Dropdown>
                         )}
+                        {this.playingVBrowser() && (
+                          <Dropdown
+                            icon="chart area"
+                            labeled
+                            className="icon"
+                            style={{ height: '36px' }}
+                            button
+                            disabled={!this.haveLock()}
+                            value={this.state.vBrowserQuality}
+                            onChange={(_e, data) => {
+                              this.setState({
+                                vBrowserQuality: data.value as string,
+                              });
+                            }}
+                            selection
+                            options={[
+                              {
+                                text: 'Eco',
+                                value: '0.25',
+                              },
+                              {
+                                text: 'Low',
+                                value: '0.5',
+                              },
+                              {
+                                text: 'Standard',
+                                value: '1',
+                              },
+                              {
+                                text: 'High',
+                                value: '1.5',
+                              },
+                              {
+                                text: 'Ultra',
+                                value: '2',
+                              },
+                            ]}
+                          ></Dropdown>
+                        )}
                         {this.playingVBrowser() && (
                           <Button
                             fluid
@@ -2401,10 +2443,14 @@ export default class App extends React.Component<AppProps, AppState> {
                           hostname={this.getVBrowserHost()}
                           controlling={this.state.controller === this.socket.id}
                           resolution={this.state.vBrowserResolution}
+                          quality={this.state.vBrowserQuality}
                           doPlay={this.localPlay}
                           setResolution={(data: string) =>
                             this.setState({ vBrowserResolution: data })
                           }
+                          setQuality={(data: string) => {
+                            this.setState({ vBrowserQuality: data });
+                          }}
                         />
                       ) : (
                         <video
diff --git a/src/components/VBrowser/VBrowser.tsx b/src/components/VBrowser/VBrowser.tsx
index f67b92f065..56274d445b 100644
--- a/src/components/VBrowser/VBrowser.tsx
+++ b/src/components/VBrowser/VBrowser.tsx
@@ -14,6 +14,8 @@ export default class VBrowser extends React.Component<{
   controlling: boolean;
   resolution: string;
   setResolution: (resolution: string) => void;
+  quality: string;
+  setQuality: (quality: string) => void;
   doPlay: () => Promise<void>;
 }> {
   // private observer = new ResizeObserver(this.onResize);
@@ -58,6 +60,7 @@ export default class VBrowser extends React.Component<{
       this.rate = data.rate;
       // Update our state with the resolution sent from server
       this.props.setResolution(`${this.width}x${this.height}@${this.rate}`);
+      this.props.setQuality(String(data.quality));
     });
     this.$client.on(EVENT.TRACK, async (track: MediaStreamTrack, stream) => {
       // console.log(track, streams);
@@ -124,8 +127,11 @@ export default class VBrowser extends React.Component<{
     if (this.props.controlling && !prevProps.controlling) {
       this.takeControl();
     }
-    if (this.props.resolution !== prevProps.resolution) {
-      this.changeResolution(this.props.resolution);
+    if (
+      this.props.resolution !== prevProps.resolution ||
+      (this.props.quality && this.props.quality !== prevProps.quality)
+    ) {
+      this.changeResolution(this.props.resolution, this.props.quality);
     }
   }
 
@@ -145,12 +151,17 @@ export default class VBrowser extends React.Component<{
     }
   };
 
-  changeResolution = (resString: string) => {
+  changeResolution = (resString: string, quality: string) => {
     const split = resString.split(/x|@/);
     const width = Number(split[0]);
     const height = Number(split[1]);
     const rate = Number(split[2]);
-    this.$client.sendMessage(EVENT.SCREEN.SET, { width, height, rate });
+    this.$client.sendMessage(EVENT.SCREEN.SET, {
+      width,
+      height,
+      rate,
+      quality: Number(quality),
+    });
   };
 
   onClipboardChanged(clipboard: string) {
diff --git a/src/components/VBrowser/index.ts b/src/components/VBrowser/index.ts
index 07441fa44d..938b02250a 100644
--- a/src/components/VBrowser/index.ts
+++ b/src/components/VBrowser/index.ts
@@ -98,8 +98,9 @@ export class NekoClient extends BaseClient implements EventEmitter<any> {
     width,
     height,
     rate,
+    quality,
   }: ScreenResolutionPayload) {
-    this.emit(EVENT.SCREEN.RESOLUTION, { width, height, rate });
+    this.emit(EVENT.SCREEN.RESOLUTION, { width, height, rate, quality });
   }
 }
 
diff --git a/src/components/VBrowser/types.d.ts b/src/components/VBrowser/types.d.ts
index 2314724eff..76da7d7f44 100644
--- a/src/components/VBrowser/types.d.ts
+++ b/src/components/VBrowser/types.d.ts
@@ -21,4 +21,5 @@ export interface ScreenResolution {
   width: number;
   height: number;
   rate: number;
+  quality: number;
 }