add websocket and webrtc to state.

src/app.vue

@@ -50,5 +50,11 @@
       this.container.style.width = this.width
       this.container.style.height = this.height
     }
+
+    mounted() {
+      this.neko.events.on('connected', () => {
+        console.log('connected...')
+      })
+    }
   }
 </script>

src/components/canvas.vue

@@ -1,9 +1,8 @@
 <template>
   <div ref="component" class="component">
-    <div ref="container" class="player-container">
+    <div ref="container" class="player-container" v-show="state.websocket == 'connected' && state.webrtc == 'connected'">
       <video ref="video" />
       <neko-overlay
-        v-if="websocket_state == 'connected' && webrtc_state == 'connected'"
         :webrtc="webrtc"
         :screenWidth="state.screen_size.width"
         :screenHeight="state.screen_size.height"
@@ -43,6 +42,7 @@
 <script lang="ts">
   import { Vue, Component, Ref, Watch, Prop } from 'vue-property-decorator'
   import ResizeObserver from 'resize-observer-polyfill'
+  import EventEmitter from 'eventemitter3'
 
   import { NekoWebSocket } from '~/internal/websocket'
   import { NekoWebRTC } from '~/internal/webrtc'
@@ -51,6 +51,12 @@
   import NekoState from '~/types/state'
   import Overlay from './overlay.vue'
 
+  export interface NekoEvents {
+    connecting: () => void
+    connected: () => void
+    disconnected: (error?: Error) => void
+  }
+
   @Component({
     name: 'neko-canvas',
     components: {
@@ -66,6 +72,7 @@
     private websocket = new NekoWebSocket()
     private webrtc = new NekoWebRTC()
     private messages = new NekoMessages()
+    public readonly events = new EventEmitter<NekoEvents>()
 
     private state = {
       id: null,
@@ -76,11 +83,10 @@
         rate: 30,
       },
       is_controlling: false,
+      websocket: 'disconnected',
+      webrtc: 'disconnected',
     } as NekoState
 
-    private websocket_state = 'disconnected'
-    private webrtc_state = 'disconnected'
-
     public control = {
       request: () => {
         this.websocket.send('control/request')
@@ -146,13 +152,13 @@
         }
       })
       this.websocket.on('connecting', () => {
-        this.websocket_state = 'connecting'
+        Vue.set(this.state, 'websocket', 'connecting')
       })
       this.websocket.on('connected', () => {
-        this.websocket_state = 'connected'
+        Vue.set(this.state, 'websocket', 'connected')
       })
       this.websocket.on('disconnected', () => {
-        this.websocket_state = 'disconnected'
+        Vue.set(this.state, 'websocket', 'disconnected')
         this.webrtc.disconnect()
       })
 
@@ -174,13 +180,14 @@
         this.video.play()
       })
       this.webrtc.on('connecting', () => {
-        this.webrtc_state = 'connecting'
+        Vue.set(this.state, 'webrtc', 'connecting')
       })
       this.webrtc.on('connected', () => {
-        this.webrtc_state = 'connected'
+        Vue.set(this.state, 'webrtc', 'connected')
+        this.events.emit('connected')
       })
       this.webrtc.on('disconnected', () => {
-        this.webrtc_state = 'disconnected'
+        Vue.set(this.state, 'webrtc', 'disconnected')
       })
     }
 

src/types/state.ts

@@ -8,4 +8,6 @@ export default interface State {
   id: string | null
   display_name: string | null
   screen_size: ScreenSize
+  websocket: 'connected' | 'connecting' | 'disconnected'
+  webrtc: 'connected' | 'connecting' | 'disconnected'
 }