lfajardo
/
cloud_bbb
mirror of https://github.com/sualko/cloud_bbb
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: manage view of rooms for moderators and users

pull/281/head
Sebastien Marinier 2024-05-15 17:39:59 +02:00
parent 081d2b9150
commit e846404208
2 changed files with 29 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ts/Common/Api.ts
View File

@ -39,6 +39,7 @@ export interface Room {
everyoneIsModerator: boolean; everyoneIsModerator: boolean;
requireModerator: boolean; requireModerator: boolean;
shared: boolean; shared: boolean;
permission: Permission;
moderatorToken: string; moderatorToken: string;
listenOnly: boolean, listenOnly: boolean,
mediaCheck: boolean, mediaCheck: boolean,

36
ts/Manager/RoomRow.tsx
View File

@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard'; import { CopyToClipboard } from 'react-copy-to-clipboard';
import { api, Recording, Room, Restriction, Access } from '../Common/Api'; import { api, Recording, Room, Restriction, Access, Permission } from '../Common/Api';
import EditRoom from './EditRoom'; import EditRoom from './EditRoom';
import RecordingRow from './RecordingRow'; import RecordingRow from './RecordingRow';
import EditableValue from './EditableValue'; import EditableValue from './EditableValue';
@ -172,8 +172,11 @@ const RoomRow: React.FC<Props> = (props) => {
return <span></span>; return <span></span>;
} }
function edit(field: string, type: 'text' | 'number' = 'text', options?) { function edit(field: string, type: 'text' | 'number' = 'text', canEdit: boolean = true, options?) {
return <EditableValue field={field} value={room[field]} setValue={updateRoom} type={type} options={options} />; return canEdit ?
<EditableValue field={field} value={room[field]} setValue={updateRoom} type={type} options={options} />
:
<span>{room[field]}</span>;
} }
function cloneRow() { function cloneRow() {
@ -189,6 +192,8 @@ const RoomRow: React.FC<Props> = (props) => {
const maxParticipantsLimit = props.restriction?.maxParticipants || -1; const maxParticipantsLimit = props.restriction?.maxParticipants || -1;
const minParticipantsLimit = (props.restriction?.maxParticipants || -1) < 1 ? 0 : 1; const minParticipantsLimit = (props.restriction?.maxParticipants || -1) < 1 ? 0 : 1;
const adminRoom = room.permission === null || room.permission === Permission.Admin;
return ( return (
<> <>
<tr className={showRecordings ? 'selected-row' : ''}> <tr className={showRecordings ? 'selected-row' : ''}>
@ -210,7 +215,7 @@ const RoomRow: React.FC<Props> = (props) => {
</button> </button>
</td> </td>
<td className="name"> <td className="name">
{edit('name')} {edit('name', 'text', adminRoom)}
</td> </td>
<td className="bbb-shrink"> <td className="bbb-shrink">
{room.userId !== OC.currentUser && <img src={avatarUrl} alt="Avatar" className="bbb-avatar" />} {room.userId !== OC.currentUser && <img src={avatarUrl} alt="Avatar" className="bbb-avatar" />}
@ -220,25 +225,40 @@ const RoomRow: React.FC<Props> = (props) => {
{accessToIcon(room.access)} {accessToIcon(room.access)}
</td> </td>
<td className="max-participants bbb-shrink"> <td className="max-participants bbb-shrink">
{edit('maxParticipants', 'number', {min: minParticipantsLimit, max: maxParticipantsLimit < 0 ? undefined : maxParticipantsLimit})} {edit('maxParticipants', 'number', adminRoom, {min: minParticipantsLimit, max: maxParticipantsLimit < 0 ? undefined : maxParticipantsLimit})}
</td> </td>
{adminRoom &&
<td className="record bbb-shrink"> <td className="record bbb-shrink">
<input id={`bbb-record-${room.id}`} type="checkbox" className="checkbox" disabled={!props.restriction?.allowRecording} checked={room.record} onChange={(event) => updateRoom('record', event.target.checked)} /> <input id={`bbb-record-${room.id}`} type="checkbox" className="checkbox" disabled={!props.restriction?.allowRecording} checked={room.record} onChange={(event) => updateRoom('record', event.target.checked)} />
<label htmlFor={`bbb-record-${room.id}`}></label> <label htmlFor={`bbb-record-${room.id}`}></label>
</td> </td>
<td className="bbb-shrink"><RecordingsNumber recordings={recordings} showRecordings={showRecordings} setShowRecordings={setShowRecordings} /></td> }
<td className="edit icon-col"> {!adminRoom &&
<EditRoom room={props.room} restriction={props.restriction} updateProperty={updateRoom} /> <td className="record bbb-shrink">
<span className={"icon "+(room.record ? "icon-checkmark" : "icon-close")+" icon-visible"}></span>
</td>
}
<td className="bbb-shrink">
{adminRoom &&
<RecordingsNumber recordings={recordings} showRecordings={showRecordings} setShowRecordings={setShowRecordings} />
}
</td> </td>
<td className="clone icon-col"> <td className="clone icon-col">
<button className="action-item" onClick={cloneRow} title={t('bbb', 'Clone Room')}> <button className="action-item" onClick={cloneRow} title={t('bbb', 'Clone Room')}>
<span className="icon icon-template-add icon-visible"></span> <span className="icon icon-template-add icon-visible"></span>
</button> </button>
</td> </td>
<td className="edit icon-col">
{adminRoom &&
<EditRoom room={props.room} restriction={props.restriction} updateProperty={updateRoom} />
}
</td>
<td className="remove icon-col"> <td className="remove icon-col">
{adminRoom &&
<button className="action-item" onClick={deleteRow as any} title={t('bbb', 'Delete')}> <button className="action-item" onClick={deleteRow as any} title={t('bbb', 'Delete')}>
<span className="icon icon-delete icon-visible"></span> <span className="icon icon-delete icon-visible"></span>
</button> </button>
}
</td> </td>
</tr> </tr>
{showRecordings && <tr className="recordings-row"> {showRecordings && <tr className="recordings-row">