From c63a1fe251c72167216e7145e486b9489504f1e8 Mon Sep 17 00:00:00 2001
From: Tobias Messner <tobias.d.messner@gmail.com>
Date: Mon, 23 Jan 2023 14:25:18 +0100
Subject: [PATCH] Change disconnected icon, only show connected when auth was
 successful, show errors

---
 .../broadcast/roots/WebsocketTransmitter.vue  | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/website/src/components/broadcast/roots/WebsocketTransmitter.vue b/website/src/components/broadcast/roots/WebsocketTransmitter.vue
index f15bbd43..c1c522d1 100644
--- a/website/src/components/broadcast/roots/WebsocketTransmitter.vue
+++ b/website/src/components/broadcast/roots/WebsocketTransmitter.vue
@@ -9,9 +9,13 @@
         <div v-if="isConnected">
             <i class="fas fa-check-circle"></i> Connected
         </div>
-        <div v-else>
-            <LoadingIcon/>
-            Not Connected
+        <div class="text-center" v-else>
+            <div>
+                <i class="fas fa-wifi-slash"></i> Not Connected
+            </div>
+            <code v-if="obsError" class="error">
+                Error: {{ obsError }}
+            </code>
         </div>
 
 
@@ -23,15 +27,14 @@
 </template>
 <script>
 import OBSWebSocket from "obs-websocket-js";
-import LoadingIcon from "@/components/website/LoadingIcon";
 
 export default {
     name: "WebsocketTransmitter",
-    components: { LoadingIcon },
     props: ["client", "wsUrl", "wsPassword"],
     data: () => ({
         obsWs: null,
         isConnected: false,
+        obsError: "",
         wsPreview: false,
         wsProgram: false,
 
@@ -67,6 +70,7 @@ export default {
                 this.transmit();
                 console.log("Connected to OBS Websocket");
             } catch (e) {
+                this.obsError = e.message;
                 console.error("Failed to connect to OBS WebSocket");
                 console.error(e);
             }
@@ -90,11 +94,12 @@ export default {
     async mounted() {
         this.obsWs = new OBSWebSocket();
 
-        this.obsWs.on("ConnectionOpened", () => {
+        this.obsWs.on("Identified", () => {
             this.isConnected = true;
         });
 
-        this.obsWs.on("ConnectionClosed", () => {
+        this.obsWs.on("ConnectionClosed", (error) => {
+            this.obsError = error.message;
             this.isConnected = false;
         });
 
@@ -169,4 +174,8 @@ h1 {
     border-color: #ff0000;
     border-radius: .1em;
 }
+
+.error {
+    font-size: 2.5rem;
+}
 </style>