Refactor smart components
Co-authored-by: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>
This commit is contained in:
parent
05c09ef769
commit
27b55e472d
109 changed files with 3583 additions and 2629 deletions
|
@ -1,7 +1,7 @@
|
|||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React, { useCallback } from 'react';
|
||||
import React, { memo, useCallback } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { CompositionRecordingDraft } from '../../components/CompositionRecordingDraft';
|
||||
import type { AttachmentDraftType } from '../../types/Attachment';
|
||||
|
@ -21,136 +21,138 @@ export type SmartCompositionRecordingDraftProps = {
|
|||
voiceNoteAttachment: AttachmentDraftType;
|
||||
};
|
||||
|
||||
export function SmartCompositionRecordingDraft({
|
||||
voiceNoteAttachment,
|
||||
}: SmartCompositionRecordingDraftProps): JSX.Element {
|
||||
const i18n = useSelector(getIntl);
|
||||
const active = useSelector(selectAudioPlayerActive);
|
||||
const selectedConversationId = useSelector(getSelectedConversationId);
|
||||
const getConversationById = useSelector(getConversationByIdSelector);
|
||||
const {
|
||||
loadVoiceNoteDraftAudio,
|
||||
unloadMessageAudio,
|
||||
setIsPlaying,
|
||||
setPosition,
|
||||
} = useAudioPlayerActions();
|
||||
const { sendMultiMediaMessage, removeAttachment } = useComposerActions();
|
||||
export const SmartCompositionRecordingDraft = memo(
|
||||
function SmartCompositionRecordingDraft({
|
||||
voiceNoteAttachment,
|
||||
}: SmartCompositionRecordingDraftProps) {
|
||||
const i18n = useSelector(getIntl);
|
||||
const active = useSelector(selectAudioPlayerActive);
|
||||
const selectedConversationId = useSelector(getSelectedConversationId);
|
||||
const getConversationById = useSelector(getConversationByIdSelector);
|
||||
const {
|
||||
loadVoiceNoteDraftAudio,
|
||||
unloadMessageAudio,
|
||||
setIsPlaying,
|
||||
setPosition,
|
||||
} = useAudioPlayerActions();
|
||||
const { sendMultiMediaMessage, removeAttachment } = useComposerActions();
|
||||
|
||||
if (!selectedConversationId) {
|
||||
throw new Error('No selected conversation');
|
||||
}
|
||||
if (!selectedConversationId) {
|
||||
throw new Error('No selected conversation');
|
||||
}
|
||||
|
||||
const playbackRate =
|
||||
getConversationById(selectedConversationId)?.voiceNotePlaybackRate ?? 1;
|
||||
const playbackRate =
|
||||
getConversationById(selectedConversationId)?.voiceNotePlaybackRate ?? 1;
|
||||
|
||||
const audioUrl = !voiceNoteAttachment.pending
|
||||
? voiceNoteAttachment.url
|
||||
: undefined;
|
||||
|
||||
const content = active?.content;
|
||||
|
||||
const draftActive =
|
||||
content && AudioPlayerContent.isDraft(content) && content.url === audioUrl
|
||||
? active
|
||||
const audioUrl = !voiceNoteAttachment.pending
|
||||
? voiceNoteAttachment.url
|
||||
: undefined;
|
||||
|
||||
const handlePlay = useCallback(
|
||||
(positionAsRatio?: number) => {
|
||||
if (!draftActive && audioUrl) {
|
||||
loadVoiceNoteDraftAudio({
|
||||
conversationId: selectedConversationId,
|
||||
url: audioUrl,
|
||||
startPosition: positionAsRatio ?? 0,
|
||||
playbackRate,
|
||||
const content = active?.content;
|
||||
|
||||
const draftActive =
|
||||
content && AudioPlayerContent.isDraft(content) && content.url === audioUrl
|
||||
? active
|
||||
: undefined;
|
||||
|
||||
const handlePlay = useCallback(
|
||||
(positionAsRatio?: number) => {
|
||||
if (!draftActive && audioUrl) {
|
||||
loadVoiceNoteDraftAudio({
|
||||
conversationId: selectedConversationId,
|
||||
url: audioUrl,
|
||||
startPosition: positionAsRatio ?? 0,
|
||||
playbackRate,
|
||||
});
|
||||
}
|
||||
if (draftActive) {
|
||||
if (positionAsRatio !== undefined) {
|
||||
setPosition(positionAsRatio);
|
||||
}
|
||||
if (!draftActive.playing) {
|
||||
setIsPlaying(true);
|
||||
}
|
||||
}
|
||||
},
|
||||
[
|
||||
draftActive,
|
||||
audioUrl,
|
||||
loadVoiceNoteDraftAudio,
|
||||
selectedConversationId,
|
||||
playbackRate,
|
||||
setPosition,
|
||||
setIsPlaying,
|
||||
]
|
||||
);
|
||||
|
||||
const handlePause = useCallback(() => {
|
||||
setIsPlaying(false);
|
||||
}, [setIsPlaying]);
|
||||
|
||||
const handleSend = useCallback(() => {
|
||||
if (selectedConversationId) {
|
||||
sendMultiMediaMessage(selectedConversationId, {
|
||||
draftAttachments: [voiceNoteAttachment],
|
||||
});
|
||||
}
|
||||
if (draftActive) {
|
||||
if (positionAsRatio !== undefined) {
|
||||
}, [selectedConversationId, sendMultiMediaMessage, voiceNoteAttachment]);
|
||||
|
||||
const handleCancel = useCallback(() => {
|
||||
unloadMessageAudio();
|
||||
if (selectedConversationId && voiceNoteAttachment.path) {
|
||||
removeAttachment(selectedConversationId, voiceNoteAttachment.path);
|
||||
}
|
||||
}, [
|
||||
removeAttachment,
|
||||
selectedConversationId,
|
||||
unloadMessageAudio,
|
||||
voiceNoteAttachment.path,
|
||||
]);
|
||||
|
||||
const handleScrub = useCallback(
|
||||
(positionAsRatio: number) => {
|
||||
// if scrubbing when audio not loaded
|
||||
if (!draftActive && audioUrl) {
|
||||
loadVoiceNoteDraftAudio({
|
||||
conversationId: selectedConversationId,
|
||||
url: audioUrl,
|
||||
startPosition: positionAsRatio,
|
||||
playbackRate,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// if scrubbing when audio is loaded
|
||||
if (draftActive) {
|
||||
setPosition(positionAsRatio);
|
||||
|
||||
if (draftActive?.playing) {
|
||||
setIsPlaying(true);
|
||||
}
|
||||
}
|
||||
if (!draftActive.playing) {
|
||||
setIsPlaying(true);
|
||||
}
|
||||
}
|
||||
},
|
||||
[
|
||||
draftActive,
|
||||
audioUrl,
|
||||
loadVoiceNoteDraftAudio,
|
||||
selectedConversationId,
|
||||
playbackRate,
|
||||
setPosition,
|
||||
setIsPlaying,
|
||||
]
|
||||
);
|
||||
},
|
||||
[
|
||||
audioUrl,
|
||||
draftActive,
|
||||
loadVoiceNoteDraftAudio,
|
||||
playbackRate,
|
||||
selectedConversationId,
|
||||
setIsPlaying,
|
||||
setPosition,
|
||||
]
|
||||
);
|
||||
|
||||
const handlePause = useCallback(() => {
|
||||
setIsPlaying(false);
|
||||
}, [setIsPlaying]);
|
||||
|
||||
const handleSend = useCallback(() => {
|
||||
if (selectedConversationId) {
|
||||
sendMultiMediaMessage(selectedConversationId, {
|
||||
draftAttachments: [voiceNoteAttachment],
|
||||
});
|
||||
}
|
||||
}, [selectedConversationId, sendMultiMediaMessage, voiceNoteAttachment]);
|
||||
|
||||
const handleCancel = useCallback(() => {
|
||||
unloadMessageAudio();
|
||||
if (selectedConversationId && voiceNoteAttachment.path) {
|
||||
removeAttachment(selectedConversationId, voiceNoteAttachment.path);
|
||||
}
|
||||
}, [
|
||||
removeAttachment,
|
||||
selectedConversationId,
|
||||
unloadMessageAudio,
|
||||
voiceNoteAttachment.path,
|
||||
]);
|
||||
|
||||
const handleScrub = useCallback(
|
||||
(positionAsRatio: number) => {
|
||||
// if scrubbing when audio not loaded
|
||||
if (!draftActive && audioUrl) {
|
||||
loadVoiceNoteDraftAudio({
|
||||
conversationId: selectedConversationId,
|
||||
url: audioUrl,
|
||||
startPosition: positionAsRatio,
|
||||
playbackRate,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// if scrubbing when audio is loaded
|
||||
if (draftActive) {
|
||||
setPosition(positionAsRatio);
|
||||
|
||||
if (draftActive?.playing) {
|
||||
setIsPlaying(true);
|
||||
}
|
||||
}
|
||||
},
|
||||
[
|
||||
audioUrl,
|
||||
draftActive,
|
||||
loadVoiceNoteDraftAudio,
|
||||
playbackRate,
|
||||
selectedConversationId,
|
||||
setIsPlaying,
|
||||
setPosition,
|
||||
]
|
||||
);
|
||||
|
||||
return (
|
||||
<CompositionRecordingDraft
|
||||
i18n={i18n}
|
||||
audioUrl={audioUrl}
|
||||
active={draftActive}
|
||||
onCancel={handleCancel}
|
||||
onSend={handleSend}
|
||||
onPlay={handlePlay}
|
||||
onPause={handlePause}
|
||||
onScrub={handleScrub}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<CompositionRecordingDraft
|
||||
i18n={i18n}
|
||||
audioUrl={audioUrl}
|
||||
active={draftActive}
|
||||
onCancel={handleCancel}
|
||||
onSend={handleSend}
|
||||
onPlay={handlePlay}
|
||||
onPause={handlePause}
|
||||
onScrub={handleScrub}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue