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

added streamRender animation

Browse source
This commit is contained in:
riqo 2020-12-11 16:20:41 -06:00
commit 899d6ffe7f
7 changed files with 169 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/components/UI/UIDetails/inputItem.vue
View file

@ -1,8 +1,9 @@
<template>
<foreignObject class="inputContainer" :x="inputXoffset" y="450" width="55%" height="50%">
<foreignObject class="inputContainer" :x="renderAudio? reactiveWidth: 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>{{ input }}</p>
<p v-if="!renderAudio">{{ input }}</p>
<canvas v-else class="audioCanvas" height="20" width="10" ></canvas>
</div>
</div>
</foreignObject>
@ -16,57 +17,20 @@ export default defineComponent({
name: "InputItem",
setup() {
const record = ref(false);
const { inputXoffset, input } = useInputRenderer();
const { inputXoffset, input, renderAudio, reactiveWidth } = useInputRenderer();
const { initRecorder } = useStreamRecorder(record);
onMounted(async () => {
// step get streamRecorder reference
const { streamRecorder } = await initRecorder();
// add event listener for space keyup
window.addEventListener("keyup", (e) => {
if (e.key === " " && streamRecorder.state === "recording") {
console.log("stop recording");
record.value = false;
streamRecorder.stop();
// window.postMessage(
// {
// myTypeField: "audio-stream",
// stream: false,
// },
// "*"
// );
console.log("recorder is", streamRecorder.state);
input.value = "";
}
});
// begin recording on space
watch(input, (input, prevInput) => {
if (prevInput !== "" || prevInput.length > 0) {
return;
}
if (input === " ") {
console.log("record");
record.value = true;
// window.postMessage(
// {
// myTypeField: "audio-stream",
// stream: true,
// },
// "*"
// );
streamRecorder.start();
console.log("recorder is", streamRecorder.state);
}
});
});
return {
input,
inputXoffset,
renderAudio,
reactiveWidth
};
},
});
@ -86,6 +50,9 @@ div[contenteditable] {
background-color: #585858;
font-size: 14;
text-align: left;
.audioCanvas {
max-width: 190px
}
p {
max-width: 150px;
overflow-wrap: break-word;