feat: add video support for intercom lines (WHIP/WHEP, H264)

e2e/tests/create-production.spec.ts

@@ -73,8 +73,14 @@ test.describe("Create Production", () => {
     await createProductionPage.goto();
     await createProductionPage.addLineButton.click();
     // Both lines should have Audio Feed checkboxes
+    await expect(createProductionPage.page.getByText("Audio Feed")).toHaveCount(
+      2
+    );
+    await expect(
+      createProductionPage.page.getByText("Video Enabled")
+    ).toHaveCount(2);
     const checkboxes = createProductionPage.page.getByRole("checkbox");
-    await expect(checkboxes).toHaveCount(2);
+    await expect(checkboxes).toHaveCount(4);
   });
 
   test("shows line numbers on cards", async ({ createProductionPage }) => {

src/api/api.ts

@@ -24,7 +24,11 @@ export type TPreset = {
 
 type TCreateProductionOptions = {
   name: string;
-  lines: { name: string; programOutputLine?: boolean }[];
+  lines: {
+    name: string;
+    programOutputLine?: boolean;
+    videoEnabled?: boolean;
+  }[];
 };
 
 type TParticipant = {
@@ -33,6 +37,8 @@ type TParticipant = {
   endpointId: string;
   isActive: boolean;
   isWhip: boolean;
+  isWhepReceiver?: boolean;
+  hasVideo: boolean;
 };
 
 type TLine = {
@@ -41,6 +47,8 @@ type TLine = {
   smbConferenceId: string;
   participants: TParticipant[];
   programOutputLine?: boolean;
+  videoEnabled?: boolean;
+  whepSourceSessionId?: string | null;
 };
 
 export type TBasicProductionResponse = {
@@ -155,6 +163,47 @@ export const API = {
         }),
       })
     ),
+
+  setLineWhepSource: async ({
+    productionId,
+    lineId,
+    sessionId,
+  }: {
+    productionId: string;
+    lineId: string;
+    sessionId: string | null;
+  }): Promise<{ lineId: string; pinnedSessionId: string | null }> =>
+    handleFetchRequest<{ lineId: string; pinnedSessionId: string | null }>(
+      fetch(`${API_URL}production/${productionId}/line/${lineId}/whep-source`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          ...(API_KEY ? { Authorization: `Bearer ${API_KEY}` } : {}),
+        },
+        body: JSON.stringify({ pinnedSessionId: sessionId }),
+      })
+    ),
+
+  setSessionVideoSource: async ({
+    sessionId,
+    pinnedSessionId,
+  }: {
+    sessionId: string;
+    pinnedSessionId: string | null;
+  }): Promise<{ sessionId: string; pinnedSessionId: string | null }> =>
+    handleFetchRequest<{
+      sessionId: string;
+      pinnedSessionId: string | null;
+    }>(
+      fetch(`${API_URL}session/${sessionId}/video-source`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          ...(API_KEY ? { Authorization: `Bearer ${API_KEY}` } : {}),
+        },
+        body: JSON.stringify({ pinnedSessionId }),
+      })
+    ),
   listProductions: ({
     searchParams,
   }: {
@@ -227,7 +276,8 @@ export const API = {
   addProductionLine: (
     productionId: string,
     name: string,
-    programOutputLine?: boolean
+    programOutputLine?: boolean,
+    videoEnabled?: boolean
   ): Promise<TLine> =>
     handleFetchRequest<TLine>(
       fetch(`${API_URL}production/${productionId}/line`, {
@@ -239,6 +289,7 @@ export const API = {
         body: JSON.stringify({
           name,
           programOutputLine,
+          videoEnabled,
         }),
       })
     ),
@@ -369,6 +420,7 @@ export const API = {
         body: JSON.stringify(options),
       })
     ),
+
   listPresets: (): Promise<{ presets: TPreset[] }> =>
     handleFetchRequest<{ presets: TPreset[] }>(
       fetch(`${API_URL}preset`, {
@@ -378,6 +430,7 @@ export const API = {
         },
       })
     ),
+
   deletePreset: async (id: string): Promise<void> => {
     const response = await fetch(`${API_URL}preset/${id}`, {
       method: "DELETE",
@@ -389,6 +442,7 @@ export const API = {
       await handleFetchRequest<void>(Promise.resolve(response));
     }
   },
+
   updatePreset: (
     id: string,
     update: {

src/assets/icons/icon.tsx

@@ -25,6 +25,13 @@ 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 DeleteSvg from "./delete.svg?react";
+import VideoOn from "./video_on.svg?react";
+import VideoOff from "./video_off.svg?react";
+import Pin from "./pin.svg?react";
+import Unpin from "./unpin.svg?react";
+import Fullscreen from "./fullscreen.svg?react";
+import FullscreenExit from "./fullscreen_exit.svg?react";
 
 export const MicMuted = () => <MicMute />;
 
@@ -79,3 +86,17 @@ export const SaveIcon = () => <Save />;
 export const HelpIcon = () => <Help />;
 
 export const WarningIcon = () => <Warning />;
+
+export const DeleteIcon = () => <DeleteSvg />;
+
+export const VideoOnIcon = () => <VideoOn />;
+
+export const VideoOffIcon = () => <VideoOff />;
+
+export const PinIcon = () => <Pin />;
+
+export const UnpinIcon = () => <Unpin />;
+
+export const FullscreenIcon = () => <Fullscreen />;
+
+export const FullscreenExitIcon = () => <FullscreenExit />;

src/components/calls-page/calls-page.tsx

@@ -30,6 +30,7 @@ import { ConfirmationModal } from "../verify-decision/confirmation-modal";
 import { HeaderActions } from "./header-actions";
 import { ProductionLines } from "./production-lines";
 import { ProgramLineJoinCard } from "./program-line-join-card";
+import { VideoLineJoinCard } from "./video-line-join-card";
 import { useCallsNavigation } from "./use-calls-navigation";
 import { useGlobalMuteHotkey } from "./use-global-mute-hotkey";
 import { usePreventPullToRefresh } from "./use-prevent-pull-to-refresh";
@@ -137,6 +138,16 @@ export const CallsPage = () => {
   const [pendingProgramLines, setPendingProgramLines] = useState<
     PendingProgramLine[]
   >([]);
+  type PendingVideoLine = {
+    productionId: string;
+    lineId: string;
+    lineName?: string;
+    productionName?: string;
+  };
+
+  const [pendingVideoRefs, setPendingVideoRefs] = useState<PendingVideoLine[]>(
+    []
+  );
   const {
     deregisterCall,
     registerCallList,
@@ -154,6 +165,7 @@ export const CallsPage = () => {
   const { initiateProductionCall } = useInitiateProductionCall({ dispatch });
   const autoJoinTriggeredRef = useRef(false);
   const pendingProgramKeysRef = useRef<Set<string>>(new Set());
+  const pendingVideoKeysRef = useRef<Set<string>>(new Set());
 
   const { productionId: paramProductionId, lineId: paramLineId } = useParams();
   const { search } = useLocation();
@@ -277,6 +289,7 @@ export const CallsPage = () => {
         );
 
         const program: PendingProgramLine[] = [];
+        const video: PendingVideoLine[] = [];
         const validRefs: typeof pendingCallRefs = [];
 
         pendingCallRefs.forEach((ref, i) => {
@@ -294,6 +307,13 @@ export const CallsPage = () => {
               productionName: prod.name,
               lineName: line.name,
             });
+          } else if (line.videoEnabled === true) {
+            video.push({
+              productionId: ref.productionId,
+              lineId: ref.lineId,
+              productionName: prod.name,
+              lineName: line.name,
+            });
           }
         });
 
@@ -304,6 +324,13 @@ export const CallsPage = () => {
           setPendingProgramLines(program);
         }
 
+        if (video.length > 0) {
+          pendingVideoKeysRef.current = new Set(
+            video.map((r) => `${r.productionId}:${r.lineId}`)
+          );
+          setPendingVideoRefs(video);
+        }
+
         if (validRefs.length !== pendingCallRefs.length) {
           navigate(buildCallsUrl(validRefs, autoCompanionUrl), {
             replace: true,
@@ -330,6 +357,7 @@ export const CallsPage = () => {
     autoJoinTriggeredRef.current = true;
 
     const programKeys = pendingProgramKeysRef.current;
+    const videoKeys = pendingVideoKeysRef.current;
 
     const existingKeys = new Set(
       Object.values(calls)
@@ -342,6 +370,7 @@ export const CallsPage = () => {
       .filter(
         (ref) =>
           !programKeys.has(`${ref.productionId}:${ref.lineId}`) &&
+          !videoKeys.has(`${ref.productionId}:${ref.lineId}`) &&
           !existingKeys.has(`${ref.productionId}:${ref.lineId}`)
       )
       .forEach((ref) => {
@@ -553,6 +582,42 @@ export const CallsPage = () => {
             />
           )}
         <CallsContainer>
+          {!!(
+            userSettings &&
+            userSettings.username &&
+            (userSettings.audioinput || userSettings.audiooutput)
+          ) &&
+            pendingVideoRefs
+              .filter(
+                (ref) =>
+                  !Object.values(calls).some(
+                    (c) =>
+                      c.joinProductionOptions?.productionId ===
+                        ref.productionId &&
+                      c.joinProductionOptions?.lineId === ref.lineId
+                  )
+              )
+              .map((ref) => (
+                <VideoLineJoinCard
+                  key={`${ref.productionId}:${ref.lineId}`}
+                  productionId={ref.productionId}
+                  lineId={ref.lineId}
+                  lineName={ref.lineName}
+                  productionName={ref.productionName}
+                  customGlobalMute={customGlobalMute}
+                  onJoined={() =>
+                    setPendingVideoRefs((prev) =>
+                      prev.filter(
+                        (r) =>
+                          !(
+                            r.productionId === ref.productionId &&
+                            r.lineId === ref.lineId
+                          )
+                      )
+                    )
+                  }
+                />
+              ))}
           {addCallActive &&
             !isGuest &&
             (productionId || addCallPreSelected) && (