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

Merge remote-tracking branch 'origin/main'

Browse source
This commit is contained in:
riqo 2021-02-05 16:47:03 -06:00
commit 9d64ffcb41
31 changed files with 360 additions and 387 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/App.vue
View file

@ -5,23 +5,22 @@
</template>
<style lang="scss">
html,
body {
margin: 0;
padding: 0;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
width: 100vw;
}
html, body {
margin: 0;
padding: 0;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
width: 100vw;
}
</style>

BIN
src/assets/logo.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 6.7 KiB

3
src/background.ts
View file

@ -4,7 +4,6 @@
*/
"use strict";
import { protocol } from "electron";
import { initApp } from './background/initApp';
@ -22,4 +21,4 @@ const isDevelopment = process.env.NODE_ENV !== "production";
console.log('Starting Crimata electron app.');
initApp(isDevelopment);
})();
})();

1
src/background/initApp.ts
View file

@ -1,4 +1,3 @@
"use strict";
import { app } from "electron";

34
src/components/messenger/index.vue → src/components/home/index.vue
View file

@ -12,8 +12,6 @@
</template>
<script lang="ts">
// mock messages
import Messages from "./mockMessages";
// child components
import MessageVisualizer from "./messageVisualizer/index.vue";
@ -23,44 +21,40 @@ import TextAudioInput from "@/components/taInput/index.vue";
import { Mitt } from "@/types/mitt/index";
import { defineComponent, ref, inject } from "vue";
export default defineComponent({
name: "Messenger",
components: { MessageVisualizer, TextAudioInput },
setup() {
const messages = Messages;
const count = ref(0);
// imports mitt Emitter safely
let emitter: Mitt;
const emitterInject: Mitt | undefined = inject("mitt");
if (emitterInject) emitter = emitterInject;
function emittMessage() {
if (count.value < messages.length) {
emitter.emit("renderMessage", messages[count.value]);
count.value++;
return;
}
if (emitterInject) {
emitter = emitterInject;
}
// Render message when render-message event called.
window.ipcRenderer.on("render-message", (event, payload) => {
console.log(payload.message);
emitter.emit("renderMessage", payload.message);
});
return {
emittMessage,
};
},
});
</script>
<style lang="scss" scoped>
#messenger {
width: 350px;
height: 500px;
background-color: #e6e6e6;
box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.3);
// border-radius: 20px;
}
#messenger {
width: 350px;
height: 500px;
background-color: #e6e6e6;
box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.3);
// border-radius: 20px;
}
</style>

0
src/components/messenger/messageBubble/bubbleDetails/computed.ts → src/components/home/messageBubble/bubbleDetails/computed.ts
View file

0
src/components/messenger/messageBubble/bubbleDetails/drawer.ts → src/components/home/messageBubble/bubbleDetails/drawer.ts
View file

0
src/components/messenger/messageBubble/index.vue → src/components/home/messageBubble/index.vue
View file

0
src/components/messenger/messageVisualizer/index.vue → src/components/home/messageVisualizer/index.vue
View file

0
src/components/messenger/messageVisualizer/viewDetails/anime.ts → src/components/home/messageVisualizer/viewDetails/anime.ts
View file

0
src/components/messenger/messageVisualizer/viewDetails/offsetCalculator.ts → src/components/home/messageVisualizer/viewDetails/offsetCalculator.ts
View file

0
src/components/messenger/messageVisualizer/viewDetails/visualizer.ts → src/components/home/messageVisualizer/viewDetails/visualizer.ts
View file

95
src/components/login/index.vue Normal file
View file

@ -0,0 +1,95 @@
<template>
<div id="login">
<!-- login title -->
<div id="loginTitle">Login</div>
<!-- username and password forms -->
<div id="loginBox">
<!-- username -->
<input
class="input"
type="text"
v-model="login.username"
placeholder="username"
/>
<!-- password -->
<input
class="input"
type="password"
v-model="login.password"
placeholder="Password"
/>
</div>
<!-- submit button -->
<button class="button" v-on:click="submitCreds">Submit</button>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "Login",
data: function() {
return {
login: {
username: "",
password: ""
}
};
}
});
</script>
<style lang="scss" scoped>
#login {
width: 350px;
height: 500px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #e6e6e6;
}
#loginBox {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.input {
background-color: #B9B9B9;
border: none;
color: white;
padding: 16px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
border-radius: 10px;
}
.button {
background-color: #58C4FD;
border: none;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 20px;
font-weight: bold;
}
</style>

