From 84a9e3ea3e1f8dd6505e546e3be8b0de1ce71a84 Mon Sep 17 00:00:00 2001 From: Jon Date: Thu, 17 Jun 2021 13:13:21 +0100 Subject: [PATCH 1/3] initial people aside bar --- dailyjs/basic-call/components/App/App.js | 2 + dailyjs/basic-call/components/App/Asides.js | 10 ++ dailyjs/basic-call/components/Room/Room.js | 10 +- dailyjs/shared/components/Aside/Aside.js | 31 +++++ .../shared/components/Aside/PeopleAside.js | 122 ++++++++++++++++++ dailyjs/shared/components/Aside/index.js | 3 + dailyjs/shared/components/Button/Button.js | 50 +++++-- .../WaitingRoom/WaitingParticipantRow.js | 2 +- .../WaitingRoom/WaitingRoomModal.js | 2 +- .../WaitingRoom/WaitingRoomNotification.js | 2 +- .../shared/contexts/ParticipantsProvider.js | 6 + dailyjs/shared/contexts/UIStateProvider.js | 3 + dailyjs/shared/icons/camera-off-sm.svg | 1 + dailyjs/shared/icons/camera-on-sm.svg | 1 + dailyjs/shared/icons/mic-off-sm.svg | 3 - dailyjs/shared/icons/mic-on-sm.svg | 1 + dailyjs/shared/icons/people-md.svg | 4 + 17 files changed, 238 insertions(+), 15 deletions(-) create mode 100644 dailyjs/basic-call/components/App/Asides.js create mode 100644 dailyjs/shared/components/Aside/Aside.js create mode 100644 dailyjs/shared/components/Aside/PeopleAside.js create mode 100644 dailyjs/shared/components/Aside/index.js create mode 100644 dailyjs/shared/icons/camera-off-sm.svg create mode 100644 dailyjs/shared/icons/camera-on-sm.svg create mode 100644 dailyjs/shared/icons/mic-on-sm.svg create mode 100644 dailyjs/shared/icons/people-md.svg diff --git a/dailyjs/basic-call/components/App/App.js b/dailyjs/basic-call/components/App/App.js index fdc6849..0bf706e 100644 --- a/dailyjs/basic-call/components/App/App.js +++ b/dailyjs/basic-call/components/App/App.js @@ -3,6 +3,7 @@ import { useCallState } from '@dailyjs/shared/contexts/CallProvider'; import { useCallUI } from '@dailyjs/shared/hooks/useCallUI'; import Room from '../Room'; +import { Asides } from './Asides'; import { Modals } from './Modals'; export const App = () => { @@ -19,6 +20,7 @@ export const App = () => {
{componentForState()} + + +); + +Aside.propTypes = { + children: PropTypes.node, +}; + +export default Aside; diff --git a/dailyjs/shared/components/Aside/PeopleAside.js b/dailyjs/shared/components/Aside/PeopleAside.js new file mode 100644 index 0000000..7756992 --- /dev/null +++ b/dailyjs/shared/components/Aside/PeopleAside.js @@ -0,0 +1,122 @@ +import React from 'react'; +import Aside from '@dailyjs/shared/components/Aside'; +import { ReactComponent as IconCamOff } from '@dailyjs/shared/icons/camera-off-sm.svg'; +import { ReactComponent as IconCamOn } from '@dailyjs/shared/icons/camera-on-sm.svg'; +import { ReactComponent as IconMicOff } from '@dailyjs/shared/icons/mic-off-sm.svg'; +import { ReactComponent as IconMicOn } from '@dailyjs/shared/icons/mic-on-sm.svg'; +import PropTypes from 'prop-types'; +import { useCallState } from '../../contexts/CallProvider'; +import { useParticipants } from '../../contexts/ParticipantsProvider'; +import { useUIState } from '../../contexts/UIStateProvider'; +import { Button } from '../Button'; + +const PersonRow = ({ participant, isOwner = false }) => ( +
+
+ {participant.name} {participant.isLocal && '(You)'} +
+
+ {!isOwner ? ( + <> + + {participant.isCamMuted ? : } + + + {participant.isMicMuted ? : } + + + ) : ( + <> + + + + )} +
+ +
+); +PersonRow.propTypes = { + participant: PropTypes.object, + isOwner: PropTypes.bool, +}; + +export const PeopleAside = () => { + const { callObject } = useCallState(); + const { showPeopleAside } = useUIState(); + const { allParticipants, isOwner } = useParticipants(); + + if (!showPeopleAside) { + return null; + } + + return ( + + ); +}; + +export default PeopleAside; diff --git a/dailyjs/shared/components/Aside/index.js b/dailyjs/shared/components/Aside/index.js new file mode 100644 index 0000000..ab85567 --- /dev/null +++ b/dailyjs/shared/components/Aside/index.js @@ -0,0 +1,3 @@ +export { Aside as default } from './Aside'; +export { Aside } from './Aside'; +export { PeopleAside } from './PeopleAside'; diff --git a/dailyjs/shared/components/Button/Button.js b/dailyjs/shared/components/Button/Button.js index d4374b5..e6daa3d 100644 --- a/dailyjs/shared/components/Button/Button.js +++ b/dailyjs/shared/components/Button/Button.js @@ -121,17 +121,42 @@ export const Button = forwardRef( cursor: not-allowed; } - .button.error { + .button.warning { background: var(--secondary-default); border-color: var(--secondary-default); } - .button.error:focus { + .button.warning:focus { box-shadow: 0 0 0px 3px ${hexa(theme.secondary.default, 0.35)}; } - .button.error:hover { + .button.warning:hover { border-color: var(--secondary-dark); } + .button.error { + background: var(--red-default); + border-color: var(--red-default); + } + .button.error:focus { + box-shadow: 0 0 0px 3px ${hexa(theme.red.default, 0.35)}; + } + .button.error:hover { + border-color: var(--red-dark); + } + + .button.error-light { + background: var(--red-light); + border-color: var(--red-light); + color: var(--red-default); + } + .button.error-light:focus { + box-shadow: 0 0 0px 3px ${hexa(theme.red.default, 0.35)}; + } + .button.error-light:hover { + color: white; + background: var(--red-default); + border-color: var(--red-default); + } + .button.success { background: var(--green-default); border-color: var(--green-default); @@ -143,6 +168,20 @@ export const Button = forwardRef( border-color: var(--green-dark); } + .button.success-light { + background: var(--green-light); + border-color: var(--green-light); + color: var(--green-default); + } + .button.success-light:focus { + box-shadow: 0 0 0px 3px ${hexa(theme.green.default, 0.35)}; + } + .button.success-light:hover { + color: white; + background: var(--green-default); + border-color: var(--green-default); + } + .button.shadow { box-shadow: 0 0 4px 0 rgb(0 0 0 / 8%), 0 4px 4px 0 rgb(0 0 0 / 4%); } @@ -179,7 +218,6 @@ export const Button = forwardRef( color: white; border: 0px; } - .button.translucent:hover, .button.translucent:focus, .button.translucent:active { @@ -194,7 +232,6 @@ export const Button = forwardRef( color: white; border: 0px; } - .button.blur:hover, .button.blur:focus, .button.blur:active { @@ -202,7 +239,6 @@ export const Button = forwardRef( box-shadow: none; background: ${hexa(theme.blue.default, 1)}; } - .button.blur:focus { box-shadow: 0 0 0px 3px ${hexa(theme.blue.default, 0.35)}; } @@ -212,14 +248,12 @@ export const Button = forwardRef( color: white; border: 0px; } - .button.dark:hover, .button.dark:focus, .button.dark:active { background: ${theme.blue.default}; border: 0px; } - .button.dark:focus { box-shadow: 0 0 0px 3px rgba(255, 255, 255, 0.15); } diff --git a/dailyjs/shared/components/WaitingRoom/WaitingParticipantRow.js b/dailyjs/shared/components/WaitingRoom/WaitingParticipantRow.js index f28f6ab..9d30cd1 100644 --- a/dailyjs/shared/components/WaitingRoom/WaitingParticipantRow.js +++ b/dailyjs/shared/components/WaitingRoom/WaitingParticipantRow.js @@ -20,7 +20,7 @@ export const WaitingParticipantRow = ({ participant }) => { -
diff --git a/dailyjs/shared/components/WaitingRoom/WaitingRoomModal.js b/dailyjs/shared/components/WaitingRoom/WaitingRoomModal.js index 834845f..05f2088 100644 --- a/dailyjs/shared/components/WaitingRoom/WaitingRoomModal.js +++ b/dailyjs/shared/components/WaitingRoom/WaitingRoomModal.js @@ -26,7 +26,7 @@ export const WaitingRoomModal = ({ onClose }) => { , - , ]} diff --git a/dailyjs/shared/components/WaitingRoom/WaitingRoomNotification.js b/dailyjs/shared/components/WaitingRoom/WaitingRoomNotification.js index dbee7fb..c322d55 100644 --- a/dailyjs/shared/components/WaitingRoom/WaitingRoomNotification.js +++ b/dailyjs/shared/components/WaitingRoom/WaitingRoomNotification.js @@ -84,7 +84,7 @@ export const WaitingRoomNotification = () => { Allow )} - diff --git a/dailyjs/shared/contexts/ParticipantsProvider.js b/dailyjs/shared/contexts/ParticipantsProvider.js index fa6b07e..8fc28c5 100644 --- a/dailyjs/shared/contexts/ParticipantsProvider.js +++ b/dailyjs/shared/contexts/ParticipantsProvider.js @@ -81,6 +81,11 @@ export const ParticipantsProvider = ({ children }) => { [allParticipants] ); + const isOwner = useDeepCompareMemo( + () => localParticipant?.isOwner, + [localParticipant] + ); + /** * The participant who should be rendered prominently right now */ @@ -221,6 +226,7 @@ export const ParticipantsProvider = ({ children }) => { setUsername, swapParticipantPosition, username, + isOwner, }} > {children} diff --git a/dailyjs/shared/contexts/UIStateProvider.js b/dailyjs/shared/contexts/UIStateProvider.js index 36375ec..2922a5c 100644 --- a/dailyjs/shared/contexts/UIStateProvider.js +++ b/dailyjs/shared/contexts/UIStateProvider.js @@ -5,12 +5,15 @@ export const UIStateContext = createContext(); export const UIStateProvider = ({ children }) => { const [showDeviceModal, setShowDeviceModal] = useState(false); + const [showPeopleAside, setShowPeopleAside] = useState(false); return ( {children} diff --git a/dailyjs/shared/icons/camera-off-sm.svg b/dailyjs/shared/icons/camera-off-sm.svg new file mode 100644 index 0000000..764d9ab --- /dev/null +++ b/dailyjs/shared/icons/camera-off-sm.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/dailyjs/shared/icons/camera-on-sm.svg b/dailyjs/shared/icons/camera-on-sm.svg new file mode 100644 index 0000000..8996f0e --- /dev/null +++ b/dailyjs/shared/icons/camera-on-sm.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/dailyjs/shared/icons/mic-off-sm.svg b/dailyjs/shared/icons/mic-off-sm.svg index 6c1d2d5..2763d52 100644 --- a/dailyjs/shared/icons/mic-off-sm.svg +++ b/dailyjs/shared/icons/mic-off-sm.svg @@ -6,8 +6,5 @@ - - - diff --git a/dailyjs/shared/icons/mic-on-sm.svg b/dailyjs/shared/icons/mic-on-sm.svg new file mode 100644 index 0000000..8922de5 --- /dev/null +++ b/dailyjs/shared/icons/mic-on-sm.svg @@ -0,0 +1 @@ +microphone \ No newline at end of file diff --git a/dailyjs/shared/icons/people-md.svg b/dailyjs/shared/icons/people-md.svg new file mode 100644 index 0000000..26bc2ef --- /dev/null +++ b/dailyjs/shared/icons/people-md.svg @@ -0,0 +1,4 @@ + + + + From b69c89e4d5d24b2af178600d21c619090dd1eff3 Mon Sep 17 00:00:00 2001 From: Jon Date: Thu, 17 Jun 2021 13:37:02 +0100 Subject: [PATCH 2/3] improved styling and added owner actions --- .../shared/components/Aside/PeopleAside.js | 47 ++++++++++++++----- dailyjs/shared/components/Button/Button.js | 33 ++++++++++++- .../components/GlobalStyle/GlobalStyle.js | 1 + 3 files changed, 68 insertions(+), 13 deletions(-) diff --git a/dailyjs/shared/components/Aside/PeopleAside.js b/dailyjs/shared/components/Aside/PeopleAside.js index 7756992..ea61c93 100644 --- a/dailyjs/shared/components/Aside/PeopleAside.js +++ b/dailyjs/shared/components/Aside/PeopleAside.js @@ -32,13 +32,15 @@ const PersonRow = ({ participant, isOwner = false }) => ( ) : ( <> - + )} - {allParticipants.map((p) => ( - - ))} +
+ {allParticipants.map((p) => ( + + ))} +
+ ); }; diff --git a/dailyjs/shared/components/Button/Button.js b/dailyjs/shared/components/Button/Button.js index e6daa3d..d0c80f4 100644 --- a/dailyjs/shared/components/Button/Button.js +++ b/dailyjs/shared/components/Button/Button.js @@ -194,12 +194,28 @@ export const Button = forwardRef( height: 42px; } + .button.tiny { + height: 32px; + font-size: 11px; + border-radius: var(--radius-xs); + text-transform: uppercase; + } + + .button.tiny-square { + padding: 0px; + height: 32px; + width: 32px; + } + .button.small-square { + padding: 0px; + height: 42px; + width: 42px; + } .button.medium-square { padding: 0px; height: 48px; width: 48px; } - .button.large-square { padding: 0px; height: 52px; @@ -273,6 +289,21 @@ export const Button = forwardRef( box-shadow: 0 0 0px 3px rgba(255, 255, 255, 0.15); } + .button.outline-gray { + background: transparent; + border: 1px solid var(--gray-light); + color: var(--text-light); + } + .button.outline-gray:hover, + .button.outline-gray:focus, + .button.outline-gray:active { + border: 1px solid var(--gray-default); + box-shadow: none; + } + .button.outline-gray:focus { + box-shadow: 0 0 0px 3px rgba(0, 0, 0, 0.05); + } + .button.muted { color: var(--red-default); } diff --git a/dailyjs/shared/components/GlobalStyle/GlobalStyle.js b/dailyjs/shared/components/GlobalStyle/GlobalStyle.js index afc1b2a..26be0c5 100644 --- a/dailyjs/shared/components/GlobalStyle/GlobalStyle.js +++ b/dailyjs/shared/components/GlobalStyle/GlobalStyle.js @@ -37,6 +37,7 @@ export const GlobalStyle = () => ( --weight-medium: 500; --weight-bold: 600; + --radius-xs: 6px; --radius-sm: 9px; --radius-md: 12px; From 5ce825a5f873fc9409d7309d8abe207ad980fb70 Mon Sep 17 00:00:00 2001 From: Jon Date: Thu, 17 Jun 2021 13:41:19 +0100 Subject: [PATCH 3/3] truncate long names with an ellipsis --- dailyjs/shared/components/Aside/PeopleAside.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/dailyjs/shared/components/Aside/PeopleAside.js b/dailyjs/shared/components/Aside/PeopleAside.js index ea61c93..6a72c5d 100644 --- a/dailyjs/shared/components/Aside/PeopleAside.js +++ b/dailyjs/shared/components/Aside/PeopleAside.js @@ -12,7 +12,7 @@ import { Button } from '../Button'; const PersonRow = ({ participant, isOwner = false }) => (
-
+
{participant.name} {participant.isLocal && '(You)'}
@@ -57,9 +57,16 @@ const PersonRow = ({ participant, isOwner = false }) => ( justify-content: space-between; align-items: center; } + + .person-row .name { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } .person-row .actions { display: flex; gap: var(--spacing-xxxs); + margin-left: var(--spacing-xs); } .mute-state {