mirror of
https://github.com/m1k1o/neko.git
synced 2024-07-24 14:40:50 +12:00
split component & page.
This commit is contained in:
Miroslav Šedivý
parent
f796eb236b
commit
3cf85fed8e
@ -6,12 +6,13 @@
|
||||
"module": "dist/neko.common.js",
|
||||
"unpkg": "dist/neko.min.js",
|
||||
"browser": {
|
||||
"./sfc": "src/components/canvas.vue"
|
||||
"./sfc": "src/component/main.vue"
|
||||
},
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve --mode development",
|
||||
"lint": "vue-cli-service lint",
|
||||
"build": "vue-cli-service build --target lib --name neko ./src/components/canvas.vue"
|
||||
"build": "vue-cli-service build --target lib --name neko ./src/component/main.vue",
|
||||
"build:page": "vue-cli-service build"
|
||||
},
|
||||
"dependencies": {
|
||||
"eventemitter3": "^4.0.7",
|
||||
|
||||
315
src/app.vue
315
src/app.vue
@ -1,315 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="float: right; max-width: 500px">
|
||||
<h3>State</h3>
|
||||
<table class="states" v-if="loaded">
|
||||
<tr class="ok">
|
||||
<th>connection.websocket</th>
|
||||
<td>{{ neko.state.connection.websocket }}</td>
|
||||
</tr>
|
||||
<tr class="ok">
|
||||
<th>connection.webrtc</th>
|
||||
<td>{{ neko.state.connection.webrtc }}</td>
|
||||
</tr>
|
||||
<tr class="ok">
|
||||
<th>connection.type</th>
|
||||
<td>{{ neko.state.connection.type }}</td>
|
||||
</tr>
|
||||
<tr class="ok">
|
||||
<th>connection.can_watch</th>
|
||||
<td>{{ neko.state.connection.can_watch }}</td>
|
||||
</tr>
|
||||
<tr class="ok">
|
||||
<th>connection.can_control</th>
|
||||
<td>{{ neko.state.connection.can_control }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>connection.clipboard_access</th>
|
||||
<td>{{ neko.state.connection.clipboard_access }}</td>
|
||||
</tr>
|
||||
<tr class="ok">
|
||||
<th>video.playable</th>
|
||||
<td>{{ neko.state.video.playable }}</td>
|
||||
</tr>
|
||||
<tr class="ok">
|
||||
<th rowspan="2">video.playing</th>
|
||||
<td>{{ neko.state.video.playing }}</td>
|
||||
</tr>
|
||||
<tr class="ok">
|
||||
<td>
|
||||
<button v-if="!neko.state.video.playing" @click="neko.play()">play</button>
|
||||
<button v-else @click="neko.pause()">pause</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="ok">
|
||||
<th rowspan="2">video.volume</th>
|
||||
<td>{{ neko.state.video.volume }}</td>
|
||||
</tr>
|
||||
<tr class="ok">
|
||||
<td>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
:value="neko.state.video.volume"
|
||||
@input="neko.setVolume(Number($event.target.value))"
|
||||
step="0.01"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="ok">
|
||||
<th rowspan="2">video.fullscreen</th>
|
||||
<td>{{ neko.state.video.fullscreen }}</td>
|
||||
</tr>
|
||||
<tr class="ok">
|
||||
<td>
|
||||
<button v-if="!neko.state.video.fullscreen" @click="neko.requestFullscreen()">request</button>
|
||||
<button v-else @click="neko.exitFullscreen()">exit</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="ok">
|
||||
<th rowspan="2">control.scroll.inverse</th>
|
||||
<td>{{ neko.state.control.scroll.inverse }}</td>
|
||||
</tr>
|
||||
<tr class="ok">
|
||||
<td>
|
||||
<button @click="neko.setScrollInverse(!neko.state.control.scroll.inverse)">toggle</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="ok">
|
||||
<th rowspan="2">control.scroll.sensitivity</th>
|
||||
<td>{{ neko.state.control.scroll.sensitivity }}</td>
|
||||
</tr>
|
||||
<tr class="ok">
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
:value="neko.state.control.scroll.sensitivity"
|
||||
@input="neko.setScrollSensitivity(parseInt($event.target.value))"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>control.clipboard.data</th>
|
||||
<td>{{ neko.state.control.clipboard.data }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>control.host</th>
|
||||
<td>{{ neko.state.control.host }}</td>
|
||||
</tr>
|
||||
<tr class="ok">
|
||||
<th>screen.size.width</th>
|
||||
<td>{{ neko.state.screen.size.width }}</td>
|
||||
</tr>
|
||||
<tr class="ok">
|
||||
<th>screen.size.height</th>
|
||||
<td>{{ neko.state.screen.size.height }}</td>
|
||||
</tr>
|
||||
<tr class="ok">
|
||||
<th>screen.size.rate</th>
|
||||
<td>{{ neko.state.screen.size.rate }}</td>
|
||||
</tr>
|
||||
<tr class="ok">
|
||||
<th rowspan="2">screen.configurations</th>
|
||||
<td>Total {{ neko.state.screen.configurations.length }} configurations.</td>
|
||||
</tr>
|
||||
<tr class="ok">
|
||||
<td>
|
||||
<select
|
||||
:value="Object.values(neko.state.screen.size).join()"
|
||||
@input="
|
||||
a = String($event.target.value).split(',')
|
||||
neko.setScreenSize(parseInt(a[0]), parseInt(a[1]), parseInt(a[2]))
|
||||
"
|
||||
>
|
||||
<option
|
||||
v-for="{ width, height, rate } in neko.state.screen.configurations"
|
||||
:key="width + height + rate"
|
||||
:value="[width, height, rate].join()"
|
||||
>
|
||||
{{ width }}x{{ height }}@{{ rate }}
|
||||
</option>
|
||||
</select>
|
||||
<button @click="screenChangingToggle">screenChangingToggle</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="ok">
|
||||
<th>member.id</th>
|
||||
<td>{{ neko.state.member.id }}</td>
|
||||
</tr>
|
||||
<tr class="ok">
|
||||
<th>member.name</th>
|
||||
<td>{{ neko.state.member.name }}</td>
|
||||
</tr>
|
||||
<tr class="ok">
|
||||
<th>member.is_admin</th>
|
||||
<td>{{ neko.state.member.is_admin }}</td>
|
||||
</tr>
|
||||
<tr class="ok">
|
||||
<th>member.is_watching</th>
|
||||
<td>{{ neko.state.member.is_watching }}</td>
|
||||
</tr>
|
||||
<tr class="ok">
|
||||
<th rowspan="2">member.is_controlling</th>
|
||||
<td>{{ neko.state.member.is_controlling }}</td>
|
||||
</tr>
|
||||
<tr class="ok">
|
||||
<td>
|
||||
<button v-if="!neko.state.member.is_controlling" @click="neko.requestControl()">request control</button>
|
||||
<button v-else @click="neko.releaseControl()">release control</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>member.can_watch</th>
|
||||
<td>{{ neko.state.member.can_watch }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>member.can_control</th>
|
||||
<td>{{ neko.state.member.can_control }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>member.clipboard_access</th>
|
||||
<td>{{ neko.state.member.clipboard_access }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>members</th>
|
||||
<td>{{ neko.state.members }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<div v-if="loaded && !neko.connected">
|
||||
<input type="text" placeholder="URL" v-model="url" />
|
||||
<input type="text" placeholder="Member ID" v-model="member_id" />
|
||||
<input type="text" placeholder="Member Secret" v-model="member_secret" />
|
||||
<button @click="connect()">Connect</button>
|
||||
</div>
|
||||
<button v-if="loaded && neko.connected" @click="disconnect()">Disonnect</button>
|
||||
|
||||
<template v-if="loaded && neko.connected">
|
||||
<button v-if="!is_controlling" @click="neko.requestControl()">request control</button>
|
||||
<button v-else @click="neko.releaseControl()">release control</button>
|
||||
</template>
|
||||
|
||||
<div ref="container" style="width: 1280px; height: 720px; border: 2px solid red">
|
||||
<neko-canvas ref="neko" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.states {
|
||||
td,
|
||||
th {
|
||||
border: 1px solid black;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ok {
|
||||
background: #97f197;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component, Ref, Watch } from 'vue-property-decorator'
|
||||
|
||||
import Neko from '~/components/canvas.vue'
|
||||
|
||||
@Component({
|
||||
name: 'neko',
|
||||
components: {
|
||||
'neko-canvas': Neko,
|
||||
},
|
||||
})
|
||||
export default class extends Vue {
|
||||
@Ref('container') readonly container!: HTMLElement
|
||||
@Ref('neko') readonly neko!: Neko
|
||||
loaded: boolean = false
|
||||
|
||||
get is_controlling() {
|
||||
return this.neko.state.member.is_controlling
|
||||
}
|
||||
|
||||
url: string = 'ws://192.168.1.20:3000/ws'
|
||||
member_id: string = 'admin'
|
||||
member_secret: string = 'admin'
|
||||
|
||||
connect() {
|
||||
this.neko.connect(this.url, this.member_id, this.member_secret)
|
||||
}
|
||||
|
||||
disconnect() {
|
||||
this.neko.disconnect()
|
||||
}
|
||||
|
||||
// fast sceen changing test
|
||||
screen_interval = null
|
||||
screenChangingToggle() {
|
||||
if (this.screen_interval === null) {
|
||||
let sizes = this.neko.state.screen.configurations
|
||||
let len = sizes.length
|
||||
|
||||
//@ts-ignore
|
||||
this.screen_interval = setInterval(() => {
|
||||
let { width, height, rate } = sizes[Math.floor(Math.random() * len)]
|
||||
|
||||
this.neko.setScreenSize(width, height, rate)
|
||||
}, 10)
|
||||
} else {
|
||||
//@ts-ignore
|
||||
clearInterval(this.screen_interval)
|
||||
this.screen_interval = null
|
||||
}
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.loaded = true
|
||||
|
||||
this.neko.events.on('system.websocket', (status) => {
|
||||
console.log('system.websocket', status)
|
||||
})
|
||||
this.neko.events.on('system.webrtc', (status) => {
|
||||
console.log('system.webrtc', status)
|
||||
})
|
||||
this.neko.events.on('system.connect', () => {
|
||||
console.log('system.connect')
|
||||
})
|
||||
this.neko.events.on('system.disconnect', (message) => {
|
||||
console.log('system.disconnect', message)
|
||||
})
|
||||
this.neko.events.on('member.list', (members) => {
|
||||
console.log('member.list', members)
|
||||
})
|
||||
this.neko.events.on('member.connected', (id) => {
|
||||
console.log('member.connected', id)
|
||||
})
|
||||
this.neko.events.on('member.disconnected', (id) => {
|
||||
console.log('member.disconnected', id)
|
||||
})
|
||||
this.neko.events.on('control.host', (id) => {
|
||||
console.log('control.host', id)
|
||||
})
|
||||
this.neko.events.on('control.request', (id) => {
|
||||
console.log('control.request', id)
|
||||
})
|
||||
this.neko.events.on('control.requesting', (id) => {
|
||||
console.log('control.requesting', id)
|
||||
})
|
||||
this.neko.events.on('clipboard.update', (text) => {
|
||||
console.log('clipboard.update', text)
|
||||
})
|
||||
this.neko.events.on('screen.size', (id) => {
|
||||
console.log('screen.size', id)
|
||||
})
|
||||
this.neko.events.on('broadcast.status', (payload) => {
|
||||
console.log('broadcast.status', payload)
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
0
src/component/internal/messages.ts
Normal file
0
src/component/internal/messages.ts
Normal file
@ -1,5 +1,5 @@
|
||||
import Vue from 'vue'
|
||||
import { Video } from '~/types/state'
|
||||
import { Video } from '../types/state'
|
||||
|
||||
export function register(el: HTMLVideoElement, state: Video) {
|
||||
el.addEventListener('canplaythrough', () => {
|
||||
@ -44,12 +44,12 @@
|
||||
import ResizeObserver from 'resize-observer-polyfill'
|
||||
import EventEmitter from 'eventemitter3'
|
||||
|
||||
import { NekoWebSocket } from '~/internal/websocket'
|
||||
import { NekoWebRTC } from '~/internal/webrtc'
|
||||
import { NekoMessages } from '~/internal/messages'
|
||||
import { register as VideoRegister } from '~/internal/video'
|
||||
import { NekoWebSocket } from './internal/websocket'
|
||||
import { NekoWebRTC } from './internal/webrtc'
|
||||
import { NekoMessages } from './internal/messages'
|
||||
import { register as VideoRegister } from './internal/video'
|
||||
|
||||
import NekoState from '~/types/state'
|
||||
import NekoState from './types/state'
|
||||
import Overlay from './overlay.vue'
|
||||
|
||||
@Component({
|
||||
@ -28,8 +28,8 @@
|
||||
<script lang="ts">
|
||||
import { Vue, Component, Ref, Prop } from 'vue-property-decorator'
|
||||
|
||||
import GuacamoleKeyboard from '~/utils/guacamole-keyboard.ts'
|
||||
import { NekoWebRTC } from '~/internal/webrtc'
|
||||
import GuacamoleKeyboard from './utils/guacamole-keyboard'
|
||||
import { NekoWebRTC } from './internal/webrtc'
|
||||
|
||||
@Component({
|
||||
name: 'neko-overlay',
|
||||
@ -1,205 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import { Member, ScreenConfigurations } from '../types/structs'
|
||||
import { EVENT } from '../types/events'
|
||||
import {
|
||||
DisconnectPayload,
|
||||
MemberListPayload,
|
||||
MemberDisconnectPayload,
|
||||
MemberPayload,
|
||||
ControlPayload,
|
||||
ControlTargetPayload,
|
||||
ControlClipboardPayload,
|
||||
ScreenConfigurationsPayload,
|
||||
ScreenResolutionPayload,
|
||||
BroadcastStatusPayload,
|
||||
AdminPayload,
|
||||
AdminTargetPayload,
|
||||
} from '../types/messages'
|
||||
|
||||
import EventEmitter from 'eventemitter3'
|
||||
import { NekoWebSocket } from './websocket'
|
||||
import NekoState from '~/types/state'
|
||||
|
||||
export interface NekoEvents {
|
||||
['system.websocket']: (state: 'connected' | 'connecting' | 'disconnected') => void
|
||||
['system.webrtc']: (state: 'connected' | 'connecting' | 'disconnected') => void
|
||||
['system.connect']: () => void
|
||||
['system.disconnect']: (message: string) => void
|
||||
['control.host']: (id: string | null) => void
|
||||
['member.list']: (members: Member[]) => void
|
||||
['member.connected']: (id: string) => void
|
||||
['member.disconnected']: (id: string) => void
|
||||
['control.request']: (id: string) => void
|
||||
['control.requesting']: (id: string) => void
|
||||
['clipboard.update']: (text: string) => void
|
||||
['screen.size']: (id: string) => void
|
||||
['broadcast.status']: (url: string, isActive: boolean) => void
|
||||
}
|
||||
|
||||
export class NekoMessages extends EventEmitter<NekoEvents> {
|
||||
state: NekoState
|
||||
|
||||
constructor(websocket: NekoWebSocket, state: NekoState) {
|
||||
super()
|
||||
|
||||
this.state = state
|
||||
websocket.on('message', async (event: string, payload: any) => {
|
||||
// @ts-ignore
|
||||
if (typeof this[event] === 'function') {
|
||||
// @ts-ignore
|
||||
this[event](payload)
|
||||
} else {
|
||||
console.log(`unhandled websocket event '${event}':`, payload)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/////////////////////////////
|
||||
// System Events
|
||||
/////////////////////////////
|
||||
protected [EVENT.SYSTEM.DISCONNECT]({ message }: DisconnectPayload) {
|
||||
console.log('EVENT.SYSTEM.DISCONNECT')
|
||||
this.emit('system.disconnect', message)
|
||||
}
|
||||
|
||||
/////////////////////////////
|
||||
// Member Events
|
||||
/////////////////////////////
|
||||
protected [EVENT.MEMBER.LIST]({ members }: MemberListPayload) {
|
||||
console.log('EVENT.MEMBER.LIST')
|
||||
this.emit('member.list', members)
|
||||
//user.setMembers(members)
|
||||
}
|
||||
|
||||
protected [EVENT.MEMBER.CONNECTED](member: MemberPayload) {
|
||||
console.log('EVENT.MEMBER.CONNECTED')
|
||||
this.emit('member.connected', member.id)
|
||||
//user.addMember(member)
|
||||
|
||||
if (member.id === this.state.member.id) {
|
||||
Vue.set(this.state.member, 'name', member.name)
|
||||
Vue.set(this.state.member, 'is_admin', member.admin)
|
||||
}
|
||||
}
|
||||
|
||||
protected [EVENT.MEMBER.DISCONNECTED]({ id }: MemberDisconnectPayload) {
|
||||
console.log('EVENT.MEMBER.DISCONNECTED')
|
||||
this.emit('member.disconnected', id)
|
||||
//user.delMember(id)
|
||||
}
|
||||
|
||||
/////////////////////////////
|
||||
// Control Events
|
||||
/////////////////////////////
|
||||
protected [EVENT.CONTROL.LOCKED]({ id }: ControlPayload) {
|
||||
console.log('EVENT.CONTROL.LOCKED')
|
||||
this.emit('control.host', id)
|
||||
//remote.setHost(id)
|
||||
//remote.changeKeyboard()
|
||||
}
|
||||
|
||||
protected [EVENT.CONTROL.RELEASE]({ id }: ControlPayload) {
|
||||
console.log('EVENT.CONTROL.RELEASE')
|
||||
this.emit('control.host', null)
|
||||
//remote.reset()
|
||||
}
|
||||
|
||||
protected [EVENT.CONTROL.REQUEST]({ id }: ControlPayload) {
|
||||
console.log('EVENT.CONTROL.REQUEST')
|
||||
this.emit('control.request', id)
|
||||
}
|
||||
|
||||
protected [EVENT.CONTROL.REQUESTING]({ id }: ControlPayload) {
|
||||
console.log('EVENT.CONTROL.REQUESTING')
|
||||
this.emit('control.requesting', id)
|
||||
}
|
||||
|
||||
protected [EVENT.CONTROL.GIVE]({ id, target }: ControlTargetPayload) {
|
||||
console.log('EVENT.CONTROL.GIVE')
|
||||
this.emit('control.host', target)
|
||||
//remote.setHost(target)
|
||||
//remote.changeKeyboard()
|
||||
}
|
||||
|
||||
protected [EVENT.CONTROL.CLIPBOARD]({ text }: ControlClipboardPayload) {
|
||||
console.log('EVENT.CONTROL.CLIPBOARD')
|
||||
this.emit('clipboard.update', text)
|
||||
//remote.setClipboard(text)
|
||||
}
|
||||
|
||||
/////////////////////////////
|
||||
// Screen Events
|
||||
/////////////////////////////
|
||||
protected [EVENT.SCREEN.CONFIGURATIONS]({ configurations }: ScreenConfigurationsPayload) {
|
||||
const data = []
|
||||
for (const i of Object.keys(configurations)) {
|
||||
const { width, height, rates } = configurations[i]
|
||||
if (width >= 600 && height >= 300) {
|
||||
for (const j of Object.keys(rates)) {
|
||||
const rate = rates[j]
|
||||
if (rate === 30 || rate === 60) {
|
||||
data.push({
|
||||
width,
|
||||
height,
|
||||
rate,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const conf = data.sort((a, b) => {
|
||||
if (b.width === a.width && b.height == a.height) {
|
||||
return b.rate - a.rate
|
||||
} else if (b.width === a.width) {
|
||||
return b.height - a.height
|
||||
}
|
||||
return b.width - a.width
|
||||
})
|
||||
|
||||
Vue.set(this.state.screen, 'configurations', conf)
|
||||
}
|
||||
|
||||
protected [EVENT.SCREEN.RESOLUTION]({ id, width, height, rate }: ScreenResolutionPayload) {
|
||||
Vue.set(this.state.screen, 'size', { width, height, rate })
|
||||
if (id) this.emit('screen.size', id)
|
||||
}
|
||||
|
||||
/////////////////////////////
|
||||
// Broadcast Events
|
||||
/////////////////////////////
|
||||
protected [EVENT.BROADCAST.STATUS](payload: BroadcastStatusPayload) {
|
||||
console.log('EVENT.BROADCAST.STATUS')
|
||||
this.emit('broadcast.status', payload.url, payload.isActive)
|
||||
//settings.broadcastStatus(payload)
|
||||
}
|
||||
|
||||
/////////////////////////////
|
||||
// Admin Events
|
||||
/////////////////////////////
|
||||
protected [EVENT.ADMIN.CONTROL]({ id, target }: AdminTargetPayload) {
|
||||
if (!target) return
|
||||
|
||||
console.log('EVENT.ADMIN.CONTROL')
|
||||
this.emit('control.host', id)
|
||||
//remote.setHost(id)
|
||||
//remote.changeKeyboard()
|
||||
}
|
||||
|
||||
protected [EVENT.ADMIN.RELEASE]({ id, target }: AdminTargetPayload) {
|
||||
if (!target) return
|
||||
|
||||
console.log('EVENT.ADMIN.RELEASE')
|
||||
this.emit('control.host', null)
|
||||
//remote.reset()
|
||||
}
|
||||
|
||||
protected [EVENT.ADMIN.GIVE]({ id, target }: AdminTargetPayload) {
|
||||
if (!target) return
|
||||
|
||||
console.log('EVENT.ADMIN.GIVE')
|
||||
this.emit('control.host', target)
|
||||
//remote.setHost(target)
|
||||
//remote.changeKeyboard()
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user