161
src/components/messenger/mockMessages.ts
View file

@ -1,161 +0,0 @@
import { Message } from "@/types/message/index";
const Messages: Message[] = [
{
content: "Welcome",
context: "ai",
subContext: "",
modifier: "ai",
id: "2",
time: ""
},
{
content:
"add friend",
context: "launch",
subContext: "",
modifier: "sf",
id: "1",
time: ""
},
{
content: "Did you mean to addcontact?",
context: "addcontact",
subContext: "",
modifier: "ai",
id: "5",
time: ""
},
{
content: "yes",
context: "fulfill",
subContext: "",
modifier: "sf",
id: "6",
time: ""
},
{
content: "Hey Anna, did you get the paper done?",
context: "Mesage from Tommy McConville",
subContext: "New Conversation",
modifier: "ai",
id: "3",
time: ""
},
{
content: "Hey do you know Enrique Hernandez?",
context: "Message from Crimata",
subContext: "",
modifier: "ai",
id: "7",
time: ""
},
{
content: "Yes posting it online soon.",
context: "You to Tommy McConville",
subContext: "",
modifier: "sf",
id: "4",
time: ""
},
{
content: "Hey do you know Enrique Hernandez?",
context: "Message from Crimata",
subContext: "",
modifier: "ai",
id: "8",
time: ""
},
{
content: "Hey Anna, did you get the paper done?",
context: "Message from Tommy McConville",
subContext: "",
modifier: "ai",
id: "9",
time: ""
},
{
content: "Hey Anna, did you get the paper done?",
context: "Message from Tommy McConville",
subContext: "",
modifier: "ai",
id: "10",
time: ""
},
{
content: "Yes posting it online soon.",
context: "Message from Tommy McConville",
subContext: "",
modifier: "sf",
id: "11",
time: ""
},
{
content:
"I can be there at 5 pm tomorrow to greet you at a Chick file with my almond and chive salad.",
context: "You to Tommy McConville",
subContext: "",
modifier: "sf",
id: "12",
time: ""
},
{
content: "Hey Anna, did you get the paper done?",
context: "Message from Tommy McConville",
subContext: "",
modifier: "ai",
id: "13",
time: ""
},
{
content: "Hey Anna, did you get the paper done?",
context: "Message from Tommy McConville",
subContext: "",
modifier: "ai",
id: "14",
time: ""
},
{
content: "Yes posting it online soon.",
context: "You to Tommy McConville",
subContext: "",
modifier: "sf",
id: "15",
time: ""
},
{
content: "Sweet, thanks!",
context: "Message from Tommy McConville",
subContext: "",
modifier: "ai",
id: "16",
time: ""
},
{
content: "Hey do you know Enrique Hernandez?",
context: "Message from Crimata AI",
subContext: "",
modifier: "ai",
id: "17",
time: ""
},
{
content: "Yes posting it online soon.",
context: "You to Tommy McConville",
subContext: "",
modifier: "sf",
id: "18",
time: ""
},
{
content: "Sweet, thanks!",
context: "Message from Tommy McConville",
subContext: "",
modifier: "ai",
id: "19",
time: ""
},
];
export default Messages;

73
src/components/splash/index.vue Normal file
View file

