iridium/neko
2
2
Fork 0
mirror of https://github.com/m1k1o/neko.git synced 2024-07-24 14:40:50 +12:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* screen sync add custom multiplier and rate settings.

* fix rate.

* add to page.
This commit is contained in:
Miroslav Šedivý 2023-04-28 19:39:11 +02:00 committed by GitHub
parent 551a68d613
commit 8df29744b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 59 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/component/main.vue
View File

@ -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(offsetHeight * window.devicePixelRatio),
60, // TODO: make it configurable?
Math.round(offsetWidth * multiplier),
Math.round(offsetHeight * multiplier),
this.state.screen.sync.rate,
)
}, SCREEN_SYNC_THROTTLE)
}

8
src/component/types/state.ts
View File

@ -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
/////////////////////////////

38
src/page/components/events.vue
View File

@ -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>
<button @click="neko.state.screen.sync = !neko.state.screen.sync">
<span>{{ neko.state.screen.sync.enabled }}</span>
<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>