<script lang="ts">
import useMessageRenderer from "@/composables/messageRenderer/useMessageRenderer";
-import useScroller from "@/composables/scroller/useScroller";
+import useScrollView from "@/composables/scrollView/useScrollView";
import {
defineComponent,
reactive,
}
const { beforeEnter, enter, afterEnter } = useMessageRenderer();
- const {scrollView} = useScroller({ targetId: "messageRenderer"});
+ const {scrollView} = useScrollView({ targetId: "messageRenderer"});
return {
renderArr,
<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"/>
</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>
\ No newline at end of file
<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>
</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>
<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">
name: "InputItem",
components: {TextInput, AudioInput},
setup() {
- const { renderAudio } = useInputRenderer();
+
+ const { input, renderAudio, reactiveWidth, textInputXoffset } = useInputRenderer();
return {
- renderAudio
+ input,
+ textInputXoffset,
+ renderAudio,
+ reactiveWidth
}
}
})
-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() {
+ // program ref varaiables
+ const renderAudio = ref(false);
+ 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 renderAudio = ref(false);
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;
}
}
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
}
}
\ No newline at end of file
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();
}
}
- 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
}
}
\ No newline at end of file
projects / mime-chat / commitdiff