@ -0,0 +1,73 @@
<template>
<div id="splash">
<svg
xmlns="http://www.w3.org/2000/svg"
width="57.046"
height="52.759"
viewBox="0 0 57.046 52.759"
>
<g transform="translate(-4127 -507)">
<g transform="translate(3949 332.206)">
<g transform="translate(178 174.794)">
<g transform="translate(0 27.405)">
<circle
cx="12.677"
cy="12.677"
r="12.677"
transform="translate(0 0)"
fill="#383838"
/>
<circle
cx="12.677"
cy="12.677"
r="12.677"
transform="translate(31.692 0)"
fill="#383838"
/>
</g>
<circle
cx="12.677"
cy="12.677"
r="12.677"
transform="translate(15.822 0)"
fill="#383838"
/>
<path
d="M36.27,83.67"
transform="translate(-23.569 -43.588)"
fill="#ff0"
/>
</g>
</g>
</g>
</svg>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "Splash",
});
</script>
<style lang="scss" scoped>
#splash {
width: 350px;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
background-color: #EBEBEB;
box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.3);
// border-radius: 20px;
}
</style>

127
src/components/voiceBackground/index.vue
View file

@ -1,127 +0,0 @@
<template>
<defs>
<radialGradient
id="radial-gradient"
cx="0.5"
cy="0.7"
:r="radius"
gradientTransform="translate(-1.489 1.5) rotate(-90) scale(1 1.989)"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#fff" />
<stop id="sound" offset="1" stop-color="rgb(230, 230, 230)" />
</radialGradient>
<filter id="Rectangle_410" x="0" y="0" width="380" height="530" filterUnits="userSpaceOnUse">
<feOffset dy="3" input="SourceAlpha" />
<feGaussianBlur stdDeviation="5" result="blur" />
<feFlood flood-opacity="0.129" />
<feComposite operator="in" in2="blur" />
<feComposite in="SourceGraphic" />
</filter>
</defs>
<g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#Rectangle_410)">
<rect
id="Rectangle_410-2"
data-name="Rectangle 410"
width="350"
height="500"
fill="url(#radial-gradient)"
/>
</g>
</template>
<script>
import { defineComponent, onMounted, ref, inject, watch } from "vue";
export default defineComponent({
name: "voiceBackground",
setup() {
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const analyzer = audioCtx.createAnalyser();
analyzer.fftSize = 2048;
const xInitial = 24;
const xFinal = 640;
// analyzer.minDecibels = -90;
analyzer.smoothingTimeConstant = 0.85;
const dataArray = new Uint8Array(analyzer.frequencyBinCount);
const sampleRate = 16000;
let gradient;
const radius = ref(0);
const think = ref(false);
const aiOffset = ref(0.7);
const anime = inject("animejs");
let thinkAnimation;
onMounted(() => {
gradient = document.getElementById("radial-gradient");
thinkAnimation = anime({
targets: gradient,
loop: true,
cy: "1.3",
direction: "alternate",
easing: "easeInOutCirc",
});
});
function convertBlock(buffer) {
// incoming data is an ArrayBuffer
const incomingData = new Uint8Array(buffer); // create a uint8 view on the ArrayBuffer
const l = incomingData.length; // length, we need this for the loop
const outputData = new Float32Array(incomingData.length); // create the Float32Array for output
for (let i = 0; i < l; i++) {
outputData[i] = (incomingData[i] - 128) / 128.0; // convert audio to float
}
return outputData; // return the Float32Array
}
window.ipcRenderer.on("render-audio", (event, payload) => {
const floatArray = convertBlock(payload.audio.buffer);
const buffer = audioCtx.createBuffer(1, floatArray.length, sampleRate);
buffer.copyToChannel(floatArray, 0, 0);
const source = audioCtx.createBufferSource();
source.buffer = buffer;
source.connect(analyzer);
source.start();
analyzer.getByteFrequencyData(dataArray);
const dataView = dataArray.slice(xInitial, xFinal);
const sum = dataView.reduce((a, b) => a + b);
const average = sum / dataView.length;
const scaled = average / 255;
const zeroed = scaled - 0.6;
if (zeroed > 0) {
radius.value = zeroed;
}
if (payload.speech === think.value) {
return;
} else {
think.value = payload.speech;
}
});
// watch(think, async (think, prevThink) => {
// if (think) {
// anime({
// targets: gradient,
// cy: "0.7",
// });
// thinkAnimation.play();
// } else {
// thinkAnimation.pause();
// // thinkAnimation.reset();
// anime({
// targets: gradient,
// cy: "1",
// });
//
// // thinkAnimation.reset();
// }
// });
return {
radius,
aiOffset,
};
},
});
</script>

