diff --git a/src/components/common/Audio.tsx b/src/components/common/Audio.tsx index b9b641f42..6bf4bf730 100644 --- a/src/components/common/Audio.tsx +++ b/src/components/common/Audio.tsx @@ -18,7 +18,7 @@ import { isMessageLocal, isOwnMessage, } from '../../modules/helpers'; -import { renderWaveform } from './helpers/waveform'; +import { MAX_EMPTY_WAVEFORM_POINTS, renderWaveform } from './helpers/waveform'; import buildClassName from '../../util/buildClassName'; import renderText from './helpers/renderText'; import { getFileSizeString } from './helpers/documentInfo'; @@ -460,7 +460,10 @@ function useWaveformCanvas( const { waveform, duration } = voice; if (!waveform) { - return undefined; + return { + data: new Array(Math.min(duration, MAX_EMPTY_WAVEFORM_POINTS)).fill(0), + peak: 0, + }; } const durationFactor = Math.min(duration / AVG_VOICE_DURATION, 1); @@ -472,7 +475,8 @@ function useWaveformCanvas( useLayoutEffect(() => { const canvas = canvasRef.current; - if (!canvas || !spikes || !peak) { + + if (!canvas || !spikes || peak === undefined) { return; } diff --git a/src/components/common/helpers/waveform.ts b/src/components/common/helpers/waveform.ts index 06b768825..8134722b6 100644 --- a/src/components/common/helpers/waveform.ts +++ b/src/components/common/helpers/waveform.ts @@ -4,6 +4,7 @@ type IWaveformProps = { progressFillStyle: string; }; +export const MAX_EMPTY_WAVEFORM_POINTS = 30; const SPIKE_WIDTH = 2; const SPIKE_STEP = 4; const SPIKE_RADIUS = 1; diff --git a/src/components/middle/message/_message-content.scss b/src/components/middle/message/_message-content.scss index 6ff2e3c2a..9c38ffa31 100644 --- a/src/components/middle/message/_message-content.scss +++ b/src/components/middle/message/_message-content.scss @@ -703,6 +703,8 @@ } .forwarded-message { + .message-content.contact &, + .message-content.voice &, .message-content.poll & { // MessageOutgoingStatus's icon needs more space margin-bottom: 0.5rem;