refactor broadcast UI.

This commit is contained in:
Miroslav Šedivý 2021-08-15 16:41:42 +02:00
parent 313cd55049
commit 523831237d
8 changed files with 47 additions and 36 deletions

View File

@ -89,9 +89,7 @@ For n.eko room management software, visit https://github.com/m1k1o/neko-rooms.
- Start unmuted on reconnects.
- Switched to the latest Firefox version instead of esr.
- Fixed very fast scroll speed on macOS.
### Roadmap & TODOs
- Catch errors from gst pipeline, tell user if broadcast failed.
- Broadcast pipeline errors are reported to the user.
# Getting started & FAQ

View File

@ -44,19 +44,14 @@
<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 class="broadcast" v-if="admin">
<div>
<span>{{ $t('setting.broadcast_title') }}</span>
<button v-if="!broadcast_is_active" @click.stop.prevent="$accessor.settings.broadcastCreate(broadcast_url)"><i class="fas fa-play"></i></button>
<button v-else @click.stop.prevent="$accessor.settings.broadcastDestroy()" class="btn-red"><i class="fas fa-stop"></i></button>
</div>
<input v-model="broadcast_url" :disabled="broadcast_is_active" class="input" placeholder="rtmp://a.rtmp.youtube.com/live2/<stream-key>" />
</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>
@ -266,6 +261,34 @@
background: none;
}
}
&.broadcast {
display: flex;
flex-direction: column;
div {
margin-bottom: 10px;
display: flex;
justify-content: space-between;
button {
flex-shrink: 1;
width: auto !important;
margin: 0;
padding: 0 10px;
&.btn-red {
background: #a62626;
}
}
}
.input {
text-align: left;
width: auto !important;
margin: 0;
}
}
}
}
}
@ -338,14 +361,6 @@
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
}

View File

@ -63,8 +63,7 @@ export const setting = {
ignore_emotes: 'Ignore Emotes',
chat_sound: 'Play Chat Sound',
keyboard_layout: 'Keyboard Layout',
broadcast_is_active: 'Broadcast Enabled',
broadcast_url: 'RTMP URL',
broadcast_title: 'Live Broadcast',
}
export const connection = {

View File

@ -63,8 +63,8 @@ export const setting = {
ignore_emotes: 'Ignorar Emotes',
chat_sound: 'Reproducir Sonidos Chat',
keyboard_layout: 'Keyboard Layout',
broadcast_is_active: 'Habilitar Broadcast',
broadcast_url: 'RTMP url',
// TODO
//broadcast_title: 'Live Broadcast',
}
export const connection = {

View File

@ -63,8 +63,8 @@ export const setting = {
ignore_emotes: 'Ignorer les Emotes',
chat_sound: 'Jouer le son du tchat',
keyboard_layout: 'Langue du clavier',
broadcast_is_active: 'Broadcast activé',
broadcast_url: 'RTMP URL',
// TODO
//broadcast_title: 'Live Broadcast',
}
export const connection = {

View File

@ -63,8 +63,8 @@ export const setting = {
ignore_emotes: 'Ignorer smilefjes',
chat_sound: 'Sludringslyd',
keyboard_layout: 'Tastaturoppsett',
broadcast_is_active: 'Kringkasting påslått',
broadcast_url: 'RTMP-nettadresse',
// TODO
//broadcast_title: 'Live Broadcast',
}
export const connection = {

View File

@ -63,8 +63,7 @@ export const setting = {
ignore_emotes: 'Ignorovať smajlíky',
chat_sound: 'Prehrávať zvuky chatu',
keyboard_layout: 'Rozloženie klávesnice',
broadcast_is_active: 'Zapnúť vysielanie',
broadcast_url: 'RTMP adresa',
broadcast_title: 'Živé vysielanie',
}
export const connection = {

View File

@ -63,8 +63,8 @@ export const setting = {
ignore_emotes: 'Ignorera Emotes',
chat_sound: 'Spela Chatt Ljud',
keyboard_layout: 'Tangentbordslayout',
broadcast_is_active: 'Sändning Aktiverad',
broadcast_url: 'RTMP url',
// TODO
//broadcast_title: 'Live Broadcast',
}
export const connection = {