Voice notes drafts
This commit is contained in:
Alvaro
GitHub
parent
356fb301e1
commit
99015d7b96
48 changed files with 2113 additions and 909 deletions
|
|
@ -126,6 +126,8 @@ const useProps = (overrideProps: Partial<Props> = {}): Props => ({
|
|||
// SMS-only
|
||||
isSMSOnly: overrideProps.isSMSOnly || false,
|
||||
isFetchingUUID: overrideProps.isFetchingUUID || false,
|
||||
renderSmartCompositionRecording: _ => <div>RECORDING</div>,
|
||||
renderSmartCompositionRecordingDraft: _ => <div>RECORDING DRAFT</div>,
|
||||
});
|
||||
|
||||
export function Default(): JSX.Element {
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ import type {
|
|||
AttachmentDraftType,
|
||||
InMemoryAttachmentDraftType,
|
||||
} from '../types/Attachment';
|
||||
import { isImageAttachment } from '../types/Attachment';
|
||||
import { isImageAttachment, isVoiceMessage } from '../types/Attachment';
|
||||
import { AudioCapture } from './conversation/AudioCapture';
|
||||
import { CompositionUpload } from './CompositionUpload';
|
||||
import type {
|
||||
|
|
@ -62,7 +62,9 @@ import { isImageTypeSupported } from '../util/GoogleChrome';
|
|||
import * as KeyboardLayout from '../services/keyboardLayout';
|
||||
import { usePrevious } from '../hooks/usePrevious';
|
||||
import { PanelType } from '../types/Panels';
|
||||
import type { SmartCompositionRecordingDraftProps } from '../state/smart/CompositionRecordingDraft';
|
||||
import { useEscapeHandling } from '../hooks/useEscapeHandling';
|
||||
import type { SmartCompositionRecordingProps } from '../state/smart/CompositionRecording';
|
||||
|
||||
export type OwnProps = Readonly<{
|
||||
acceptedMessageRequest?: boolean;
|
||||
|
|
@ -77,7 +79,7 @@ export type OwnProps = Readonly<{
|
|||
cancelRecording: () => unknown;
|
||||
completeRecording: (
|
||||
conversationId: string,
|
||||
onSendAudioRecording?: (rec: InMemoryAttachmentDraftType) => unknown
|
||||
onRecordingComplete: (rec: InMemoryAttachmentDraftType) => unknown
|
||||
) => unknown;
|
||||
conversationId: string;
|
||||
uuid?: string;
|
||||
|
|
@ -138,6 +140,12 @@ export type OwnProps = Readonly<{
|
|||
showConversation: ShowConversationType;
|
||||
startRecording: (id: string) => unknown;
|
||||
theme: ThemeType;
|
||||
renderSmartCompositionRecording: (
|
||||
props: SmartCompositionRecordingProps
|
||||
) => JSX.Element;
|
||||
renderSmartCompositionRecordingDraft: (
|
||||
props: SmartCompositionRecordingDraftProps
|
||||
) => JSX.Element | null;
|
||||
}>;
|
||||
|
||||
export type Props = Pick<
|
||||
|
|
@ -196,10 +204,6 @@ export function CompositionArea({
|
|||
draftAttachments,
|
||||
onClearAttachments,
|
||||
// AudioCapture
|
||||
cancelRecording,
|
||||
completeRecording,
|
||||
errorDialogAudioRecorderType,
|
||||
errorRecording,
|
||||
recordingState,
|
||||
startRecording,
|
||||
// StagedLinkPreview
|
||||
|
|
@ -266,7 +270,9 @@ export function CompositionArea({
|
|||
// SMS-only contacts
|
||||
isSMSOnly,
|
||||
isFetchingUUID,
|
||||
}: Props): JSX.Element {
|
||||
renderSmartCompositionRecording,
|
||||
renderSmartCompositionRecordingDraft,
|
||||
}: Props): JSX.Element | null {
|
||||
const [dirty, setDirty] = useState(false);
|
||||
const [large, setLarge] = useState(false);
|
||||
const [attachmentToEdit, setAttachmentToEdit] = useState<
|
||||
|
|
@ -418,20 +424,9 @@ export function CompositionArea({
|
|||
const micButtonFragment = shouldShowMicrophone ? (
|
||||
<div className="CompositionArea__button-cell">
|
||||
<AudioCapture
|
||||
cancelRecording={cancelRecording}
|
||||
completeRecording={completeRecording}
|
||||
conversationId={conversationId}
|
||||
draftAttachments={draftAttachments}
|
||||
errorDialogAudioRecorderType={errorDialogAudioRecorderType}
|
||||
errorRecording={errorRecording}
|
||||
i18n={i18n}
|
||||
recordingState={recordingState}
|
||||
onSendAudioRecording={(
|
||||
voiceNoteAttachment: InMemoryAttachmentDraftType
|
||||
) => {
|
||||
emojiButtonRef.current?.close();
|
||||
sendMultiMediaMessage(conversationId, { voiceNoteAttachment });
|
||||
}}
|
||||
startRecording={startRecording}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -517,6 +512,10 @@ export function CompositionArea({
|
|||
};
|
||||
}, [setLarge]);
|
||||
|
||||
const handleRecordingBeforeSend = useCallback(() => {
|
||||
emojiButtonRef.current?.close();
|
||||
}, [emojiButtonRef]);
|
||||
|
||||
const clearQuote = useCallback(() => {
|
||||
if (quotedMessageId) {
|
||||
setQuoteByMessageId(conversationId, undefined);
|
||||
|
|
@ -633,6 +632,20 @@ export function CompositionArea({
|
|||
);
|
||||
}
|
||||
|
||||
if (isRecording) {
|
||||
return renderSmartCompositionRecording({
|
||||
onBeforeSend: handleRecordingBeforeSend,
|
||||
});
|
||||
}
|
||||
|
||||
if (draftAttachments.length === 1 && isVoiceMessage(draftAttachments[0])) {
|
||||
const voiceNoteAttachment = draftAttachments[0];
|
||||
|
||||
if (!voiceNoteAttachment.pending && voiceNoteAttachment.url) {
|
||||
return renderSmartCompositionRecordingDraft({ voiceNoteAttachment });
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="CompositionArea">
|
||||
{attachmentToEdit &&
|
||||
|
|
|
|||
57
ts/components/CompositionRecording.stories.tsx
Normal file
57
ts/components/CompositionRecording.stories.tsx
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { CompositionRecording } from './CompositionRecording';
|
||||
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
export default {
|
||||
title: 'components/CompositionRecording',
|
||||
component: CompositionRecording,
|
||||
};
|
||||
|
||||
export function Default(): JSX.Element {
|
||||
const [active, setActive] = useState(false);
|
||||
|
||||
const cancel = action('cancel');
|
||||
const send = action('send');
|
||||
|
||||
const handleActivate = () => {
|
||||
setActive(true);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
cancel();
|
||||
setActive(false);
|
||||
};
|
||||
const handleSend = () => {
|
||||
send();
|
||||
setActive(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{!active && (
|
||||
<button type="button" onClick={handleActivate}>
|
||||
Activate
|
||||
</button>
|
||||
)}
|
||||
{active && (
|
||||
<CompositionRecording
|
||||
i18n={i18n}
|
||||
conversationId="convo-id"
|
||||
onCancel={handleCancel}
|
||||
onSend={handleSend}
|
||||
errorRecording={_ => action('error')()}
|
||||
addAttachment={action('addAttachment')}
|
||||
completeRecording={action('completeRecording')}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
156
ts/components/CompositionRecording.tsx
Normal file
156
ts/components/CompositionRecording.tsx
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import { noop } from 'lodash';
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { useEscapeHandling } from '../hooks/useEscapeHandling';
|
||||
import { usePrevious } from '../hooks/usePrevious';
|
||||
import type { InMemoryAttachmentDraftType } from '../types/Attachment';
|
||||
import { ErrorDialogAudioRecorderType } from '../types/AudioRecorder';
|
||||
import type { LocalizerType } from '../types/Util';
|
||||
import { DurationInSeconds, SECOND } from '../util/durations';
|
||||
import { durationToPlaybackText } from '../util/durationToPlaybackText';
|
||||
import { ConfirmationDialog } from './ConfirmationDialog';
|
||||
import { RecordingComposer } from './RecordingComposer';
|
||||
import { ToastVoiceNoteLimit } from './ToastVoiceNoteLimit';
|
||||
|
||||
export type Props = {
|
||||
i18n: LocalizerType;
|
||||
conversationId: string;
|
||||
onCancel: () => void;
|
||||
onSend: () => void;
|
||||
errorRecording: (e: ErrorDialogAudioRecorderType) => unknown;
|
||||
errorDialogAudioRecorderType?: ErrorDialogAudioRecorderType;
|
||||
addAttachment: (
|
||||
conversationId: string,
|
||||
attachment: InMemoryAttachmentDraftType
|
||||
) => unknown;
|
||||
completeRecording: (
|
||||
conversationId: string,
|
||||
onRecordingComplete: (rec: InMemoryAttachmentDraftType) => unknown
|
||||
) => unknown;
|
||||
};
|
||||
|
||||
export function CompositionRecording({
|
||||
i18n,
|
||||
conversationId,
|
||||
onCancel,
|
||||
onSend,
|
||||
errorRecording,
|
||||
errorDialogAudioRecorderType,
|
||||
addAttachment,
|
||||
completeRecording,
|
||||
}: Props): JSX.Element {
|
||||
useEscapeHandling(onCancel);
|
||||
|
||||
const [showVoiceNoteLimitToast, setShowVoiceNoteLimitToast] = useState(true);
|
||||
|
||||
// when interrupted (blur, switching convos)
|
||||
// stop recording and save draft
|
||||
const handleRecordingInterruption = useCallback(() => {
|
||||
completeRecording(conversationId, attachment => {
|
||||
addAttachment(conversationId, attachment);
|
||||
});
|
||||
}, [conversationId, completeRecording, addAttachment]);
|
||||
|
||||
// switched to another app
|
||||
useEffect(() => {
|
||||
window.addEventListener('blur', handleRecordingInterruption);
|
||||
return () => {
|
||||
window.removeEventListener('blur', handleRecordingInterruption);
|
||||
};
|
||||
}, [handleRecordingInterruption]);
|
||||
|
||||
// switched conversations
|
||||
const previousConversationId = usePrevious(conversationId, conversationId);
|
||||
useEffect(() => {
|
||||
if (previousConversationId !== conversationId) {
|
||||
handleRecordingInterruption();
|
||||
}
|
||||
});
|
||||
|
||||
const handleCloseToast = useCallback(() => {
|
||||
setShowVoiceNoteLimitToast(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
handleCloseToast();
|
||||
};
|
||||
}, [handleCloseToast]);
|
||||
|
||||
const startTime = useRef(Date.now());
|
||||
const [duration, setDuration] = useState(0);
|
||||
const drift = useRef(0);
|
||||
|
||||
// update recording duration
|
||||
useEffect(() => {
|
||||
const timeoutId = setTimeout(() => {
|
||||
const now = Date.now();
|
||||
const newDurationMs = now - startTime.current;
|
||||
drift.current = newDurationMs % SECOND;
|
||||
setDuration(newDurationMs / SECOND);
|
||||
|
||||
if (
|
||||
DurationInSeconds.fromMillis(newDurationMs) >= DurationInSeconds.HOUR
|
||||
) {
|
||||
errorRecording(ErrorDialogAudioRecorderType.Timeout);
|
||||
}
|
||||
}, SECOND - drift.current);
|
||||
|
||||
return () => {
|
||||
clearTimeout(timeoutId);
|
||||
};
|
||||
}, [duration, errorRecording]);
|
||||
|
||||
let confirmationDialog: JSX.Element | undefined;
|
||||
if (errorDialogAudioRecorderType === ErrorDialogAudioRecorderType.Timeout) {
|
||||
confirmationDialog = (
|
||||
<ConfirmationDialog
|
||||
dialogName="AudioCapture.sendAnyway"
|
||||
i18n={i18n}
|
||||
onCancel={onCancel}
|
||||
onClose={noop}
|
||||
cancelText={i18n('discard')}
|
||||
actions={[
|
||||
{
|
||||
text: i18n('sendAnyway'),
|
||||
style: 'affirmative',
|
||||
action: onSend,
|
||||
},
|
||||
]}
|
||||
>
|
||||
{i18n('voiceRecordingInterruptedMax')}
|
||||
</ConfirmationDialog>
|
||||
);
|
||||
} else if (
|
||||
errorDialogAudioRecorderType === ErrorDialogAudioRecorderType.ErrorRecording
|
||||
) {
|
||||
confirmationDialog = (
|
||||
<ConfirmationDialog
|
||||
dialogName="AudioCapture.error"
|
||||
i18n={i18n}
|
||||
onCancel={onCancel}
|
||||
onClose={noop}
|
||||
cancelText={i18n('ok')}
|
||||
actions={[]}
|
||||
>
|
||||
{i18n('voiceNoteError')}
|
||||
</ConfirmationDialog>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<RecordingComposer i18n={i18n} onCancel={onCancel} onSend={onSend}>
|
||||
<div className="CompositionRecording__microphone" />
|
||||
<div className="CompositionRecording__timer">
|
||||
{durationToPlaybackText(duration)}
|
||||
</div>
|
||||
|
||||
{confirmationDialog}
|
||||
{showVoiceNoteLimitToast && (
|
||||
<ToastVoiceNoteLimit i18n={i18n} onClose={handleCloseToast} />
|
||||
)}
|
||||
</RecordingComposer>
|
||||
);
|
||||
}
|
||||
85
ts/components/CompositionRecordingDraft.stories.tsx
Normal file
85
ts/components/CompositionRecordingDraft.stories.tsx
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { CompositionRecordingDraft } from './CompositionRecordingDraft';
|
||||
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
export default {
|
||||
title: 'components/CompositionRecordingDraft',
|
||||
component: CompositionRecordingDraft,
|
||||
};
|
||||
|
||||
export function Default(): JSX.Element {
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
const [currentTime, setCurrentTime] = React.useState<number>(0);
|
||||
const [duration, setDuration] = React.useState<number | undefined>(undefined);
|
||||
|
||||
const audio = React.useMemo(() => {
|
||||
const a = new Audio();
|
||||
|
||||
a.addEventListener('loadedmetadata', () => {
|
||||
setDuration(duration);
|
||||
});
|
||||
|
||||
a.src = '/fixtures/incompetech-com-Agnus-Dei-X.mp3';
|
||||
|
||||
a.addEventListener('timeupdate', () => {
|
||||
setCurrentTime(a.currentTime);
|
||||
});
|
||||
|
||||
a.addEventListener('ended', () => {
|
||||
setIsPlaying(false);
|
||||
setCurrentTime(0);
|
||||
});
|
||||
|
||||
a.addEventListener('loadeddata', () => {
|
||||
a.currentTime = currentTime;
|
||||
});
|
||||
|
||||
return a;
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
const handlePlay = (positionAsRatio?: number) => {
|
||||
if (positionAsRatio !== undefined) {
|
||||
audio.currentTime = positionAsRatio * audio.duration;
|
||||
}
|
||||
void audio.play();
|
||||
setCurrentTime(audio.currentTime);
|
||||
setIsPlaying(true);
|
||||
};
|
||||
|
||||
const handlePause = () => {
|
||||
audio.pause();
|
||||
setIsPlaying(false);
|
||||
};
|
||||
|
||||
const handleScrub = (newPosition: number) => {
|
||||
if (duration !== undefined) {
|
||||
audio.currentTime = newPosition * duration;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<CompositionRecordingDraft
|
||||
i18n={i18n}
|
||||
audioUrl={audio.src}
|
||||
active={{
|
||||
playing: isPlaying,
|
||||
currentTime,
|
||||
duration,
|
||||
}}
|
||||
onCancel={action('cancel')}
|
||||
onSend={action('send')}
|
||||
onPlay={handlePlay}
|
||||
onPause={handlePause}
|
||||
onScrub={handleScrub}
|
||||
/>
|
||||
);
|
||||
}
|
||||
162
ts/components/CompositionRecordingDraft.tsx
Normal file
162
ts/components/CompositionRecordingDraft.tsx
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React, { useState, useCallback, useRef } from 'react';
|
||||
import type { ContentRect } from 'react-measure';
|
||||
import Measure from 'react-measure';
|
||||
import { useComputePeaks } from '../hooks/useComputePeaks';
|
||||
import type { LocalizerType } from '../types/Util';
|
||||
import { WaveformScrubber } from './conversation/WaveformScrubber';
|
||||
import { PlaybackButton } from './PlaybackButton';
|
||||
import { RecordingComposer } from './RecordingComposer';
|
||||
import * as log from '../logging/log';
|
||||
|
||||
type Props = {
|
||||
i18n: LocalizerType;
|
||||
audioUrl: string | undefined;
|
||||
active:
|
||||
| {
|
||||
playing: boolean;
|
||||
duration: number | undefined;
|
||||
currentTime: number;
|
||||
}
|
||||
| undefined;
|
||||
onCancel: () => void;
|
||||
onSend: () => void;
|
||||
onPlay: (positionAsRatio?: number) => void;
|
||||
onPause: () => void;
|
||||
onScrub: (positionAsRatio: number) => void;
|
||||
};
|
||||
|
||||
export function CompositionRecordingDraft({
|
||||
i18n,
|
||||
audioUrl,
|
||||
active,
|
||||
onCancel,
|
||||
onSend,
|
||||
onPlay,
|
||||
onPause,
|
||||
onScrub,
|
||||
}: Props): JSX.Element {
|
||||
const [state, setState] = useState<{
|
||||
calculatingWidth: boolean;
|
||||
width: undefined | number;
|
||||
}>({ calculatingWidth: false, width: undefined });
|
||||
|
||||
const timeout = useRef<undefined | NodeJS.Timeout>(undefined);
|
||||
|
||||
const handleResize = useCallback(
|
||||
({ bounds }: ContentRect) => {
|
||||
if (!bounds || bounds.width === state.width) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!state.calculatingWidth) {
|
||||
setState({ ...state, calculatingWidth: true });
|
||||
}
|
||||
|
||||
if (timeout.current) {
|
||||
clearTimeout(timeout.current);
|
||||
}
|
||||
|
||||
const newWidth = bounds.width;
|
||||
|
||||
// if mounting, set width immediately
|
||||
// otherwise debounce
|
||||
if (state.width === undefined) {
|
||||
setState({ calculatingWidth: false, width: newWidth });
|
||||
} else {
|
||||
timeout.current = setTimeout(() => {
|
||||
setState({ calculatingWidth: false, width: newWidth });
|
||||
}, 500);
|
||||
}
|
||||
},
|
||||
[state]
|
||||
);
|
||||
|
||||
const handlePlaybackClick = useCallback(() => {
|
||||
if (active?.playing) {
|
||||
onPause();
|
||||
} else {
|
||||
onPlay();
|
||||
}
|
||||
}, [active, onPause, onPlay]);
|
||||
|
||||
const scrubber = (
|
||||
<SizedWaveformScrubber
|
||||
i18n={i18n}
|
||||
audioUrl={audioUrl}
|
||||
activeDuration={active?.duration}
|
||||
currentTime={active?.currentTime ?? 0}
|
||||
width={state.width}
|
||||
onClick={onScrub}
|
||||
onScrub={onScrub}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<RecordingComposer i18n={i18n} onCancel={onCancel} onSend={onSend}>
|
||||
<PlaybackButton
|
||||
variant="draft"
|
||||
mod={active?.playing ? 'pause' : 'play'}
|
||||
label={
|
||||
active?.playing
|
||||
? i18n('MessageAudio--pause')
|
||||
: i18n('MessageAudio--play')
|
||||
}
|
||||
onClick={handlePlaybackClick}
|
||||
/>
|
||||
<Measure bounds onResize={handleResize}>
|
||||
{({ measureRef }) => (
|
||||
<div ref={measureRef} className="CompositionRecordingDraft__sizer">
|
||||
{scrubber}
|
||||
</div>
|
||||
)}
|
||||
</Measure>
|
||||
</RecordingComposer>
|
||||
);
|
||||
}
|
||||
|
||||
type SizedWaveformScrubberProps = {
|
||||
i18n: LocalizerType;
|
||||
audioUrl: string | undefined;
|
||||
// undefined if we don't have a size yet
|
||||
width: number | undefined;
|
||||
// defined if we are playing
|
||||
activeDuration: number | undefined;
|
||||
currentTime: number;
|
||||
onScrub: (progressAsRatio: number) => void;
|
||||
onClick: (progressAsRatio: number) => void;
|
||||
};
|
||||
function SizedWaveformScrubber({
|
||||
i18n,
|
||||
audioUrl,
|
||||
activeDuration,
|
||||
currentTime,
|
||||
onClick,
|
||||
onScrub,
|
||||
width,
|
||||
}: SizedWaveformScrubberProps) {
|
||||
const handleCorrupted = () => {
|
||||
log.warn('SizedWaveformScrubber: audio corrupted');
|
||||
};
|
||||
const { peaks, duration } = useComputePeaks({
|
||||
audioUrl,
|
||||
activeDuration,
|
||||
onCorrupted: handleCorrupted,
|
||||
barCount: Math.floor((width ?? 800) / 4),
|
||||
});
|
||||
|
||||
return (
|
||||
<WaveformScrubber
|
||||
i18n={i18n}
|
||||
peaks={peaks}
|
||||
currentTime={currentTime}
|
||||
barMinHeight={2}
|
||||
barMaxHeight={20}
|
||||
duration={duration}
|
||||
onClick={onClick}
|
||||
onScrub={onScrub}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -17,7 +17,7 @@ export default {
|
|||
component: MiniPlayer,
|
||||
};
|
||||
|
||||
export function Basic(): JSX.Element {
|
||||
export function Default(): JSX.Element {
|
||||
const [active, setActive] = useState(false);
|
||||
|
||||
const [playerState, setPlayerState] = useState(PlayerState.loading);
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
// Copyright 2022 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import classNames from 'classnames';
|
||||
import React, { useCallback } from 'react';
|
||||
import type { LocalizerType } from '../types/Util';
|
||||
import { durationToPlaybackText } from '../util/durationToPlaybackText';
|
||||
import { Emojify } from './conversation/Emojify';
|
||||
import { PlaybackButton } from './PlaybackButton';
|
||||
import { PlaybackRateButton } from './PlaybackRateButton';
|
||||
|
||||
export enum PlayerState {
|
||||
|
|
@ -60,15 +60,19 @@ export function MiniPlayer({
|
|||
}, [state, onPause, onPlay]);
|
||||
|
||||
let label: string | undefined;
|
||||
let mod: 'play' | 'pause' | 'pending';
|
||||
switch (state) {
|
||||
case PlayerState.playing:
|
||||
label = i18n('MessageAudio--pause');
|
||||
mod = 'pause';
|
||||
break;
|
||||
case PlayerState.paused:
|
||||
label = i18n('MessageAudio--play');
|
||||
mod = 'play';
|
||||
break;
|
||||
case PlayerState.loading:
|
||||
label = i18n('MessageAudio--pending');
|
||||
mod = 'pending';
|
||||
break;
|
||||
default:
|
||||
throw new TypeError(`Missing case ${state}`);
|
||||
|
|
@ -76,17 +80,12 @@ export function MiniPlayer({
|
|||
|
||||
return (
|
||||
<div className="MiniPlayer">
|
||||
<button
|
||||
type="button"
|
||||
className={classNames(
|
||||
'MiniPlayer__playback-button',
|
||||
state === 'playing' && 'MiniPlayer__playback-button--pause',
|
||||
state === 'paused' && 'MiniPlayer__playback-button--play',
|
||||
state === 'loading' && 'MiniPlayer__playback-button--pending'
|
||||
)}
|
||||
<PlaybackButton
|
||||
context="incoming"
|
||||
variant="mini"
|
||||
mod={mod}
|
||||
label={label}
|
||||
onClick={handleClick}
|
||||
aria-label={label}
|
||||
disabled={state === PlayerState.loading}
|
||||
/>
|
||||
|
||||
<div className="MiniPlayer__state">
|
||||
|
|
|
|||
48
ts/components/PlaybackButton.stories.tsx
Normal file
48
ts/components/PlaybackButton.stories.tsx
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React from 'react';
|
||||
import type { CSSProperties } from 'react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { PlaybackButton } from './PlaybackButton';
|
||||
|
||||
export default {
|
||||
title: 'components/PlaybackButton',
|
||||
component: PlaybackButton,
|
||||
};
|
||||
|
||||
const rowStyles: CSSProperties = {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
padding: 10,
|
||||
};
|
||||
|
||||
export function Default(): JSX.Element {
|
||||
return (
|
||||
<>
|
||||
{(['message', 'draft', 'mini'] as const).map(variant => (
|
||||
<>
|
||||
{(['incoming', 'outgoing'] as const).map(context => (
|
||||
<div
|
||||
style={{
|
||||
...rowStyles,
|
||||
background: context === 'outgoing' ? '#2c6bed' : undefined,
|
||||
}}
|
||||
>
|
||||
{(['play', 'download', 'pending', 'pause'] as const).map(mod => (
|
||||
<PlaybackButton
|
||||
key={`${variant}_${context}_${mod}`}
|
||||
variant={variant}
|
||||
label="playback"
|
||||
onClick={action('click')}
|
||||
context={context}
|
||||
mod={mod}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
86
ts/components/PlaybackButton.tsx
Normal file
86
ts/components/PlaybackButton.tsx
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import { animated, useSpring } from '@react-spring/web';
|
||||
import classNames from 'classnames';
|
||||
import React, { useCallback } from 'react';
|
||||
|
||||
const SPRING_CONFIG = {
|
||||
mass: 0.5,
|
||||
tension: 350,
|
||||
friction: 20,
|
||||
velocity: 0.01,
|
||||
};
|
||||
|
||||
type ButtonProps = {
|
||||
context?: 'incoming' | 'outgoing';
|
||||
variant: 'message' | 'mini' | 'draft';
|
||||
mod: 'play' | 'pause' | 'download' | 'pending';
|
||||
label: string;
|
||||
visible?: boolean;
|
||||
onClick: () => void;
|
||||
onMouseDown?: () => void;
|
||||
onMouseUp?: () => void;
|
||||
};
|
||||
|
||||
/** Handles animations, key events, and stopping event propagation */
|
||||
export const PlaybackButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
function ButtonInner(props, ref) {
|
||||
const { mod, label, variant, onClick, context, visible = true } = props;
|
||||
const [animProps] = useSpring(
|
||||
{
|
||||
config: SPRING_CONFIG,
|
||||
to: { scale: visible ? 1 : 0 },
|
||||
},
|
||||
[visible]
|
||||
);
|
||||
|
||||
// Clicking button toggle playback
|
||||
const onButtonClick = useCallback(
|
||||
(event: React.MouseEvent) => {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
onClick();
|
||||
},
|
||||
[onClick]
|
||||
);
|
||||
|
||||
// Keyboard playback toggle
|
||||
const onButtonKeyDown = useCallback(
|
||||
(event: React.KeyboardEvent) => {
|
||||
if (event.key !== 'Enter' && event.key !== 'Space') {
|
||||
return;
|
||||
}
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
onClick();
|
||||
},
|
||||
[onClick]
|
||||
);
|
||||
|
||||
const buttonComponent = (
|
||||
<button
|
||||
type="button"
|
||||
ref={ref}
|
||||
className={classNames(
|
||||
'PlaybackButton',
|
||||
`PlaybackButton--variant-${variant}`,
|
||||
context && `PlaybackButton--context-${context}`,
|
||||
mod ? `PlaybackButton--${mod}` : undefined
|
||||
)}
|
||||
onClick={onButtonClick}
|
||||
onKeyDown={onButtonKeyDown}
|
||||
tabIndex={0}
|
||||
aria-label={label}
|
||||
/>
|
||||
);
|
||||
|
||||
if (variant === 'message') {
|
||||
return <animated.div style={animProps}>{buttonComponent}</animated.div>;
|
||||
}
|
||||
|
||||
return buttonComponent;
|
||||
}
|
||||
);
|
||||
42
ts/components/RecordingComposer.tsx
Normal file
42
ts/components/RecordingComposer.tsx
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React from 'react';
|
||||
import type { ReactNode } from 'react';
|
||||
import type { LocalizerType } from '../types/I18N';
|
||||
import { Button, ButtonSize, ButtonVariant } from './Button';
|
||||
|
||||
type Props = {
|
||||
i18n: LocalizerType;
|
||||
children: ReactNode;
|
||||
onCancel: () => void;
|
||||
onSend: () => void;
|
||||
};
|
||||
|
||||
export function RecordingComposer({
|
||||
i18n,
|
||||
onCancel,
|
||||
onSend,
|
||||
children,
|
||||
}: Props): JSX.Element {
|
||||
return (
|
||||
<div className="RecordingComposer">
|
||||
<div className="RecordingComposer__content">{children}</div>
|
||||
<Button
|
||||
className="RecordingComposer__button"
|
||||
onClick={onCancel}
|
||||
size={ButtonSize.Medium}
|
||||
variant={ButtonVariant.Secondary}
|
||||
>
|
||||
{i18n('icu:RecordingComposer__cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
className="RecordingComposer__button"
|
||||
onClick={onSend}
|
||||
size={ButtonSize.Medium}
|
||||
>
|
||||
{i18n('icu:RecordingComposer__send')}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -81,7 +81,8 @@ async function doComputePeaks(
|
|||
url: string,
|
||||
barCount: number
|
||||
): Promise<ComputePeaksResult> {
|
||||
const existing = waveformCache.get(url);
|
||||
const cacheKey = `${url}:${barCount}`;
|
||||
const existing = waveformCache.get(cacheKey);
|
||||
if (existing) {
|
||||
log.info('GlobalAudioContext: waveform cache hit', url);
|
||||
return Promise.resolve(existing);
|
||||
|
|
@ -101,7 +102,7 @@ async function doComputePeaks(
|
|||
`GlobalAudioContext: audio ${url} duration ${duration}s is too long`
|
||||
);
|
||||
const emptyResult = { peaks, duration };
|
||||
waveformCache.set(url, emptyResult);
|
||||
waveformCache.set(cacheKey, emptyResult);
|
||||
return emptyResult;
|
||||
}
|
||||
|
||||
|
|
@ -143,7 +144,7 @@ async function doComputePeaks(
|
|||
}
|
||||
|
||||
const result = { peaks, duration };
|
||||
waveformCache.set(url, result);
|
||||
waveformCache.set(cacheKey, result);
|
||||
return result;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,85 +0,0 @@
|
|||
// Copyright 2020 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { select } from '@storybook/addon-knobs';
|
||||
|
||||
import {
|
||||
ErrorDialogAudioRecorderType,
|
||||
RecordingState,
|
||||
} from '../../types/AudioRecorder';
|
||||
import type { PropsType } from './AudioCapture';
|
||||
import { AudioCapture } from './AudioCapture';
|
||||
import { setupI18n } from '../../util/setupI18n';
|
||||
import enMessages from '../../../_locales/en/messages.json';
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
export default {
|
||||
title: 'Components/Conversation/AudioCapture',
|
||||
};
|
||||
|
||||
const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
||||
cancelRecording: action('cancelRecording'),
|
||||
completeRecording: action('completeRecording'),
|
||||
conversationId: '123',
|
||||
draftAttachments: [],
|
||||
errorDialogAudioRecorderType: overrideProps.errorDialogAudioRecorderType,
|
||||
errorRecording: action('errorRecording'),
|
||||
i18n,
|
||||
recordingState: select(
|
||||
'recordingState',
|
||||
RecordingState,
|
||||
overrideProps.recordingState || RecordingState.Idle
|
||||
),
|
||||
onSendAudioRecording: action('onSendAudioRecording'),
|
||||
startRecording: action('startRecording'),
|
||||
});
|
||||
|
||||
export function Default(): JSX.Element {
|
||||
return <AudioCapture {...createProps()} />;
|
||||
}
|
||||
|
||||
export const _Initializing = (): JSX.Element => {
|
||||
return (
|
||||
<AudioCapture
|
||||
{...createProps({
|
||||
recordingState: RecordingState.Initializing,
|
||||
})}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const _Recording = (): JSX.Element => {
|
||||
return (
|
||||
<AudioCapture
|
||||
{...createProps({
|
||||
recordingState: RecordingState.Recording,
|
||||
})}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export function VoiceLimit(): JSX.Element {
|
||||
return (
|
||||
<AudioCapture
|
||||
{...createProps({
|
||||
errorDialogAudioRecorderType: ErrorDialogAudioRecorderType.Timeout,
|
||||
recordingState: RecordingState.Recording,
|
||||
})}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function SwitchedApps(): JSX.Element {
|
||||
return (
|
||||
<AudioCapture
|
||||
{...createProps({
|
||||
errorDialogAudioRecorderType: ErrorDialogAudioRecorderType.Blur,
|
||||
recordingState: RecordingState.Recording,
|
||||
})}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,100 +1,30 @@
|
|||
// Copyright 2016 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import * as moment from 'moment';
|
||||
import { noop } from 'lodash';
|
||||
import React, { useCallback, useState } from 'react';
|
||||
|
||||
import type {
|
||||
AttachmentDraftType,
|
||||
InMemoryAttachmentDraftType,
|
||||
} from '../../types/Attachment';
|
||||
import { ConfirmationDialog } from '../ConfirmationDialog';
|
||||
import type { AttachmentDraftType } from '../../types/Attachment';
|
||||
import type { LocalizerType } from '../../types/Util';
|
||||
import { ToastVoiceNoteLimit } from '../ToastVoiceNoteLimit';
|
||||
import { ToastVoiceNoteMustBeOnlyAttachment } from '../ToastVoiceNoteMustBeOnlyAttachment';
|
||||
import { useEscapeHandling } from '../../hooks/useEscapeHandling';
|
||||
import {
|
||||
useStartRecordingShortcut,
|
||||
useKeyboardShortcuts,
|
||||
} from '../../hooks/useKeyboardShortcuts';
|
||||
import {
|
||||
ErrorDialogAudioRecorderType,
|
||||
RecordingState,
|
||||
} from '../../types/AudioRecorder';
|
||||
|
||||
type OnSendAudioRecordingType = (rec: InMemoryAttachmentDraftType) => unknown;
|
||||
|
||||
export type PropsType = {
|
||||
cancelRecording: () => unknown;
|
||||
conversationId: string;
|
||||
completeRecording: (
|
||||
conversationId: string,
|
||||
onSendAudioRecording?: OnSendAudioRecordingType
|
||||
) => unknown;
|
||||
draftAttachments: ReadonlyArray<AttachmentDraftType>;
|
||||
errorDialogAudioRecorderType?: ErrorDialogAudioRecorderType;
|
||||
errorRecording: (e: ErrorDialogAudioRecorderType) => unknown;
|
||||
i18n: LocalizerType;
|
||||
recordingState: RecordingState;
|
||||
onSendAudioRecording: OnSendAudioRecordingType;
|
||||
startRecording: (id: string) => unknown;
|
||||
};
|
||||
|
||||
enum ToastType {
|
||||
VoiceNoteLimit,
|
||||
VoiceNoteMustBeOnlyAttachment,
|
||||
}
|
||||
|
||||
const START_DURATION_TEXT = '0:00';
|
||||
|
||||
export function AudioCapture({
|
||||
cancelRecording,
|
||||
completeRecording,
|
||||
conversationId,
|
||||
draftAttachments,
|
||||
errorDialogAudioRecorderType,
|
||||
errorRecording,
|
||||
i18n,
|
||||
recordingState,
|
||||
onSendAudioRecording,
|
||||
startRecording,
|
||||
}: PropsType): JSX.Element {
|
||||
const [durationText, setDurationText] = useState<string>(START_DURATION_TEXT);
|
||||
const [toastType, setToastType] = useState<ToastType | undefined>();
|
||||
|
||||
// Cancel recording if we switch away from this conversation, unmounting
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
cancelRecording();
|
||||
};
|
||||
}, [cancelRecording]);
|
||||
|
||||
// Stop recording and show confirmation if user switches away from this app
|
||||
useEffect(() => {
|
||||
if (recordingState !== RecordingState.Recording) {
|
||||
return;
|
||||
}
|
||||
|
||||
const handler = () => {
|
||||
errorRecording(ErrorDialogAudioRecorderType.Blur);
|
||||
};
|
||||
window.addEventListener('blur', handler);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('blur', handler);
|
||||
};
|
||||
}, [recordingState, completeRecording, errorRecording]);
|
||||
|
||||
const escapeRecording = useCallback(() => {
|
||||
if (recordingState !== RecordingState.Recording) {
|
||||
return;
|
||||
}
|
||||
|
||||
cancelRecording();
|
||||
}, [cancelRecording, recordingState]);
|
||||
|
||||
useEscapeHandling(escapeRecording);
|
||||
const [showOnlyAttachmentToast, setShowOnlyAttachmentToast] = useState(false);
|
||||
|
||||
const recordConversation = useCallback(
|
||||
() => startRecording(conversationId),
|
||||
|
|
@ -103,156 +33,40 @@ export function AudioCapture({
|
|||
const startRecordingShortcut = useStartRecordingShortcut(recordConversation);
|
||||
useKeyboardShortcuts(startRecordingShortcut);
|
||||
|
||||
const closeToast = useCallback(() => {
|
||||
setToastType(undefined);
|
||||
const handleCloseToast = useCallback(() => {
|
||||
setShowOnlyAttachmentToast(false);
|
||||
}, []);
|
||||
|
||||
// Update timestamp regularly, then timeout if recording goes over five minutes
|
||||
useEffect(() => {
|
||||
if (recordingState !== RecordingState.Recording) {
|
||||
return;
|
||||
const handleClick = useCallback(() => {
|
||||
if (draftAttachments.length) {
|
||||
setShowOnlyAttachmentToast(true);
|
||||
} else {
|
||||
startRecording(conversationId);
|
||||
}
|
||||
|
||||
setDurationText(START_DURATION_TEXT);
|
||||
setToastType(ToastType.VoiceNoteLimit);
|
||||
|
||||
const startTime = Date.now();
|
||||
const interval = setInterval(() => {
|
||||
const duration = moment.duration(Date.now() - startTime, 'ms');
|
||||
const minutes = `${Math.trunc(duration.asMinutes())}`;
|
||||
let seconds = `${duration.seconds()}`;
|
||||
if (seconds.length < 2) {
|
||||
seconds = `0${seconds}`;
|
||||
}
|
||||
setDurationText(`${minutes}:${seconds}`);
|
||||
|
||||
if (duration >= moment.duration(1, 'hours')) {
|
||||
errorRecording(ErrorDialogAudioRecorderType.Timeout);
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
return () => {
|
||||
clearInterval(interval);
|
||||
closeToast();
|
||||
};
|
||||
}, [
|
||||
closeToast,
|
||||
completeRecording,
|
||||
errorRecording,
|
||||
recordingState,
|
||||
setDurationText,
|
||||
conversationId,
|
||||
draftAttachments,
|
||||
setShowOnlyAttachmentToast,
|
||||
startRecording,
|
||||
]);
|
||||
|
||||
const clickCancel = useCallback(() => {
|
||||
cancelRecording();
|
||||
}, [cancelRecording]);
|
||||
|
||||
const clickSend = useCallback(() => {
|
||||
completeRecording(conversationId, onSendAudioRecording);
|
||||
}, [conversationId, completeRecording, onSendAudioRecording]);
|
||||
|
||||
let toastElement: JSX.Element | undefined;
|
||||
if (toastType === ToastType.VoiceNoteLimit) {
|
||||
toastElement = <ToastVoiceNoteLimit i18n={i18n} onClose={closeToast} />;
|
||||
} else if (toastType === ToastType.VoiceNoteMustBeOnlyAttachment) {
|
||||
toastElement = (
|
||||
<ToastVoiceNoteMustBeOnlyAttachment i18n={i18n} onClose={closeToast} />
|
||||
);
|
||||
}
|
||||
|
||||
let confirmationDialog: JSX.Element | undefined;
|
||||
if (
|
||||
errorDialogAudioRecorderType === ErrorDialogAudioRecorderType.Blur ||
|
||||
errorDialogAudioRecorderType === ErrorDialogAudioRecorderType.Timeout
|
||||
) {
|
||||
const confirmationDialogText =
|
||||
errorDialogAudioRecorderType === ErrorDialogAudioRecorderType.Blur
|
||||
? i18n('voiceRecordingInterruptedBlur')
|
||||
: i18n('voiceRecordingInterruptedMax');
|
||||
|
||||
confirmationDialog = (
|
||||
<ConfirmationDialog
|
||||
dialogName="AudioCapture.sendAnyway"
|
||||
i18n={i18n}
|
||||
onCancel={clickCancel}
|
||||
onClose={noop}
|
||||
cancelText={i18n('discard')}
|
||||
actions={[
|
||||
{
|
||||
text: i18n('sendAnyway'),
|
||||
style: 'affirmative',
|
||||
action: clickSend,
|
||||
},
|
||||
]}
|
||||
>
|
||||
{confirmationDialogText}
|
||||
</ConfirmationDialog>
|
||||
);
|
||||
} else if (
|
||||
errorDialogAudioRecorderType === ErrorDialogAudioRecorderType.ErrorRecording
|
||||
) {
|
||||
confirmationDialog = (
|
||||
<ConfirmationDialog
|
||||
dialogName="AudioCapture.error"
|
||||
i18n={i18n}
|
||||
onCancel={clickCancel}
|
||||
onClose={noop}
|
||||
cancelText={i18n('ok')}
|
||||
actions={[]}
|
||||
>
|
||||
{i18n('voiceNoteError')}
|
||||
</ConfirmationDialog>
|
||||
);
|
||||
}
|
||||
|
||||
if (recordingState === RecordingState.Recording && !confirmationDialog) {
|
||||
return (
|
||||
<>
|
||||
<div className="AudioCapture">
|
||||
<button
|
||||
className="AudioCapture__recorder-button AudioCapture__recorder-button--complete"
|
||||
onClick={clickSend}
|
||||
tabIndex={0}
|
||||
title={i18n('voiceRecording--complete')}
|
||||
type="button"
|
||||
>
|
||||
<span className="icon" />
|
||||
</button>
|
||||
<span className="AudioCapture__time">{durationText}</span>
|
||||
<button
|
||||
className="AudioCapture__recorder-button AudioCapture__recorder-button--cancel"
|
||||
onClick={clickCancel}
|
||||
tabIndex={0}
|
||||
title={i18n('voiceRecording--cancel')}
|
||||
type="button"
|
||||
>
|
||||
<span className="icon" />
|
||||
</button>
|
||||
</div>
|
||||
{toastElement}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="AudioCapture">
|
||||
<button
|
||||
aria-label={i18n('voiceRecording--start')}
|
||||
className="AudioCapture__microphone"
|
||||
onClick={() => {
|
||||
if (draftAttachments.length) {
|
||||
setToastType(ToastType.VoiceNoteMustBeOnlyAttachment);
|
||||
} else {
|
||||
startRecording(conversationId);
|
||||
}
|
||||
}}
|
||||
onClick={handleClick}
|
||||
title={i18n('voiceRecording--start')}
|
||||
type="button"
|
||||
/>
|
||||
{confirmationDialog}
|
||||
</div>
|
||||
{toastElement}
|
||||
{showOnlyAttachmentToast && (
|
||||
<ToastVoiceNoteMustBeOnlyAttachment
|
||||
i18n={i18n}
|
||||
onClose={handleCloseToast}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// Copyright 2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React, { useCallback, useRef, useEffect, useState } from 'react';
|
||||
import React, { useCallback } from 'react';
|
||||
import type { RefObject } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { noop } from 'lodash';
|
||||
|
|
@ -18,6 +18,9 @@ import { MessageMetadata } from './MessageMetadata';
|
|||
import * as log from '../../logging/log';
|
||||
import type { ActiveAudioPlayerStateType } from '../../state/ducks/audioPlayer';
|
||||
import { PlaybackRateButton } from '../PlaybackRateButton';
|
||||
import { PlaybackButton } from '../PlaybackButton';
|
||||
import { WaveformScrubber } from './WaveformScrubber';
|
||||
import { useComputePeaks } from '../../hooks/useComputePeaks';
|
||||
import { durationToPlaybackText } from '../../util/durationToPlaybackText';
|
||||
|
||||
export type OwnProps = Readonly<{
|
||||
|
|
@ -58,15 +61,6 @@ export type DispatchProps = Readonly<{
|
|||
|
||||
export type Props = OwnProps & DispatchProps;
|
||||
|
||||
type ButtonProps = {
|
||||
mod?: string;
|
||||
label: string;
|
||||
visible?: boolean;
|
||||
onClick: () => void;
|
||||
onMouseDown?: () => void;
|
||||
onMouseUp?: () => void;
|
||||
};
|
||||
|
||||
enum State {
|
||||
NotDownloaded = 'NotDownloaded',
|
||||
Pending = 'Pending',
|
||||
|
|
@ -82,12 +76,6 @@ const BAR_NOT_DOWNLOADED_HEIGHT = 2;
|
|||
const BAR_MIN_HEIGHT = 4;
|
||||
const BAR_MAX_HEIGHT = 20;
|
||||
|
||||
const REWIND_BAR_COUNT = 2;
|
||||
|
||||
// Increments for keyboard audio seek (in seconds)
|
||||
const SMALL_INCREMENT = 1;
|
||||
const BIG_INCREMENT = 5;
|
||||
|
||||
const SPRING_CONFIG = {
|
||||
mass: 0.5,
|
||||
tension: 350,
|
||||
|
|
@ -97,62 +85,6 @@ const SPRING_CONFIG = {
|
|||
|
||||
const DOT_DIV_WIDTH = 14;
|
||||
|
||||
/** Handles animations, key events, and stopping event propagation */
|
||||
const PlaybackButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
function ButtonInner(props, ref) {
|
||||
const { mod, label, onClick, visible = true } = props;
|
||||
const [animProps] = useSpring(
|
||||
{
|
||||
config: SPRING_CONFIG,
|
||||
to: { scale: visible ? 1 : 0 },
|
||||
},
|
||||
[visible]
|
||||
);
|
||||
|
||||
// Clicking button toggle playback
|
||||
const onButtonClick = useCallback(
|
||||
(event: React.MouseEvent) => {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
onClick();
|
||||
},
|
||||
[onClick]
|
||||
);
|
||||
|
||||
// Keyboard playback toggle
|
||||
const onButtonKeyDown = useCallback(
|
||||
(event: React.KeyboardEvent) => {
|
||||
if (event.key !== 'Enter' && event.key !== 'Space') {
|
||||
return;
|
||||
}
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
onClick();
|
||||
},
|
||||
[onClick]
|
||||
);
|
||||
|
||||
return (
|
||||
<animated.div style={animProps}>
|
||||
<button
|
||||
type="button"
|
||||
ref={ref}
|
||||
className={classNames(
|
||||
`${CSS_BASE}__play-button`,
|
||||
mod ? `${CSS_BASE}__play-button--${mod}` : undefined
|
||||
)}
|
||||
onClick={onButtonClick}
|
||||
onKeyDown={onButtonKeyDown}
|
||||
tabIndex={0}
|
||||
aria-label={label}
|
||||
/>
|
||||
</animated.div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
function PlayedDot({
|
||||
played,
|
||||
onHide,
|
||||
|
|
@ -222,7 +154,6 @@ export function MessageAudio(props: Props): JSX.Element {
|
|||
|
||||
kickOffAttachmentDownload,
|
||||
onCorrupted,
|
||||
computePeaks,
|
||||
setPlaybackRate,
|
||||
onPlayMessage,
|
||||
pushPanelForConversation,
|
||||
|
|
@ -230,21 +161,18 @@ export function MessageAudio(props: Props): JSX.Element {
|
|||
setIsPlaying,
|
||||
} = props;
|
||||
|
||||
const waveformRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const isPlaying = active?.playing ?? false;
|
||||
|
||||
const [isPlayedDotVisible, setIsPlayedDotVisible] = React.useState(!played);
|
||||
|
||||
// if it's playing, use the duration passed as props as it might
|
||||
// change during loading/playback (?)
|
||||
// NOTE: Avoid division by zero
|
||||
const [duration, setDuration] = useState(active?.duration ?? 1e-23);
|
||||
const audioUrl = isDownloaded(attachment) ? attachment.url : undefined;
|
||||
|
||||
const [hasPeaks, setHasPeaks] = useState(false);
|
||||
const [peaks, setPeaks] = useState<ReadonlyArray<number>>(
|
||||
new Array(BAR_COUNT).fill(0)
|
||||
);
|
||||
const { duration, hasPeaks, peaks } = useComputePeaks({
|
||||
audioUrl,
|
||||
activeDuration: active?.duration,
|
||||
barCount: BAR_COUNT,
|
||||
onCorrupted,
|
||||
});
|
||||
|
||||
let state: State;
|
||||
|
||||
|
|
@ -258,60 +186,7 @@ export function MessageAudio(props: Props): JSX.Element {
|
|||
state = State.Normal;
|
||||
}
|
||||
|
||||
// This effect loads audio file and computes its RMS peak for displaying the
|
||||
// waveform.
|
||||
useEffect(() => {
|
||||
if (state !== State.Computing) {
|
||||
return noop;
|
||||
}
|
||||
|
||||
log.info('MessageAudio: loading audio and computing waveform');
|
||||
|
||||
let canceled = false;
|
||||
|
||||
void (async () => {
|
||||
try {
|
||||
if (!attachment.url) {
|
||||
throw new Error(
|
||||
'Expected attachment url in the MessageAudio with ' +
|
||||
`state: ${state}`
|
||||
);
|
||||
}
|
||||
|
||||
const { peaks: newPeaks, duration: newDuration } = await computePeaks(
|
||||
attachment.url,
|
||||
BAR_COUNT
|
||||
);
|
||||
if (canceled) {
|
||||
return;
|
||||
}
|
||||
setPeaks(newPeaks);
|
||||
setHasPeaks(true);
|
||||
setDuration(Math.max(newDuration, 1e-23));
|
||||
} catch (err) {
|
||||
log.error(
|
||||
'MessageAudio: computePeaks error, marking as corrupted',
|
||||
err
|
||||
);
|
||||
|
||||
onCorrupted();
|
||||
}
|
||||
})();
|
||||
|
||||
return () => {
|
||||
canceled = true;
|
||||
};
|
||||
}, [
|
||||
attachment,
|
||||
computePeaks,
|
||||
setDuration,
|
||||
setPeaks,
|
||||
setHasPeaks,
|
||||
onCorrupted,
|
||||
state,
|
||||
]);
|
||||
|
||||
const toggleIsPlaying = () => {
|
||||
const toggleIsPlaying = useCallback(() => {
|
||||
if (!isPlaying) {
|
||||
if (!attachment.url) {
|
||||
throw new Error(
|
||||
|
|
@ -328,144 +203,96 @@ export function MessageAudio(props: Props): JSX.Element {
|
|||
} else {
|
||||
setIsPlaying(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Clicking waveform moves playback head position and starts playback.
|
||||
const onWaveformClick = (event: React.MouseEvent) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
if (state !== State.Normal) {
|
||||
return;
|
||||
}
|
||||
if (!waveformRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
const boundingRect = waveformRef.current.getBoundingClientRect();
|
||||
let progress = (event.pageX - boundingRect.left) / boundingRect.width;
|
||||
|
||||
if (progress <= REWIND_BAR_COUNT / BAR_COUNT) {
|
||||
progress = 0;
|
||||
}
|
||||
|
||||
if (active) {
|
||||
setPosition(progress);
|
||||
if (!active.playing) {
|
||||
setIsPlaying(true);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (attachment.url) {
|
||||
onPlayMessage(id, progress);
|
||||
} else {
|
||||
log.warn('Waveform clicked on attachment with no url');
|
||||
}
|
||||
};
|
||||
|
||||
// Keyboard navigation for waveform. Pressing keys moves playback head
|
||||
// forward/backwards.
|
||||
const onWaveformKeyDown = (event: React.KeyboardEvent) => {
|
||||
let increment: number;
|
||||
if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
|
||||
increment = +SMALL_INCREMENT;
|
||||
} else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
|
||||
increment = -SMALL_INCREMENT;
|
||||
} else if (event.key === 'PageUp') {
|
||||
increment = +BIG_INCREMENT;
|
||||
} else if (event.key === 'PageDown') {
|
||||
increment = -BIG_INCREMENT;
|
||||
} else {
|
||||
// We don't handle other keys
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
// There is no audio to rewind
|
||||
if (!active) {
|
||||
return;
|
||||
}
|
||||
|
||||
const currentPosition = active.currentTime / duration;
|
||||
const positionIncrement = increment / duration;
|
||||
|
||||
setPosition(currentPosition + positionIncrement);
|
||||
|
||||
if (!isPlaying) {
|
||||
toggleIsPlaying();
|
||||
}
|
||||
};
|
||||
}, [
|
||||
isPlaying,
|
||||
attachment.url,
|
||||
active,
|
||||
state,
|
||||
setIsPlaying,
|
||||
id,
|
||||
onPlayMessage,
|
||||
]);
|
||||
|
||||
const currentTimeOrZero = active?.currentTime ?? 0;
|
||||
|
||||
const peakPosition = peaks.length * (currentTimeOrZero / duration);
|
||||
const updatePosition = useCallback(
|
||||
(newPosition: number) => {
|
||||
if (active) {
|
||||
setPosition(newPosition);
|
||||
if (!active.playing) {
|
||||
setIsPlaying(true);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (attachment.url) {
|
||||
onPlayMessage(id, newPosition);
|
||||
} else {
|
||||
log.warn('Waveform clicked on attachment with no url');
|
||||
}
|
||||
},
|
||||
[active, attachment.url, id, onPlayMessage, setIsPlaying, setPosition]
|
||||
);
|
||||
|
||||
const handleWaveformClick = useCallback(
|
||||
(positionAsRatio: number) => {
|
||||
if (state !== State.Normal) {
|
||||
return;
|
||||
}
|
||||
|
||||
updatePosition(positionAsRatio);
|
||||
},
|
||||
[state, updatePosition]
|
||||
);
|
||||
|
||||
const handleWaveformScrub = useCallback(
|
||||
(amountInSeconds: number) => {
|
||||
const currentPosition = currentTimeOrZero / duration;
|
||||
const positionIncrement = amountInSeconds / duration;
|
||||
|
||||
updatePosition(
|
||||
Math.min(Math.max(0, currentPosition + positionIncrement), duration)
|
||||
);
|
||||
},
|
||||
[currentTimeOrZero, duration, updatePosition]
|
||||
);
|
||||
|
||||
const waveform = (
|
||||
<div
|
||||
ref={waveformRef}
|
||||
className={`${CSS_BASE}__waveform`}
|
||||
onClick={onWaveformClick}
|
||||
onKeyDown={onWaveformKeyDown}
|
||||
tabIndex={0}
|
||||
role="slider"
|
||||
aria-label={i18n('MessageAudio--slider')}
|
||||
aria-orientation="horizontal"
|
||||
aria-valuenow={currentTimeOrZero}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={duration}
|
||||
aria-valuetext={durationToPlaybackText(currentTimeOrZero)}
|
||||
>
|
||||
{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 (
|
||||
<div
|
||||
className={classNames([
|
||||
`${CSS_BASE}__waveform__bar`,
|
||||
highlight ? `${CSS_BASE}__waveform__bar--active` : null,
|
||||
])}
|
||||
key={key}
|
||||
style={{ height }}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<WaveformScrubber
|
||||
i18n={i18n}
|
||||
peaks={peaks}
|
||||
duration={duration}
|
||||
currentTime={currentTimeOrZero}
|
||||
barMinHeight={
|
||||
state !== State.Normal ? BAR_NOT_DOWNLOADED_HEIGHT : BAR_MIN_HEIGHT
|
||||
}
|
||||
barMaxHeight={BAR_MAX_HEIGHT}
|
||||
onClick={handleWaveformClick}
|
||||
onScrub={handleWaveformScrub}
|
||||
/>
|
||||
);
|
||||
|
||||
let button: React.ReactElement;
|
||||
if (state === State.Pending || state === State.Computing) {
|
||||
// Not really a button, but who cares?
|
||||
button = (
|
||||
<div
|
||||
className={classNames(
|
||||
`${CSS_BASE}__spinner`,
|
||||
`${CSS_BASE}__spinner--pending`
|
||||
)}
|
||||
title={i18n('MessageAudio--pending')}
|
||||
<PlaybackButton
|
||||
variant="message"
|
||||
mod="pending"
|
||||
onClick={noop}
|
||||
label={i18n('MessageAudio--pending')}
|
||||
context={direction}
|
||||
/>
|
||||
);
|
||||
} else if (state === State.NotDownloaded) {
|
||||
button = (
|
||||
<PlaybackButton
|
||||
ref={buttonRef}
|
||||
variant="message"
|
||||
mod="download"
|
||||
label="MessageAudio--download"
|
||||
label={i18n('MessageAudio--download')}
|
||||
onClick={kickOffAttachmentDownload}
|
||||
context={direction}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
|
|
@ -473,11 +300,13 @@ export function MessageAudio(props: Props): JSX.Element {
|
|||
button = (
|
||||
<PlaybackButton
|
||||
ref={buttonRef}
|
||||
variant="message"
|
||||
mod={isPlaying ? 'pause' : 'play'}
|
||||
label={
|
||||
isPlaying ? i18n('MessageAudio--pause') : i18n('MessageAudio--play')
|
||||
}
|
||||
onClick={toggleIsPlaying}
|
||||
context={direction}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
import { isBoolean } from 'lodash';
|
||||
import { isBoolean, noop } from 'lodash';
|
||||
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { boolean, number, select, text } from '@storybook/addon-knobs';
|
||||
|
|
@ -134,12 +134,14 @@ function MessageAudioContainer({
|
|||
const [isActive, setIsActive] = React.useState<boolean>(false);
|
||||
const [currentTime, setCurrentTime] = React.useState<number>(0);
|
||||
const [playbackRate, setPlaybackRate] = React.useState<number>(1);
|
||||
const [playing, setPlaying] = React.useState<boolean>(false);
|
||||
const [isPlaying, setIsPlaying] = React.useState<boolean>(false);
|
||||
const [_played, setPlayed] = React.useState<boolean>(played);
|
||||
|
||||
const audio = React.useMemo(() => {
|
||||
const audioPlayer = React.useMemo(() => {
|
||||
const a = new Audio();
|
||||
|
||||
let onLoadedData: () => void = noop;
|
||||
|
||||
a.addEventListener('timeupdate', () => {
|
||||
setCurrentTime(a.currentTime);
|
||||
});
|
||||
|
|
@ -148,54 +150,76 @@ function MessageAudioContainer({
|
|||
setIsActive(false);
|
||||
});
|
||||
|
||||
a.addEventListener('loadeddata', () => {
|
||||
a.currentTime = currentTime;
|
||||
});
|
||||
a.addEventListener('loadeddata', () => onLoadedData());
|
||||
|
||||
return a;
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
function play(positionAsRatio?: number) {
|
||||
if (positionAsRatio !== undefined) {
|
||||
a.currentTime = positionAsRatio * a.duration;
|
||||
}
|
||||
void a.play();
|
||||
}
|
||||
|
||||
return {
|
||||
loadAndPlay(url: string, positionAsRatio: number) {
|
||||
onLoadedData = () => {
|
||||
play(positionAsRatio);
|
||||
};
|
||||
a.src = url;
|
||||
},
|
||||
play,
|
||||
pause() {
|
||||
a.pause();
|
||||
},
|
||||
set playbackRate(rate: number) {
|
||||
a.playbackRate = rate;
|
||||
},
|
||||
set currentTime(value: number) {
|
||||
a.currentTime = value;
|
||||
},
|
||||
get duration() {
|
||||
return a.duration;
|
||||
},
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handlePlayMessage = (id: string, position: number) => {
|
||||
const handlePlayMessage = (id: string, positionAsRatio: number) => {
|
||||
if (!active) {
|
||||
audio.src = messageIdToAudioUrl[id as keyof typeof messageIdToAudioUrl];
|
||||
audioPlayer.loadAndPlay(
|
||||
messageIdToAudioUrl[id as keyof typeof messageIdToAudioUrl],
|
||||
positionAsRatio
|
||||
);
|
||||
setIsActive(true);
|
||||
}
|
||||
if (!playing) {
|
||||
void audio.play();
|
||||
setPlaying(true);
|
||||
setIsPlaying(true);
|
||||
setPlayed(true);
|
||||
}
|
||||
|
||||
if (!Number.isNaN(audio.duration)) {
|
||||
audio.currentTime = audio.duration * position;
|
||||
}
|
||||
if (!Number.isNaN(audio.currentTime)) {
|
||||
setCurrentTime(audio.currentTime);
|
||||
}
|
||||
};
|
||||
|
||||
const setPlaybackRateAction = (rate: number) => {
|
||||
audio.playbackRate = rate;
|
||||
audioPlayer.playbackRate = rate;
|
||||
setPlaybackRate(rate);
|
||||
};
|
||||
|
||||
const setIsPlayingAction = (value: boolean) => {
|
||||
if (value) {
|
||||
void audio.play();
|
||||
audioPlayer.play();
|
||||
} else {
|
||||
audio.pause();
|
||||
audioPlayer.pause();
|
||||
}
|
||||
setPlaying(value);
|
||||
setIsPlaying(value);
|
||||
};
|
||||
|
||||
const setPosition = (value: number) => {
|
||||
audio.currentTime = value * audio.duration;
|
||||
setCurrentTime(audio.currentTime);
|
||||
audioPlayer.currentTime = value * audioPlayer.duration;
|
||||
setCurrentTime(audioPlayer.currentTime);
|
||||
};
|
||||
|
||||
const active = isActive
|
||||
? { playing, playbackRate, currentTime, duration: audio.duration }
|
||||
? {
|
||||
playing: isPlaying,
|
||||
playbackRate,
|
||||
currentTime,
|
||||
duration: audioPlayer.duration,
|
||||
}
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
|
|
|
|||
60
ts/components/conversation/Waveform.tsx
Normal file
60
ts/components/conversation/Waveform.tsx
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
import { assertDev } from '../../util/assert';
|
||||
|
||||
type Props = {
|
||||
peaks: ReadonlyArray<number>;
|
||||
barMinHeight: number;
|
||||
barMaxHeight: number;
|
||||
currentTime: number | undefined;
|
||||
duration: number | undefined;
|
||||
};
|
||||
|
||||
export function Waveform({
|
||||
peaks,
|
||||
barMinHeight,
|
||||
barMaxHeight,
|
||||
currentTime,
|
||||
duration,
|
||||
}: Props): JSX.Element {
|
||||
const currentTimeOrZero = currentTime ?? 0;
|
||||
const peakPosition = peaks.length * (currentTimeOrZero / (duration ?? 1e-23));
|
||||
|
||||
return (
|
||||
<div className={classNames(['Waveform'])}>
|
||||
{peaks.map((peak, i) => {
|
||||
assertDev(
|
||||
peak >= 0 && peak <= 1 && !Number.isNaN(peak),
|
||||
`Peak outside of range: ${peak}`
|
||||
);
|
||||
|
||||
let height = Math.max(barMinHeight, barMaxHeight * peak);
|
||||
|
||||
const highlight = i < peakPosition;
|
||||
|
||||
// Use maximum height for current audio position
|
||||
if (highlight && i + 1 >= peakPosition) {
|
||||
height = barMaxHeight;
|
||||
}
|
||||
|
||||
assertDev(!Number.isNaN(height), 'Got NaN for peak height');
|
||||
|
||||
const key = i;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames([
|
||||
'Waveform__bar',
|
||||
highlight ? 'Waveform__bar--active' : null,
|
||||
])}
|
||||
key={key}
|
||||
style={{ height }}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
123
ts/components/conversation/WaveformScrubber.tsx
Normal file
123
ts/components/conversation/WaveformScrubber.tsx
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React, { useCallback, useRef } from 'react';
|
||||
import { useRefMerger } from '../../hooks/useRefMerger';
|
||||
import type { LocalizerType } from '../../types/Util';
|
||||
import { durationToPlaybackText } from '../../util/durationToPlaybackText';
|
||||
import { Waveform } from './Waveform';
|
||||
|
||||
type Props = Readonly<{
|
||||
i18n: LocalizerType;
|
||||
peaks: ReadonlyArray<number>;
|
||||
currentTime: number;
|
||||
duration: number | undefined;
|
||||
barMinHeight: number;
|
||||
barMaxHeight: number;
|
||||
onClick: (positionAsRatio: number) => void;
|
||||
onScrub: (positionAsRatio: number) => void;
|
||||
}>;
|
||||
|
||||
const BAR_COUNT = 47;
|
||||
|
||||
const REWIND_BAR_COUNT = 2;
|
||||
|
||||
// Increments for keyboard audio seek (in seconds)\
|
||||
const SMALL_INCREMENT = 1;
|
||||
const BIG_INCREMENT = 5;
|
||||
|
||||
export const WaveformScrubber = React.forwardRef(function WaveformScrubber(
|
||||
{
|
||||
i18n,
|
||||
peaks,
|
||||
barMinHeight,
|
||||
barMaxHeight,
|
||||
currentTime,
|
||||
duration,
|
||||
onClick,
|
||||
onScrub,
|
||||
}: Props,
|
||||
ref
|
||||
): JSX.Element {
|
||||
const refMerger = useRefMerger();
|
||||
|
||||
const waveformRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
// Clicking waveform moves playback head position and starts playback.
|
||||
const handleClick = useCallback(
|
||||
(event: React.MouseEvent) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
if (!waveformRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
const boundingRect = waveformRef.current.getBoundingClientRect();
|
||||
let progress = (event.pageX - boundingRect.left) / boundingRect.width;
|
||||
|
||||
if (progress <= REWIND_BAR_COUNT / BAR_COUNT) {
|
||||
progress = 0;
|
||||
}
|
||||
|
||||
onClick(progress);
|
||||
},
|
||||
[waveformRef, onClick]
|
||||
);
|
||||
|
||||
// Keyboard navigation for waveform. Pressing keys moves playback head
|
||||
// forward/backwards.
|
||||
const handleKeyDown = (event: React.KeyboardEvent) => {
|
||||
if (!duration) {
|
||||
return;
|
||||
}
|
||||
|
||||
let increment: number;
|
||||
if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
|
||||
increment = +SMALL_INCREMENT;
|
||||
} else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
|
||||
increment = -SMALL_INCREMENT;
|
||||
} else if (event.key === 'PageUp') {
|
||||
increment = +BIG_INCREMENT;
|
||||
} else if (event.key === 'PageDown') {
|
||||
increment = -BIG_INCREMENT;
|
||||
} else {
|
||||
// We don't handle other keys
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
const currentPosition = currentTime / duration;
|
||||
const positionIncrement = increment / duration;
|
||||
const newPosition = currentPosition + positionIncrement;
|
||||
|
||||
onScrub(newPosition);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={refMerger(waveformRef, ref)}
|
||||
className="WaveformScrubber"
|
||||
onClick={handleClick}
|
||||
onKeyDown={handleKeyDown}
|
||||
tabIndex={0}
|
||||
role="slider"
|
||||
aria-label={i18n('MessageAudio--slider')}
|
||||
aria-orientation="horizontal"
|
||||
aria-valuenow={currentTime}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={duration}
|
||||
aria-valuetext={durationToPlaybackText(currentTime)}
|
||||
>
|
||||
<Waveform
|
||||
peaks={peaks}
|
||||
barMinHeight={barMinHeight}
|
||||
barMaxHeight={barMaxHeight}
|
||||
currentTime={currentTime}
|
||||
duration={duration}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue