Merge pull request #1728 from oxen-io/clearnet

Autoplay audio messages + playspeed

_locales/en/messages.json

@@ -404,10 +404,11 @@
   "device": "Device",
   "destination": "Destination",
   "learnMore": "Learn more",
-  "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",
+  "audioMessageAutoplayTitle": "Audio Message Autoplay",
+  "audioMessageAutoplayDescription": "Automatically play consecutively sent audio messages",
   "clickToTrustContact": "Click to download media",
   "trustThisContactDialogTitle": "Trust $name$?",
   "trustThisContactDialogDescription": "Are you sure you want to download media sent by $name$?"

package.json

@@ -108,6 +108,7 @@
     "read-last-lines": "1.3.0",
     "redux": "4.0.1",
     "redux-logger": "3.0.6",
+    "redux-persist": "^6.0.0",
     "redux-promise-middleware": "6.1.0",
     "reselect": "4.0.0",
     "rimraf": "2.6.2",

stylesheets/_session.scss

@@ -1385,3 +1385,23 @@ input {
   padding: $session-margin-sm $session-margin-lg;
   border-radius: 4px;
 }
+
+.speedButton {
+  padding: $session-margin-xs;
+  opacity: 0.6;
+  transition: none;
+  &:hover {
+    @include themify($themes) {
+      opacity: 1;
+    }
+  }
+  .session-button {
+    transition: none;
+
+    &:hover {
+      @include themify($themes) {
+        color: themed('textColorOpposite');
+      }
+    }
+  }
+}

ts/components/conversation/H5AudioPlayer.tsx

@@ -1,18 +1,22 @@
 // Audio Player
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
-import H5AudioPlayer from 'react-h5-audio-player';
+import H5AudioPlayer, { RHAP_UI } from 'react-h5-audio-player';
 import { useTheme } from 'styled-components';
 import { useEncryptedFileFetch } from '../../hooks/useEncryptedFileFetch';
 import { SessionIcon, SessionIconSize, SessionIconType } from '../session/icon';
