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>
rokucommunity · May 20, 2024 · 05ae21e · 05ae21e
1 parent ec9da12
commit 05ae21e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 11 deletions.
diff --git 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
@@ -1,15 +1,22 @@
 <script lang="ts">
-    import { Save } from 'svelte-codicons';
     import { ViewProviderCommand } from '../../../src/viewProviders/ViewProviderCommand';
     import { intermediary } from '../ExtensionIntermediary';
     import { utils } from '../utils';
 
     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>