refactor broadcast UI.

README.md

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

client/src/components/settings.vue

@@ -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>
-        <li>
-          <span>{{ $t('setting.broadcast_url') }}</span>
-          <input v-model="broadcast_url" :disabled="broadcast_is_active" class="input" />
-        </li>
-      </template>
+      <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 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
     }

client/src/locale/en-us.ts

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

client/src/locale/es-sp.ts

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

client/src/locale/fr-fr.ts

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

client/src/locale/nb-no.ts

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

client/src/locale/sk-sk.ts

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

client/src/locale/sv-se.ts

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