Video Switcher (#204)

* Video Switcher Added audience display switcher to the lower thirds page. also added button to show a lower third and switch to blank * Update setup_lower_thirds.go
Team254 · Nov 5, 2024 · 302a77b · 302a77b
1 parent 79b6196
commit 302a77b
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 1 deletion.
diff --git a/static/js/lower_thirds.js b/static/js/lower_thirds.js
@@ -20,6 +20,13 @@ var showLowerThird = function(button) {
   websocket.send("showLowerThird", constructLowerThird(button));
 };
 
+// Sends a websocket message to show the given lower third and clear the audence display.
+var showLowerThirdOnly = function(button) {
+  websocket.send("showLowerThird", constructLowerThird(button));
+  $("input[name=audienceDisplay][value=blank]").prop("checked", true);
+  setAudienceDisplay();
+};
+
 // Sends a websocket message to hide the lower third.
 var hideLowerThird = function(button) {
   websocket.send("hideLowerThird", constructLowerThird(button));
@@ -36,7 +43,19 @@ var constructLowerThird = function(button) {
       BottomText: button.form.bottomText.value }
 };
 
+// Handles a websocket message to update the audience display screen selector.
+const handleAudienceDisplayMode = function(data) {
+  $("input[name=audienceDisplay]:checked").prop("checked", false);
+  $("input[name=audienceDisplay][value=" + data + "]").prop("checked", true);
+};
+
+// Sends a websocket message to change what the audience display is showing.
+const setAudienceDisplay = function() {
+  websocket.send("setAudienceDisplay", $("input[name=audienceDisplay]:checked").val());
+};
 $(function() {
   // Set up the websocket back to the server.
-  websocket = new CheesyWebsocket("/setup/lower_thirds/websocket", {});
+  websocket = new CheesyWebsocket("/setup/lower_thirds/websocket", {
+    audienceDisplayMode: function(event) { handleAudienceDisplayMode(event.data); },
+  });
 });
diff --git a/templates/setup_lower_thirds.html b/templates/setup_lower_thirds.html
@@ -7,6 +7,67 @@
 {{define "title"}}Lower Thirds{{end}}
 {{define "body"}}
 <div class="row justify-content-center">
+  <div class="col-lg-3">
+    <div class="card card-body bg-body-tertiary">
+     <legend>Audience Display</legend>
+      <div class="row">
+        <div>
+          <label>
+            <input type="radio" name="audienceDisplay" value="blank" onclick="setAudienceDisplay();"> Blank
+          </label>
+        </div>
+        <div>
+          <label>
+            <input type="radio" name="audienceDisplay" value="intro"
+                onclick="setAudienceDisplay();" id="introRadio"> Match Intro
+          </label>
+        </div>
+        <div>
+          <label>
+            <input type="radio" name="audienceDisplay" value="match" onclick="setAudienceDisplay();"> Match Play
+          </label>
+        </div>
+        <div>
+          <label>
+            <input type="radio" name="audienceDisplay" value="score"
+                onclick="setAudienceDisplay();" id="scoreRadio"> Final Score
+          </label>
+          </div>
+          <div>
+          <label>
+            <input type="radio" name="audienceDisplay" value="bracket" width="200px" onclick="setAudienceDisplay();"> Bracket
+          </label>
+        </div>
+        <div>
+          <label>
+            <input type="radio" name="audienceDisplay" value="logo" onclick="setAudienceDisplay();"> Logo With BG
+          </label>
+        </div>
+        <div>
+          <label>
+            <input type="radio" name="audienceDisplay" value="logoLuma" onclick="setAudienceDisplay();">
+            Logo Without BG
+          </label>
+        </div>
+        <div>
+          <label>
+            <input type="radio" name="audienceDisplay" value="sponsor" onclick="setAudienceDisplay();"> Sponsor Reel
+          </label>
+        </div>
+        <div>
+          <label>
+            <input type="radio" name="audienceDisplay" value="allianceSelection"
+                onclick="setAudienceDisplay();"> Alliance Selection
+          </label>
+        </div>
+        <div>
+          <label>
+            <input type="radio" name="audienceDisplay" value="timeout" onclick="setAudienceDisplay();"> Timeout
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
   <div class="col-lg-6">
     <div class="card card-body bg-body-tertiary">
       <legend>Lower Thirds</legend>
@@ -30,6 +91,9 @@
               <button type="button" class="btn btn-primary mb-1" onclick="reorderLowerThird(this, true);">
                 <i class="bi-arrow-up"></i>
               </button>
+              <button type="button" class="btn btn-success mb-1" onclick="showLowerThirdOnly(this);">
+                Show Only Thirds
+              </button>
               <br />
               <button type="button" class="btn btn-danger btn-lower-third" onclick="deleteLowerThird(this);">
                 Delete

diff --git a/web/setup_lower_thirds.go b/web/setup_lower_thirds.go
@@ -55,6 +55,11 @@ func (web *Web) lowerThirdsWebsocketHandler(w http.ResponseWriter, r *http.Reque
 	}
 	defer ws.Close()
 
+	// Subscribe the websocket to the notifiers whose messages will be passed on to the client, in a separate goroutine.
+	go ws.HandleNotifiers(
+		web.arena.AudienceDisplayModeNotifier,
+	)
+
 	// Loop, waiting for commands and responding to them, until the client closes the connection.
 	for {
 		messageType, data, err := ws.Read()
@@ -126,6 +131,13 @@ func (web *Web) lowerThirdsWebsocketHandler(w http.ResponseWriter, r *http.Reque
 				ws.WriteError(err.Error())
 				continue
 			}
+		case "setAudienceDisplay":
+			mode, ok := data.(string)
+			if !ok {
+				ws.WriteError(fmt.Sprintf("Failed to parse '%s' message.", messageType))
+				continue
+			}
+			web.arena.SetAudienceDisplayMode(mode)
 		default:
 			ws.WriteError(fmt.Sprintf("Invalid message type '%s'.", messageType))
 			continue