diff --git a/frontend/src/components/Audio/index.jsx b/frontend/src/components/Audio/index.jsx new file mode 100644 index 0000000..cc0c7cc --- /dev/null +++ b/frontend/src/components/Audio/index.jsx @@ -0,0 +1,62 @@ +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(() => { + 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; + } + + setAudioRate(newRate); + }; + + return ( + <> + + {showButtonRate && } + + ); +} \ 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 ; } else if (message.mediaType === "audio") { - return ( - - ); + return