Audio messages: move countdown under waveform

This commit is contained in:
Evan Hahn 2021-07-09 15:27:16 -05:00 committed by GitHub
parent e4efa01073
commit 831ec98418
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 338 additions and 215 deletions

View file

@ -8,18 +8,28 @@ import { noop } from 'lodash';
import { assert } from '../../util/assert';
import { LocalizerType } from '../../types/Util';
import { hasNotDownloaded, AttachmentType } from '../../types/Attachment';
import type { DirectionType, MessageStatusType } from './Message';
import { ComputePeaksResult } from '../GlobalAudioContext';
import { MessageMetadata } from './MessageMetadata';
export type Props = {
direction?: 'incoming' | 'outgoing';
id: string;
renderingContext: string;
i18n: LocalizerType;
attachment: AttachmentType;
withContentAbove: boolean;
withContentBelow: boolean;
// Message properties. Many are needed for rendering metadata
direction: DirectionType;
expirationLength?: number;
expirationTimestamp?: number;
id: string;
showMessageDetail: (id: string) => void;
status?: MessageStatusType;
textPending?: boolean;
timestamp: number;
// See: GlobalAudioContext.tsx
audio: HTMLAudioElement;
@ -134,13 +144,20 @@ const Button: React.FC<ButtonProps> = props => {
export const MessageAudio: React.FC<Props> = (props: Props) => {
const {
i18n,
id,
renderingContext,
direction,
attachment,
withContentAbove,
withContentBelow,
direction,
expirationLength,
expirationTimestamp,
id,
showMessageDetail,
status,
textPending,
timestamp,
buttonRef,
kickOffAttachmentDownload,
onCorrupted,
@ -492,6 +509,29 @@ export const MessageAudio: React.FC<Props> = (props: Props) => {
const countDown = duration - currentTime;
const metadata = (
<div className={`${CSS_BASE}__metadata`}>
{!withContentBelow && (
<MessageMetadata
direction={direction}
expirationLength={expirationLength}
expirationTimestamp={expirationTimestamp}
hasText={withContentBelow}
i18n={i18n}
id={id}
isShowingImage={false}
isSticker={false}
isTapToViewExpired={false}
showMessageDetail={showMessageDetail}
status={status}
textPending={textPending}
timestamp={timestamp}
/>
)}
<div className={`${CSS_BASE}__countdown`}>{timeToText(countDown)}</div>
</div>
);
return (
<div
className={classNames(
@ -501,9 +541,11 @@ export const MessageAudio: React.FC<Props> = (props: Props) => {
withContentAbove ? `${CSS_BASE}--with-content-above` : null
)}
>
{button}
{waveform}
<div className={`${CSS_BASE}__countdown`}>{timeToText(countDown)}</div>
<div className={`${CSS_BASE}__button-and-waveform`}>
{button}
{waveform}
</div>
{metadata}
</div>
);
};