iridium/neko-custom
Archived
2
0
Fork 0
Code Pull Requests Activity

added unsupported component

Browse Source
This commit is contained in:
Craig 2020-01-29 01:27:35 +00:00
parent 821a2bbfa2
commit 3a46fa43e6
5 changed files with 119 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/.babelrc Normal file
View File

@ -0,0 +1,3 @@
{
"presets": ["@vue/cli-plugin-babel/preset"]
}

1
client/package.json
View File

@ -38,6 +38,7 @@
"devDependencies": {
"@types/animejs": "^3.1.0",
"@types/vue": "^2.0.0",
"@vue/cli-plugin-babel": "^4.1.0",
"@vue/cli-plugin-eslint": "^4.1.0",
"@vue/cli-plugin-typescript": "^4.1.0",
"@vue/cli-plugin-vuex": "^4.1.0",

55
client/src/app.vue
View File

@ -1,31 +1,36 @@
<template>
<div id="neko">
<main class="neko-main">
<div class="header-container">
<neko-header />
</div>
<div class="video-container">
<neko-video ref="video" />
</div>
<div class="room-container">
<neko-members />
<div class="room-menu">
<div class="settings">
<neko-menu />
</div>
<div class="controls">
<neko-controls />
</div>
<div class="emotes">
<neko-emotes />
<template v-if="!$client.supported">
<neko-unsupported />
</template>
<template v-else>
<main class="neko-main">
<div class="header-container">
<neko-header />
</div>
<div class="video-container">
<neko-video ref="video" />
</div>
<div class="room-container">
<neko-members />
<div class="room-menu">
<div class="settings">
<neko-menu />
</div>
<div class="controls">
<neko-controls />
</div>
<div class="emotes">
<neko-emotes />
</div>
</div>
</div>
</div>
</main>
<neko-side v-if="side" />
<neko-connect v-if="!connected" />
<neko-about v-if="about" />
<notifications group="neko" position="top left" style="top: 50px;" />
</main>
<neko-side v-if="side" />
<neko-connect v-if="!connected" />
<neko-about v-if="about" />
<notifications group="neko" position="top left" style="top: 50px;" />
</template>
</div>
</template>
@ -113,6 +118,7 @@
import Emotes from '~/components/emotes.vue'
import About from '~/components/about.vue'
import Header from '~/components/header.vue'
import Unsupported from '~/components/unsupported.vue'
@Component({
name: 'neko',
@ -126,6 +132,7 @@
'neko-emotes': Emotes,
'neko-about': About,
'neko-header': Header,
'neko-unsupported': Unsupported,
},
})
export default class extends Vue {

75
client/src/components/unsupported.vue Normal file
View File

@ -0,0 +1,75 @@
<template>
<div class="unsupported">
<div class="window">
<div class="logo">
<img src="@/assets/logo.svg" alt="n.eko" />
<span><b>n</b>.eko</span>
</div>
<div class="message">
<span>this browser does not support webrtc</span>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.unsupported {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
.window {
width: 300px;
background: $background-secondary;
border-radius: 5px;
padding: 10px;
.logo {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
img {
height: 90px;
margin-right: 10px;
}
span {
font-size: 30px;
line-height: 56px;
b {
font-weight: 900;
}
}
}
.message {
display: flex;
flex-direction: column;
span {
display: block;
text-align: center;
text-transform: uppercase;
line-height: 30px;
}
}
}
}
</style>
<script lang="ts">
import { Component, Ref, Watch, Vue } from 'vue-property-decorator'
@Component({ name: 'neko-unsupported' })
export default class extends Vue {}
</script>

11
client/src/neko/base.ts
View File

@ -1,7 +1,5 @@
import EventEmitter from 'eventemitter3'
import { OPCODE } from './data'
import { EVENT, WebSocketEvents } from './events'
import {
@ -29,6 +27,10 @@ export abstract class BaseClient extends EventEmitter<BaseEvents> {
protected _username?: string
protected _state: RTCIceConnectionState = 'disconnected'
get supported() {
return typeof RTCPeerConnection !== 'undefined' && typeof RTCPeerConnection.prototype.addTransceiver !== 'undefined'
}
get socketOpen() {
return typeof this._ws !== 'undefined' && this._ws.readyState === WebSocket.OPEN
}
@ -47,6 +49,11 @@ export abstract class BaseClient extends EventEmitter<BaseEvents> {
return
}
if (!this.supported) {
this.onDisconnected(new Error('browser does not support webrtc (RTCPeerConnection missing)'))
return
}
if (username === '') {
throw new Error('Must add a username') // TODO: Better handleing
}