WIP: audio autoplay working with consecutive messages. Next step store state on shutdown and rename variables.

ts/components/conversation/H5AudioPlayer.tsx

@@ -1,14 +1,20 @@
 // Audio Player
 import React, { useEffect, useRef } from 'react';
 import H5AudioPlayer from 'react-h5-audio-player';
+import { useSelector } from 'react-redux';
 import { useTheme } from 'styled-components';
 import { useEncryptedFileFetch } from '../../hooks/useEncryptedFileFetch';
+import { getAudioAutoplay } from '../../state/selectors/userConfig';
 import { SessionIcon, SessionIconSize, SessionIconType } from '../session/icon';
 
 export const AudioPlayerWithEncryptedFile = (props: {
   src: string;
   contentType: string;
   playbackSpeed: number;
+  changeTestList?: any;
+  shouldPlay?: boolean
+  index?: number
+  nextMessageToPlay?: number
 }) => {
   const theme = useTheme();
   const { urlToLoad } = useEncryptedFileFetch(props.src, props.contentType);
@@ -22,6 +28,18 @@ export const AudioPlayerWithEncryptedFile = (props: {
     }
   }, [playbackSpeed]);
 
+  useEffect(() => {
+    if (props.index == props.nextMessageToPlay) {
+      player.current?.audio.current?.play();
+    }
+  })
+
+  const onEnded = () => {
+    if (window.inboxStore?.getState().userConfig.audioAutoplay === true) {
+      props.changeTestList(props.index);
+    }
+  }
+
   return (
     <H5AudioPlayer
       src={urlToLoad}
@@ -30,6 +48,7 @@ export const AudioPlayerWithEncryptedFile = (props: {
       showJumpControls={false}
       showDownloadProgress={false}
       listenInterval={100}
+      onEnded={onEnded}
       ref={player}
       customIcons={{
         play: (

ts/components/conversation/Message.tsx

@@ -202,6 +202,10 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
             playbackSpeed={this.state.playbackSpeed}
             src={firstAttachment.url}
             contentType={firstAttachment.contentType}
+            changeTestList={this.props.changeTestList}
+            shouldPlay={this.props.shouldPlay}
+            index={this.props.index}
+            nextMessageToPlay={this.props.nextMessageToPlay}
           />
         </div>
       );

ts/components/session/conversation/SessionMessagesList.tsx

@@ -25,6 +25,7 @@ import { DataExtractionNotification } from '../../conversation/DataExtractionNot
 interface State {
   showScrollButton: boolean;
   animateQuotedMessageId?: string;
+  nextMessageToPlay: number | null;
 }
 
 interface Props {
@@ -68,6 +69,7 @@ export class SessionMessagesList extends React.Component<Props, State> {
 
     this.state = {
       showScrollButton: false,
+      nextMessageToPlay: null
     };
     autoBind(this);
 
@@ -196,6 +198,7 @@ export class SessionMessagesList extends React.Component<Props, State> {
     const { conversation, ourPrimary, selectedMessages } = this.props;
     const multiSelectMode = Boolean(selectedMessages.length);
     let currentMessageIndex = 0;
+    let playableMessageIndex = 0;
     const displayUnreadBannerIndex = this.displayUnreadBannerIndex(messages);
 
     return (
@@ -225,6 +228,7 @@ export class SessionMessagesList extends React.Component<Props, State> {
             />
           );
 
+
           currentMessageIndex = currentMessageIndex + 1;
 
           if (groupNotificationProps) {
@@ -269,6 +273,22 @@ export class SessionMessagesList extends React.Component<Props, State> {
             return;
           }
 
+          const changeTestList = (index: any) => {
+            index--;
+            if (messages[index]) {
+              this.setState({
+                nextMessageToPlay: index
+              })
+            }
+          }
+
+          if (messageProps) {
+            messageProps.nextMessageToPlay = this.state.nextMessageToPlay
+            messageProps.index = playableMessageIndex;
+            messageProps.changeTestList = changeTestList;
+          }
+          playableMessageIndex++;
+
           if (messageProps.conversationType === ConversationTypeEnum.GROUP) {
             messageProps.weAreAdmin = conversation.groupAdmins?.includes(ourPrimary);
           }

ts/components/session/settings/SessionSettings.tsx

@@ -16,8 +16,7 @@ import { PasswordAction, SessionPasswordModal } from '../SessionPasswordModal';
 import { SessionConfirmDialogProps } from '../SessionConfirm';
 import { mapDispatchToProps } from '../../../state/actions';
 import { unblockConvoById } from '../../../interactions/conversationInteractions';
-import { getUserConfig } from '../../../state/selectors/userConfig';
-import { toggleAudioAutoplay, updateUserConfig } from '../../../state/ducks/userConfig';
+import { toggleAudioAutoplay } from '../../../state/ducks/userConfig';
 
 export enum SessionSettingCategory {
   Appearance = 'appearance',

ts/models/messageType.ts

@@ -252,4 +252,9 @@ export interface MessageRegularProps {
   onShowDetail: () => void;
   markRead: (readAt: number) => Promise<void>;
   theme: DefaultTheme;
+
+  shouldPlay?: boolean;
+  index?: number;
+  nextMessageToPlay?: number;
+  changeTestList: (value: any) => any;
 }

ts/state/selectors/userConfig.ts

@@ -1,4 +1,11 @@
 import { StateType } from '../reducer';
 import { UserConfigState } from "../ducks/userConfig";
+import { createSelector } from 'reselect';
 
 export const getUserConfig = (state: StateType): UserConfigState => state.userConfig;
+
+
+export const getAudioAutoplay = createSelector(
+    getUserConfig,
+    (state: UserConfigState): boolean => state.audioAutoplay
+);