finish up roku automation panel

rokucommunity · Aug 7, 2023 · 6705371 · 6705371
1 parent fba7124
commit 6705371
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 87 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -72,7 +72,7 @@
         "pretty-bytes": "^5.6.0",
         "roku-debug": "^0.19.1",
         "roku-deploy": "^3.10.2",
-        "roku-test-automation": "^2.0.0-beta.19",
+        "roku-test-automation": "^2.0.0-beta.20",
         "semver": "^7.1.3",
         "source-map": "^0.7.3",
         "thenby": "^1.3.4",
@@ -213,6 +213,11 @@
                     "id": "rokuCommandsView",
                     "name": "Roku Commands",
                     "type": "webview"
+                },
+                {
+                    "id": "rokuAutomationView",
+                    "name": "Roku Automation",
+                    "type": "webview"
                 }
             ]
         },
@@ -289,6 +294,16 @@
                     "command": "extension.brightscript.rokuDeviceView.disableNodeInspector",
                     "when": "view == rokuDeviceView && brightscript.isOnDeviceComponentAvailable && brightscript.rokuDeviceView.isInspectingNodes",
                     "group": "navigation@3"
+                },
+                {
+                    "command": "extension.brightscript.rokuAutomation.startRecording",
+                    "when": "view == rokuAutomationView && !brightscript.rokuAutomationView.isRecording",
+                    "group": "navigation"
+                },
+                {
+                    "command": "extension.brightscript.rokuAutomation.stopRecording",
+                    "when": "view == rokuAutomationView && brightscript.rokuAutomationView.isRecording",
+                    "group": "navigation"
                 }
             ],
             "commandPalette": []
@@ -2529,6 +2544,18 @@
                 "category": "BrighterScript",
                 "icon": "$(arrow-up)"
             },
