fix: improvements for program lines (#302)

Eyevinn · Jan 28, 2025 · c40d806 · c40d806
1 parent d70a068
commit c40d806
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 36 deletions.
diff --git a/...ram-output-modal/program-output-modal.tsx → ...nts/audio-feed-modal/audio-feed-modal.tsx b/...ram-output-modal/program-output-modal.tsx → ...nts/audio-feed-modal/audio-feed-modal.tsx
@@ -14,32 +14,42 @@ const ButtonWrapper = styled.div`
 `;
 
 const CheckboxWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
   margin-bottom: 1rem;
   margin-top: 1rem;
 `;
 
-type ProgramOutputModalProps = {
+type AudioFeedModalProps = {
   onClose: () => void;
   onJoin: () => void;
   setIsProgramUser: (value: boolean) => void;
+  isProgramUser: boolean;
 };
 
-export const ProgramOutputModal = ({
+export const AudioFeedModal = ({
   onClose,
   onJoin,
   setIsProgramUser,
-}: ProgramOutputModalProps) => {
+  isProgramUser,
+}: AudioFeedModalProps) => {
   return (
     <Modal onClose={onClose}>
       <ContentWrapper>
         <p>
-          This is a line for program output. Do you wish to join the line as a
-          as the program output or as a listener?
+          This is a line for audio feed. Do you wish to join the line as the
+          audio feed or as a listener?
         </p>
         <CheckboxWrapper>
           <Checkbox
-            label="Join as program output"
-            onChange={(e) => setIsProgramUser(e.target.checked)}
+            label="Listener"
+            checked={!isProgramUser}
+            onChange={() => setIsProgramUser(false)}
+          />
+          <Checkbox
+            label="Audio feed"
+            checked={isProgramUser}
+            onChange={() => setIsProgramUser(true)}
           />
         </CheckboxWrapper>
       </ContentWrapper>

diff --git a/src/components/create-production/create-production.tsx b/src/components/create-production/create-production.tsx
@@ -227,7 +227,7 @@ export const CreateProduction = () => {
           render={({ field }) => (
             <CheckboxWrapper>
               <Checkbox
-                label="This line will be used for a program output"
+                label="This line will be used for an audio feed"
                 checked={field.value || false}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                   field.onChange(e.target.checked)
@@ -263,7 +263,7 @@ export const CreateProduction = () => {
                 render={({ field: controllerField }) => (
                   <CheckboxWrapper>
                     <Checkbox
-                      label="This line will be used for a program output"
+                      label="This line will be used for an audio feed"
                       checked={controllerField.value || false}
                       onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                         controllerField.onChange(e.target.checked)

diff --git a/src/components/landing-page/join-production.tsx b/src/components/landing-page/join-production.tsx
@@ -37,6 +37,8 @@ const FetchErrorMessage = styled.div`
 `;
 
 const CheckboxWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
   margin-bottom: 3rem;
   margin-top: 1rem;
 `;
@@ -337,13 +339,19 @@ export const JoinProduction = ({
           {isProgramOutputLine && (
             <>
               <p>
-                Do you want to join this call as the program output or as a
-                listener?
+                This is a line for audio feed. Do you wish to join the line as
+                the audio feed or as a listener?
               </p>
               <CheckboxWrapper>
                 <Checkbox
-                  label="Join as program output"
-                  onChange={(e) => setIsProgramUser(e.target.checked)}
+                  label="Listener"
+                  checked={!isProgramUser}
+                  onChange={() => setIsProgramUser(false)}
+                />
+                <Checkbox
+                  label="Audio feed"
+                  checked={isProgramUser}
+                  onChange={() => setIsProgramUser(true)}
                 />
               </CheckboxWrapper>
             </>

diff --git a/src/components/production-line/production-line.tsx b/src/components/production-line/production-line.tsx
@@ -141,20 +141,6 @@ const ListWrapper = styled(DisplayContainer)`
   padding: 0;
 `;
 
-// const StateText = styled.span<{ state: string }>`
-//   font-weight: 700;
-//   color: ${({ state }) => {
-//     switch (state) {
-//       case "connected":
-//         return "#7be27b";
-//       case "failed":
-//         return "#f96c6c";
-//       default:
-//         return "#ddd";
-//     }
-//   }};
-// `;
-
 const ConnectionErrorWrapper = styled(FlexContainer)`
   width: 100vw;
   justify-content: center;
@@ -179,7 +165,7 @@ const ProgramOutputIcon = styled.div`
 
   svg {
     fill: #59cbe8;
-    width: 3.5rem;
+    width: 2.5rem;
   }
 `;
 
@@ -200,8 +186,10 @@ const SpinnerWrapper = styled.div`
   margin-top: 2rem;
 `;
 
-const CallWrapper = styled(ProductionItemWrapper)`
+const CallWrapper = styled(ProductionItemWrapper)<{ isProgramLine?: boolean }>`
   margin: 0 0 2rem 0;
+  background: ${({ isProgramLine }) =>
+    isProgramLine ? "rgba(73, 67, 124, 0.2)" : "transparent"};
 `;
 
 const CallHeader = styled(HeaderWrapper)``;
@@ -658,7 +646,7 @@ export const ProductionLine = ({
   // TODO detect if browser back button is pressed and run exit();
 
   return (
-    <CallWrapper>
+    <CallWrapper isProgramLine={line?.programOutputLine}>
       {joinProductionOptions &&
         loading &&
         (!connectionError ? (
@@ -738,7 +726,7 @@ export const ProductionLine = ({
             {line?.programOutputLine && (
               <ProgramOutputIcon>
                 <TVIcon />
-                Program Output
+                Audio feed
               </ProgramOutputIcon>
             )}
           </CallInfo>

diff --git a/src/components/production-list/manage-production-buttons.tsx b/src/components/production-list/manage-production-buttons.tsx
@@ -168,7 +168,7 @@ export const ManageProductionButtons: FC<ManageProductionButtonsProps> = (
                 control={control}
                 render={({ field: controllerField }) => (
                   <Checkbox
-                    label="This line will be used for a program output"
+                    label="This line will be used for an audio feed"
                     checked={controllerField.value || false}
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                       controllerField.onChange(e.target.checked)

diff --git a/src/components/production-list/production-list-components.ts b/src/components/production-list/production-list-components.ts
@@ -77,12 +77,14 @@ export const InnerDiv = styled.div`
 
 export const Lineblock = styled.div`
   margin-top: 1rem;
-  background-color: #4d4d4d;
+  background-color: ${({ isProgramOutput }: { isProgramOutput?: boolean }) =>
+    isProgramOutput ? "rgb(73, 67, 124)" : "rgb(77, 77, 77)"};
   border-radius: 1rem;
   padding: 1rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 0.5rem;
 `;
 
 export const LineBlockTexts = styled.div``;
@@ -95,6 +97,7 @@ export const LineBlockTitle = styled.div`
 export const LineBlockTitleWrapper = styled.div`
   display: flex;
   align-items: center;
+  gap: 0.5rem;
 `;
 
 export const ParticipantExpandBtn = styled.button`
@@ -188,3 +191,18 @@ export const SpinnerWrapper = styled.div`
   width: 2rem;
   height: 2rem;
 `;
+
+export const IconWrapper = styled.div`
+  height: 2rem;
+  width: 2rem;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    fill: white;
+    height: 100%;
+    width: 100%;
+  }
+`;
diff --git a/src/components/production-list/production-list-item.tsx b/src/components/production-list/production-list-item.tsx
@@ -5,6 +5,7 @@ import { useGlobalState } from "../../global-state/context-provider";
 import {
   ChevronDownIcon,
   ChevronUpIcon,
+  TVIcon,
   UserIcon,
   UsersIcon,
 } from "../../assets/icons/icon";
@@ -19,6 +20,7 @@ import {
   HeaderIcon,
   HeaderTexts,
   HeaderWrapper,
+  IconWrapper,
   InnerDiv,
   Lineblock,
   LineBlockParticipant,
@@ -34,10 +36,10 @@ import {
   ProductionName,
   SpinnerWrapper,
 } from "./production-list-components";
-import { ProgramOutputModal } from "../program-output-modal/program-output-modal";
 import { ManageProductionButtons } from "./manage-production-buttons";
 import { ConfirmationModal } from "../verify-decision/confirmation-modal";
 import { TLine } from "../production-line/types";
+import { AudioFeedModal } from "../audio-feed-modal/audio-feed-modal";
 
 type ProductionsListItemProps = {
   production: TBasicProductionResponse;
@@ -152,9 +154,17 @@ export const ProductionsListItem = ({
       <ProductionLines className={open ? "expanded" : ""}>
         <InnerDiv>
           {production.lines?.map((l) => (
-            <Lineblock key={`line-${l.id}-${l.name}`}>
+            <Lineblock
+              key={`line-${l.id}-${l.name}`}
+              isProgramOutput={l.programOutputLine}
+            >
               <LineBlockTexts>
                 <LineBlockTitleWrapper>
+                  {l.programOutputLine && (
+                    <IconWrapper>
+                      <TVIcon />
+                    </IconWrapper>
+                  )}
                   <LineBlockTitle>{l.name}</LineBlockTitle>
                   {l.participants.length > 4 && (
                     <ParticipantExpandBtn
@@ -222,13 +232,14 @@ export const ProductionsListItem = ({
                 </SecondaryButton>
               )}
               {isModalOpen && modalLineId && (
-                <ProgramOutputModal
+                <AudioFeedModal
                   onClose={() => setIsModalOpen(false)}
                   onJoin={() => {
                     setIsModalOpen(false);
                     goToProduction(modalLineId);
                   }}
                   setIsProgramUser={setIsProgramUser}
+                  isProgramUser={isProgramUser}
                 />
               )}
             </Lineblock>