diff --git a/.gitignore b/.gitignore index ce49695..c8e3bba 100644 --- a/.gitignore +++ b/.gitignore @@ -4,6 +4,8 @@ node_modules /crate/target/* /.log +rawAudio.wav + # local env files .env.local .env.*.local diff --git a/rawAudio.wav b/rawAudio.wav deleted file mode 100644 index 5582bc0..0000000 Binary files a/rawAudio.wav and /dev/null differ diff --git a/src/components/UI/UIDetails/titleBar.vue b/src/components/UI/UIDetails/titleBar.vue deleted file mode 100644 index e90db9c..0000000 --- a/src/components/UI/UIDetails/titleBar.vue +++ /dev/null @@ -1,64 +0,0 @@ - - - diff --git a/src/components/input/inputDetails/audioInput.vue b/src/components/input/inputDetails/audioInput.vue deleted file mode 100644 index 3c8b72b..0000000 --- a/src/components/input/inputDetails/audioInput.vue +++ /dev/null @@ -1,68 +0,0 @@ - - - diff --git a/src/components/UI/index.vue b/src/components/messenger/index.vue similarity index 72% rename from src/components/UI/index.vue rename to src/components/messenger/index.vue index 8351c94..c382f3a 100644 --- a/src/components/UI/index.vue +++ b/src/components/messenger/index.vue @@ -6,24 +6,26 @@ xmlns:xlink="http://www.w3.org/1999/xlink" @click="emittMessage" > - - - - + + diff --git a/src/core/UI/input/audio/useStreamVisualizer.ts b/src/components/taInput/audioDetails/audioVisualizer.ts similarity index 89% rename from src/core/UI/input/audio/useStreamVisualizer.ts rename to src/components/taInput/audioDetails/audioVisualizer.ts index c31bf6c..20f2318 100644 --- a/src/core/UI/input/audio/useStreamVisualizer.ts +++ b/src/components/taInput/audioDetails/audioVisualizer.ts @@ -9,7 +9,7 @@ interface AudioPath { color: string; draw: boolean; } -export default function useStreamVisualizer(draw: Ref) { +export default function useAudioVisualizer(draw: Ref) { const audioContext = new AudioContext(); const analyzer = audioContext.createAnalyser(); analyzer.fftSize = 128; @@ -24,7 +24,7 @@ export default function useStreamVisualizer(draw: Ref) { /* * Draws MediaStream audioTrack as 'AudioPath' objects */ - function drawStreamAs(paths: Ref, bubbleWidth: Ref): void { + function drawStream(paths: Ref, bubbleWidth: Ref): void { const xInitial = ref(10); const maxAmplitude = 15; const maxBubbleWidth = 300; @@ -51,7 +51,7 @@ export default function useStreamVisualizer(draw: Ref) { opacity: 0, duration: 0 }) - } + } } } @@ -77,7 +77,7 @@ export default function useStreamVisualizer(draw: Ref) { paths.value.push(p); } - paths.value = []; + paths.value = []; function drawPathStream(): void { let streamPath; @@ -94,11 +94,11 @@ export default function useStreamVisualizer(draw: Ref) { * To Draw pathStream */ if (bubbleWidth.value === 300) { - xInitial.value = bubbleWidth.value - 10; + xInitial.value = bubbleWidth.value - 10; } else if (bubbleWidth.value > 20) { - xInitial.value = bubbleWidth.value; + xInitial.value = bubbleWidth.value; } else { - xInitial.value +=3; + xInitial.value += 3; } streamPath = setTimeout(async () => { const pathList = document.querySelectorAll('path'); @@ -106,8 +106,8 @@ export default function useStreamVisualizer(draw: Ref) { drawNewPath(); if (bubbleWidth.value === maxBubbleWidth) { shiftPathStream(pathList); - } - }, 200) + } + }, 200) } drawPathStream(); } @@ -123,9 +123,9 @@ export default function useStreamVisualizer(draw: Ref) { return; } animation = requestAnimationFrame(increase); - if (bubbleRef.value < 300) { - bubbleRef.value++; - } + if (bubbleRef.value < 300) { + bubbleRef.value++; + } } increase(); } @@ -137,7 +137,7 @@ export default function useStreamVisualizer(draw: Ref) { function visualizeStreamAsPaths(s: MediaStream, paths: Ref, bubbleWidth: Ref): void { const source = audioContext.createMediaStreamSource(s); source.connect(analyzer); - drawStreamAs(paths, bubbleWidth); + drawStream(paths, bubbleWidth); } return { diff --git a/src/components/input/inputItem.vue b/src/components/taInput/index.vue similarity index 53% rename from src/components/input/inputItem.vue rename to src/components/taInput/index.vue index 2f41513..91fb570 100644 --- a/src/components/input/inputItem.vue +++ b/src/components/taInput/index.vue @@ -1,17 +1,26 @@ diff --git a/src/components/taInput/textDetails/textAnime.ts b/src/components/taInput/textDetails/textAnime.ts new file mode 100644 index 0000000..8f5eafa --- /dev/null +++ b/src/components/taInput/textDetails/textAnime.ts @@ -0,0 +1,57 @@ +import AnimeFunc from "@/types/animejs/index"; +import { inject } from "vue"; +import { Ref } from "@/types/vueRef/index"; +/* + * Anime js animations used by input textController +*/ +export default function useTextInputAnims() { + + // imports animejs safely + let anime: AnimeFunc; + const animeInject: AnimeFunc | undefined = inject("animejs"); + if (animeInject) anime = animeInject; + + const animateSend = (el: HTMLElement, elHeight: number, input: Ref) => { + anime({ + targets: el, + translateY: -elHeight + 15, + duration: 200, + easing: "easeInQuad", + complete: function() { + anime({ + targets: el, + translateY: 50, + duration: 200, + easing: "easeOutQuad", + complete: function() { + input.value = ""; + } + }) + } + }) + } + + const inputAppear = (el: HTMLElement) => { + anime({ + targets: el, + translateY: -10, + duration: 0 + }); + } + + const verticalShiftInput = (el: HTMLElement, yTrans: number) => { + anime({ + targets: el, + translateY: yTrans, + easing: "easeOutQuad", + duration: 150, + }); + } + + return { + animateSend, + verticalShiftInput, + inputAppear + } + +} diff --git a/src/components/taInput/textDetails/textVisualizer.ts b/src/components/taInput/textDetails/textVisualizer.ts new file mode 100644 index 0000000..6a27d48 --- /dev/null +++ b/src/components/taInput/textDetails/textVisualizer.ts @@ -0,0 +1,49 @@ +import { ref, computed, inject } from 'vue'; +import useTextInputAnims from "./textAnime"; +import { Ref } from "@/types/vueRef/index"; +/* + * text rendering logic used by inputController +*/ +export default function useTextVisualizer(input: Ref) { + const inputHeight = ref(42); + const inputWidth = ref(0); + + const emitter: any = inject("mitt"); + const { animateSend, verticalShiftInput, inputAppear } = useTextInputAnims(); + + async function renderTextInput() { + // first, get input dimensions + const inputDivs = await document.getElementsByClassName("inputBubble"); + const height = inputDivs[0].getBoundingClientRect().height; + inputWidth.value = inputDivs[0].getBoundingClientRect().width; + // then, query for foreignObject div + const foreignObjectDiv = document.getElementsByClassName( + "inputContainer" + ); + const foreignEl = foreignObjectDiv[0] as HTMLElement; + if (height !== inputHeight.value) { + inputHeight.value = height; + } + if (inputHeight.value === 0) { + inputAppear(foreignEl) + } else if (inputHeight.value > 36) { + const yTrans = -inputHeight.value + 30; + verticalShiftInput(foreignEl, yTrans); + } + } + + emitter.on("newSelfMessage", async (payload: any) => { + const inputEl = document.getElementsByClassName("inputContainer"); + const foreignEl = inputEl[0] as HTMLElement; + animateSend(foreignEl, inputHeight.value, input); + }); + + const textInputXoffset = computed(() => { + return `calc(50% - ${inputWidth.value / 2})`; + }); + + return { + textInputXoffset, + renderTextInput + } +} diff --git a/src/components/AI/index.vue b/src/components/voiceBackground/index.vue similarity index 99% rename from src/components/AI/index.vue rename to src/components/voiceBackground/index.vue index d263eb0..124a541 100644 --- a/src/components/AI/index.vue +++ b/src/components/voiceBackground/index.vue @@ -34,7 +34,7 @@