22
src/main.ts
View file

@ -1,16 +1,18 @@
import { createApp } from "vue";
// src/main.ts
import App from "./App.vue";
import router from "./router";
// animation library
import anime from "animejs";
// event handler library
import mitt from "mitt";
import anime from "animejs";
import { createApp } from "vue";
// Handle events.
const emitter = mitt();
createApp(App)
.use(router)
.provide("animejs", anime)
.provide("mitt", emitter)
.mount("#app");
const app = createApp(App)
app.use(router)
app.provide("animejs", anime)
app.provide("mitt", emitter)
app.mount("#app");

12
src/preload.ts
View file

@ -7,10 +7,13 @@ declare global {
ipcRenderer: typeof ipcRenderer;
}
}
window.ipcRenderer = ipcRenderer;
process.once("loaded", () => {
window.addEventListener("message", event => {
// do something with custom event
const message = event.data;
@ -25,6 +28,11 @@ process.once("loaded", () => {
if (message.myTypeField === "update-recorder") {
ipcRenderer.send("update-recorder", message.record);
}
});
});
if (message.myTypeField === "submit-creds") {
ipcRenderer.send("submit-creds", message)
}
});
});

40
src/router.ts Normal file
View file

@ -0,0 +1,40 @@
import {
createRouter,
createWebHistory,
createWebHashHistory,
RouteRecordRaw
} from "vue-router";
import Home from "./views/home.vue";
import Login from "./views/login.vue";
import Splash from "./views/splash.vue";
// Define the routes (/*) for the app here.
const routes: Array<RouteRecordRaw> = [
{
path: "/sdf",
name: "Splash",
component: Splash
},
{
path: "/sdf",
name: "Home",
component: Home
},
{
path: "/",
name: "Login",
component: Login
},
];
const router = createRouter({
history: process.env.IS_ELECTRON ? createWebHashHistory() : createWebHistory(process.env.BASE_URL),
routes
});
export default router;

17
src/router/index.ts
View file

@ -1,17 +0,0 @@
import { createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from "vue-router";
import HomeIndex from "../views/home/index.vue";
const routes: Array<RouteRecordRaw> = [
{
path: "/",
name: "Home",
component: HomeIndex
},
];
const router = createRouter({
history: process.env.IS_ELECTRON ? createWebHashHistory() : createWebHistory(process.env.BASE_URL),
routes
});
export default router;

17
src/views/home.vue Normal file
View file

@ -0,0 +1,17 @@
<template>
<HomeComponent />
</template>
<script lang="ts">
import { defineComponent } from "vue";
import HomeComponent from "@/components/home/index.vue";
export default defineComponent({
name: "Home",
components: { HomeComponent },
});
</script>

12
src/views/home/index.vue
View file

@ -1,12 +0,0 @@
<template>
<Messenger />
</template>
<script lang="ts">
import { defineComponent } from "vue";
import Messenger from "@/components/messenger/index.vue";
export default defineComponent({
name: "HomeIndex",
components: { Messenger },
});
</script>

17
src/views/login.vue Normal file
View file

@ -0,0 +1,17 @@
<template>
<LoginComponent />
</template>
<script lang="ts">
import { defineComponent } from "vue";
import LoginComponent from "@/components/login/index.vue";
export default defineComponent({
name: "Login",
components: { LoginComponent },
});
</script>

0
src/views/user/register.vue → src/views/register.vue
View file

17
src/views/splash.vue Normal file
View file

@ -0,0 +1,17 @@
<template>
<SplashComponent />
</template>
<script lang="ts">
import { defineComponent } from "vue";
import SplashComponent from "@/components/splash/index.vue"
export default defineComponent({
name: "Splash",
components: { SplashComponent },
});
</script>

0
src/views/user/login.vue
View file