jeffemmett
/
daily-examples
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

address suggestions

This commit is contained in:
harshithpabbati 2022-02-08 11:43:06 +05:30
parent 69defdfb1d
commit ea458c03eb
4 changed files with 98 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
custom/fitness-demo/components/Call/ChatAside.js
View File

@ -18,6 +18,7 @@ export const ChatAside = () => {
const playMessageSound = useMessageSound();
const [showEmojis, setShowEmojis] = useState(false);
const emojis = ['😍', '😭', '😂', '👋', '🙏'];
const chatWindowRef = useRef();
useEffect(() => {
@ -59,55 +60,16 @@ export const ChatAside = () => {
</div>
{showEmojis && (
<div className="emojis">
<Button
variant="gray"
size="small-circle"
onClick={() => sendMessage('😍')}
>
😍
</Button>
<Button
variant="gray"
size="small-circle"
onClick={() => sendMessage('😭')}
>
😭
</Button>
<Button
variant="gray"
size="small-circle"
onClick={() => sendMessage('😂')}
>
😂
</Button>
<Button
variant="gray"
size="small-circle"
onClick={() => sendMessage('👋')}
>
👋
</Button>
<Button
variant="gray"
size="small-circle"
onClick={() => sendMessage('👌')}
>
👌
</Button>
<Button
variant="gray"
size="small-circle"
onClick={() => sendMessage('👏')}
>
👏
</Button>
<Button
variant="gray"
size="small-circle"
onClick={() => sendMessage('🙏')}
>
🙏
</Button>
{emojis.map(emoji => (
<Button
key={emoji}
variant="gray"
size="small-circle"
onClick={() => sendMessage(emoji)}
>
{emoji}
</Button>
))}
</div>
)}
<footer className="chat-footer">

5
custom/fitness-demo/components/Call/PeopleAside.js
View File

@ -61,7 +61,6 @@ const PersonRow = ({ participant, isOwner = false }) => (
align-items: center;
flex: 1;
}
.person-row .name {
text-overflow: ellipsis;
overflow: hidden;
@ -72,7 +71,6 @@ const PersonRow = ({ participant, isOwner = false }) => (
gap: var(--spacing-xxxs);
margin-left: var(--spacing-xs);
}
.mute-state {
display: flex;
width: 24px;
@ -80,7 +78,6 @@ const PersonRow = ({ participant, isOwner = false }) => (
align-items: center;
justify-content: center;
}
.state.error {
color: var(--red-default);
}
@ -142,7 +139,6 @@ export const PeopleAside = () => {
.people-aside {
display: block;
}
.owner-actions {
display: flex;
align-items: center;
@ -150,7 +146,6 @@ export const PeopleAside = () => {
margin: var(--spacing-xs) var(--spacing-xxs);
flex: 1;
}
.rows {
margin: var(--spacing-xxs);
flex: 1;

120
custom/fitness-demo/components/Prejoin/Intro.js
View File

@ -80,54 +80,60 @@ export const Intro = ({
</Card>
<span className="or-text">OR</span>
<Card>
<div className="jc-card">
<CardHeader>Create a class</CardHeader>
<CardBody>
{error && (
<Well variant="error">
Failed to create class <p>{error}</p>
</Well>
)}
{tokenError && (
<Well variant="error">
Failed to obtain token <p>{tokenError}</p>
</Well>
)}
<Field label="Give your class a name">
<TextInput
type="text"
placeholder="Eg. Super stretchy morning flow"
defaultValue={roomName}
onChange={(e) => setRoomName(e.target.value)}
required
/>
</Field>
<Field label="How long would you like to be?">
<SelectInput
onChange={(e) => setDuration(e.target.value)}
value={duration}>
<option value="15">15 minutes</option>
<option value="30">30 minutes</option>
<option value="60">60 minutes</option>
</SelectInput>
</Field>
<Field label="Public (anyone can join)">
<BooleanInput
value={privacy}
onChange={e => setPrivacy(e.target.checked)}
/>
</Field>
</CardBody>
<CardFooter>
<Button
loading={fetching}
fullWidth
onClick={() => onJoin(slugify.convert(roomName), 'create', duration, privacy)}
>
{fetching ? 'Creating...' : 'Create class'}
</Button>
</CardFooter>
</div>
<form onSubmit={(e) => {
e.preventDefault();
onJoin(slugify.convert(roomName), 'create', duration, privacy)
}}>
<div className="jc-card">
<CardHeader>Create a class</CardHeader>
<CardBody>
{error && (
<Well variant="error">
Failed to create class <p>{error}</p>
</Well>
)}
{tokenError && (
<Well variant="error">
Failed to obtain token <p>{tokenError}</p>
</Well>
)}
<Field label="Give your class a name">
<TextInput
type="text"
placeholder="Eg. Super stretchy morning flow"
defaultValue={roomName}
onChange={(e) => setRoomName(e.target.value)}
required
/>
</Field>
<Field label="How long would you like to be?">
<SelectInput
onChange={(e) => setDuration(e.target.value)}
value={duration}>
<option value="15">15 minutes</option>
<option value="30">30 minutes</option>
<option value="60">60 minutes</option>
</SelectInput>
</Field>
<Field label="Privacy">
<BooleanInput
value={privacy}
onChange={e => setPrivacy(e.target.checked)}
/>
<p>{privacy ? 'Public class (anyone can join the class)': 'Private (attendees will request access to class)'}</p>
</Field>
</CardBody>
<CardFooter>
<Button
loading={fetching}
fullWidth
type="submit"
>
{fetching ? 'Creating...' : 'Create class'}
</Button>
</CardFooter>
</div>
</form>
</Card>
<style jsx>{`
.intro {
@ -157,6 +163,24 @@ export const Intro = ({
.jc-card {
width: 25vw;
}
@media screen and (max-width: 650px) {
.intro {
display: flex;
flex-direction: column;
}
.jc-card {
width: 75vw;
}
}
@media (min-width: 650px) and (max-width: 1000px) {
.intro {
display: flex;
flex-direction: column;
}
.jc-card {
width: 50vw;
}
}
`}
</style>
</div>

17
custom/shared/components/Tray/BasicTray.js
View File

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useRef, useState, useEffect } from 'react';
import { NETWORK_ASIDE } from '@custom/shared/components/Aside/NetworkAside';
import { PEOPLE_ASIDE } from '@custom/shared/components/Aside/PeopleAside';
import Button from '@custom/shared/components/Button';
@ -19,6 +19,7 @@ import { ReactComponent as IconSettings } from '@custom/shared/icons/settings-md
import { Tray, TrayButton } from './Tray';
export const BasicTray = () => {
const ref = useRef(null);
const responsive = useResponsive();
const [showMore, setShowMore] = useState(false);
const { callObject, leave } = useCallState();
@ -35,6 +36,18 @@ export const BasicTray = () => {
return callObject.setLocalAudio(newState);
};
useEffect(() => {
const handleClickOutside = (event) => {
if (ref.current && !ref.current.contains(event.target))
setShowMore(false);
};
document.addEventListener('click', handleClickOutside, true);
return () => {
document.removeEventListener('click', handleClickOutside, true);
};
}, []);
return (
<Tray className="tray">
<TrayButton
@ -52,7 +65,7 @@ export const BasicTray = () => {
{isMicMuted ? <IconMicOff /> : <IconMicOn />}
</TrayButton>
{responsive.isMobile() && showMore && (
<div className="more-options">
<div className="more-options" ref={ref}>
<Button
className="translucent"
onClick={() => openModal(DEVICE_MODAL)}