From bd914a9024b6d1d938e9175d22b5d13abb1bad00 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Fri, 12 Nov 2021 18:45:52 +0300
Subject: [PATCH] Audio: Fix waveform for silent and waveformless voices
 (#1542)

---
 src/components/common/Audio.tsx                     | 10 +++++++---
 src/components/common/helpers/waveform.ts           |  1 +
 src/components/middle/message/_message-content.scss |  2 ++
 3 files changed, 10 insertions(+), 3 deletions(-)

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;