From 7453215811d130012248d6b3b8c6a7cc842588a5 Mon Sep 17 00:00:00 2001
From: Robson Tenorio <robson.tenorio@gmail.com>
Date: Fri, 27 Jan 2023 08:42:28 -0300
Subject: [PATCH] =?UTF-8?q?Melhoria=20no=20player=20de=20=C3=A1udio?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Correção para poder tocar áudio em dispositivos IOS.
---
 frontend/package.json                   |  3 +-
 frontend/src/components/Audio/index.jsx | 52 ++++++++-----------------
 2 files changed, 18 insertions(+), 37 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 3aa6dc07..5d3602d7 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -19,6 +19,7 @@
     "markdown-to-jsx": "^7.1.0",
     "material-ui-color": "^1.2.0",
     "mic-recorder-to-mp3": "^2.2.2",
+    "mui-audio-player": "^1.0.1",
     "qrcode.react": "^1.0.0",
     "react": "^16.13.1",
     "react-color": "^2.19.3",
@@ -54,4 +55,4 @@
       "last 1 safari version"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/Audio/index.jsx b/frontend/src/components/Audio/index.jsx
index d1dac124..a46f38e6 100644
--- a/frontend/src/components/Audio/index.jsx
+++ b/frontend/src/components/Audio/index.jsx
@@ -1,14 +1,12 @@
-import { Button } from "@material-ui/core";
-import React, { useRef } from "react";
-import { useEffect } from "react";
-import { useState } from "react";
+import React, { useRef, useEffect, useState } from "react";
+import { AudioPlayer } from 'mui-audio-player';
 
 const LS_NAME = 'audioMessageRate';
 
-export default function({url}) {
+export default function ({ url }) {
     const audioRef = useRef(null);
-    const [audioRate, setAudioRate] = useState( parseFloat(localStorage.getItem(LS_NAME) || "1") );
-    const [showButtonRate, setShowButtonRate] = useState(false);
+    const [audioRate] = useState(parseFloat(localStorage.getItem(LS_NAME) || "1"));
+    const [,setShowButtonRate] = useState(false);
 
     useEffect(() => {
         audioRef.current.playbackRate = audioRate;
@@ -27,36 +25,18 @@ export default function({url}) {
         };
     }, []);
 
-    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;
-        }
-
-        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>}
+            <AudioPlayer
+                debug={false}
+                width="450px"
+                download={true}
+                ref={audioRef} controls
+                src={url} type="audio/ogg"
+                autoPlay={false}
+                rounded={true}
+                elevation={4}
+            />
         </>
     );
-}
\ No newline at end of file
+}  
\ No newline at end of file