UI: Allow to rotate left and right

Bug: 232574264
Test: locally
Change-Id: Ia21a9efc1ddc550749500d9ef1015b6ce6f600a7

2 files changed, 24 insertions, 11 deletions

diff --git a/host/frontend/webrtc/client/client.html b/host/frontend/webrtc/client/client.html
index ca0a0114e..36e80b721 100644
--- a/host/frontend/webrtc/client/client.html
+++ b/host/frontend/webrtc/client/client.html
@@ -57,7 +57,8 @@
             <button id='back_btn' title='Back' disabled='true' class='material-icons'>arrow_back</button>
             <button id='home_btn' title='Home' disabled='true' class='material-icons'>home</button>
             <button id='menu_btn' title='Menu' disabled='true' class='material-icons'>menu</button>
-            <button id='rotate_btn' title='Rotate' disabled='true' class='material-icons' data-adb="true">screen_rotation</button>
+            <button id='rotate_left_btn' title='Rotate left' disabled='true' class='material-icons' data-adb="true">rotate_90_degrees_ccw</button>
+            <button id='rotate_right_btn' title='Rotate right' disabled='true' class='material-icons' data-adb="true">rotate_90_degrees_cw</button>
             <button id='volume_up_btn' title='Volume up' disabled='true' class='material-icons'>volume_up</button>
             <button id='volume_down_btn' title='Volume down' disabled='true' class='material-icons'>volume_down</button>
             <button id='mic_btn' title='Microphone' disabled='true' class='material-icons'>mic</button>
diff --git a/host/frontend/webrtc/client/js/app.js b/host/frontend/webrtc/client/js/app.js
index 8526862c7..2cd6cfe08 100644
--- a/host/frontend/webrtc/client/js/app.js
+++ b/host/frontend/webrtc/client/js/app.js
@@ -148,8 +148,11 @@ class DeviceControlApp {
         document.querySelector('#menu_btn'),
         evt => this.#onControlPanelButton(evt, 'menu'));
     addMouseListeners(
-        document.querySelector('#rotate_btn'),
-        evt => this.#onRotateButton(evt, 'rotate'));
+        document.querySelector('#rotate_left_btn'),
+        evt => this.#onRotateLeftButton(evt, 'rotate'));
+    addMouseListeners(
+        document.querySelector('#rotate_right_btn'),
+        evt => this.#onRotateRightButton(evt, 'rotate'));
     addMouseListeners(
         document.querySelector('#volume_up_btn'),
         evt => this.#onControlPanelButton(evt, 'volumeup'));
@@ -387,7 +390,7 @@ class DeviceControlApp {
   }
 
   #rotateDisplays(rotation) {
-    if (rotation == this.#currentRotation) {
+    if ((rotation - this.#currentRotation) % 360 == 0) {
       return;
     }
 
@@ -420,7 +423,7 @@ class DeviceControlApp {
           `${deviceDisplayDescription.y_res} ` +
           `(${deviceDisplayDescription.dpi} DPI)`;
       if (this.#currentRotation != 0) {
-        text += ` (Rotated ${this.currentRotation}deg)`
+        text += ` (Rotated ${this.#currentRotation}deg)`
       }
       l.textContent = text;
     });
@@ -565,15 +568,24 @@ class DeviceControlApp {
     this.#initializeAdb();
   }
 
-  #onRotateButton(e) {
+  #onRotateLeftButton(e) {
+    if (e.type == 'mousedown') {
+      this.#onRotateButton(this.#currentRotation + 90);
+    }
+  }
+
+  #onRotateRightButton(e) {
+    if (e.type == 'mousedown') {
+      this.#onRotateButton(this.#currentRotation - 90);
+    }
+  }
+
+  #onRotateButton(rotation) {
     // Attempt to init adb again, in case the initial connection failed.
     // This succeeds immediately if already connected.
     this.#initializeAdb();
-    if (e.type == 'mousedown') {
-      adbShell(
-          '/vendor/bin/cuttlefish_sensor_injection rotate ' +
-          (this.#currentRotation == 0 ? '90' : '0'));
-    }
+    this.#rotateDisplays(rotation);
+    adbShell(`/vendor/bin/cuttlefish_sensor_injection rotate ${rotation}`);
   }
 
   #onControlPanelButton(e, command) {