Fix: adds real audiodevice type

.eslintrc.cjs

@@ -48,5 +48,6 @@ module.exports = {
       { allowConstantExport: true },
     ],
     "no-console": "off",
+    "no-underscore-dangle": "off",
   },
 };

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 { IngestsPage } from "./components/ingests-page/ingests-page.tsx";
 
 const DisplayBoxPositioningContainer = styled(FlexContainer)`
   justify-content: center;
@@ -150,6 +151,13 @@ const AppContent = ({
                   }
                   errorElement={<ErrorPage />}
                 />
+                <Route
+                  path="/ingests"
+                  element={
+                    <IngestsPage setApiError={() => setApiError(true)} />
+                  }
+                  errorElement={<ErrorPage />}
+                />
                 <Route
                   path="/production-calls/production/:productionId/line/:lineId"
                   element={<CallsPage />}

src/api/api.ts

@@ -32,6 +32,43 @@ export type TBasicProductionResponse = {
   lines: TLine[];
 };
 
+export type TAudioDevice = {
+  name: string;
+  maxInputChannels: number;
+  maxOutputChannels: number;
+  defaultSampleRate: number;
+  defaultLowInputLatency: number;
+  defaultLowOutputLatency: number;
+  defaultHighInputLatency: number;
+  defaultHighOutputLatency: number;
+  isInput: boolean;
+  isOutput: boolean;
+  hostApiName: string;
+  label?: string;
+};
+
+export type TSavedIngest = {
+  _id: string;
+  label: string;
+  ipAddress: string;
+  deviceOutput: TAudioDevice[];
+  deviceInput: TAudioDevice[];
+};
+
+export type TEditIngest = {
+  _id: string;
+  label?: string;
+  deviceOutput?: TAudioDevice;
+  deviceInput?: TAudioDevice;
+};
+
+export type TListIngestResponse = {
+  ingests: TSavedIngest[];
+  offset: 0;
+  limit: 0;
+  totalItems: 0;
+};
+
 export type TListProductionsResponse = {
   productions: TBasicProductionResponse[];
   offset: 0;
@@ -291,4 +328,60 @@ export const API = {
       })
     );
   },
+  fetchIngestList: (): Promise<TListIngestResponse> =>
+    handleFetchRequest<TListIngestResponse>(
+      fetch(`${API_URL}ingest`, {
+        method: "GET",
+        headers: {
+          ...(API_KEY ? { Authorization: `Bearer ${API_KEY}` } : {}),
+        },
+      })
+    ),
+  createIngest: async (data: { label: string; ipAddress: string }) =>
+    handleFetchRequest<boolean>(
+      fetch(`${API_URL}ingest/`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...(API_KEY ? { Authorization: `Bearer ${API_KEY}` } : {}),
+        },
+        body: JSON.stringify({
+          label: data.label,
+          ipAddress: data.ipAddress,
+        }),
+      })
+    ),
+  fetchIngest: (id: number): Promise<TSavedIngest> =>
+    handleFetchRequest<TSavedIngest>(
+      fetch(`${API_URL}ingest/${id}`, {
+        method: "GET",
+        headers: {
+          ...(API_KEY ? { Authorization: `Bearer ${API_KEY}` } : {}),
+        },
+      })
+    ),
+  updateIngest: async (data: TEditIngest) =>
+    handleFetchRequest<TEditIngest>(
+      fetch(`${API_URL}ingest/${data._id}`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          ...(API_KEY ? { Authorization: `Bearer ${API_KEY}` } : {}),
+        },
+        body: JSON.stringify({
+          label: data.label,
+          deviceOutput: data.deviceOutput,
+          deviceInput: data.deviceInput,
+        }),
+      })
+    ),
+  deleteIngest: async (id: string): Promise<string> =>
+    handleFetchRequest<string>(
+      fetch(`${API_URL}ingest/${id}`, {
+        method: "DELETE",
+        headers: {
+          ...(API_KEY ? { Authorization: `Bearer ${API_KEY}` } : {}),
+        },
+      })
+    ),
 };

src/components/audio-feed-modal/audio-feed-modal.tsx

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { Modal } from "../modal/modal";
-import { PrimaryButton } from "../landing-page/form-elements";
+import { PrimaryButton } from "../form-elements/form-elements";
 import { Checkbox } from "../checkbox/checkbox";
 
 const ContentWrapper = styled.div`

src/components/calls-page/connect-to-ws-button.tsx

