add core directory

src/core/UI/input/useInputController.ts

@@ -0,0 +1,88 @@
+import {ref, watch, onUnmounted, onMounted } from "vue";
+import useKeyDownHandler from "@/utils/keyDownHandler/useKeyDownHandler";
+import useMediaStream from "@/utils/mediaStream/useMediaStream";
+import useStreamRecord from "./audio/useStreamRecord";
+import useStreamRender from './audio/useStreamRender';
+import useTextRender from './text/useTextRender';
+
+/* 
+* Input controller logic
+* Will render text input by default as user types or
+* if user holds space bar down, audio media-stream 
+* will be rendered & recorded
+*/
+export default function useInputController() {
+  // program ref varaiables
+  const renderAudio = ref(false);
+  const reactiveWidth = ref(10);
+  const pathOffset = ref(10);
+  const paths = ref([]);
+  // audioStream variables
+  let stream: MediaStream;
+  let recorder: MediaRecorder;
+  
+  // use input ref & keydown handler function
+  const { keyDownHandler, input } = useKeyDownHandler();
+  // use text Offset computed prop and & textRender function
+  const { textInputXoffset, renderTextInput } = useTextRender(input);
+  // use stream render and record logic
+  const { renderStream } =  useStreamRender(renderAudio);
+  const { initRecorder } = useStreamRecord()
+
+  // get stream & initialize recorder object on mount
+  onMounted(async () => {
+    stream = await useMediaStream();
+    recorder = initRecorder(stream);
+  })
+
+  // callback function called on key up event
+  function keyupHandler(e: any) {
+    // stop stream recording on space key up
+    if (e.key === " " && renderAudio.value) {
+      console.log("stop recording");
+      recorder.stop();
+      // reset controller ref variables
+      renderAudio.value = false;
+      input.value = "";
+      reactiveWidth.value = 10;
+      pathOffset.value = 10;
+    }
+  }
+
+  // step 1: add window event keyboard listeners
+  window.addEventListener("keydown", keyDownHandler);
+  window.addEventListener('keyup', keyupHandler);
+
+  // step 2: determine whether to render text or audio based one the keyboard input
+  watch(input, (input, prevInput) => {
+    if (prevInput !== "" || prevInput.length > 0) {
+      if (!renderAudio.value) {
+        renderTextInput();
+      }
+      return;
+    }
+    if (input === " " && renderAudio.value === false) {
+      console.log("record");
+      renderAudio.value = true;
+      recorder.start();
+      renderStream(stream, reactiveWidth, pathOffset, paths);
+      return;
+    }           
+    renderTextInput();
+  });
+
+  // remove Event Listeners on component unMount
+  onUnmounted(() => {
+    window.removeEventListener("keydown", keyDownHandler);
+    window.removeEventListener("keyup", keyupHandler);
+  });
+
+  return {
+    input,
+    renderAudio,
+    reactiveWidth,
+    textInputXoffset,
+    paths
+  }
+
+}