Merge pull request #197 from sopra-fs24-group-09/toast-z-index

lift up z-index of toast.

src/components/ui/AudioRecorder.tsx

@@ -9,9 +9,11 @@ import { IoMdMicrophone, IoMdCheckmark } from "react-icons/io";
 import "../../styles/ui/AudioRecorder.scss";
 import PropType from "prop-types";
 import { Base64audio } from "types";
+import { showToast } from "../../helpers/toastService"
 
 // stop recording after 5 seconds
 const MAX_RECORDING_TIME = 5000;
+const MIC_PERMISSION_TOAST_DURATION = 5000;
 
 export const AudioRecorder = React.forwardRef((props, ref) => {
   const waveformRef = useRef<HTMLDivElement>(null);
@@ -271,6 +273,9 @@ export const AudioRecorder = React.forwardRef((props, ref) => {
       .then((stream) => {
         recorder.current?.startRecording();
         setIsRecording(true);
+      })
+      .catch((error) => {
+        showToast("Failed to get microphone access, please check your browser setting.", "error", MIC_PERMISSION_TOAST_DURATION);
       });
     // once recording is started, enable interaction
     // should be placed in onRecordEnd event, but it's not working

src/constants/constants.ts

@@ -6,7 +6,7 @@ export const MAX_PASSWORD_LENGTH = 20;
 
 export const MAX_ROOM_NAME_LENGTH = 10;
 
-export const DEFAULT_TIMEOUT = 1500;
+export const DEFAULT_TIMEOUT = 2000;
 
 export const HTTP_STATUS = {
   OK: 200,

src/helpers/toastService.js

@@ -1,5 +1,6 @@
 import { toast } from "react-toastify";
 import { DEFAULT_TIMEOUT } from "../constants/constants"
+import "styles/views/toast.scss"
 
 export function showToast(message, type = "info", duration = DEFAULT_TIMEOUT) {
   toast(message, {

src/styles/views/toast.scss

@@ -0,0 +1,3 @@
+.Toastify{
+    --toastify-z-index: 999999;
+}