From a5694441a1d7009d9ce1b1fa5a3007b5d5d9d812 Mon Sep 17 00:00:00 2001
From: MrExplode <me@sunstorm.rocks>
Date: Tue, 5 Nov 2024 22:52:38 +0100
Subject: [PATCH] feat(web): disable stuff while playing

---
 .../lib/components/output/OutputPanel.svelte  | 23 ++++++++++++++++---
 .../lib/components/output/OutputSwitch.svelte |  8 ++++---
 .../lib/components/time/SetTimeDialog.svelte  |  7 +++---
 3 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/webapp/src/lib/components/output/OutputPanel.svelte b/webapp/src/lib/components/output/OutputPanel.svelte
index 53c0e7c..de04e5e 100644
--- a/webapp/src/lib/components/output/OutputPanel.svelte
+++ b/webapp/src/lib/components/output/OutputPanel.svelte
@@ -3,6 +3,7 @@
 
     import { artNetOutput, audioOutput, ltcOutput, schedulerActive } from '$lib/data/output'
     import OutputSwitch from '@/output/OutputSwitch.svelte'
+    import { playing } from '$lib/data/control'
 </script>
 
 <Card.Root class="m-2">
@@ -11,10 +12,26 @@
         <Card.Description>Toggle available outputs</Card.Description>
     </Card.Header>
     <Card.Content class="flex flex-col space-y-2">
-        <OutputSwitch outputName="ArtNet" description="Timecode over ArtNet" store={artNetOutput} />
-        <OutputSwitch outputName="Audio" description="Audio player output" store={audioOutput} />
-        <OutputSwitch outputName="LTC" description="LTC timecode output" store={ltcOutput} />
         <OutputSwitch
+            disabled={$playing}
+            outputName="ArtNet"
+            description="Timecode over ArtNet"
+            store={artNetOutput}
+        />
+        <OutputSwitch
+            disabled={$playing}
+            outputName="Audio"
+            description="Audio player output"
+            store={audioOutput}
+        />
+        <OutputSwitch
+            disabled={$playing}
+            outputName="LTC"
+            description="LTC timecode output"
+            store={ltcOutput}
+        />
+        <OutputSwitch
+            disabled={$playing}
             outputName="Scheduler"
             description="Scheduled events"
             store={schedulerActive}
diff --git a/webapp/src/lib/components/output/OutputSwitch.svelte b/webapp/src/lib/components/output/OutputSwitch.svelte
index 925a580..5ca4ee5 100644
--- a/webapp/src/lib/components/output/OutputSwitch.svelte
+++ b/webapp/src/lib/components/output/OutputSwitch.svelte
@@ -7,14 +7,16 @@
     let {
         outputName,
         description,
-        store
-    }: { outputName: string; description: string; store: Writable<boolean> } = $props()
+        store,
+        disabled
+    }: { outputName: string; description: string; store: Writable<boolean>; disabled: boolean } =
+        $props()
 </script>
 
 <Tooltip.Provider>
     <Tooltip.Root>
         <Tooltip.Trigger class="flex items-center space-x-2">
-            <Switch bind:checked={$store} />
+            <Switch bind:checked={$store} {disabled} />
             <Label>{outputName}</Label>
         </Tooltip.Trigger>
         <Tooltip.Content>
diff --git a/webapp/src/lib/components/time/SetTimeDialog.svelte b/webapp/src/lib/components/time/SetTimeDialog.svelte
index 77ffe76..87c3c0a 100644
--- a/webapp/src/lib/components/time/SetTimeDialog.svelte
+++ b/webapp/src/lib/components/time/SetTimeDialog.svelte
@@ -4,7 +4,7 @@
     import { Input } from '@/ui/input'
     import { toast } from 'svelte-sonner'
     import type { Timecode } from '$lib/data/types'
-    import { setTime } from '$lib/data/control'
+    import { playing, setTime } from '$lib/data/control'
     import { cn } from '$utils'
 
     const format = /(?<hour>\d{2}):(?<min>\d{2}):(?<sec>\d{2})\/(?<frame>\d{2})/
@@ -35,8 +35,9 @@
 </script>
 
 <Dialog.Root bind:open={isOpen}>
-    <Dialog.Trigger class={cn(buttonVariants({ variant: 'outline' }), classNames)}
-        >Set</Dialog.Trigger
+    <Dialog.Trigger
+        disabled={$playing}
+        class={cn(buttonVariants({ variant: 'outline' }), classNames)}>Set</Dialog.Trigger
     >
     <Dialog.Content>
         <Dialog.Header>