mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

New UI for audio playback and global audio player

Browse source 
Introduce new UI and behavior for playing audio attachments in
conversations. Previously, playback stopped unexpectedly during window
resizes and scrolling through the messages due to the row height
recomputation in `react-virtualized`.

With this commit we introduce `<GlobalAudioContext/>` instance that
wraps whole conversation and provides an `<audio/>` element that
doesn't get re-rendered (or destroyed) whenever `react-virtualized`
recomputes messages. The audio players (with a freshly designed UI) now
share this global `<audio/>` instance and manage access to it using
`audioPlayer.owner` state from the redux.

New UI computes on the fly, caches, and displays waveforms for each
audio attachment. Storybook had to be slightly modified to accomodate
testing of Android bubbles by introducing the new knob for
`authorColor`.
This commit is contained in:
Fedor Indutny 2021-03-10 12:36:58 -08:00 • committed by Josh Perez
parent 1ca4960924
commit 12d7f24d0f
30 changed files with 1176 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

36
ts/state/smart/MessageAudio.tsx Normal file
View file

@ -0,0 +1,36 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import { connect } from 'react-redux';
import { MessageAudio } from '../../components/conversation/MessageAudio';
import { mapDispatchToProps } from '../actions';
import { StateType } from '../reducer';
import { WaveformCache } from '../../types/Audio';
import { LocalizerType } from '../../types/Util';
export type Props = {
audio: HTMLAudioElement;
audioContext: AudioContext;
waveformCache: WaveformCache;
direction?: 'incoming' | 'outgoing';
id: string;
i18n: LocalizerType;
url: string;
withContentAbove: boolean;
withContentBelow: boolean;
buttonRef: React.RefObject<HTMLButtonElement>;
};
const mapStateToProps = (state: StateType, props: Props) => {
return {
...props,
...state.audioPlayer,
};
};
const smart = connect(mapStateToProps, mapDispatchToProps);
export const SmartMessageAudio = smart(MessageAudio);