113 lines
3 KiB
TypeScript
113 lines
3 KiB
TypeScript
/*
|
|
* Controls which input to visualize
|
|
* Will visualize text input by default as user types or
|
|
* if user holds space bar down, input audio stream
|
|
* will be visualized & recorded
|
|
*/
|
|
|
|
import { ref, watch, onUnmounted, onMounted } from "vue";
|
|
import useKeyDownHandler from "@/modules/keyDownHandler/useKeyDownHandler";
|
|
import useMediaStream from "@/modules/mediaStream";
|
|
import useAudioVisualizer from './audioDetails/audioVisualizer';
|
|
import useTextVisualizer from './textDetails/textVisualizer';
|
|
import useMitt from "@/modules/mitt";
|
|
import { useIpc } from '@/modules/ipc';
|
|
|
|
let stream: MediaStream;
|
|
|
|
export default function useInputController() {
|
|
const visualizeStream = ref(false);
|
|
const paths = ref([]);
|
|
const audioBubbleWidth = ref(10);
|
|
const { emitter } = useMitt();
|
|
const { post } = useIpc();
|
|
|
|
// send message on ENTER
|
|
const enterCallback = (input: string) => {
|
|
|
|
const message = {
|
|
audio: 0,
|
|
text: input
|
|
};
|
|
<<<<<<< Updated upstream
|
|
|
|
// trigger send animation
|
|
emitter.emit("animate-send");
|
|
|
|
// send message to backend
|
|
post('message', message);
|
|
}
|
|
|
|
const {
|
|
visualizeStreamAsPaths,
|
|
=======
|
|
emitter.emit("animate-send", message);
|
|
}
|
|
|
|
const {
|
|
visualizeStreamAsPaths,
|
|
>>>>>>> Stashed changes
|
|
expandBubble
|
|
} = useAudioVisualizer(visualizeStream);
|
|
|
|
const { keyDownHandler, input } = useKeyDownHandler(enterCallback);
|
|
|
|
const {
|
|
textInputXoffset,
|
|
textInputYoffset,
|
|
renderTextInput
|
|
} = useTextVisualizer(input);
|
|
|
|
// stops stream recording on space key up
|
|
function keyupHandler(e: any) {
|
|
if (e.key === " " && visualizeStream.value) {
|
|
|
|
post('update-recorder', false);
|
|
visualizeStream.value = false;
|
|
paths.value = []
|
|
audioBubbleWidth.value = 10;
|
|
input.value = ''
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
stream = await useMediaStream({ audio: true });
|
|
// add window event keyboard listeners
|
|
window.addEventListener("keydown", keyDownHandler);
|
|
window.addEventListener('keyup', keyupHandler);
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener("keydown", keyDownHandler);
|
|
window.removeEventListener("keyup", keyupHandler);
|
|
});
|
|
|
|
// 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) {
|
|
visualizeStream.value = true;
|
|
post('update-recorder', true);
|
|
expandBubble(audioBubbleWidth);
|
|
visualizeStreamAsPaths(stream, paths, audioBubbleWidth);
|
|
return;
|
|
}
|
|
renderTextInput();
|
|
});
|
|
|
|
|
|
return {
|
|
input,
|
|
visualizeStream,
|
|
textInputXoffset,
|
|
textInputYoffset,
|
|
audioBubbleWidth,
|
|
paths
|
|
}
|
|
|
|
}
|