danog/telegram-tt
1
0
Fork 0
mirror of https://github.com/danog/telegram-tt.git synced 2025-01-22 05:11:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

Audio: Fix waveform for silent and waveformless voices (#1542)

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-11-12 18:45:52 +03:00
parent 7620774dc4
commit bd914a9024
3 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/common/Audio.tsx
View File

@ -18,7 +18,7 @@ import {
isMessageLocal, isMessageLocal,
isOwnMessage, isOwnMessage,
} from '../../modules/helpers'; } from '../../modules/helpers';
import { renderWaveform } from './helpers/waveform'; import { MAX_EMPTY_WAVEFORM_POINTS, renderWaveform } from './helpers/waveform';
import buildClassName from '../../util/buildClassName'; import buildClassName from '../../util/buildClassName';
import renderText from './helpers/renderText'; import renderText from './helpers/renderText';
import { getFileSizeString } from './helpers/documentInfo'; import { getFileSizeString } from './helpers/documentInfo';
@ -460,7 +460,10 @@ function useWaveformCanvas(
const { waveform, duration } = voice; const { waveform, duration } = voice;
if (!waveform) { 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); const durationFactor = Math.min(duration / AVG_VOICE_DURATION, 1);
@ -472,7 +475,8 @@ function useWaveformCanvas(
useLayoutEffect(() => { useLayoutEffect(() => {
const canvas = canvasRef.current; const canvas = canvasRef.current;
if (!canvas || !spikes || !peak) {
if (!canvas || !spikes || peak === undefined) {
return; return;
} }

1
src/components/common/helpers/waveform.ts
View File

@ -4,6 +4,7 @@ type IWaveformProps = {
progressFillStyle: string; progressFillStyle: string;
}; };
export const MAX_EMPTY_WAVEFORM_POINTS = 30;
const SPIKE_WIDTH = 2; const SPIKE_WIDTH = 2;
const SPIKE_STEP = 4; const SPIKE_STEP = 4;
const SPIKE_RADIUS = 1; const SPIKE_RADIUS = 1;

2
src/components/middle/message/_message-content.scss
View File

@ -703,6 +703,8 @@
} }
.forwarded-message { .forwarded-message {
.message-content.contact &,
.message-content.voice &,
.message-content.poll & { .message-content.poll & {
// MessageOutgoingStatus's icon needs more space // MessageOutgoingStatus's icon needs more space
margin-bottom: 0.5rem; margin-bottom: 0.5rem;