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

audio renderer v1

Browse source
This commit is contained in:
riqo 2020-12-13 15:07:06 -06:00
commit 64ac22f8d9
4 changed files with 103 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,28 +3,45 @@
<g id="Group_126" data-name="Group 126" transform="translate(0 0)">
<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 v-for="(path, index) in paths"
:key="index"
:id="path.id"
:data-name="path.name"
:d="path.d"
:transform="path.transform"
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(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>
<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 { defineComponent, computed } from 'vue'
import { defineComponent, computed, ref } from 'vue'
export default defineComponent ({
name: 'AudioInput',
props: {
bubbleWidth: Number
bubbleWidth: Number,
paths: Array
},
setup(props){
// need audioPath type/interface
const center = computed(() => {
if (props.bubbleWidth) {
return 175 - props.bubbleWidth / 2;

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

@ -2,6 +2,7 @@
<audio-input
v-if="renderAudio"
:bubbleWidth="reactiveWidth"
:paths="paths"
/>
<text-input
v-else
@ -20,13 +21,19 @@ export default defineComponent({
components: {TextInput, AudioInput},
setup() {
const { input, renderAudio, reactiveWidth, textInputXoffset } = useInputRenderer();
const {
input,
renderAudio,
reactiveWidth,
textInputXoffset,
paths } = useInputRenderer();
return {
input,
textInputXoffset,
renderAudio,
reactiveWidth
reactiveWidth,
paths
}
}
})