104 lines
3.1 KiB
TypeScript
104 lines
3.1 KiB
TypeScript
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 controller 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");
|
|
// recorder.stop();
|
|
|
|
// 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;
|
|
// recorder.start();
|
|
|
|
// 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
|
|
}
|
|
|
|
}
|