@@ -5,7 +5,7 @@ import { useGlobalState } from "../../global-state/context-provider";
 import { useWebSocket } from "../../hooks/use-websocket";
 import { useWebsocketActions } from "../../hooks/use-websocket-actions";
 import { useWebsocketReconnect } from "../../hooks/use-websocket-reconnect";
-import { PrimaryButton } from "../landing-page/form-elements";
+import { PrimaryButton } from "../form-elements/form-elements";
 import { Spinner } from "../loader/loader";
 import { ConnectToWsModal } from "./connect-to-ws-modal";
 

src/components/calls-page/connect-to-ws-modal.tsx

@@ -4,7 +4,7 @@ import {
   FormInput,
   PrimaryButton,
   SecondaryButton,
-} from "../landing-page/form-elements";
+} from "../form-elements/form-elements";
 import { Modal } from "../modal/modal";
 
 const ButtonWrapper = styled.div`

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

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 import { MicMuted, MicUnmuted } from "../../assets/icons/icon";
 import { isMobile, isTablet } from "../../bowser";
-import { PrimaryButton, SecondaryButton } from "../landing-page/form-elements";
+import { PrimaryButton, SecondaryButton } from "../form-elements/form-elements";
 import { ConnectToWSButton } from "./connect-to-ws-button";
 import { useGlobalMuteToggle } from "./use-global-mute-toggle";
 

src/components/copy-button/copy-all-links-button.tsx

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { PrimaryButton } from "../landing-page/form-elements";
+import { PrimaryButton } from "../form-elements/form-elements";
 import { useCopyLinks } from "./use-copy-links";
 import { TProduction } from "../production-line/types";
 import { CheckIcon } from "../../assets/icons/icon";

src/components/create-production/create-production-buttons.tsx

@@ -1,4 +1,4 @@
-import { PrimaryButton, SecondaryButton } from "../landing-page/form-elements";
+import { PrimaryButton, SecondaryButton } from "../form-elements/form-elements";
 import { Spinner } from "../loader/loader";
 import { ButtonContainer, ButtonWrapper } from "./create-production-components";
 

src/components/create-production/create-production-page.tsx

@@ -6,7 +6,7 @@ import {
 } from "react-hook-form";
 import { useEffect, useState } from "react";
 import { DisplayContainerHeader } from "../landing-page/display-container-header.tsx";
-import { FormInput } from "../landing-page/form-elements.tsx";
+import { FormInput } from "../form-elements/form-elements.tsx";
 import { useGlobalState } from "../../global-state/context-provider.tsx";
 import {
   ListItemWrapper,

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

@@ -0,0 +1,25 @@
+import styled from "@emotion/styled";
+import { SecondaryButton } from "../form-elements/form-elements";
+
+export const ButtonsWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin: 1rem 0 1rem 0;
+`;
+
+export const DeleteButton = styled(SecondaryButton)`
+  display: flex;
+  align-items: center;
+  background: #d15c5c;
+  color: white;
+
+  &:disabled {
+    background: #ab5252;
+  }
+`;
+
+export const SpinnerWrapper = styled.div`
+  position: relative;
+  width: 2rem;
+  height: 2rem;
+`;

src/components/display-box.tsx

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { PrimaryButton } from "./landing-page/form-elements";
+import { PrimaryButton } from "./form-elements/form-elements";
 
 const borderRadius = 0.5;
 

src/components/landing-page/form-elements.tsx → src/components/form-elements/form-elements.tsx

@@ -40,6 +40,10 @@ export const FormInput = styled.input`
 
   &.edit-name {
     margin: 0;
+
+    &.device-label {
+      font-size: 1.2rem;
+    }
   }
 `;
 
