fullscreen.

src/app.vue

@@ -83,9 +83,9 @@
             </select>
           </td>
         </tr>
-        <tr>
+        <tr class="ok">
-          <th>screen.is_fullscreen</th>
+          <th>screen.fullscreen</th>
-          <td>{{ neko.state.screen.is_fullscreen }}</td>
+          <td><input type="checkbox" v-model="neko.state.screen.fullscreen" /></td>
         </tr>
         <tr class="ok">
           <th>member.id</th>

src/components/canvas.vue

@@ -105,7 +105,7 @@
           rate: 30,
         },
         configurations: [],
-        is_fullscreen: false,
+        fullscreen: false,
       },
       member: {
         id: null,
@@ -151,6 +151,15 @@
       this.onResize()
     }
 
+    @Watch('state.screen.fullscreen')
+    onScreenFullscreenChanged() {
+      if (document.fullscreenElement !== null) {
+        document.exitFullscreen()
+      } else {
+        this._component.requestFullscreen()
+      }
+    }
+
     public control = {
       request: () => {
         this.websocket.send('control/request')
@@ -200,6 +209,11 @@
         Vue.set(this.state.member, 'is_controlling', id != null && id === this.state.member.id)
       })
 
+      this._component.addEventListener('fullscreenchange', () => {
+        Vue.set(this.state.screen, 'fullscreen', document.fullscreenElement !== null)
+        this.onResize()
+      })
+
       // Video
       VideoRegister(this.video, this.state.video)
 

src/types/state.ts

@@ -47,7 +47,7 @@ export interface Scroll {
 export interface Screen {
   size: ScreenSize
   configurations: ScreenSize[]
-  is_fullscreen: boolean
+  fullscreen: boolean
 }
 
 export interface ScreenSize {