remove deprecated components
This commit is contained in:
Enrique Hernandez
parent
2fa76a8912
commit
85a69f7a14
2 changed files with 0 additions and 187 deletions
|
|
@ -1,19 +0,0 @@
|
||||||
<template>
|
|
||||||
Input Item Content
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
|
|
||||||
import { defineComponent, onMounted, ref, onUnmounted } from "vue";
|
|
||||||
import { calcSideProximity, calcPosition } from "./helpers"
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,168 +0,0 @@
|
||||||
<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>
|
|
||||||
Loading…
Reference in a new issue