From a45214ed3b0537fd88de49dbdd3cbab41a794f2e Mon Sep 17 00:00:00 2001
From: Ben Rollin <ben.rollin@clever.com>
Date: Fri, 8 Nov 2024 18:44:23 -0800
Subject: [PATCH 01/19] improve timer readout

---
 src/components/Timeline/TimerAndWaveform.tsx |  5 +++--
 src/components/Timeline/TimerReadout.tsx     | 11 ++++++++++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/Timeline/TimerAndWaveform.tsx b/src/components/Timeline/TimerAndWaveform.tsx
index 20aa5870..a7d70d74 100644
--- a/src/components/Timeline/TimerAndWaveform.tsx
+++ b/src/components/Timeline/TimerAndWaveform.tsx
@@ -8,7 +8,7 @@ import { TimerControls } from "@/src/components/Timeline/TimerControls";
 
 export const TimerAndWaveform = observer(function TimerAndWaveform() {
   const store = useStore();
-  const { uiStore, embeddedViewer } = store;
+  const { uiStore } = store;
 
   const width = uiStore.canTimelineZoom
     ? uiStore.timeToXPixels(MAX_TIME)
@@ -33,10 +33,11 @@ export const TimerAndWaveform = observer(function TimerAndWaveform() {
         borderColor="black"
         spacing={0}
         width="150px"
+        height="80px"
         zIndex={18}
         bgColor="gray.500"
       >
-        {!embeddedViewer && <TimerReadout />}
+        <TimerReadout />
         <TimerControls />
       </VStack>
 
diff --git a/src/components/Timeline/TimerReadout.tsx b/src/components/Timeline/TimerReadout.tsx
index ea5cfef3..c663e3f7 100644
--- a/src/components/Timeline/TimerReadout.tsx
+++ b/src/components/Timeline/TimerReadout.tsx
@@ -15,7 +15,16 @@ export const TimerReadout = observer(function TimerReadout() {
   const { audioStore } = useStore();
 
   return (
-    <VStack justify="center">
+    <VStack
+      justify="center"
+      borderWidth={1}
+      bgColor="gray.400"
+      borderRadius={2}
+      lineHeight="1"
+      px={1}
+      py={0.25}
+      m={1}
+    >
       <Text
         color="black"
         fontSize={18}

From 2f870b0c5e98e52c76689d9dcb511d739bd2b9dd Mon Sep 17 00:00:00 2001
From: Ben Rollin <ben.rollin@clever.com>
Date: Sun, 10 Nov 2024 01:52:13 -0800
Subject: [PATCH 02/19] basic smoothing implementation

---
 .../NewVariationButtons.tsx                   |  2 +-
 .../AudioVariationControls.tsx                | 10 +++++++++
 src/types/AudioStore.ts                       | 14 +++++++++++++
 src/types/Block.ts                            |  2 +-
 src/types/Variations/AudioVariation.ts        | 21 ++++++++++++++++---
 src/types/Variations/Variation.ts             |  2 +-
 6 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/src/components/ParameterVariations/NewVariationButtons.tsx b/src/components/ParameterVariations/NewVariationButtons.tsx
index 73d9b624..eb98b355 100644
--- a/src/components/ParameterVariations/NewVariationButtons.tsx
+++ b/src/components/ParameterVariations/NewVariationButtons.tsx
@@ -246,7 +246,7 @@ export const NewVariationButtons = memo(function NewVariationButtons({
           store.addVariation(
             block,
             uniformName,
-            new AudioVariation(DEFAULT_VARIATION_DURATION, 1, 0, store)
+            new AudioVariation(DEFAULT_VARIATION_DURATION, 1, 0, 0, store)
           );
         })}
       />
diff --git a/src/components/VariationControls/AudioVariationControls.tsx b/src/components/VariationControls/AudioVariationControls.tsx
index 2c0d18c4..75181e7a 100644
--- a/src/components/VariationControls/AudioVariationControls.tsx
+++ b/src/components/VariationControls/AudioVariationControls.tsx
@@ -16,6 +16,7 @@ export function AudioVariationControls({
 }: AudioVariationControlsProps) {
   const [factor, setFactor] = useState(variation.factor.toString());
   const [offset, setOffset] = useState(variation.offset.toString());
+  const [smoothing, setSmoothing] = useState(variation.smoothing.toString());
 
   return (
     <>
@@ -37,6 +38,15 @@ export function AudioVariationControls({
         }}
         value={offset}
       />
+      <ScalarInput
+        name="Smoothing"
+        onChange={(valueString, valueNumber) => {
+          variation.smoothing = valueNumber;
+          setSmoothing(valueString);
+          block.triggerVariationReactions(uniformName);
+        }}
+        value={smoothing}
+      />
     </>
   );
 }
diff --git a/src/types/AudioStore.ts b/src/types/AudioStore.ts
index a0cf1c56..d0e958f9 100644
--- a/src/types/AudioStore.ts
+++ b/src/types/AudioStore.ts
@@ -65,6 +65,20 @@ export class AudioStore {
     return this.peaks[index];
   };
 
+  getSmoothedPeakAtTime = (time: number, smoothing: number) => {
+    if (!this.peaks.length) return 0;
+    if (smoothing === 0) return this.getPeakAtTime(time);
+
+    const index = Math.floor(time * PEAK_DATA_SAMPLE_RATE);
+    const start = Math.max(0, index - smoothing);
+    const end = Math.min(this.peaks.length - 1, index + smoothing);
+
+    let total = 0;
+    for (let i = start; i <= end; i++) total += this.peaks[i];
+
+    return total / (end - start + 1);
+  };
+
   toggleAudioMuted = () => {
     this.audioMuted = !this.audioMuted;
   };
diff --git a/src/types/Block.ts b/src/types/Block.ts
index 8110b1c2..19959c93 100644
--- a/src/types/Block.ts
+++ b/src/types/Block.ts
@@ -30,7 +30,7 @@ export type SerializedBlock = {
 export type RootStore = {
   context: Context;
   audioStore: {
-    getPeakAtTime: (time: number) => number;
+    getSmoothedPeakAtTime: (time: number, smoothing: number) => number;
   };
 };
 
diff --git a/src/types/Variations/AudioVariation.ts b/src/types/Variations/AudioVariation.ts
index 57eb265a..f5c677fc 100644
--- a/src/types/Variations/AudioVariation.ts
+++ b/src/types/Variations/AudioVariation.ts
@@ -4,21 +4,24 @@ export class AudioVariation extends Variation<number> {
   displayName = "Audio";
   factor: number;
   offset: number;
+  smoothing: number;
 
   constructor(
     duration: number,
     factor: number,
     offset: number,
+    smoothing: number,
     readonly store: RootStore
   ) {
     super("audio", duration);
 
     this.factor = factor;
     this.offset = offset;
+    this.smoothing = smoothing ?? 0;
   }
 
   valueAtTime = (time: number, globalTime: number) =>
-    this.factor * this.store.audioStore.getPeakAtTime(globalTime) + this.offset;
+    this.factor * this.store.audioStore.getSmoothedPeakAtTime(globalTime,this.smoothing) + this.offset;
 
   // TODO:
   computeDomain = () => [0, 1] as [number, number];
@@ -39,7 +42,13 @@ export class AudioVariation extends Variation<number> {
   };
 
   clone = () =>
-    new AudioVariation(this.duration, this.factor, this.offset, this.store);
+    new AudioVariation(
+      this.duration,
+      this.factor,
+      this.offset,
+      this.smoothing,
+      this.store
+    );
 
   serialize = () => ({
     type: this.type,
@@ -49,5 +58,11 @@ export class AudioVariation extends Variation<number> {
   });
 
   static deserialize = (store: RootStore, data: any) =>
-    new AudioVariation(data.duration, data.factor, data.offset, store);
+    new AudioVariation(
+      data.duration,
+      data.factor,
+      data.offset,
+      data.smoothing,
+      store
+    );
 }
diff --git a/src/types/Variations/Variation.ts b/src/types/Variations/Variation.ts
index c649aa6e..9b53e7f4 100644
--- a/src/types/Variations/Variation.ts
+++ b/src/types/Variations/Variation.ts
@@ -2,7 +2,7 @@ import { ParamType } from "@/src/types/PatternParams";
 import { generateId } from "@/src/utils/id";
 
 export type RootStore = {
-  audioStore: { getPeakAtTime: (time: number) => number };
+  audioStore: { getSmoothedPeakAtTime: (time: number,smoothing: number) => number };
 };
 
 type VariationType =

From 77f1597ee8f1d616fc104def3ffa9c3da28cbec0 Mon Sep 17 00:00:00 2001
From: Ben Rollin <ben.rollin@clever.com>
Date: Sun, 10 Nov 2024 03:09:03 -0800
Subject: [PATCH 03/19] latency test work in progress

---
 public/kick.mp3                | Bin 0 -> 15716 bytes
 src/components/LatencyTest.tsx | 101 +++++++++++++++++++++++++++++++++
 src/pages/test.tsx             |   4 +-
 3 files changed, 104 insertions(+), 1 deletion(-)
 create mode 100644 public/kick.mp3
 create mode 100644 src/components/LatencyTest.tsx

diff --git a/public/kick.mp3 b/public/kick.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..f4b56f89551bb878d36428021638bd9972585904
GIT binary patch
literal 15716
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
XZy)~yGVlWwes{wEfLi=Fhwy&@FL21S

literal 0
HcmV?d00001

diff --git a/src/components/LatencyTest.tsx b/src/components/LatencyTest.tsx
new file mode 100644
index 00000000..e50ad9e9
--- /dev/null
+++ b/src/components/LatencyTest.tsx
@@ -0,0 +1,101 @@
+import { Button, Text } from "@chakra-ui/react";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+// NOTE:
+//  60,000 / BPM = [one beat in ms]
+//  BPM = 60000 / [one beat in ms]
+const MS_IN_M = 60_000;
+const tempo = 120; // 120 BPM
+
+const MIN_BEATS = 10;
+
+async function loadSound(audioContext: AudioContext) {
+  let response = await fetch("./kick.mp3", { mode: "no-cors" });
+  let arrayBuffer = await response.arrayBuffer();
+  let audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+  return audioBuffer;
+}
+
+function playSound(audioContext: AudioContext, audioBuffer: AudioBuffer) {
+  const player = audioContext.createBufferSource();
+  player.buffer = audioBuffer;
+  player.connect(audioContext.destination);
+  player.loop = false;
+  player.start();
+}
+
+export function LatencyTest() {
+  const initialized = useRef(false);
+  const audioContext = useRef<AudioContext | null>(null);
+  const audioBuffer = useRef<AudioBuffer | null>(null);
+
+  const [isRunning, setIsRunning] = useState(false);
+  const [beatTimes, setBeatTimes] = useState<Date[]>([]);
+  const [userTimes, setUserTimes] = useState<Date[]>([]);
+
+  useEffect(() => {
+    if (initialized.current) return;
+    initialized.current = true;
+
+    const initialize = async () => {
+      audioContext.current = new AudioContext();
+      audioBuffer.current = await loadSound(audioContext.current);
+    };
+
+    initialize();
+  }, [initialized]);
+
+  const userTempo = useMemo(() => {
+    if (userTimes.length < 2) return 0;
+
+    const userTimesMs = userTimes.map((time, index) => {
+      if (index === 0) return 0;
+      return time.getTime() - userTimes[index - 1].getTime();
+    });
+
+    const average =
+      userTimesMs.reduce((acc, curr) => acc + curr, 0) / userTimesMs.length;
+    return MS_IN_M / average;
+  }, [userTimes]);
+
+  useEffect(() => {
+    if (!isRunning) return;
+
+    let currentBpmInMs = MS_IN_M / tempo;
+    const interval = setInterval(() => {
+      if (!audioContext.current || !audioBuffer.current) return;
+      playSound(audioContext.current, audioBuffer.current);
+      setBeatTimes((beatTimes) => [...beatTimes, new Date()]);
+    }, currentBpmInMs);
+
+    return () => clearInterval(interval);
+  }, [isRunning]);
+
+  return (
+    <>
+      <Text>Latency Test</Text>
+      <Button
+        onClick={async () => {
+          if (!audioContext.current || !audioBuffer.current) return;
+
+          if (isRunning) {
+            setUserTimes((userTimes) => [...userTimes, new Date()]);
+            if (userTimes.length > MIN_BEATS) {
+              setUserTimes((userTimes) => userTimes.slice(1));
+              setBeatTimes((beatTimes) => beatTimes.slice(1));
+            }
+            return;
+          }
+
+          setIsRunning(true);
+          setBeatTimes([]);
+          setUserTimes([]);
+        }}
+      >
+        Tap
+      </Button>
+      <Text>Tempo: {tempo.toFixed(2)}</Text>
+      <Text>User tempo: {userTempo}</Text>
+    </>
+  );
+}
diff --git a/src/pages/test.tsx b/src/pages/test.tsx
index 5ab74b22..cb2eb60c 100644
--- a/src/pages/test.tsx
+++ b/src/pages/test.tsx
@@ -1,3 +1,4 @@
+import { LatencyTest } from "@/src/components/LatencyTest";
 import { Store } from "@/src/types/Store";
 import { StoreContext } from "@/src/types/StoreContext";
 import { Box, ChakraProvider, theme } from "@chakra-ui/react";
@@ -25,7 +26,8 @@ export default function Test() {
         <StoreContext.Provider value={store}>
           <Box height="100vh" width="100vw" bgColor="gray.700" p={2}>
             <p>Embedded conjurer test:</p>
-            {initialized && <EmbedTest />}
+            {/* {initialized && <EmbedTest />} */}
+            <LatencyTest />
           </Box>
         </StoreContext.Provider>
       </ChakraProvider>

From cc2fbbac656f1a3cb376151f9fe10a2671124e8f Mon Sep 17 00:00:00 2001
From: Ben Rollin <ben.rollin@clever.com>
Date: Sun, 10 Nov 2024 22:23:35 -0800
Subject: [PATCH 04/19] create a latency test

---
 src/components/LatencyTest.tsx | 134 +++++++++++++++++++++++----------
 src/pages/test.tsx             |   4 +-
 2 files changed, 97 insertions(+), 41 deletions(-)

diff --git a/src/components/LatencyTest.tsx b/src/components/LatencyTest.tsx
index e50ad9e9..71acc0d3 100644
--- a/src/components/LatencyTest.tsx
+++ b/src/components/LatencyTest.tsx
@@ -1,4 +1,4 @@
-import { Button, Text } from "@chakra-ui/react";
+import { Button, HStack, Text, VStack } from "@chakra-ui/react";
 import { useEffect, useMemo, useRef, useState } from "react";
 
 // NOTE:
@@ -24,10 +24,32 @@ function playSound(audioContext: AudioContext, audioBuffer: AudioBuffer) {
   player.start();
 }
 
-export function LatencyTest() {
+// Source: https://gist.github.com/AlexJWayne/1d99b3cd81d610ac7351
+const accurateInterval = (time: number, fn: () => void) => {
+  let cancel: any, nextAt: any, timeout: any, wrapper: any, _ref: any;
+  nextAt = new Date().getTime() + time;
+  timeout = null;
+  if (typeof time === "function")
+    (_ref = [time, fn]), (fn = _ref[0]), (time = _ref[1]);
+  wrapper = () => {
+    nextAt += time;
+    timeout = setTimeout(wrapper, nextAt - new Date().getTime());
+    return fn();
+  };
+  cancel = () => clearTimeout(timeout);
+  timeout = setTimeout(wrapper, nextAt - new Date().getTime());
+  return { cancel };
+};
+
+export function LatencyTest({
+  setLatency,
+}: {
+  setLatency: (latency: number) => void;
+}) {
   const initialized = useRef(false);
   const audioContext = useRef<AudioContext | null>(null);
   const audioBuffer = useRef<AudioBuffer | null>(null);
+  const lastLatency = useRef(0);
 
   const [isRunning, setIsRunning] = useState(false);
   const [beatTimes, setBeatTimes] = useState<Date[]>([]);
@@ -45,57 +67,93 @@ export function LatencyTest() {
     initialize();
   }, [initialized]);
 
-  const userTempo = useMemo(() => {
+  // const userTempo = useMemo(() => {
+  //   if (userTimes.length < 2) return 0;
+
+  //   const userTimesMs = userTimes
+  //     .map((time, index) => {
+  //       if (index === 0) return null;
+  //       return time.getTime() - userTimes[index - 1].getTime();
+  //     })
+  //     .filter((time) => time !== null);
+
+  //   const average =
+  //     userTimesMs.reduce((acc, curr) => acc + curr, 0) / userTimesMs.length;
+  //   return MS_IN_M / average;
+  // }, [userTimes]);
+
+  const userLatency = useMemo(() => {
     if (userTimes.length < 2) return 0;
+    if (beatTimes.length > userTimes.length) return lastLatency.current;
 
-    const userTimesMs = userTimes.map((time, index) => {
-      if (index === 0) return 0;
-      return time.getTime() - userTimes[index - 1].getTime();
-    });
+    const userLatencies = beatTimes
+      .map((beatTime, index) => {
+        if (index >= userTimes.length) return null;
+        return userTimes[index].getTime() - beatTime.getTime();
+      })
+      .filter((time) => time !== null);
 
-    const average =
-      userTimesMs.reduce((acc, curr) => acc + curr, 0) / userTimesMs.length;
-    return MS_IN_M / average;
-  }, [userTimes]);
+    lastLatency.current =
+      userLatencies.reduce((acc, curr) => acc + curr, 0) / userLatencies.length;
+
+    return lastLatency.current;
+  }, [beatTimes, userTimes]);
 
   useEffect(() => {
     if (!isRunning) return;
 
     let currentBpmInMs = MS_IN_M / tempo;
-    const interval = setInterval(() => {
+    const { cancel } = accurateInterval(currentBpmInMs, () => {
       if (!audioContext.current || !audioBuffer.current) return;
       playSound(audioContext.current, audioBuffer.current);
       setBeatTimes((beatTimes) => [...beatTimes, new Date()]);
-    }, currentBpmInMs);
+    });
 
-    return () => clearInterval(interval);
+    return () => cancel();
   }, [isRunning]);
 
   return (
-    <>
-      <Text>Latency Test</Text>
-      <Button
-        onClick={async () => {
-          if (!audioContext.current || !audioBuffer.current) return;
-
-          if (isRunning) {
-            setUserTimes((userTimes) => [...userTimes, new Date()]);
-            if (userTimes.length > MIN_BEATS) {
-              setUserTimes((userTimes) => userTimes.slice(1));
-              setBeatTimes((beatTimes) => beatTimes.slice(1));
+    <VStack>
+      <Text>
+        Keep clicking Tap until latency stabilizes, then click Stop. When
+        satisfied, click Use latency.
+      </Text>
+      <Text h={8}>
+        {userLatency ? `Latency: ${userLatency.toFixed(2)}ms` : ""}
+      </Text>
+      <HStack>
+        <Button
+          onClick={async () => {
+            if (!audioContext.current || !audioBuffer.current) return;
+
+            if (isRunning) {
+              if (userTimes.length > MIN_BEATS) {
+                setUserTimes((userTimes) => [
+                  ...userTimes.slice(1),
+                  new Date(),
+                ]);
+                setBeatTimes((beatTimes) => beatTimes.slice(1));
+              } else setUserTimes((userTimes) => [...userTimes, new Date()]);
+              return;
             }
-            return;
-          }
-
-          setIsRunning(true);
-          setBeatTimes([]);
-          setUserTimes([]);
-        }}
-      >
-        Tap
-      </Button>
-      <Text>Tempo: {tempo.toFixed(2)}</Text>
-      <Text>User tempo: {userTempo}</Text>
-    </>
+
+            setIsRunning(true);
+            setBeatTimes([]);
+            setUserTimes([]);
+          }}
+        >
+          Tap
+        </Button>
+        <Button onClick={() => setIsRunning(false)} isDisabled={!isRunning}>
+          Stop
+        </Button>
+        <Button
+          onClick={() => setLatency(userLatency)}
+          isDisabled={isRunning || userLatency === 0}
+        >
+          Use latency
+        </Button>
+      </HStack>
+    </VStack>
   );
 }
diff --git a/src/pages/test.tsx b/src/pages/test.tsx
index cb2eb60c..5ab74b22 100644
--- a/src/pages/test.tsx
+++ b/src/pages/test.tsx
@@ -1,4 +1,3 @@
-import { LatencyTest } from "@/src/components/LatencyTest";
 import { Store } from "@/src/types/Store";
 import { StoreContext } from "@/src/types/StoreContext";
 import { Box, ChakraProvider, theme } from "@chakra-ui/react";
@@ -26,8 +25,7 @@ export default function Test() {
         <StoreContext.Provider value={store}>
           <Box height="100vh" width="100vw" bgColor="gray.700" p={2}>
             <p>Embedded conjurer test:</p>
-            {/* {initialized && <EmbedTest />} */}
-            <LatencyTest />
+            {initialized && <EmbedTest />}
           </Box>
         </StoreContext.Provider>
       </ChakraProvider>

From ec4974cbc4fc1c936602597ddddab936a09f469e Mon Sep 17 00:00:00 2001
From: Ben Rollin <ben.rollin@clever.com>
Date: Sun, 10 Nov 2024 22:39:37 -0800
Subject: [PATCH 05/19] implement LatencyModal

---
 src/components/LatencyModal/LatencyModal.tsx  | 38 +++++++++++++++++++
 .../{ => LatencyModal}/LatencyTest.tsx        |  0
 src/components/Menu/MenuBar.tsx               |  7 ++++
 src/types/UIStore.ts                          |  1 +
 src/utils/timeout.ts                          |  5 +++
 5 files changed, 51 insertions(+)
 create mode 100644 src/components/LatencyModal/LatencyModal.tsx
 rename src/components/{ => LatencyModal}/LatencyTest.tsx (100%)
 create mode 100644 src/utils/timeout.ts

diff --git a/src/components/LatencyModal/LatencyModal.tsx b/src/components/LatencyModal/LatencyModal.tsx
new file mode 100644
index 00000000..b39da796
--- /dev/null
+++ b/src/components/LatencyModal/LatencyModal.tsx
@@ -0,0 +1,38 @@
+import { observer } from "mobx-react-lite";
+import {
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+} from "@chakra-ui/react";
+import { useStore } from "@/src/types/StoreContext";
+import { LatencyTest } from "@/src/components/LatencyModal/LatencyTest";
+import { action } from "mobx";
+
+export const LatencyModal = observer(function LatencyModal() {
+  const store = useStore();
+  const { audioStore, uiStore } = store;
+
+  const isOpen = uiStore.showingLatencyModal;
+  const onClose = action(() => (uiStore.showingLatencyModal = false));
+
+  return (
+    <Modal onClose={onClose} isOpen={isOpen} isCentered size="md">
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Set audio latency</ModalHeader>
+        <ModalBody>
+          <LatencyTest
+            setLatency={action((latency) => {
+              audioStore.audioLatency = latency;
+              onClose();
+            })}
+          />
+        </ModalBody>
+        <ModalCloseButton />
+      </ModalContent>
+    </Modal>
+  );
+});
diff --git a/src/components/LatencyTest.tsx b/src/components/LatencyModal/LatencyTest.tsx
similarity index 100%
rename from src/components/LatencyTest.tsx
rename to src/components/LatencyModal/LatencyTest.tsx
diff --git a/src/components/Menu/MenuBar.tsx b/src/components/Menu/MenuBar.tsx
index 1a8bb189..cbd60084 100644
--- a/src/components/Menu/MenuBar.tsx
+++ b/src/components/Menu/MenuBar.tsx
@@ -30,6 +30,7 @@ import { KeyboardShortcuts } from "@/src/components/KeyboardShortcuts";
 import { useSaveExperience } from "@/src/hooks/experience";
 import { DisplayMode } from "@/src/types/UIStore";
 import { action } from "mobx";
+import { LatencyModal } from "@/src/components/LatencyModal/LatencyModal";
 
 export const MenuBar = observer(function MenuBar() {
   const store = useStore();
@@ -81,6 +82,7 @@ export const MenuBar = observer(function MenuBar() {
           </ModalFooter>
         </ModalContent>
       </Modal>
+      <LatencyModal />
       <HStack>
         <Heading
           size="md"
@@ -308,6 +310,11 @@ export const MenuBar = observer(function MenuBar() {
                   >
                     Transmit data to canopy
                   </MenuItemOption>
+                  <MenuItem
+                    onClick={action(() => (uiStore.showingLatencyModal = true))}
+                  >
+                    Set audio latency
+                  </MenuItem>
                 </MenuList>
               </Menu>
             )}
diff --git a/src/types/UIStore.ts b/src/types/UIStore.ts
index cf3a0ff7..9a070390 100644
--- a/src/types/UIStore.ts
+++ b/src/types/UIStore.ts
@@ -37,6 +37,7 @@ export class UIStore {
   showingViewerInstructionsModal = false;
   showingSaveBeatMapModal = false;
   showingLoadBeatMapModal = false;
+  showingLatencyModal = false;
 
   pendingAction: "open" | "save" | "" = "";
 
diff --git a/src/utils/timeout.ts b/src/utils/timeout.ts
new file mode 100644
index 00000000..293a7e44
--- /dev/null
+++ b/src/utils/timeout.ts
@@ -0,0 +1,5 @@
+export function timeout(ms: number) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}

From 966e61fda0f96fc06c5dc0094d96e215b3b2f08f Mon Sep 17 00:00:00 2001
From: Ben Rollin <ben.rollin@clever.com>
Date: Sun, 10 Nov 2024 23:01:50 -0800
Subject: [PATCH 06/19] respond to audio latency changes

---
 src/components/LatencyModal/LatencyTest.tsx   |  2 +-
 .../Wavesurfer/WavesurferWaveform.tsx         | 36 ++++++++-----------
 2 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/src/components/LatencyModal/LatencyTest.tsx b/src/components/LatencyModal/LatencyTest.tsx
index 71acc0d3..fbadbb11 100644
--- a/src/components/LatencyModal/LatencyTest.tsx
+++ b/src/components/LatencyModal/LatencyTest.tsx
@@ -148,7 +148,7 @@ export function LatencyTest({
           Stop
         </Button>
         <Button
-          onClick={() => setLatency(userLatency)}
+          onClick={() => setLatency(userLatency / 1000)}
           isDisabled={isRunning || userLatency === 0}
         >
           Use latency
diff --git a/src/components/Wavesurfer/WavesurferWaveform.tsx b/src/components/Wavesurfer/WavesurferWaveform.tsx
index 5241c15c..0f0d9100 100644
--- a/src/components/Wavesurfer/WavesurferWaveform.tsx
+++ b/src/components/Wavesurfer/WavesurferWaveform.tsx
@@ -67,28 +67,22 @@ const WavesurferWaveform = observer(function WavesurferWaveform() {
     ];
   }, [audioStore, uiStore.canTimelineZoom]);
 
+  // on audio latency change
   useEffect(() => {
-    if (didInitialize.current || !isReady) return;
-    didInitialize.current = true;
-
-    audioRef.current!.addEventListener(
-      "canplay",
-      () => {
-        // delay audio in order to sync with video
-        const audioContext = new AudioContext();
-        runInAction(() => (audioStore.audioContext = audioContext));
-        const mediaSource = audioContext.createMediaElementSource(
-          audioRef.current!
-        );
-        const delayNode = audioContext.createDelay(5);
-        delayNode.delayTime.value = audioStore.audioLatency;
-        mediaSource.connect(delayNode);
-        delayNode.connect(audioContext.destination);
-      },
-      { once: true }
-    );
-    cloneCanvas();
-  }, [audioStore, isReady, cloneCanvas]);
+    if (!isReady || !audioRef.current) return;
+    const audioElement = audioRef.current;
+    const audioContext = new AudioContext();
+    runInAction(() => (audioStore.audioContext = audioContext));
+    const mediaSource = audioContext.createMediaElementSource(audioElement);
+    const delayNode = audioContext.createDelay(5);
+    delayNode.delayTime.value = audioStore.audioLatency;
+    mediaSource.connect(delayNode);
+    delayNode.connect(audioContext.destination);
+    return () => {
+      audioContext.close();
+      runInAction(() => (audioStore.audioContext = null));
+    };
+  }, [audioStore, audioStore.audioLatency, isReady]);
 
   // on audio state change
   useEffect(() => {

From 66a050a2f43bb06288e48c5cfc16b2feba5e4453 Mon Sep 17 00:00:00 2001
From: Ben Rollin <ben.rollin@clever.com>
Date: Sun, 10 Nov 2024 23:18:58 -0800
Subject: [PATCH 07/19] restyle wave form on playlist page

---
 .../Wavesurfer/WavesurferWaveform.tsx         | 29 ++++++++-----------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/src/components/Wavesurfer/WavesurferWaveform.tsx b/src/components/Wavesurfer/WavesurferWaveform.tsx
index 0f0d9100..7ebcf409 100644
--- a/src/components/Wavesurfer/WavesurferWaveform.tsx
+++ b/src/components/Wavesurfer/WavesurferWaveform.tsx
@@ -30,11 +30,18 @@ const WavesurferWaveform = observer(function WavesurferWaveform() {
   const [isReady, setIsReady] = useState(false);
   const clonedWaveformRef = useRef<HTMLDivElement>(null);
   const audioRef = useRef<HTMLAudioElement>(null);
-  const didInitialize = useRef(false);
 
   const cloneCanvas = useCloneCanvas(clonedWaveformRef);
 
   const plugins = useMemo(() => {
+    const timelinePlugin = TimelinePlugin.create({
+      insertPosition: "beforebegin",
+      style: { fontSize: "14px", color: "#000000", zIndex: "100" },
+      height: uiStore.canTimelineZoom ? 60 : 80,
+      primaryLabelInterval: uiStore.canTimelineZoom ? 5 : 30,
+      secondaryLabelInterval: uiStore.canTimelineZoom ? 1 : 0,
+      timeInterval: uiStore.canTimelineZoom ? 0.25 : 5,
+    });
     const minimapPlugin = MinimapPlugin.create({
       waveColor: "#bbb",
       progressColor: "#0178FF",
@@ -49,22 +56,7 @@ const WavesurferWaveform = observer(function WavesurferWaveform() {
       );
       scrollIntoView();
     });
-
-    return [
-      TimelinePlugin.create({
-        insertPosition: "beforebegin",
-        style: {
-          fontSize: "14px",
-          color: "#000000",
-          zIndex: "100",
-        },
-        height: uiStore.canTimelineZoom ? 60 : 80,
-        primaryLabelInterval: uiStore.canTimelineZoom ? 5 : 30,
-        secondaryLabelInterval: uiStore.canTimelineZoom ? 1 : 0,
-        timeInterval: uiStore.canTimelineZoom ? 0.25 : 5,
-      }),
-      minimapPlugin,
-    ];
+    return [timelinePlugin, minimapPlugin];
   }, [audioStore, uiStore.canTimelineZoom]);
 
   // on audio latency change
@@ -144,6 +136,9 @@ const WavesurferWaveform = observer(function WavesurferWaveform() {
           waveColor="#DDDDDD"
           progressColor="#0178FF"
           cursorColor="#FF0000FF"
+          barWidth={uiStore.canTimelineZoom ? undefined : 3}
+          barRadius={uiStore.canTimelineZoom ? undefined : 10}
+          barGap={uiStore.canTimelineZoom ? undefined : 1}
           height={uiStore.canTimelineZoom ? 60 : 80}
           fillParent={!uiStore.canTimelineZoom}
           minPxPerSec={

From 29a4dd8a8661c64cfe3445ef988f66e0ed64163f Mon Sep 17 00:00:00 2001
From: Ben Rollin <ben.rollin@clever.com>
Date: Sun, 10 Nov 2024 23:31:32 -0800
Subject: [PATCH 08/19] save audio latency to local storage

---
 src/types/AudioStore.ts | 36 ++++++++++++++++++++++++++++++++++--
 src/types/Store.ts      |  2 ++
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/types/AudioStore.ts b/src/types/AudioStore.ts
index d0e958f9..b2a23357 100644
--- a/src/types/AudioStore.ts
+++ b/src/types/AudioStore.ts
@@ -12,6 +12,7 @@ import { filterData } from "@/src/types/audioPeaks";
 import { NO_SONG, Song } from "@/src/types/Song";
 
 export const PEAK_DATA_SAMPLE_RATE = 60;
+const INITIAL_AUDIO_LATENCY = 0.15;
 
 // Define a new RootStore interface here so that we avoid circular dependencies
 interface RootStore {
@@ -33,6 +34,15 @@ export class AudioStore {
 
   audioContext: AudioContext | null = null;
 
+  _audioLatency = INITIAL_AUDIO_LATENCY; // seconds
+  get audioLatency() {
+    return this._audioLatency;
+  }
+  set audioLatency(latency: number) {
+    this._audioLatency = latency;
+    this.saveToLocalStorage();
+  }
+
   constructor(readonly rootStore: RootStore) {
     makeAutoObservable(this, {
       timelinePlugin: false,
@@ -42,6 +52,30 @@ export class AudioStore {
     });
   }
 
+  initialize = () => {
+    this.loadFromLocalStorage();
+  };
+
+  loadFromLocalStorage = () => {
+    if (typeof window === "undefined") return;
+    const data = localStorage.getItem("audioStore");
+    if (data) {
+      const localStorageAudioSettings = JSON.parse(data);
+      this.audioLatency =
+        localStorageAudioSettings.audioLatency || INITIAL_AUDIO_LATENCY;
+    }
+  };
+
+  saveToLocalStorage = () => {
+    if (typeof window === "undefined") return;
+    localStorage.setItem(
+      "audioStore",
+      JSON.stringify({
+        audioLatency: this.audioLatency,
+      })
+    );
+  };
+
   computePeaks = (audioBuffer: AudioBuffer) => {
     const totalDesiredSamples = Math.floor(
       PEAK_DATA_SAMPLE_RATE * audioBuffer.duration
@@ -103,8 +137,6 @@ export class AudioStore {
     return Math.round(this.globalTime * 10) / 10;
   }
 
-  audioLatency = 0.15; // seconds
-
   setTimeWithCursor = (time: number) => {
     if (!this.wavesurfer) return;
 
diff --git a/src/types/Store.ts b/src/types/Store.ts
index b394bd26..7bf9d3b7 100644
--- a/src/types/Store.ts
+++ b/src/types/Store.ts
@@ -183,6 +183,7 @@ export class Store {
     if (this.context === "playground") {
       this.playgroundStore.initialize();
       this.uiStore.initialize();
+      this.audioStore.initialize();
       setupControllerWebsocket(this.context, this.playgroundStore.onUpdate);
       return;
     }
@@ -221,6 +222,7 @@ export class Store {
       this.experienceStore.loadEmptyExperience();
 
     this.uiStore.initialize();
+    this.audioStore.initialize();
   };
 
   toggleSendingData = () => {

From 5e12d2e4318b4b53fc0b58aa0204bbd4dafb3e0e Mon Sep 17 00:00:00 2001
From: Ben Rollin <ben.rollin@clever.com>
Date: Mon, 11 Nov 2024 00:00:33 -0800
Subject: [PATCH 09/19] embeddedViewer->viewerMode

---
 src/components/CameraControls.tsx |  4 ++--
 src/components/Display.tsx        |  4 ++--
 src/types/Store.ts                | 14 ++++++++------
 src/types/UIStore.ts              |  6 +++---
 4 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/components/CameraControls.tsx b/src/components/CameraControls.tsx
index cd4bf786..60e2983b 100644
--- a/src/components/CameraControls.tsx
+++ b/src/components/CameraControls.tsx
@@ -9,12 +9,12 @@ type CameraControlsProps = {};
 
 export const CameraControls = observer(
   function CameraControls({}: CameraControlsProps) {
-    const { embeddedViewer } = useStore();
+    const { viewerMode } = useStore();
 
     const cameraRef = useRef<PerspectiveCameraThree>(null);
     const initialPositionRef = useRef(new Vector3(0, 0, 20));
 
-    useTravelingCamera(cameraRef, embeddedViewer);
+    useTravelingCamera(cameraRef, viewerMode);
 
     return (
       <>
diff --git a/src/components/Display.tsx b/src/components/Display.tsx
index b2a806ca..49aa56fe 100644
--- a/src/components/Display.tsx
+++ b/src/components/Display.tsx
@@ -11,7 +11,7 @@ import { RoleSelector } from "@/src/components/RoleSelector";
 
 export const Display = observer(function Display() {
   const store = useStore();
-  const { uiStore, embeddedViewer } = store;
+  const { uiStore, viewerMode } = store;
 
   const boxRef = useRef<HTMLDivElement>(null);
 
@@ -23,7 +23,7 @@ export const Display = observer(function Display() {
       position="relative"
       height="100%"
     >
-      {!embeddedViewer && (
+      {!viewerMode && (
         <Box transition="all 100ms">
           <MenuBar />
           <VStack position="absolute" width="100%" marginY="2" zIndex={1}>
diff --git a/src/types/Store.ts b/src/types/Store.ts
index 7bf9d3b7..29fe5549 100644
--- a/src/types/Store.ts
+++ b/src/types/Store.ts
@@ -57,7 +57,7 @@ export class Store {
   layers: Layer[] = [];
 
   sendingData = false;
-  embeddedViewer = false;
+  viewerMode = false;
 
   _globalIntensity = 1;
   get globalIntensity(): number {
@@ -188,13 +188,15 @@ export class Store {
       return;
     }
 
-    if (this.context === "viewer") {
-      this.embeddedViewer =
-        new URLSearchParams(window.location.search).get("embedded") === "true";
+    this.viewerMode =
+      new URLSearchParams(window.location.search).get("viewerMode") === "true";
+
+    if (this.viewerMode) {
+      // TODO:
       this.experienceStore.loadFromParams() ||
         this.experienceStore.loadEmptyExperience();
-      this.uiStore.initialize(this.embeddedViewer);
-      if (this.embeddedViewer) this.play();
+      this.uiStore.initialize(this.viewerMode);
+      if (this.viewerMode) this.play();
       return;
     }
 
diff --git a/src/types/UIStore.ts b/src/types/UIStore.ts
index 9a070390..58c855f4 100644
--- a/src/types/UIStore.ts
+++ b/src/types/UIStore.ts
@@ -80,8 +80,8 @@ export class UIStore {
     makeAutoObservable(this);
   }
 
-  initialize = (embeddedViewer = false) => {
-    if (embeddedViewer) this.setEmbeddedDefaults();
+  initialize = (viewerMode = false) => {
+    if (viewerMode) this.setViewerModeDefaults();
     else this.loadFromLocalStorage();
 
     if (!this.rootStore.username) this.showingUserPickerModal = true;
@@ -172,7 +172,7 @@ export class UIStore {
     this.saveToLocalStorage();
   };
 
-  setEmbeddedDefaults = () => {
+  setViewerModeDefaults = () => {
     this.horizontalLayout = true;
     this.showingPerformance = false;
     this.displayMode = "canopy";

From b7a0643cfb49c992df010fb082e3b05389d9d497 Mon Sep 17 00:00:00 2001
From: Ben Rollin <ben.rollin@clever.com>
Date: Mon, 11 Nov 2024 00:07:20 -0800
Subject: [PATCH 10/19] create VJ role

---
 src/components/RoleSelector.tsx | 8 ++++++++
 src/types/Store.ts              | 9 ++++++++-
 src/types/context.ts            | 2 +-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/RoleSelector.tsx b/src/components/RoleSelector.tsx
index 4ca5c2f3..a8c0d572 100644
--- a/src/components/RoleSelector.tsx
+++ b/src/components/RoleSelector.tsx
@@ -41,6 +41,14 @@ export const RoleSelector = observer(function RoleSelector() {
         >
           Experience creator
         </MenuItem>
+        <MenuItem
+          onClick={action(() => {
+            store.role = "vj";
+            router.push("/playground");
+          })}
+        >
+          VJ
+        </MenuItem>
       </MenuList>
     </Menu>
   );
diff --git a/src/types/Store.ts b/src/types/Store.ts
index 29fe5549..2a9f582f 100644
--- a/src/types/Store.ts
+++ b/src/types/Store.ts
@@ -115,7 +115,14 @@ export class Store {
     localStorage.setItem("role", value);
   }
   get roleText(): string {
-    return this._role === "emcee" ? "Emcee" : "Experience Creator";
+    switch (this._role) {
+      case "emcee":
+        return "Emcee";
+      case "experience creator":
+        return "Experience Creator";
+      case "vj":
+        return "VJ";
+    }
   }
 
   private _username = "";
diff --git a/src/types/context.ts b/src/types/context.ts
index 9f59368f..349eeedd 100644
--- a/src/types/context.ts
+++ b/src/types/context.ts
@@ -5,4 +5,4 @@ export type Context =
   | "experienceEditor"
   | "playlistEditor";
 
-export type Role = "emcee" | "experience creator";
+export type Role = "emcee" | "experience creator" | "vj";

From 92ea7c0e03b4b61d794ec87607e41a77b43c6c0a Mon Sep 17 00:00:00 2001
From: Ben Rollin <ben.rollin@clever.com>
Date: Mon, 11 Nov 2024 00:10:18 -0800
Subject: [PATCH 11/19] explicitly specify key prop

---
 .../PatternPlayground/ParameterControl.tsx    | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/PatternPlayground/ParameterControl.tsx b/src/components/PatternPlayground/ParameterControl.tsx
index 7c8d1db8..f36bbaa2 100644
--- a/src/components/PatternPlayground/ParameterControl.tsx
+++ b/src/components/PatternPlayground/ParameterControl.tsx
@@ -42,19 +42,35 @@ export const ParameterControl = memo(function ParameterControl({
   let parameterControl = null;
   if (isBooleanParam(patternParam))
     parameterControl = (
-      <BooleanParameterControl {...props} patternParam={patternParam} />
+      <BooleanParameterControl
+        {...props}
+        key={props.key}
+        patternParam={patternParam}
+      />
     );
   else if (isNumberParam(patternParam))
     parameterControl = (
-      <ScalarParameterControl {...props} patternParam={patternParam} />
+      <ScalarParameterControl
+        {...props}
+        key={props.key}
+        patternParam={patternParam}
+      />
     );
   else if (isVector4Param(patternParam))
     parameterControl = (
-      <ColorParameterControl {...props} patternParam={patternParam} />
+      <ColorParameterControl
+        {...props}
+        key={props.key}
+        patternParam={patternParam}
+      />
     );
   else if (isPaletteParam(patternParam))
     parameterControl = (
-      <PaletteParameterControl {...props} patternParam={patternParam} />
+      <PaletteParameterControl
+        {...props}
+        key={props.key}
+        patternParam={patternParam}
+      />
     );
 
   return (

From d24604f68b830be1db2d867e9a2499f96b3c77e2 Mon Sep 17 00:00:00 2001
From: Ben Rollin <ben.rollin@clever.com>
Date: Mon, 11 Nov 2024 00:13:36 -0800
Subject: [PATCH 12/19] fix hook dependencies

---
 src/components/PlaylistEditor/PlaylistEditor.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/PlaylistEditor/PlaylistEditor.tsx b/src/components/PlaylistEditor/PlaylistEditor.tsx
index 30cfcadd..2c3ee286 100644
--- a/src/components/PlaylistEditor/PlaylistEditor.tsx
+++ b/src/components/PlaylistEditor/PlaylistEditor.tsx
@@ -51,13 +51,13 @@ export const PlaylistEditor = observer(function PlaylistEditor() {
       // this is very hacky and I hate it but it works
       if (data?.playlist) playlistStore.selectedPlaylist = data.playlist;
     });
-  }, [data?.playlist]);
+  }, [playlistStore, data?.playlist]);
 
   useEffect(() => {
     if (!data?.experiencesAndUsers.length || store.experienceName) return;
     // once experiences are fetched, load the first experience in the playlist
     store.experienceStore.load(data.experiencesAndUsers[0].experience.name);
-  }, [data?.experiencesAndUsers]);
+  }, [store.experienceName, store.experienceStore, data?.experiencesAndUsers]);
 
   const router = useRouter();
 

From 6bb1171e1f63512cdd539f88c1161c6f25a520f9 Mon Sep 17 00:00:00 2001
From: Ben Rollin <ben.rollin@clever.com>
Date: Mon, 11 Nov 2024 00:19:18 -0800
Subject: [PATCH 13/19] simplify server side initialization

---
 src/types/Store.ts   | 23 +++++++----------------
 src/types/UIStore.ts |  2 +-
 2 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/src/types/Store.ts b/src/types/Store.ts
index 2a9f582f..60103743 100644
--- a/src/types/Store.ts
+++ b/src/types/Store.ts
@@ -158,22 +158,8 @@ export class Store {
 
   constructor(readonly context: Context) {
     makeAutoObservable(this);
-
-    this.initializeServerSide();
   }
 
-  initializeServerSide = () => {
-    // TODO: can move all of these into the field initialization code in their respective stores
-    if (this.context === "playground") {
-      this.uiStore.patternDrawerOpen = true;
-    } else if (this.context === "controller") {
-      this.uiStore.displayMode = "none";
-    } else if (this.context === "viewer") {
-      this.uiStore.showingViewerInstructionsModal = true;
-      this.uiStore.pixelsPerSecond = MIN_PIXELS_PER_SECOND;
-    }
-  };
-
   initializeClientSide = (initialExperienceName?: string) => {
     if (this.initializedClientSide) return;
     this.initializedClientSide = true;
@@ -208,9 +194,14 @@ export class Store {
     }
 
     // check for a role in local storage
-    const role = localStorage.getItem("role");
-    if (role) this._role = role as Role;
+    // const role = localStorage.getItem("role");
+    // if (role) this._role = role as Role;
+
+    // For now, we'll just set the role based on the context (page)
     if (this.context === "playlistEditor") this._role = "emcee";
+    else if (this.context === "experienceEditor")
+      this._role = "experience creator";
+    else if (this.context === "viewer") this._role = "vj";
 
     // check for a username in local storage
     const username = localStorage.getItem("username");
diff --git a/src/types/UIStore.ts b/src/types/UIStore.ts
index 58c855f4..52f0af30 100644
--- a/src/types/UIStore.ts
+++ b/src/types/UIStore.ts
@@ -71,7 +71,7 @@ export class UIStore {
     this.saveToLocalStorage();
   }
 
-  patternDrawerOpen = false;
+  patternDrawerOpen = this.rootStore.context === "playground";
 
   canTimelineZoom = this.rootStore.context === "experienceEditor";
   pixelsPerSecond = INITIAL_PIXELS_PER_SECOND; // the zoom of the timeline

From 835f9797f2a2b3a8104acb838d727c1fd59e7a13 Mon Sep 17 00:00:00 2001
From: Ben Rollin <ben.rollin@clever.com>
Date: Mon, 11 Nov 2024 00:25:02 -0800
Subject: [PATCH 14/19] keep punting on figuring out viewerMode

---
 src/pages/test.tsx |  2 +-
 src/types/Store.ts | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/pages/test.tsx b/src/pages/test.tsx
index 5ab74b22..f8bad30c 100644
--- a/src/pages/test.tsx
+++ b/src/pages/test.tsx
@@ -38,7 +38,7 @@ const EmbedTest = memo(function EmbedTest() {
     <iframe
       width="800"
       height="675"
-      src={`${window.location.origin}/experience/night-jar&embedded=true`}
+      src={`${window.location.origin}/experience/night-jar&viewerMode=true`}
       title="Conjurer"
       allow="autoplay; fullscreen"
       allowFullScreen
diff --git a/src/types/Store.ts b/src/types/Store.ts
index 60103743..632da952 100644
--- a/src/types/Store.ts
+++ b/src/types/Store.ts
@@ -1,5 +1,5 @@
 import { Block } from "@/src/types/Block";
-import { MIN_PIXELS_PER_SECOND, UIStore } from "@/src/types/UIStore";
+import { UIStore } from "@/src/types/UIStore";
 import { makeAutoObservable, configure } from "mobx";
 import { AudioStore } from "@/src/types/AudioStore";
 import { Variation } from "@/src/types/Variations/Variation";
@@ -184,11 +184,13 @@ export class Store {
     this.viewerMode =
       new URLSearchParams(window.location.search).get("viewerMode") === "true";
 
+    // TODO:
     if (this.viewerMode) {
-      // TODO:
-      this.experienceStore.loadFromParams() ||
-        this.experienceStore.loadEmptyExperience();
+      if (initialExperienceName)
+        this.experienceStore.load(initialExperienceName);
+      else this.experienceStore.loadEmptyExperience();
       this.uiStore.initialize(this.viewerMode);
+      this.audioStore.initialize();
       if (this.viewerMode) this.play();
       return;
     }

From 5037427007e06a9aa88759f8d5331ed75a2454a2 Mon Sep 17 00:00:00 2001
From: Ben Rollin <ben.rollin@clever.com>
Date: Mon, 11 Nov 2024 00:29:36 -0800
Subject: [PATCH 15/19] move mobx specific stuff into utils

---
 src/types/Store.ts | 12 ++----------
 src/utils/mobx.ts  | 10 ++++++++++
 2 files changed, 12 insertions(+), 10 deletions(-)
 create mode 100644 src/utils/mobx.ts

diff --git a/src/types/Store.ts b/src/types/Store.ts
index 632da952..3f39d490 100644
--- a/src/types/Store.ts
+++ b/src/types/Store.ts
@@ -1,6 +1,6 @@
 import { Block } from "@/src/types/Block";
 import { UIStore } from "@/src/types/UIStore";
-import { makeAutoObservable, configure } from "mobx";
+import { makeAutoObservable } from "mobx";
 import { AudioStore } from "@/src/types/AudioStore";
 import { Variation } from "@/src/types/Variations/Variation";
 import { ExperienceStore } from "@/src/types/ExperienceStore";
@@ -19,15 +19,7 @@ import {
 } from "@/src/types/Experience";
 import { NO_SONG } from "@/src/types/Song";
 import { Context, Role } from "@/src/types/context";
-
-// Enforce MobX strict mode, which can make many noisy console warnings, but can help use learn MobX better.
-// Feel free to comment out the following if you want to silence the console messages.
-configure({
-  enforceActions: "always",
-  computedRequiresReaction: true,
-  reactionRequiresObservable: true,
-  observableRequiresReaction: false, // This will trigger false positives sometimes, so turning off
-});
+import "@/src/utils/mobx";
 
 export type BlockSelection = { type: "block"; block: Block };
 
diff --git a/src/utils/mobx.ts b/src/utils/mobx.ts
new file mode 100644
index 00000000..bf87281a
--- /dev/null
+++ b/src/utils/mobx.ts
@@ -0,0 +1,10 @@
+import { configure } from "mobx";
+
+// Enforce MobX strict mode, which can make many noisy console warnings, but can help use learn MobX better.
+// Feel free to comment out the following if you want to silence the console messages.
+configure({
+  enforceActions: "always",
+  computedRequiresReaction: true,
+  reactionRequiresObservable: true,
+  observableRequiresReaction: false, // This will trigger false positives sometimes, so turning off
+});

From 092a6915bcb268fdd78be4ea957797196feaa352 Mon Sep 17 00:00:00 2001
From: Ben Rollin <ben.rollin@clever.com>
Date: Mon, 11 Nov 2024 01:06:04 -0800
Subject: [PATCH 16/19] restyle and pattern button

---
 src/components/AddPatternButton.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/AddPatternButton.tsx b/src/components/AddPatternButton.tsx
index 616787b4..ed491db5 100644
--- a/src/components/AddPatternButton.tsx
+++ b/src/components/AddPatternButton.tsx
@@ -9,19 +9,21 @@ export const AddPatternButton = observer(function AddPatternButton() {
   const { uiStore } = store;
 
   return (
-    <Box position="absolute" bottom={0} right={0} m={4}>
+    <Box position="absolute" bottom={0} right={0} m={6}>
       <Button
         variant="solid"
-        bgColor="gray.600"
-        fontWeight="bold"
-        borderRadius="50%"
+        bgColor="orange.500"
+        _hover={{ backgroundColor: "orange.400" }}
+        size="md"
+        borderRadius={"full"}
         onClick={action(() => {
           store.pause();
           uiStore.patternDrawerOpen = true;
         })}
         zIndex={100}
+        leftIcon={<AiOutlinePlus size={18} />}
       >
-        <AiOutlinePlus />
+        Pattern
       </Button>
     </Box>
   );

From 46f20258cc65770607c8ca292c31bf41d94023f4 Mon Sep 17 00:00:00 2001
From: Ben Rollin <ben.rollin@clever.com>
Date: Tue, 12 Nov 2024 01:10:51 -0800
Subject: [PATCH 17/19] audio variation smoothing step size

---
 src/components/VariationControls/AudioVariationControls.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/VariationControls/AudioVariationControls.tsx b/src/components/VariationControls/AudioVariationControls.tsx
index 75181e7a..b6963403 100644
--- a/src/components/VariationControls/AudioVariationControls.tsx
+++ b/src/components/VariationControls/AudioVariationControls.tsx
@@ -46,6 +46,7 @@ export function AudioVariationControls({
           block.triggerVariationReactions(uniformName);
         }}
         value={smoothing}
+        step={1}
       />
     </>
   );

From 8e3982cdc0dd39079f1e94127b6d704e388b0eba Mon Sep 17 00:00:00 2001
From: Ben Rollin <ben.rollin@clever.com>
Date: Tue, 12 Nov 2024 01:24:57 -0800
Subject: [PATCH 18/19] do relative path correctly

---
 src/components/LatencyModal/LatencyTest.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/LatencyModal/LatencyTest.tsx b/src/components/LatencyModal/LatencyTest.tsx
index fbadbb11..b4480ca1 100644
--- a/src/components/LatencyModal/LatencyTest.tsx
+++ b/src/components/LatencyModal/LatencyTest.tsx
@@ -10,7 +10,7 @@ const tempo = 120; // 120 BPM
 const MIN_BEATS = 10;
 
 async function loadSound(audioContext: AudioContext) {
-  let response = await fetch("./kick.mp3", { mode: "no-cors" });
+  let response = await fetch("/kick.mp3", { mode: "no-cors" });
   let arrayBuffer = await response.arrayBuffer();
   let audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
   return audioBuffer;

From a47064359613d8b1a669da2e069abf2466509468 Mon Sep 17 00:00:00 2001
From: Ben Rollin <ben.rollin@clever.com>
Date: Tue, 12 Nov 2024 01:30:44 -0800
Subject: [PATCH 19/19] type fix

---
 src/types/Layer.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/types/Layer.ts b/src/types/Layer.ts
index ce24ce5b..b97db1ad 100644
--- a/src/types/Layer.ts
+++ b/src/types/Layer.ts
@@ -4,13 +4,11 @@ import { DEFAULT_BLOCK_DURATION } from "@/src/utils/time";
 import { makeAutoObservable } from "mobx";
 import { generateId } from "@/src/utils/id";
 import { Context } from "@/src/types/context";
+import type { AudioStore } from "@/src/types/AudioStore";
 
 type RootStore = {
   context: Context;
-  audioStore: {
-    getPeakAtTime: (time: number) => number;
-    globalTime: number;
-  };
+  audioStore: AudioStore;
 };
 
 export class Layer {