slight tweaks
This commit is contained in:
parent
157ee2e1fb
commit
064253eae3
@ -1 +1 @@
|
|||||||
VUE_APP_SERVER=localhost:3000
|
VUE_APP_SERVER_PORT=3000
|
||||||
|
@ -0,0 +1,12 @@
|
|||||||
|
<div align="center">
|
||||||
|
<a href="https://github.com/nurdism/neko"><img src="https://github.com/nurdism/neko/raw/master/.github/logo.png" width="650" height="auto"/></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
# **n**.eko
|
||||||
|
This is a proof of concept project I threw together over the last few days, it's not perfect, but it looks nice. This uses web rtc to stream a desktop inside of a docker container, I made this because [rabb.it](https://en.wikipedia.org/wiki/Rabb.it) went under and my internet can't handle streaming and discord keeps crashing. I just want to watch anime with my friends ლ(ಠ益ಠლ) so I started digging throughout the net and found a few *kinda* clones, but non of them had the virtual browser, then I found [Turtus](https://github.com/Khauri/Turtus) and I was able to figure out the rest.
|
||||||
|
|
||||||
|
This is by no means a fully featured clone of rabbit. The client has no concept of other peers. It has bugs, but for the most part it works. I'm not sure what the future holds for this. If I continue to use it and like it, I'll probably keep pushing updates to it. I'd be happy to accept PRs for any improvements.
|
||||||
|
|
||||||
|
### Why n.eko?
|
||||||
|
I like cats (Neko is the Japanese word for cat), I'm a weeb/nerd, I own the domain [n.eko.moe](https://n.eko.moe/) and I love the logo /shrug
|
||||||
|
|
BIN
client/src/assets/celebrate.png
Normal file
BIN
client/src/assets/celebrate.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.6 KiB |
BIN
client/src/assets/clap.png
Normal file
BIN
client/src/assets/clap.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.7 KiB |
BIN
client/src/assets/exclam.png
Normal file
BIN
client/src/assets/exclam.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.7 KiB |
BIN
client/src/assets/heart.png
Normal file
BIN
client/src/assets/heart.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.8 KiB |
BIN
client/src/assets/laughing.png
Normal file
BIN
client/src/assets/laughing.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.9 KiB |
BIN
client/src/assets/sleep.png
Normal file
BIN
client/src/assets/sleep.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.5 KiB |
@ -325,7 +325,7 @@
|
|||||||
@Ref('history') readonly _history!: HTMLElement
|
@Ref('history') readonly _history!: HTMLElement
|
||||||
@Ref('context') readonly _context!: any
|
@Ref('context') readonly _context!: any
|
||||||
|
|
||||||
_content = ''
|
content = ''
|
||||||
|
|
||||||
get id() {
|
get id() {
|
||||||
return this.$accessor.user.id
|
return this.$accessor.user.id
|
||||||
@ -339,18 +339,6 @@
|
|||||||
return this.$accessor.chat.history
|
return this.$accessor.chat.history
|
||||||
}
|
}
|
||||||
|
|
||||||
get content() {
|
|
||||||
return this._content
|
|
||||||
}
|
|
||||||
|
|
||||||
set content(text: string) {
|
|
||||||
if (text.length > length) {
|
|
||||||
this._content = text.substring(0, length)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this._content = text
|
|
||||||
}
|
|
||||||
|
|
||||||
@Watch('history')
|
@Watch('history')
|
||||||
onHistroyChange() {
|
onHistroyChange() {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
@ -361,7 +349,7 @@
|
|||||||
@Watch('muted')
|
@Watch('muted')
|
||||||
onMutedChange(muted: boolean) {
|
onMutedChange(muted: boolean) {
|
||||||
if (muted) {
|
if (muted) {
|
||||||
this._content = ''
|
this.content = ''
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -405,11 +393,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
onKeyDown(event: KeyboardEvent) {
|
onKeyDown(event: KeyboardEvent) {
|
||||||
if (typeof this._content === 'undefined' || this.muted) {
|
if (this.muted) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this._content.length == length) {
|
if (this.content.length > length) {
|
||||||
|
this.content = this.content.substring(0, length)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.content.length == length) {
|
||||||
if (
|
if (
|
||||||
[8, 16, 17, 18, 20, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 91, 93, 144].includes(event.keyCode) ||
|
[8, 16, 17, 18, 20, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 91, 93, 144].includes(event.keyCode) ||
|
||||||
(event.ctrlKey && [67, 65, 88].includes(event.keyCode))
|
(event.ctrlKey && [67, 65, 88].includes(event.keyCode))
|
||||||
@ -425,14 +417,14 @@
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this._content === '') {
|
if (this.content === '') {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
this.$accessor.chat.sendMessage(this._content)
|
this.$accessor.chat.sendMessage(this.content)
|
||||||
|
|
||||||
this._content = ''
|
this.content = ''
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,12 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div ref="emote" @click.stop.prevent="run" class="emote">
|
<div ref="emote" @click.stop.prevent="run" class="emote">
|
||||||
<i :class="classes"></i>
|
<div :class="classes" />
|
||||||
<i :class="classes"></i>
|
<div :class="classes" />
|
||||||
<i :class="classes"></i>
|
<div :class="classes" />
|
||||||
<i :class="classes"></i>
|
<div :class="classes" />
|
||||||
<i :class="classes"></i>
|
<div :class="classes" />
|
||||||
<i :class="classes"></i>
|
<div :class="classes" />
|
||||||
<i :class="classes"></i>
|
<div :class="classes" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -18,7 +18,7 @@
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|
||||||
i {
|
div {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
@ -26,18 +26,30 @@
|
|||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
background-size: contain;
|
||||||
|
|
||||||
|
&.celebrate {
|
||||||
|
background-image: url('../assets/celebrate.png');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.clap {
|
||||||
|
background-image: url('../assets/clap.png');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.exclam {
|
||||||
|
background-image: url('../assets/exclam.png');
|
||||||
|
}
|
||||||
|
|
||||||
&.heart {
|
&.heart {
|
||||||
color: rgb(204, 72, 72);
|
background-image: url('../assets/heart.png');
|
||||||
}
|
}
|
||||||
&.poo {
|
|
||||||
color: rgb(112, 89, 58);
|
&.laughing {
|
||||||
|
background-image: url('../assets/laughing.png');
|
||||||
}
|
}
|
||||||
&.grin {
|
|
||||||
color: rgb(228, 194, 84);
|
&.sleep {
|
||||||
}
|
background-image: url('../assets/sleep.png');
|
||||||
&.dizzy {
|
|
||||||
color: rgb(199, 199, 199);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -66,14 +78,7 @@
|
|||||||
let count = 0
|
let count = 0
|
||||||
let finish: Array<Promise<any>> = []
|
let finish: Array<Promise<any>> = []
|
||||||
|
|
||||||
const emotes: any = {
|
this.classes = [this.emote.type]
|
||||||
heart: 'fa-heart',
|
|
||||||
poo: 'fa-poo',
|
|
||||||
grin: 'fa-grin-tears',
|
|
||||||
ghost: 'fa-ghost',
|
|
||||||
}
|
|
||||||
|
|
||||||
this.classes = ['fas', emotes[this.emote.type] || 'fa-heart', this.emote.type]
|
|
||||||
|
|
||||||
for (let child of this.container.children) {
|
for (let child of this.container.children) {
|
||||||
const ele = child as HTMLElement
|
const ele = child as HTMLElement
|
||||||
|
@ -1,10 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="emotes">
|
<div class="emotes">
|
||||||
<ul v-if="!muted">
|
<ul v-if="!muted">
|
||||||
<li><i @click.stop.prevent="click('heart')" class="fas fa-heart"></i></li>
|
<li><div @click.stop.prevent="click('heart')" class="heart" /></li>
|
||||||
<li><i @click.stop.prevent="click('poo')" class="fas fa-poo"></i></li>
|
<li><div @click.stop.prevent="click('sleep')" class="sleep" /></li>
|
||||||
<li><i @click.stop.prevent="click('grin')" class="fas fa-grin-tears"></i></li>
|
<li><div @click.stop.prevent="click('laughing')" class="laughing" /></li>
|
||||||
<li><i @click.stop.prevent="click('ghost')" class="fas fa-ghost"></i></li>
|
<li><div @click.stop.prevent="click('celebrate')" class="celebrate" /></li>
|
||||||
|
<li><div @click.stop.prevent="click('exclam')" class="exclam" /></li>
|
||||||
|
<li><div @click.stop.prevent="click('clap')" class="clap" /></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -21,8 +23,35 @@
|
|||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
margin: 0 5px;
|
margin: 0 5px;
|
||||||
|
|
||||||
i {
|
div {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
background-size: contain;
|
||||||
|
|
||||||
|
&.celebrate {
|
||||||
|
background-image: url('../assets/celebrate.png');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.clap {
|
||||||
|
background-image: url('../assets/clap.png');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.exclam {
|
||||||
|
background-image: url('../assets/exclam.png');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.heart {
|
||||||
|
background-image: url('../assets/heart.png');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.laughing {
|
||||||
|
background-image: url('../assets/laughing.png');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.sleep {
|
||||||
|
background-image: url('../assets/sleep.png');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -33,7 +33,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
|
|||||||
connect(password: string, username: string) {
|
connect(password: string, username: string) {
|
||||||
const url =
|
const url =
|
||||||
process.env.NODE_ENV === 'development'
|
process.env.NODE_ENV === 'development'
|
||||||
? `ws://${process.env.VUE_APP_SERVER}/`
|
? `ws://${location.host.split(':')[0]}:${process.env.VUE_APP_SERVER_PORT}/`
|
||||||
: `${/https/gi.test(location.protocol) ? 'wss' : 'ws'}://${location.host}/`
|
: `${/https/gi.test(location.protocol) ? 'wss' : 'ws'}://${location.host}/`
|
||||||
|
|
||||||
super.connect(url, password, username)
|
super.connect(url, password, username)
|
||||||
@ -61,13 +61,6 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
|
|||||||
duration: 5000,
|
duration: 5000,
|
||||||
speed: 1000,
|
speed: 1000,
|
||||||
})
|
})
|
||||||
|
|
||||||
this.$accessor.chat.newMessage({
|
|
||||||
id: this.id,
|
|
||||||
content: 'connected',
|
|
||||||
type: 'event',
|
|
||||||
created: new Date(),
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
protected [EVENT.DISCONNECTED](reason?: Error) {
|
protected [EVENT.DISCONNECTED](reason?: Error) {
|
||||||
@ -125,6 +118,12 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
|
|||||||
/////////////////////////////
|
/////////////////////////////
|
||||||
protected [EVENT.MEMBER.LIST]({ members }: MemberListPayload) {
|
protected [EVENT.MEMBER.LIST]({ members }: MemberListPayload) {
|
||||||
this.$accessor.user.setMembers(members)
|
this.$accessor.user.setMembers(members)
|
||||||
|
this.$accessor.chat.newMessage({
|
||||||
|
id: this.id,
|
||||||
|
content: 'connected',
|
||||||
|
type: 'event',
|
||||||
|
created: new Date(),
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
protected [EVENT.MEMBER.CONNECTED](member: MemberPayload) {
|
protected [EVENT.MEMBER.CONNECTED](member: MemberPayload) {
|
||||||
|
Reference in New Issue
Block a user