added unsupported component

client/.babelrc

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

client/package.json

@@ -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",

client/src/app.vue

@@ -1,31 +1,36 @@
 <template>
   <div id="neko">
-    <main class="neko-main">
+    <template v-if="!$client.supported">
-      <div class="header-container">
+      <neko-unsupported />
-        <neko-header />
+    </template>
-      </div>
+    <template v-else>
-      <div class="video-container">
+      <main class="neko-main">
-        <neko-video ref="video" />
+        <div class="header-container">
-      </div>
+          <neko-header />
-      <div class="room-container">
+        </div>
-        <neko-members />
+        <div class="video-container">
-        <div class="room-menu">
+          <neko-video ref="video" />
-          <div class="settings">
+        </div>
-            <neko-menu />
+        <div class="room-container">
-          </div>
+          <neko-members />
-          <div class="controls">
+          <div class="room-menu">
-            <neko-controls />
+            <div class="settings">
-          </div>
+              <neko-menu />
-          <div class="emotes">
+            </div>
-            <neko-emotes />
+            <div class="controls">
+              <neko-controls />
+            </div>
+            <div class="emotes">
+              <neko-emotes />
+            </div>
           </div>
         </div>
-      </div>
+      </main>
-    </main>
+      <neko-side v-if="side" />
-    <neko-side v-if="side" />
+      <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>
 </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 {

client/src/components/unsupported.vue

@@ -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>

client/src/neko/base.ts

@@ -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
     }