import React, { useState, useEffect } from 'react'; import { CopyToClipboard } from 'react-copy-to-clipboard'; import { SubmitInput } from './SubmitInput'; import { Room, Recording, api } from './Api'; import RecordingRow from './RecordingRow'; type Props = { room: Room; updateRoom: (room: Room) => void; deleteRoom: (id: number) => void; } type EditableValueProps = { setValue: (key: string, value: string | number) => void; setActive: (key: string) => void; active: string; field: string; value: string; type: 'text' | 'number'; } type RecordingsNumberProps = { recordings: null | Recording[]; showRecordings: boolean; setShowRecordings: (showRecordings: boolean) => void; } const RecordingsNumber: React.FC = ({ recordings, showRecordings, setShowRecordings }) => { if (recordings === null) { return ; } if (recordings.length > 0) { return ( setShowRecordings(!showRecordings)}> {recordings.length} {showRecordings ? '▼' : '▲'} ); } return 0; }; const EditableValue: React.FC = ({ setValue, setActive, active, field, value, type }) => { if (active === field) { return setValue(field, type === 'number' ? parseInt(value) : value)} onClick={event => event.stopPropagation()} initialValue={value} type={type} />; } function onClick(ev) { ev.stopPropagation(); setActive(field); } return {value}; }; const RoomRow: React.FC = (props) => { const [activeEdit, setActiveEdit] = useState(''); const [recordings, setRecordings] = useState(null); const [showRecordings, setShowRecordings] = useState(false); const room = props.room; const areRecordingsLoaded = recordings !== null; useEffect(() => { if (areRecordingsLoaded) { return; } api.getRecordings(room.uid).then(recordings => { setRecordings(recordings); }).catch(err => { console.warn('Could not request recordings: ' + room.uid, err); setRecordings([]); }); }, [areRecordingsLoaded]); function updateRoom(key: string, value: string | boolean | number) { props.updateRoom({ ...props.room, [key]: value, }); setActiveEdit(''); } function deleteRow(ev: MouseEvent) { ev.preventDefault(); OC.dialogs.confirm( t('bbb', 'Are you sure you want to delete "{name}"? This operation can not be undone', { name: room.name }), t('bbb', 'Delete "{name}"?', { name: room.name }), confirmed => { if (confirmed) { props.deleteRoom(room.id); } }, true ); } function storeRecording(recording: Recording) { OC.dialogs.filepicker(t('bbb', 'Select target folder'), (path: string) => { api.storeRecording(recording, path).then(() => { OC.dialogs.info( t('bbb', 'URL to presentation was stored in "{path}"', { path: path + '/' }), t('bbb', 'File stored'), () => undefined, ); }).catch(err => { console.warn('Could not store recording', err); OC.dialogs.alert( t('bbb', 'URL to presentation could not be stored.'), t('bbb', 'Error'), () => undefined ); }); }, undefined, 'httpd/unix-directory'); } function deleteRecording(recording: Recording) { OC.dialogs.confirm( t('bbb', 'Are you sure you want to delete the recording from "{startDate}"? This operation can not be undone', { startDate: (new Date(recording.startTime)).toLocaleString() }), t('bbb', 'Delete?'), confirmed => { if (confirmed) { api.deleteRecording(recording.id).then(success => { if (!success) { OC.dialogs.info( t('bbb', 'Could not delete record'), t('bbb', 'Error'), () => undefined, ); return; } if (recordings === null) { return; } setRecordings(recordings.filter(r => r.id !== recording.id)); }).catch(err => { console.warn('Could not delete recording', err); OC.dialogs.info( t('bbb', 'Could not delete record'), t('bbb', 'Server error'), () => undefined, ); }); } }, true ); } function edit(field: string, type: 'text' | 'number' = 'text') { return ; } return ( <> {edit('name')} {edit('welcome')} {edit('maxParticipants', 'number')} updateRoom('record', event.target.checked)} /> {showRecordings && {recordings?.map(recording => )}
} ); }; export default RoomRow;