move connection type from connection handler.

src/component/internal/connection.ts

@@ -47,27 +47,25 @@ export class NekoConnection extends EventEmitter<NekoConnectionEvents> {
     }
 
     this._onConnectHandle = () => {
+      Vue.set(this._state.websocket, 'connected', this.websocket.connected)
+      Vue.set(this._state.webrtc, 'connected', this.webrtc.connected)
+
       if (this._state.status !== 'connected' && this.websocket.connected && this.webrtc.connected) {
         Vue.set(this._state, 'status', 'connected')
       }
 
-      if (this._state.type !== 'webrtc' && this.webrtc.connected) {
-        Vue.set(this._state, 'type', 'webrtc')
-      }
-
       if (this.websocket.connected && !this.webrtc.connected) {
         this._reconnector.webrtc.connect()
       }
     }
 
     this._onDisconnectHandle = () => {
+      Vue.set(this._state.websocket, 'connected', this.websocket.connected)
+      Vue.set(this._state.webrtc, 'connected', this.webrtc.connected)
+
       if (this._state.status === 'connected' && this.activated) {
         Vue.set(this._state, 'status', 'connecting')
       }
-
-      if (this._state.type !== 'fallback' && !this.webrtc.connected) {
-        Vue.set(this._state, 'type', 'fallback')
-      }
     }
 
     this._onCloseHandle = this.close.bind(this)
@@ -104,10 +102,7 @@ export class NekoConnection extends EventEmitter<NekoConnectionEvents> {
           window.clearTimeout(webrtcFallbackTimeout)
         }
 
-        if (this._state.type === 'fallback') {
+        Vue.set(this._state.webrtc, 'connected', true)
-          Vue.set(this._state, 'type', 'webrtc')
-        }
-
         webrtcCongestion = 0
         return
       }
@@ -115,9 +110,7 @@ export class NekoConnection extends EventEmitter<NekoConnectionEvents> {
       // try to downgrade quality if it happend many times
       if (++webrtcCongestion >= WEBRTC_RECONN_FAILED_ATTEMPTS) {
         webrtcFallbackTimeout = window.setTimeout(() => {
-          if (this._state.type === 'webrtc') {
+          Vue.set(this._state.webrtc, 'connected', false)
-            Vue.set(this._state, 'type', 'fallback')
-          }
         }, WEBRTC_FALLBACK_TIMEOUT_MS)
 
         webrtcCongestion = 0
@@ -176,7 +169,6 @@ export class NekoConnection extends EventEmitter<NekoConnectionEvents> {
       Vue.set(this._state.webrtc, 'video', video)
     }
 
-    Vue.set(this._state, 'type', 'fallback')
     Vue.set(this._state, 'status', 'connecting')
 
     // open all reconnecters
@@ -189,7 +181,8 @@ export class NekoConnection extends EventEmitter<NekoConnectionEvents> {
     if (this._open) {
       this._open = false
 
-      Vue.set(this._state, 'type', 'none')
+      Vue.set(this._state.websocket, 'connected', false)
+      Vue.set(this._state.webrtc, 'connected', false)
       Vue.set(this._state, 'status', 'disconnected')
 
       this.emit('close', error)
@@ -213,7 +206,8 @@ export class NekoConnection extends EventEmitter<NekoConnectionEvents> {
     // destroy all reconnecters
     Object.values(this._reconnector).forEach((r) => r.destroy())
 
-    Vue.set(this._state, 'type', 'none')
+    Vue.set(this._state.websocket, 'connected', false)
+    Vue.set(this._state.webrtc, 'connected', false)
     Vue.set(this._state, 'status', 'disconnected')
   }
 

src/component/main.vue

@@ -109,6 +109,7 @@
         token: undefined,
         status: 'disconnected',
         websocket: {
+          connected: false,
           config: {
             max_reconnects: 15,
             timeout_ms: 5000,
@@ -116,6 +117,7 @@
           },
         },
         webrtc: {
+          connected: false,
           config: {
             max_reconnects: 15,
             timeout_ms: 10000,
@@ -177,7 +179,11 @@
     }
 
     public get screencast() {
-      return this.state.connection.type == 'fallback' && this.state.connection.screencast
+      return (
+        this.state.connection.screencast &&
+        (!this.state.connection.webrtc.connected ||
+          (this.state.connection.webrtc.connected && !this.state.video.playable))
+      )
     }
 
     /////////////////////////////
@@ -486,6 +492,17 @@
       this.events.emit('connection.status', status)
     }
 
+    @Watch('screencast')
+    onScreencastChange(value: boolean) {
+      if (value) {
+        Vue.set(this.state.connection, 'type', 'fallback')
+      } else if (this.state.connection.webrtc.connected) {
+        Vue.set(this.state.connection, 'type', 'webrtc')
+      } else {
+        Vue.set(this.state.connection, 'type', 'none')
+      }
+    }
+
     clear() {
       // destroy video
       if (this._video) {

src/component/types/state.ts

@@ -26,10 +26,12 @@ export interface Connection {
 }
 
 export interface WebSocket {
+  connected: boolean
   config: ReconnectorConfig
 }
 
 export interface WebRTC {
+  connected: boolean
   config: ReconnectorConfig
   stats: WebRTCStats | null
   video: string | null