Archived
2
0

add Broadcast GUI

This commit is contained in:
m1k1o 2020-09-27 01:13:34 +02:00
parent ea80f07bcd
commit f6bc7350a8
6 changed files with 117 additions and 0 deletions

View File

@ -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()

View File

@ -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 = {

View File

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

View File

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

View File

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

View File

@ -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)
},
},
)