+++ /dev/null
-<template>
-
- <div id=inputItem
- class="input-item"
- :class="{ playing: isRecording }"
- :style="{ top: `${elementY}px`, left: `${elementX}px` }">
- <span class="play"></span>
- <span class="pause"></span>
- <TextInput :input="input"/>
- </div>
-
-</template>
-
-<script lang="ts">
-
-import { defineComponent, onMounted, onUnmounted, ref, watch } from "vue";
-import draggify from '@/modules/draggify';
-import useMitt from "@/modules/mitt";
-import TextInput from '@/components/taInput/textDetails/text.vue';
-import useInputController from "@/components/taInput/inputController";
-
-export default defineComponent({
- name: "InputItem",
- components: { TextInput },
- setup() {
-
- const isRecording = ref(false);
-
- const { emitter } = useMitt();
- const { elementX, elementY } = draggify({ elementId: 'inputItem'});
-
- const {
- input,
- visualizeStream,
- audioBubbleWidth,
- paths,
- } = useInputController();
-
- onMounted(() => {
- emitter.on('input-audio-record', (record) => isRecording.value = record);
- })
-
- onUnmounted(() => {
- emitter.all.clear();
- })
-
- return {
- elementX,
- elementY,
- isRecording,
- input
- }
- }
-
-});
-
-</script>
-
-<style lang="scss" scoped>
-
- .input-item {
-
- position: absolute;
-
- width: 30px;
- height: 30px;
-
- border-radius: 19px;
-
- z-index: 20;
-
- top: 200px;
- right: 0px;
-
-
- background-color: white;
- border: 4px solid #C3C3C3;
-
- cursor: pointer;
-
- .play, .pause {
- z-index: 5;
- &::before, &::after {
- -webkit-border-radius: 1000px;
- -moz-border-radius: 1000px;
- border-radius: 1000px;
- content: "";
- position: absolute;
- height: 2.35em;
- width: 2.35em;
- left: 50%;
- transform: translate(-50%, -50%);
- top: 50%;
- z-index: 0;
- }
- }
- .play::before {
- box-shadow: 0 0 0 rgba(195, 195, 195, 0);
- }
- .pause {
- opacity: 0;
- }
- &.playing {
- .play {
- opacity: 0;
- }
- .pause {
- opacity: 1;
- &::before {
- -moz-animation: audio1 1.5s infinite ease-in-out;
- -o-animation: audio1 1.5s infinite ease-in-out;
- -webkit-animation: audio1 1.5s infinite ease-in-out;
- animation: audio1 1.5s infinite ease-in-out;
- }
- &::after {
- -moz-animation: audio2 2.2s infinite ease-in-out;
- -o-animation: audio2 2.2s infinite ease-in-out;
- -webkit-animation: audio2 2.2s infinite ease-in-out;
- animation: audio2 2.2s infinite ease-in-out;
- }
- }
- }
-}
-
-.animate-audio1 {
- -moz-animation: audio1 1.5s infinite ease-in-out;
- -o-animation: audio1 1.5s infinite ease-in-out;
- -webkit-animation: audio1 1.5s infinite ease-in-out;
- animation: audio1 1.5s infinite ease-in-out;
-}
-@keyframes audio1 {
- 0%,
- 100% {
- box-shadow: 0 0 0 0.4em rgba(195, 195, 195, 0.4);
- }
- 25% {
- box-shadow: 0 0 0 0.15em rgba(195, 195, 195, 0.15);
- }
- 50% {
- box-shadow: 0 0 0 0.55em rgba(195, 195, 195, 0.55);
- }
- 75% {
- box-shadow: 0 0 0 0.25em rgba(195, 195, 195, 0.25);
- }
-}
-.animate-audio2 {
- -moz-animation: audio2 2.2s infinite ease-in-out;
- -o-animation: audio2 2.2s infinite ease-in-out;
- -webkit-animation: audio2 2.2s infinite ease-in-out;
- animation: audio2 2.2s infinite ease-in-out;
-}
-@keyframes audio2 {
- 0%,
- 100% {
- box-shadow: 0 0 0 0.25em rgba(195, 195, 195, 0.15);
- }
- 25% {
- box-shadow: 0 0 0 0.4em rgba(195, 195, 195, 0.3);
- }
- 50% {
- box-shadow: 0 0 0 0.15em rgba(195, 195, 195, 0.05);
- }
- 75% {
- box-shadow: 0 0 0 0.55em rgba(195, 195, 195, 0.45);
- }
-}
-
-</style>