Voice notes drafts
This commit is contained in:
parent
356fb301e1
commit
99015d7b96
48 changed files with 2113 additions and 909 deletions
60
ts/components/conversation/Waveform.tsx
Normal file
60
ts/components/conversation/Waveform.tsx
Normal 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>
|
||||
);
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue