feat: add participant list

src/api/api.ts

@@ -16,7 +16,7 @@ type TLine = {
   name: string;
   id: string;
   smbid: string;
-  connections: unknown;
+  participants: { name: string; sessionid: string }[];
 };
 
 type TFetchProductionResponse = {

src/components/production-line/production-line.tsx

@@ -1,12 +1,15 @@
 import styled from "@emotion/styled";
-import { FC, useEffect, useRef } from "react";
+import { FC, useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useGlobalState } from "../../global-state/context-provider.tsx";
 import { useAudioInput } from "./use-audio-input.ts";
 import { useRtcConnection } from "./use-rtc-connection.ts";
 import { useEstablishSession } from "./use-establish-session.ts";
 import { ActionButton } from "../landing-page/form-elements.tsx";
 import { useAudioElement } from "./use-audio-element.ts";
+import { UserList } from "./user-list.tsx";
+import { API } from "../../api/api.ts";
+import { noop } from "../../helpers.ts";
 
 const TempDiv = styled.div`
   padding: 1rem;
@@ -16,6 +19,9 @@ export const ProductionLine: FC = () => {
   const [{ joinProductionOptions }, dispatch] = useGlobalState();
   const navigate = useNavigate();
   const audioContainerRef = useRef<HTMLDivElement>(null);
+  const [participants, setParticipants] = useState<
+    { name: string; sessionid: string }[] | null
+  >(null);
 
   const { playbackState, audioElement } = useAudioElement({
     audioContainerRef,
@@ -37,6 +43,26 @@ export const ProductionLine: FC = () => {
     audioElement,
   });
 
+  // Participant list, TODO extract hook to separate file
+  useEffect(() => {
+    if (!joinProductionOptions) return noop;
+
+    let interval: number | null = null;
+
+    const productionId = parseInt(joinProductionOptions.productionId, 10);
+    const lineId = parseInt(joinProductionOptions.lineId, 10);
+
+    interval = window.setInterval(() => {
+      API.fetchProductionLine(productionId, lineId)
+        .then((line) => setParticipants(line.participants))
+        .catch(console.error);
+    }, 1000);
+
+    return () => {
+      window.clearInterval(interval);
+    };
+  }, [joinProductionOptions]);
+
   // TODO temporary, this view should handle direct links
   useEffect(() => {
     if (!joinProductionOptions) {
@@ -73,6 +99,8 @@ export const ProductionLine: FC = () => {
       {connectionState && (
         <TempDiv>RTC Connection State: {connectionState}</TempDiv>
       )}
+
+      <UserList participants={participants} />
     </div>
   );
 };

src/components/production-line/user-list.tsx

@@ -0,0 +1,43 @@
+import styled from "@emotion/styled";
+import { DisplayContainerHeader } from "../landing-page/display-container-header.tsx";
+
+const ListWrapper = styled.div`
+  padding: 1rem;
+`;
+
+const User = styled.div`
+  margin: 0 0 1rem;
+  background: #1a1a1a;
+  padding: 1rem;
+  color: #ddd;
+  max-width: 32rem;
+  display: flex;
+  align-items: center;
+`;
+
+const GreenCircle = styled.div`
+  width: 1rem;
+  height: 1rem;
+  border-radius: 2rem;
+  display: inline-block;
+  background: #7be27b;
+  margin: 0 1rem 0 0;
+`;
+
+type TUserListOptions = {
+  participants: { name: string; sessionid: string }[] | null;
+};
+export const UserList = ({ participants }: TUserListOptions) => {
+  if (!participants) return null;
+
+  return (
+    <ListWrapper>
+      <DisplayContainerHeader>Participants</DisplayContainerHeader>
+      {participants.map((p) => (
+        <User key={p.sessionid}>
+          <GreenCircle /> <div>{p.name}</div>
+        </User>
+      ))}
+    </ListWrapper>
+  );
+};