Feat/visual production (#324)

Eyevinn · Jan 27, 2025 · c42b179 · c42b179
1 parent e6ff46f
commit c42b179
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 2 deletions.
diff --git a/src/components/landing-page/join-production.tsx b/src/components/landing-page/join-production.tsx
@@ -29,6 +29,22 @@ import { RemoveIcon } from "../../assets/icons/icon.tsx";
 
 type FormValues = TJoinProductionOptions;
 
+const NameWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 2rem;
+`;
+
+const ProductionName = styled.p`
+  margin-bottom: 1rem;
+
+  &.name {
+    font-weight: bold;
+    min-height: 1.5rem;
+    margin: 0 0 0 0.5rem;
+  }
+`;
+
 const FetchErrorMessage = styled.div`
   background: ${errorColour};
   color: ${darkText};
@@ -291,6 +307,12 @@ export const JoinProduction = ({
         <>
           {!preSelected && (
             <>
+              <NameWrapper>
+                <ProductionName>Production name</ProductionName>
+                <ProductionName className="name">
+                  {production?.name || "Enter a production ID"}
+                </ProductionName>
+              </NameWrapper>
               <FormInputWithLoader
                 onChange={(ev) => {
                   onChange(ev);

diff --git a/src/components/production-line/call-header.tsx b/src/components/production-line/call-header.tsx
@@ -9,6 +9,7 @@ import {
   ProductionName,
   ParticipantCount,
   HeaderIcon,
+  Id,
 } from "../production-list/production-list-components";
 import { AudioFeedIcon, CallHeader } from "./production-line-components";
 import { TLine, TProduction } from "./types";
@@ -44,8 +45,12 @@ export const CallHeaderComponent = ({
           </AudioFeedIcon>
         )}
         <ProductionName
-          title={`${production?.name} / ${line?.name}`}
-        >{`${truncatedProductionName} / ${truncatedLineName}`}</ProductionName>
+          title={`${production?.name} (id: ${production?.productionId}) / ${line?.name}`}
+        >
+          {`${truncatedProductionName}`}
+          <Id>{`(id: ${production?.productionId})`}</Id>
+          {`/ ${truncatedLineName}`}
+        </ProductionName>
         <UsersIcon />
         <ParticipantCount>{line?.participants.length}</ParticipantCount>
       </HeaderTexts>

diff --git a/src/components/production-list/production-list-components.ts b/src/components/production-list/production-list-components.ts
@@ -17,13 +17,18 @@ export const ProductionItemWrapper = styled.div`
 `;
 
 export const ProductionName = styled.div`
+  display: flex;
   font-size: 1.4rem;
   font-weight: bold;
   margin-right: 1rem;
   max-width: 30rem;
   word-break: break-word;
 `;
 
+export const Id = styled.p`
+  font-weight: normal;
+`;
+
 export const ParticipantCount = styled.div`
   font-size: 1.5rem;
   color: #9e9e9e;

diff --git a/src/components/production-list/production-list-item.tsx b/src/components/production-list/production-list-item.tsx
@@ -21,6 +21,7 @@ import {
   HeaderTexts,
   HeaderWrapper,
   IconWrapper,
+  Id,
   InnerDiv,
   Lineblock,
   LineBlockParticipant,
@@ -151,6 +152,7 @@ export const ProductionsListItem = ({
             {production.name.length > 40
               ? `${production.name.slice(0, 40)}...`
               : production.name}
+            <Id>{`(id: ${production?.productionId})`}</Id>
           </ProductionName>
           <UsersIcon />
           <ParticipantCount>{totalParticipants}</ParticipantCount>