add Broadcast GUI
This commit is contained in:
parent
ea80f07bcd
commit
f6bc7350a8
@ -48,6 +48,19 @@
|
||||
<span />
|
||||
</label>
|
||||
</li>
|
||||
<template v-if="admin">
|
||||
<li>
|
||||
<span>{{ $t('setting.broadcast_is_active') }}</span>
|
||||
<label class="switch">
|
||||
<input type="checkbox" v-model="broadcast_is_active" />
|
||||
<span />
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<span>{{ $t('setting.broadcast_url') }}</span>
|
||||
<input v-model="broadcast_url" :disabled="broadcast_is_active" class="input">
|
||||
</li>
|
||||
</template>
|
||||
<li v-if="connected">
|
||||
<button @click.stop.prevent="logout">{{ $t('logout') }}</button>
|
||||
</li>
|
||||
@ -220,6 +233,30 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
display: block;
|
||||
height: 30px;
|
||||
text-align: right;
|
||||
padding: 0 10px;
|
||||
margin-left: 10px;
|
||||
line-height: 30px;
|
||||
text-overflow: ellipsis;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
background-color: $background-tertiary;
|
||||
font-weight: lighter;
|
||||
user-select: auto;
|
||||
|
||||
&::selection {
|
||||
background: $text-normal;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -230,6 +267,12 @@
|
||||
|
||||
@Component({ name: 'neko-settings' })
|
||||
export default class extends Vue {
|
||||
private broadcast_url: string = '';
|
||||
|
||||
get admin() {
|
||||
return this.$accessor.user.admin
|
||||
}
|
||||
|
||||
get connected() {
|
||||
return this.$accessor.connected
|
||||
}
|
||||
@ -282,6 +325,27 @@
|
||||
return this.$accessor.settings.keyboard_layout
|
||||
}
|
||||
|
||||
get broadcast_is_active() {
|
||||
return this.$accessor.settings.broadcast_is_active
|
||||
}
|
||||
|
||||
set broadcast_is_active(value: boolean) {
|
||||
if (value) {
|
||||
this.$accessor.settings.broadcastCreate(this.broadcast_url)
|
||||
} else {
|
||||
this.$accessor.settings.broadcastDestroy()
|
||||
}
|
||||
}
|
||||
|
||||
get broadcast_url_remote() {
|
||||
return this.$accessor.settings.broadcast_url
|
||||
}
|
||||
|
||||
@Watch('broadcast_url_remote', { immediate: true })
|
||||
onBroadcastUrlChange() {
|
||||
this.broadcast_url = this.broadcast_url_remote
|
||||
}
|
||||
|
||||
set keyboard_layout(value: string) {
|
||||
this.$accessor.settings.setKeyboardLayout(value)
|
||||
this.$accessor.remote.changeKeyboard()
|
||||
|
@ -61,6 +61,8 @@ export const setting = {
|
||||
ignore_emotes: 'Ignore Emotes',
|
||||
chat_sound: 'Play Chat Sound',
|
||||
keyboard_layout: 'Change Keyboard Layout',
|
||||
broadcast_is_active: 'Broadcast Enabled',
|
||||
broadcast_url: 'RTMP url',
|
||||
}
|
||||
|
||||
export const connection = {
|
||||
|
@ -38,6 +38,11 @@ export const EVENT = {
|
||||
RESOLUTION: 'screen/resolution',
|
||||
SET: 'screen/set',
|
||||
},
|
||||
BROADCAST: {
|
||||
STATUS: "broadcast/status",
|
||||
CREATE: "broadcast/create",
|
||||
DESTROY: "broadcast/destroy",
|
||||
},
|
||||
ADMIN: {
|
||||
BAN: 'admin/ban',
|
||||
KICK: 'admin/kick',
|
||||
@ -60,6 +65,7 @@ export type WebSocketEvents =
|
||||
| SignalEvents
|
||||
| ChatEvents
|
||||
| ScreenEvents
|
||||
| BroadcastEvents
|
||||
| AdminEvents
|
||||
|
||||
export type ControlEvents =
|
||||
@ -76,6 +82,11 @@ export type SignalEvents = typeof EVENT.SIGNAL.ANSWER | typeof EVENT.SIGNAL.PROV
|
||||
export type ChatEvents = typeof EVENT.CHAT.MESSAGE | typeof EVENT.CHAT.EMOTE
|
||||
export type ScreenEvents = typeof EVENT.SCREEN.CONFIGURATIONS | typeof EVENT.SCREEN.RESOLUTION | typeof EVENT.SCREEN.SET
|
||||
|
||||
export type BroadcastEvents =
|
||||
| typeof EVENT.BROADCAST.STATUS
|
||||
| typeof EVENT.BROADCAST.CREATE
|
||||
| typeof EVENT.BROADCAST.DESTROY
|
||||
|
||||
export type AdminEvents =
|
||||
| typeof EVENT.ADMIN.BAN
|
||||
| typeof EVENT.ADMIN.KICK
|
||||
|
@ -326,6 +326,13 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
|
||||
})
|
||||
}
|
||||
|
||||
/////////////////////////////
|
||||
// Broadcast Events
|
||||
/////////////////////////////
|
||||
protected [EVENT.BROADCAST.STATUS](payload: BroadcastStatusPayload) {
|
||||
this.$accessor.settings.broadcastStatus(payload)
|
||||
}
|
||||
|
||||
/////////////////////////////
|
||||
// Admin Events
|
||||
/////////////////////////////
|
||||
|
@ -22,6 +22,7 @@ export type WebSocketMessages =
|
||||
| ScreenResolutionMessage
|
||||
| ScreenConfigurationsMessage
|
||||
| ChatMessage
|
||||
| BroadcastCreateMessage
|
||||
|
||||
export type WebSocketPayloads =
|
||||
| SignalProvidePayload
|
||||
@ -37,6 +38,7 @@ export type WebSocketPayloads =
|
||||
| ScreenResolutionPayload
|
||||
| ScreenConfigurationsPayload
|
||||
| AdminPayload
|
||||
| BroadcastStatusPayload
|
||||
|
||||
export interface WebSocketMessage {
|
||||
event: WebSocketEvents | string
|
||||
@ -177,6 +179,19 @@ export interface ScreenConfigurationsPayload {
|
||||
configurations: ScreenConfigurations
|
||||
}
|
||||
|
||||
/*
|
||||
BROADCAST PAYLOADS
|
||||
*/
|
||||
export interface BroadcastCreateMessage extends WebSocketMessage {
|
||||
event: typeof EVENT.BROADCAST.CREATE
|
||||
url: string
|
||||
}
|
||||
|
||||
export interface BroadcastStatusPayload extends WebSocketMessage {
|
||||
url: string
|
||||
isActive: boolean
|
||||
}
|
||||
|
||||
/*
|
||||
ADMIN PAYLOADS
|
||||
*/
|
||||
|
@ -1,5 +1,6 @@
|
||||
import { getterTree, mutationTree, actionTree } from 'typed-vuex'
|
||||
import { get, set } from '~/utils/localstorage'
|
||||
import { EVENT } from '~/neko/events'
|
||||
import { accessor } from '~/store'
|
||||
|
||||
export const namespaced = true
|
||||
@ -18,6 +19,9 @@ export const state = () => {
|
||||
keyboard_layout: get<string>('keyboard_layout', 'us'),
|
||||
|
||||
keyboard_layouts_list: {} as KeyboardLayouts,
|
||||
|
||||
broadcast_is_active: false,
|
||||
broadcast_url: "",
|
||||
}
|
||||
}
|
||||
|
||||
@ -57,6 +61,10 @@ export const mutations = mutationTree(state, {
|
||||
setKeyboardLayoutsList(state, value: KeyboardLayouts) {
|
||||
state.keyboard_layouts_list = value
|
||||
},
|
||||
setBroadcastStatus(state, { url, isActive }) {
|
||||
state.broadcast_url = url,
|
||||
state.broadcast_is_active = isActive
|
||||
},
|
||||
})
|
||||
|
||||
export const actions = actionTree(
|
||||
@ -71,5 +79,15 @@ export const actions = actionTree(
|
||||
})
|
||||
.catch(console.error)
|
||||
},
|
||||
|
||||
broadcastStatus({ getters }, { url, isActive }) {
|
||||
accessor.settings.setBroadcastStatus({ url, isActive })
|
||||
},
|
||||
broadcastCreate({ getters }, url: string) {
|
||||
$client.sendMessage(EVENT.BROADCAST.CREATE, { url })
|
||||
},
|
||||
broadcastDestroy({ getters }) {
|
||||
$client.sendMessage(EVENT.BROADCAST.DESTROY)
|
||||
},
|
||||
},
|
||||
)
|
||||
|
Reference in New Issue
Block a user