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

remove deprecated components

Browse source
This commit is contained in:
Enrique Hernandez 2021-03-07 18:46:15 -06:00
commit 85a69f7a14
2 changed files with 0 additions and 187 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/components/content.vue
View file

@ -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>

168
src/components/inputItem.vue
View file

@ -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>