import React, { useState, useEffect } from 'react'; import { Access, Room, Permission, RoomShare, api, Restriction } from '../Common/Api'; import Dialog from './Dialog'; import ShareWith from './ShareWith'; import { SubmitInput } from './SubmitInput'; import { AccessOptions } from '../Common/Translation'; const descriptions: { [key: string]: string } = { name: t('bbb', 'Descriptive name of this room.'), welcome: t('bbb', 'This message is shown to all users in the chat area after they joined.'), maxParticipants: t('bbb', 'Sets a limit on the number of participants for this room. Zero means there is no limit.'), recording: t('bbb', 'If enabled, the moderator is able to start the recording.'), access: t('bbb', 'Public: Everyone knowing the link is able to join. Password: Guests have to provide a password. Waiting room: A moderator has to accept every guest before they can join. Internal: Only Nextcloud users can join.'), moderator: t('bbb', 'A moderator is able to manage all participants in a meeting including kicking, muting or selecting a presenter. Users with the role moderator are also able to close a meeting or change the default settings.'), requireModerator: t('bbb', 'If enabled, normal users have to wait until a moderator is in the room.'), }; type Props = { room: Room; restriction?: Restriction; updateProperty: (key: string, value: string | boolean | number) => Promise; open: boolean; setOpen: (open: boolean) => void; } const EditRoomDialog: React.FC = ({ room, restriction, updateProperty, open, setOpen }) => { const [shares, setShares] = useState(); const maxParticipantsLimit = (restriction?.maxParticipants || 0) < 0 ? undefined : restriction?.maxParticipants; const minParticipantsLimit = (restriction?.maxParticipants || -1) < 1 ? 0 : 1; useEffect(() => { if (!open) { return; } api.getRoomShares(room.id).then(roomShares => { console.log(room.name, roomShares); setShares(roomShares); }).catch(err => { console.warn('Could not load room shares.', err); setShares([]); }); }, [room.id, open]); function inputElement(label: string, field: string, type: 'text' | 'number' = 'text') { return (
updateProperty(field, value)} min={minParticipantsLimit} max={maxParticipantsLimit} /> {descriptions[field] && {descriptions[field]}}
); } function selectElement(label: string, field: string, value: string, options: { [key: string]: string }, onChange: (value: string) => void) { return (
{(value === Access.Password && room.password) && } {descriptions[field] && {descriptions[field]}}
); } const accessOptions = {...AccessOptions}; for(const roomType of restriction?.roomTypes || []) { if (roomType !== room.access) { delete accessOptions[roomType]; } } return ( setOpen(false)} title={t('bbb', 'Edit "{room}"', { room: room.name })}> {inputElement(t('bbb', 'Name'), 'name')} {inputElement(t('bbb', 'Welcome'), 'welcome')} {inputElement(t('bbb', 'Participant limit'), 'maxParticipants', 'number')} {selectElement(t('bbb', 'Access'), 'access', room.access, accessOptions, (value) => { console.log('access', value); updateProperty('access', value); })} {room.access === Access.InternalRestricted &&
}
{!room.everyoneIsModerator && }
updateProperty('everyoneIsModerator', event.target.checked)} />
{descriptions.moderator}

{t('bbb', 'Miscellaneous')}

updateProperty('record', event.target.checked)} />

{descriptions.recording}

updateProperty('requireModerator', event.target.checked)} />

{descriptions.requireModerator}

); }; export default EditRoomDialog;