WIP: autoplay consecutive messages. Setting state done.

_locales/en/messages.json

@@ -407,5 +407,7 @@
   "playAtCustomSpeed": "Play at $multipler$x speed",
   "linkVisitWarningTitle": "Open this link in your browser?",
   "linkVisitWarningMessage": "Are you sure you want to open $url$ in your browser?",
-  "open": "Open"
+  "open": "Open",
+  "audioMessageAutoplayTitle": "Audio Message Autoplay",
+  "audioMessageAutoplayDescription": "Automatically play consecutively sent audio messages"
 }

ts/components/session/SessionInboxView.tsx

@@ -13,6 +13,7 @@ import { initialOnionPathState } from '../../state/ducks/onion';
 import { initialSearchState } from '../../state/ducks/search';
 import { initialSectionState } from '../../state/ducks/section';
 import { initialThemeState } from '../../state/ducks/theme';
+import { initialUserConfigState } from '../../state/ducks/userConfig';
 import { StateType } from '../../state/reducer';
 import { makeLookup } from '../../util';
 import { LeftPane } from '../LeftPane';
@@ -96,6 +97,7 @@ export class SessionInboxView extends React.Component<any, State> {
       mentionsInput: initialMentionsState,
       onionPaths: initialOnionPathState,
       modals: initialModalState,
+      userConfig: initialUserConfigState,
     };
 
     this.store = createStore(initialState);

ts/components/session/settings/SessionSettings.tsx

@@ -4,12 +4,11 @@ import { SettingsHeader } from './SessionSettingsHeader';
 import { SessionSettingListItem } from './SessionSettingListItem';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../SessionButton';
 import { BlockedNumberController, PasswordUtil } from '../../../util';
-import { ToastUtils } from '../../../session/utils';
 import { ConversationLookupType } from '../../../state/ducks/conversations';
 import { StateType } from '../../../state/reducer';
 import { ConversationController } from '../../../session/conversations';
 import { getConversationLookup } from '../../../state/selectors/conversations';
-import { connect } from 'react-redux';
+import { connect, useSelector } from 'react-redux';
 import { getPasswordHash } from '../../../../ts/data/data';
 import { SpacerLG, SpacerXS } from '../../basic/Text';
 import { shell } from 'electron';
@@ -17,6 +16,8 @@ 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';
 
 export enum SessionSettingCategory {
   Appearance = 'appearance',
@@ -271,10 +272,12 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
     });
   }
 
+  /**
+   * If there's a custom afterClick function, execute it instead of automatically updating settings
+   * @param item setting item
+   * @param value new value to set
+   */
   public updateSetting(item: any, value?: string) {
-    // If there's a custom afterClick function,
-    // execute it instead of automatically updating settings
-
     if (item.setFn) {
       if (value) {
         item.setFn(value);
@@ -357,6 +360,21 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
           okTheme: SessionButtonColor.Danger,
         },
       },
+      {
+        id: 'audio-message-autoplay-setting',
+        title: window.i18n('audioMessageAutoplayTitle'),
+        description: window.i18n('audioMessageAutoplayDescription'),
+        hidden: false,
+        type: SessionSettingType.Toggle,
+        category: SessionSettingCategory.Appearance,
+        setFn: () => {
+          window.inboxStore?.dispatch(toggleAudioAutoplay());
+        },
+        content: undefined,
+        comparisonValue: undefined,
+        onClick: undefined,
+        confirmationDialogParams: undefined,
+      },
       {
         id: 'notification-setting',
         title: window.i18n('notificationSettingsDialog'),

ts/state/ducks/userConfig.tsx

@@ -0,0 +1,33 @@
+/**
+ * This slice is intended for the user configurable settings for the client such as appearance, autoplaying of links etc.
+ * Anything setting under the cog wheel tab.
+ */
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+export interface UserConfigState {
+  audioAutoplay: boolean;
+}
+
+export const initialUserConfigState = {
+  audioAutoplay: false
+};
+
+const userConfigSlice = createSlice({
+  name: 'userConfig',
+  initialState: initialUserConfigState,
+  reducers: {
+    updateUserConfig(state: UserConfigState, action: PayloadAction<UserConfigState>) {
+      return {
+        ...state,
+        audioAutoplay: true
+      }
+    },
+    toggleAudioAutoplay: (state) => {
+      state.audioAutoplay = !state.audioAutoplay
+    }
+  },
+})
+
+const { actions, reducer } = userConfigSlice;
+export const { updateUserConfig, toggleAudioAutoplay } = actions;
+export const userConfigReducer = reducer;

ts/state/reducer.ts

@@ -12,6 +12,7 @@ import {
 } from './ducks/mentionsInput';
 import { defaultOnionReducer as onionPaths, OnionState } from './ducks/onion';
 import { modalReducer as modals, ModalState } from './ducks/modalDialog';
+import { userConfigReducer as userConfig, UserConfigState } from './ducks/userConfig';
 
 export type StateType = {
   search: SearchStateType;
@@ -23,6 +24,7 @@ export type StateType = {
   mentionsInput: MentionsInputState;
   onionPaths: OnionState;
   modals: ModalState;
+  userConfig: UserConfigState;
 };
 
 export const reducers = {
@@ -35,6 +37,7 @@ export const reducers = {
   mentionsInput,
   onionPaths,
   modals,
+  userConfig
 };
 
 // Making this work would require that our reducer signature supported AnyAction, not

ts/state/selectors/userConfig.ts

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