+++ /dev/null
-<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>
\ No newline at end of file
>
<!-- <AI /> -->
<MessageRenderer />
- <AudioInput />
<InputItem />
<!-- <TitleBar /> -->
</svg>
<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);
--- /dev/null
+<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>
\ No newline at end of file
<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>
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
};
},
});
background-color: #585858;
font-size: 14;
text-align: left;
- .audioCanvas {
- max-width: 190px
- }
p {
max-width: 150px;
overflow-wrap: break-word;
--- /dev/null
+<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>
\ No newline at end of file
-import {ref, computed, inject, watch, onUnmounted, onMounted} from "vue";
+import {ref, computed, inject, watch, onUnmounted, onMounted, render} from "vue";
import useInputAnims from "./useInputAnims";
import useKeyDownHandler from "@/composables/keyDownHandler/useKeyDownHandler";
import useMediaStream from "@/composables/mediaStream/useMediaStream";
// "*"
// );
input.value = "";
- reactiveWidth.value = 0;
+ reactiveWidth.value = 35;
}
}
window.removeEventListener("keyup", keyupHandler);
});
- const emitter: any = inject("mitt");
- const {animateSend, verticalShiftInput, inputAppear} = useInputAnims();
-
- const inputHeight = ref(42);
- const inputWidth = ref(0);
- const renderInput = async() => {
- const inputDivs = await document.getElementsByClassName("inputBubble");
- const height = inputDivs[0].getBoundingClientRect().height;
- inputWidth.value = inputDivs[0].getBoundingClientRect().width;
- const foreignObjectDiv = document.getElementsByClassName(
- "inputContainer"
- );
- if (height !== inputHeight.value) {
- inputHeight.value = height;
- }
- const foreignEl = foreignObjectDiv[0] as HTMLElement;
- if (inputHeight.value === 0) {
- inputAppear(foreignEl)
- } else if (inputHeight.value > 36) {
- const yTrans = -inputHeight.value + 30;
- verticalShiftInput(foreignEl, yTrans);
- }
- }
-
-
- const reactiveWidth = ref(0);
watch(input, async (input, prevInput) => {
- if (prevInput !== "" || prevInput.length > 0) {
- renderInput();
- return;
+ console.log(input)
+ if (prevInput === '' && input === ' ') {
+ // begin recording
+ console.log('record')
}
- if (input === " ") {
- console.log("record");
- renderAudio.value = true;
- const canvas = await document.getElementsByClassName('audioCanvas');
- const test = canvas[0] as HTMLCanvasElement;
- handleStream(stream.stream, test, reactiveWidth);
- // window.postMessage(
- // {
- // myTypeField: "audio-stream",
- // stream: true,
- // },
- // "*"
- // );
- //console.log("recorder is", streamRecorder.state);
- }
- renderInput();
+ // 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();
});
- 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(() => {
- return `calc(50% - ${inputWidth.value / 2})`;
- });
+ const reactiveWidth = ref(35);
+ watch(reactiveWidth, (w) => {
+ console.log(w)
+ })
return {
- inputXoffset,
input,
renderAudio,
reactiveWidth
-import {ref} from 'vue';
+import {ref, computed, watch, inject} from 'vue';
import useInputAnims from "./useInputAnims";
-export default function useTextRenderInput() {
+import useInputRenderer from './useInputRenderer';
+export default function useTextInput() {
- const inputHeight = ref(42);
- const inputWidth = ref(0);
+ const {input, renderAudio} = useInputRenderer();
- const { verticalShiftInput, inputAppear } = useInputAnims();
+ const emitter: any = inject("mitt");
+ const {animateSend, verticalShiftInput, inputAppear} = useInputAnims();
+ const inputHeight = ref(42);
+ const inputWidth = ref(0);
const renderTextInput = async() => {
const inputDivs = await document.getElementsByClassName("inputBubble");
const height = inputDivs[0].getBoundingClientRect().height;
}
}
+ 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(() => {
+ return `calc(50% - ${inputWidth.value / 2})`;
+ });
+
return {
- renderTextInput
+ input,
+ inputXoffset,
}
}
\ No newline at end of file
window.AudioContext = window.AudioContext;
let audio_context = new AudioContext();
const analyzer = audio_context.createAnalyser();
- analyzer.fftSize = 256;
+ analyzer.fftSize = 2048;
var bufferLengthAlt = analyzer.frequencyBinCount;
var dataArrayAlt = new Uint8Array(bufferLengthAlt);
}
}
- function visualize(canvas:any, canvasCtx: any, w: any) {
- const WIDTH = canvas.width;
- const HEIGHT = canvas.height;
+ function visualize(w: any) {
+
function drawAlt() {
if (!render.value) {
return;
}
const drawVisual = requestAnimationFrame(drawAlt);
- analyzer.getByteFrequencyData(dataArrayAlt);
-
- // canvasCtx.fillStyle = 'rgb(0, 0, 0)';
- // canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
- var barWidth = (WIDTH / bufferLengthAlt) * 5;
- var barHeight;
- var x = 0;
+ analyzer.getByteTimeDomainData(dataArrayAlt);
// max-width
- if (canvas.width === 190) {
+ if (w.value === 190) {
return;
}
// increase width and center as time passes
- canvas.width++;
- const center = 175 - canvas.width / 2;
- w.value= center;
-
- // fill bubble with frequency bar
- for(var i = 0; i < bufferLengthAlt; i++) {
- barHeight = dataArrayAlt[i];
- canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
- canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2);
- x += barWidth + 1;
- }
+ w.value++;
+ const center = 175 - w.value / 2;
+ // w.value= center;
}
drawAlt();
}
- function handleStream(s: MediaStream, c: HTMLCanvasElement, w: any) {
+ function handleStream(s: MediaStream, w: any) {
source = audio_context.createMediaStreamSource(s);
source.connect(analyzer);
- const canvasCtx = c.getContext('2d');
- visualize(c, canvasCtx, w);
+ visualize(w);
}
return {
projects / mime-chat / commitdiff