From 6331a238aeea7cae27e5608b03d5c1e3d2d4e635 Mon Sep 17 00:00:00 2001
From: Tobias Messner <tobias.d.messner@gmail.com>
Date: Sun, 22 Jan 2023 17:44:36 +0100
Subject: [PATCH 1/2] Make the tally transmitter more visually appealing and
 remove an unused parameter

---
 .../broadcast/roots/WebsocketTransmitter.vue  | 90 +++++++++++++++----
 website/src/router/broadcast.js               |  3 +-
 2 files changed, 73 insertions(+), 20 deletions(-)

diff --git a/website/src/components/broadcast/roots/WebsocketTransmitter.vue b/website/src/components/broadcast/roots/WebsocketTransmitter.vue
index a68244ea..f15bbd43 100644
--- a/website/src/components/broadcast/roots/WebsocketTransmitter.vue
+++ b/website/src/components/broadcast/roots/WebsocketTransmitter.vue
@@ -1,20 +1,34 @@
 <template>
     <div class="websocket-transmitter">
-        <ul>
-            <li>wsUrl: {{ wsUrl }}</li>
-            <li>wsPassword: {{ wsPassword }}</li>
-            <li>isConnected: {{ isConnected }}</li>
-            <li>wsPreview: {{ wsPreview }}</li>
-            <li>wsProgram: {{ wsProgram }}</li>
-        </ul>
+        <h1>Tally Transmitter</h1>
+        <code>
+            URL: {{ wsUrl }}<br>
+            Password: {{ wsPassword }}
+        </code>
+
+        <div v-if="isConnected">
+            <i class="fas fa-check-circle"></i> Connected
+        </div>
+        <div v-else>
+            <LoadingIcon/>
+            Not Connected
+        </div>
+
+
+        <div class="prod-scenes">
+            <div v-if="wsPreview" class="prod-preview">{{ wsPreview }}</div>
+            <div v-if="wsProgram" class="prod-program">{{ wsProgram }}</div>
+        </div>
     </div>
 </template>
 <script>
 import OBSWebSocket from "obs-websocket-js";
+import LoadingIcon from "@/components/website/LoadingIcon";
 
 export default {
     name: "WebsocketTransmitter",
-    props: ["client", "wsUrl", "wsPassword", "wsSceneNameOverride"],
+    components: { LoadingIcon },
+    props: ["client", "wsUrl", "wsPassword"],
     data: () => ({
         obsWs: null,
         isConnected: false,
@@ -33,13 +47,6 @@ export default {
             } else {
                 return "inactive";
             }
-        },
-        wsSceneName() {
-            if (this.wsSceneNameOverride) {
-                return this.wsSceneNameOverride;
-            } else {
-                return undefined;
-            }
         }
     },
 
@@ -112,7 +119,54 @@ export default {
 };
 </script>
 <style scoped>
-    .websocket-transmitter {
-        font-size: 3em;
-    }
+h1 {
+    font-size: 5rem;
+}
+
+.websocket-transmitter {
+    height: 100vh;
+    width: 100vw;
+    background-color: #000000;
+    color: #ffffff;
+    display: grid;
+    place-items: center;
+    font-size: 4rem;
+    font-family: "SLMN-Industry", "Industry", sans-serif;
+}
+
+.prod-scenes {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 3rem;
+    flex-grow: 1;
+    font-weight: bold;
+    width: 80vw;
+}
+
+.prod-scenes div {
+    border: 3px solid rgba(255, 255, 255, 0.5);
+    padding: 0.5em .25em;
+    margin: 0 0.25em;
+    background-color: black;
+    width: 100%;
+    line-height: 1.2;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
+.prod-scenes .prod-preview {
+    color: lime;
+    border-color: lime;
+    border-radius: .1em;
+}
+
+.prod-scenes .prod-program {
+    color: #ff4646;
+    border-color: #ff0000;
+    border-radius: .1em;
+}
 </style>
diff --git a/website/src/router/broadcast.js b/website/src/router/broadcast.js
index 0e4a87c2..aa13857b 100644
--- a/website/src/router/broadcast.js
+++ b/website/src/router/broadcast.js
@@ -104,8 +104,7 @@ export default [
         component: WebsocketTransmitter,
         props: route => ({
             wsUrl: route.query.url || route.query.wsUrl || route.query.wsurl || route.query.wsURL || "ws://127.0.0.1:4455",
-            wsPassword: route.query.wsPassword || route.query.password || route.query.pw,
-            wsSceneNameOverride: route.query.sceneName || route.query.scene
+            wsPassword: route.query.wsPassword || route.query.password || route.query.pw
         })
     },
     { path: "tally-viewer", component: TallyViewer },

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 2/2] 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>