Merge pull request #171 from zusorio/design-tally-transmitter

Make the tally transmitter more visually appealing
slmnio · Jan 23, 2023 · 20dc6b7 · 20dc6b7
2 parents f0cf02b + c63a1fe
commit 20dc6b7
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 22 deletions.
diff --git a/website/src/components/broadcast/roots/WebsocketTransmitter.vue b/website/src/components/broadcast/roots/WebsocketTransmitter.vue
@@ -1,23 +1,40 @@
 <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 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>
+
+
+        <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";
 
 export default {
     name: "WebsocketTransmitter",
-    props: ["client", "wsUrl", "wsPassword", "wsSceneNameOverride"],
+    props: ["client", "wsUrl", "wsPassword"],
     data: () => ({
         obsWs: null,
         isConnected: false,
+        obsError: "",
         wsPreview: false,
         wsProgram: false,
 
@@ -33,13 +50,6 @@ export default {
             } else {
                 return "inactive";
             }
-        },
-        wsSceneName() {
-            if (this.wsSceneNameOverride) {
-                return this.wsSceneNameOverride;
-            } else {
-                return undefined;
-            }
         }
     },
 
@@ -60,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);
             }
@@ -83,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;
         });
 
@@ -112,7 +124,58 @@ 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;
+}
+
+.error {
+    font-size: 2.5rem;
+}
 </style>
diff --git 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 },