Feature/io bridge frontend

src/App.tsx

@@ -23,6 +23,7 @@ import { ManageProductionsPage } from "./components/manage-productions-page/mana
 import { CreateProductionPage } from "./components/create-production/create-production-page.tsx";
 import { useSetupTokenRefresh } from "./hooks/use-reauth.tsx";
 import { TUserSettings } from "./components/user-settings/types";
+import { IOBridgePage } from "./components/io-bridge-page/io-bridge-page.tsx";
 
 const DisplayBoxPositioningContainer = styled(FlexContainer)`
   justify-content: center;
@@ -152,6 +153,13 @@ const AppContent = ({
                   }
                   errorElement={<ErrorPage />}
                 />
+                <Route
+                  path="/manage-io-bridge"
+                  element={
+                    <IOBridgePage setApiError={() => setApiError(true)} />
+                  }
+                  errorElement={<ErrorPage />}
+                />
                 <Route
                   path="/production-calls/production/:productionId/line/:lineId"
                   element={<CallsPage />}

src/api/api.ts

@@ -1,11 +1,18 @@
 import { handleFetchRequest } from "./handle-fetch-request.ts";
 
 const API_VERSION = import.meta.env.VITE_BACKEND_API_VERSION ?? "api/v1/";
-const API_URL =
-  `${import.meta.env.VITE_BACKEND_URL.replace(/\/+$/, "")}/${API_VERSION}` ||
-  `${window.location.origin}/${API_VERSION}`;
+const API_URL = import.meta.env.VITE_BACKEND_URL
+  ? `${import.meta.env.VITE_BACKEND_URL.replace(/\/+$/, "")}/${API_VERSION}`
+  : `${window.location.origin}/${API_VERSION}`;
 const API_KEY = import.meta.env.VITE_BACKEND_API_KEY;
 
+// Helper to get backend base URL for constructing WHIP/WHEP URLs
+export const getBackendBaseUrl = (): string => {
+  return import.meta.env.VITE_BACKEND_URL
+    ? import.meta.env.VITE_BACKEND_URL.replace(/\/+$/, "")
+    : window.location.origin;
+};
+
 type TCreateProductionOptions = {
   name: string;
   lines: { name: string; programOutputLine?: boolean }[];
@@ -33,6 +40,74 @@ export type TBasicProductionResponse = {
   lines: TLine[];
 };
 
+export type TSavedTransmitter = {
+  _id: string;
+  label?: string;
+  port: number;
+  productionId: number;
+  lineId: number;
+  whipUrl: string;
+  passThroughUrl?: string;
+  mode: "caller" | "listener";
+  srtUrl?: string;
+  status: "idle" | "running" | "stopped" | "failed";
+  createdAt?: string;
+  updatedAt?: string;
+};
+
+export type TSavedReceiver = {
+  _id: string;
+  label?: string;
+  productionId: number;
+  lineId: number;
+  whepUrl: string;
+  srtUrl: string;
+  status: "idle" | "running" | "stopped" | "failed";
+  createdAt?: string;
+  updatedAt?: string;
+};
+
+export enum TSrtMode {
+  CALLER = "caller",
+  LISTENER = "listener",
+}
+
+export enum TBridgeState {
+  IDLE = "idle",
+  RUNNING = "running",
+  STOPPED = "stopped",
+  FAILED = "failed",
+}
+
+export type TEditTransmitter = {
+  id: string;
+  state: TBridgeState;
+};
+
+export type TEditReceiver = {
+  id: string;
+  state: TBridgeState;
+};
+
+export type TPatchTransmitter = {
+  id: string;
+  label?: string;
+  productionId?: number;
+  lineId?: number;
+};
+
+export type TPatchReceiver = {
+  id: string;
+  label?: string;
+  productionId?: number;
+  lineId?: number;
+};
+
+export type TBridgeConfig = {
+  whipGatewayEnabled: boolean;
+  whepGatewayEnabled: boolean;
+};
+
 export type TListProductionsResponse = {
   productions: TBasicProductionResponse[];
   offset: 0;
@@ -292,4 +367,166 @@ export const API = {
       })
     );
   },
+
+  // Bridge configuration
+  fetchBridgeConfig: (): Promise<TBridgeConfig> =>
+    handleFetchRequest<TBridgeConfig>(
+      fetch(`${API_URL}bridge/config`, {
+        method: "GET",
+        headers: {
+          ...(API_KEY ? { Authorization: `Bearer ${API_KEY}` } : {}),
+        },
+      })
+    ),
+
+  // Transmitter (Bridge TX) endpoints - via intercom-manager
+  createTransmitter: async (data: {
+    label?: string;
+    port: number;
+    productionId: number;
+    lineId: number;
+    whipUrl: string;
+    passThroughUrl?: string;
+    mode: "caller" | "listener";
+    srtUrl?: string;
+  }) =>
+    handleFetchRequest<TSavedTransmitter>(
+      fetch(`${API_URL}bridge/tx`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...(API_KEY ? { Authorization: `Bearer ${API_KEY}` } : {}),
+        },
+        body: JSON.stringify(data),
+      })
+    ),
+  fetchTransmitterList: (): Promise<TSavedTransmitter[]> =>
+    handleFetchRequest<{ transmitters: TSavedTransmitter[] }>(
+      fetch(`${API_URL}bridge/tx`, {
+        method: "GET",
+        headers: {
+          ...(API_KEY ? { Authorization: `Bearer ${API_KEY}` } : {}),
+        },
+      })
+    ).then((res) => res?.transmitters || []),
+  fetchTransmitter: (id: string): Promise<TSavedTransmitter> =>
+    handleFetchRequest<TSavedTransmitter>(
+      fetch(`${API_URL}bridge/tx/${id}`, {
+        method: "GET",
+        headers: {
+          ...(API_KEY ? { Authorization: `Bearer ${API_KEY}` } : {}),
+        },
+      })
+    ),
+  updateTransmitterState: async (data: TEditTransmitter) =>
+    handleFetchRequest<TSavedTransmitter>(
+      fetch(`${API_URL}bridge/tx/${data.id}/state`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+          ...(API_KEY ? { Authorization: `Bearer ${API_KEY}` } : {}),
+        },
+        body: JSON.stringify({
+          desired: data.state,
+        }),
+      })
+    ),
+  updateTransmitter: async (data: TPatchTransmitter) =>
+    handleFetchRequest<TSavedTransmitter>(
+      fetch(`${API_URL}bridge/tx/${data.id}`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          ...(API_KEY ? { Authorization: `Bearer ${API_KEY}` } : {}),
+        },
+        body: JSON.stringify({
+          label: data.label,
+          productionId: data.productionId,
+          lineId: data.lineId,
+        }),
+      })
+    ),
+  deleteTransmitter: async (id: string): Promise<string> =>
+    handleFetchRequest<string>(
+      fetch(`${API_URL}bridge/tx/${id}`, {
+        method: "DELETE",
+        headers: {
+          ...(API_KEY ? { Authorization: `Bearer ${API_KEY}` } : {}),
+        },
+      })
+    ),
+
+  // Receiver (Bridge RX) endpoints - via intercom-manager
+  createReceiver: async (data: {
+    label?: string;
+    productionId: number;
+    lineId: number;
+    whepUrl: string;
+    srtUrl: string;
+  }) =>
+    handleFetchRequest<TSavedReceiver>(
+      fetch(`${API_URL}bridge/rx`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...(API_KEY ? { Authorization: `Bearer ${API_KEY}` } : {}),
+        },
+        body: JSON.stringify(data),
+      })
+    ),
+  fetchReceiverList: (): Promise<TSavedReceiver[]> =>
+    handleFetchRequest<{ receivers: TSavedReceiver[] }>(
+      fetch(`${API_URL}bridge/rx`, {
+        method: "GET",
+        headers: {
+          ...(API_KEY ? { Authorization: `Bearer ${API_KEY}` } : {}),
+        },
+      })
+    ).then((res) => res?.receivers || []),
+  fetchReceiver: (id: string): Promise<TSavedReceiver> =>
+    handleFetchRequest<TSavedReceiver>(
+      fetch(`${API_URL}bridge/rx/${id}`, {
+        method: "GET",
+        headers: {
+          ...(API_KEY ? { Authorization: `Bearer ${API_KEY}` } : {}),
+        },
+      })
+    ),
+  updateReceiverState: async (data: TEditReceiver) =>
+    handleFetchRequest<TSavedReceiver>(
+      fetch(`${API_URL}bridge/rx/${data.id}/state`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+          ...(API_KEY ? { Authorization: `Bearer ${API_KEY}` } : {}),
+        },
+        body: JSON.stringify({
+          desired: data.state,
+        }),
+      })
+    ),
+  updateReceiver: async (data: TPatchReceiver) =>
+    handleFetchRequest<TSavedReceiver>(
+      fetch(`${API_URL}bridge/rx/${data.id}`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          ...(API_KEY ? { Authorization: `Bearer ${API_KEY}` } : {}),
+        },
+        body: JSON.stringify({
+          label: data.label,
+          productionId: data.productionId,
+          lineId: data.lineId,
+        }),
+      })
+    ),
+  deleteReceiver: async (id: string): Promise<string> =>
+    handleFetchRequest<string>(
+      fetch(`${API_URL}bridge/rx/${id}`, {
+        method: "DELETE",
+        headers: {
+          ...(API_KEY ? { Authorization: `Bearer ${API_KEY}` } : {}),
+        },
+      })
+    ),
 };

src/assets/icons/icon.tsx

@@ -25,6 +25,8 @@ import VolumeOff from "./volume_off.svg?react";
 import VolumeOn from "./volume_on.svg?react";
 import Warning from "./warning.svg?react";
 import WhipSvg from "./whip_user.svg?react";
+import Stop from "./stop.svg?react";
+import Play from "./play.svg?react";
 
 export const MicMuted = () => <MicMute />;
 
@@ -79,3 +81,7 @@ export const SaveIcon = () => <Save />;
 export const HelpIcon = () => <Help />;
 
 export const WarningIcon = () => <Warning />;
+
+export const StopIcon = () => <Stop />;
+
+export const PlayIcon = () => <Play />;

src/components/delete-button/delete-button-components.ts

@@ -5,6 +5,7 @@ export const ButtonsWrapper = styled.div`
   display: flex;
   justify-content: flex-end;
   margin: 1rem 0 1rem 0;
+  gap: 1rem;
 `;
 
 export const DeleteButton = styled(SecondaryButton)`