Clicking first bars of the waveform should rewind

It is practically impossible to rewind audio prior to this commit. With
this commit - clicking first two bars will rewind the audio to its very
start instead of updating its current play time to a specific non-zero v
alue.
This commit is contained in:
Fedor Indutny 2021-03-24 16:08:57 -07:00 committed by GitHub
parent b44bf33256
commit 7a9a4a1404
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 6 deletions

View file

@ -60,11 +60,13 @@ enum State {
// Constants
const CSS_BASE = 'module-message__audio-attachment';
const PEAK_COUNT = 47;
const BAR_COUNT = 47;
const BAR_NOT_DOWNLOADED_HEIGHT = 2;
const BAR_MIN_HEIGHT = 4;
const BAR_MAX_HEIGHT = 20;
const REWIND_BAR_COUNT = 2;
// Increments for keyboard audio seek (in seconds)
const SMALL_INCREMENT = 1;
const BIG_INCREMENT = 5;
@ -114,8 +116,8 @@ async function loadAudio(options: LoadAudioOptions): Promise<LoadAudioResult> {
const data = await audioContext.decodeAudioData(raw);
// Compute RMS peaks
const peaks = new Array(PEAK_COUNT).fill(0);
const norms = new Array(PEAK_COUNT).fill(0);
const peaks = new Array(BAR_COUNT).fill(0);
const norms = new Array(BAR_COUNT).fill(0);
const samplesPerPeak = data.length / peaks.length;
for (
@ -233,7 +235,7 @@ export const MessageAudio: React.FC<Props> = (props: Props) => {
const [duration, setDuration] = useState(1e-23);
const [peaks, setPeaks] = useState<ReadonlyArray<number>>(
new Array(PEAK_COUNT).fill(0)
new Array(BAR_COUNT).fill(0)
);
let state: State;
@ -413,7 +415,11 @@ export const MessageAudio: React.FC<Props> = (props: Props) => {
}
const boundingRect = waveformRef.current.getBoundingClientRect();
const progress = (event.pageX - boundingRect.left) / boundingRect.width;
let progress = (event.pageX - boundingRect.left) / boundingRect.width;
if (progress <= REWIND_BAR_COUNT / BAR_COUNT) {
progress = 0;
}
if (isPlaying && !Number.isNaN(audio.duration)) {
audio.currentTime = audio.duration * progress;

View file

@ -14667,7 +14667,7 @@
"rule": "React-useRef",
"path": "ts/components/conversation/MessageAudio.js",
"line": " const waveformRef = react_1.useRef(null);",
"lineNumber": 143,
"lineNumber": 144,
"reasonCategory": "usageTrusted",
"updated": "2021-03-09T01:19:04.057Z",
"reasonDetail": "Used for obtanining the bounding box for the container"