Merge pull request #198 from UniversityRadioYork/mstratford/theQIsiren

Add some form of telling people it's dead.

src/navbar/index.tsx

@@ -1,6 +1,5 @@
 import React, { useRef, useEffect, useState } from "react";
 import { shallowEqual, useDispatch, useSelector } from "react-redux";
-import Clock from "react-live-clock";
 
 import {
   FaCircle,
@@ -28,6 +27,7 @@ import { getShowplan, setItemPlayed } from "../showplanner/state";
 import * as OptionsMenuState from "../optionsMenu/state";
 import { setChannelPFL } from "../mixer/state";
 import { secToHHMM, useInterval } from "../lib/utils";
+import { Timelord } from "./timelord";
 
 function nicifyConnectionState(state: ConnectionStateEnum): string {
   switch (state) {
@@ -164,24 +164,7 @@ export function NavBarMain() {
   return (
     <>
       <ul className="nav navbar-nav navbar-left">
-        <li
-          className="btn rounded-0 py-2 nav-link nav-item"
-          id="timelord"
-          onClick={(e) => {
-            e.preventDefault();
-            window.open(
-              "http://ury.org.uk/timelord/",
-              "URY - Timelord",
-              "resizable,status"
-            );
-          }}
-        >
-          <Clock
-            format={"HH:mm:ss"}
-            ticking={true}
-            timezone={"europe/london"}
-          />
-        </li>
+        <Timelord />
         <SavingAlert />
       </ul>
       <ul className="nav navbar-nav navbar-right mr-0 pr-0">

src/navbar/navbar.scss

@@ -50,6 +50,10 @@
   max-height: 7vh;
   flex-shrink: 0;
 
+  .btn {
+    max-height: 45px;
+  }
+
   .nav-vu {
     background: black;
   }
@@ -285,23 +289,6 @@
   }
 }
 
-#timelord {
-  background: black;
-  border: red 1px solid;
-  color: white;
-  min-width: 85px;
-}
-
-#timelord a {
-  text-decoration: none;
-  color: white;
-}
-
-#timelord .time {
-  font-weight: bold;
-  font-size: 1.1em;
-}
-
 .nav-link.connect {
   min-width: 90px;
 }

src/navbar/timelord.scss

@@ -0,0 +1,61 @@
+#timelord {
+  background: black;
+  border: red 1px solid;
+  color: white;
+  padding: 0 1em;
+  font-size: 1.1em;
+
+  a {
+    text-decoration: none;
+    color: white;
+  }
+
+  time {
+    font-weight: bold;
+    font-size: 1.1em;
+    font-variant-numeric: tabular-nums; // Make the text monospace so it stops jumping.
+  }
+
+  .error {
+    font-weight: bold;
+    font-size: 1.1em;
+    -webkit-animation: red-text-flash steps(1) 1s infinite;
+    animation: red-text-flash steps(1) 1s infinite;
+  }
+
+  .source,
+  .error {
+    margin-left: 1em;
+    border-left: 2px solid gray;
+    padding-left: 1em;
+  }
+
+  .studio {
+    color: #2cdfff;
+    font-weight: bold;
+
+    &.studio1 {
+      color: red;
+    }
+
+    &.studio2 {
+      color: #246ee6;
+    }
+
+    &.studio3 {
+      color: #0f0;
+    }
+
+    &.studio4 {
+      color: #bb00dc;
+    }
+
+    &.studio5 {
+      color: #b5009b;
+    }
+
+    &.studio8 {
+      color: orange;
+    }
+  }
+}

src/navbar/timelord.tsx

@@ -0,0 +1,93 @@
+import React, { useState } from "react";
+import LiveClock from "react-live-clock";
+import { useSelector } from "react-redux";
+import { myradioApiRequest } from "../api";
+import { useInterval } from "../lib/utils";
+import { RootState } from "../rootReducer";
+import "./timelord.scss";
+
+export function Timelord() {
+  async function getSource() {
+    let studio = await myradioApiRequest("/selector/studioattime", "GET", null);
+
+    const sourceNames = [
+      "Studio Red",
+      "Studio Blue",
+      "Jukebox",
+      "OB",
+      "WebStudio",
+      "Unknown",
+      "Sine Wave",
+      "Off Air",
+    ];
+
+    let sourceName = "Unknown";
+    if (studio > 0 && studio < sourceNames.length) {
+      sourceName = sourceNames[studio - 1];
+    }
+
+    return { id: studio, name: sourceName };
+  }
+
+  async function getSilence() {
+    let silence = await myradioApiRequest("/selector/issilence", "GET", null);
+
+    return silence;
+  }
+
+  const broadcastStage = useSelector(
+    (state: RootState) => state.broadcast.stage
+  );
+  const broadcastConnection = useSelector(
+    (state: RootState) => state.broadcast.connectionState
+  );
+  const [source, setSource] = useState({ id: -1, name: "Loading" });
+  const [isSilence, setSilence] = useState(false);
+
+  useInterval(
+    async () => {
+      setSource(await getSource());
+    },
+    broadcastStage === "REGISTERED" ? 3000 : 10000
+  );
+
+  useInterval(async () => {
+    broadcastStage === "REGISTERED"
+      ? setSilence(await getSilence())
+      : setSilence(false);
+  }, 3000);
+
+  return (
+    <li
+      className="btn rounded-0 py-2 nav-link nav-item"
+      id="timelord"
+      onClick={(e) => {
+        e.preventDefault();
+        window.open(
+          "http://ury.org.uk/timelord/",
+          "URY - Timelord",
+          "resizable,status"
+        );
+      }}
+    >
+      <LiveClock
+        format={"HH:mm:ss"}
+        ticking={true}
+        timezone={"europe/london"}
+      />
+      {broadcastStage === "REGISTERED" &&
+      ["LIVE", "CONNECTED"].indexOf(broadcastConnection) === -1 ? (
+        <span className="error">Streaming Error!</span>
+      ) : isSilence ? (
+        <span className="error">SILENCE DETECTED</span>
+      ) : (
+        source.id > -1 && (
+          <span className="source">
+            <span className={"studio studio" + source.id}>{source.name}</span>
+            &nbsp;is On Air
+          </span>
+        )
+      )}
+    </li>
+  );
+}

src/scss/_animations.scss

@@ -27,3 +27,18 @@
     background-color: rgb(199, 255, 199);
   }
 }
+
+@-webkit-keyframes red-text-flash {
+  0% {
+  }
+  50% {
+    color: rgb(255, 0, 0);
+  }
+}
+@keyframes red-text-flash {
+  0% {
+  }
+  50% {
+    color: rgb(255, 0, 0);
+  }
+}