@@ -52,6 +56,12 @@ export const FormSelect = styled.select`
   border-radius: 0.5rem;
   background: #32383b;
   color: white;
+
+  &.ingest {
+    display: flex;
+    align-items: center;
+    margin: 0 1rem 0 0;
+  }
 `;
 
 export const FormLabel = styled.label`

src/components/generic-components.ts

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { FormContainer } from "./landing-page/form-elements";
+import { FormContainer } from "./form-elements/form-elements";
 import { isMobile } from "../bowser";
 
 // Screen size breakpoints based on width

src/components/ingests-page/add-ingest-modal/add-ingest-form.tsx

@@ -0,0 +1,92 @@
+import { SubmitHandler, useForm } from "react-hook-form";
+import { useEffect, useState } from "react";
+import { useSubmitOnEnter } from "../../../hooks/use-submit-form-enter-press";
+import { ButtonWrapper } from "../../generic-components";
+import { FormInput } from "../../form-elements/form-elements";
+import { FormItem } from "../../user-settings-form/form-item";
+import { FormWrapper, SubmitButton } from "../ingest-components";
+import { useCreateIngest } from "./use-create-ingest";
+import { Spinner } from "../../loader/loader";
+import { SpinnerWrapper } from "../../delete-button/delete-button-components";
+
+type FormValues = {
+  ingestLabel: string;
+  ipAddress: string;
+};
+
+type AddIngestFormProps = {
+  onSave?: () => void;
+};
+
+export const AddIngestForm = ({ onSave }: AddIngestFormProps) => {
+  const [createIngest, setCreateIngest] = useState<FormValues | null>(null);
+  const {
+    formState: { errors, isValid },
+    register,
+    handleSubmit,
+  } = useForm<FormValues>({
+    resetOptions: {
+      keepDirtyValues: true, // user-interacted input will be retained
+      keepErrors: true, // input errors will be retained with value update
+    },
+  });
+
+  const { loading, success } = useCreateIngest({ createIngest });
+
+  useEffect(() => {
+    if (success) {
+      setCreateIngest(null);
+      if (onSave) onSave();
+    }
+  }, [success, onSave]);
+
+  const onSubmit: SubmitHandler<FormValues> = (data) => {
+    setCreateIngest(data);
+  };
+
+  useSubmitOnEnter<FormValues>({
+    handleSubmit,
+    submitHandler: onSubmit,
+    shouldSubmitOnEnter: true,
+  });
+
+  return (
+    <FormWrapper>
+      <FormItem label="Name" fieldName="ingestLabel" errors={errors}>
+        <FormInput
+          // eslint-disable-next-line
+          {...register(`ingestLabel`, {
+            required: "Ingest name is required",
+            minLength: 1,
+          })}
+          placeholder="Name for Ingest"
+        />
+      </FormItem>
+      <FormItem label="Server IP Address" fieldName="ipAddress" errors={errors}>
+        <FormInput
+          // eslint-disable-next-line
+          {...register(`ipAddress`, {
+            required: "IP address is required",
+            minLength: 1,
+          })}
+          placeholder="192.168.1.1"
+        />
+      </FormItem>
+      <ButtonWrapper>
+        <SubmitButton
+          type="button"
+          disabled={!isValid}
+          onClick={handleSubmit(onSubmit)}
+          shouldSubmitOnEnter
+        >
+          Add Ingest
+          {loading && (
+            <SpinnerWrapper>
+              <Spinner className="production-list" />
+            </SpinnerWrapper>
+          )}
+        </SubmitButton>
+      </ButtonWrapper>
+    </FormWrapper>
+  );
+};

src/components/ingests-page/add-ingest-modal/ingest-form.tsx

@@ -0,0 +1,21 @@
+import { FC } from "react";
+import { DisplayContainerHeader } from "../../landing-page/display-container-header";
+import { ResponsiveFormContainer } from "../../generic-components";
+import { AddIngestForm } from "./add-ingest-form";
+
+interface IngestFormModalProps {
+  className?: string;
+  onSave?: () => void;
+}
+
+export const IngestFormModal: FC<IngestFormModalProps> = (props) => {
+  const { className, onSave } = props;
+
+  return (
+    <ResponsiveFormContainer className={className}>
+      <DisplayContainerHeader>Add New Ingest</DisplayContainerHeader>
+
+      <AddIngestForm onSave={onSave} />
+    </ResponsiveFormContainer>
+  );
+};

src/components/ingests-page/add-ingest-modal/use-create-ingest.tsx

@@ -0,0 +1,24 @@
+import { API } from "../../../api/api";
+import { useRequest } from "../../../hooks/use-request";
+
+type FormValues = {
+  ingestLabel: string;
+  ipAddress: string;
+};
+
+export const useCreateIngest = ({
+  createIngest,
+}: {
+  createIngest: FormValues | null;
+}) => {
+  return useRequest<{ label: string; ipAddress: string }, boolean>({
+    params: createIngest
+      ? {
+          label: createIngest.ingestLabel,
+          ipAddress: createIngest.ipAddress,
+        }
+      : null,
+    apiCall: API.createIngest,
+    errorMessage: (i) => `Failed to create ingest: ${i.label}`,
+  });
+};