From aa8407a073ed1200b314139afa4505ede129c6f1 Mon Sep 17 00:00:00 2001 From: Sundar Jayabose Date: Fri, 1 Dec 2023 11:45:15 -0500 Subject: [PATCH 1/3] refactor: UI controls using a single button component now: UIButton.tsx Co-authored-by: Tyler Frye Co-authored-by: Stephen Watzman --- ...oggleButton.tsx => StyledUIComponents.tsx} | 16 ++++- src/components/UI.tsx | 72 +++++++++++++------ src/components/UIButton.tsx | 45 ++++++++++++ 3 files changed, 110 insertions(+), 23 deletions(-) rename src/components/{ToggleButton.tsx => StyledUIComponents.tsx} (80%) create mode 100644 src/components/UIButton.tsx diff --git a/src/components/ToggleButton.tsx b/src/components/StyledUIComponents.tsx similarity index 80% rename from src/components/ToggleButton.tsx rename to src/components/StyledUIComponents.tsx index 5a269d5..4284a5e 100644 --- a/src/components/ToggleButton.tsx +++ b/src/components/StyledUIComponents.tsx @@ -1,5 +1,19 @@ import styled, { keyframes } from 'styled-components'; +const UIWrapper = styled.div` + position: relative; /* Set the position to relative */ + display: flex; + flex-direction: row; + justify-content: space-between; + gap: 6px; + align-items: center; + padding: 8px; + background-color: rgba(154, 154, 154, 0.5); + border-radius: 30px; + bottom: 2%; + backdrop-filter: blur(2px); +`; + const breatheAnimation = keyframes` 0% { transform: scale(1) } 30% { transform: scale(1.2) } @@ -59,4 +73,4 @@ const ToggledOnImage = styled(ToggleImage)` } `; -export { ToggleButton, ToggleImage, ToggledOffImage, ToggledOnImage }; +export { UIWrapper, ToggleButton, ToggleImage, ToggledOffImage, ToggledOnImage }; diff --git a/src/components/UI.tsx b/src/components/UI.tsx index 321bc33..9f64e23 100644 --- a/src/components/UI.tsx +++ b/src/components/UI.tsx @@ -1,20 +1,12 @@ import { useState } from 'react'; -import styled from 'styled-components'; -import { ToggleButton, ToggledOffImage, ToggledOnImage } from './ToggleButton'; - -const UIWrapper = styled.div` - position: relative; /* Set the position to relative */ - display: flex; - flex-direction: row; - justify-content: space-between; - gap: 6px; - align-items: center; - padding: 8px; - background-color: rgba(154, 154, 154, 0.5); - border-radius: 30px; - bottom: 2%; - backdrop-filter: blur(2px); -`; +import UIButtonMute from './UIButtonMute'; +import UIButton from './UIButton'; +import { + UIWrapper, + ToggleButton, + ToggledOffImage, + ToggledOnImage, +} from './StyledUIComponents'; const UI = ({ onToggleChat, @@ -54,7 +46,8 @@ const UI = ({ return ( - + {/* */} + {/* - + */} - + + + + + {/* - + */} - + + + {/* - + */} + + void; + isState: boolean; + offImage: string; + onImage: string; + 'dataCircle'?: string; + 'data-width'?: string; + 'data-bg-color'?: string; + 'data-toggled-bg-color'?: string; + className?: string; +} + +const UIButton = ({ + onToggleState, + isState, + offImage, + onImage, + dataCircle, + dataWidth, + dataBgColor, + dataToggledBgColor, + className, +}: buttonProps) => { + return ( + + + + + ); +}; + +export default UIButton; From 24739e89d9b45bffa829b43a0a576cc8a1fbddd0 Mon Sep 17 00:00:00 2001 From: Sundar Jayabose Date: Fri, 1 Dec 2023 11:56:56 -0500 Subject: [PATCH 2/3] fix: call button removed previous verison of call button Co-authored-by: Tyler Frye Co-authored-by: Stephen Watzman --- src/components/UI.tsx | 58 ++----------------------------------- src/components/UIButton.tsx | 2 +- 2 files changed, 4 insertions(+), 56 deletions(-) diff --git a/src/components/UI.tsx b/src/components/UI.tsx index 9f64e23..80accc4 100644 --- a/src/components/UI.tsx +++ b/src/components/UI.tsx @@ -1,5 +1,4 @@ import { useState } from 'react'; -import UIButtonMute from './UIButtonMute'; import UIButton from './UIButton'; import { UIWrapper, @@ -46,24 +45,12 @@ const UI = ({ return ( - {/* */} - {/* - - - */} - - - {/* - - - */} - {/* - - - */} - - - - - - ); }; diff --git a/src/components/UIButton.tsx b/src/components/UIButton.tsx index 45290c4..aecb942 100644 --- a/src/components/UIButton.tsx +++ b/src/components/UIButton.tsx @@ -9,7 +9,7 @@ interface buttonProps { isState: boolean; offImage: string; onImage: string; - 'dataCircle'?: string; + dataCircle?: string; 'data-width'?: string; 'data-bg-color'?: string; 'data-toggled-bg-color'?: string; From 26afd191fc77c0155a6e593baab2ded88eeb737b Mon Sep 17 00:00:00 2001 From: Sundar Jayabose Date: Fri, 1 Dec 2023 14:23:40 -0500 Subject: [PATCH 3/3] refactor: VideoGrid styled components moved styled components out of VideoGrid to StyledGridComponents Co-authored-by: Tyler Frye Co-authored-by: Stephen Watzman --- src/components/StyledGridComponents.tsx | 36 ++++++++++++++++++++++++- src/components/VideoGrid.jsx | 34 +++-------------------- 2 files changed, 38 insertions(+), 32 deletions(-) diff --git a/src/components/StyledGridComponents.tsx b/src/components/StyledGridComponents.tsx index 9a626c1..edc76ff 100644 --- a/src/components/StyledGridComponents.tsx +++ b/src/components/StyledGridComponents.tsx @@ -1,5 +1,18 @@ import styled from 'styled-components'; +const UIWrapper = styled.div` + display: flex; + justify-content: center; + align-items: center; +`; + +const UITogglesWrapper = styled.div` + display: flex; + justify-content: center; + align-items: center; + margin-top: -20px; +`; + const VideoGridWrapper = styled.div` display: flex; flex-direction: column; @@ -8,6 +21,20 @@ const VideoGridWrapper = styled.div` height: 100%; `; +const RTCComponentsWrapper = styled.div` + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 30px 10px 30px 10px; + max-height: 100vh; + position: relative; /* Change this to relative */ + width: 70%; + border: 2px solid #888; + border-radius: 10px; + background-color: #1a1a1a; +`; + const VideoGridContainer = styled.div` display: grid; grid-gap: 10px; @@ -29,4 +56,11 @@ const VideoGridItem = styled.div` border-radius: 10px; `; -export { VideoGridWrapper, VideoGridContainer, VideoGridItem }; +export { + UIWrapper, + UITogglesWrapper, + RTCComponentsWrapper, + VideoGridWrapper, + VideoGridContainer, + VideoGridItem, +}; diff --git a/src/components/VideoGrid.jsx b/src/components/VideoGrid.jsx index 442f825..79d0b1c 100644 --- a/src/components/VideoGrid.jsx +++ b/src/components/VideoGrid.jsx @@ -2,42 +2,16 @@ import React, { useState } from 'react'; import SelfVideo from './SelfVideo'; import PeerVideo from './PeerVideo'; import { + UIWrapper, + UITogglesWrapper, VideoGridWrapper, VideoGridContainer, VideoGridItem, + RTCComponentsWrapper, } from './StyledGridComponents'; import UI from './UI'; import Chat from './Chat'; -import styled from 'styled-components'; - -const UIWrapper = styled.div` - display: flex; - justify-content: center; - align-items: center; -`; - -const UITogglesWrapper = styled.div` - display: flex; - justify-content: center; - align-items: center; - margin-top: -20px; -`; - -const RTCComponentsWrapper = styled.div` - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - padding: 30px 10px 30px 10px; - max-height: 100vh; - position: relative; /* Change this to relative */ - width: 70%; - border: 2px solid #888; - border-radius: 10px; - background-color: #1a1a1a; -`; - const VideoGrid = ({ consumers, clientConnection, @@ -52,7 +26,6 @@ const VideoGrid = ({ }) => { const [isChatShown, setIsChatShown] = useState(false); const consumerCount = consumers.size; - // const consumerCount = consumers.length; let columns = 1; let rows = 1; @@ -79,7 +52,6 @@ const VideoGrid = ({ const handleToggleChat = (value) => { setIsChatShown(value); - console.log('toggling chat'); }; return (