imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Early concept for rendering the frequency waveform

Browse source
This commit is contained in:
Travis Ralston 2021-03-22 20:54:09 -06:00
parent da7d31aeb6
commit 8ddd14e252
6 changed files with 136 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/views/rooms/VoiceRecordComposerTile.tsx
View file

@ -21,6 +21,7 @@ import {VoiceRecorder} from "../../../voice/VoiceRecorder";
import {Room} from "matrix-js-sdk/src/models/room";
import {MatrixClientPeg} from "../../../MatrixClientPeg";
import classNames from "classnames";
import FrequencyBars from "../voice_messages/FrequencyBars";
interface IProps {
room: Room;
@ -57,10 +58,6 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
const recorder = new VoiceRecorder(MatrixClientPeg.get());
await recorder.start();
this.props.onRecording(true);
// TODO: @@ TravisR: Run through EQ component
// recorder.frequencyData.onUpdate((freq) => {
// console.log('@@ UPDATE', freq);
// });
this.setState({recorder});
};
@ -71,18 +68,21 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
'mx_VoiceRecordComposerTile_stop': !!this.state.recorder,
});
let bars = null;
let tooltip = _t("Record a voice message");
if (!!this.state.recorder) {
// TODO: @@ TravisR: Change to match behaviour
tooltip = _t("Stop & send recording");
bars = <FrequencyBars recorder={this.state.recorder} />;
}
return (
return (<>
{bars}
<AccessibleTooltipButton
className={classes}
onClick={this.onStartStopVoiceMessage}
title={tooltip}
/>
);
</>);
}
}