diff --git a/.browserslistrc b/.browserslistrc deleted file mode 100644 index 214388f..0000000 --- a/.browserslistrc +++ /dev/null @@ -1,3 +0,0 @@ -> 1% -last 2 versions -not dead diff --git a/.gitignore b/.gitignore index 67a7ab0..20128fc 100644 --- a/.gitignore +++ b/.gitignore @@ -9,6 +9,7 @@ crash.log # local env files .env.local .env.*.local +.env # Log files npm-debug.log* @@ -27,3 +28,10 @@ pnpm-debug.log* #Electron-builder output /dist_electron + +#Electron-builder config +electron-builder.yml + +#Window and session states +session.json +window.json diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml new file mode 100644 index 0000000..2c0d22c --- /dev/null +++ b/.gitlab-ci.yml @@ -0,0 +1,63 @@ +stages: + - Build + - Upload + - Release + +build: + stage: Build + tags: + # Use a macos runner to build. + - darwin + before_script: + - yarn + script: + - export VERSION=$(node -e "console.log(require('./package.json').version)") + - echo "VERSION=$VERSION" >> variables.env + - export APPNAME=$(node -e "console.log(require('./package.json').productName)") + - echo "APPNAME=$APPNAME" >> variables.env + - yarn build + artifacts: + reports: + dotenv: variables.env + name: $CI_COMMIT_REF_SLUG + paths: + - dist_electron/*.dmg + - dist_electron/*.zip + - dist_electron/*.yml + when: on_success + only: + - main + +variables: + PACKAGE: '${APPNAME}-${VERSION}.dmg' + PACKAGE_REGISTRY_URL: '${CI_API_V4_URL}/projects/${CI_PROJECT_ID}/packages/generic/${APPNAME}/${VERSION}' + +# Upload package to gitlab registry. +upload: + stage: Upload + needs: + - job: build + artifacts: true + rules: + - if: $CI_COMMIT_TAG + when: never # Do not run this job when a tag is created manually + - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH # Run this job when when commits are pushed to the default branch + script: + # Take the package we built and place it in the package registry. + - 'curl --header "JOB-TOKEN: $CI_JOB_TOKEN" --upload-file "dist_electron/${PACKAGE}" "${PACKAGE_REGISTRY_URL}/${PACKAGE}"' + +auto-release-master: + image: registry.gitlab.com/gitlab-org/release-cli + needs: + - job: build + artifacts: true + - job: upload + artifacts: true + stage: Release + rules: + - if: $CI_COMMIT_TAG + when: never # Do not run this job when a tag is created manually + - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH # Run this job when when commits are pushed to the default branch + script: + - echo "Release $VERSION" + - release-cli create --name "Release $VERSION" --tag-name v$VERSION --description "Release $CI_COMMIT_TITLE" --ref $CI_COMMIT_SHA --assets-link "{\"name\":\"${APPNAME}\",\"url\":\"${PACKAGE_REGISTRY_URL}/${PACKAGE}\"}" diff --git a/README.md b/README.md index 6fb4b27..c13a8ab 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ yarn install ### Compiles and hot-reloads for development ``` -yarn dev +yarn electron:serve ``` ### Compiles and minifies for production @@ -15,7 +15,7 @@ yarn dev yarn electron:build ``` -### Run your unit tests + ### Customize configuration See [Configuration Reference](https://cli.vuejs.org/config/). diff --git a/build/config.gypi b/build/config.gypi deleted file mode 100644 index 6f84ed7..0000000 --- a/build/config.gypi +++ /dev/null @@ -1,79 +0,0 @@ -# Do not edit. File was generated by node-gyp's "configure" step -{ - "target_defaults": { - "cflags": [], - "default_configuration": "Release", - "defines": [], - "include_dirs": [], - "libraries": [] - }, - "variables": { - "asan": 0, - "build_v8_with_gn": "false", - "coverage": "false", - "dcheck_always_on": 0, - "debug_nghttp2": "false", - "debug_node": "false", - "enable_lto": "false", - "enable_pgo_generate": "false", - "enable_pgo_use": "false", - "error_on_warn": "false", - "force_dynamic_crt": 0, - "host_arch": "x64", - "icu_data_in": "../../deps/icu-tmp/icudt67l.dat", - "icu_endianness": "l", - "icu_gyp_path": "tools/icu/icu-generic.gyp", - "icu_path": "deps/icu-small", - "icu_small": "false", - "icu_ver_major": "67", - "is_debug": 0, - "llvm_version": "0.0", - "napi_build_version": "6", - "node_byteorder": "little", - "node_debug_lib": "false", - "node_enable_d8": "false", - "node_install_npm": "true", - "node_module_version": 83, - "node_no_browser_globals": "false", - "node_prefix": "/", - "node_release_urlbase": "https://nodejs.org/download/release/", - "node_shared": "false", - "node_shared_brotli": "false", - "node_shared_cares": "false", - "node_shared_http_parser": "false", - "node_shared_libuv": "false", - "node_shared_nghttp2": "false", - "node_shared_openssl": "false", - "node_shared_zlib": "false", - "node_tag": "", - "node_target_type": "executable", - "node_use_bundled_v8": "true", - "node_use_dtrace": "true", - "node_use_etw": "false", - "node_use_node_code_cache": "true", - "node_use_node_snapshot": "true", - "node_use_openssl": "true", - "node_use_v8_platform": "true", - "node_with_ltcg": "false", - "node_without_node_options": "false", - "openssl_fips": "", - "openssl_is_fips": "false", - "shlib_suffix": "83.dylib", - "target_arch": "x64", - "v8_enable_31bit_smis_on_64bit_arch": 0, - "v8_enable_gdbjit": 0, - "v8_enable_i18n_support": 1, - "v8_enable_inspector": 1, - "v8_enable_pointer_compression": 0, - "v8_no_strict_aliasing": 1, - "v8_optimized_debug": 1, - "v8_promise_internal_field_count": 1, - "v8_random_seed": 0, - "v8_trace_maps": 0, - "v8_use_siphash": 1, - "want_separate_host_toolset": 0, - "xcode_version": "11.0", - "nodedir": "/Users/Enrique/Library/Caches/node-gyp/14.4.0", - "standalone_static_library": 1 - } -} diff --git a/gcloud.json b/gcloud.json deleted file mode 100644 index 5c68549..0000000 --- a/gcloud.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "type": "service_account", - "project_id": "crimata", - "private_key_id": "3a324fa3fcca4cea589e4b5007f4142db4b3a84d", - "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQCxFJOjhIkYlyhn\nHjtpFC5EOwzNFZem6k6SS7zcgWbNLe9mcBsiTKCjpxItzkIo0pnT32yqw+AKsqpv\n6+LVyzzjfB7vtEUflvg6KgmYMS4ixOTCEbN3e2qj1t2RnITXZR2VGSGdoKKyqZm0\ntWrmexQvSN20cByL1vfxD3E69oYFGhVraa0zmm94WXHAzofT6DkvGdrbK1s1G9jI\nG3mdQ1jN71tghyloeHL+R/1iKQoZFYTkVe6yWvccSNAZelt/5sciCKRTCArXj89X\nLwU6jGOKIsyqx3BeUyWaSS59xpnGX3meSf5Q9U+j45ePUiqO6TTleF+kWiBwjUpp\nfeYcwEIDAgMBAAECggEAElkN9R7p75zV6F1XDYu0QYiWyncmx/o2Gu1zC6vywWa1\ni/korpSe/mX0ub9J1p3/p1balRUHlUQu6brYvYs56140fGTC1sOXQ7uQU+8glySs\niTk5TbOBeKluOsSrdP/6oTTB6Wm4AegVz4YOpgPxsvaLVkNZidnDxfvyIQhjGYsO\nsvRaw48eEmGOa1uvDhgvPOxiDp5YEdxqSue/7ylzjBdKecDyLgTSDDf/p+FwIx5B\n2d/0uRgQBaAk6D/DNOvN8GrYyakFmlDjE72nrBGAJq50UyV6THOSDk+8cK+2QiS1\nEDCFufj+7Dk1EBfBFUFY8ZBB/pphpEWyLoFl7NzGCQKBgQDaj/KOOcj6BkkTj1WM\nRW3KhOE3nhsCQEgQGCflpycEAZj6J7ktBG2/4teDt9sr+Epx8ymnQCZa9pmysdrD\nU0aWku1qUx0IUKTtZbAEbB+AnrWYDYkIWU8kRUUvNHNTBg43VyuohV9wprPih138\nHWMeNac82/XICz2A3rv+Xkx8KwKBgQDPaaEEGWVs3nIhf/p3M3/xWNKt8fhAERpG\n0YpTjgHW3FQFYjiCTTIcuLO3qsDGmfIAB9tL37s2Y3e2wKBGUj/o69Fr7sWVPdsX\nJtUc0+KiG2Bs0hsyZPdk9UQiQX8y2eq1NZW7vEoxWso1bM64WURB5N8ocWePNJJx\nL2Oe75rtiQKBgQDLfQQOiRxmNF3rOSMkAywyRr9NQgXRdbniSiszNQotP7OHDF7q\n29m2suOGfjIv4O6m4wdf8WkEfd4hsleETc9Ft6wVtyYrrLGxWWCk7WnzHVDjLY7s\n2AHIOjostf+9R8EKoz1BnFN8laibev71EQNMiBWZow1VX6m2hymurWs2mwKBgQCb\nuY3n2v14qOb92e1+U89KsEq1yMd/qpeU9jwqEaO14wS+aglNY5ItWEuuqWhFdE3q\n0ftHUzpnUnUOZD+xrI1JXsyEgegc7i0xi7lUBI3S8kUKTxGWW5IXXcKDCbPrxQtg\ndFPweSUnOyg4xnHKnVMPOjyGS+bZ8TnF+zOLoBAtKQKBgF6hAOIwF1DheXT4p8xS\nlSGhl8dBxjsJDVwbnFWQceGzGnq1e3ncy/UItt42UCDVRWTH4r7pQ9eKyd/3foUD\n6KDIcCrYo2KJh6ZNFJ67XF30U+TuEg5U/9jTbWqDOwYVXcMcnzQE4ZiGBxVHL6xr\nNc8FRW5+7xh4zNfzhGUGt5kt\n-----END PRIVATE KEY-----\n", - "client_email": "crimata-service-account@crimata.iam.gserviceaccount.com", - "client_id": "102914612880037864172", - "auth_uri": "https://accounts.google.com/o/oauth2/auth", - "token_uri": "https://oauth2.googleapis.com/token", - "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs", - "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/crimata-service-account%40crimata.iam.gserviceaccount.com" -} diff --git a/login.svg b/login.svg deleted file mode 100644 index a2ccbf3..0000000 --- a/login.svg +++ /dev/null @@ -1,45 +0,0 @@ - - - - - - - - - - - - - - Email - Password - - Login - - Submit - Create account - - \ No newline at end of file diff --git a/package.json b/package.json index 5bb4571..24d13b1 100644 --- a/package.json +++ b/package.json @@ -1,24 +1,18 @@ { "name": "Crimata", - "productName": "crimata-messenger", - "description": "Cross-platform messenger application built with electron, vue3, and TS.", - "version": "0.1.0", + "version": "0.9.9", "private": true, + "description": "Cross-platform messenger application built with electron, vue3, and TS.", "author": { "name": "Enrique Hernandez" }, "scripts": { - "dev": "yarn electron:serve", - "serve": "vue-cli-service serve", - "build": "vue-cli-service build", - "test:unit": "vue-cli-service test:unit", - "lint": "vue-cli-service lint", - "electron:build": "vue-cli-service electron:build", - "electron:serve": "vue-cli-service electron:serve", + "build": "vue-cli-service electron:build", + "dev": "vue-cli-service electron:serve", "postinstall": "electron-builder install-app-deps", - "postuninstal": "electron-builder install-app-deps" + "postuninstall": "electron-builder install-app-deps" }, - "main": "background.js", + "main": "init.js", "dependencies": { "@google-cloud/speech": "^4.2.0", "@types/animejs": "^3.1.2", @@ -28,10 +22,15 @@ "@types/uuid": "^8.3.0", "@types/ws": "^7.2.7", "animejs": "^3.2.0", + "axios": "^0.21.1", "core-js": "^3.6.5", + "electron-is-dev": "^2.0.0", + "electron-store": "^8.0.0", + "electron-updater": "^4.3.8", "mitt": "^2.1.0", "naudiodon": "^2.3.2", "node-record-lpcm16": "^1.0.1", + "update-electron-app": "^2.0.1", "uuid": "^8.3.2", "vue": "^3.0.0-0", "vue-router": "^4.0.0-0", @@ -39,6 +38,8 @@ "ws": "^7.3.1" }, "devDependencies": { + "@types/axios": "^0.14.0", + "@types/electron-devtools-installer": "^2.2.0", "@types/jest": "^24.0.19", "@typescript-eslint/eslint-plugin": "^2.33.0", "@typescript-eslint/parser": "^2.33.0", @@ -55,17 +56,36 @@ "@wasm-tool/wasm-pack-plugin": "^1.3.1", "electron": "^9.0.0", "electron-devtools-installer": "^3.1.0", + "electron-log": "^4.3.4", "eslint": "^6.7.2", "eslint-plugin-vue": "^7.0.0-0", "lint-staged": "^9.5.0", "node-sass": "^4.12.0", "optimize-wasm-webpack-plugin": "^1.0.12", "sass-loader": "^8.0.2", - "spectron": "^11.0.0", + "spectron": "11.0.0", "typescript": "~3.9.3", - "vue-cli-plugin-electron-builder": "~2.0.0-rc.4", + "vue-cli-plugin-electron-builder": "~2.0.0-rc.6", "vue-jest": "^5.0.0-0" }, + "vue": { + "lintOnSave": false, + "pluginOptions": { + "electronBuilder": { + "mainProcessFile": "./src/init.ts", + "rendererProcessFile": "./src/render/main.ts", + "preload": "./src/render/preload.ts", + "builderOptions": { + "appId": "com.crimata.ElectronUpdaterApp", + "artifactName": "${productName}-${version}.${ext}", + "publish": { + "provider": "generic", + "url": "https://gitlab.com/api/v4/projects/25637892/jobs/artifacts/main/raw/dist_electron?job=build" + } + } + } + } + }, "gitHooks": { "pre-commit": "lint-staged" }, @@ -74,5 +94,11 @@ "vue-cli-service lint", "git add" ] + }, + "productName": "crimata-messenger", + "repository": { + "type": "git", + "url": "https://gitlab.com/crimata/electron-app.git", + "release": "latest" } } diff --git a/public/index.html b/public/index.html index 48809d8..8f79d27 100644 --- a/public/index.html +++ b/public/index.html @@ -11,11 +11,7 @@ - -
+
diff --git a/src/App.vue b/src/App.vue deleted file mode 100644 index c60eb6c..0000000 --- a/src/App.vue +++ /dev/null @@ -1,144 +0,0 @@ - - - - - diff --git a/src/account.ts b/src/account.ts new file mode 100644 index 0000000..581da0e --- /dev/null +++ b/src/account.ts @@ -0,0 +1,95 @@ + +import { postAuth, postLogin, postLogout } from "@/api/account"; +import { endSession, launchSession } from "@/session"; +import { getToken, setToken, setProfile, getProfile, clearStore } from "./store"; +import { parseAuthRes } from "./auth"; +import { ipcEmit } from "@/composables/useEmitter"; + +export const accountAuth = async (): Promise => { + + /* attempt to get a login token from the store */ + const token = getToken(); + + /* try to login with it, returns platform secret and new token on success */ + if (token) { + try { + + const res = await postAuth(token); + + const parsed = parseAuthRes(res); + + setToken(parsed.token) + setProfile(parsed.profile); + + return { + profile: parsed.profile, + token: parsed.token + }; + + } catch(e) { + console.log('[ACCOUNT]', e); + clearStore(); + throw(new Error('Failed to authenticate.')); + + } + } else { + throw(new Error('Unable to authenticate.')); + } +}; + +export const accountLogin: IpcHandlerCallback = async (payload) => { + const account = payload as AccountCredentials; + try { + + // attempt login with email password + const res = await postLogin(account.email, account.password); + const parsed = parseAuthRes(res); + + // save jwt token and profile + setToken(parsed.token); + setProfile(parsed.profile); + + // launch session + launchSession(parsed.token); + + // return profile to renderer + return parsed.profile; + + } catch(e) { + clearStore(); + throw e; + } +} + + +export const accountLogout = async (): Promise => { + + try { + // post logout to backend + await postLogout(); + + // remove key and crimataId + clearStore(); + + // kill crimata platform session + endSession(); + + return; + + } catch(e) { + console.log('[ACCOUNT]', e); + return (new Error('Failed to logout. Please try again.')); + } + +} + +export const updateAppState = (): void => { + + const profile = getProfile(); + + ipcEmit("set-profile", profile); + + // ipcEmit('messages') etc + +} + diff --git a/src/api/account.ts b/src/api/account.ts new file mode 100644 index 0000000..45baca2 --- /dev/null +++ b/src/api/account.ts @@ -0,0 +1,31 @@ + +import useHttp from "@/composables/useHttp"; +import axios from "axios"; +import {config} from "@/config"; + +const { post } = useHttp(); + +export const postAuth = async (token: string) => ( + await axios({ + url: config.BUSINESS_URL + config.BUSINESS_PREFIX + '/account/authenticate', + headers: { + Cookie: `crimataCookie=${token}` + }, + method: 'POST', + }) +); + + +export const postLogin = async (email: string, password: string) => ( + await post('/account/login', { email, password }) +); + + +export const postLogout = + async (): Promise => (await post('/account/logout')); + + + + + + diff --git a/src/assets/crimata.svg b/src/assets/crimata.svg deleted file mode 100644 index 8bb28dc..0000000 --- a/src/assets/crimata.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/src/audio.ts b/src/audio.ts new file mode 100644 index 0000000..7ae2562 --- /dev/null +++ b/src/audio.ts @@ -0,0 +1,187 @@ +/* eslint @typescript-eslint/no-var-requires: "off" */ + +"use strict"; + +// where the audio goes +let buffer: ArrayBuffer[] = []; + +// place audio data in buffer +export const collect: IpcListenerCallback = (chunk) => { + if (chunk) buffer.push(chunk); +} + +// return audio and clear buffer +export const flush = async () => { + const bufferCopy = buffer; + buffer = []; + return bufferCopy; +} + +// import { backgroundMitt } from '@/modules/emitter'; +// const portAudio = require('naudiodon'); + +// // Audio in and out stream objects. +// let ai: typeof portAudio.AudioIO | boolean = false; +// let ao: typeof portAudio.AudioIO | boolean = false; + +// // Whether activly recording. +// let record = false; + +// const audioContainer = { +// input: '', +// } + +// const audioOptions = { +// channelCount: 1, +// sampleFormat: 16, +// sampleRate: 16000, +// deviceId: -1, +// closeOnError: false, +// } + +// export const toggleRecord = (): void => { record = !record }; + + +// export const fetchAudioInput = (): Promise => ( + +// new Promise((resolve, reject) => { + +// try { +// resolve(audioContainer.input); +// toggleRecord(); +// } catch (e) { +// reject(new Error('Failed to fetch the audio.')) +// } + +// }) +// ) + + +// // Main audio function run by run.ts module. +// export function initAudioIO(): void { +// console.log("AUDIO:Starting io streams.") + +// if (!ai) { + +// // Initialize and start input stream. +// ai = new portAudio.AudioIO({ inOptions: audioOptions }); +// ai.setEncoding("hex"); +// ai.start(); + +// // On each data chunk... +// ai.on('data', (chunk: string) => { + +// // If recording, we capture the data. +// if (record) { +// console.log('AUDIO:Recording...') +// audioContainer.input += chunk; +// } + +// // Else, we don't capture and also clear audioContainer. +// else { +// if (audioContainer.input.length) { +// audioContainer.input = ""; +// } +// } + +// }); +// } + +// if (!ao) { + +// // Initialize and start input stream. +// ao = new portAudio.AudioIO({ outOptions: audioOptions }); +// ao.start(); + +// } +// } + + +// // ---Audio playback-------------------------------------------- + +// // Split Buffer into an array of len-sized Buffers. +// function bufSplit(buf: Buffer, len: number): Array { +// const chunks = []; +// let i = 0; +// let L = len; + +// while(i < buf.byteLength) { +// chunks.push(buf.slice(i, L)); +// i = L; +// L += len; +// } + +// return chunks; +// } + +// // Audio playback. +// export function play(input: string): void { + +// // Format the audio. +// const audio = bufSplit( +// Buffer.from(input as string, 'hex'), +// 8192 +// ); + +// // Called on end of write. +// const callback = () => { + +// // We stop audio playback anim. +// backgroundMitt.emit('ipc-renderer', { +// endpoint: 'stop-playback-anim' +// }); + +// } + +// write(); + +// // Iterate through audio array and write buffers to portAudio writable. +// function write() { +// let chunk: Buffer; +// let ok = true; +// let i = 0; + +// do { +// chunk = audio[i]; +// if (i === audio.length - 1) { +// // write last chunk. +// ao.write(chunk, null, callback); +// } else { +// // check for backpreassure. +// ok = ao.write(chunk, null); +// } +// i++; +// } while (i < audio.length && ok); + +// if (i < audio.length) { +// // Had to stop early! +// // Write some more once it drains. +// ao.once('drain', write); +// } +// } +// } + +// // ------------------------------------------------------------- + +// // Get's called on window close. +// export async function stopStream() { +// console.log("AUDIO:Stopping audio stream.") +// if (ai) { +// try { +// await ai.quit() +// } catch(e){ +// console.log('AUDIO: Failed to shutdown audio input.'); +// throw e; +// } +// } +// if (ao) { +// try { +// await ao.quit() +// } catch(e){ +// console.log('AUDIO: Failed to shutdown audio output.'); +// throw e; +// } +// } +// } + + diff --git a/src/auth.ts b/src/auth.ts new file mode 100644 index 0000000..14ed36a --- /dev/null +++ b/src/auth.ts @@ -0,0 +1,13 @@ + +export const parseAuthRes = (authRes: any) => { + const token = authRes.headers['set-cookie'][0].split(";")[0].split("=")[1] as string; + const profile = authRes.data as Profile; + return { + token, + profile + } +}; + + + + diff --git a/src/background.ts b/src/background.ts deleted file mode 100644 index 065b4ec..0000000 --- a/src/background.ts +++ /dev/null @@ -1,25 +0,0 @@ -/* - * Entry point for Crimata electron app. - * "Look on my Works, ye Mighty, and despair!" - */ - -"use strict"; - -import { protocol } from "electron"; -import { initApp } from './background/init'; - -// Scheme must be registered before the app is ready -protocol.registerSchemesAsPrivileged([ - { scheme: "app", privileges: { secure: true, standard: true } } -]); - -// Load environment variable -const isDevelopment = process.env.NODE_ENV !== "production"; - -// NOTE Program Begins Here -(async () => { - - console.log('Starting Crimata electron app.'); - initApp(isDevelopment); - -})(); diff --git a/src/background/audio.ts b/src/background/audio.ts deleted file mode 100644 index 5b0ef12..0000000 --- a/src/background/audio.ts +++ /dev/null @@ -1,135 +0,0 @@ -/* eslint @typescript-eslint/no-var-requires: "off" */ - -"use strict"; - -import { sendAudio } from './session' -import { ipcMain } from "electron"; -import { backgroundMitt } from './emitter'; - -const portAudio = require('naudiodon'); - -let ai: typeof portAudio.AudioIO | null = null; -let ao: typeof portAudio.AudioIO | null = null; -let record = false; -const audioContainer = { - input: '', -} -const encoding = "hex"; -const audioOptions = { - channelCount: 1, - sampleFormat: 16, - sampleRate: 16000, - deviceId: -1, - closeOnError: false, -} - -// callback run on space bar key up and down. -const updateRecorder = (_event, payload: { - isRecording: boolean; - uid: string | null; -}): void => { - record = payload.isRecording; - if (!record) { - if (payload.uid) sendAudio(audioContainer.input, payload.uid); - } -}; - -// listen for space key up/down event. -ipcMain.removeAllListeners('update-recorder'); -ipcMain.on('update-recorder', updateRecorder); - -// Split Buffer into an array of len-sized Buffers. -function bufSplit(buf: Buffer, len: number): Array { - const chunks = []; - let i = 0; - let L = len; - - while(i < buf.byteLength) { - chunks.push(buf.slice(i, L)); - i = L; - L += len; - } - - return chunks; -} - -// main audio function run by run.ts module. -export function initAudioIO(): void { - - if (!ai) { - ai = new portAudio.AudioIO({ inOptions: audioOptions }); - - // base64 encoding needed for google speech to text. - ai.setEncoding(encoding); - ai.start(); - - ai.on('data', (chunk: string) => { - if (record) { - console.log('recording...') - audioContainer.input += chunk; - } else { - if (audioContainer.input.length) audioContainer.input = ""; - } - }); - } - - if (!ao) { - ao = new portAudio.AudioIO({ outOptions: audioOptions }); - ao.start(); - } -} - -// play audio buffers. -export function play(input: Buffer): void { - let i = 0; - - const audio = bufSplit(input, 8192); - - // Called on end of write. - const callback = () => { - - // We stop audio playback anim. - backgroundMitt.emit('ipc-renderer', { - endpoint: 'stop-playback-anim' - }); - - } - - write(); - - // Iterate through audio array and write buffers to portAudio writable. - function write() { - let chunk: Buffer; - let ok = true; - - do { - chunk = audio[i]; - if (i === audio.length - 1) { - // write last chunk. - ao.write(chunk, null, callback); - } else { - // check for backpreassure. - ok = ao.write(chunk, null); - } - i++; - } while (i < audio.length && ok); - - if (i < audio.length) { - // Had to stop early! - // Write some more once it drains. - ao.once('drain', write); - } - } -} - -export function stopStream() { - if(ai != null) { - ai.quit(); - ai = null; - } - if (ao != null) { - ao.quit(); - ao = null; - } -} - diff --git a/src/background/emitter.ts b/src/background/emitter.ts deleted file mode 100644 index 14aa77f..0000000 --- a/src/background/emitter.ts +++ /dev/null @@ -1,6 +0,0 @@ -/* eslint-disable */ -const EventEmitter = require('events'); - -class BackgroundMitt extends EventEmitter { } - -export const backgroundMitt = new BackgroundMitt(); diff --git a/src/background/init.ts b/src/background/init.ts deleted file mode 100644 index cb90050..0000000 --- a/src/background/init.ts +++ /dev/null @@ -1,50 +0,0 @@ - -"use strict"; - -import { app } from "electron"; -import { main } from './run'; -import { backgroundMitt } from './emitter'; -import { stopStream } from './audio'; - -let winActive: boolean; - -backgroundMitt.on('window-active', (state: boolean) => { - winActive = state; -}); - -export function initApp(dev: boolean): void { - - app.on("ready", () => { - main(); - }); - - // Quit when all windows are closed. - app.on("window-all-closed", () => { - if (process.platform !== "darwin") { - stopStream(); - app.quit(); - } - }); - - app.on("activate", () => { - if (winActive === false) { - main(); - } - }); - - // Exit cleanly on request from parent process in development mode. - if (dev) { - if (process.platform === "win32") { - process.on("message", data => { - if (data === "graceful-exit") { - app.quit(); - } - }); - } else { - process.on("SIGTERM", () => { - app.quit(); - }); - } - } -} - diff --git a/src/background/run.ts b/src/background/run.ts deleted file mode 100644 index a007ad5..0000000 --- a/src/background/run.ts +++ /dev/null @@ -1,24 +0,0 @@ -"use strict"; - -import { createWindow } from './window'; -import { initSession } from './session'; -import { initAudioIO } from './audio'; - -let socket = false; - -/* - * The main function will be run after electron app is ready. - */ -export async function main() { - - // create main window. - await createWindow(); - - // Instantiate socket session with crimata-platorm. - if (!socket) initSession(); - socket = true; - - // Begin audio stream. - initAudioIO(); - -} diff --git a/src/background/session.ts b/src/background/session.ts deleted file mode 100644 index 49ddb13..0000000 --- a/src/background/session.ts +++ /dev/null @@ -1,198 +0,0 @@ -"use strict"; - -import WebSocket from 'ws'; -import { backgroundMitt } from './emitter'; -import { ipcMain } from "electron"; -import { play } from './audio'; - -import { - Creds, - Profile, - Annotation, - StandardMessage, - ClientMessage -} from "@/types/message/index"; - -import { clientMessage, renderMessage } from '@/modules/message'; - -const ip = 'ws://127.0.0.1'; -const port = 8760; -const reconnectTimeout = 3000; //ms -let socket: WebSocket; -let success = false; -let auth = false; - -const onAuthSession = async (e: any, payload: string | Creds) => { - - return new Promise((resolve, reject) => { - - console.log('Authenticating...'); - - // Handle auth response from server. - backgroundMitt.once('auth-res', (res: string) => { - - if (res == "locked") { - reject(res); - } else { - console.log('Success!'); - auth = true; - resolve(res); - } - - }); - - if (typeof payload !== "string") { - payload = JSON.stringify(payload) - } - - // Send token to backend - socket.send(payload); - - }); -}; - - -//---Message Handlers----------------------------------------------- - -const handleAuthMessage = (message: string) => { - backgroundMitt.emit('auth-res', message); -} - -const handleProfileMessage = (message: Profile) => { - backgroundMitt.emit('ipc-renderer', { - endpoint: 'update-profile', - message: message - }); -} - -const handleStandardMessage = (m: StandardMessage) => { - - // Create a render message object. - const message = renderMessage( - m.content.text, m.content.audio, m.context, m.modifier); - - // Play audio if any. - if (message.content.audio) { - const audioBytes = Buffer.from(m.content.audio as string, 'hex'); - m.content.audio = true; - play(audioBytes); - } - - backgroundMitt.emit('ipc-renderer', { - endpoint: 'render-message', - message: message - }); -} - -const handleAnnotationMessage = (message: Annotation) => { - backgroundMitt.emit('ipc-renderer', { - endpoint: 'render-message', - message: message - }); -} - -//------------------------------------------------------------------ - -const onMessage = (messageStr: string): void => { - - // Auth messages are strings. - if (!auth) { - handleAuthMessage(messageStr) - return - } - - const message = JSON.parse(messageStr) - console.log("New message:") - console.log(message) - - if (message.content) { - handleStandardMessage(message) - } - - else if (message.first) { - handleProfileMessage(message) - } - - else { - handleAnnotationMessage(message) - } - -}; - -const onClientMessage = (e: any, payload: ClientMessage): void => { - console.log('sending message'); - socket.send(JSON.stringify(payload)); -} - -const restart = () => { - auth = false; - initSession(); -} - -// Run every time we want to connect to backend. -export function initSession(): void { - - // Close existing sockets. - if (socket) { - socket.removeAllListeners(); - socket.terminate(); - socket.close(); - success = false; - } - - // Init new socket. - socket = new WebSocket(`${ip}:${port}`); - socket.binaryType = 'arraybuffer'; - - // handle renderer auth-token event - ipcMain.removeHandler('auth-session'); // avoid setting duplicate handlers - ipcMain.handle('auth-session', onAuthSession); - - // handle user message event - ipcMain.removeAllListeners('client-message'); - ipcMain.on('client-message', onClientMessage); - - // handle renderer logout event - ipcMain.removeAllListeners('logout'); - ipcMain.on('logout', (_event, _payload: string) => restart()); - - // Connect to the backend. - socket.on('open', () => { - console.log('Connected to Crimata Servers.'); - - // Try to authenticate token right away. - backgroundMitt.emit('ipc-renderer', { - endpoint: 'auth', - message: null - }); - - success = true; - - }); - - // Handle for failed connect, try again. - socket.on('error', (_e) => { - console.log('ERROR: Failed to connect.'); - socket.removeAllListeners(); - socket.close(); - setTimeout(() => { - if (!success) { - console.log('Reconnecting...'); - initSession(); - } - }, reconnectTimeout); - - }); - - socket.on('close', () => { - console.log('Connection droped! Restarting...'); - restart(); - }); - - socket.on("message", onMessage); -} - -export function sendAudio(audio: string, uid: string): void { - const m = clientMessage("", audio, uid); - socket.send(JSON.stringify(m)); -} \ No newline at end of file diff --git a/src/components/inputItem/controllers/audioCtrl.ts b/src/components/inputItem/controllers/audioCtrl.ts deleted file mode 100644 index 9b2df9f..0000000 --- a/src/components/inputItem/controllers/audioCtrl.ts +++ /dev/null @@ -1,105 +0,0 @@ -import anime from "animejs"; -import { onMounted, onUnmounted, ref, Ref } from "vue"; -import useMitt from "@/modules/mitt"; -import { useIpc } from '@/modules/ipc'; -import keyboardNameMap from "../keyBoardMaps/keyboardNameMap"; -import { renderMessage } from '@/modules/message'; - - -function showRecIcon () { - - anime({ - targets: '#recIcon', - opacity: [0, 0.75], - scale: [0.0, 1], - duration: 250, - easing: 'linear', - }) - -} - -function hideRecIcon () { - - anime({ - targets: '#recIcon', - opacity: [0.75, 0], - scale: [1, 0], - duration: 250, - easing: 'linear', - }) - -} - - -export default function useAudioInputController (typing: Ref) { - - // For sending messages. - const { post } = useIpc(); - const { emitter } = useMitt(); - - // Keepp track of when we are recording. - const recording = ref(false); - - //---Callbacks----------------------------------------------- - - const onKeyDown = (e: KeyboardEvent) => { - const cmd = keyboardNameMap[e.keyCode]; - // console.log(cmd) - - // Start recording on space bar. - if (cmd == "SPACE" && !recording.value && !typing.value) { - - post('update-recorder', { - isRecording: true, - uid: null - }); - - showRecIcon() - recording.value = true; - console.log("Recording...") - - } - - } - - const onKeyUp = (e: KeyboardEvent) => { - const cmd = keyboardNameMap[e.keyCode]; - - // Stop recording on space up. - if (cmd == "SPACE" && recording.value) { - - // Render audio immediately. - const message = renderMessage("", "", "", "sf") - emitter.emit("self-message", message); - - post('update-recorder', { - isRecording: false, - uid: message.uid - }); - - hideRecIcon() - recording.value = false; - console.log("Stopping record...") - - } - - } - - //----------------------------------------------------------- - - onMounted(() => { - window.addEventListener("keydown", onKeyDown); - window.addEventListener("keyup", onKeyUp); - }) - - onUnmounted(() => { - window.removeEventListener("keydown", onKeyDown); - window.removeEventListener("keyup", onKeyUp); - }); - - - return { - recording - } - -} diff --git a/src/components/inputItem/controllers/textCtrl.ts b/src/components/inputItem/controllers/textCtrl.ts deleted file mode 100644 index 6a3c22d..0000000 --- a/src/components/inputItem/controllers/textCtrl.ts +++ /dev/null @@ -1,174 +0,0 @@ -import anime from "animejs"; -import useMitt from "@/modules/mitt"; -import { useIpc } from '@/modules/ipc'; -import { Ref, ref, watch, onMounted, onUnmounted } from "vue"; -import keyboardNameMap from "../keyBoardMaps/keyboardNameMap"; -import { clientMessage, renderMessage } from '@/modules/message'; - -//---Animations----------------------------------------------- - -let side = "right"; // Side of parent we are on. - -function showTextInput () { - const t1 = (side === "right") ? 50 : -70; - const t2 = (side === "right") ? 110 : -130; - - anime({ - targets: '#textInput', - opacity: [0, 1], - translateX: [t1, t2], - scale: [0.3, 1], - duration: 500, - easing: 'easeOutExpo', - }) - -} - -function hideTextInput() { - const t = (side === "right") ? 50 : -80; - - anime({ - targets: '#textInput', - opacity: [1, 0], - translateX: t, - scale: 0.3, - duration: 500, - easing: 'easeOutExpo', - }) - -} - -function switchSide(currentSide: string) { - const t = (currentSide === "right") ? -130 : 110; - - anime({ - targets: '#textInput', - translateX: t, - duration: 500, - easing: 'easeOutExpo', - }) - -} - -//------------------------------------------------------------ - - -export default function useTextInputController(elementX: Ref) { - let textInput: HTMLInputElement | null; - - const { post } = useIpc(); - const { emitter } = useMitt(); - - let firstKey = true; - const typing = ref(false); - - // Prep inputItem for typing. - const prepInput = () => { - showTextInput() - typing.value = true - } - - // Clear and hide inputItem after done typing. - const clearInput = () => { - - if (textInput) { - textInput.value = ""; - textInput.blur(); - } - - hideTextInput() - firstKey = true; - typing.value = false; - } - - // Send a message and clean up after. - const sendMessage = () => { - if (textInput) { - - // Render message - const message = renderMessage(textInput.value, false, "", "sf") - emitter.emit("self-message", message); - - // Send it to the backend for processing. - const clientM = clientMessage(textInput.value, false, message.uid); - post('client-message', clientM); - - clearInput() - } - } - - //---Callbacks----------------------------------------------- - - const onKeyDown = (e: KeyboardEvent) => { - const key = keyboardNameMap[e.keyCode] - - if (textInput) { - - // First-key handler. - if (firstKey) { - if (key == "SPACE") return - prepInput() - } - - textInput.focus(); - - // Close input when no text or on ESC. - if (textInput.value == "" && !firstKey) { - clearInput() - return - } - - if (key === "ESCAPE") { - clearInput() - return - } - - // Close and send on enter. - if (key === "ENTER") { - if (textInput.value) { - sendMessage() - return - } - } - - if (firstKey) firstKey = false - } - } - - //----------------------------------------------------------- - - // Watch parent position and update side. - watch(elementX, (elementX, previous) => { - const winW = window.innerWidth - - // Logic depends on the side we are on. - if (side === "right") { - if (winW - elementX < 230) { - switchSide(side) - side = "left" - } - } - - else { - if (winW - elementX > 230) { - switchSide(side) - side = "right" - } - } - - }); - - onMounted(() => { - textInput = document.getElementById("textInput") as HTMLInputElement; - window.addEventListener("keydown", onKeyDown); - }) - - onUnmounted(() => { - window.removeEventListener("keydown", onKeyDown); - }); - - return { - typing - } - -} diff --git a/src/components/inputItem/keyBoardMaps/keyboardCharMap.ts b/src/components/inputItem/keyBoardMaps/keyboardCharMap.ts deleted file mode 100644 index 102e9c3..0000000 --- a/src/components/inputItem/keyBoardMaps/keyboardCharMap.ts +++ /dev/null @@ -1,263 +0,0 @@ -// This has the UnShifted and Shifted characters that each key maps to -// Ones that are to be ignored for character input are empty. -const keyboardCharMap = [ - ["", ""], // [0] - ["", ""], // [1] - ["", ""], // [2] - ["", ""], // [3] - ["", ""], // [4] - ["", ""], // [5] - ["", ""], // [6] - ["", ""], // [7] - ["", ""], // [8] - ["", ""], // [9] - ["", ""], // [10] - ["", ""], // [11] - ["", ""], // [12] - ["\r", "\r"], // [13] - MOST control characters are ignored. This one (Carriage Return, or "Enter") is significant! - ["", ""], // [14] - ["", ""], // [15] - ["", ""], // [16] - ["", ""], // [17] - ["", ""], // [18] - ["", ""], // [19] - ["", ""], // [20] - ["", ""], // [21] - ["", ""], // [22] - ["", ""], // [23] - ["", ""], // [24] - ["", ""], // [25] - ["", ""], // [26] - ["", ""], // [27] - ["", ""], // [28] - ["", ""], // [29] - ["", ""], // [30] - ["", ""], // [31] - [" ", " "], // [32] // SPACE! Don't "clean it up" and remove the space! - ["", ""], // [33] - ["", ""], // [34] - ["", ""], // [35] - ["", ""], // [36] - ["", ""], // [37] - ["", ""], // [38] - ["", ""], // [39] - ["", ""], // [40] - ["", ""], // [41] - ["", ""], // [42] - ["", ""], // [43] - ["", ""], // [44] - ["", ""], // [45] - ["", ""], // [46] - ["", ""], // [47] - ["0", ")"], // [48] - ["1", "!"], // [49] - ["2", "@"], // [50] - ["3", "#"], // [51] - ["4", "$"], // [52] - ["5", "%"], // [53] - ["6", "^"], // [54] - ["7", "&"], // [55] - ["8", "*"], // [56] - ["9", "("], // [57] - ["", ""], // [58] - [";", ":"], // [59] - ["<", ""], // [60] - ["=", ""], // [61] - [">", ""], // [62] - ["?", ""], // [63] shifted; else "/" - ["", ""], // [64] - ["a", "A"], // [65] - ["b", "B"], // [66] - ["c", "C"], // [67] - ["d", "D"], // [68] - ["e", "E"], // [69] - ["f", "F"], // [70] - ["g", "G"], // [71] - ["h", "H"], // [72] - ["i", "I"], // [73] - ["j", "J"], // [74] - ["k", "K"], // [75] - ["l", "L"], // [76] - ["m", "M"], // [77] - ["n", "N"], // [78] - ["o", "O"], // [79] - ["p", "P"], // [80] - ["q", "Q"], // [81] - ["r", "R"], // [82] - ["s", "S"], // [83] - ["t", "T"], // [84] - ["u", "U"], // [85] - ["v", "V"], // [86] - ["w", "W"], // [87] - ["x", "X"], // [88] - ["y", "Y"], // [89] - ["z", "Z"], // [90] - ["", ""], // [91] Windows Key (Windows) or Command Key (Mac) - ["", ""], // [92] - ["", ""], // [93] - ["", ""], // [94] - ["", ""], // [95] - // Number Keypad Entries... - ["0", ""], // [96] - ["1", ""], // [97] - ["2", ""], // [98] - ["3", ""], // [99] - ["4", ""], // [100] - ["5", ""], // [101] - ["6", ""], // [102] - ["7", ""], // [103] - ["8", ""], // [104] - ["9", ""], // [105] - ["*", ""], // [106] - ["+", ""], // [107] - ["", ""], // [108] - ["-", ""], // [109] - [".", ""], // [110] - ["/", ""], // [111] - - ["", ""], // [112] - ["", ""], // [113] - ["", ""], // [114] - ["", ""], // [115] - ["", ""], // [116] - ["", ""], // [117] - ["", ""], // [118] - ["", ""], // [119] - ["", ""], // [120] - ["", ""], // [121] - ["", ""], // [122] - ["", ""], // [123] - ["", ""], // [124] - ["", ""], // [125] - ["", ""], // [126] - ["", ""], // [127] - ["", ""], // [128] - ["", ""], // [129] - ["", ""], // [130] - ["", ""], // [131] - ["", ""], // [132] - ["", ""], // [133] - ["", ""], // [134] - ["", ""], // [135] - ["", ""], // [136] - ["", ""], // [137] - ["", ""], // [138] - ["", ""], // [139] - ["", ""], // [140] - ["", ""], // [141] - ["", ""], // [142] - ["", ""], // [143] - ["", ""], // [144] - ["", ""], // [145] - ["", ""], // [146] - ["", ""], // [147] - ["", ""], // [148] - ["", ""], // [149] - ["", ""], // [150] - ["", ""], // [151] - ["", ""], // [152] - ["", ""], // [153] - ["", ""], // [154] - ["", ""], // [155] - ["", ""], // [156] - ["", ""], // [157] - ["", ""], // [158] - ["", ""], // [159] - ["", ""], // [160] - ["", ""], // [161] - ["", ""], // [162] - ["", ""], // [163] - ["", ""], // [164] - ["", ""], // [165] - ["", ""], // [166] - ["", ""], // [167] - ["", ""], // [168] - ["", ""], // [169] - ["", ""], // [170] - ["", ""], // [171] - ["", ""], // [172] - ["", ""], // [173] - ["", ""], // [174] - ["", ""], // [175] - ["", ""], // [176] - ["", ""], // [177] - ["", ""], // [178] - ["", ""], // [179] - ["", ""], // [180] - ["", ""], // [181] - ["", ""], // [182] - ["", ""], // [183] - ["", ""], // [184] - ["", ""], // [185] - [";", ":"], // [186] - ["=", "+"], // [187] - [",", "<"], // [188] - ["-", "_"], // [189] - [".", ">"], // [190] - ["/", "?"], // [191] - ["`", "~"], // [192] - ["", ""], // [193] - ["", ""], // [194] - ["", ""], // [195] - ["", ""], // [196] - ["", ""], // [197] - ["", ""], // [198] - ["", ""], // [199] - ["", ""], // [200] - ["", ""], // [201] - ["", ""], // [202] - ["", ""], // [203] - ["", ""], // [204] - ["", ""], // [205] - ["", ""], // [206] - ["", ""], // [207] - ["", ""], // [208] - ["", ""], // [209] - ["", ""], // [210] - ["", ""], // [211] - ["", ""], // [212] - ["", ""], // [213] - ["", ""], // [214] - ["", ""], // [215] - ["", ""], // [216] - ["", ""], // [217] - ["", ""], // [218] - ["[", "{"], // [219] - ["\\", "|"], // [220] - ["]", "}"], // [221] - ["'", '"'], // [222] - ["", ""], // [223] - ["", ""], // [224] - ["", ""], // [225] - ["", ""], // [226] - ["", ""], // [227] - ["", ""], // [228] - ["", ""], // [229] - ["", ""], // [230] - ["", ""], // [231] - ["", ""], // [232] - ["", ""], // [233] - ["", ""], // [234] - ["", ""], // [235] - ["", ""], // [236] - ["", ""], // [237] - ["", ""], // [238] - ["", ""], // [239] - ["", ""], // [240] - ["", ""], // [241] - ["", ""], // [242] - ["", ""], // [243] - ["", ""], // [244] - ["", ""], // [245] - ["", ""], // [246] - ["", ""], // [247] - ["", ""], // [248] - ["", ""], // [249] - ["", ""], // [250] - ["", ""], // [251] - ["", ""], // [252] - ["", ""], // [253] - ["", ""], // [254] - ["", ""] // [255] -]; -export default keyboardCharMap; diff --git a/src/components/inputItem/keyBoardMaps/keyboardNameMap.ts b/src/components/inputItem/keyBoardMaps/keyboardNameMap.ts deleted file mode 100644 index 8f385ae..0000000 --- a/src/components/inputItem/keyBoardMaps/keyboardNameMap.ts +++ /dev/null @@ -1,261 +0,0 @@ -// names of known key codes (0-255) -const keyboardNameMap = [ - "", // [0] - "", // [1] - "", // [2] - "CANCEL", // [3] - "", // [4] - "", // [5] - "HELP", // [6] - "", // [7] - "BACK_SPACE", // [8] - "TAB", // [9] - "", // [10] - "", // [11] - "CLEAR", // [12] - "ENTER", // [13] - "ENTER_SPECIAL", // [14] - "", // [15] - "SHIFT", // [16] - "CONTROL", // [17] - "ALT", // [18] - "PAUSE", // [19] - "CAPS_LOCK", // [20] - "KANA", // [21] - "EISU", // [22] - "JUNJA", // [23] - "FINAL", // [24] - "HANJA", // [25] - "", // [26] - "ESCAPE", // [27] - "CONVERT", // [28] - "NONCONVERT", // [29] - "ACCEPT", // [30] - "MODECHANGE", // [31] - "SPACE", // [32] - "PAGE_UP", // [33] - "PAGE_DOWN", // [34] - "END", // [35] - "HOME", // [36] - "LEFT", // [37] - "UP", // [38] - "RIGHT", // [39] - "DOWN", // [40] - "SELECT", // [41] - "PRINT", // [42] - "EXECUTE", // [43] - "PRINTSCREEN", // [44] - "INSERT", // [45] - "DELETE", // [46] - "", // [47] - "0", // [48] - "1", // [49] - "2", // [50] - "3", // [51] - "4", // [52] - "5", // [53] - "6", // [54] - "7", // [55] - "8", // [56] - "9", // [57] - "COLON", // [58] - "SEMICOLON", // [59] - "LESS_THAN", // [60] - "EQUALS", // [61] - "GREATER_THAN", // [62] - "QUESTION_MARK", // [63] - "AT", // [64] - "A", // [65] - "B", // [66] - "C", // [67] - "D", // [68] - "E", // [69] - "F", // [70] - "G", // [71] - "H", // [72] - "I", // [73] - "J", // [74] - "K", // [75] - "L", // [76] - "M", // [77] - "N", // [78] - "O", // [79] - "P", // [80] - "Q", // [81] - "R", // [82] - "S", // [83] - "T", // [84] - "U", // [85] - "V", // [86] - "W", // [87] - "X", // [88] - "Y", // [89] - "Z", // [90] - "OS_KEY", // [91] Windows Key (Windows) or Command Key (Mac) - "", // [92] - "CONTEXT_MENU", // [93] - "", // [94] - "SLEEP", // [95] - "NUMPAD0", // [96] - "NUMPAD1", // [97] - "NUMPAD2", // [98] - "NUMPAD3", // [99] - "NUMPAD4", // [100] - "NUMPAD5", // [101] - "NUMPAD6", // [102] - "NUMPAD7", // [103] - "NUMPAD8", // [104] - "NUMPAD9", // [105] - "MULTIPLY", // [106] - "ADD", // [107] - "SEPARATOR", // [108] - "SUBTRACT", // [109] - "DECIMAL", // [110] - "DIVIDE", // [111] - "F1", // [112] - "F2", // [113] - "F3", // [114] - "F4", // [115] - "F5", // [116] - "F6", // [117] - "F7", // [118] - "F8", // [119] - "F9", // [120] - "F10", // [121] - "F11", // [122] - "F12", // [123] - "F13", // [124] - "F14", // [125] - "F15", // [126] - "F16", // [127] - "F17", // [128] - "F18", // [129] - "F19", // [130] - "F20", // [131] - "F21", // [132] - "F22", // [133] - "F23", // [134] - "F24", // [135] - "", // [136] - "", // [137] - "", // [138] - "", // [139] - "", // [140] - "", // [141] - "", // [142] - "", // [143] - "NUM_LOCK", // [144] - "SCROLL_LOCK", // [145] - "WIN_OEM_FJ_JISHO", // [146] - "WIN_OEM_FJ_MASSHOU", // [147] - "WIN_OEM_FJ_TOUROKU", // [148] - "WIN_OEM_FJ_LOYA", // [149] - "WIN_OEM_FJ_ROYA", // [150] - "", // [151] - "", // [152] - "", // [153] - "", // [154] - "", // [155] - "", // [156] - "", // [157] - "", // [158] - "", // [159] - "CIRCUMFLEX", // [160] - "EXCLAMATION", // [161] - "DOUBLE_QUOTE", // [162] - "HASH", // [163] - "DOLLAR", // [164] - "PERCENT", // [165] - "AMPERSAND", // [166] - "UNDERSCORE", // [167] - "OPEN_PAREN", // [168] - "CLOSE_PAREN", // [169] - "ASTERISK", // [170] - "PLUS", // [171] - "PIPE", // [172] - "HYPHEN_MINUS", // [173] - "OPEN_CURLY_BRACKET", // [174] - "CLOSE_CURLY_BRACKET", // [175] - "TILDE", // [176] - "", // [177] - "", // [178] - "", // [179] - "", // [180] - "VOLUME_MUTE", // [181] - "VOLUME_DOWN", // [182] - "VOLUME_UP", // [183] - "", // [184] - "", // [185] - "SEMICOLON", // [186] - "EQUALS", // [187] - "COMMA", // [188] - "MINUS", // [189] - "PERIOD", // [190] - "SLASH", // [191] - "BACK_QUOTE", // [192] - "", // [193] - "", // [194] - "", // [195] - "", // [196] - "", // [197] - "", // [198] - "", // [199] - "", // [200] - "", // [201] - "", // [202] - "", // [203] - "", // [204] - "", // [205] - "", // [206] - "", // [207] - "", // [208] - "", // [209] - "", // [210] - "", // [211] - "", // [212] - "", // [213] - "", // [214] - "", // [215] - "", // [216] - "", // [217] - "", // [218] - "OPEN_BRACKET", // [219] - "BACK_SLASH", // [220] - "CLOSE_BRACKET", // [221] - "QUOTE", // [222] - "", // [223] - "META", // [224] - "ALTGR", // [225] - "", // [226] - "WIN_ICO_HELP", // [227] - "WIN_ICO_00", // [228] - "", // [229] - "WIN_ICO_CLEAR", // [230] - "", // [231] - "", // [232] - "WIN_OEM_RESET", // [233] - "WIN_OEM_JUMP", // [234] - "WIN_OEM_PA1", // [235] - "WIN_OEM_PA2", // [236] - "WIN_OEM_PA3", // [237] - "WIN_OEM_WSCTRL", // [238] - "WIN_OEM_CUSEL", // [239] - "WIN_OEM_ATTN", // [240] - "WIN_OEM_FINISH", // [241] - "WIN_OEM_COPY", // [242] - "WIN_OEM_AUTO", // [243] - "WIN_OEM_ENLW", // [244] - "WIN_OEM_BACKTAB", // [245] - "ATTN", // [246] - "CRSEL", // [247] - "EXSEL", // [248] - "EREOF", // [249] - "PLAY", // [250] - "ZOOM", // [251] - "", // [252] - "PA1", // [253] - "WIN_OEM_CLEAR", // [254] - "" // [255] -]; - -export default keyboardNameMap; diff --git a/src/components/inputItem/textInput.vue b/src/components/inputItem/textInput.vue deleted file mode 100644 index 45e1af7..0000000 --- a/src/components/inputItem/textInput.vue +++ /dev/null @@ -1,49 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/composables/autoUpdate.ts b/src/composables/autoUpdate.ts new file mode 100644 index 0000000..1a6b780 --- /dev/null +++ b/src/composables/autoUpdate.ts @@ -0,0 +1,31 @@ +const { autoUpdater } = require('electron-updater'); + +let win: boolean; + +// Listen for window creation. +backgroundMitt.on('window-active', (state: boolean) => { + win = state; +}); + +// Auto updating. +autoUpdater.requestHeaders = { 'PRIVATE-TOKEN': 'mvvgWYwWnot4bisiQMh_' } + +autoUpdater.on('update-available', (info: any) => { + console.log(`Update available: ${info.version}`) +}) + +autoUpdater.on('update-downloaded', (info: any) => { + + const updateDialog = { + type: 'info', + buttons: ['Restart', 'Later'], + title: 'Application Update', + message: info.version, + detail: 'A new version has been downloaded. Restart the application to apply the updates.' + } + + dialog.showMessageBox(updateDialog).then((returnValue) => { + if (returnValue.response === 0) autoUpdater.quitAndInstall() + }) + +}) \ No newline at end of file diff --git a/src/composables/useEmitter.ts b/src/composables/useEmitter.ts new file mode 100644 index 0000000..f95f328 --- /dev/null +++ b/src/composables/useEmitter.ts @@ -0,0 +1,16 @@ + +// Backend emitter +// +const EventEmitter = require('events'); +class BackgroundMitt extends EventEmitter { } + +export const backgroundMitt = new BackgroundMitt(); + +export const ipcEmit = (channel: string, payload: T) => { + backgroundMitt.emit('ipc-renderer', { + channel, + payload + }); +}; + + diff --git a/src/composables/useHttp.ts b/src/composables/useHttp.ts new file mode 100644 index 0000000..6b9ee56 --- /dev/null +++ b/src/composables/useHttp.ts @@ -0,0 +1,51 @@ + +import axios, { AxiosRequestConfig } from 'axios'; +import {config} from "@/config"; + +const baseURL = config.BUSINESS_URL + config.BUSINESS_PREFIX; + +interface Request { + endpoint: string; + query?: Record; + config?: Record; +} + +const makeQuery = (reqQuery: Record) => { + + let result = ''; + + result = '?' + Object.entries(reqQuery) + .map(([ key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`) + .join('&') + + return result; +}; + + +export default function useHttp() { + + const api = axios.create({ + baseURL, + withCredentials: true, + }); + + + const post = async (endpoint: string, payload?: Record): Promise => ( + await api.post(endpoint, payload) + ) + + + const get = async (req: Request) => { + + if (req.query) { + req.endpoint += makeQuery(req.query); + } + + const res = await api.get(req.endpoint, req.config); + return res; + }; + + return { + get, post + } +} diff --git a/src/composables/useIpcMain.ts b/src/composables/useIpcMain.ts new file mode 100644 index 0000000..ebfc4bc --- /dev/null +++ b/src/composables/useIpcMain.ts @@ -0,0 +1,82 @@ + +import { ipcMain, IpcMainInvokeEvent, IpcMainEvent } from "electron"; + +export class IpcHandler implements IIpcHandler { + + readonly channel: string; + + readonly _handlerCallback: IpcHandlerCallback; + + constructor(options: { + channel: string; + handlerCallback: IpcHandlerCallback; + }) { + this.channel = options.channel; + this._handlerCallback = options.handlerCallback; + } + + handle() { + this.remove(); + ipcMain.handle(this.channel, this._onInvoke); + } + + remove() { + ipcMain.removeHandler(this.channel); + } + + private _onInvoke = (_e: IpcMainInvokeEvent, payload?: string | null): Promise => { + + return new Promise(async (resolve, reject) => { + + console.log(`[IPC] Handle:${this.channel}`); + + try { + + const params = payload ? JSON.parse(payload) : null; + + const res = await this._handlerCallback(params); + + resolve(res as unknown as ReturnType); + + } catch(e) { + console.log(`[IPC] Error:${this.channel}`); + reject(e); + } + }); + } + +} + + +export class IpcListener implements IIpcListener { + + readonly channel: string; + + readonly _listenerCallback: IpcListenerCallback; + + constructor(options: { + channel: string; + listenerCallback: IpcListenerCallback; + }) { + this.channel = options.channel; + this._listenerCallback = options.listenerCallback; + } + + listen() { + this.remove(); + ipcMain.on(this.channel, this._onPost); + } + + remove() { + ipcMain.removeAllListeners(this.channel); + } + + private _onPost = (_e: IpcMainEvent, payload?: string | null): void => { + + console.log(`[IPC] Post: ${this.channel}`); + + const params = payload ? JSON.parse(payload) : null; + this._listenerCallback(params); + } + +} diff --git a/src/composables/useMessageCanvas.ts b/src/composables/useMessageCanvas.ts new file mode 100644 index 0000000..c85f7ed --- /dev/null +++ b/src/composables/useMessageCanvas.ts @@ -0,0 +1,36 @@ + + + +export default class Canvas { + + messages: Message[]; + + /* seed canvas with messages on init */ + constructor(messages: Message[]) { + this.messages = messages; + ipcEmit("seed-view", this.messages); + } + + /* add a new message to the canvas */ + add(message: Message) { + this.messages.push(message); + ipcEmit("update-view", message); + } + + /* update an existing message */ + update(message: Message) { + + /* get the target message */ + let target_message = this.messages.filter((m: Message) => { + return m.uid = message.uid; + })[0]; + + /* replace the target message */ + if (target_message) { + target_message = message; + ipcEmit("update-view", message); + } + + } + +} diff --git a/src/composables/useSaveToJSON.ts b/src/composables/useSaveToJSON.ts new file mode 100644 index 0000000..06ab4b9 --- /dev/null +++ b/src/composables/useSaveToJSON.ts @@ -0,0 +1,13 @@ + +import {config} from "@/config"; +import fs from 'fs'; + +export const saveToJson = (fileName: string, data: any) => { + + fs.writeFile(config.configPath + fileName, JSON.stringify(data), (err) => { + if (err) { + console.log("Error when saving to json.") + } + }) + +} diff --git a/src/composables/useWebsockets.ts b/src/composables/useWebsockets.ts new file mode 100644 index 0000000..d1cfc02 --- /dev/null +++ b/src/composables/useWebsockets.ts @@ -0,0 +1,89 @@ + +"use strict"; + +import WebSocket from 'ws'; + + +const _connectionCheckTimeout = 4000; +const _reconnectTimeout = 1000; +let _connectionCheckInterval: ReturnType; + + +export default function useWebSockets( + messageCallback: (message: string) => void, + connectionStatusCallback: (alive: boolean) => void, +) { + + let socket: WebSocket; + + const send = async (data: Record): Promise => { + return new Promise((resolve, reject) => { + if (socket) { + if (socket.readyState === WebSocket.OPEN) { + socket.send(JSON.stringify(data)); + resolve(true); + } + } + reject(false); + }); + } + + const connect = (socketUrl: string, secret: string) => { + + // avoid setting multiple interval; + if (_connectionCheckInterval) clearInterval(_connectionCheckInterval); + + /* create a new socket */ + socket = new WebSocket(socketUrl); + + /* add event listeners */ + socket.on("open", () => { + + socket.send(JSON.stringify({key: secret})); + + // ping server + _connectionCheckInterval = setInterval(() => { + + socket.ping(null, true, (e: Error) => { + if (e) { + socket.close(); + connectionStatusCallback(false); + setTimeout(() => connect(socketUrl, secret), _reconnectTimeout); + } + }); + + }, _connectionCheckTimeout); + + }); + + socket.on("message", (event: WebSocket.MessageEvent) => { + console.log("message received", event); + messageCallback(event.toString()) + }); + + socket.on("close", (event: WebSocket.CloseEvent) => { + connectionStatusCallback(false); + clearInterval(_connectionCheckInterval); + if (!event.wasClean) { + setTimeout(() => connect(socketUrl, secret), _reconnectTimeout); + } + + }); + + socket.on("pong", () => connectionStatusCallback(true)); + + } + + const close = () => { + if (socket) { + socket.close(); + } + } + + return { + connect, + send, + close + }; + +} diff --git a/src/config.ts b/src/config.ts new file mode 100644 index 0000000..855b1b2 --- /dev/null +++ b/src/config.ts @@ -0,0 +1,17 @@ + +import { app } from "electron"; + +const env = process.env; + +const PLATFORM_PORT = env.PLATFORM_PORT || 8760; +const PLATFORM_IP = env.PLATFORM_IP || 'http://127.0.0.1'; + +const BUSINESS_PORT = env.BUSINESS_PORT || 3000; +const BUSINESS_IP = env.BUSINESS_IP || 'http://127.0.0.1'; + +export const config = { + PLATFORM_URL: `${PLATFORM_IP}:${PLATFORM_PORT}`, + BUSINESS_URL: `${BUSINESS_IP}:${BUSINESS_PORT}`, + BUSINESS_PREFIX: '/api', + configPath: app.getPath('userData') +} diff --git a/src/init.ts b/src/init.ts new file mode 100644 index 0000000..9a0fdf6 --- /dev/null +++ b/src/init.ts @@ -0,0 +1,52 @@ +/** + * Entry point for Crimata electron app. + * "Look on my Works, ye Mighty, and despair!" + */ + +"use strict"; + +import { app, protocol } from "electron"; +import createWindow from "./window"; +import main from "./main"; +import { backgroundMitt } from '@/composables/useEmitter'; + +console.log('Starting Crimata electron app.'); + +// Scheme must be registered before the app is ready +protocol.registerSchemesAsPrivileged([ + { scheme: "app", privileges: { secure: true, standard: true } } +]); + +const isDev = require('electron-is-dev'); + +let win: boolean; + +// Listen for window creation. +backgroundMitt.on('window-active', (state: boolean) => { + win = state; +}); + +/* Start main process on ready */ +app.on("ready", async () => { + await main(); +}); + +// Must keep to ensure app doesn't quit on close. +app.on("before-quit", async () => { +}); + +// Must keep to ensure app doesn't quit on close. +app.on("window-all-closed", () => { +}); + +// When user clicks app icon (re-open) +app.on("activate", () => { + if (!win) createWindow(); +}); + +// Exit cleanly on request from parent process in development mode. +if (isDev) { + process.on("SIGTERM", () => { + app.quit(); + }); +} diff --git a/src/ipc/handlers.ts b/src/ipc/handlers.ts new file mode 100644 index 0000000..5529662 --- /dev/null +++ b/src/ipc/handlers.ts @@ -0,0 +1,28 @@ + +"use strict"; + +import { accountLogin, accountLogout, accountProfile } from "@/account"; +import { IpcHandler } from "@/composables/useIpcMain"; +import { flush } from "@/audio"; + + +const LOGIN_CHANNEL = "invoke-account-login"; +const LOGOUT_CHANNEL = "invoke-account-logout"; +const GET_AUDIO_CHANNEL = "invoke-audio-flush"; + +export const loginHandler = new IpcHandler({ + channel: LOGIN_CHANNEL, + handlerCallback: accountLogin +}); + +export const logoutHandler = new IpcHandler({ + channel: LOGOUT_CHANNEL, + handlerCallback: accountLogout +}); + +export const getAudioHandler = new IpcHandler({ + channel: GET_AUDIO_CHANNEL, + handlerCallback: flush +}); + + diff --git a/src/ipc/index.ts b/src/ipc/index.ts new file mode 100644 index 0000000..e6eb90a --- /dev/null +++ b/src/ipc/index.ts @@ -0,0 +1,33 @@ + +"use strict"; + +import * as handlers from "./handlers"; +import * as listeners from "./listeners"; + +const ipcHandlers: IPCHandlers = {}; +const ipcListeners: IPCListeners = {}; + +const _initHandlers = (): void => { + for (const [key, handler] of Object.entries(handlers)) { + if (!(key in ipcHandlers)) { + ipcHandlers[key] = handler; + handler.handle(); + } + } +}; + +const _initListeners = (): void => { + for (const [key, listener] of Object.entries(listeners)) { + if (!(key in ipcListeners)) { + ipcListeners[key] = listener; + listener.listen(); + } + } +}; + +export default function initIpcMain(): void { + _initHandlers(); + _initListeners(); +} + + diff --git a/src/ipc/listeners.ts b/src/ipc/listeners.ts new file mode 100644 index 0000000..8ef5d45 --- /dev/null +++ b/src/ipc/listeners.ts @@ -0,0 +1,24 @@ + +import { IpcListener } from "@/composables/useIpcMain" +import { sendMessage } from '@/session'; +import { collect } from "@/audio"; +import { updateAppState } from "@/account"; + +const CLIENT_MESSAGE_CHANNEL = "post-session-send" +const GET_AUDIO_CHANNEL = "post-audio-collect"; +const APP_MOUNT_CHANNEL = "post-app-mount"; + +export const messageListener = new IpcListener({ + channel: CLIENT_MESSAGE_CHANNEL, + listenerCallback: sendMessage +}); + +export const audioChunkListener = new IpcListener({ + channel: GET_AUDIO_CHANNEL, + listenerCallback: collect +}); + +export const appMountListener = new IpcListener({ + channel: APP_MOUNT_CHANNEL, + listenerCallback: updateAppState +}); diff --git a/src/main.ts b/src/main.ts index fcad020..a360835 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,17 +1,39 @@ -// src/main.ts +/** + * Where the background logic really begins, gets called by app.onReady(). + * + * Handles authentication. If profile is set, we launch a session, which consis + * of opening a connection with the platform, initializing the audio streams. + * + * The session is primarily an interface between the frontend and the platform, + * relaying messages from one to the other. + * + */ -import App from "./App.vue"; -import router from "./router"; +import initIpcMain from "@/ipc/index"; +import { accountAuth, updateAppState } from "./account"; +import { launchSession } from "./session"; +import createWindow from "./window"; -import mitt from "mitt"; -import { createApp } from "vue"; +let authState: AuthState | null; +export default async function main() { -// Handle events. -const emitter = mitt(); + /* initiate controls for frontend to use when needed */ + initIpcMain(); -const app = createApp(App) + /* launch browser window */ + await createWindow(); -app.use(router) -app.provide("mitt", emitter) -app.mount("#app"); + try { + authState = await accountAuth() as AuthState; + } catch(e) { + console.log('AUTH:', e); + authState = null; + } finally { + if (authState) { + launchSession(authState.token as string); + } + updateAppState(); + } + +} diff --git a/src/modules/auth.ts b/src/modules/auth.ts deleted file mode 100644 index f1481f2..0000000 --- a/src/modules/auth.ts +++ /dev/null @@ -1,71 +0,0 @@ -import { reactive, toRefs } from 'vue'; -import { useIpc } from './ipc'; - -interface AuthState { - accessToken: string | null; - error?: Error; -} - -const state = reactive({ - accessToken: null, - error: undefined, -}); - -const AUTH_KEY = 'crimata_token'; - -let token: string | null; - -token = window.localStorage.getItem(AUTH_KEY); -if (token) { - state.accessToken = token; - window.localStorage.setItem(AUTH_KEY, token); -} - -// Load key and invoke onAuthSession to try key-login. -const authToken = async () => { - console.log("Calling auth token.") - const { invoke } = useIpc(); - try { - token = window.localStorage.getItem(AUTH_KEY); - - if (!token) { - token = "no-token" - } - - console.log(`Token ${token}`) - const res = await invoke('auth-session', token); - window.localStorage.setItem(AUTH_KEY, res); - state.accessToken = res; - } - catch(e) { - state.error = e; - console.log('ERROR: failed authentication'); - window.localStorage.removeItem(AUTH_KEY); - state.accessToken = null; - } -} - -// Gets called on socket open. -window.ipcRenderer.on("auth", async (_event, _arg) => { - await authToken(); -}); - -export const useAuth = () => { - - const setToken = (token: string) => { - window.localStorage.setItem(AUTH_KEY, token); - state.accessToken = token; - state.error = undefined; - } - - const logout = (): Promise => { - window.localStorage.removeItem(AUTH_KEY); - return Promise.resolve(state.accessToken = null); - } - - return { - setToken, - logout, - ...toRefs(state), // accessToken, error - } -} diff --git a/src/modules/ipc.ts b/src/modules/ipc.ts deleted file mode 100644 index f333d6a..0000000 --- a/src/modules/ipc.ts +++ /dev/null @@ -1,23 +0,0 @@ - -export const useIpc = () => { - const invoke = async (endpoint: string, payload: any) => { - try { - const res = await window.ipcRenderer.invoke(endpoint, payload); - return res; - } catch (e) { - throw e; - } - } - - const post = (endpoint: string, payload: any) => { - window.postMessage({ - endpoint: endpoint, - content: payload - }, '*') - }; - - return { - invoke, - post - } -} diff --git a/src/modules/message.ts b/src/modules/message.ts deleted file mode 100644 index e0f0c50..0000000 --- a/src/modules/message.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { RenderMessage, ClientMessage } from "@/types/message/index"; -import { v4 as uuidv4 } from 'uuid'; - -function getTimeStamp(): number { - const currentdate = new Date(); - return currentdate.getTime(); -} - -// Create a RenderMessage object. -export const renderMessage = (text: boolean | string, audio: boolean | string, context: string, modifier: string): RenderMessage => ( - { - content: { - text: text, - audio: audio - }, - context: context, - modifier: modifier, - time: getTimeStamp(), - uid: uuidv4(), - isChild: "none" - } -) - -export const clientMessage = (text: string, audio: string | boolean, uid: string): ClientMessage => ( - { - audio, - text, - uid - } -) \ No newline at end of file diff --git a/src/modules/messages.ts b/src/modules/messages.ts deleted file mode 100644 index 7f4d79c..0000000 --- a/src/modules/messages.ts +++ /dev/null @@ -1,103 +0,0 @@ -import { ref } from 'vue'; -import useScroll from "@/modules/scroll"; -import { RenderMessage, Annotation } from "@/types/message/index"; - -const messages = ref(new Map()); - -const addMessage = (message: RenderMessage) => { - messages.value.set(message.uid, message) -} - -const updateMessage = (annotation: Annotation) => { - const message = messages.value.get(annotation.uid) - message.context = annotation.context - message.content.text = annotation.text -} - -const loadMessages = () => { - const rawData = window.localStorage.getItem("crimata_messages"); - if (rawData) { - const messageData = JSON.parse(rawData) - messages.value = new Map(Object.entries(messageData)); - } -} - -const saveMessages = () => { - const messageData = Object.fromEntries(messages.value); - window.localStorage.setItem("crimata_messages", JSON.stringify(messageData)); -} - -const isSimmilar = (messageA: RenderMessage, messageB: RenderMessage) => { - if ((Math.abs(messageA.time - messageB.time) < 20000) && (messageA.modifier == messageB.modifier) && (messageA.context == messageB.context)) { - return true - } - return false -} - -const updateGrouping = () => { - console.log("updating grouping") - const refs = Array.from(messages.value.keys()) - - // Get the last three messages. - const first = messages.value.get(refs[refs.length - 1]) - const second = messages.value.get(refs[refs.length - 2]) - const third = messages.value.get(refs[refs.length - 3]) - - // If messages are simmilar, update the classes. - if ((first) && (second)) { - if (isSimmilar(first, second)) { - first.isChild = "last" // i.e. last in group. - second.isChild = "first" - - if (third) { - if ((third.isChild == "first") || (third.isChild == "middle")) { - second.isChild = "middle" - } - } - } - } -} - -const { setScroll, updateScrollRef, adjustScroll } = useScroll("messenger"); - -loadMessages() -setTimeout(setScroll, 1000); - - -export default function useMessages() { - - // Main function for updating the message view. - const updateMessageView = (message: RenderMessage | Annotation) => { - - // Step 1: See if user is scrolled down. - updateScrollRef() - - // Step 2: Add the new content to the view. - if ("content" in message) { - addMessage(message) - } else { - updateMessage(message) - } - - // Step 3: Pop off oldest message (if > 200). - if (messages.value.size >= 200) { - const oldest = Array.from(messages.value.keys()).shift(); - messages.value.delete(oldest); - }; - - // Step 4: Update grouping. - updateGrouping() - - // Setp 5: Scroll the view (if scrolled down). - setTimeout(adjustScroll, 20); - - // Step 6: Save the view data. - saveMessages() - - } - - return { - messages, - updateMessageView - } -}; \ No newline at end of file diff --git a/src/modules/mitt.ts b/src/modules/mitt.ts deleted file mode 100644 index 9804d0b..0000000 --- a/src/modules/mitt.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { inject } from "vue"; -import { Mitt } from "@/types/mitt/index"; - -let emitter: Mitt; - -export default function useMitt() { - - const emitterInject: Mitt | undefined = inject("mitt"); - if (emitterInject) { - emitter = emitterInject; - } - return { - emitter - } -} \ No newline at end of file diff --git a/src/modules/scroll.ts b/src/modules/scroll.ts deleted file mode 100644 index e9e6501..0000000 --- a/src/modules/scroll.ts +++ /dev/null @@ -1,50 +0,0 @@ - - -export default function useScroll(element: string) { - - let isScrolledToBottom: boolean; - - // Set the initial scroll position. - const setScroll = () => { - const view = document.getElementById(element) - - if (view) { - view.scrollTo({ - top: view.scrollHeight - view.clientHeight, - behavior: 'smooth' - }); - } - } - - // Update isScrolledToBottom - const updateScrollRef = () => { - const view = document.getElementById(element) - - if (view) { - isScrolledToBottom = view.scrollHeight - view.clientHeight <= view.scrollTop + 1 - } - - } - - // Adjust scroll after we add content to the messenger. - const adjustScroll = () => { - const view = document.getElementById(element) - - if (view) { - if (isScrolledToBottom) { - view.scrollTo({ - top: view.scrollHeight - view.clientHeight, - behavior: 'smooth' - }); - } - } - - } - - return { - updateScrollRef, - adjustScroll, - setScroll, - } - -} diff --git a/src/render/App.vue b/src/render/App.vue new file mode 100644 index 0000000..686591b --- /dev/null +++ b/src/render/App.vue @@ -0,0 +1,76 @@ + + + + + diff --git a/src/components/messageItem.vue b/src/render/components/bubble.vue similarity index 58% rename from src/components/messageItem.vue rename to src/render/components/bubble.vue index 63c58bd..982cef3 100644 --- a/src/components/messageItem.vue +++ b/src/render/components/bubble.vue @@ -1,111 +1,52 @@ -