From 523831237d402608db7d597bd841a84689dae83f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miroslav=20=C5=A0ediv=C3=BD?= <sedivy.miro@gmail.com>
Date: Sun, 15 Aug 2021 16:41:42 +0200
Subject: [PATCH] refactor broadcast UI.

---
 README.md                          |  4 +--
 client/src/components/settings.vue | 57 +++++++++++++++++++-----------
 client/src/locale/en-us.ts         |  3 +-
 client/src/locale/es-sp.ts         |  4 +--
 client/src/locale/fr-fr.ts         |  4 +--
 client/src/locale/nb-no.ts         |  4 +--
 client/src/locale/sk-sk.ts         |  3 +-
 client/src/locale/sv-se.ts         |  4 +--
 8 files changed, 47 insertions(+), 36 deletions(-)

diff --git a/README.md b/README.md
index c8edad0..8659280 100644
--- a/README.md
+++ b/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
 
diff --git a/client/src/components/settings.vue b/client/src/components/settings.vue
index 207714c..23747bf 100644
--- a/client/src/components/settings.vue
+++ b/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
     }
diff --git a/client/src/locale/en-us.ts b/client/src/locale/en-us.ts
index 9eca4a8..a53a255 100644
--- a/client/src/locale/en-us.ts
+++ b/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 = {
diff --git a/client/src/locale/es-sp.ts b/client/src/locale/es-sp.ts
index 674e7ba..cdbe966 100644
--- a/client/src/locale/es-sp.ts
+++ b/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 = {
diff --git a/client/src/locale/fr-fr.ts b/client/src/locale/fr-fr.ts
index ede15e3..c0025ee 100644
--- a/client/src/locale/fr-fr.ts
+++ b/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 = {
diff --git a/client/src/locale/nb-no.ts b/client/src/locale/nb-no.ts
index 89ef252..2834d49 100644
--- a/client/src/locale/nb-no.ts
+++ b/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 = {
diff --git a/client/src/locale/sk-sk.ts b/client/src/locale/sk-sk.ts
index 39dbae3..ce4fef6 100644
--- a/client/src/locale/sk-sk.ts
+++ b/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 = {
diff --git a/client/src/locale/sv-se.ts b/client/src/locale/sv-se.ts
index 722e074..8e15210 100644
--- a/client/src/locale/sv-se.ts
+++ b/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 = {