Increase sample count in voice message thumbnail

Fixes https://github.com/vector-im/element-web/issues/17817

Technically requires https://github.com/matrix-org/matrix-react-sdk/pull/6357 for sample sizing.
This commit is contained in:
Travis Ralston 2021-07-12 14:02:51 -06:00
parent 1b39dbdb53
commit 4c98c0bc23
2 changed files with 11 additions and 1 deletions

View file

@ -95,7 +95,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
duration: Math.round(this.state.recorder.durationSeconds * 1000),
// https://github.com/matrix-org/matrix-doc/pull/3246
waveform: this.state.recorder.getPlayback().waveform.map(v => Math.round(v * 1024)),
waveform: this.state.recorder.getPlayback().waveformThumbnail.map(v => Math.round(v * 1024)),
},
"org.matrix.msc3245.voice": {}, // No content, this is a rendering hint
});

View file

@ -56,6 +56,7 @@ export class Playback extends EventEmitter implements IDestroyable {
private state = PlaybackState.Decoding;
private audioBuf: AudioBuffer;
private resampledWaveform: number[];
private thumbnailWaveform: number[];
private waveformObservable = new SimpleObservable<number[]>();
private readonly clock: PlaybackClock;
private readonly fileSize: number;
@ -72,6 +73,7 @@ export class Playback extends EventEmitter implements IDestroyable {
this.fileSize = this.buf.byteLength;
this.context = createAudioContext();
this.resampledWaveform = arrayFastResample(seedWaveform ?? DEFAULT_WAVEFORM, PLAYBACK_WAVEFORM_SAMPLES);
this.thumbnailWaveform = arrayFastResample(seedWaveform ?? DEFAULT_WAVEFORM, 100);
this.waveformObservable.update(this.resampledWaveform);
this.clock = new PlaybackClock(this.context);
}
@ -92,6 +94,14 @@ export class Playback extends EventEmitter implements IDestroyable {
return this.resampledWaveform;
}
/**
* Stable waveform for representing a thumbnail of the media. Values are
* guaranteed to be between zero and one, inclusive.
*/
public get waveformThumbnail(): number[] {
return this.thumbnailWaveform;
}
public get waveformData(): SimpleObservable<number[]> {
return this.waveformObservable;
}