feat: new calls-page ui

Eyevinn · Jan 14, 2025 · aecc5f2 · aecc5f2
1 parent 158afef
commit aecc5f2
Show file tree

Hide file tree

Showing 7 changed files with 247 additions and 197 deletions.
diff --git a/src/components/calls-page/calls-page.tsx b/src/components/calls-page/calls-page.tsx
@@ -3,15 +3,15 @@ import { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { useGlobalState } from "../../global-state/context-provider";
 import { JoinProduction } from "../landing-page/join-production";
-import { ProductionLine } from "../production-line/production-line";
 import { PrimaryButton, SecondaryButton } from "../landing-page/form-elements";
 import { NavigateToRootButton } from "../navigate-to-root-button/navigate-to-root-button";
 import { DisplayContainerHeader } from "../landing-page/display-container-header";
 import { Modal } from "../modal/modal";
 import { VerifyDecision } from "../verify-decision/verify-decision";
 import { ModalConfirmationText } from "../modal/modal-confirmation-text";
-import { MegaphoneIcon } from "../../assets/icons/icon";
+import { MicMuted, MicUnmuted } from "../../assets/icons/icon";
 import { useGlobalHotkeys } from "../production-line/use-line-hotkeys";
+import { ProductionLine } from "../production-line/production-line";
 
 const Container = styled.div`
   display: flex;
@@ -24,7 +24,10 @@ const CallsContainer = styled.div`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  padding: 2rem;
+
+  form {
+    margin: 0;
+  }
 `;
 
 const CallContainer = styled.div`
@@ -37,45 +40,38 @@ const CallContainer = styled.div`
 
 const AddCallContainer = styled.div`
   display: flex;
-  flex-direction: column;
-  padding: 4rem;
-  max-width: 40rem;
-  min-width: 30rem;
 `;
 
 const ButtonWrapper = styled.div`
   display: flex;
-  margin: 0 1rem 1rem 0;
-  :last-of-type {
-    margin: 0 0 4rem;
-  }
+  justify-content: space-between;
+  height: 4rem;
 `;
 
 const MuteAllCallsBtn = styled(PrimaryButton)`
   background: rgba(50, 56, 59, 1);
   color: #6fd84f;
   border: 0.2rem solid #6d6d6d;
-  padding: 0.5rem 1rem;
-  margin: 0 0 0 1rem;
-  width: fit-content;
-  height: 4rem;
-
   &.mute {
-    color: #f96c6c;
     svg {
       fill: #f96c6c;
     }
   }
 
+  padding: 1rem;
+  margin-right: 1rem;
+  display: flex;
+  align-items: center;
+  color: white;
+
   svg {
     fill: #6fd84f;
     width: 3rem;
   }
 `;
 
-const MuteAllCallsBtnText = styled.span`
-  text-align: center;
-  width: 100%;
+const HeaderRightSide = styled.div`
+  display: flex;
 `;
 
 export const CallsPage = () => {
@@ -161,31 +157,52 @@ export const CallsPage = () => {
             }
           }}
         />
-        {confirmExitModalOpen && (
-          <Modal onClose={() => setConfirmExitModalOpen(false)}>
-            <DisplayContainerHeader>Confirm</DisplayContainerHeader>
-            <ModalConfirmationText>
-              Are you sure you want to leave all calls?
-            </ModalConfirmationText>
-            <VerifyDecision
-              confirm={runExitAllCalls}
-              abort={() => setConfirmExitModalOpen(false)}
-            />
-          </Modal>
-        )}
-        {!isEmpty && !isSingleCall && (
-          <MuteAllCallsBtn
-            type="button"
-            className={!isMasterInputMuted ? "mute" : ""}
-            onClick={() => setIsMasterInputMuted(!isMasterInputMuted)}
-          >
-            <MuteAllCallsBtnText>
-              {isMasterInputMuted ? "Mute" : "Unmute"} all Inputs
-            </MuteAllCallsBtnText>
-            <MegaphoneIcon />
-          </MuteAllCallsBtn>
-        )}
+        <HeaderRightSide>
+          {confirmExitModalOpen && (
+            <Modal onClose={() => setConfirmExitModalOpen(false)}>
+              <DisplayContainerHeader>Confirm</DisplayContainerHeader>
+              <ModalConfirmationText>
+                Are you sure you want to leave all calls?
+              </ModalConfirmationText>
+              <VerifyDecision
+                confirm={runExitAllCalls}
+                abort={() => setConfirmExitModalOpen(false)}
+              />
+            </Modal>
+          )}
+          {!isEmpty && (
+            <MuteAllCallsBtn
+              type="button"
+              onClick={() => setIsMasterInputMuted(!isMasterInputMuted)}
+              className={isMasterInputMuted ? "mute" : ""}
+            >
+              {isMasterInputMuted ? "Unmute All" : "Mute All"}
+              {isMasterInputMuted ? <MicMuted /> : <MicUnmuted />}
+            </MuteAllCallsBtn>
+          )}
+          {!isEmpty && (
+            <AddCallContainer>
+              <ButtonWrapper>
+                <SecondaryButton
+                  type="button"
+                  onClick={() => setAddCallActive(!addCallActive)}
+                >
+                  Add Call
+                </SecondaryButton>
+              </ButtonWrapper>
+            </AddCallContainer>
+          )}
+        </HeaderRightSide>
       </ButtonWrapper>
