add Broadcast GUI
This commit is contained in:
parent
ea80f07bcd
commit
f6bc7350a8
@ -48,6 +48,19 @@
|
|||||||
<span />
|
<span />
|
||||||
</label>
|
</label>
|
||||||
</li>
|
</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">
|
<li v-if="connected">
|
||||||
<button @click.stop.prevent="logout">{{ $t('logout') }}</button>
|
<button @click.stop.prevent="logout">{{ $t('logout') }}</button>
|
||||||
</li>
|
</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' })
|
@Component({ name: 'neko-settings' })
|
||||||
export default class extends Vue {
|
export default class extends Vue {
|
||||||
|
private broadcast_url: string = '';
|
||||||
|
|
||||||
|
get admin() {
|
||||||
|
return this.$accessor.user.admin
|
||||||
|
}
|
||||||
|
|
||||||
get connected() {
|
get connected() {
|
||||||
return this.$accessor.connected
|
return this.$accessor.connected
|
||||||
}
|
}
|
||||||
@ -282,6 +325,27 @@
|
|||||||
return this.$accessor.settings.keyboard_layout
|
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) {
|
set keyboard_layout(value: string) {
|
||||||
this.$accessor.settings.setKeyboardLayout(value)
|
this.$accessor.settings.setKeyboardLayout(value)
|
||||||
this.$accessor.remote.changeKeyboard()
|
this.$accessor.remote.changeKeyboard()
|
||||||
|
@ -61,6 +61,8 @@ export const setting = {
|
|||||||
ignore_emotes: 'Ignore Emotes',
|
ignore_emotes: 'Ignore Emotes',
|
||||||
chat_sound: 'Play Chat Sound',
|
chat_sound: 'Play Chat Sound',
|
||||||
keyboard_layout: 'Change Keyboard Layout',
|
keyboard_layout: 'Change Keyboard Layout',
|
||||||
|
broadcast_is_active: 'Broadcast Enabled',
|
||||||
|
broadcast_url: 'RTMP url',
|
||||||
}
|
}
|
||||||
|
|
||||||
export const connection = {
|
export const connection = {
|
||||||
|
@ -38,6 +38,11 @@ export const EVENT = {
|
|||||||
RESOLUTION: 'screen/resolution',
|
RESOLUTION: 'screen/resolution',
|
||||||
SET: 'screen/set',
|
SET: 'screen/set',
|
||||||
},
|
},
|
||||||
|
BROADCAST: {
|
||||||
|
STATUS: "broadcast/status",
|
||||||
|
CREATE: "broadcast/create",
|
||||||
|
DESTROY: "broadcast/destroy",
|
||||||
|
},
|
||||||
ADMIN: {
|
ADMIN: {
|
||||||
BAN: 'admin/ban',
|
BAN: 'admin/ban',
|
||||||
KICK: 'admin/kick',
|
KICK: 'admin/kick',
|
||||||
@ -60,6 +65,7 @@ export type WebSocketEvents =
|
|||||||
| SignalEvents
|
| SignalEvents
|
||||||
| ChatEvents
|
| ChatEvents
|
||||||
| ScreenEvents
|
| ScreenEvents
|
||||||
|
| BroadcastEvents
|
||||||
| AdminEvents
|
| AdminEvents
|
||||||
|
|
||||||
export type ControlEvents =
|
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 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 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 =
|
export type AdminEvents =
|
||||||
| typeof EVENT.ADMIN.BAN
|
| typeof EVENT.ADMIN.BAN
|
||||||
| typeof EVENT.ADMIN.KICK
|
| 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
|
// Admin Events
|
||||||
/////////////////////////////
|
/////////////////////////////
|
||||||
|
@ -22,6 +22,7 @@ export type WebSocketMessages =
|
|||||||
| ScreenResolutionMessage
|
| ScreenResolutionMessage
|
||||||
| ScreenConfigurationsMessage
|
| ScreenConfigurationsMessage
|
||||||
| ChatMessage
|
| ChatMessage
|
||||||
|
| BroadcastCreateMessage
|
||||||
|
|
||||||
export type WebSocketPayloads =
|
export type WebSocketPayloads =
|
||||||
| SignalProvidePayload
|
| SignalProvidePayload
|
||||||
@ -37,6 +38,7 @@ export type WebSocketPayloads =
|
|||||||
| ScreenResolutionPayload
|
| ScreenResolutionPayload
|
||||||
| ScreenConfigurationsPayload
|
| ScreenConfigurationsPayload
|
||||||
| AdminPayload
|
| AdminPayload
|
||||||
|
| BroadcastStatusPayload
|
||||||
|
|
||||||
export interface WebSocketMessage {
|
export interface WebSocketMessage {
|
||||||
event: WebSocketEvents | string
|
event: WebSocketEvents | string
|
||||||
@ -177,6 +179,19 @@ export interface ScreenConfigurationsPayload {
|
|||||||
configurations: ScreenConfigurations
|
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
|
ADMIN PAYLOADS
|
||||||
*/
|
*/
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import { getterTree, mutationTree, actionTree } from 'typed-vuex'
|
import { getterTree, mutationTree, actionTree } from 'typed-vuex'
|
||||||
import { get, set } from '~/utils/localstorage'
|
import { get, set } from '~/utils/localstorage'
|
||||||
|
import { EVENT } from '~/neko/events'
|
||||||
import { accessor } from '~/store'
|
import { accessor } from '~/store'
|
||||||
|
|
||||||
export const namespaced = true
|
export const namespaced = true
|
||||||
@ -18,6 +19,9 @@ export const state = () => {
|
|||||||
keyboard_layout: get<string>('keyboard_layout', 'us'),
|
keyboard_layout: get<string>('keyboard_layout', 'us'),
|
||||||
|
|
||||||
keyboard_layouts_list: {} as KeyboardLayouts,
|
keyboard_layouts_list: {} as KeyboardLayouts,
|
||||||
|
|
||||||
|
broadcast_is_active: false,
|
||||||
|
broadcast_url: "",
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -57,6 +61,10 @@ export const mutations = mutationTree(state, {
|
|||||||
setKeyboardLayoutsList(state, value: KeyboardLayouts) {
|
setKeyboardLayoutsList(state, value: KeyboardLayouts) {
|
||||||
state.keyboard_layouts_list = value
|
state.keyboard_layouts_list = value
|
||||||
},
|
},
|
||||||
|
setBroadcastStatus(state, { url, isActive }) {
|
||||||
|
state.broadcast_url = url,
|
||||||
|
state.broadcast_is_active = isActive
|
||||||
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
export const actions = actionTree(
|
export const actions = actionTree(
|
||||||
@ -71,5 +79,15 @@ export const actions = actionTree(
|
|||||||
})
|
})
|
||||||
.catch(console.error)
|
.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