From 9730471d59c3ace1d41eccd5a84524e4b68c672a Mon Sep 17 00:00:00 2001
From: Warrick Corfe-Tan <warrickct@gmail.com>
Date: Mon, 21 Jun 2021 11:42:27 +1000
Subject: [PATCH] Added ability to toggle playback speed for audio messages via
 context menu,

---
 _locales/en/messages.json              |  3 +-
 ts/components/conversation/Message.tsx | 39 +++++++++++++++++++++++---
 2 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 6471725c8..3b5a1fb78 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -417,5 +417,6 @@
   "unknownCountry": "Unknown Country",
   "device": "Device",
   "destination": "Destination",
-  "learnMore": "Learn more"
+  "learnMore": "Learn more",
+  "playAtCustomSpeed": "Play at $multipler$x speed"
 }
diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx
index c882eff8f..c7a15395b 100644
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { createRef } from 'react';
 import classNames from 'classnames';
 
 import { Avatar, AvatarSize } from '../Avatar';
@@ -13,9 +13,20 @@ import { Quote } from './Quote';
 import H5AudioPlayer from 'react-h5-audio-player';
 // import 'react-h5-audio-player/lib/styles.css';
 
-const AudioPlayerWithEncryptedFile = (props: { src: string; contentType: string }) => {
+const AudioPlayerWithEncryptedFile = (props: { src: string; contentType: string, playbackSpeed: number }) => {
   const theme = useTheme();
   const { urlToLoad } = useEncryptedFileFetch(props.src, props.contentType);
+  const { playbackSpeed } = props;
+  const player = createRef<H5AudioPlayer>();
+
+  useEffect(() => {
+
+    // updates playback speed to value selected in context menu
+    if (player.current?.audio.current?.playbackRate) {
+      player.current.audio.current.playbackRate = playbackSpeed;
+    }
+  }, [playbackSpeed])
+
   return (
     <H5AudioPlayer
       src={urlToLoad}
@@ -24,6 +35,7 @@ const AudioPlayerWithEncryptedFile = (props: { src: string; contentType: string
       showJumpControls={false}
       showDownloadProgress={false}
       listenInterval={100}
+      ref={player}
       customIcons={{
         play: (
           <SessionIcon
@@ -78,6 +90,7 @@ import {
 } from '../../interactions/messageInteractions';
 import { updateUserDetailsModal } from '../../state/ducks/modalDialog';
 import { MessageInteraction } from '../../interactions';
+import { useEffect } from 'react';
 
 // Same as MIN_WIDTH in ImageGrid.tsx
 const MINIMUM_LINK_PREVIEW_IMAGE_WIDTH = 200;
@@ -86,6 +99,7 @@ interface State {
   expiring: boolean;
   expired: boolean;
   imageBroken: boolean;
+  playbackSpeed: number;
 }
 
 const EXPIRATION_CHECK_MINIMUM = 2000;
@@ -106,11 +120,13 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
     this.handleContextMenu = this.handleContextMenu.bind(this);
     this.onAddModerator = this.onAddModerator.bind(this);
     this.onRemoveFromModerator = this.onRemoveFromModerator.bind(this);
+    this.updatePlaybackSpeed = this.updatePlaybackSpeed.bind(this);
 
     this.state = {
       expiring: false,
       expired: false,
       imageBroken: false,
+      playbackSpeed: 1
     };
     this.ctxMenuID = `ctx-menu-message-${uuid()}`;
   }
@@ -175,6 +191,18 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
     });
   }
 
+
+  /**
+   * Doubles / halves the playback speed based on the current playback speed.
+   */
+  private updatePlaybackSpeed() {
+    console.log('updating playback speed');
+    this.setState({
+      ...this.state,
+      playbackSpeed: this.state.playbackSpeed === 1 ? 2 : 1
+    });
+  }
+
   // tslint:disable-next-line max-func-body-length cyclomatic-complexity
   public renderAttachment() {
     const {
@@ -241,6 +269,7 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
           }}
         >
           <AudioPlayerWithEncryptedFile
+            playbackSpeed={this.state.playbackSpeed}
             src={firstAttachment.url}
             contentType={firstAttachment.contentType}
           />
@@ -589,6 +618,7 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
     const selectMessageText = window.i18n('selectMessage');
     const deleteMessageText = window.i18n('deleteMessage');
 
+
     return (
       <Menu
         id={this.ctxMenuID}
@@ -608,6 +638,7 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
           </Item>
         ) : null}
 
+        <Item onClick={this.updatePlaybackSpeed}>{window.i18n('playAtCustomSpeed', this.state.playbackSpeed === 1 ? 2 : 1)}</Item>
         <Item onClick={onCopyText}>{window.i18n('copyMessage')}</Item>
         <Item onClick={this.onReplyPrivate}>{window.i18n('replyToMessage')}</Item>
         <Item onClick={onShowDetail}>{window.i18n('moreInformation')}</Item>
@@ -700,8 +731,8 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
 
       return Boolean(
         displayImage &&
-          ((isImage(attachments) && hasImage(attachments)) ||
-            (isVideo(attachments) && hasVideoScreenshot(attachments)))
+        ((isImage(attachments) && hasImage(attachments)) ||
+          (isVideo(attachments) && hasVideoScreenshot(attachments)))
       );
     }