chore(deps): bump react-router-dom from 6.28.0 to 7.1.3

package.json

@@ -19,13 +19,14 @@
     "@emotion/styled": "^11.11.5",
     "@eyevinn/media-event-filter": "^3.4.0",
     "@hookform/error-message": "^2.0.1",
+    "@martinstark/storage-ts": "^1.1.0",
     "@types/react-router-dom": "^5.3.3",
     "bowser": "^2.11.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.51.5",
     "react-hotkeys-hook": "^4.5.0",
-    "react-router-dom": "^6.26.2"
+    "react-router-dom": "^7.1.3"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.3.0",

src/App.tsx

@@ -1,24 +1,26 @@
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import styled from "@emotion/styled";
 import { useState } from "react";
-import { ProductionLine } from "./components/production-line/production-line.tsx";
 import { ErrorPage } from "./components/router-error.tsx";
-import { useDevicePermissions } from "./use-device-permission.ts";
+import { useDevicePermissions } from "./hooks/use-device-permission.ts";
 import { LandingPage } from "./components/landing-page/landing-page.tsx";
 import { useInitializeGlobalStateReducer } from "./global-state/global-state-reducer.ts";
 import { GlobalStateContext } from "./global-state/context-provider.tsx";
-import { Header } from "./components/header.tsx";
 import { ErrorBanner } from "./components/error";
-import { useFetchDevices } from "./use-fetch-devices.ts";
+import { useFetchDevices } from "./hooks/use-fetch-devices.ts";
 import {
   DisplayContainer,
   FlexContainer,
 } from "./components/generic-components.ts";
 import { DisplayWarning } from "./components/display-box.tsx";
-import { ManageProductions } from "./components/manage-productions/manage-productions.tsx";
 import { isValidBrowser } from "./bowser.ts";
 import { DisplayContainerHeader } from "./components/landing-page/display-container-header.tsx";
 import { NavigateToRootButton } from "./components/navigate-to-root-button/navigate-to-root-button.tsx";
