+ {peaks.map((peak, i) => {
+ let height = Math.max(BAR_MIN_HEIGHT, BAR_MAX_HEIGHT * peak);
+ if (state !== State.Normal) {
+ height = BAR_NOT_DOWNLOADED_HEIGHT;
+ }
+
+ const highlight = i < peakPosition;
+
+ // Use maximum height for current audio position
+ if (highlight && i + 1 >= peakPosition) {
+ height = BAR_MAX_HEIGHT;
+ }
+
+ const key = i;
+
+ return (
+
+ );
+ })}
+
);
- const peakPosition = peaks.length * (currentTime / duration);
+ let button: React.ReactElement;
+ if (state === State.Pending) {
+ // Not really a button, but who cares?
+ button = (
+ = (props: Props) => {
withContentAbove ? `${CSS_BASE}--with-content-above` : null
)}
>
-
-
- {peaks.map((peak, i) => {
- let height = Math.max(BAR_MIN_HEIGHT, BAR_MAX_HEIGHT * peak);
- const highlight = i < peakPosition;
-
- // Use maximum height for current audio position
- if (highlight && i + 1 >= peakPosition) {
- height = BAR_MAX_HEIGHT;
- }
-
- const key = i;
-
- return (
-
- );
- })}
-
+ {button}
+ {waveform}
{timeToText(duration)}
);
diff --git a/ts/state/smart/MessageAudio.tsx b/ts/state/smart/MessageAudio.tsx
index 10139aafa..ada44720c 100644
--- a/ts/state/smart/MessageAudio.tsx
+++ b/ts/state/smart/MessageAudio.tsx
@@ -9,6 +9,7 @@ import { mapDispatchToProps } from '../actions';
import { StateType } from '../reducer';
import { WaveformCache } from '../../types/Audio';
import { LocalizerType } from '../../types/Util';
+import { AttachmentType } from '../../types/Attachment';
export type Props = {
audio: HTMLAudioElement;
@@ -18,11 +19,12 @@ export type Props = {
direction?: 'incoming' | 'outgoing';
id: string;
i18n: LocalizerType;
- url: string;
+ attachment: AttachmentType;
withContentAbove: boolean;
withContentBelow: boolean;
buttonRef: React.RefObject