Voice notes drafts

This commit is contained in:
Alvaro 2023-03-02 13:55:40 -07:00 committed by GitHub
parent 356fb301e1
commit 99015d7b96
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
48 changed files with 2113 additions and 909 deletions

View file

@ -0,0 +1,60 @@
// Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import classNames from 'classnames';
import React from 'react';
import { assertDev } from '../../util/assert';
type Props = {
peaks: ReadonlyArray<number>;
barMinHeight: number;
barMaxHeight: number;
currentTime: number | undefined;
duration: number | undefined;
};
export function Waveform({
peaks,
barMinHeight,
barMaxHeight,
currentTime,
duration,
}: Props): JSX.Element {
const currentTimeOrZero = currentTime ?? 0;
const peakPosition = peaks.length * (currentTimeOrZero / (duration ?? 1e-23));
return (
<div className={classNames(['Waveform'])}>
{peaks.map((peak, i) => {
assertDev(
peak >= 0 && peak <= 1 && !Number.isNaN(peak),
`Peak outside of range: ${peak}`
);
let height = Math.max(barMinHeight, barMaxHeight * peak);
const highlight = i < peakPosition;
// Use maximum height for current audio position
if (highlight && i + 1 >= peakPosition) {
height = barMaxHeight;
}
assertDev(!Number.isNaN(height), 'Got NaN for peak height');
const key = i;
return (
<div
className={classNames([
'Waveform__bar',
highlight ? 'Waveform__bar--active' : null,
])}
key={key}
style={{ height }}
/>
);
})}
</div>
);
}