From f381102860f31a56fab13f22ab37622e68ae22aa Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Tue, 22 Jun 2021 17:04:57 +1000 Subject: [PATCH] WIP: autoplay consecutive messages. Setting state done. --- _locales/en/messages.json | 4 ++- ts/components/session/SessionInboxView.tsx | 2 ++ .../session/settings/SessionSettings.tsx | 28 +++++++++++++--- ts/state/ducks/userConfig.tsx | 33 +++++++++++++++++++ ts/state/reducer.ts | 3 ++ ts/state/selectors/userConfig.ts | 4 +++ 6 files changed, 68 insertions(+), 6 deletions(-) create mode 100644 ts/state/ducks/userConfig.tsx create mode 100644 ts/state/selectors/userConfig.ts diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 251f6ffae..cd2ad0701 100644 --- a/_locales/en/messages.json +++ b/_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" } diff --git a/ts/components/session/SessionInboxView.tsx b/ts/components/session/SessionInboxView.tsx index 9eb184d83..fdc97520b 100644 --- a/ts/components/session/SessionInboxView.tsx +++ b/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 { mentionsInput: initialMentionsState, onionPaths: initialOnionPathState, modals: initialModalState, + userConfig: initialUserConfigState, }; this.store = createStore(initialState); diff --git a/ts/components/session/settings/SessionSettings.tsx b/ts/components/session/settings/SessionSettings.tsx index 2d3edaa94..ddff44e87 100644 --- a/ts/components/session/settings/SessionSettings.tsx +++ b/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 { }); } + /** + * 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 { 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'), diff --git a/ts/state/ducks/userConfig.tsx b/ts/state/ducks/userConfig.tsx new file mode 100644 index 000000000..e414df806 --- /dev/null +++ b/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) { + return { + ...state, + audioAutoplay: true + } + }, + toggleAudioAutoplay: (state) => { + state.audioAutoplay = !state.audioAutoplay + } + }, +}) + +const { actions, reducer } = userConfigSlice; +export const { updateUserConfig, toggleAudioAutoplay } = actions; +export const userConfigReducer = reducer; \ No newline at end of file diff --git a/ts/state/reducer.ts b/ts/state/reducer.ts index ef0947b09..75584ab30 100644 --- a/ts/state/reducer.ts +++ b/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 diff --git a/ts/state/selectors/userConfig.ts b/ts/state/selectors/userConfig.ts new file mode 100644 index 000000000..af6a9eaa6 --- /dev/null +++ b/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;