+++ /dev/null
-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 useStreamVisualizer from './audio/useStreamVisualizer';
-
-import useTextRender from './text/useTextRender';
-
-import useAudioAnimations from './audio/audioDetails/useAnimations';
-
-import useAudioRecorder from './audio/useAudioRecorder';
-
-/*
-* Input visualizer logic
-* Will visualize text input by default as user types or
-* if user holds space bar down, input audio stream
-* will be visualized & recorded
-*/
-// NOTE: input params should probably be input and MediaStream
-export default function useInputController() {
- const visualizeStream = ref(false);
- const paths = ref([]);
- const audioBubbleWidth = ref(10);
- let stream: MediaStream;
- let recorder: MediaRecorder;
-
- const { keyDownHandler, input } = useKeyDownHandler();
- const { textInputXoffset, renderTextInput } = useTextRender(input);
- const { visualizeStreamAsPaths, expandBubble } = useStreamVisualizer(visualizeStream);
- const { initRecorder } = useStreamRecord()
- const { animateSend } = useAudioAnimations();
-
- function audioSend() {
- const domQuery = document.getElementsByClassName("audioInput");
- const inputEl = domQuery[0];
- animateSend(inputEl, visualizeStream);
- }
-
- // stops stream recording on space key up
- function keyupHandler(e: any) {
- if (e.key === " " && visualizeStream.value) {
- console.log("stop recording");
- window.postMessage({
- myTypeField: 'update-recorder',
- record: false
- }, '*')
-
- visualizeStream.value = false;
- paths.value = []
- audioBubbleWidth.value = 10;
- input.value = ''
- }
- }
-
- // add window event keyboard listeners
- window.addEventListener("keydown", keyDownHandler);
- window.addEventListener('keyup', keyupHandler);
-
- // get stream & initialize recorder object on mount
- onMounted(async () => {
- stream = await useMediaStream();
- // useAudioRecorder(visualizeStream, stream)
- recorder = initRecorder(stream);
- })
-
- // determine whether to render text or audio based one the keyboard input
- watch(input, (input, prevInput) => {
- if (prevInput !== "" || prevInput.length > 0) {
- if (!visualizeStream.value) {
- renderTextInput();
- }
- return;
- }
- if (input === " " && visualizeStream.value === false) {
- console.log("record MediaStream");
- visualizeStream.value = true;
- window.postMessage({
- myTypeField: 'update-recorder',
- record: true
- }, '*')
-
- expandBubble(audioBubbleWidth);
- visualizeStreamAsPaths(stream, paths, audioBubbleWidth);
- return;
- }
- renderTextInput();
- });
-
- // remove Event Listeners on component unMount
- onUnmounted(() => {
- window.removeEventListener("keydown", keyDownHandler);
- window.removeEventListener("keyup", keyupHandler);
- });
-
- return {
- input,
- visualizeStream,
- textInputXoffset,
- audioBubbleWidth,
- paths
- }
-
-}