Update deps

Reviewed-on: #7

.eslintrc.cjs

@@ -0,0 +1,11 @@
+/* eslint-env node */
+module.exports = {
+  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint"],
+  root: true,
+  ignorePatterns: ["jest.config.js", "dist"],
+  overrides: [{
+    files: ["src/**.js"],
+  }]
+};

.git-blame-ignore-revs

@@ -0,0 +1,2 @@
+# First prettier run
+3fd391efc774007b6f4fb3c92a82c6bf0efce207

.gitea/workflows/tests.yml

@@ -0,0 +1,31 @@
+name: Run tests
+on:
+  push:
+    paths:
+      - 'src/**.ts'
+      - 'src/**.tsx'
+  pull_request:
+    paths:
+      - 'src/**.ts'
+      - 'src/**.tsx'
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    env:
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Set up node
+      uses: https://github.com/actions/setup-node@v4
+      with:
+        node-version: 21
+        cache: npm
+    
+    - name: deps
+      run: npm install
+
+    - name: Test
+      run: npm run test
+    

.prettierignore

@@ -0,0 +1,2 @@
+dist/
+node_modules/

.prettierrc

@@ -0,0 +1 @@
+{}

flake.lock

@@ -0,0 +1,27 @@
+{
+  "nodes": {
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1726463316,
+        "narHash": "sha256-gI9kkaH0ZjakJOKrdjaI/VbaMEo9qBbSUl93DnU7f4c=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "99dc8785f6a0adac95f5e2ab05cc2e1bf666d172",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixos-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "nixpkgs": "nixpkgs"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,36 @@
+{
+  description = "Jank workaround for mumble PTT";
+
+  inputs.nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
+
+  outputs =
+    { self, nixpkgs }:
+    let
+      allSystems = [
+        "x86_64-linux"
+        "aarch64-linux"
+        "x86_64-darwin"
+        "aarch64-darwin"
+      ];
+      forAllSystems =
+        f:
+        nixpkgs.lib.genAttrs allSystems (
+          system:
+          f {
+            pkgs = import nixpkgs { inherit system; };
+          }
+        );
+    in
+    {
+      devShells = forAllSystems (
+        { pkgs }:
+        {
+          default = pkgs.mkShell {
+            packages = with pkgs; [
+              nodejs
+            ];
+          };
+        }
+      );
+    };
+}

jest.config.js

@@ -0,0 +1,5 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+};

package.json

@@ -7,22 +7,32 @@
     "start": "parcel src/index.html",
     "build": "parcel build src/index.html",
     "type-check": "tsc --noEmit",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "jest"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "parcel": "^2.10.3",
+    "@jest/globals": "^29.7.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.0.1",
+    "@types/testing-library__jest-dom": "^5.14.9",
+    "@typescript-eslint/eslint-plugin": "^8.6.0",
+    "eslint": "^9.10.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "parcel": "^2.12.0",
+    "prettier": "^3.3.3",
     "process": "^0.11.10",
+    "ts-jest": "^29.2.5",
     "ts-loader": "^9.5.1",
-    "typescript": "^5.3.2"
+    "typescript": "^5.6.2"
   },
   "dependencies": {
-    "@types/node": "^20.10.1",
-    "@types/react": "^18.2.39",
-    "@types/react-dom": "^18.2.17",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@types/node": "^22.5.5",
+    "@types/react": "^18.3.7",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   }
 }

src/css/fonts.css

@@ -1 +1 @@
-@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;600&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Prompt:wght@300;600&display=swap");

src/css/style.css

@@ -1,10 +1,10 @@
 :root {
-    --menu-header-color: #1B1F22;
-    --menu-header-text: #FFEBF4;
+  --menu-header-color: #1b1f22;
+  --menu-header-text: #ffebf4;
   --menu-background-color: #435058;
-    --menu-item-color: #4F5F69;
+  --menu-item-color: #4f5f69;
   --menu-item-hover: #607480;
-    --menu-selected-color: #7F929F;
+  --menu-selected-color: #7f929f;
   --main-background: #121517;
 }
 
