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

add microphone component

Browse source
This commit is contained in:
riqo 2020-10-10 18:26:04 -05:00
commit 37cb3d25b6
5 changed files with 151 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/components/UI/UIDetails/messageItem.vue
View file

@ -54,7 +54,7 @@
</template>
<script lang="ts">
import { defineComponent, computed, onMounted, ref, reactive, onBeforeMount } from 'vue';
import { defineComponent, computed, onMounted, ref, reactive } from 'vue';
export default defineComponent({
name: "MessageItem",
props: {
@ -70,8 +70,6 @@ import { defineComponent, computed, onMounted, ref, reactive, onBeforeMount } fr
const msgID = ref(props.item.id);
const bubbleTag = ref(`bubble${msgID.value}`);
const contentTag = ref(`content${msgID.value}`);
let bubble: any;
let content: any;
@ -133,10 +131,12 @@ import { defineComponent, computed, onMounted, ref, reactive, onBeforeMount } fr
bubble.setAttribute("width", bbox.width + 2 * padding);
bubble.setAttribute("height", bbox.height + 2 * padding);
}
// make textbox before mount
createTextBox(props.item.content, 32);
onMounted(async () => {
console.log(bubbleTag.value);
console.log(contentTag.value)
// update bubble and content for current message
bubble = bubbleTag.value;
content = contentTag.value;
await adjustRect();
@ -144,7 +144,6 @@ import { defineComponent, computed, onMounted, ref, reactive, onBeforeMount } fr
})
return {
bubble,
textFill,
bubbleFill,
startingOffset,

64
src/components/UI/UIDetails/messages.ts
View file

@ -23,38 +23,38 @@ const Messages: Message[] = [
modifier: "fr",
imgURL: "@/assets/logo.png",
id: "2"
},
{
content: "Hey Anna, did you get the paper done?",
signature: "Tommy McConville",
outgoing: false,
modifier: "fr",
imgURL: "@/assets/logo.png",
id: "3"
},
{
content: "Yes posting it online soon.",
signature: "Tommy McConville",
outgoing: true,
modifier: "sf",
imgURL: "../../assets/logo.png",
id: "4"
},
{
content: "Sweet, thanks!",
signature: "Tommy McConville",
outgoing: false,
modifier: "fr",
imgURL: "../../assets/logo.png",
id: "5"
},
{
content: "Hey do you know Enrique Hernandez?",
signature: "Crimata AI",
outgoing: false,
modifier: "ai",
imgURL: "../../assets/logo.png",
id: "6"
}
// {
// content: "Hey Anna, did you get the paper done?",
// signature: "Tommy McConville",
// outgoing: false,
// modifier: "fr",
// imgURL: "@/assets/logo.png",
// id: "3"
// },
// {
// content: "Yes posting it online soon.",
// signature: "Tommy McConville",
// outgoing: true,
// modifier: "sf",
// imgURL: "../../assets/logo.png",
// id: "4"
// },
// {
// content: "Sweet, thanks!",
// signature: "Tommy McConville",
// outgoing: false,
// modifier: "fr",
// imgURL: "../../assets/logo.png",
// id: "5"
// }
// {
// content: "Hey do you know Enrique Hernandez?",
// signature: "Crimata AI",
// outgoing: false,
// modifier: "ai",
// imgURL: "../../assets/logo.png",
// id: "6"
// }
];
export default Messages;

72
src/components/microphone/index.vue Normal file
View file

@ -0,0 +1,72 @@
<template>
<div>
Hello from the mic
</div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
name: 'Microphone',
setup() {
const bufferLen = 4096;
const numChannels = 1;
window.AudioContext = window.AudioContext || window.webkitAudioContext;
const audioContext = new AudioContext();
let result;
const getCwasm = async () => {
await import('../../../crate/pkg').then(async module => {
result = await module.add(1, 2);
console.log(result);
});
}
getCwasm();
function handleStream(stream) {
const source = audioContext.createMediaStreamSource(stream);
const context = source.context;
// NOTE might come in handy for VAD
// const sampleRate = context.sampleRate;
const node = context.createScriptProcessor.call(
context,
bufferLen,
numChannels,
numChannels
);
node.onaudioprocess = (e) => {
const inputBuffer = new Float32Array(bufferLen);
e.inputBuffer.copyFromChannel(inputBuffer, 0);
// const int16 = new Int16Array(inputBuffer.buffer);
// TODO add handle audio stream to main process?
// window.postMessage(
// {
// myTypeField: "handle-audio-stream",
// audioData: int16,
// },
// "*"
// );
};
source.connect(node);
node.connect(context.destination);
}
navigator.mediaDevices
.getUserMedia({ audio: true })
.then((stream) => {
handleStream(stream)
})
.catch((error) => {
throw error;
});
}
})
</script>

39
src/composables/useMessageItemComp.ts Normal file
View file

@ -0,0 +1,39 @@
import { computed } from "vue";
export default function useMessageItemComp(modifier: string): string {
const textFill = computed(() => {
switch (modifier) {
case "ai":
return "#fff";
default:
return "#000";
}
});
const bubbleFill = computed(() => {
switch (modifier) {
case "sf":
return "#61b4f4";
case "ai":
return "#585858";
default:
return "#fff";
}
});
const startingOffset = computed(() => {
switch (modifier) {
case "sf":
return "translate(10, 600)";
case "ai":
return "translate(135, 600)";
default:
return "translate(20, 600)";
}
});
return {
textFill,
bubbleFill,
startingOffset
};
}

17
src/views/home/index.vue
View file

@ -1,28 +1,17 @@
<template>
Hello from vue home view
<UIindex />
<Microphone />
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue';
import UIindex from "@/components/UI/index.vue";
import Microphone from "@/components/microphone/index.vue";
export default defineComponent({
name: "HomeIndex",
components: { UIindex },
setup() {
let result;
const getCwasm = async () => {
await import('../../../crate/pkg').then(async module => {
result = await module.add(1, 2);
console.log(result);
});
}
onMounted(() => {
getCwasm();
})
},
components: { UIindex, Microphone },
});
</script>