From 0ca00f765dac66e3f871c8c5442a4fb2ee3c6d36 Mon Sep 17 00:00:00 2001
From: Ricardo Paes <ricardo@likesistemas.com.br>
Date: Tue, 12 Apr 2022 08:43:23 -0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Adding=20audio=20rate=20control?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Audio/index.jsx       | 66 +++++++++++++++++++
 frontend/src/components/MessagesList/index.js |  7 +-
 2 files changed, 68 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/components/Audio/index.jsx

diff --git a/frontend/src/components/Audio/index.jsx b/frontend/src/components/Audio/index.jsx
new file mode 100644
index 0000000..d7fee0b
--- /dev/null
+++ b/frontend/src/components/Audio/index.jsx
@@ -0,0 +1,66 @@
+import { Button } from "@material-ui/core";
+import React, { useRef } from "react";
+import { useEffect } from "react";
+import { useState } from "react";
+
+const LS_NAME = 'audioMessageRate';
+
+export default function({url}) {
+    const audioRef = useRef(null);
+    const [audioRate, setAudioRate] = useState( parseFloat(localStorage.getItem(LS_NAME) || "1") );
+    const [showButtonRate, setShowButtonRate] = useState(false);
+
+    useEffect(() => {
+        console.log('set-ar', audioRate);
+
+        audioRef.current.playbackRate = audioRate;
+        localStorage.setItem(LS_NAME, audioRate);
+    }, [audioRate]);
+
+    useEffect(() => {
+        audioRef.current.onplaying = () => {
+            setShowButtonRate(true);
+        };
+        audioRef.current.onpause = () => {
+            setShowButtonRate(false);
+        };
+        audioRef.current.onended = () => {
+            setShowButtonRate(false);
+        };
+    }, []);
+
+    const toogleRate = () => {
+        let newRate = null;
+
+        switch(audioRate) {
+            case 0.5:
+                newRate = 1;
+                break;
+            case 1:
+                newRate = 1.5;
+                break;
+            case 1.5:
+                newRate = 2;
+                break;
+            case 2:
+                newRate = 0.5;
+                break;
+            default:
+                newRate = 1;
+                break;
+        }
+
+        console.log('new-ar', newRate);
+        
+        setAudioRate(newRate);
+    };
+
+    return (
+        <>
+            <audio ref={audioRef} controls>
+                <source src={url} type="audio/ogg"></source>
+            </audio>
+            {showButtonRate && <Button style={{marginLeft: "5px", marginTop: "-45px"}} onClick={toogleRate}>{audioRate}x</Button>}
+        </>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/components/MessagesList/index.js b/frontend/src/components/MessagesList/index.js
index 181a91c..383aaa5 100644
--- a/frontend/src/components/MessagesList/index.js
+++ b/frontend/src/components/MessagesList/index.js
@@ -30,6 +30,7 @@ import whatsBackground from "../../assets/wa-background.png";
 
 import api from "../../services/api";
 import toastError from "../../errors/toastError";
+import Audio from "../Audio";
 
 const useStyles = makeStyles((theme) => ({
   messagesListWrapper: {
@@ -467,11 +468,7 @@ const MessagesList = ({ ticketId, isGroup }) => {
   else if (message.mediaType === "image") {
       return <ModalImageCors imageUrl={message.mediaUrl} />;
     } else if (message.mediaType === "audio") {
-      return (
-        <audio controls>
-          <source src={message.mediaUrl} type="audio/ogg"></source>
-        </audio>
-      );
+      return <Audio url={message.mediaUrl} />
     } else if (message.mediaType === "video") {
       return (
         <video