feat: disable sync button when not connected to OBS

grantjbutler · Mar 5, 2022 · 4bd5e8d · 4bd5e8d
1 parent 4f3b88f
commit 4bd5e8d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/packages/renderer/src/components/CommandBar.vue b/packages/renderer/src/components/CommandBar.vue
@@ -32,7 +32,10 @@
       </div>
       <div class="flex items-center">
         <Popover class="relative">
-          <PopoverButton class="flex items-center p-3 space-x-1 hover:bg-gray-300">
+          <PopoverButton
+            class="flex items-center p-3 space-x-1 hover:bg-gray-300 disabled:opacity-25"
+            :disabled="obsStore.connectionState != OBSConnectionState.Connected"
+          >
             <CloudUploadIcon class="w-6 h-6 text-gray-600" />
 
             <span>Sync</span>
@@ -69,11 +72,15 @@ import ConnectionState from './ConnectionState.vue';
 import SyncPopover from './SyncPopover.vue';
 import { useLayoutsStore } from '/@/store/layouts';
 import NewLayoutModal from './Modals/NewLayoutModal.vue';
+import { useObsStore } from '/@/store/obs';
+import { OBSConnectionState } from '../../../shared/src/obs';
 
 defineEmits<{
   (e: 'openSettings'): void
 }>();
 
+const obsStore = useObsStore();
+
 const layoutsStore = useLayoutsStore();
 const layouts = computed(() => layoutsStore.layouts);
 const selectedLayout = computed({

diff --git a/packages/renderer/src/components/NavBar.vue b/packages/renderer/src/components/NavBar.vue
@@ -4,7 +4,10 @@
     <div class="flex items-center justify-between w-full px-3 border-b bg-system-background-nav-bar border-system-divider">
       <Popover class="relative">
         <div class="flex items-center">
-          <PopoverButton class="flex items-center space-x-1">
+          <PopoverButton
+            class="flex items-center space-x-1 disabled:opacity-25"
+            :disabled="obsStore.connectionState != OBSConnectionState.Connected"
+          >
             <CloudUploadIcon class="w-6 h-6" />
 
             <ChevronDownIcon class="w-3 h-3" />
@@ -25,4 +28,8 @@ import { CloudUploadIcon, ChevronDownIcon } from '@heroicons/vue/outline';
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue';
 import ConnectionState from './ConnectionState.vue';
 import SyncPopover from './SyncPopover.vue';
+import { useObsStore } from '/@/store/obs';
+import { OBSConnectionState } from '../../../shared/src/obs';
+
+const obsStore = useObsStore();
 </script>