add button to control speed playback on the player

_locales/en/messages.json

@@ -404,7 +404,6 @@
   "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",

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,16 @@
 // Audio Player
-import React, { useEffect, useRef } from 'react';
-import H5AudioPlayer from 'react-h5-audio-player';
+import React, { useEffect, useRef, useState } from 'react';
+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 { SessionIcon, SessionIconButton, SessionIconSize, SessionIconType } from '../session/icon';
+import { SessionButton, SessionButtonColor, SessionButtonType } from '../session/SessionButton';
 
-export const AudioPlayerWithEncryptedFile = (props: {
-  src: string;
-  contentType: string;
-  playbackSpeed: number;
-}) => {
+export const AudioPlayerWithEncryptedFile = (props: { src: string; contentType: string }) => {
   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(() => {
@@ -31,6 +29,21 @@ export const AudioPlayerWithEncryptedFile = (props: {
       showDownloadProgress={false}
       listenInterval={100}
       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,7 +203,6 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
           }}
         >
           <AudioPlayerWithEncryptedFile
-            playbackSpeed={this.state.playbackSpeed}
             src={firstAttachment.url}
             contentType={firstAttachment.contentType}
           />
@@ -573,11 +570,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 +816,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();