Feat/change device during call (#212)

Co-authored-by: Lucas Maupin <[email protected]>
Eyevinn · Dec 16, 2024 · 7a51cb5 · 7a51cb5
1 parent 08e4b92
commit 7a51cb5
Show file tree

Hide file tree

Showing 12 changed files with 412 additions and 70 deletions.
diff --git a/src/assets/icons/icon.tsx b/src/assets/icons/icon.tsx
@@ -8,6 +8,7 @@ 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 ChevronDown from "./chevron_down.svg?react";
 import ChevronUp from "./chevron_up.svg?react";
@@ -33,6 +34,8 @@ export const StepLeftIcon = () => <StepLeftSvg />;
 
 export const StepRightIcon = () => <StepRightSvg />;
 
+export const RefreshIcon = () => <RefreshSvg />;
+
 export const SettingsIcon = () => <Settings />;
 
 export const ChevronDownIcon = () => <ChevronDown />;

diff --git a/src/assets/icons/refresh.svg b/src/assets/icons/refresh.svg
diff --git a/src/bowser.ts b/src/bowser.ts
@@ -2,6 +2,7 @@ import Bowser from "bowser";
 
 const deviceInfo = Bowser.parse(window.navigator.userAgent);
 const browser = Bowser.getParser(window.navigator.userAgent);
+const browserName = browser.getBrowserName();
 
 // platform type, can be either "desktop", "tablet" or "mobile"
 export const isMobile = deviceInfo.platform.type === "mobile";
@@ -13,3 +14,5 @@ export const isValidBrowser = browser.satisfies({
   safari: ">=16.4",
   samsung: ">=21",
 });
+
+export const isBrowserFirefox = browserName.toLowerCase() === "firefox";
diff --git a/src/components/landing-page/join-production.tsx b/src/components/landing-page/join-production.tsx
@@ -20,6 +20,10 @@ import { uniqBy } from "../../helpers.ts";
 import { FormInputWithLoader } from "./form-input-with-loader.tsx";
 import { useStorage } from "../accessing-local-storage/access-local-storage.ts";
 import { useNavigateToProduction } from "./use-navigate-to-production.ts";
+import { useFetchDevices } from "../../use-fetch-devices.ts";
+import { useDevicePermissions } from "../../use-device-permission.ts";
+import { Modal } from "../modal/modal.tsx";
+import { ReloadDevicesButton } from "../reload-devices-button.tsx/reload-devices-button.tsx";
 
 type FormValues = TJoinProductionOptions;
 
@@ -35,6 +39,11 @@ const ButtonWrapper = styled.div`
   margin: 2rem 0 2rem 0;
 `;
 
+const FormWithBtn = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
 type TProps = {
   preSelected?: {
     preSelectedProductionId: string;
@@ -53,6 +62,9 @@ export const JoinProduction = ({
   const [joinProductionOptions, setJoinProductionOptions] =
     useState<TJoinProductionOptions | null>(null);
   const { readFromStorage, writeToStorage } = useStorage("username");
+  const [refresh, setRefresh] = useState<number>(0);
+  const [firefoxWarningModalOpen, setFirefoxWarningModalOpen] = useState(false);
+
   const {
     formState: { errors, isValid },
     register,
@@ -71,9 +83,18 @@ export const JoinProduction = ({
       keepErrors: true, // input errors will be retained with value update
     },
   });
+  const { permission } = useDevicePermissions({
+    continueToApp: true,
+  });
 
   const [{ devices, selectedProductionId }, dispatch] = useGlobalState();
 
+  useFetchDevices({
+    dispatch,
+    permission,
+    refresh,
+  });
+
   const {
     error: productionFetchError,
     production,
@@ -150,8 +171,6 @@ export const JoinProduction = ({
       payload: {
         id: uuid,
         callState: {
-          production: null,
-          reloadProductionList: false,
           devices: null,
           joinProductionOptions: payload,
           mediaStreamInput: null,
@@ -236,38 +255,65 @@ export const JoinProduction = ({
           />
           <FormLabel>
             <DecorativeLabel>Input</DecorativeLabel>
-            <FormSelect
-              // eslint-disable-next-line
-              {...register(`audioinput`)}
-            >
-              {inputDevices.length > 0 ? (
-                inputDevices.map((device) => (
-                  <option key={device.deviceId} value={device.deviceId}>
-                    {device.label}
-                  </option>
-                ))
-              ) : (
-                <option value="no-device">No device available</option>
-              )}
-            </FormSelect>
-          </FormLabel>
-          <FormLabel>
-            <DecorativeLabel>Output</DecorativeLabel>
-            {outputDevices.length > 0 ? (
+            <FormWithBtn>
               <FormSelect
                 // eslint-disable-next-line
-                {...register(`audiooutput`)}
+                {...register(`audioinput`)}
               >
-                {outputDevices.map((device) => (
-                  <option key={device.deviceId} value={device.deviceId}>
-                    {device.label}
-                  </option>
-                ))}
+                {inputDevices.length > 0 ? (
+                  inputDevices.map((device) => (
+                    <option key={device.deviceId} value={device.deviceId}>
+                      {device.label}
+                    </option>
+                  ))
+                ) : (
+                  <option value="no-device">No device available</option>
+                )}
               </FormSelect>
-            ) : (
-              <StyledWarningMessage>
-                Controlled by operating system
-              </StyledWarningMessage>
+              <ReloadDevicesButton
+                handleReloadDevices={() => setRefresh((prev) => prev + 1)}
+                devices={devices}
+                isDummy
+              />
+            </FormWithBtn>
+          </FormLabel>
+          <FormLabel>
+            <DecorativeLabel>Output</DecorativeLabel>
+            <FormWithBtn>
+              {outputDevices.length > 0 ? (
+                <FormSelect
+                  // eslint-disable-next-line
+                  {...register(`audiooutput`)}
+                >
+                  {outputDevices.map((device) => (
+                    <option key={device.deviceId} value={device.deviceId}>
+                      {device.label}
+                    </option>
+                  ))}
+                </FormSelect>
+              ) : (
+                <StyledWarningMessage>
+                  Controlled by operating system
+                </StyledWarningMessage>
+              )}
+              <ReloadDevicesButton
+                handleReloadDevices={() => setRefresh((prev) => prev + 1)}
+                setFirefoxWarningModalOpen={() =>
+                  setFirefoxWarningModalOpen(true)
+                }
+                devices={devices}
+              />
+            </FormWithBtn>
+            {firefoxWarningModalOpen && (
+              <Modal onClose={() => setFirefoxWarningModalOpen(false)}>
+                <DisplayContainerHeader>
+                  Reset permissions
+                </DisplayContainerHeader>
+                <p>
+                  To reload devices Firefox needs the permission to be manually
+                  reset, please remove permission and reload page instead.
+                </p>
+              </Modal>
             )}
           </FormLabel>
           {!preSelected && (

diff --git a/src/components/loader/loader.tsx b/src/components/loader/loader.tsx
@@ -22,6 +22,16 @@ const Loading = styled.div`
     left: 30%;
   }
 
+  &.refresh-devices {
+    position: absolute;
+    top: 0.5rem;
+    left: 0.5rem;
+    padding: 0;
+    margin: 0;
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+
   &.join-production {
     border: 0.4rem solid rgba(201, 201, 201, 0.1);
     border-top: 0.4rem solid #e2e2e2;