single connection status in state.

src/component/internal/connection.ts

@@ -28,29 +28,48 @@ export class NekoConnection extends EventEmitter<NekoConnectionEvents> {
 
     // initial state
     Vue.set(this._state, 'type', 'webrtc')
-    Vue.set(this._state, 'websocket', this.websocket.supported ? 'disconnected' : 'unavailable')
+
-    Vue.set(this._state.webrtc, 'status', this.webrtc.supported ? 'disconnected' : 'unavailable')
+    let webSocketStatus = 'disconnected'
+    let webRTCStatus = 'disconnected'
 
     // websocket
     this.websocket.on('connecting', () => {
-      Vue.set(this._state, 'websocket', 'connecting')
+      webSocketStatus = 'connecting'
+      if (this._state.status !== 'connecting') {
+        Vue.set(this._state, 'status', 'connecting')
+      }
     })
     this.websocket.on('connected', () => {
-      Vue.set(this._state, 'websocket', 'connected')
+      webSocketStatus = 'connected'
+      if (webSocketStatus == 'connected' && webRTCStatus == 'connected') {
+        Vue.set(this._state, 'status', 'connected')
+      }
     })
     this.websocket.on('disconnected', () => {
-      Vue.set(this._state, 'websocket', 'disconnected')
+      webSocketStatus = 'disconnected'
+      if (this._state.status !== 'disconnected') {
+        Vue.set(this._state, 'status', 'disconnected')
+      }
     })
 
     // webrtc
     this.webrtc.on('connecting', () => {
-      Vue.set(this._state.webrtc, 'status', 'connecting')
+      webRTCStatus = 'connecting'
+      if (this._state.status !== 'connecting') {
+        Vue.set(this._state, 'status', 'connecting')
+      }
     })
     this.webrtc.on('connected', () => {
-      Vue.set(this._state.webrtc, 'status', 'connected')
+      webRTCStatus = 'connected'
+      if (webSocketStatus == 'connected' && webRTCStatus == 'connected') {
+        Vue.set(this._state, 'status', 'connected')
+      }
     })
     this.webrtc.on('disconnected', () => {
-      Vue.set(this._state.webrtc, 'status', 'disconnected')
+      webRTCStatus = 'disconnected'
+      if (this._state.status !== 'disconnected') {
+        Vue.set(this._state, 'status', 'disconnected')
+      }
     })
   }
 
@@ -76,5 +95,6 @@ export class NekoConnection extends EventEmitter<NekoConnectionEvents> {
 
   public disconnect() {
     this.websocket.disconnect()
+    Vue.set(this._state, 'status', 'disconnected')
   }
 }

src/component/main.vue

@@ -7,7 +7,7 @@
         :scroll="state.control.scroll"
         :screenSize="state.screen.size"
         :canvasSize="canvasSize"
-        :isControling="controlling && watching"
+        :isControling="controlling"
         :cursorTag="
           state.control.implicit_hosting && state.control.host_id != null
             ? state.sessions[state.control.host_id].profile.name
@@ -101,9 +101,8 @@
     public state = {
       authenticated: false,
       connection: {
-        websocket: 'disconnected',
-        webrtc: {
         status: 'disconnected',
+        webrtc: {
           stats: null,
           video: null,
           videos: [],
@@ -148,11 +147,7 @@
     public connection = new NekoConnection(this.state.connection)
 
     public get connected() {
-      return this.state.connection.websocket == 'connected'
+      return this.state.connection.status == 'connected'
-    }
-
-    public get watching() {
-      return this.state.connection.webrtc.status == 'connected'
     }
 
     public get controlling() {
@@ -516,7 +511,6 @@
       }
 
       // websocket
-      Vue.set(this.state.connection, 'websocket', 'disconnected')
       Vue.set(this.state.connection.webrtc, 'videos', [])
       Vue.set(this.state.control, 'clipboard', null)
       Vue.set(this.state.control, 'host_id', null)
@@ -527,7 +521,6 @@
       Vue.set(this.state, 'sessions', {})
 
       // webrtc
-      Vue.set(this.state.connection.webrtc, 'status', 'disconnected')
       Vue.set(this.state.connection.webrtc, 'stats', null)
       Vue.set(this.state.connection.webrtc, 'video', null)
       Vue.set(this.state.connection, 'type', 'none')

src/component/types/state.ts

@@ -13,13 +13,12 @@ export default interface State {
 /////////////////////////////
 
 export interface Connection {
-  websocket: 'unavailable' | 'disconnected' | 'connecting' | 'connected'
+  status: 'disconnected' | 'connecting' | 'connected'
   webrtc: WebRTC
   type: 'webrtc' | 'fallback' | 'none'
 }
 
 export interface WebRTC {
-  status: 'unavailable' | 'disconnected' | 'connecting' | 'connected'
   stats: WebRTCStats | null
   video: string | null
   videos: string[]