Add on air source to diddy timelord.

src/navbar/navbar.scss

@@ -43,6 +43,10 @@
   margin: 0;
 }
 
+.btn {
+  max-height: 45px;
+}
+
 .navbar-main {
   background-color: #2d425f;
   border-color: #2d425f;

src/navbar/timelord.scss

@@ -2,15 +2,52 @@
   background: black;
   border: red 1px solid;
   color: white;
-  min-width: 85px;
-}
+  padding: 0 1em;
+  font-size: 1.1em;
 
-#timelord a {
-  text-decoration: none;
-  color: white;
-}
+  a {
+    text-decoration: none;
+    color: white;
+  }
 
-#timelord time {
-  font-weight: bold;
-  font-size: 1.2em;
+  time {
+    font-weight: bold;
+    font-size: 1.1em;
+    font-variant-numeric: tabular-nums; // Make the text monospace so it stops jumping.
+  }
+
+  .source {
+    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

@@ -1,8 +1,38 @@
-import React from "react";
+import React, { useState } from "react";
 import LiveClock from "react-live-clock";
+import { myradioApiRequest } from "../api";
+import { useInterval } from "../lib/utils";
 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 (sourceNames[studio - 1]) {
+      sourceName = sourceNames[studio - 1];
+    }
+
+    return { id: studio, name: sourceName };
+  }
+
+  const [source, setSource] = useState({ id: 0, name: "Unknown" });
+
+  useInterval(async () => {
+    setSource(await getSource());
+  }, 3000);
+
   return (
     <li
       className="btn rounded-0 py-2 nav-link nav-item"
@@ -21,6 +51,10 @@ export function Timelord() {
         ticking={true}
         timezone={"europe/london"}
       />
+      <span className="source">
+        <span className={"studio studio" + source.id}>{source.name}</span> is On
+        Air
+      </span>
     </li>
   );
 }