Voice notes mini-player

This commit is contained in:
Alvaro 2023-02-24 16:18:57 -07:00 committed by GitHub
parent b5849f872a
commit 0e655ceeed
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
45 changed files with 1599 additions and 487 deletions

View file

@ -1,35 +1,79 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import { connect } from 'react-redux';
import { pick } from 'lodash';
import React, { useCallback } from 'react';
import { useSelector } from 'react-redux';
import { MessageAudio } from '../../components/conversation/MessageAudio';
import type { OwnProps as MessageAudioOwnProps } from '../../components/conversation/MessageAudio';
import { mapDispatchToProps } from '../actions';
import type { StateType } from '../reducer';
import type { ActiveAudioPlayerStateType } from '../ducks/audioPlayer';
import { useAudioPlayerActions } from '../ducks/audioPlayer';
import {
selectAudioPlayerActive,
selectVoiceNoteAndConsecutive,
} from '../selectors/audioPlayer';
import { useConversationsActions } from '../ducks/conversations';
import { getUserConversationId } from '../selectors/user';
import * as log from '../../logging/log';
export type Props = Omit<MessageAudioOwnProps, 'active'>;
export type Props = Omit<MessageAudioOwnProps, 'active' | 'onPlayMessage'> & {
renderingContext: string;
};
const mapStateToProps = (
state: StateType,
props: Props
): MessageAudioOwnProps => {
const { active } = state.audioPlayer;
export function SmartMessageAudio({
renderingContext,
...props
}: Props): JSX.Element | null {
const active = useSelector(selectAudioPlayerActive);
const { loadMessageAudio, setIsPlaying, setPlaybackRate, setCurrentTime } =
useAudioPlayerActions();
const { pushPanelForConversation } = useConversationsActions();
const getVoiceNoteData = useSelector(selectVoiceNoteAndConsecutive);
const ourConversationId = useSelector(getUserConversationId);
const messageActive: ActiveAudioPlayerStateType | undefined =
active &&
active.id === props.id &&
active.context === props.renderingContext
? pick(active, 'playing', 'playbackRate', 'currentTime', 'duration')
active.content &&
active.content.current.id === props.id &&
active.content.context === renderingContext
? active
: undefined;
return {
...props,
active: messageActive,
};
};
const smart = connect(mapStateToProps, mapDispatchToProps);
export const SmartMessageAudio = smart(MessageAudio);
const handlePlayMessage = useCallback(
(id: string, position: number) => {
const voiceNoteData = getVoiceNoteData(id);
if (!voiceNoteData) {
log.warn('SmartMessageAudio: voice note not found', {
message: id,
});
return;
}
if (!ourConversationId) {
log.warn('SmartMessageAudio: no ourConversationId');
return;
}
loadMessageAudio({
voiceNoteData,
position,
context: renderingContext,
ourConversationId,
});
},
[getVoiceNoteData, loadMessageAudio, ourConversationId, renderingContext]
);
return (
<MessageAudio
active={messageActive}
onPlayMessage={handlePlayMessage}
setPlaybackRate={setPlaybackRate}
setIsPlaying={setIsPlaying}
setCurrentTime={setCurrentTime}
pushPanelForConversation={pushPanelForConversation}
{...props}
/>
);
}