diff --git a/src/components/UI/UIDetails/audioInput.vue b/src/components/UI/UIDetails/audioInput.vue
deleted file mode 100644
index 8e3677f..0000000
--- a/src/components/UI/UIDetails/audioInput.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/src/components/UI/index.vue b/src/components/UI/index.vue
index 00896f3..4ad8647 100644
--- a/src/components/UI/index.vue
+++ b/src/components/UI/index.vue
@@ -8,7 +8,6 @@
>
-
@@ -17,15 +16,14 @@
\ No newline at end of file
diff --git a/src/components/UI/UIDetails/inputItem.vue b/src/components/input/inputDetails/textInput.vue
similarity index 61%
rename from src/components/UI/UIDetails/inputItem.vue
rename to src/components/input/inputDetails/textInput.vue
index 8eb0aa5..06e8c3b 100644
--- a/src/components/UI/UIDetails/inputItem.vue
+++ b/src/components/input/inputDetails/textInput.vue
@@ -1,9 +1,8 @@
-
+
@@ -13,24 +12,16 @@
import useInputRenderer from "@/composables/inputItem/useInputRenderer";
import useStreamRecorder from "@/composables/streamRecorder/useStreamRecorder";
import { defineComponent, watch, onMounted, ref } from "vue";
+import useTextInput from '@/composables/inputItem/useTextInput';
export default defineComponent({
- name: "InputItem",
+ name: "TextInput",
setup() {
const record = ref(false);
- const { inputXoffset, input, renderAudio, reactiveWidth } = useInputRenderer();
- const { initRecorder } = useStreamRecorder(record);
-
- onMounted(async () => {
- // step get streamRecorder reference
- const { streamRecorder } = await initRecorder();
-
- });
+ const { inputXoffset, input } = useTextInput();
return {
input,
inputXoffset,
- renderAudio,
- reactiveWidth
};
},
});
@@ -50,9 +41,6 @@ div[contenteditable] {
background-color: #585858;
font-size: 14;
text-align: left;
- .audioCanvas {
- max-width: 190px
- }
p {
max-width: 150px;
overflow-wrap: break-word;
diff --git a/src/components/input/inputItem.vue b/src/components/input/inputItem.vue
new file mode 100644
index 0000000..bd5612d
--- /dev/null
+++ b/src/components/input/inputItem.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/composables/inputItem/useInputRenderer.ts b/src/composables/inputItem/useInputRenderer.ts
index 9d69788..d722756 100644
--- a/src/composables/inputItem/useInputRenderer.ts
+++ b/src/composables/inputItem/useInputRenderer.ts
@@ -1,4 +1,4 @@
-import {ref, computed, inject, watch, onUnmounted, onMounted} from "vue";
+import {ref, computed, inject, watch, onUnmounted, onMounted, render} from "vue";
import useInputAnims from "./useInputAnims";
import useKeyDownHandler from "@/composables/keyDownHandler/useKeyDownHandler";
import useMediaStream from "@/composables/mediaStream/useMediaStream";
@@ -26,7 +26,7 @@ export default function useInputRenderer() {
// "*"
// );
input.value = "";
- reactiveWidth.value = 0;
+ reactiveWidth.value = 35;
}
}
@@ -40,67 +40,40 @@ export default function useInputRenderer() {
window.removeEventListener("keyup", keyupHandler);
});
- const emitter: any = inject("mitt");
- const {animateSend, verticalShiftInput, inputAppear} = useInputAnims();
-
- const inputHeight = ref(42);
- const inputWidth = ref(0);
- const renderInput = async() => {
- const inputDivs = await document.getElementsByClassName("inputBubble");
- const height = inputDivs[0].getBoundingClientRect().height;
- inputWidth.value = inputDivs[0].getBoundingClientRect().width;
- const foreignObjectDiv = document.getElementsByClassName(
- "inputContainer"
- );
- if (height !== inputHeight.value) {
- inputHeight.value = height;
- }
- const foreignEl = foreignObjectDiv[0] as HTMLElement;
- if (inputHeight.value === 0) {
- inputAppear(foreignEl)
- } else if (inputHeight.value > 36) {
- const yTrans = -inputHeight.value + 30;
- verticalShiftInput(foreignEl, yTrans);
- }
- }
-
-
- const reactiveWidth = ref(0);
watch(input, async (input, prevInput) => {
- if (prevInput !== "" || prevInput.length > 0) {
- renderInput();
- return;
+ console.log(input)
+ if (prevInput === '' && input === ' ') {
+ // begin recording
+ console.log('record')
}
- if (input === " ") {
- console.log("record");
- renderAudio.value = true;
- const canvas = await document.getElementsByClassName('audioCanvas');
- const test = canvas[0] as HTMLCanvasElement;
- handleStream(stream.stream, test, reactiveWidth);
- // window.postMessage(
- // {
- // myTypeField: "audio-stream",
- // stream: true,
- // },
- // "*"
- // );
- //console.log("recorder is", streamRecorder.state);
- }
- renderInput();
+ // if (prevInput !== "" || prevInput.length > 0) {
+ // if (!renderAudio.value) {
+ // // renderInput();
+ // }
+ // return;
+ // }
+ // if (input === " " && renderAudio.value === false) {
+ // console.log("record");
+ // renderAudio.value = true;
+ // // handleStream(stream.stream, reactiveWidth);
+ // return;
+ // // window.postMessage(
+ // // {
+ // // myTypeField: "audio-stream",
+ // // stream: true,
+ // // },
+ // // "*"
+ // // );
+ // }
+ // renderInput();
});
- emitter.on("newSelfMessage", async (payload: any) => {
- const inputEl = document.getElementsByClassName("inputContainer");
- const foreignEl = inputEl[0] as HTMLElement;
- animateSend(foreignEl, inputHeight.value, input);
- });
-
- const inputXoffset = computed(() => {
- return `calc(50% - ${inputWidth.value / 2})`;
- });
+ const reactiveWidth = ref(35);
+ watch(reactiveWidth, (w) => {
+ console.log(w)
+ })
return {
- inputXoffset,
input,
renderAudio,
reactiveWidth
diff --git a/src/composables/inputItem/useTextInputRender.ts b/src/composables/inputItem/useTextInput.ts
similarity index 51%
rename from src/composables/inputItem/useTextInputRender.ts
rename to src/composables/inputItem/useTextInput.ts
index 78be890..97162d8 100644
--- a/src/composables/inputItem/useTextInputRender.ts
+++ b/src/composables/inputItem/useTextInput.ts
@@ -1,12 +1,15 @@
-import {ref} from 'vue';
+import {ref, computed, watch, inject} from 'vue';
import useInputAnims from "./useInputAnims";
-export default function useTextRenderInput() {
+import useInputRenderer from './useInputRenderer';
+export default function useTextInput() {
+
+ const {input, renderAudio} = useInputRenderer();
+
+ const emitter: any = inject("mitt");
+ const {animateSend, verticalShiftInput, inputAppear} = useInputAnims();
const inputHeight = ref(42);
const inputWidth = ref(0);
-
- const { verticalShiftInput, inputAppear } = useInputAnims();
-
const renderTextInput = async() => {
const inputDivs = await document.getElementsByClassName("inputBubble");
const height = inputDivs[0].getBoundingClientRect().height;
@@ -26,7 +29,24 @@ export default function useTextRenderInput() {
}
}
+ watch(input, async (input, prevInput) => {
+ if (!renderAudio.value) {
+ renderTextInput();
+ }
+ });
+
+ emitter.on("newSelfMessage", async (payload: any) => {
+ const inputEl = document.getElementsByClassName("inputContainer");
+ const foreignEl = inputEl[0] as HTMLElement;
+ animateSend(foreignEl, inputHeight.value, input);
+ });
+
+ const inputXoffset = computed(() => {
+ return `calc(50% - ${inputWidth.value / 2})`;
+ });
+
return {
- renderTextInput
+ input,
+ inputXoffset,
}
}
\ No newline at end of file
diff --git a/src/composables/streamRecorder/useStreamRecorder.ts b/src/composables/streamRecorder/useStreamRecorder.ts
index 8f04618..c53d3d4 100644
--- a/src/composables/streamRecorder/useStreamRecorder.ts
+++ b/src/composables/streamRecorder/useStreamRecorder.ts
@@ -13,7 +13,7 @@ export default function useStreamRecorder(render: any) {
window.AudioContext = window.AudioContext;
let audio_context = new AudioContext();
const analyzer = audio_context.createAnalyser();
- analyzer.fftSize = 256;
+ analyzer.fftSize = 2048;
var bufferLengthAlt = analyzer.frequencyBinCount;
var dataArrayAlt = new Uint8Array(bufferLengthAlt);
@@ -32,48 +32,32 @@ export default function useStreamRecorder(render: any) {
}
}
- function visualize(canvas:any, canvasCtx: any, w: any) {
- const WIDTH = canvas.width;
- const HEIGHT = canvas.height;
+ function visualize(w: any) {
+
function drawAlt() {
if (!render.value) {
return;
}
const drawVisual = requestAnimationFrame(drawAlt);
- analyzer.getByteFrequencyData(dataArrayAlt);
-
- // canvasCtx.fillStyle = 'rgb(0, 0, 0)';
- // canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
- var barWidth = (WIDTH / bufferLengthAlt) * 5;
- var barHeight;
- var x = 0;
+ analyzer.getByteTimeDomainData(dataArrayAlt);
// max-width
- if (canvas.width === 190) {
+ if (w.value === 190) {
return;
}
// increase width and center as time passes
- canvas.width++;
- const center = 175 - canvas.width / 2;
- w.value= center;
-
- // fill bubble with frequency bar
- for(var i = 0; i < bufferLengthAlt; i++) {
- barHeight = dataArrayAlt[i];
- canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
- canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2);
- x += barWidth + 1;
- }
+ w.value++;
+ const center = 175 - w.value / 2;
+ // w.value= center;
}
drawAlt();
}
- function handleStream(s: MediaStream, c: HTMLCanvasElement, w: any) {
+ function handleStream(s: MediaStream, w: any) {
source = audio_context.createMediaStreamSource(s);
source.connect(analyzer);
- const canvasCtx = c.getContext('2d');
- visualize(c, canvasCtx, w);
+ visualize(w);
}
return {