From 05ae21e7049cbf180b68ee4b943dcad5c8aed088 Mon Sep 17 00:00:00 2001
From: Brian Leighty <bfleighty@gmail.com>
Date: Mon, 20 May 2024 09:07:46 -0400
Subject: [PATCH] Fix broken device view and Improve manual ip address
 component (#570)

* Fix broken device view image capture

* Improve manual ip address component

---------

Co-authored-by: Brian Leighty <bleighty@tubi.tv>
---
 .../RokuDeviceViewViewProvider.ts             |  4 +--
 .../src/shared/OdcSetManualIpAddress.svelte   | 30 +++++++++++++------
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/viewProviders/RokuDeviceViewViewProvider.ts b/src/viewProviders/RokuDeviceViewViewProvider.ts
index ab493853..1460fa8e 100644
--- a/src/viewProviders/RokuDeviceViewViewProvider.ts
+++ b/src/viewProviders/RokuDeviceViewViewProvider.ts
@@ -34,10 +34,10 @@ export class RokuDeviceViewViewProvider extends BaseRdbViewProvider {
                     });
                 }
                 const result = await this.dependencies.rtaManager.device.getScreenshot();
-                this.createResponseMessage(message, {
+                this.postOrQueueMessage(this.createResponseMessage(message, {
                     success: true,
                     arrayBuffer: result.buffer.buffer
-                });
+                }));
             } catch (e) {
                 this.postOrQueueMessage(this.createResponseMessage(message, {
                     success: false
diff --git a/webviews/src/shared/OdcSetManualIpAddress.svelte b/webviews/src/shared/OdcSetManualIpAddress.svelte
index 58f302b3..c2c2d48e 100644
--- a/webviews/src/shared/OdcSetManualIpAddress.svelte
+++ b/webviews/src/shared/OdcSetManualIpAddress.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { Save } from 'svelte-codicons';
     import { ViewProviderCommand } from '../../../src/viewProviders/ViewProviderCommand';
     import { intermediary } from '../ExtensionIntermediary';
     import { utils } from '../utils';
@@ -7,9 +6,17 @@
     let ipAddress = utils.getStorageValue('manuallySetIpAddress', '');
     let password = utils.getStorageValue('manuallySetPassword', '');
 
-    function onSaveIpButtonClicked() {
+    function onIpAddressChange() {
+        ipAddress = this.value
         utils.setStorageValue('manuallySetIpAddress', ipAddress);
+    }
+
+    function onPasswordChange() {
+        password = this.value
         utils.setStorageValue('manuallySetPassword', password);
+    }
+
+    function onConnectClicked() {
         intermediary.sendCommand(ViewProviderCommand.setManualIpAddress, {
             host: ipAddress,
             password: password
@@ -31,19 +38,24 @@
                 <label for="ipAddress">IP Address</label>
             </td>
             <td>
-                <input
+                <vscode-text-field
                     id="ipAddress"
-                    class="fieldValue"
-                    bind:value={ipAddress} />
-            </td>
-            <td rowspan="2">
-                <button on:click={onSaveIpButtonClicked}><Save />&nbsp;<b>Apply</b></button>
+                    value={ipAddress}
+                    on:input={onIpAddressChange} />
             </td>
         </tr>
         <tr>
             <td> <label for="password">Password</label></td>
             <td>
-                <input id="password" class="fieldValue" bind:value={password} />
+                <vscode-text-field
+                    id="password"
+                    value={password}
+                    on:input={onPasswordChange} />
+            </td>
+        </tr>
+        <tr>
+            <td colspan="2">
+                <vscode-button on:click={onConnectClicked}>Connect</vscode-button>
             </td>
         </tr>
     </table>