@@ -19,19 +19,33 @@ body {
   height: 100%;
   background-color: var(--main-background);
   color: var(--menu-header-text);
-    font-family: 'Prompt', sans-serif;
+  font-family: "Prompt", sans-serif;
   font-weight: 600;
 }
 
+.loader-wrapper {
+  margin-top: 10em;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
 .loader {
   display: flex;
+  width: min-content;
+  vertical-align: middle;
 }
+
 .loader .spinner {
-    margin-top: 0px;
+  margin-top: auto;
+  margin-bottom: auto;
 }
+
 .loader .loading-text {
-    margin-top: 0px;
+  margin-top: auto;
+  margin-bottom: auto;
   margin-left: 0.5em;
+  white-space: nowrap;
 }
 
 .video-wrapper {
@@ -69,7 +83,7 @@ ul.menu-list {
 
 a.menu-link {
   padding-left: 2em;
-    font-family: 'Prompt', sans-serif;
+  font-family: "Prompt", sans-serif;
   font-weight: 300;
   font-size: larger;
   margin-right: auto;
@@ -81,7 +95,7 @@ a.menu-link {
   background-color: var(--menu-header-color);
   color: var(--menu-header-text);
   font-size: larger;
-    font-family: 'Prompt', sans-serif;
+  font-family: "Prompt", sans-serif;
   font-weight: 600;
 }
 
@@ -98,8 +112,9 @@ a.menu-heading {
   cursor: pointer;
   display: flex;
 }
+
 .menu-viewcount {
-    font-family: 'Prompt', sans-serif;
+  font-family: "Prompt", sans-serif;
   font-size: larger;
   font-weight: 300;
   color: var(--menu-header-text);
@@ -113,12 +128,13 @@ li.menu-item {
   background-color: var(--menu-item-color);
   margin-top: 1px;
 }
+
 li.menu-item:hover {
   background-color: var(--menu-item-hover);
 }
 
 li.menu-selected {
-    background-color: var(--menu-selected-color)
+  background-color: var(--menu-selected-color);
 }
 
 #app {
@@ -132,10 +148,15 @@ li.menu-selected {
   border-radius: 50%;
   width: 10px;
   height: 10px;
-  animation: spin 2s linear infinite;
+  animation: spin 1s linear infinite;
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
 }

src/index.html

@@ -6,7 +6,7 @@
     <script src="./js/app.tsx" type="module"></script>
     <link rel="stylesheet" href="./css/style.css" />
     <link rel="stylesheet" href="./css/fonts.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
   <body>
     <div id="app" />

src/js/__tests__/menu.test.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import "@testing-library/jest-dom/jest-globals";
+import { describe, it, expect } from "@jest/globals";
+import { render, screen } from "@testing-library/react";
+import { Menu } from "../menu";
+
+describe("<Menu />", () => {
+  it("renders ok", () => {
+    const cb = () => {};
+    render(
+      <Menu
+        items={[{ streamKey: "streamer", viewCount: 10 }]}
+        selectedItem={null}
+        selectCallback={cb}
+      />,
+    );
+  });
+
+  it("has item in list", () => {
+    const cb = () => {};
+    render(
+      <Menu
+        items={[{ streamKey: "streamer", viewCount: 10 }]}
+        selectedItem={null}
+        selectCallback={cb}
+      />,
+    );
+    const streamerElement = screen.getByText("streamer");
+    expect(streamerElement).toBeInTheDocument();
+  });
+
+  it("updates selected when clicked", () => {
+    let selected: string | null = null;
+    const cb = (name: string | null) => {
+      selected = name;
+    };
+    render(
+      <Menu
+        items={[{ streamKey: "streamer", viewCount: 10 }]}
+        selectedItem={null}
+        selectCallback={cb}
+      />,
+    );
+    const streamerElement = screen.getByText("streamer");
+    expect(streamerElement).toBeInTheDocument();
+    expect(selected).toBeNull();
+    streamerElement.click();
+    expect(selected).toStrictEqual("streamer");
+  });
+});

src/js/api.ts

@@ -1,82 +1,75 @@
-
 export interface SiteInfo {
-    siteName: string
+  siteName: string;
 }
 
 export interface StreamInfo {
-    streamKey: string
-    viewCount: number
+  streamKey: string;
+  viewCount: number;
 }
 
 export class MinistreamApiClient {
-    ENV: string
+  ENV: string;
 
   constructor() {
     if (process.env.NODE_ENV) {
-            this.ENV = process.env.NODE_ENV
+      this.ENV = process.env.NODE_ENV;
     } else {
-            this.ENV = "production"
+      this.ENV = "production";
     }
   }
 
   async listStreams(): Promise<StreamInfo[]> {
-        var data: StreamInfo[] = [];
-        var url = "/whip"
+    let data: StreamInfo[] = [];
+    let url = "/whip";
     if (this.ENV !== "production") {
-            url = "http://localhost:8080/whip"
+      url = "http://localhost:8080/whip";
     }
 
-        try {
-            const resp = await fetch(
-                url,
-            );
-            data = await resp.json() as unknown as StreamInfo[];
-        }
-        catch (e) {
-            throw e;
-        }
+    const resp = await fetch(url);
+    data = (await resp.json()) as unknown as StreamInfo[];
 
     const sortedStreams = data.sort((a, b) => {
       if (a.streamKey > b.streamKey) {
-                return -1
+        return -1;
       } else if (a.streamKey < b.streamKey) {
-                return 1
+        return 1;
       }
-            return 0
-        })
+      return 0;
+    });
 
     return sortedStreams;
   }
 
-    async postOffer(streamKey: string, offer_sdp: RTCSessionDescription): Promise<RTCSessionDescription> {
-        var url = "/whip/" + streamKey
+  async postOffer(
+    streamKey: string,
+    offer_sdp: RTCSessionDescription,
+  ): Promise<RTCSessionDescription> {
+    let url = "/whip/" + streamKey;
     if (this.ENV !== "production") {
-            url = "http://localhost:8080/whip/" + streamKey
+      url = "http://localhost:8080/whip/" + streamKey;
     }
 
-        const resp = await fetch(url,
-            {
+    const resp = await fetch(url, {
       method: "POST",
-                body: offer_sdp.sdp
-            })
-        const body = await resp.text()
-        const answer = new RTCSessionDescription({ type: "answer", sdp: body })
+      body: offer_sdp.sdp,
+    });
+    const body = await resp.text();
+    const answer = new RTCSessionDescription({ type: "answer", sdp: body });
 
-        return answer
+    return answer;
   }
 
   async siteInfo(): Promise<SiteInfo> {
-        var url = "/api/siteinfo"
+    let url = "/api/siteinfo";
     if (this.ENV !== "production") {
-            url = "http://localhost:8080/api/siteinfo"
+      url = "http://localhost:8080/api/siteinfo";
     }
 
-        const resp = await fetch(url,
-            {
+    const resp = await fetch(url, {
       method: "GET",
-            })
-        const data = resp.json()
+    });
+    const data = resp.json();
 
-        return data as unknown as SiteInfo
+    return data as unknown as SiteInfo;
   }
 }

src/js/app.tsx

@@ -1,75 +1,80 @@
 import { createRoot } from "react-dom/client";
 import { Menu } from "./menu";
-import { createContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { MediaContainer } from "./media";
 import { MinistreamApiClient, StreamInfo } from "./api";
 import React from "react";
+import * as Log from "./log";
 
 interface AppProps {
-    api: MinistreamApiClient
+  api: MinistreamApiClient;
 }
 
-const titleKey = "ministream.title"
+const titleKey = "ministream.title";
 
 function setTitleFromLocalstorage() {
-    var title = localStorage.getItem(titleKey)
+  const title = localStorage.getItem(titleKey);
   if (title) {
-        setTitle(title)
+    setTitle(title);
   }
 }
 
 function setTitle(title: string) {
-    const el = document.querySelector('title')
+  const el = document.querySelector("title");
   if (el) {
-        el.textContent = title
+    el.textContent = title;
   }
 }
 
 export function App({ api }: AppProps) {
-    const [streamList, setStreamList] = useState<StreamInfo[]>([])
-    const [selectedStream, setSelectedStream] = useState<string | null>(null)
+  const [streamList, setStreamList] = useState<StreamInfo[]>([]);
+  const [selectedStream, setSelectedStream] = useState<string | null>(null);
 
   const updateSelect = (item: string | null) => {
-        setSelectedStream(item)
-    }
-
-    const updateStreamList = () => {
-        api.listStreams().then((list) => {
-            setStreamList(list)
-            if (list.length != streamList.length) {
-                setStreamList(list)
-                return
-            }
-
-            if (!list.every((_, idx) => {
-                return list[idx].streamKey === streamList[idx].streamKey
-            })) {
-                setStreamList(list)
-            }
-        })
-    }
+    setSelectedStream(item);
+  };
 
   const updateTitle = () => {
     api.siteInfo().then((info) => {
       if (info.siteName != document.title) {
-                setTitle(info.siteName)
-                localStorage.setItem(titleKey, info.siteName)
+        setTitle(info.siteName);
+        localStorage.setItem(titleKey, info.siteName);
       }
+    });
+    return;
+  };
+
+  useEffect(() => {
+    const updateStreamList = () => {
+      api.listStreams().then((list) => {
+        setStreamList((current) => {
+          if (list.length != current.length) {
+            Log.Debug("Updated streamList!");
+            return list;
+          }
+          if (
+            !list.every((_, idx) => {
+              return list[idx].streamKey === current[idx].streamKey;
             })
-        return
+          ) {
+            Log.Debug("Updated streamList..");
+            return list;
           }
+          return current;
+        });
+      });
+    };
 
-    setInterval(() => {
-        updateStreamList()
-    }, 10000)
+    updateStreamList();
+    const updateInterval = setInterval(() => {
+      updateStreamList();
+    }, 10000);
+    return () => clearInterval(updateInterval);
+  }, []);
 
   useEffect(() => {
-        updateStreamList()
-    }, [])
-
-    useEffect(() => {
-        updateTitle()
-    }, [])
+    updateTitle();
+  }, []);
 
   return (
     <>
@@ -80,13 +85,13 @@ export function App({ api }: AppProps) {
       />
       <MediaContainer selectedStream={selectedStream} api={api} />
     </>
-    )
+  );
 }
 
 const rootElement = document.getElementById("app");
-setTitleFromLocalstorage()
+setTitleFromLocalstorage();
 if (rootElement) {
-    const root = createRoot(rootElement)
-    const api = new MinistreamApiClient()
-    root.render(<App api={api} />)
+  const root = createRoot(rootElement);
+  const api = new MinistreamApiClient();
+  root.render(<App api={api} />);
 }

src/js/log.ts

@@ -0,0 +1,55 @@
+function levelToNumber(level: Level): number {
+  switch (level) {
+    case "DEBUG":
+      return 0;
+    case "INFO":
+      return 1;
+    case "ERROR":
+      return 2;
+    case "WARN":
+      return 3;
+  }
+}
+
+let currentLevel: Level = "INFO";
+
+if (process.env.NODE_ENV !== "production") {
+  currentLevel = "DEBUG";
+}
+
+export type Level = "ERROR" | "WARN" | "INFO" | "DEBUG";
+
+export function setLevel(level: Level) {
+  currentLevel = level;
+}
+
+export interface LogArgs {
+  [key: string]: string;
+}
+
+const doLog = (level: Level, message: string, extras?: LogArgs) => {
+  let logLine = `[${level}] ${message}`;
+
+  if (extras) {
+    Object.keys(extras).forEach((key) => {
+      logLine = logLine + ` ${key}=${extras[key]}`;
+    });
+  }
+
+  if (levelToNumber(level) >= levelToNumber(currentLevel)) {
+    console.log(logLine);
+  }
+};
+
+export function Error(message: string, extras?: LogArgs) {
+  doLog("ERROR", message, extras);
+}
+export function Warn(message: string, extras?: LogArgs) {
+  doLog("WARN", message, extras);
+}
+export function Info(message: string, extras?: LogArgs) {
+  doLog("INFO", message, extras);
+}
+export function Debug(message: string, extras?: LogArgs) {
+  doLog("DEBUG", message, extras);
+}

src/js/media.tsx

@@ -1,169 +1,179 @@
-import { ComponentProps, useRef, useEffect, useState } from "react"
-import { MinistreamApiClient } from "./api"
-import { resolve } from "path"
-import React from "react"
+import { useRef, useEffect, useState } from "react";
+import { MinistreamApiClient } from "./api";
+import React from "react";
+import * as Log from "./log";
 
 type MediaContainerProps = {
-    selectedStream: string | null
-    api: MinistreamApiClient
-}
+  selectedStream: string | null;
+  api: MinistreamApiClient;
+};
 
 export function MediaContainer({ selectedStream, api }: MediaContainerProps) {
-    const [iceReady, setICEReady] = useState(false)
-    const [remoteReady, setRemoteReady] = useState(false)
-    const [pc, setPC] = useState(new RTCPeerConnection())
-    const [ms, setMs] = useState(new MediaStream())
+  const [iceReady, setICEReady] = useState(false);
+  const [remoteReady, setRemoteReady] = useState(false);
+  const [pc, setPC] = useState(new RTCPeerConnection());
+  const [ms, setMs] = useState(new MediaStream());
 
   // if selected stream changed, recreate pc, and set all to not ready.
   useEffect(() => {
-        console.log("effect: selectedStream")
-        setPC(new RTCPeerConnection({
-            iceServers: [{ urls: "stun:stun.l.google.com:19302" }]
-        }))
-        setICEReady(false)
-        setRemoteReady(false)
-        setMs(new MediaStream())
-
-    }, [selectedStream])
+    Log.Debug("Ran useEffect.", { because_state: "selectedStream" });
+    setPC(
+      new RTCPeerConnection({
+        iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
+      }),
+    );
+    setICEReady(false);
+    setRemoteReady(false);
+    setMs(new MediaStream());
+  }, [selectedStream]);
 
   useEffect(() => {
-        console.log("effect: pc")
-        pc.addTransceiver("video")
-        pc.addTransceiver("audio")
+    Log.Debug("Ran useEffect.", { because_state: "pc" });
+    pc.addTransceiver("video");
+    pc.addTransceiver("audio");
     pc.ontrack = (event) => {
-            event.streams.forEach((st) => st.getTracks().forEach((track) => {
-                ms.addTrack(track)
-            }))
-        }
+      event.streams.forEach((st) =>
+        st.getTracks().forEach((track) => {
+          ms.addTrack(track);
+        }),
+      );
+    };
 
     pc.onicecandidate = (event) => {
       if (!event.candidate) {
-                console.log("ICE gathering complete.")
-                setICEReady(true)
+        Log.Info("ICE gathering complete.");
+        setICEReady(true);
       } else {
-                console.log("Adding ICE candidate: " + event.candidate)
-            }
+        Log.Debug("Adding ICE candidate.", {
+          candidate: event.candidate.candidate,
+        });
       }
+    };
 
     pc.oniceconnectionstatechange = () => {
-            console.log("ICE state changed to " + pc.iceConnectionState)
-        }
+      Log.Info("ICE gathering complete.");
+    };
 
     pc.createOffer().then((offer) => {
-            pc.setLocalDescription(offer).then(() => { console.log("Local description set.") })
-        })
-    }, [pc])
+      pc.setLocalDescription(offer).then(() => {
+        Log.Debug("Local description set.");
+      });
+    });
+  }, [pc]);
 
   useEffect(() => {
-        console.log("effect: iceReady")
+    Log.Debug("Ran useEffect", { because_state: "iceReady" });
     if (!iceReady || !selectedStream) {
-            return
+      return;
     }
-        const localOfferSdp = pc.localDescription?.sdp
+    const localOfferSdp = pc.localDescription?.sdp;
     if (!localOfferSdp) {
-            console.log("Unable to get local description")
-            return
+      Log.Error("Unable to get local description.");
+      return;
     }
-        const localOffer = new RTCSessionDescription({ type: "offer", sdp: localOfferSdp })
+    const localOffer = new RTCSessionDescription({
+      type: "offer",
+      sdp: localOfferSdp,
+    });
     api.postOffer(selectedStream, localOffer).then((remote) => {
       pc.setRemoteDescription(remote).then(() => {
-                setRemoteReady(true)
-            })
-        })
-    }, [iceReady])
+        setRemoteReady(true);
+      });
+    });
+  }, [iceReady]);
 
   useEffect(() => {
-        console.log("effect: remoteReady")
+    Log.Debug("Ran useEffect", { because_state: "remoteReady" });
     if (!iceReady || !selectedStream || !remoteReady) {
-            return
+      return;
     }
-    }, [remoteReady])
-
+  }, [remoteReady]);
 
   const getElement = () => {
     if (!selectedStream) {
-            return <LoadingText spinner={true} text="Waiting for stream selection." />
+      return (
+        <LoadingText spinner={true} text="Waiting for stream selection." />
+      );
     }
     if (!iceReady) {
-            return <LoadingText spinner={true} text="Waiting for ICE gathering." />
+      return <LoadingText spinner={true} text="Waiting for ICE gathering." />;
     }
     if (!remoteReady) {
-            return <LoadingText spinner={true} text="Waiting for remote server." />
+      return <LoadingText spinner={true} text="Waiting for remote server." />;
     }
 
     return (
       <div className="video-wrapper">
         <VideoPlayer ms={ms} />
       </div>
-        )
-    }
-
+    );
+  };
 
   return (
     <div id="main">
-            <main>
-                {getElement()}
-            </main>
+      <main>{getElement()}</main>
     </div>
-    )
+  );
 }
 
 interface VideoPlayerProps {
-    ms: MediaStream
+  ms: MediaStream;
 }
 
 export function VideoPlayer({ ms }: VideoPlayerProps) {
   const [ready, setReady] = useState(false);
-    const videoRef = useRef<HTMLVideoElement>(null)
+  const videoRef = useRef<HTMLVideoElement>(null);
 
   useEffect(() => {
     if (ready) {
-            return
+      return;
     }
     if (videoRef.current) {
       if (videoRef.current) {
-                const ref = videoRef.current
-                ref.srcObject = ms
-                videoRef.current.addEventListener('loadeddata', () => {
-                    ref.hidden = false
-                    setReady(true)
-                })
+        const ref = videoRef.current;
+        ref.srcObject = ms;
+        videoRef.current.addEventListener("loadeddata", () => {
+          ref.hidden = false;
+          setReady(true);
+        });
       }
     }
-    })
+  });
 
   if (ready) {
-        return (<video id="video" ref={videoRef} autoPlay muted controls />)
+    return <video id="video" ref={videoRef} autoPlay muted controls />;
   } else {
     return (
       <>
         <video id="video" ref={videoRef} hidden autoPlay muted controls />
         <LoadingText text="Waiting for video data." spinner={true} />
       </>
-        )
+    );
   }
 }
 
 interface LoadingText {
-    text: string
-    spinner?: boolean
+  text: string;
+  spinner?: boolean;
 }
 
 export function LoadingText({ text, spinner = false }: LoadingText) {
-    var spinnerElement = (<></>)
+  let spinnerElement = <></>;
   if (spinner) {
-        spinnerElement = (<Spinner />)
+    spinnerElement = <Spinner />;
   }
   return (
     <>
+      <div className="loader-wrapper">
         <div className="loader">
           {spinnerElement}
           <p className="loading-text">{text}</p>
         </div>
+      </div>
     </>
-    )
+  );
 }
 
 export function Spinner() {
-    return <div className="spinner" />
+  return <div className="spinner" />;
 }

