Skip to content

Commit

Permalink
Access code integration
Browse files Browse the repository at this point in the history
  • Loading branch information
@SebastianAppDev
SebastianAppDev committed Jun 14, 2024
1 parent 4755184 commit c9fd855
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 74 deletions.
18 changes: 8 additions & 10 deletions app/javascript/components/rooms/RoomCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ import MeetingBadges from './MeetingBadges';
import UserBoardIcon from './UserBoardIcon';
import Modal from '../shared_components/modals/Modal';
import ShareRoomForm from './room/forms/ShareRoomForm';
import useRoomSettings from '../../hooks/queries/rooms/useRoomSettings';


export default function RoomCard({ room }) {
const { t } = useTranslation();
Expand All @@ -36,6 +38,8 @@ export default function RoomCard({ room }) {
const startMeeting = useStartMeeting(room.friendly_id);
const currentUser = useAuth();
const localizedTime = localizeDateTimeString(room?.last_session, currentUser?.language);
const roomSettings = useRoomSettings(room.friendly_id);


return (
<Card id="room-card" className="h-100 card-shadow border-0">
Expand All @@ -51,9 +55,9 @@ export default function RoomCard({ room }) {
</Stack>

<Stack className="my-4">
<Card.Title className="mb-0"> { room.name } </Card.Title>
{ room.shared_owner && (
<span className="text-muted">{ t('room.shared_by') } {' '} <strong>{ room.shared_owner }</strong></span>
<Card.Title className="mb-0"> {room.name} </Card.Title>
{room.shared_owner && (
<span className="text-muted">{t('room.shared_by')} {' '} <strong>{room.shared_owner}</strong></span>
)}
{room.last_session ? (
<span className="text-muted"> {t('room.last_session', { localizedTime })} </span>
Expand All @@ -73,7 +77,7 @@ export default function RoomCard({ room }) {
</Button>
)}
title={t('room.meeting.share_meeting')}
body={<ShareRoomForm room={room} friendly_id={room.friendly_id} />}
body={<ShareRoomForm room={room} friendly_id={room.friendly_id} roomSettings={roomSettings} />}
/>

<Button variant="brand-outline" className="btn btn-md float-end" onClick={startMeeting.mutate} disabled={startMeeting.isLoading}>
Expand All @@ -89,12 +93,6 @@ export default function RoomCard({ room }) {
);
}

RoomCard.defaulProps = {
room: PropTypes.shape({
last_session: '',
}),
};

RoomCard.propTypes = {
room: PropTypes.shape({
id: PropTypes.string.isRequired,
Expand Down
73 changes: 14 additions & 59 deletions app/javascript/components/rooms/room/Room.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,30 +82,6 @@ export default function Room() {
)
}
</Col>
<Col>
{
isRoomLoading
? (
<RoomNamePlaceHolder />
) : (
<Stack className="room-header-wrapper">
<Stack direction="horizontal" gap={2}>
<h1>{room?.name}</h1>
<Stack direction="horizontal" className="mb-1">
{ room?.online
&& <MeetingBadges count={room?.participants} />}
{ room?.shared && <SharedBadge ownerName={room?.owner_name} /> }
</Stack>
</Stack>
{ room?.last_session ? (
<span className="text-muted"> { t('room.last_session', { localizedTime }) } </span>
) : (
<span className="text-muted"> { t('room.no_last_session') } </span>
)}
</Stack>
)
}
</Col>
<Col>
<Row>
<Col className="col-12">
Expand All @@ -116,48 +92,27 @@ export default function Room() {
disabled={startMeeting.isLoading}
>
{startMeeting.isLoading && <Spinner className="me-2" />}
{ room?.online ? (
{room?.online ? (
t('room.meeting.join_meeting')
) : (
t('room.meeting.start_meeting')
)}
</Button>

<Dropdown className="btn-group mt-1 mx-2 float-end pb-5">
<Modal
size="lg"
modalButton={(
<Button
variant="brand-outline" type="button" className="btn dropdown-main"
>
<ShareIcon className="hi-s me-1" />
{t('room.meeting.share_meeting')}
</Button>
)}
title={t('room.meeting.share_meeting')}
body={<ShareRoomForm room={room} />}
/>
{ (roomSettings?.data?.glModeratorAccessCode || roomSettings?.data?.glViewerAccessCode) && (
<Dropdown.Toggle
<Modal
size="lg"
modalButton={(
<Button
variant="brand-outline"
className="btn dropdown-toggle dropdown-toggle-split"
id="dropdown-toggle"
/>
className="mt-1 mx-2 float-end"
type='button'
>
<ShareIcon className="hi-s me-1" />
{t('room.meeting.share_meeting')}
</Button>
)}

<Dropdown.Menu className="dropdown-menu">
{ roomSettings?.data?.glModeratorAccessCode && (
<Dropdown.Item onClick={() => copyInvite('moderator')}>
{ t('copy_moderator_code') }
</Dropdown.Item>
)}
{ roomSettings?.data?.glViewerAccessCode && (
<Dropdown.Item onClick={() => copyInvite('viewer')}>
{ t('copy_viewer_code') }
</Dropdown.Item>
)}
</Dropdown.Menu>
</Dropdown>
title={t('room.meeting.share_meeting')}
body={<ShareRoomForm room={room} roomSettings={roomSettings} />}
/>
</Col>
</Row>
</Col>
Expand Down
60 changes: 55 additions & 5 deletions app/javascript/components/rooms/room/forms/ShareRoomForm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,13 @@ import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import { Square2StackIcon, CalendarIcon } from '@heroicons/react/24/outline';
import { useAuth } from '../../../../contexts/auth/AuthProvider';
import { Form, InputGroup, Button } from 'react-bootstrap';
import { Form, InputGroup, Button, Row, Col } from 'react-bootstrap';
import { toast } from 'react-toastify';
import { downloadICS } from '../../../../helpers/ICSDownloadHelper';
import useEnv from '../../../../hooks/queries/env/useEnv';


export default function ShareRoomForm({ room }) {
export default function ShareRoomForm({ room, roomSettings }) {
const { t } = useTranslation();
const { isLoading, data: envData } = useEnv();
const currentUser = useAuth();
Expand All @@ -36,9 +36,17 @@ export default function ShareRoomForm({ room }) {
return `${window.location}/join`;
}

function copyInvite() {
navigator.clipboard.writeText(roomJoinUrl());
toast.success(t('toast.success.room.copied_meeting_url'));
function copyInvite(role) {
if (role === 'viewer') {
navigator.clipboard.writeText(roomSettings?.data?.glViewerAccessCode);
toast.success(t('toast.success.room.copied_viewer_code'));
} else if (role === 'moderator') {
navigator.clipboard.writeText(roomSettings?.data?.glModeratorAccessCode);
toast.success(t('toast.success.room.copied_moderator_code'));
} else {
navigator.clipboard.writeText(roomJoinUrl());
toast.success(t('toast.success.room.copied_meeting_url'));
}
}

function copyPhoneNumber() {
Expand Down Expand Up @@ -110,6 +118,48 @@ export default function ShareRoomForm({ room }) {
</Button>
</InputGroup>
</Form.Group>

{(roomSettings?.data?.glModeratorAccessCode || roomSettings?.data?.glViewerAccessCode) && <Row className='mb-3'>
{(roomSettings?.data?.glModeratorAccessCode) && <Form.Group as={Col}>
<Form.Label>{t('copy_moderator_code')}</Form.Label>
<InputGroup>
<Form.Control
placeholder={roomSettings?.data?.glModeratorAccessCode}
defaultValue={roomSettings?.data?.glModeratorAccessCode}
aria-label="Moderator code"
aria-describedby="basic-addon2"
readOnly
/>
<Button
variant="brand-outline"
disabled={isLoading}
onClick={() => copyInvite('moderator')}
>
<Square2StackIcon className="hi-s mt-0 text-muted" />
</Button>
</InputGroup>
</Form.Group>}

{(roomSettings?.data?.glViewerAccessCode) && <Form.Group as={Col}>
<Form.Label>{t('copy_viewer_code')}</Form.Label>
<InputGroup>
<Form.Control
placeholder={roomSettings?.data?.glViewerAccessCode}
defaultValue={roomSettings?.data?.glViewerAccessCode}
aria-label="Viewer Code"
aria-describedby="basic-addon2"
readOnly
/>
<Button
variant="brand-outline"
disabled={isLoading}
onClick={() => copyInvite('viewer')}
>
<Square2StackIcon className="hi-s mt-0 text-muted" />
</Button>
</InputGroup>
</Form.Group>}
</Row>}
</Form>
);
}
Expand Down

0 comments on commit c9fd855

Please sign in to comment.