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

rafactor input handler + renderer

Browse source
This commit is contained in:
riqo 2020-12-13 12:39:57 -06:00
commit 8be959a917
6 changed files with 70 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/UI/UIDetails/messageRenderer.vue
View file

@ -29,7 +29,7 @@
<script lang="ts">
import useMessageRenderer from "@/composables/messageRenderer/useMessageRenderer";
import useScroller from "@/composables/scroller/useScroller";
import useScrollView from "@/composables/scrollView/useScrollView";
import {
defineComponent,
reactive,
@ -55,7 +55,7 @@ export default defineComponent({
}
const { beforeEnter, enter, afterEnter } = useMessageRenderer();
const {scrollView} = useScroller({ targetId: "messageRenderer"});
const {scrollView} = useScrollView({ targetId: "messageRenderer"});
return {
renderArr,

33
src/components/input/inputDetails/audioInput.vue
View file

@ -1,7 +1,7 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" :width="reactiveWidth" height="34" x="50%" y="450" >
<svg xmlns="http://www.w3.org/2000/svg" :width="bubbleWidth" height="34" :x="center" 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"/>
<rect id="Rectangle_478" data-name="Rectangle 478" :width="bubbleWidth" 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"/>
@ -18,26 +18,19 @@
</template>
<script lang="ts">
import {ref, defineComponent, onMounted, watch} from 'vue'
import useInputRenderer from "@/composables/inputItem/useInputRenderer";
import { defineComponent, computed } from 'vue'
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();
// });
props: {
bubbleWidth: Number
},
setup(props){
const center = computed(() => {
if (props.bubbleWidth) {
return 175 - props.bubbleWidth / 2;
}
})
return { center }
}
})
</script>

16
src/components/input/inputDetails/textInput.vue
View file

@ -1,5 +1,5 @@
<template>
<foreignObject class="inputContainer" :x="inputXoffset" y="450" width="55%" height="50%">
<foreignObject class="inputContainer" :x="textXoffset" 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>
@ -9,20 +9,12 @@
</template>
<script lang="ts">
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: "TextInput",
setup() {
const record = ref(false);
const { inputXoffset, input } = useTextInput();
return {
input,
inputXoffset,
};
props: {
input: String,
textXoffset: String
},
});
</script>

19
src/components/input/inputItem.vue
View file

@ -1,6 +1,13 @@
<template>
<audio-input v-if="renderAudio" />
<text-input v-else />
<audio-input
v-if="renderAudio"
:bubbleWidth="reactiveWidth"
/>
<text-input
v-else
:input="input"
:textXoffset="textInputXoffset"
/>
</template>
<script lang="ts">
@ -12,10 +19,14 @@ export default defineComponent({
name: "InputItem",
components: {TextInput, AudioInput},
setup() {
const { renderAudio } = useInputRenderer();
const { input, renderAudio, reactiveWidth, textInputXoffset } = useInputRenderer();
return {
renderAudio
input,
textInputXoffset,
renderAudio,
reactiveWidth
}
}
})

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

@ -1,32 +1,35 @@
import {ref, computed, inject, watch, onUnmounted, onMounted, render} from "vue";
import useInputAnims from "./useInputAnims";
import {ref, watch, onUnmounted, onMounted } from "vue";
import useKeyDownHandler from "@/composables/keyDownHandler/useKeyDownHandler";
import useMediaStream from "@/composables/mediaStream/useMediaStream";
import useStreamRecorder from "@/composables/streamRecorder/useStreamRecorder";
import useTextInput from '@/composables/inputItem/useTextInput';
/*
* Renders input to the user
*/
export default function useInputRenderer() {
const { keyDownHandler, input } = useKeyDownHandler();
let stream: any;
// program ref varaiables
const renderAudio = ref(false);
const {handleStream} = useStreamRecorder(renderAudio)
const reactiveWidth = ref(10);
// get input feedback & handler function
const { keyDownHandler, input } = useKeyDownHandler();
// get text Offset and & textRender function
const { textInputXoffset, renderTextInput } = useTextInput(input, renderAudio);
// why do we have audio stuff here
let stream: any;
const {handleStream} = useStreamRecorder(renderAudio)
onMounted(async () => {
stream = await useMediaStream()
})
// stop stream recording on space keyup event
function keyupHandler(e: any) {
if (e.key === " " && renderAudio.value) {
console.log("stop recording");
renderAudio.value = false;
// window.postMessage(
// {
// myTypeField: "audio-stream",
// stream: false,
// },
// "*"
// );
input.value = "";
reactiveWidth.value = 35;
reactiveWidth.value = 10;
}
}
@ -34,49 +37,34 @@ export default function useInputRenderer() {
window.addEventListener("keydown", keyDownHandler);
window.addEventListener('keyup', keyupHandler);
// remove Event Listener on component unMount
// remove Event Listeners on component unMount
onUnmounted(() => {
window.removeEventListener("keydown", keyDownHandler);
window.removeEventListener("keyup", keyupHandler);
});
// determine whether to render text or audio based one the keyboard input
watch(input, async (input, prevInput) => {
console.log(input)
if (prevInput === '' && input === ' ') {
// begin recording
console.log('record')
if (prevInput !== "" || prevInput.length > 0) {
if (!renderAudio.value) {
renderTextInput();
}
return;
}
// 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();
if (input === " " && renderAudio.value === false) {
console.log("record");
renderAudio.value = true;
handleStream(stream.stream, reactiveWidth);
return;
}
renderTextInput();
});
const reactiveWidth = ref(35);
watch(reactiveWidth, (w) => {
console.log(w)
})
return {
input,
renderAudio,
reactiveWidth
reactiveWidth,
textInputXoffset
}
}

16
src/composables/inputItem/useTextInput.ts
View file

@ -1,9 +1,7 @@
import {ref, computed, watch, inject} from 'vue';
import useInputAnims from "./useInputAnims";
import useInputRenderer from './useInputRenderer';
export default function useTextInput() {
const {input, renderAudio} = useInputRenderer();
export default function useTextInput(input: any, audioRender: any) {
const emitter: any = inject("mitt");
const {animateSend, verticalShiftInput, inputAppear} = useInputAnims();
@ -29,24 +27,18 @@ export default function useTextInput() {
}
}
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(() => {
const textInputXoffset = computed(() => {
return `calc(50% - ${inputWidth.value / 2})`;
});
return {
input,
inputXoffset,
textInputXoffset,
renderTextInput
}
}