src/js/menu.tsx

@@ -1,53 +1,63 @@
-import { createRoot } from "react-dom/client";
 import React from "react";
 import { StreamInfo } from "./api";
 
-type StreamSelectCallback = (selected: string | null) => void
+type StreamSelectCallback = (selected: string | null) => void;
 
 interface MenuProps {
-    items: StreamInfo[]
-    selectedItem: string | null
-    selectCallback: StreamSelectCallback
+  items: StreamInfo[];
+  selectedItem: string | null;
+  selectCallback: StreamSelectCallback;
 }
 
 export function Menu({ items, selectedItem, selectCallback }: MenuProps) {
-    const title = document.title
+  const title = document.title;
   const menuitems = () => {
     return (
       <>
-                {items.map((value, idx) => {
+        {items.map((value) => {
+          const key = `${value.streamKey}_${value.viewCount}`
           if (selectedItem == value.streamKey) {
-                        return <>
-                            <li key={idx} className="menu-item menu-selected">
-                                <a href={"#" + value} className="menu-link">{value.streamKey}</a>
+            return (
+                <li key={key} className="menu-item menu-selected">
+                  <a className="menu-link">
+                    {value.streamKey}
+                  </a>
                   <p className="menu-viewcount">{value.viewCount}</p>
                 </li>
-                        </>
+            );
           } else {
-                        return <>
-                            <li key={idx} onClick={() => {
-                                selectCallback(value.streamKey)
-                            }} className="menu-item">
-                                <a href={"#" + value.streamKey} className="menu-link">{value.streamKey}</a>
+            return (
+                <li
+                  key={value.streamKey}
+                  onClick={() => {
+                    selectCallback(value.streamKey);
+                  }}
+                  className="menu-item"
+                >
+                  <a className="menu-link">
+                    {value.streamKey}
+                  </a>
                   <p className="menu-viewcount">{value.viewCount}</p>
                 </li>
-                        </>
+            );
           }
         })}
       </>
-        )
-    }
+    );
+  };
   return (
     <div id="menu">
       <aside>
-                <a className="menu-heading" onClick={() => {
-                    selectCallback(null)
-                }} href="#">{title}</a>
-                <ul className="menu-list">
-                    {menuitems()}
-                </ul>
+        <a
+          className="menu-heading"
+          onClick={() => {
+            selectCallback(null);
+          }}
+          href="#">
+          {title}
+        </a>
+        <ul className="menu-list">{menuitems()}</ul>
       </aside>
     </div>
-    )
-
+  );
 }

tsconfig.json

@@ -4,19 +4,12 @@
     "jsx": "react",
     "module": "esnext",
     "moduleResolution": "node",
-        "lib": [
-            "dom",
-            "esnext"
-        ],
+    "lib": ["dom", "esnext"],
     "strict": true,
     "sourceMap": true,
     "target": "esnext",
+    "types": ["node", "jest", "@testing-library/jest-dom"]
   },
-    "exclude": [
-        "node_modules"
-    ],
-    "include": [
-        "src/**/*.ts",
-        "src/**/*.tsx"
-    ],
+  "exclude": ["node_modules"],
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
 }