video volume state.

src/app.vue

@@ -33,11 +33,11 @@
         </tr>
         <tr class="ok">
           <th>video.playing</th>
-          <td>{{ neko.state.video.playing }}</td>
+          <td><input type="checkbox" v-model="neko.state.video.playing" /></td>
         </tr>
-        <tr>
+        <tr class="ok">
           <th>video.volume</th>
-          <td>{{ neko.state.video.volume }}</td>
+          <td><input type="range" min="0" max="1" v-model="neko.state.video.volume" step="0.01" /></td>
         </tr>
         <tr class="ok">
           <th>control.scroll.inverse</th>
@@ -133,8 +133,8 @@
         <button v-if="!is_controlling" @click="neko.control.request()">request control</button>
         <button v-else @click="neko.control.release()">release control</button>
 
-        <button @click="neko.video.pause()">pause stream</button>
-        <button @click="neko.video.play()">play stream</button><br />
+        <button v-if="neko.state.video.playing" @click="neko.state.video.playing = false">pause stream</button>
+        <button v-else @click="neko.state.video.playing = true">play stream</button><br />
       </template>
 
       <div ref="container" style="width: 1280px; height: 720px; border: 2px solid red">

src/components/canvas.vue

@@ -71,7 +71,7 @@
   export default class extends Vue {
     @Ref('component') readonly _component!: HTMLElement
     @Ref('container') readonly _container!: HTMLElement
-    @Ref('video') public readonly video!: HTMLVideoElement
+    @Ref('video') readonly video!: HTMLVideoElement
 
     private websocket = new NekoWebSocket()
     private webrtc = new NekoWebRTC()
@@ -126,6 +126,26 @@
       return this.state.connection.websocket == 'connected' && this.state.connection.webrtc == 'connected'
     }
 
+    @Watch('state.video.playing')
+    onVideoPlayingChanged(play: boolean) {
+      if (this.video.paused && play) {
+        this.video.play()
+      }
+
+      if (!this.video.paused && !play) {
+        this.video.pause()
+      }
+    }
+
+    @Watch('state.video.volume')
+    onVideoVolumeChanged(value: number) {
+      if (value < 0 || value > 1) {
+        throw new Error('Out of range. Value must be between 0 and 1.')
+      }
+
+      this.video.volume = value
+    }
+
     @Watch('state.screen.size')
     onScreenSizeChanged() {
       this.onResize()

src/internal/video.ts

@@ -20,6 +20,10 @@ export function register(el: HTMLVideoElement, state: Video) {
     Vue.set(state, 'playing', false)
   })
   el.addEventListener('volumechange', (value) => {
-    Vue.set(state, 'volume', value)
+    Vue.set(state, 'volume', el.volume)
   })
+
+  // Initial state
+  Vue.set(state, 'volume', el.volume)
+  Vue.set(state, 'playing', !el.paused)
 }