Screen sync add custom multiplier and rate settings (#32)

* screen sync add custom multiplier and rate settings.

* fix rate.

* add to page.

src/component/main.vue

@@ -202,7 +202,11 @@
           rate: 30,
         },
         configurations: [],
-        sync: false,
+        sync: {
+          enabled: false,
+          multiplier: 0,
+          rate: 30,
+        },
       },
       session_id: null,
       sessions: {},
@@ -453,6 +457,12 @@
       }
     }
 
+    public setScreenSync(enabled: boolean = true, multiplier: number = 0, rate: number = 60) {
+      Vue.set(this.state.screen.sync, 'enabled', enabled)
+      Vue.set(this.state.screen.sync, 'multiplier', multiplier)
+      Vue.set(this.state.screen.sync, 'rate', rate)
+    }
+
     public setCursorDrawFunction(fn?: CursorDrawFunction) {
       Vue.set(this, 'cursorDrawFunction', fn)
     }
@@ -599,9 +609,9 @@
       this.connection.websocket.send(EVENT.KEYBOARD_MODIFIERS, modifiers)
     }
 
-    @Watch('state.screen.sync')
+    @Watch('state.screen.sync.enabled')
     onScreenSyncChange() {
-      if (this.state.screen.sync) {
+      if (this.state.screen.sync.enabled) {
         this.syncScreenSize()
         window.addEventListener('resize', this.syncScreenSize)
       } else {
@@ -615,12 +625,13 @@
         window.clearTimeout(this.syncScreenSizeTimeout)
       }
       this.syncScreenSizeTimeout = window.setTimeout(() => {
+        const multiplier = this.state.screen.sync.multiplier || window.devicePixelRatio
         this.syncScreenSizeTimeout = 0
         const { offsetWidth, offsetHeight } = this._component
         this.setScreenSize(
-          Math.round(offsetWidth * window.devicePixelRatio),
+          Math.round(offsetWidth * multiplier),
-          Math.round(offsetHeight * window.devicePixelRatio),
+          Math.round(offsetHeight * multiplier),
-          60, // TODO: make it configurable?
+          this.state.screen.sync.rate,
         )
       }, SCREEN_SYNC_THROTTLE)
     }

src/component/types/state.ts

@@ -91,7 +91,7 @@ export interface Keyboard {
 export interface Screen {
   size: ScreenSize
   configurations: ScreenSize[]
-  sync: boolean
+  sync: ScreenSync
 }
 
 export interface ScreenSize {
@@ -100,6 +100,12 @@ export interface ScreenSize {
   rate: number
 }
 
+export interface ScreenSync {
+  enabled: boolean
+  multiplier: number
+  rate: number
+}
+
 /////////////////////////////
 // Session
 /////////////////////////////

src/page/components/events.vue

@@ -333,16 +333,48 @@
           </td>
         </tr>
         <tr>
-          <th class="middle">screen.sync</th>
+          <th class="middle">screen.sync.enabled</th>
           <td>
             <div class="space-between">
-              <span>{{ neko.state.screen.sync }}</span>
+              <span>{{ neko.state.screen.sync.enabled }}</span>
-              <button @click="neko.state.screen.sync = !neko.state.screen.sync">
+              <button @click="neko.state.screen.sync.enabled = !neko.state.screen.sync.enabled">
                 <i class="fas fa-toggle-on"></i>
               </button>
             </div>
           </td>
         </tr>
+        <tr>
+          <th rowspan="2">screen.sync.multiplier</th>
+          <td>{{ neko.state.screen.sync.multiplier || 'use device pixel ratio' }}</td>
+        </tr>
+        <tr>
+          <td>
+            <input
+              type="range"
+              min="0"
+              max="10"
+              :value="neko.state.screen.sync.multiplier"
+              @input="neko.state.screen.sync.multiplier = Number($event.target.value)"
+              step="0.1"
+            />
+          </td>
+        </tr>
+        <tr>
+          <th rowspan="2">screen.sync.rate</th>
+          <td>{{ neko.state.screen.sync.rate }}</td>
+        </tr>
+        <tr>
+          <td>
+            <input
+              type="range"
+              min="5"
+              max="60"
+              :value="neko.state.screen.sync.rate"
+              @input="neko.state.screen.sync.rate = Number($event.target.value)"
+              step="5"
+            />
+          </td>
+        </tr>
       </template>
       <tr v-else>
         <th>screen.configurations</th>