+      {isEmpty && paramProductionId && paramLineId && (
+        <JoinProduction
+          preSelected={{
+            preSelectedProductionId: paramProductionId,
+            preSelectedLineId: paramLineId,
+          }}
+          customGlobalMute={customGlobalMute}
+        />
+      )}
       <CallsContainer>
         {Object.entries(calls).map(
           ([callId, callState]) =>
@@ -203,32 +220,12 @@ export const CallsPage = () => {
               </CallContainer>
             )
         )}
-        {!isEmpty && (
-          <AddCallContainer>
-            <ButtonWrapper>
-              <SecondaryButton
-                type="button"
-                onClick={() => setAddCallActive(!addCallActive)}
-              >
-                Add Call
-              </SecondaryButton>
-            </ButtonWrapper>
-            {addCallActive && productionId && (
-              <JoinProduction
-                customGlobalMute={customGlobalMute}
-                addAdditionalCallId={productionId}
-                closeAddCallView={() => setAddCallActive(false)}
-              />
-            )}
-          </AddCallContainer>
-        )}
-        {isEmpty && paramProductionId && paramLineId && (
+        {addCallActive && productionId && (
           <JoinProduction
-            preSelected={{
-              preSelectedProductionId: paramProductionId,
-              preSelectedLineId: paramLineId,
-            }}
             customGlobalMute={customGlobalMute}
+            addAdditionalCallId={productionId}
+            closeAddCallView={() => setAddCallActive(false)}
+            className="calls-page"
           />
         )}
       </CallsContainer>

diff --git a/src/components/landing-page/join-production.tsx b/src/components/landing-page/join-production.tsx
@@ -49,13 +49,15 @@ type TProps = {
   customGlobalMute: string;
   addAdditionalCallId?: string;
   closeAddCallView?: () => void;
+  className?: string;
 };
 
 export const JoinProduction = ({
   preSelected,
   customGlobalMute,
   addAdditionalCallId,
   closeAddCallView,
+  className,
 }: TProps) => {
   const [joinProductionId, setJoinProductionId] = useState<null | number>(null);
   const [joinProductionOptions, setJoinProductionOptions] =
@@ -209,7 +211,9 @@ export const JoinProduction = ({
   };
 
   return (
-    <ResponsiveFormContainer className={isMobile ? "" : "desktop"}>
+    <ResponsiveFormContainer
+      className={`${isMobile ? "" : "desktop"} ${className}`}
+    >
       <DisplayContainerHeader>Join Production</DisplayContainerHeader>
       {devices && (
         <>

diff --git a/src/components/production-line/collapsable-section.tsx b/src/components/production-line/collapsable-section.tsx
@@ -0,0 +1,68 @@
+import styled from "@emotion/styled";
+import { FC, PropsWithChildren, useState } from "react";
+import { ChevronDownIcon, ChevronUpIcon } from "../../assets/icons/icon";
+
+const SectionWrapper = styled.div`
+  border: 0.2rem #6d6d6d solid;
+  border-radius: 1rem;
+  padding: 1rem;
+  margin-bottom: 1rem;
+`;
+
+const SectionHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 3rem;
+  font-weight: bold;
+
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+const SectionTitle = styled.div``;
+
+const SectionCollapser = styled.div`
+  width: 3rem;
+  height: 3rem;
+`;
+
+const SectionBody = styled.div`
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.5s ease-out;
+
+  &.open {
+    grid-template-rows: 1fr;
+  }
+`;
+
+const SectionInner = styled.div`
+  overflow: hidden;
+`;
+
+interface CollapsableSectionProps extends PropsWithChildren {
+  title: string;
+  startOpen?: boolean;
+}
+
+export const CollapsableSection: FC<CollapsableSectionProps> = (props) => {
+  const { title, startOpen = false, children } = props;
+
+  const [open, setOpen] = useState<boolean>(startOpen);
+
+  return (
+    <SectionWrapper>
+      <SectionHeader onClick={() => setOpen(!open)}>
+        <SectionTitle>{title}</SectionTitle>
+        <SectionCollapser>
+          {open ? <ChevronUpIcon /> : <ChevronDownIcon />}
+        </SectionCollapser>
+      </SectionHeader>
+      <SectionBody className={open ? "open" : "closed"}>
+        <SectionInner>{children}</SectionInner>
+      </SectionBody>
+    </SectionWrapper>
+  );
+};
diff --git a/src/components/production-line/hotkeys-component.tsx b/src/components/production-line/hotkeys-component.tsx
@@ -9,16 +9,17 @@ const TempDiv = styled.div`
 `;
 
 const HotkeyDiv = styled.div`
-  padding: 0 0 2rem 0;
-  flex-direction: row;
-  display: flex;
+  position: relative;
   align-items: center;
+  padding-top: 1rem;
 `;
 
 const SettingsBtn = styled.div`
   padding: 0;
-  margin-left: 1.5rem;
   width: 3rem;
+  position: absolute;
+  top: 0;
+  right: 0;
   cursor: pointer;
   color: white;
   background: transparent;
@@ -51,7 +52,6 @@ export const HotkeysComponent = ({
   return (
     <>
       <HotkeyDiv>
-        <strong>Hotkeys</strong>
         <SettingsBtn onClick={handleSettingsClick}>
           <SettingsIcon />
         </SettingsBtn>