render markup but hide video containers with css

web/frontend/package.json

@@ -8,7 +8,7 @@
     "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-node-resolve": "^14.1.0",
-    "@viamrobotics/prime": "0.0.69",
+    "@viamrobotics/prime": "0.0.71",
     "@viamrobotics/rpc": "^0.1.23",
     "@vitejs/plugin-vue": "^3.1.0",
     "@vueuse/core": "^8.9.4",

web/frontend/src/app.vue

@@ -617,6 +617,7 @@ let baseCameraState = new Map<string, boolean>();
 
 const updatedBaseCameraState = (e: Map<string, boolean>) => {
   baseCameraState = e;
+  console.log('baseCameraState', baseCameraState);
 };
 
 onMounted(async () => {

web/frontend/src/components/base.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { grpc } from '@improbable-eng/grpc-web';
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import { computeKeyboardBaseControls, BaseControlHelper } from '../rc/control_helpers';
 import baseApi from '../gen/proto/api/component/base/v1/base_pb.esm';
 import commonApi from '../gen/proto/api/common/v1/common_pb.esm';
@@ -42,6 +42,18 @@ const speed = ref(200);
 const spinSpeed = ref(90);
 const angle = ref(0);
 
+let videoStreamStates = new Map<string, boolean>();
+
+const resetStreamState = () => {
+  for (var value of filterResources(props.resources, 'rdk', 'component', 'camera')) {
+    videoStreamStates.set(value.name, false);
+  }
+}
+
+onMounted(() => {
+  resetStreamState();
+})
+
 const resetDiscreteState = () => {
   movementMode.value = 'Straight';
   movementType.value = 'Continuous';
@@ -131,16 +143,6 @@ const baseRun = () => {
   }
 };
 
-let videoStreamStates = new Map<string, boolean>();
-
-const resetStreamState = () => {
-  for (var value of filterResources(props.resources, 'rdk', 'component', 'camera')) {
-    videoStreamStates.set(value.name, false);
-  }
-}
-
-resetStreamState();
-
 const viewPreviewCamera = async (name: string) => {
   for (let [key, value] of videoStreamStates) {
     const streamContainers = document.querySelectorAll(`[data-stream="${key}"]`);
@@ -217,7 +219,7 @@ const handleTabSelect = (tab: Tabs) => {
         class="h-auto p-4"
       >
         <div class="grid grid-cols-2">
-          <div class="mt-2">
+          <div>
             <KeyboardInput
               :name="name"
               @keyboard-ctl="baseKeyboardCtl(name, $event)"
@@ -228,6 +230,7 @@ const handleTabSelect = (tab: Tabs) => {
               class="mb-4"
               variant="multiple"
               placeholder="Select Cameras"
+              aria-label="Select Cameras"
               :options="
                 filterResources(resources, 'rdk', 'component', 'camera')
                   .map(({ name }) => name)

web/frontend/src/components/camera.vue

@@ -172,8 +172,8 @@ const exportScreenshot = (cameraName: string) => {
             </div>
           </div>
           <div
-            v-if="camera"
             :data-stream="props.cameraName"
+            :class="{ 'hidden': !camera }"
             class="clear-both h-fit transition-all duration-300 ease-in-out"
           />
         </div>

web/frontend/src/components/keyboard-input.vue

@@ -109,16 +109,14 @@ onClickOutside(root, () => {
     class="h-23 flex w-full flex-col items-center"
   >
     <div
-      class="flex gap-2 pb-4"
+      class="flex gap-2 pb-4 w-48"
       @click="toggleKeyboard"
     >
       <v-switch
+        :label="isActive ? 'Keyboard Enabled' : 'Keyboard Disabled'"
         class="pr-4"
         :value="isActive ? 'on' : 'off'"
       />
-      <h3>
-        Keyboard {{ isActive ? 'active' : 'disabled' }}
-      </h3>
     </div>
     <div
       v-for="(lineKeys, index) in keysLayout"