+import { CallsPage } from "./components/calls-page/calls-page.tsx";
+import { CreateProductionPage } from "./components/create-production/create-production-page.tsx";
+import { Header } from "./components/header.tsx";
+import { useLocalUserSettings } from "./hooks/use-local-user-settings.ts";
+import { ManageProductionsPage } from "./components/manage-productions-page/manage-productions-page.tsx";
 
 const DisplayBoxPositioningContainer = styled(FlexContainer)`
   justify-content: center;
@@ -49,14 +51,16 @@ const App = () => {
   const continueToApp = isValidBrowser || unsupportedContinue;
   const { denied, permission } = useDevicePermissions({ continueToApp });
   const initializedGlobalState = useInitializeGlobalStateReducer();
-  const [, dispatch] = initializedGlobalState;
+  const [{ devices, userSettings }, dispatch] = initializedGlobalState;
   const [apiError, setApiError] = useState(false);
 
   useFetchDevices({
     dispatch,
     permission,
   });
 
+  useLocalUserSettings({ devices, dispatch });
+
   return (
     <GlobalStateContext.Provider value={initializedGlobalState}>
       <BrowserRouter>
@@ -110,7 +114,7 @@ const App = () => {
                 />
               </DisplayBoxPositioningContainer>
             )}
-            {permission && !denied && !apiError && (
+            {permission && !denied && !apiError && userSettings && (
               <Routes>
                 <>
                   <Route
@@ -120,14 +124,23 @@ const App = () => {
                     }
                     errorElement={<ErrorPage />}
                   />
+                  <Route
+                    path="/create-production"
+                    element={
+                      <CreateProductionPage
+                        setApiError={() => setApiError(true)}
+                      />
+                    }
+                    errorElement={<ErrorPage />}
+                  />
                   <Route
                     path="/manage-productions"
-                    element={<ManageProductions />}
+                    element={<ManageProductionsPage />}
                     errorElement={<ErrorPage />}
                   />
                   <Route
-                    path="/production/:productionId/line/:lineId"
-                    element={<ProductionLine />}
+                    path="/production-calls/production/:productionId/line/:lineId"
+                    element={<CallsPage />}
                     errorElement={<ErrorPage />}
                   />
                   <Route path="*" element={<NotFound />} />

src/api/api.ts

@@ -8,7 +8,7 @@ const API_KEY = import.meta.env.VITE_BACKEND_API_KEY;
 
 type TCreateProductionOptions = {
   name: string;
-  lines: { name: string }[];
+  lines: { name: string; programOutputLine?: boolean }[];
 };
 
 type TParticipant = {
@@ -23,11 +23,13 @@ type TLine = {
   id: string;
   smbConferenceId: string;
   participants: TParticipant[];
+  programOutputLine?: boolean;
 };
 
-type TBasicProductionResponse = {
+export type TBasicProductionResponse = {
   name: string;
   productionId: string;
+  lines?: TLine[];
 };
 
 type TFetchProductionResponse = TBasicProductionResponse & {
@@ -104,7 +106,7 @@ export const API = {
         },
       })
     ),
-  deleteProduction: (id: number): Promise<string> =>
+  deleteProduction: (id: string): Promise<string> =>
     handleFetchRequest<string>(
       fetch(`${API_URL}production/${id}`, {
         method: "DELETE",
@@ -131,7 +133,11 @@ export const API = {
         },
       })
     ),
-  addProductionLine: (productionId: number, name: string): Promise<TLine> =>
+  addProductionLine: (
+    productionId: string,
+    name: string,
+    programOutputLine?: boolean
+  ): Promise<TLine> =>
     handleFetchRequest<TLine>(
       fetch(`${API_URL}production/${productionId}/line`, {
         method: "POST",
@@ -141,12 +147,13 @@ export const API = {
         },
         body: JSON.stringify({
           name,
+          programOutputLine,
         }),
       })
     ),
   deleteProductionLine: (
-    productionId: number,
-    lineId: number
+    productionId: string,
+    lineId: string
   ): Promise<string> =>
     handleFetchRequest<string>(
       fetch(`${API_URL}production/${productionId}/line/${lineId}`, {
@@ -156,6 +163,7 @@ export const API = {
         },
       })
     ),
+
   offerAudioSession: ({
     productionId,
     lineId,

src/assets/icons/icon.tsx

@@ -5,10 +5,19 @@ import RemoveSvg from "./clear.svg?react";
 import VolumeOn from "./volume_on.svg?react";
 import VolumeOff from "./volume_off.svg?react";
 import UserSvg from "./user.svg?react";
-import ConfirmSvg from "./done.svg?react";
-import StepLeftSvg from "./chevron_left.svg?react";
-import StepRightSvg from "./navigate_next.svg?react";
+import RefreshSvg from "./refresh.svg?react";
 import Settings from "./settings.svg?react";
+import NoSound from "./no_sound.svg?react";
+import Headset from "./headset.svg?react";
+import UserSettings from "./user_settings.svg?react";
+import ChevronDown from "./chevron_down.svg?react";
+import ChevronUp from "./chevron_up.svg?react";
+import Users from "./users.svg?react";
+import Add from "./add.svg?react";
+import Edit from "./edit.svg?react";
+import TV from "./tv.svg?react";
+import Megaphone from "./campaign.svg?react";
+import Logout from "./logout.svg?react";
 
 export const MicMuted = () => <MicMute />;
 
@@ -24,10 +33,28 @@ export const SpeakerOn = () => <VolumeOn />;
 
 export const UserIcon = () => <UserSvg />;
 
-export const ConfirmIcon = () => <ConfirmSvg />;
+export const RefreshIcon = () => <RefreshSvg />;
 
-export const StepLeftIcon = () => <StepLeftSvg />;
+export const SettingsIcon = () => <Settings />;
 
-export const StepRightIcon = () => <StepRightSvg />;
+export const NoSoundIcon = () => <NoSound />;
 
-export const SettingsIcon = () => <Settings />;
+export const UserSettingsIcon = () => <UserSettings />;
+
+export const ChevronDownIcon = () => <ChevronDown />;
+
+export const ChevronUpIcon = () => <ChevronUp />;
+
+export const HeadsetIcon = () => <Headset />;
+
+export const UsersIcon = () => <Users />;
+
+export const AddIcon = () => <Add />;
+
+export const EditIcon = () => <Edit />;
+
+export const TVIcon = () => <TV />;
+
+export const MegaphoneIcon = () => <Megaphone />;
+
+export const LogoutIcon = () => <Logout />;