Skip to content

Commit

Permalink
feat: update layout and styles
Browse files Browse the repository at this point in the history
  • Loading branch information
martinstark committed Apr 15, 2024
1 parent d0c6bdf commit 0458bcb
Show file tree
Hide file tree
Showing 7 changed files with 103 additions and 74 deletions.
6 changes: 6 additions & 0 deletions src/components/generic-components.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,10 @@ import styled from "@emotion/styled";

export const FlexContainer = styled.div`
display: flex;
flex-wrap: wrap;
`;

export const DisplayContainer = styled.div`
display: flex;
padding: 2rem;
`;
26 changes: 7 additions & 19 deletions src/components/landing-page/landing-page.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,10 @@
import styled from "@emotion/styled";
import { JoinProduction } from "./join-production.tsx";
import { CreateProduction } from "./create-production.tsx";
import { ProductionsList } from "./productions-list.tsx";
import { useNavigateToProduction } from "./use-navigate-to-production.ts";
import { FlexContainer } from "../generic-components.ts";
import { DisplayContainer, FlexContainer } from "../generic-components.ts";
import { useGlobalState } from "../../global-state/context-provider.tsx";

const DisplayContainer = styled.div`
flex-basis: 100%;
display: flex;
&:first-of-type {
border-right: 1px solid #424242;
padding: 5rem 2rem 5rem 5rem;
justify-content: flex-end;
}
&:last-of-type {
padding: 5rem 5rem 5rem 2rem;
}
`;
import { isMobile } from "../../bowser.ts";