+            {
+                "command": "extension.brightscript.rokuAutomation.startRecording",
+                "title": "Start Recording",
+                "category": "BrighterScript",
+                "icon": "$(record)"
+            },
+            {
+                "command": "extension.brightscript.rokuAutomation.stopRecording",
+                "title": "Stop Recording",
+                "category": "BrighterScript",
+                "icon": "$(debug-stop)"
+            },
             {
                 "command": "extension.brightscript.languageServer.restart",
                 "title": "Restart Language Server",

diff --git a/src/commands/VscodeCommand.ts b/src/commands/VscodeCommand.ts
@@ -9,5 +9,7 @@ export enum VscodeCommand {
     rokuRegistryClearRegistry = 'extension.brightscript.rokuRegistry.clearRegistry',
     rokuRegistryRefreshRegistry = 'extension.brightscript.rokuRegistry.refreshRegistry',
     rokuAutomationStartRecording = 'extension.brightscript.rokuAutomation.startRecording',
-    rokuAutomationStopRecording = 'extension.brightscript.rokuAutomation.stopRecording'
+    rokuAutomationStopRecording = 'extension.brightscript.rokuAutomation.stopRecording',
+    enableRemoteControlMode = 'extension.brightscript.enableRemoteControlMode',
+    disableRemoteControlMode = 'extension.brightscript.disableRemoteControlMode'
 }
diff --git a/src/managers/RemoteControlManager.ts b/src/managers/RemoteControlManager.ts
@@ -1,6 +1,7 @@
 import * as vscode from 'vscode';
 import { vscodeContextManager } from './VscodeContextManager';
 import type { TelemetryManager } from './TelemetryManager';
+import { VscodeCommand } from '../commands/VscodeCommand';
 
 export class RemoteControlManager {
     constructor(
@@ -70,6 +71,11 @@ export class RemoteControlManager {
     }
 
     public async setRemoteControlMode(isEnabled: boolean, initiator: RemoteControlModeInitiator) {
+        if (this.isEnabled && !isEnabled) {
+            // Want to also stop Roku automation recording if it was running
+            await vscode.commands.executeCommand(VscodeCommand.rokuAutomationStopRecording);
+        }
+
         //only send a telemetry event if we know who initiated the mode. `undefined` usually means our internal system set the value...so don't track that
         if (initiator) {
             this.telemetryManager.sendSetRemoteControlModeEvent(isEnabled, initiator);

diff --git a/src/viewProviders/RokuAutomationViewViewProvider.ts b/src/viewProviders/RokuAutomationViewViewProvider.ts
@@ -44,20 +44,29 @@ export class RokuAutomationViewViewProvider extends BaseRdbViewProvider {
         const subscriptions = context.subscriptions;
 
         subscriptions.push(vscode.commands.registerCommand(VscodeCommand.rokuAutomationStartRecording, async () => {
-            // TODO decide how to handle initiator
-            await vscode.commands.executeCommand('extension.brightscript.enableRemoteControlMode');
-            await this.setIsRecording(true);
+            if (this.currentRunningStep === -1) {
+                // Only allow recording when we aren't currently running
+                await this.setIsRecording(true);
+
+                // TODO decide how to handle initiator
+                await vscode.commands.executeCommand(VscodeCommand.enableRemoteControlMode);
+
+                // We reset the current step to update the timestamp of the first sleep
+                this.updateCurrentRunningStep(-1);
+            }
         }));
 
         subscriptions.push(vscode.commands.registerCommand(VscodeCommand.rokuAutomationStopRecording, async () => {
-            await vscode.commands.executeCommand('extension.brightscript.disableRemoteControlMode');
-            await this.setIsRecording(false);
+            if (this.isRecording) {
+                await this.setIsRecording(false);
+                // TODO decide how to handle initiator
+                await vscode.commands.executeCommand(VscodeCommand.disableRemoteControlMode);
+            }
         }));
     }
 
     private async setIsRecording(isRecording) {
         this.isRecording = isRecording;
-        // TODO decide how to handle initiator
         await vscodeContextManager.set('brightscript.rokuAutomationView.isRecording', isRecording);
     }
 

diff --git a/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte b/webviews/src/views/RokuAutomationView/RokuAutomationView.svelte
@@ -1,7 +1,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <script lang="ts">
     import { odc, intermediary } from '../../ExtensionIntermediary';
-    import { Trash, Add, Grabber } from 'svelte-codicons';
+    import { Trash, Add, ArrowUp, ArrowDown } from 'svelte-codicons';
     import { ViewProviderEvent } from '../../../../src/viewProviders/ViewProviderEvent';
     import { ViewProviderCommand } from '../../../../src/viewProviders/ViewProviderCommand';
 
@@ -119,9 +119,20 @@
         });
     }
 
+    function moveStepUp() {
+        const step = steps.splice(this.id, 1)[0];
+        steps.splice(this.id - 1, 0, step);
+        storeConfigs(steps);
+    }
+
+    function moveStepDown() {
+        const step = steps.splice(this.id, 1)[0];
+        steps.splice(this.id + 1, 0, step);
+        storeConfigs(steps);
+    }
+
     function onKeydown(event) {
         const key = event.key;
-console.log('onKeydown', key);
 
         switch (key) {
             case 'Escape':
@@ -134,6 +145,7 @@ console.log('onKeydown', key);
         const configs = message.context.configs;
         if (configs) {
             const config = configs[0];
+            console.log('config.steps', config.steps);
             steps = config.steps;
             autorunOnDeploy = message.context.autorunOnDeploy;
             console.log('autorunOnDeploy', autorunOnDeploy);
@@ -171,7 +183,6 @@ console.log('elapsedTime', elapsedTime);
         });
     }
 
-
     intermediary.observeEvent(ViewProviderEvent.onRokuAutomationKeyPressed, (message) => {
         let {key, literalCharacter} = message.context;
         console.log('key', key);
@@ -200,62 +211,25 @@ console.log('elapsedTime', elapsedTime);
         lastStepDate = Date.now();
     });
 
-    let hoveringIndex = -1;
-
-    function drop(event) {
-        debugger;
-        const target = 0
-        console.log('event', event);
-        console.log('target', target);
-
-        event.dataTransfer.dropEffect = 'move';
-        const start = parseInt(event.dataTransfer.getData("text/plain"));
-        const newSteps = steps
-
-        if (start < target) {
-            newSteps.splice(target + 1, 0, newSteps[start]);
-            newSteps.splice(start, 1);
-        } else {
-            newSteps.splice(target, 0, newSteps[start]);
-            newSteps.splice(start + 1, 1);
-        }
-        steps = newSteps
-        hoveringIndex = -1
-    }
-
-    function dragstart(event, i) {
-        console.log('dragstart');
-
-        event.dataTransfer.effectAllowed = 'move';
-        event.dataTransfer.dropEffect = 'move';
-        const start = i;
-        event.dataTransfer.setData('text/plain', start);
-    }
-
     // Required by any view so we can know that the view is ready to receive messages
     intermediary.sendViewReady();
 </script>
 
 <style>
-    .highlighted {
-        background-color: #0000FF33;
-    }
 </style>
 
 <svelte:window on:keydown={onKeydown} />
 
 <div>
     <table>
     {#each steps as step, index}
-        <tr
-            draggable="true"
-            on:dragstart={event => dragstart(event, index)}
-            on:drop={drop}
-            on:dragover="{false}"
-            on:dragenter={() => hoveringIndex = index}
-            class:highlighted={hoveringIndex === index}>
-            <td style="padding-left: 3px;">
-                <Grabber />
+        <tr>
+            <td>
+                {#if index > 0}
+                    <vscode-button id="{index}" appearance="icon" title="Move step up" aria-label="Move step up" on:click={moveStepUp}>
+                        <ArrowUp />
+                    </vscode-button>
+                {/if}
             </td>
             <td>
                 <vscode-dropdown id="{index}" on:change={onStepTypeChange} value="{step.type}">
@@ -264,6 +238,20 @@ console.log('elapsedTime', elapsedTime);
                 {/each}
                 </vscode-dropdown>
             </td>
+            <td>
+                {#if currentRunningStep === -1}
+                    <vscode-button id="{index}" appearance="icon" title="Delete step" aria-label="Delete step" on:click={deleteStep}><Trash /></vscode-button>
+                {:else if currentRunningStep === index}
+                    <vscode-progress-ring />
+                {/if}
+            </td>
+        </tr>
+        <tr>
+            <td>
+                {#if index < steps.length - 1}
+                    <vscode-button id="{index}" appearance="icon" aria-label="Trash" on:click={moveStepDown}><ArrowDown /></vscode-button>
+                {/if}
+            </td>
             <td>
             {#if step.type === stepTypes.sleep.type}
                 <vscode-text-field id="{index}" on:change={onStepValueChange} value="{step.value ?? stepTypes.sleep.defaultValue}" type="number" />
@@ -277,19 +265,15 @@ console.log('elapsedTime', elapsedTime);
                 <vscode-text-field id="{index}" on:change={onStepValueChange} value="{step.value}" />
             {/if}
             </td>
-            <td>
-                {#if currentRunningStep === -1}
-                    <vscode-button id="{index}" appearance="icon" aria-label="Trash" on:click={deleteStep}><Trash /></vscode-button>
-                {:else if currentRunningStep === index}
-                    <vscode-progress-ring />
-                {/if}
+        </tr>
+        <tr>
+            <td colspan="3">
+                <vscode-divider />
             </td>
-
         </tr>
     {/each}
         <tr>
             <td>
-                <!-- <vscode-button appearance="secondary" aria-label="Add Step">Add Step</vscode-button> -->
                 <vscode-button appearance="icon" title="Add Step" aria-label="Add Step" on:click={addStep}><Add /></vscode-button>
             </td>
             <td>
@@ -299,26 +283,11 @@ console.log('elapsedTime', elapsedTime);
         <tr>
             <td colspan="2">
                 {#if currentRunningStep >= 0}
-                    <vscode-button id="0" on:click={stopConfig}>Stop</vscode-button>
+                    <vscode-button id={0} on:click={stopConfig}>Stop</vscode-button>
                 {:else}
-                    <vscode-button id="0" on:click={runConfig}>Run</vscode-button>
+                    <vscode-button id={0} on:click={runConfig}>Run</vscode-button>
                 {/if}
             </td>
         </tr>
     </table>
-
-    <div class="list">
-        {#each list as n, index  (n.name)}
-          <div
-                   class="list-item"
-             draggable={true}
-             on:dragstart={event => dragstart(event, index)}
-             on:drop|preventDefault={event => drop(event, index)}
-             on:dragenter={() => hoveringIndex = index}
-             class:is-active={hoveringIndex === index}>
-             {n.name}
-          </div>
-        {/each}
-    </div>
-
 </div>