Changed stream list endpoint

src/css/style.css

@@ -90,12 +90,23 @@ a.menu-heading {
 }
 
 .menu-item a {
-    color: aliceblue;
+    color: var(--menu-header-text);
     text-decoration: none;
 }
 
 .menu-item {
     cursor: pointer;
+    display: flex;
+}
+.menu-viewcount {
+    font-family: 'Prompt', sans-serif;
+    font-size: larger;
+    font-weight: 300;
+    color: var(--menu-header-text);
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-right: 1em;
+    height: 100%;
 }
 
 li.menu-item {

src/js/api.ts

@@ -3,6 +3,11 @@ export interface SiteInfo {
     siteName: string
 }
 
+export interface StreamInfo {
+    streamKey: string
+    viewCount: number
+}
+
 export class MinistreamApiClient {
     ENV: string
 
@@ -14,8 +19,8 @@ export class MinistreamApiClient {
         }
     }
 
-    async listStreams(): Promise<string[]> {
-        var data: string[] = [];
+    async listStreams(): Promise<StreamInfo[]> {
+        var data: StreamInfo[] = [];
         var url = "/whip"
         if (this.ENV !== "production") {
             url = "http://localhost:8080/whip"
@@ -25,16 +30,16 @@ export class MinistreamApiClient {
             const resp = await fetch(
                 url,
             );
-            data = await resp.json() as unknown as string[];
+            data = await resp.json() as unknown as StreamInfo[];
         }
         catch (e) {
             throw e;
         }
 
         const sortedStreams = data.sort((a, b) => {
-            if (a > b) {
+            if (a.streamKey > b.streamKey) {
                 return -1
-            } else if (a < b) {
+            } else if (a.streamKey < b.streamKey) {
                 return 1
             }
             return 0

src/js/app.tsx

@@ -2,7 +2,7 @@ import { createRoot } from "react-dom/client";
 import { Menu } from "./menu";
 import { createContext, useEffect, useState } from "react";
 import { MediaContainer } from "./media";
-import { MinistreamApiClient } from "./api";
+import { MinistreamApiClient, StreamInfo } from "./api";
 import React from "react";
 
 interface AppProps {
@@ -26,7 +26,7 @@ function setTitle(title: string) {
 }
 
 export function App({ api }: AppProps) {
-    const [streamList, setStreamList] = useState<string[]>([])
+    const [streamList, setStreamList] = useState<StreamInfo[]>([])
     const [selectedStream, setSelectedStream] = useState<string | null>(null)
 
     const updateSelect = (item: string | null) => {
@@ -38,10 +38,11 @@ export function App({ api }: AppProps) {
             setStreamList(list)
             if (list.length != streamList.length) {
                 setStreamList(list)
+                return
             }
 
             if (!list.every((_, idx) => {
-                return list[idx] === streamList[idx]
+                return list[idx].streamKey === streamList[idx].streamKey
             })) {
                 setStreamList(list)
             }

src/js/menu.tsx

@@ -1,10 +1,11 @@
 import { createRoot } from "react-dom/client";
 import React from "react";
+import { StreamInfo } from "./api";
 
 type StreamSelectCallback = (selected: string | null) => void
 
 interface MenuProps {
-    items: string[]
+    items: StreamInfo[]
     selectedItem: string | null
     selectCallback: StreamSelectCallback
 }
@@ -15,12 +16,22 @@ export function Menu({ items, selectedItem, selectCallback }: MenuProps) {
         return (
             <>
                 {items.map((value, idx) => {
-                    if (selectedItem == value) {
-                        return <li key={idx} className="menu-item menu-selected"><a href={"#" + value} className="menu-link">{value}</a></li>
+                    if (selectedItem == value.streamKey) {
+                        return <>
+                            <li key={idx} className="menu-item menu-selected">
+                                <a href={"#" + value} className="menu-link">{value.streamKey}</a>
+                                <p className="menu-viewcount">{value.viewCount}</p>
+                            </li>
+                        </>
                     } else {
-                        return <li key={idx} onClick={() => {
-                            selectCallback(value)
-                        }} className="menu-item"><a href={"#" + value} className="menu-link">{value}</a></li>
+                        return <>
+                            <li key={idx} onClick={() => {
+                                selectCallback(value.streamKey)
+                            }} className="menu-item">
+                                <a href={"#" + value.streamKey} className="menu-link">{value.streamKey}</a>
+                                <p className="menu-viewcount">{value.viewCount}</p>
+                            </li>
+                        </>
                     }
                 })}
             </>
@@ -31,7 +42,7 @@ export function Menu({ items, selectedItem, selectCallback }: MenuProps) {
             <aside>
                 <a className="menu-heading" onClick={() => {
                     selectCallback(null)
-                }}href="#">{title}</a>
+                }} href="#">{title}</a>
                 <ul className="menu-list">
                     {menuitems()}
                 </ul>