export const LandingPage = () => {
const [{ joinProductionOptions }] = useGlobalState();
Expand All @@ -31,9 +17,11 @@ export const LandingPage = () => {
<DisplayContainer>
<JoinProduction />
</DisplayContainer>
<DisplayContainer>
<CreateProduction />
</DisplayContainer>
{!isMobile && (
<DisplayContainer>
<CreateProduction />
</DisplayContainer>
)}
</FlexContainer>
<ProductionsList />
</>
Expand Down
16 changes: 7 additions & 9 deletions src/components/landing-page/productions-list.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { TBasicProduction } from "../production-line/types.ts";
import { useGlobalState } from "../../global-state/context-provider.tsx";
import { LoaderDots } from "../loader/loader.tsx";
import { useRefreshAnimation } from "./use-refresh-animation.ts";
import { DisplayContainerHeader } from "./display-container-header.tsx";
import { DisplayContainer } from "../generic-components.ts";

const ProductionListContainer = styled.div`
display: flex;
Expand Down Expand Up @@ -54,13 +56,6 @@ export const ProductionsList = () => {
.slice(-10)
// display in reverse order
.toReversed()
// convert to local format
.map((prod) => {
return {
name: prod.name,
id: parseInt(prod.productionid, 10),
};
})
);

dispatch({
Expand Down Expand Up @@ -99,11 +94,14 @@ export const ProductionsList = () => {
return (
<>
<LoaderDots className={showRefreshing ? "active" : "in-active"} />
<DisplayContainer>
<DisplayContainerHeader>Production List</DisplayContainerHeader>
</DisplayContainer>
<ProductionListContainer>
{productions.map((p) => (
<ProductionItem key={p.id}>
<ProductionItem key={p.productionid}>
<ProductionName>{p.name}</ProductionName>
<ProductionId>{p.id}</ProductionId>
<ProductionId>{p.productionid}</ProductionId>
</ProductionItem>
))}
</ProductionListContainer>
Expand Down
11 changes: 1 addition & 10 deletions src/components/landing-page/use-fetch-production.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,7 @@ export const useFetchProduction: TUseFetchProduction = (id) => {

setError(null);

setProduction({
name: p.name,
id: parseInt(p.productionid, 10),
lines: p.lines.map((line) => ({
name: line.name,
id: parseInt(line.id, 10),
participants: [],
connected: false,
})),
});
setProduction(p);
})
.catch((e) => {
setProduction(null);
Expand Down
106 changes: 76 additions & 30 deletions src/components/production-line/production-line.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import styled from "@emotion/styled";
import { FC, useEffect, useRef, useState } from "react";
import { FC, useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useGlobalState } from "../../global-state/context-provider.tsx";
import { useAudioInput } from "./use-audio-input.ts";
Expand All @@ -11,9 +11,26 @@ import { API } from "../../api/api.ts";
import { noop } from "../../helpers.ts";
import { MicMuted, MicUnmuted } from "../../assets/icons/icon.tsx";
import { Spinner } from "../loader/loader.tsx";
import { TLine, TProduction } from "./types.ts";
import { DisplayContainerHeader } from "../landing-page/display-container-header.tsx";
import { DisplayContainer, FlexContainer } from "../generic-components.ts";

const TempDiv = styled.div`
padding: 1rem;
padding: 1rem 0;
`;

const HeaderWrapper = styled.div`
padding: 2rem;
display: flex;
flex-wrap: wrap;
`;

const SmallText = styled.span`
font-size: 1.6rem;
`;

const ButtonWrapper = styled.span`
margin: 0 2rem 0 0;
`;

const UserControlBtn = styled.button`
Expand All @@ -26,12 +43,11 @@ export const ProductionLine: FC = () => {
const [{ joinProductionOptions, mediaStreamInput }, dispatch] =
useGlobalState();
const navigate = useNavigate();
const audioContainerRef = useRef<HTMLDivElement>(null);
const [micMute, setMicMute] = useState(true);
const [participants, setParticipants] = useState<
{ name: string; sessionid: string }[] | null
>(null);
const [line, setLine] = useState<TLine | null>(null);

const [loading, setLoading] = useState<boolean>(true);
const [production, setProduction] = useState<TProduction | null>(null);

const inputAudioStream = useAudioInput({
inputId: joinProductionOptions?.audioinput ?? null,
Expand All @@ -57,7 +73,7 @@ export const ProductionLine: FC = () => {

const interval = window.setInterval(() => {
API.fetchProductionLine(productionId, lineId)
.then((line) => setParticipants(line.participants))
.then((l) => setLine(l))
.catch(console.error);
}, 1000);

Expand All @@ -66,6 +82,16 @@ export const ProductionLine: FC = () => {
};
}, [joinProductionOptions]);

useEffect(() => {
if (!joinProductionOptions) return;

const productionId = parseInt(joinProductionOptions.productionId, 10);

API.fetchProduction(productionId).then((p) => {
setProduction(p);
});
}, [joinProductionOptions]);

// TODO temporary, this view should handle direct links
useEffect(() => {
if (!joinProductionOptions) {
Expand Down Expand Up @@ -101,34 +127,54 @@ export const ProductionLine: FC = () => {

// Mute/Unmute speaker
// Show active sink and mic
// Exit button (link to /, clear production from state)

return (
<div>
<TempDiv>
<ActionButton onClick={exit}>Exit</ActionButton>
</TempDiv>
<>
<HeaderWrapper>
<ButtonWrapper>
<ActionButton onClick={exit}>Exit</ActionButton>
</ButtonWrapper>
{!loading && production && line && (
<DisplayContainerHeader>
<SmallText>Production:</SmallText> {production.name}{" "}
<SmallText>Line:</SmallText> {line.name}
</DisplayContainerHeader>
)}
</HeaderWrapper>

{loading && <Spinner className="join-production" />}

{!loading && (
<>
<TempDiv>Production View</TempDiv>
<TempDiv>
<UserControlBtn type="button" onClick={() => setMicMute(!micMute)}>
{micMute ? <MicMuted /> : <MicUnmuted />}
</UserControlBtn>
</TempDiv>
<TempDiv ref={audioContainerRef} />
{audioElements.length && (
<TempDiv>Incoming Audio Channels: {audioElements.length}</TempDiv>
)}
{connectionState && (
<TempDiv>RTC Connection State: {connectionState}</TempDiv>
)}

<UserList participants={participants} />
</>
<FlexContainer>
<DisplayContainer>
<div>
<DisplayContainerHeader>Controls</DisplayContainerHeader>

{audioElements.length && (
<TempDiv>
Incoming Audio Channels: {audioElements.length}
</TempDiv>
)}
{connectionState && (
<TempDiv>RTC Connection State: {connectionState}</TempDiv>
)}

<TempDiv>
<UserControlBtn
type="button"
onClick={() => setMicMute(!micMute)}
>
{micMute ? <MicMuted /> : <MicUnmuted />}
</UserControlBtn>
</TempDiv>
</div>
</DisplayContainer>
<DisplayContainer>
{line && <UserList participants={line.participants} />}
</DisplayContainer>
</FlexContainer>
)}
</div>
</>
);
};

Expand Down
8 changes: 4 additions & 4 deletions src/components/production-line/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,19 @@ export type TJoinProductionOptions = {

export type TParticipant = {
name: string;
active: boolean;
sessionid: string;
isActive: boolean;
};

export type TLine = {
name: string;
id: number;
connected: boolean;
id: string;
participants: TParticipant[];
};

export type TBasicProduction = {
name: string;
id: number;
productionid: string;
};

export type TProduction = TBasicProduction & {
Expand Down
4 changes: 2 additions & 2 deletions src/components/production-line/user-list.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import styled from "@emotion/styled";
import { DisplayContainerHeader } from "../landing-page/display-container-header.tsx";
import { TParticipant } from "./types.ts";

const ListWrapper = styled.div`
padding: 1rem;
Expand All @@ -12,7 +13,6 @@ const User = styled.div`
color: #ddd;
max-width: 32rem;
display: flex;
align-items: center;
`;

const GreenCircle = styled.div`
Expand All @@ -25,7 +25,7 @@ const GreenCircle = styled.div`
`;

type TUserListOptions = {
participants: { name: string; sessionid: string }[] | null;
participants: TParticipant[];
};
export const UserList = ({ participants }: TUserListOptions) => {
if (!participants) return null;
Expand Down

0 comments on commit 0458bcb

Please sign in to comment.