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
101
package.json
101
package.json
@ -1,50 +1,51 @@
|
|||||||
{
|
{
|
||||||
"name": "@demodesk/neko",
|
"name": "@demodesk/neko",
|
||||||
"version": "0.1.1",
|
"version": "0.1.1",
|
||||||
"description": "Client as reusable Vue.js component for neko streaming server.",
|
"description": "Client as reusable Vue.js component for neko streaming server.",
|
||||||
"main": "dist/neko.umd.js",
|
"main": "dist/neko.umd.js",
|
||||||
"module": "dist/neko.common.js",
|
"module": "dist/neko.common.js",
|
||||||
"unpkg": "dist/neko.min.js",
|
"unpkg": "dist/neko.min.js",
|
||||||
"browser": {
|
"browser": {
|
||||||
"./sfc": "src/components/canvas.vue"
|
"./sfc": "src/component/main.vue"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"serve": "vue-cli-service serve --mode development",
|
"serve": "vue-cli-service serve --mode development",
|
||||||
"lint": "vue-cli-service lint",
|
"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",
|
"dependencies": {
|
||||||
"resize-observer-polyfill": "^1.5.1",
|
"eventemitter3": "^4.0.7",
|
||||||
"typed-vuex": "^0.1.21",
|
"resize-observer-polyfill": "^1.5.1",
|
||||||
"vue": "^2.6.12",
|
"typed-vuex": "^0.1.21",
|
||||||
"vue-class-component": "^7.2.6",
|
"vue": "^2.6.12",
|
||||||
"vue-context": "^6.0.0",
|
"vue-class-component": "^7.2.6",
|
||||||
"vue-property-decorator": "^9.0.2"
|
"vue-context": "^6.0.0",
|
||||||
},
|
"vue-property-decorator": "^9.0.2"
|
||||||
"devDependencies": {
|
},
|
||||||
"@types/node": "^14.14.7",
|
"devDependencies": {
|
||||||
"@types/vue": "^2.0.0",
|
"@types/node": "^14.14.7",
|
||||||
"@typescript-eslint/eslint-plugin": "^4.7.0",
|
"@types/vue": "^2.0.0",
|
||||||
"@typescript-eslint/parser": "^4.7.0",
|
"@typescript-eslint/eslint-plugin": "^4.7.0",
|
||||||
"@vue/cli-plugin-babel": "^4.5.6",
|
"@typescript-eslint/parser": "^4.7.0",
|
||||||
"@vue/cli-plugin-eslint": "^4.5.6",
|
"@vue/cli-plugin-babel": "^4.5.6",
|
||||||
"@vue/cli-plugin-typescript": "^4.5.8",
|
"@vue/cli-plugin-eslint": "^4.5.6",
|
||||||
"@vue/cli-service": "^4.5.6",
|
"@vue/cli-plugin-typescript": "^4.5.8",
|
||||||
"@vue/eslint-config-prettier": "^6.0.0",
|
"@vue/cli-service": "^4.5.6",
|
||||||
"@vue/eslint-config-typescript": "^7.0.0",
|
"@vue/eslint-config-prettier": "^6.0.0",
|
||||||
"eslint": "^7.13.0",
|
"@vue/eslint-config-typescript": "^7.0.0",
|
||||||
"eslint-plugin-prettier": "^3.1.4",
|
"eslint": "^7.13.0",
|
||||||
"eslint-plugin-vue": "^7.1.0",
|
"eslint-plugin-prettier": "^3.1.4",
|
||||||
"node-sass": "^5.0.0",
|
"eslint-plugin-vue": "^7.1.0",
|
||||||
"prettier": "^2.1.2",
|
"node-sass": "^5.0.0",
|
||||||
"sass-loader": "^10.0.5",
|
"prettier": "^2.1.2",
|
||||||
"ts-node": "^9.0.0",
|
"sass-loader": "^10.0.5",
|
||||||
"typescript": "^4.0.5",
|
"ts-node": "^9.0.0",
|
||||||
"vue-template-compiler": "^2.6.12"
|
"typescript": "^4.0.5",
|
||||||
},
|
"vue-template-compiler": "^2.6.12"
|
||||||
"browserslist": [
|
},
|
||||||
"> 1%",
|
"browserslist": [
|
||||||
"last 2 versions"
|
"> 1%",
|
||||||
]
|
"last 2 versions"
|
||||||
}
|
]
|
||||||
|
}
|
||||||
|
|||||||
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 Vue from 'vue'
|
||||||
import { Video } from '~/types/state'
|
import { Video } from '../types/state'
|
||||||
|
|
||||||
export function register(el: HTMLVideoElement, state: Video) {
|
export function register(el: HTMLVideoElement, state: Video) {
|
||||||
el.addEventListener('canplaythrough', () => {
|
el.addEventListener('canplaythrough', () => {
|
||||||
@ -44,12 +44,12 @@
|
|||||||
import ResizeObserver from 'resize-observer-polyfill'
|
import ResizeObserver from 'resize-observer-polyfill'
|
||||||
import EventEmitter from 'eventemitter3'
|
import EventEmitter from 'eventemitter3'
|
||||||
|
|
||||||
import { NekoWebSocket } from '~/internal/websocket'
|
import { NekoWebSocket } from './internal/websocket'
|
||||||
import { NekoWebRTC } from '~/internal/webrtc'
|
import { NekoWebRTC } from './internal/webrtc'
|
||||||
import { NekoMessages } from '~/internal/messages'
|
import { NekoMessages } from './internal/messages'
|
||||||
import { register as VideoRegister } from '~/internal/video'
|
import { register as VideoRegister } from './internal/video'
|
||||||
|
|
||||||
import NekoState from '~/types/state'
|
import NekoState from './types/state'
|
||||||
import Overlay from './overlay.vue'
|
import Overlay from './overlay.vue'
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@ -28,8 +28,8 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Vue, Component, Ref, Prop } from 'vue-property-decorator'
|
import { Vue, Component, Ref, Prop } from 'vue-property-decorator'
|
||||||
|
|
||||||
import GuacamoleKeyboard from '~/utils/guacamole-keyboard.ts'
|
import GuacamoleKeyboard from './utils/guacamole-keyboard'
|
||||||
import { NekoWebRTC } from '~/internal/webrtc'
|
import { NekoWebRTC } from './internal/webrtc'
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
name: 'neko-overlay',
|
name: 'neko-overlay',
|
||||||
File diff suppressed because it is too large
Load Diff
@ -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