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>