selfhostyourtech/reflector
2
0
Fork 0
mirror of https://github.com/Monadical-SAS/reflector.git synced 2025-12-21 12:49:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

more styling + auto scroll behavior

Browse Source
This commit is contained in:
Jose B
2023-08-03 12:39:46 -05:00
parent c0419f19ca
commit 78b77bd6d8
4 changed files with 47 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
www/app/components/record.js
View File

@@ -66,7 +66,7 @@ export default function Recorder(props) {
});
const wsWrapper = _wavesurfer.getWrapper();
wsWrapper.style.cursor = "pointer";
wsWrapper.style.backgroundColor = "lightgray";
wsWrapper.style.backgroundColor = "#e0c3fc42";
wsWrapper.style.borderRadius = "15px";
_wavesurfer.on("play", () => {
@@ -114,6 +114,7 @@ export default function Recorder(props) {
<AudioInputsDropdown setDeviceId={setDeviceId} disabled={isRecording} />
&nbsp;
<button
className="w-20"
onClick={handleRecClick}
data-color={isRecording ? "red" : "blue"}
disabled={!deviceId}
@@ -122,6 +123,7 @@ export default function Recorder(props) {
</button>
&nbsp;
<button
className="w-20"
id="play-btn"
onClick={handlePlayClick}
data-color={isPlaying ? "orange" : "green"}
@@ -129,8 +131,9 @@ export default function Recorder(props) {
{isPlaying ? "Pause" : "Play"}
</button>
</div>
<div ref={waveformRef} className="w-full"></div>
<div ref={waveformRef} className="w-full shadow-xl rounded-2xl"></div>
{/* TODO: Download audio <a> tag */}
{/* TODO: current time / audio duration */}
</div>
);
}