+import { SessionButton, SessionButtonColor, SessionButtonType } from '../session/SessionButton';
 
 export const AudioPlayerWithEncryptedFile = (props: {
   src: string;
   contentType: string;
-  playbackSpeed: number;
+  playNextMessage?: (index: number) => void;
+  playableMessageIndex?: number;
+  nextMessageToPlay?: number;
 }) => {
   const theme = useTheme();
+
+  const [playbackSpeed, setPlaybackSpeed] = useState(1.0);
   const { urlToLoad } = useEncryptedFileFetch(props.src, props.contentType);
-  const { playbackSpeed } = props;
   const player = useRef<H5AudioPlayer | null>(null);
 
   useEffect(() => {
@@ -22,6 +26,24 @@ export const AudioPlayerWithEncryptedFile = (props: {
     }
   }, [playbackSpeed]);
 
+  useEffect(() => {
+    if (props.playableMessageIndex === props.nextMessageToPlay) {
+      player.current?.audio.current?.play();
+    }
+  });
+
+  const onEnded = () => {
+    // if audio autoplay is enabled, call method to start playing
+    // the next playable message
+    if (
+      window.inboxStore?.getState().userConfig.audioAutoplay === true &&
+      props.playNextMessage &&
+      props.playableMessageIndex !== undefined
+    ) {
+      props.playNextMessage(props.playableMessageIndex);
+    }
+  };
+
   return (
     <H5AudioPlayer
       src={urlToLoad}
@@ -30,7 +52,23 @@ export const AudioPlayerWithEncryptedFile = (props: {
       showJumpControls={false}
       showDownloadProgress={false}
       listenInterval={100}
+      onEnded={onEnded}
       ref={player}
+      customControlsSection={[
+        RHAP_UI.MAIN_CONTROLS,
+        RHAP_UI.VOLUME,
+        <div className="speedButton" key="togglePlaybackSpeed">
+          <SessionButton
+            text={`${playbackSpeed}x`}
+            theme={theme}
+            onClick={() => {
+              setPlaybackSpeed(playbackSpeed === 1 ? 1.5 : 1);
+            }}
+            buttonType={SessionButtonType.Simple}
+            buttonColor={SessionButtonColor.None}
+          />
+        </div>,
+      ]}
       customIcons={{
         play: (
           <SessionIcon

ts/components/conversation/Message.tsx

@@ -50,7 +50,6 @@ interface State {
   expiring: boolean;
   expired: boolean;
   imageBroken: boolean;
-  playbackSpeed: number;
 }
 
 const EXPIRATION_CHECK_MINIMUM = 2000;
@@ -69,7 +68,6 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
       expiring: false,
       expired: false,
       imageBroken: false,
-      playbackSpeed: 1,
     };
     this.ctxMenuID = `ctx-menu-message-${uuid()}`;
   }
@@ -205,9 +203,11 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
           }}
         >
           <AudioPlayerWithEncryptedFile
-            playbackSpeed={this.state.playbackSpeed}
             src={firstAttachment.url}
             contentType={firstAttachment.contentType}
+            playNextMessage={this.props.playNextMessage}
+            playableMessageIndex={this.props.playableMessageIndex}
+            nextMessageToPlay={this.props.nextMessageToPlay}
           />
         </div>
       );
@@ -573,11 +573,6 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
           </Item>
         ) : null}
 
-        {isAudio(attachments) ? (
-          <Item onClick={this.updatePlaybackSpeed}>
-            {window.i18n('playAtCustomSpeed', this.state.playbackSpeed === 1 ? 2 : 1)}
-          </Item>
-        ) : null}
         <Item
           onClick={() => {
             MessageInteraction.copyBodyToClipboard(text);
@@ -824,15 +819,6 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
     );
   }
 
-  /**
-   * Doubles / halves the playback speed based on the current playback speed.
-   */
-  private updatePlaybackSpeed() {
-    this.setState(prevState => ({
-      playbackSpeed: prevState.playbackSpeed === 1 ? 2 : 1,
-    }));
-  }
-
   private handleContextMenu(e: any) {
     e.preventDefault();
     e.stopPropagation();

ts/components/session/SessionInboxView.tsx

@@ -13,11 +13,16 @@ 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';
 import { SessionMainPanel } from '../SessionMainPanel';
 
+// tslint:disable-next-line: no-submodule-imports
+import { PersistGate } from 'redux-persist/integration/react';
+import { persistStore } from 'redux-persist';
+
 // Workaround: A react component's required properties are filtering up through connect()
 //   https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31363
 
@@ -53,13 +58,17 @@ export class SessionInboxView extends React.Component<any, State> {
       return <></>;
     }
 
+    const persistor = persistStore(this.store);
+
     return (
       <Provider store={this.store}>
-        <div className="gutter">
+        <PersistGate loading={null} persistor={persistor}>
-          <div className="network-status-container" />
+          <div className="gutter">
-          {this.renderLeftPane()}
+            <div className="network-status-container" />
-        </div>
+            {this.renderLeftPane()}
-        <SessionMainPanel />
+          </div>
+          <SessionMainPanel />
+        </PersistGate>
       </Provider>
     );
   }
@@ -96,6 +105,7 @@ export class SessionInboxView extends React.Component<any, State> {
       mentionsInput: initialMentionsState,
       onionPaths: initialOnionPathState,
       modals: initialModalState,
+      userConfig: initialUserConfigState,
     };
 
     this.store = createStore(initialState);

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 (
@@ -269,6 +272,13 @@ export class SessionMessagesList extends React.Component<Props, State> {
             return;
           }
 
+          if (messageProps) {
+            messageProps.nextMessageToPlay = this.state.nextMessageToPlay;
+            messageProps.playableMessageIndex = playableMessageIndex;
+            messageProps.playNextMessage = this.playNextMessage;
+          }
+          playableMessageIndex++;
+
           if (messageProps.conversationType === ConversationTypeEnum.GROUP) {
             messageProps.weAreAdmin = conversation.groupAdmins?.includes(ourPrimary);
           }
@@ -373,6 +383,37 @@ export class SessionMessagesList extends React.Component<Props, State> {
     }
   }
 
+  /**
+   * Sets the targeted index for the next
+   * @param index index of message that just completed
+   */
+  private readonly playNextMessage = (index: any) => {
+    const { messages } = this.props;
+    let nextIndex: number | null = index - 1;
+
+    // to prevent autoplaying as soon as a message is received.
+    const latestMessagePlayed = index <= 0 || messages.length < index - 1;
+    if (latestMessagePlayed) {
+      nextIndex = null;
+      this.setState({
+        nextMessageToPlay: nextIndex,
+      });
+      return;
+    }
+
+    // stop auto-playing when the audio messages change author.
+    const prevAuthorNumber = messages[index].propsForMessage.authorPhoneNumber;
+    const nextAuthorNumber = messages[index - 1].propsForMessage.authorPhoneNumber;
+    const differentAuthor = prevAuthorNumber !== nextAuthorNumber;
+    if (differentAuthor) {
+      nextIndex = null;
+    }
+
+    this.setState({
+      nextMessageToPlay: nextIndex,
+    });
+  };
+
   // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   // ~~~~~~~~~~~~ SCROLLING METHODS ~~~~~~~~~~~~~
   // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

ts/components/session/settings/SessionSettings.tsx

@@ -4,18 +4,18 @@ 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 { getConversationController } 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';
 import { SessionConfirmDialogProps } from '../SessionConfirm';
 import { mapDispatchToProps } from '../../../state/actions';
 import { unblockConvoById } from '../../../interactions/conversationInteractions';
+import { toggleAudioAutoplay } from '../../../state/ducks/userConfig';
 import { sessionPassword } from '../../../state/ducks/modalDialog';
 import { PasswordAction } from '../SessionPasswordModal';
 
@@ -264,10 +264,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);
@@ -350,6 +352,23 @@ 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: {
+          defaultValue: window.inboxStore?.getState().userConfig.audioAutoplay,
+        },
+        comparisonValue: undefined,
+        onClick: undefined,
+        confirmationDialogParams: undefined,
+      },
       {
         id: 'notification-setting',
         title: window.i18n('notificationSettingsDialog'),

ts/models/messageType.ts

@@ -253,4 +253,8 @@ export interface MessageRegularProps {
   onShowDetail: () => void;
   markRead: (readAt: number) => Promise<void>;
   theme: DefaultTheme;
+
+  playableMessageIndex?: number;
+  nextMessageToPlay?: number;
+  playNextMessage?: (value: number) => any;
 }

ts/state/createStore.ts

@@ -2,6 +2,10 @@ import promise from 'redux-promise-middleware';
 import { createLogger } from 'redux-logger';
 import { configureStore } from '@reduxjs/toolkit';
 import { reducer as allReducers } from './reducer';
+import { persistReducer } from 'redux-persist';
+
+// tslint:disable-next-line: no-submodule-imports match-default-export-name
+import storage from 'redux-persist/lib/storage';
 
 // @ts-ignore
 const env = window.getEnvironment();
@@ -22,13 +26,22 @@ const logger = createLogger({
   logger: directConsole,
 });
 
+const persistConfig = {
+  key: 'root',
+  storage,
+  whitelist: ['userConfig'],
+};
+
+const persistedReducer = persistReducer(persistConfig, allReducers);
+
 // Exclude logger if we're in production mode
 const disableLogging = env === 'production' || true; // ALWAYS TURNED OFF
 const middlewareList = disableLogging ? [promise] : [promise, logger];
 
 export const createStore = (initialState: any) =>
   configureStore({
-    reducer: allReducers,
+    // reducer: allReducers,
+    reducer: persistedReducer,
     preloadedState: initialState,
     middleware: (getDefaultMiddleware: any) => getDefaultMiddleware().concat(middlewareList),
   });

ts/state/ducks/userConfig.tsx

@@ -0,0 +1,27 @@
+/**
+ * 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: {
+    toggleAudioAutoplay: state => {
+      state.audioAutoplay = !state.audioAutoplay;
+    },
+  },
+});
+
+const { actions, reducer } = userConfigSlice;
+export const { 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,10 @@
+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
+);

yarn.lock

@@ -9660,6 +9660,11 @@ redux-logger@3.0.6:
   dependencies:
     deep-diff "^0.3.5"
 
+redux-persist@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-6.0.0.tgz#b4d2972f9859597c130d40d4b146fecdab51b3a8"
+  integrity sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==
+
 redux-promise-middleware@6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/redux-promise-middleware/-/redux-promise-middleware-6.1.0.tgz#ecdb22488cdd673c1a3f0d278d82b48d92ca5d06"