✨ Adding audio rate control

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>}
+        </>
+    );
+}

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 (
+      return <Audio url={message.mediaUrl} />
-        <audio controls>
-          <source src={message.mediaUrl} type="audio/ogg"></source>
-        </audio>
-      );
     } else if (message.mediaType === "video") {
       return (
         <video