Consecutive playback and per-conversation playback rate

ts/state/smart/MessageAudio.tsx

@@ -2,8 +2,10 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { connect } from 'react-redux';
+import { pick } from 'underscore';
 
 import { MessageAudio } from '../../components/conversation/MessageAudio';
+import type { OwnProps as MessageAudioOwnProps } from '../../components/conversation/MessageAudio';
 import type { ComputePeaksResult } from '../../components/GlobalAudioContext';
 
 import { mapDispatchToProps } from '../actions';
@@ -14,10 +16,9 @@ import type {
   DirectionType,
   MessageStatusType,
 } from '../../components/conversation/Message';
+import type { ActiveAudioPlayerStateType } from '../ducks/audioPlayer';
 
 export type Props = {
-  audio: HTMLAudioElement;
-
   renderingContext: string;
   i18n: LocalizerType;
   attachment: AttachmentType;
@@ -29,6 +30,7 @@ export type Props = {
   expirationLength?: number;
   expirationTimestamp?: number;
   id: string;
+  conversationId: string;
   played: boolean;
   showMessageDetail: (id: string) => void;
   status?: MessageStatusType;
@@ -43,10 +45,21 @@ export type Props = {
   onFirstPlayed(): void;
 };
 
-const mapStateToProps = (state: StateType, props: Props) => {
+const mapStateToProps = (
+  state: StateType,
+  props: Props
+): MessageAudioOwnProps => {
+  const { active } = state.audioPlayer;
+
+  const messageActive: ActiveAudioPlayerStateType | undefined =
+    active &&
+    active.id === props.id &&
+    active.context === props.renderingContext
+      ? pick(active, 'playing', 'playbackRate', 'currentTime', 'duration')
+      : undefined;
   return {
     ...props,
-    ...state.audioPlayer,
+    active: messageActive,
   };
 };