added unsupported component

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

3
client/.babelrc Normal file
View File

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

View File

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

View File

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

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>

View File

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