me/mime-chat
Watch
1
0
Fork
You've already forked mime-chat
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix dual audioRenderer calls

Browse source
This commit is contained in:
riqo 2020-12-12 15:32:46 -06:00
commit 875b0828d0
8 changed files with 138 additions and 130 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/components/UI/UIDetails/audioInput.vue
View file

@ -1,20 +0,0 @@
<template>
<foreignObject x="100" y="450" width="55%" height="50%">
<div xmlns="http://www.w3.org/1999/xhtml">
<div>
<canvas width="640" height="100"></canvas>
</div>
</div>
</foreignObject>
</template>
<script lang="ts">
import {defineComponent} from 'vue'
import useStreamRecorder from "@/composables/streamRecorder/useStreamRecorder";
export default defineComponent ({
name: 'AudioInput',
setup() {
}
})
</script>

6
src/components/UI/index.vue
View file

@ -8,7 +8,6 @@
>
<!-- <AI /> -->
<MessageRenderer />
<AudioInput />
<InputItem />
<!-- <TitleBar /> -->
</svg>
@ -17,15 +16,14 @@
<script lang="ts">
import AI from "../AI/index.vue";
import MessageRenderer from "./UIDetails/messageRenderer.vue";
import InputItem from "./UIDetails/inputItem.vue";
import InputItem from "@/components/input/inputItem.vue";
import TitleBar from "./UIDetails/titleBar.vue";
import Messages from "./UIDetails/messages";
import AudioInput from './UIDetails/audioInput.vue';
import { Mitt } from "@/types/mitt/index";
import { defineComponent, ref, inject } from "vue";
export default defineComponent({
name: "UI",
components: { MessageRenderer, InputItem, AudioInput },
components: { MessageRenderer, InputItem },
setup() {
const messages = Messages;
const count = ref(0);

43
src/components/input/inputDetails/audioInput.vue Normal file
View file

@ -0,0 +1,43 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" :width="reactiveWidth" height="34" x="50%" y="450" >
<g id="Group_126" data-name="Group 126" transform="translate(0 0)">
<rect id="Rectangle_478" data-name="Rectangle 478" :width="reactiveWidth" height="34" rx="10" transform="translate(0 0)" fill="#b9b9b9"/>
<g id="Group_125" data-name="Group 125">
<!-- <path id="Path_328" data-name="Path 328" d="M0,25v-10" transform="translate(10 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.5"/>
<path id="Path_328" data-name="Path 328" d="M0,25v-15" transform="translate(15 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.5"/>
<path id="Path_328" data-name="Path 328" d="M0,25v-20" transform="translate(20 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.5"/>
<path id="Path_328" data-name="Path 328" d="M0,25v-15" transform="translate(25 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.5"/>
<path id="Path_328" data-name="Path 328" d="M0,25v-10" transform="translate(30 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.5"/>
<path id="Path_328" data-name="Path 328" d="M0,25v-5" transform="translate(120 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.5"/> -->
</g>
</g>
</svg>
</template>
<script lang="ts">
import {ref, defineComponent, onMounted, watch} from 'vue'
import useInputRenderer from "@/composables/inputItem/useInputRenderer";
export default defineComponent ({
name: 'AudioInput',
setup() {
const { reactiveWidth, input } = useInputRenderer();
return {
reactiveWidth
}
// const { initRecorder } = useStreamRecorder(record);
// onMounted(async () => {
// // step get streamRecorder reference
// const { streamRecorder } = await initRecorder();
// });
}
})
</script>

22
src/components/UI/UIDetails/inputItem.vue → src/components/input/inputDetails/textInput.vue
View file

@ -1,9 +1,8 @@
<template>
<foreignObject class="inputContainer" :x="renderAudio? reactiveWidth: inputXoffset" y="450" width="55%" height="50%">
<foreignObject class="inputContainer" :x="inputXoffset" y="450" width="55%" height="50%">
<div xmlns="http://www.w3.org/1999/xhtml">
<div class="inputBubble" contenteditable v-show="input.length > 0">
<p v-if="!renderAudio">{{ input }}</p>
<canvas v-else class="audioCanvas" height="20" width="10" ></canvas>
<p>{{ input }}</p>
</div>
</div>
</foreignObject>
@ -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;

22
src/components/input/inputItem.vue Normal file
View file

@ -0,0 +1,22 @@
<template>
<audio-input v-if="renderAudio" />
<text-input v-else />
</template>
<script lang="ts">
import {defineComponent} from 'vue'
import TextInput from './inputDetails/textInput.vue';
import AudioInput from './inputDetails/audioInput.vue';
import useInputRenderer from "@/composables/inputItem/useInputRenderer";
export default defineComponent({
name: "InputItem",
components: {TextInput, AudioInput},
setup() {
const { renderAudio } = useInputRenderer();
return {
renderAudio
}
}
})
</script>

87
src/composables/inputItem/useInputRenderer.ts
View file

@ -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

32
src/composables/inputItem/useTextInputRender.ts → src/composables/inputItem/useTextInput.ts
View file

@ -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,
}
}

36
src/composables/streamRecorder/useStreamRecorder.ts
View file

@ -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 {