done audio player

package-lock.json

@@ -11,7 +11,7 @@
         "@date-io/date-fns": "^1.3.13",
         "@emotion/react": "^11.7.1",
         "@emotion/styled": "^11.6.0",
-        "@material-ui/core": "^4.11.3",
+        "@material-ui/core": "^4.12.3",
         "@material-ui/pickers": "^3.3.10",
         "@mui/icons-material": "^5.3.1",
         "@mui/material": "^5.4.0",
@@ -2255,14 +2255,15 @@
       }
     },
     "node_modules/@material-ui/core": {
-      "version": "4.11.3",
-      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.3.tgz",
-      "integrity": "sha512-Adt40rGW6Uds+cAyk3pVgcErpzU/qxc7KBR94jFHBYretU4AtWZltYcNsbeMn9tXL86jjVL1kuGcIHsgLgFGRw==",
+      "version": "4.12.3",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.3.tgz",
+      "integrity": "sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw==",
+      "deprecated": "You can now upgrade to @mui/material. See the guide: https://mui.com/guides/migration-v4/",
       "dependencies": {
         "@babel/runtime": "^7.4.4",
-        "@material-ui/styles": "^4.11.3",
-        "@material-ui/system": "^4.11.3",
-        "@material-ui/types": "^5.1.0",
+        "@material-ui/styles": "^4.11.4",
+        "@material-ui/system": "^4.12.1",
+        "@material-ui/types": "5.1.0",
         "@material-ui/utils": "^4.11.2",
         "@types/react-transition-group": "^4.2.0",
         "clsx": "^1.0.4",
@@ -2316,13 +2317,14 @@
       }
     },
     "node_modules/@material-ui/styles": {
-      "version": "4.11.3",
-      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.3.tgz",
-      "integrity": "sha512-HzVzCG+PpgUGMUYEJ2rTEmQYeonGh41BYfILNFb/1ueqma+p1meSdu4RX6NjxYBMhf7k+jgfHFTTz+L1SXL/Zg==",
+      "version": "4.11.4",
+      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz",
+      "integrity": "sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew==",
+      "deprecated": "You can now upgrade to @mui/styles. See the guide: https://mui.com/guides/migration-v4/",
       "dependencies": {
         "@babel/runtime": "^7.4.4",
         "@emotion/hash": "^0.8.0",
-        "@material-ui/types": "^5.1.0",
+        "@material-ui/types": "5.1.0",
         "@material-ui/utils": "^4.11.2",
         "clsx": "^1.0.4",
         "csstype": "^2.5.2",
@@ -2356,14 +2358,15 @@
       }
     },
     "node_modules/@material-ui/styles/node_modules/csstype": {
-      "version": "2.6.14",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz",
-      "integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A=="
+      "version": "2.6.20",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
+      "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
     },
     "node_modules/@material-ui/system": {
-      "version": "4.11.3",
-      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.11.3.tgz",
-      "integrity": "sha512-SY7otguNGol41Mu2Sg6KbBP1ZRFIbFLHGK81y4KYbsV2yIcaEPOmsCK6zwWlp+2yTV3J/VwT6oSBARtGIVdXPw==",
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.1.tgz",
+      "integrity": "sha512-lUdzs4q9kEXZGhbN7BptyiS1rLNHe6kG9o8Y307HCvF4sQxbCgpL2qi+gUk+yI8a2DNk48gISEQxoxpgph0xIw==",
+      "deprecated": "You can now upgrade to @mui/system. See the guide: https://mui.com/guides/migration-v4/",
       "dependencies": {
         "@babel/runtime": "^7.4.4",
         "@material-ui/utils": "^4.11.2",
@@ -2389,9 +2392,9 @@
       }
     },
     "node_modules/@material-ui/system/node_modules/csstype": {
-      "version": "2.6.14",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz",
-      "integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A=="
+      "version": "2.6.20",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
+      "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
     },
     "node_modules/@material-ui/types": {
       "version": "5.1.0",
@@ -10469,14 +10472,6 @@
         "node": ">=0.8.19"
       }
     },
-    "node_modules/indefinite-observable": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-2.0.1.tgz",
-      "integrity": "sha512-G8vgmork+6H9S8lUAg1gtXEj2JxIQTo0g2PbFiYOdjkziSI0F7UYBiVwhZRuixhBCNGczAls34+5HJPyZysvxQ==",
-      "dependencies": {
-        "symbol-observable": "1.2.0"
-      }
-    },
     "node_modules/indent-string": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
@@ -13110,13 +13105,12 @@
       }
     },
     "node_modules/jss": {
-      "version": "10.5.1",
-      "resolved": "https://registry.npmjs.org/jss/-/jss-10.5.1.tgz",
-      "integrity": "sha512-hbbO3+FOTqVdd7ZUoTiwpHzKXIo5vGpMNbuXH1a0wubRSWLWSBvwvaq4CiHH/U42CmjOnp6lVNNs/l+Z7ZdDmg==",
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-10.9.0.tgz",
+      "integrity": "sha512-YpzpreB6kUunQBbrlArlsMpXYyndt9JATbt95tajx0t4MTJJcCJdd4hdNpHmOIDiUJrF/oX5wtVFrS3uofWfGw==",
       "dependencies": {
         "@babel/runtime": "^7.3.1",
         "csstype": "^3.0.2",
-        "indefinite-observable": "^2.0.1",
         "is-in-browser": "^1.1.3",
         "tiny-warning": "^1.0.2"
       },
@@ -13126,70 +13120,70 @@
       }
     },
     "node_modules/jss-plugin-camel-case": {
-      "version": "10.5.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.5.1.tgz",
-      "integrity": "sha512-9+oymA7wPtswm+zxVti1qiowC5q7bRdCJNORtns2JUj/QHp2QPXYwSNRD8+D2Cy3/CEMtdJzlNnt5aXmpS6NAg==",
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.9.0.tgz",
+      "integrity": "sha512-UH6uPpnDk413/r/2Olmw4+y54yEF2lRIV8XIZyuYpgPYTITLlPOsq6XB9qeqv+75SQSg3KLocq5jUBXW8qWWww==",
       "dependencies": {
         "@babel/runtime": "^7.3.1",
         "hyphenate-style-name": "^1.0.3",
-        "jss": "10.5.1"
+        "jss": "10.9.0"
       }
     },
     "node_modules/jss-plugin-default-unit": {
-      "version": "10.5.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.5.1.tgz",
-      "integrity": "sha512-D48hJBc9Tj3PusvlillHW8Fz0y/QqA7MNmTYDQaSB/7mTrCZjt7AVRROExoOHEtd2qIYKOYJW3Jc2agnvsXRlQ==",
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.9.0.tgz",
+      "integrity": "sha512-7Ju4Q9wJ/MZPsxfu4T84mzdn7pLHWeqoGd/D8O3eDNNJ93Xc8PxnLmV8s8ZPNRYkLdxZqKtm1nPQ0BM4JRlq2w==",
       "dependencies": {
         "@babel/runtime": "^7.3.1",
-        "jss": "10.5.1"
+        "jss": "10.9.0"
       }
     },
     "node_modules/jss-plugin-global": {
-      "version": "10.5.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.5.1.tgz",
-      "integrity": "sha512-jX4XpNgoaB8yPWw/gA1aPXJEoX0LNpvsROPvxlnYe+SE0JOhuvF7mA6dCkgpXBxfTWKJsno7cDSCgzHTocRjCQ==",
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.9.0.tgz",
+      "integrity": "sha512-4G8PHNJ0x6nwAFsEzcuVDiBlyMsj2y3VjmFAx/uHk/R/gzJV+yRHICjT4MKGGu1cJq2hfowFWCyrr/Gg37FbgQ==",
       "dependencies": {
         "@babel/runtime": "^7.3.1",
-        "jss": "10.5.1"
+        "jss": "10.9.0"
       }
     },
     "node_modules/jss-plugin-nested": {
-      "version": "10.5.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.5.1.tgz",
-      "integrity": "sha512-xXkWKOCljuwHNjSYcXrCxBnjd8eJp90KVFW1rlhvKKRXnEKVD6vdKXYezk2a89uKAHckSvBvBoDGsfZrldWqqQ==",
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.9.0.tgz",
+      "integrity": "sha512-2UJnDrfCZpMYcpPYR16oZB7VAC6b/1QLsRiAutOt7wJaaqwCBvNsosLEu/fUyKNQNGdvg2PPJFDO5AX7dwxtoA==",
       "dependencies": {
         "@babel/runtime": "^7.3.1",
-        "jss": "10.5.1",
+        "jss": "10.9.0",
         "tiny-warning": "^1.0.2"
       }
     },
     "node_modules/jss-plugin-props-sort": {
-      "version": "10.5.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.5.1.tgz",
-      "integrity": "sha512-t+2vcevNmMg4U/jAuxlfjKt46D/jHzCPEjsjLRj/J56CvP7Iy03scsUP58Iw8mVnaV36xAUZH2CmAmAdo8994g==",
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.9.0.tgz",
+      "integrity": "sha512-7A76HI8bzwqrsMOJTWKx/uD5v+U8piLnp5bvru7g/3ZEQOu1+PjHvv7bFdNO3DwNPC9oM0a//KwIJsIcDCjDzw==",
       "dependencies": {
         "@babel/runtime": "^7.3.1",
-        "jss": "10.5.1"
+        "jss": "10.9.0"
       }
     },
     "node_modules/jss-plugin-rule-value-function": {
-      "version": "10.5.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.5.1.tgz",
-      "integrity": "sha512-3gjrSxsy4ka/lGQsTDY8oYYtkt2esBvQiceGBB4PykXxHoGRz14tbCK31Zc6DHEnIeqsjMUGbq+wEly5UViStQ==",
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.9.0.tgz",
+      "integrity": "sha512-IHJv6YrEf8pRzkY207cPmdbBstBaE+z8pazhPShfz0tZSDtRdQua5jjg6NMz3IbTasVx9FdnmptxPqSWL5tyJg==",
       "dependencies": {
         "@babel/runtime": "^7.3.1",
-        "jss": "10.5.1",
+        "jss": "10.9.0",
         "tiny-warning": "^1.0.2"
       }
     },
     "node_modules/jss-plugin-vendor-prefixer": {
-      "version": "10.5.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.5.1.tgz",
-      "integrity": "sha512-cLkH6RaPZWHa1TqSfd2vszNNgxT1W0omlSjAd6hCFHp3KIocSrW21gaHjlMU26JpTHwkc+tJTCQOmE/O1A4FKQ==",
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.9.0.tgz",
+      "integrity": "sha512-MbvsaXP7iiVdYVSEoi+blrW+AYnTDvHTW6I6zqi7JcwXdc6I9Kbm234nEblayhF38EftoenbM+5218pidmC5gA==",
       "dependencies": {
         "@babel/runtime": "^7.3.1",
         "css-vendor": "^2.0.8",
-        "jss": "10.5.1"
+        "jss": "10.9.0"
       }
     },
     "node_modules/jsx-ast-utils": {
@@ -24618,14 +24612,14 @@
       }
     },
     "@material-ui/core": {
-      "version": "4.11.3",
-      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.3.tgz",
-      "integrity": "sha512-Adt40rGW6Uds+cAyk3pVgcErpzU/qxc7KBR94jFHBYretU4AtWZltYcNsbeMn9tXL86jjVL1kuGcIHsgLgFGRw==",
+      "version": "4.12.3",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.3.tgz",
+      "integrity": "sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw==",
       "requires": {
         "@babel/runtime": "^7.4.4",
-        "@material-ui/styles": "^4.11.3",
-        "@material-ui/system": "^4.11.3",
-        "@material-ui/types": "^5.1.0",
+        "@material-ui/styles": "^4.11.4",
+        "@material-ui/system": "^4.12.1",
+        "@material-ui/types": "5.1.0",
         "@material-ui/utils": "^4.11.2",
         "@types/react-transition-group": "^4.2.0",
         "clsx": "^1.0.4",
@@ -24657,13 +24651,13 @@
       }
     },
     "@material-ui/styles": {
-      "version": "4.11.3",
-      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.3.tgz",
-      "integrity": "sha512-HzVzCG+PpgUGMUYEJ2rTEmQYeonGh41BYfILNFb/1ueqma+p1meSdu4RX6NjxYBMhf7k+jgfHFTTz+L1SXL/Zg==",
+      "version": "4.11.4",
+      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz",
+      "integrity": "sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew==",
       "requires": {
         "@babel/runtime": "^7.4.4",
         "@emotion/hash": "^0.8.0",
-        "@material-ui/types": "^5.1.0",
+        "@material-ui/types": "5.1.0",
         "@material-ui/utils": "^4.11.2",
         "clsx": "^1.0.4",
         "csstype": "^2.5.2",
@@ -24680,16 +24674,16 @@
       },
       "dependencies": {
         "csstype": {
-          "version": "2.6.14",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz",
-          "integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A=="
+          "version": "2.6.20",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
+          "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
         }
       }
     },
     "@material-ui/system": {
-      "version": "4.11.3",
-      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.11.3.tgz",
-      "integrity": "sha512-SY7otguNGol41Mu2Sg6KbBP1ZRFIbFLHGK81y4KYbsV2yIcaEPOmsCK6zwWlp+2yTV3J/VwT6oSBARtGIVdXPw==",
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.1.tgz",
+      "integrity": "sha512-lUdzs4q9kEXZGhbN7BptyiS1rLNHe6kG9o8Y307HCvF4sQxbCgpL2qi+gUk+yI8a2DNk48gISEQxoxpgph0xIw==",
       "requires": {
         "@babel/runtime": "^7.4.4",
         "@material-ui/utils": "^4.11.2",
@@ -24698,9 +24692,9 @@
       },
       "dependencies": {
         "csstype": {
-          "version": "2.6.14",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz",
-          "integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A=="
+          "version": "2.6.20",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
+          "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
         }
       }
     },
@@ -31382,14 +31376,6 @@
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
     },
-    "indefinite-observable": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-2.0.1.tgz",
-      "integrity": "sha512-G8vgmork+6H9S8lUAg1gtXEj2JxIQTo0g2PbFiYOdjkziSI0F7UYBiVwhZRuixhBCNGczAls34+5HJPyZysvxQ==",
-      "requires": {
-        "symbol-observable": "1.2.0"
-      }
-    },
     "indent-string": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
@@ -33456,82 +33442,81 @@
       }
     },
     "jss": {
-      "version": "10.5.1",
-      "resolved": "https://registry.npmjs.org/jss/-/jss-10.5.1.tgz",
-      "integrity": "sha512-hbbO3+FOTqVdd7ZUoTiwpHzKXIo5vGpMNbuXH1a0wubRSWLWSBvwvaq4CiHH/U42CmjOnp6lVNNs/l+Z7ZdDmg==",
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-10.9.0.tgz",
+      "integrity": "sha512-YpzpreB6kUunQBbrlArlsMpXYyndt9JATbt95tajx0t4MTJJcCJdd4hdNpHmOIDiUJrF/oX5wtVFrS3uofWfGw==",
       "requires": {
         "@babel/runtime": "^7.3.1",
         "csstype": "^3.0.2",
-        "indefinite-observable": "^2.0.1",
         "is-in-browser": "^1.1.3",
         "tiny-warning": "^1.0.2"
       }
     },
     "jss-plugin-camel-case": {
-      "version": "10.5.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.5.1.tgz",
-      "integrity": "sha512-9+oymA7wPtswm+zxVti1qiowC5q7bRdCJNORtns2JUj/QHp2QPXYwSNRD8+D2Cy3/CEMtdJzlNnt5aXmpS6NAg==",
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.9.0.tgz",
+      "integrity": "sha512-UH6uPpnDk413/r/2Olmw4+y54yEF2lRIV8XIZyuYpgPYTITLlPOsq6XB9qeqv+75SQSg3KLocq5jUBXW8qWWww==",
       "requires": {
         "@babel/runtime": "^7.3.1",
         "hyphenate-style-name": "^1.0.3",
-        "jss": "10.5.1"
+        "jss": "10.9.0"
       }
     },
     "jss-plugin-default-unit": {
-      "version": "10.5.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.5.1.tgz",
-      "integrity": "sha512-D48hJBc9Tj3PusvlillHW8Fz0y/QqA7MNmTYDQaSB/7mTrCZjt7AVRROExoOHEtd2qIYKOYJW3Jc2agnvsXRlQ==",
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.9.0.tgz",
+      "integrity": "sha512-7Ju4Q9wJ/MZPsxfu4T84mzdn7pLHWeqoGd/D8O3eDNNJ93Xc8PxnLmV8s8ZPNRYkLdxZqKtm1nPQ0BM4JRlq2w==",
       "requires": {
         "@babel/runtime": "^7.3.1",
-        "jss": "10.5.1"
+        "jss": "10.9.0"
       }
     },
     "jss-plugin-global": {
-      "version": "10.5.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.5.1.tgz",
-      "integrity": "sha512-jX4XpNgoaB8yPWw/gA1aPXJEoX0LNpvsROPvxlnYe+SE0JOhuvF7mA6dCkgpXBxfTWKJsno7cDSCgzHTocRjCQ==",
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.9.0.tgz",
+      "integrity": "sha512-4G8PHNJ0x6nwAFsEzcuVDiBlyMsj2y3VjmFAx/uHk/R/gzJV+yRHICjT4MKGGu1cJq2hfowFWCyrr/Gg37FbgQ==",
       "requires": {
         "@babel/runtime": "^7.3.1",
-        "jss": "10.5.1"
+        "jss": "10.9.0"
       }
     },
     "jss-plugin-nested": {
-      "version": "10.5.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.5.1.tgz",
-      "integrity": "sha512-xXkWKOCljuwHNjSYcXrCxBnjd8eJp90KVFW1rlhvKKRXnEKVD6vdKXYezk2a89uKAHckSvBvBoDGsfZrldWqqQ==",
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.9.0.tgz",
+      "integrity": "sha512-2UJnDrfCZpMYcpPYR16oZB7VAC6b/1QLsRiAutOt7wJaaqwCBvNsosLEu/fUyKNQNGdvg2PPJFDO5AX7dwxtoA==",
       "requires": {
         "@babel/runtime": "^7.3.1",
-        "jss": "10.5.1",
+        "jss": "10.9.0",
         "tiny-warning": "^1.0.2"
       }
     },
     "jss-plugin-props-sort": {
-      "version": "10.5.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.5.1.tgz",
-      "integrity": "sha512-t+2vcevNmMg4U/jAuxlfjKt46D/jHzCPEjsjLRj/J56CvP7Iy03scsUP58Iw8mVnaV36xAUZH2CmAmAdo8994g==",
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.9.0.tgz",
+      "integrity": "sha512-7A76HI8bzwqrsMOJTWKx/uD5v+U8piLnp5bvru7g/3ZEQOu1+PjHvv7bFdNO3DwNPC9oM0a//KwIJsIcDCjDzw==",
       "requires": {
         "@babel/runtime": "^7.3.1",
-        "jss": "10.5.1"
+        "jss": "10.9.0"
       }
     },
     "jss-plugin-rule-value-function": {
-      "version": "10.5.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.5.1.tgz",
-      "integrity": "sha512-3gjrSxsy4ka/lGQsTDY8oYYtkt2esBvQiceGBB4PykXxHoGRz14tbCK31Zc6DHEnIeqsjMUGbq+wEly5UViStQ==",
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.9.0.tgz",
+      "integrity": "sha512-IHJv6YrEf8pRzkY207cPmdbBstBaE+z8pazhPShfz0tZSDtRdQua5jjg6NMz3IbTasVx9FdnmptxPqSWL5tyJg==",
       "requires": {
         "@babel/runtime": "^7.3.1",
-        "jss": "10.5.1",
+        "jss": "10.9.0",
         "tiny-warning": "^1.0.2"
       }
     },
     "jss-plugin-vendor-prefixer": {
-      "version": "10.5.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.5.1.tgz",
-      "integrity": "sha512-cLkH6RaPZWHa1TqSfd2vszNNgxT1W0omlSjAd6hCFHp3KIocSrW21gaHjlMU26JpTHwkc+tJTCQOmE/O1A4FKQ==",
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.9.0.tgz",
+      "integrity": "sha512-MbvsaXP7iiVdYVSEoi+blrW+AYnTDvHTW6I6zqi7JcwXdc6I9Kbm234nEblayhF38EftoenbM+5218pidmC5gA==",
       "requires": {
         "@babel/runtime": "^7.3.1",
         "css-vendor": "^2.0.8",
-        "jss": "10.5.1"
+        "jss": "10.9.0"
       }
     },
     "jsx-ast-utils": {

package.json

@@ -7,7 +7,7 @@
     "@date-io/date-fns": "^1.3.13",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@material-ui/core": "^4.11.3",
+    "@material-ui/core": "^4.12.3",
     "@material-ui/pickers": "^3.3.10",
     "@mui/icons-material": "^5.3.1",
     "@mui/material": "^5.4.0",

public/index.html

@@ -16,6 +16,6 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <div id='modal-root'></div>
+    <div id="modal-root"></div>
   </body>
 </html>

src/api-data/index.ts

@@ -201,7 +201,37 @@ const sentMessageById = async <T>(id:string,message:any): Promise<T | undefined>
 
 const sentImgMessageById = async <T>(id:string,formData: object): Promise<T | undefined> => {
   try {
-    const { data: { data } } = await axios.post(`/messages/img/${id}`, formData);
+    const { data: { data } } = await axios.post(`/messages/image/${id}`, formData);
+    return data
+  } catch (e) {
+    forbidden(e)
+    return undefined
+  }
+};
+
+const sentAudioMessageById = async <T>(id:string,formData: object): Promise<T | undefined> => {
+  try {
+    const { data: { data } } = await axios.post(`/messages/audio/${id}`, formData);
+    return data
+  } catch (e) {
+    forbidden(e)
+    return undefined
+  }
+};
+
+const sentVideoMessageById = async <T>(id:string,formData: object): Promise<T | undefined> => {
+  try {
+    const { data: { data } } = await axios.post(`/messages/video/${id}`, formData);
+    return data
+  } catch (e) {
+    forbidden(e)
+    return undefined
+  }
+};
+
+const sentFileMessageById = async <T>(id:string,formData: object): Promise<T | undefined> => {
+  try {
+    const { data: { data } } = await axios.post(`/messages/file/${id}`, formData);
     return data
   } catch (e) {
     forbidden(e)
@@ -240,5 +270,8 @@ export {
   getChats,
   sentMessageById,
   sentImgMessageById,
+  sentAudioMessageById,
+  sentVideoMessageById,
+  sentFileMessageById,
   getMessagesById
 };

src/components/HomePage/LeftBar/ChatsList/index.tsx

@@ -18,7 +18,6 @@ import { getState } from '../../../../redux/chats/selector'
 import { asyncGetChats } from '../../../../redux/chats/operations'
 import { asyncStartChatById } from '../../../../redux/chat/operations'
 import { actionScroll } from '../../../../redux/control/action'
-import { fontSize } from '@mui/system';
 
 const StyledBadge = styled(Badge)(({ theme }) => ({
   '& .MuiBadge-badge': {

src/components/HomePage/RightBar/ChatBar/FilesMenu/index.tsx

@@ -4,7 +4,7 @@ import ListItemText from '@mui/material/ListItemText';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 import { makeStyles } from '@material-ui/core'
-import UploadPhotoAndVideo from '../../../../reusableComponents/DropZone/UploadPhotoAndVideo'
+import UploadFile from '../../../../reusableComponents/DropZone/UploadFile'
 
 const useStyles = makeStyles({
   list: {
@@ -16,29 +16,43 @@ const useStyles = makeStyles({
   },
   listText: {
       position: 'absolute',
-      left:60
+      left:40
   },  
 })
 
 interface IFilesMenu {
   setIsOpenMenu: any,
   setFile: any,
-  setValue:any
+  setValue: any,
+  setType: any
 }
-const FilesMenu = ({setIsOpenMenu,setFile,setValue}:IFilesMenu) => {
+const FilesMenu = ({setIsOpenMenu,setFile,setValue,setType}:IFilesMenu) => {
   const classes = useStyles()
-  const handleClose = () => setIsOpenMenu(false)
+  const handleClose = (type:string) => {
+    setType(type)
+    setIsOpenMenu(false)
+  }
   
   return (
     <MenuList className={classes.list}>
-      <MenuItem  onClick={handleClose}>
-      <UploadPhotoAndVideo setFile={setFile} setValue={setValue}>
+      <MenuItem  onClick={() => handleClose('content')}>
+        <UploadFile setFile={setFile} setValue={setValue} accept='image/*,video/*,audio/*'>
           <ListItemIcon className={classes.listIcon}>
             <InsertDriveFileIcon fontSize="medium" />
           </ListItemIcon>
-          <ListItemText className={classes.listText}>Upload File jpg*,png*,mp3*,mp4*</ListItemText>
-        </UploadPhotoAndVideo>
+          <ListItemText className={classes.listText}>Upload Image/Audio/Video</ListItemText>
+        </UploadFile>
       </MenuItem>
+      <MenuItem  onClick={() => handleClose('application')}>
+        <UploadFile setFile={setFile} setValue={setValue} accept='
+        application/pdf,application/docx,application/text,
+        application/rar,application/zip,application/excel'>
+          <ListItemIcon className={classes.listIcon}>
+            <InsertDriveFileIcon fontSize="medium" />
+          </ListItemIcon>
+          <ListItemText className={classes.listText}>Upload File</ListItemText>
+        </UploadFile>
+      </MenuItem>      
   </MenuList>
   );
 }

src/components/HomePage/RightBar/ChatBar/Messages/MessageLeftAudio/index.tsx

@@ -0,0 +1,50 @@
+import { makeStyles } from "@material-ui/core/styles";
+
+import { timeStamp } from '../../../../../../helpers'
+import AudioPlayer from "../../Players/AudioPlayer";
+
+const useStyles = makeStyles({
+  container: {
+      display: "flex",
+      justifyContent: "flex-start",
+      width:'auto',
+      maxWidth: '80%',
+      marginBottom:15
+  },
+  playerWrapper: {
+    position: 'relative',
+    width: 300
+  }, 
+  time: {
+      position: "absolute",
+      fontSize: ".65em",
+      fontWeight:600,
+      bottom: -5,
+      right: -5,
+      color: '#ffffff',
+      backgroundColor: '#3a3a3a',
+      padding: 3,
+      borderRadius:5
+    },
+});
+interface IMessageLeftAudio {
+  audioUrl:string,
+  updatedAt: string,
+  audio:any,
+  setAudio: any,
+  i:number
+}
+
+const MessageLeftAudio = ({ audioUrl,updatedAt,audio,setAudio,i }:IMessageLeftAudio) => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.container}>
+      <div className={classes.playerWrapper}>
+        <div className={classes.time}>{timeStamp(updatedAt)}</div>
+        <AudioPlayer audio={audio} setAudio={setAudio} i={i} src={`http://localhost:3000/${audioUrl}`}/>
+      </div>
+    </div>    
+)};
+
+export  default  MessageLeftAudio

src/components/HomePage/RightBar/ChatBar/Messages/MessageRightAudio/index.tsx

@@ -0,0 +1,51 @@
+import { makeStyles } from "@material-ui/core/styles";
+
+import { timeStamp } from '../../../../../../helpers'
+import AudioPlayer from "../../Players/AudioPlayer";
+
+const useStyles = makeStyles({
+  container: {
+      display: "flex",
+      justifyContent: "flex-end",
+      width:'auto',
+      maxWidth: '80%',
+      marginBottom:15
+  },
+  playerWrapper: {
+    position: 'relative',
+    width: 300
+  }, 
+  time: {
+      position: "absolute",
+      fontSize: ".65em",
+      fontWeight:600,
+      bottom: -5,
+      right: -5,
+      color: '#ffffff',
+      backgroundColor: '#3a3a3a',
+      padding: 3,
+      borderRadius:5
+    },
+});
+
+interface IMessageRightAudio {
+  audioUrl:string,
+  updatedAt: string,
+  audio:any,
+  setAudio: any,
+  i:number
+}
+
+const MessageRightAudio = ({ audioUrl,updatedAt,audio,setAudio,i }:IMessageRightAudio) => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.container}>
+      <div className={classes.playerWrapper}>
+        <div className={classes.time}>{timeStamp(updatedAt)}</div>
+        <AudioPlayer audio={audio} setAudio={setAudio} i={i} src={`http://localhost:3000/${audioUrl}`}/>
+      </div>
+    </div>    
+)};
+
+export  default  MessageRightAudio

src/components/HomePage/RightBar/ChatBar/Messages/MessagesRightImage/index.tsx

@@ -32,13 +32,13 @@ const useStyles = makeStyles({
     },
 });
 
-interface IMessagesRightImage {
+interface IMessageRightImage {
   imgUrl:string,
   updatedAt:string,
   color:string
 }
 
-const MessagesRightImage = ({imgUrl,updatedAt,color}:IMessagesRightImage) => {
+const MessageRightImage = ({imgUrl,updatedAt,color}:IMessageRightImage) => {
   const classes = useStyles();
 
   return (
@@ -51,4 +51,4 @@ const MessagesRightImage = ({imgUrl,updatedAt,color}:IMessagesRightImage) => {
     </div>    
 )};
 
-export  default  MessagesRightImage
+export  default  MessageRightImage

src/components/HomePage/RightBar/ChatBar/Messages/MessagesRightText/index.tsx

@@ -62,7 +62,7 @@ const useStyles = makeStyles({
     },
 });
 
-interface MessagesRightText {
+interface IMessageRightText {
   message:string,
   avatarUrl:string,
   name:string,
@@ -71,7 +71,7 @@ interface MessagesRightText {
   color:string
 }
 
-const MessagesRightText = ({message,avatarUrl,name,lastName,updatedAt,color}:MessagesRightText) => {
+const MessageRightText = ({message,avatarUrl,name,lastName,updatedAt,color}:IMessageRightText) => {
   const classes = useStyles();
 
   return (
@@ -93,4 +93,4 @@ const MessagesRightText = ({message,avatarUrl,name,lastName,updatedAt,color}:Mes
   </div>    
 )};
 
-export  default  MessagesRightText
+export  default  MessageRightText

src/components/HomePage/RightBar/ChatBar/Players/AudioPlayer/index.tsx

@@ -0,0 +1,107 @@
+import { makeStyles } from '@material-ui/core'
+import Stack from '@mui/material/Stack';
+import Slider from '@mui/material/Slider';
+import PlayCircleIcon from '@mui/icons-material/PlayCircle';
+import PauseCircleIcon from '@mui/icons-material/PauseCircle';
+import VolumeUpIcon from '@mui/icons-material/VolumeUp';
+import VolumeOffIcon from '@mui/icons-material/VolumeOff';
+import AudioFileIcon from '@mui/icons-material/AudioFile';
+import { useEffect } from 'react';
+
+const useStyles = makeStyles({
+  container: {
+    width: '100%',
+    backgroundColor: '#ececec',
+    borderRadius: 5,
+    padding:'0 5px'
+  },
+  icon: {
+    color: '#0072dd',
+    cursor:"pointer"
+  },
+  iconCancel: {
+    color: '#a3a3a3',
+    cursor:"pointer"
+  }
+})
+
+interface IAudioPlayer {
+  src: string,
+  audio:any,
+  setAudio: any,
+  i:number
+}
+
+const  AudioPlayer = ({ src,audio,setAudio,i }: IAudioPlayer) => {
+  const classes = useStyles()
+  const handlePlay = () => {
+    if (audio) {
+      const oldAudio = audio.audio
+      oldAudio.pause()
+      oldAudio.currentTime = 0
+    }
+    const newAudio = new Audio(src)
+    const newObject = {
+      audio: newAudio,
+      i,
+      pause: true,
+      volume:true
+    }
+    setAudio(newObject)
+    newAudio.play()
+  }
+
+  const handlePause = () => {
+    if (audio) {
+      const oldAudio = audio.audio
+      oldAudio.pause()
+      oldAudio.currentTime = 0
+      setAudio(false)
+    }
+  }
+  
+    const handleVolume = () => {
+      if (audio) {
+        if (audio.volume) {
+         audio.audio.volume = 0
+         audio.volume = false
+      } else {
+         audio.audio.volume = 1
+         audio.volume = true
+      }
+    } 
+  }
+
+  useEffect(() => {
+    if (audio && audio.i !== i &&
+      audio.audio.currentTime === audio.audio.duration) {
+        setAudio(false)
+      }
+  },[audio,i,setAudio])
+  
+  return (
+    <div className={classes.container} >
+      <Stack spacing={2} direction="row" sx={{ mb: 1 }} alignItems="center">
+        {audio.i !== i && <PlayCircleIcon onClick={handlePlay}
+          fontSize="small" className={classes.icon} />}
+        {!audio && audio.i === i && <PlayCircleIcon onClick={handlePlay}
+          fontSize="small" className={classes.icon} />}
+        {audio && audio.i === i && audio.pause && <PauseCircleIcon
+          onClick={handlePause} fontSize="small" className={classes.iconCancel} />}
+           <Slider
+            size="small"
+            defaultValue={audio.i === i&&audio.audio.currentTime}
+            aria-label="Small"
+            valueLabelDisplay="auto"
+        />
+        {audio.i !== i && <AudioFileIcon style={{color:'#047dce'}} fontSize="small"/>}
+        {audio.i === i && audio.volume && <VolumeUpIcon
+          onClick={handleVolume} className={classes.icon} fontSize="small"/>}
+        {audio.i === i && !audio.volume && <VolumeOffIcon
+          onClick={handleVolume} className={classes.iconCancel} fontSize="small"/>}
+      </Stack>      
+    </div>
+  );
+}
+
+export default AudioPlayer

src/components/HomePage/RightBar/ChatBar/SendMessage/index.tsx

@@ -11,7 +11,10 @@ import { useSelector } from "react-redux";
 
 import FilesMenu from "../FilesMenu";
 import NotDone from "../../../../reusableComponents/NotDone";
-import { sentMessageById,sentImgMessageById } from '../../../../../api-data'
+import {
+    sentMessageById, sentImgMessageById, sentAudioMessageById,
+    sentVideoMessageById,sentFileMessageById
+} from '../../../../../api-data'
 import { getChat } from '../../../../../redux/chat/selector'
 import { playNotification } from "../../../../../helpers";
 import { typingChat } from "../../../../../api-data";
@@ -83,7 +86,7 @@ const useStyles = makeStyles({
     filesMenu: {
       background: '#fdfdfd',
       position: 'absolute',
-      width: 355,
+      width: 300,
       maxWidth: '100%',
       left: 406,
       bottom:64,
@@ -146,25 +149,34 @@ const SendMessage = ({isArrow,handleScrollTo}:ISendMessage) => {
     const [file, setFile] = useState<any>(null)
     const [isOpenMenu, setIsOpenMenu] = useState<boolean>(false)
     const [isOpenEmoji, setIsOpenEmoji] = useState<boolean>(false)
+    const [type, setType] = useState<string>('')
     const sentMessage = async () => {
         setValue('')
         setFile(null)
         isOpenMenu&&setIsOpenMenu(false)
         isOpenEmoji && setIsOpenEmoji(false)
         if (value) sentMessageById(companionId, value)
-        if (file && file.type) {
-            if (file.type === 'image/png' || file.type === 'image/jpeg') {
+        if (file && file.type&&type) {
+            if (file.type.includes('image') && type === 'content') {
               const formData: any = new FormData()
-              formData.append("img", file);
-              console.log('image')
+              formData.append("image", file);
               await sentImgMessageById(companionId, formData)
             }
-            if (file.type === 'audio/mpeg') {
-                console.log('mp3')
+            if (file.type.includes('audio') && type === 'content') {
+              const formData: any = new FormData()
+              formData.append("audio", file);
+              sentAudioMessageById(companionId, formData)
             }
-            if (file.type === 'video/mp4') {
-                console.log('mp4')
+            if (file.type.includes('video') && type === 'content') {
+              const formData: any = new FormData()
+              formData.append("video", file);
+              sentVideoMessageById(companionId, formData)                
             }
+            if (file.type.includes('application') && type === 'application') {
+              const formData: any = new FormData()
+              formData.append("file", file);
+              sentFileMessageById(companionId, formData)   
+            }            
         }
         setTimeout(handleScrollTo, 3000);
         playNotification('http://localhost:3000/send.mp3')
@@ -218,7 +230,7 @@ const SendMessage = ({isArrow,handleScrollTo}:ISendMessage) => {
                 <AttachFileIcon onMouseEnter={handleEnterFileMenu} className={classes.attachIcon}
                     fontSize='medium'  sx={{color: isOpenMenu?'rgb(41, 139, 231)':'#6b6b6b'}}/>
                 <div onMouseLeave={handleLeaveFileMenu} style={{display:isOpenMenu?'block':'none'}} className={classes.filesMenu}>
-                    <FilesMenu setFile={setFile} setValue={setValue} setIsOpenMenu={setIsOpenMenu}/>
+                    <FilesMenu setFile={setFile} setValue={setValue} setIsOpenMenu={setIsOpenMenu} setType={setType}/>
                 </div>
                 <Avatar onClick={handleScrollTo} className={classes.avatarArrow} sx={{
                   backgroundColor: '#ffffff',

src/components/HomePage/RightBar/ChatBar/index.tsx

@@ -6,8 +6,10 @@ import shortid from 'shortid';
 import SendMessage from "./SendMessage";
 import MessageLeftText from './Messages/MessageLeftText'
 import MessageLeftImage from './Messages/MessageLeftImage'
-import MessagesRightText from './Messages/MessagesRightText'
-import MessagesRightImage from './Messages/MessagesRightImage'
+import MessageLeftAudio from './Messages/MessageLeftAudio'
+import MessageRightText from './Messages/MessageRightText'
+import MessageRightImage from './Messages/MessageRightImage'
+import MessageRightAudio from './Messages/MessageRightAudio'
 import AlertInfo from "../../../reusableComponents/AlertInfo";
 import { getMessages } from '../../../../redux/messages/selector'
 import { getNumber } from '../../../../redux/authorization/selector'
@@ -46,6 +48,7 @@ const ChatBar = () => {
   const { companionId } = useSelector(getChat)
   const scroll = useSelector(getScroll)
   const [isArrow, setIsArrow] = useState<boolean>(false)
+  const [audio, setAudio] = useState<any>(false)
   const divRef = useRef<any | null>(null)
   const handleScrollTo = () => {
      divRef.current&&divRef.current.scrollTo({
@@ -70,7 +73,7 @@ const ChatBar = () => {
   useEffect(() => {
     dispatch(asyncGetMessagesById(companionId, handleScrollTo))
     const handleReset = () => dispatch(asyncGetMessagesById(companionId,null))
-    const idInterval = setInterval(handleReset, 3000);
+    const idInterval = setInterval(handleReset, 1500);
     return () => clearInterval(idInterval);
   }, [dispatch, companionId]);
 
@@ -78,7 +81,7 @@ const ChatBar = () => {
   return (
       <div ref={divRef} className={classes.container} onScroll={debouncedHandleScroll}>
         <div  className={classes.messagesBody}>
-        {messages.length > 0 ? messages.map(({message,avatarUrl,name,lastName,color,updatedAt,number,type}) => {
+        {messages.length > 0 ? messages.map(({message,avatarUrl,name,lastName,color,updatedAt,number,type},i:number) => {
           if (number !== userNumber) {
             if(type === 'text') return (
             <MessageLeftText
@@ -96,10 +99,19 @@ const ChatBar = () => {
             imgUrl={message}
             updatedAt={updatedAt}
             color={color} 
-          />)            
+              />)
+            if(type === 'audio') return (
+            <MessageLeftAudio
+            key={shortid.generate()}    
+            audioUrl={message}
+            updatedAt={updatedAt}
+            audio={audio}
+            setAudio={setAudio}
+            i={i}   
+              />)             
           } else {
             if(type === 'text') return (
-            <MessagesRightText
+            <MessageRightText
             key={shortid.generate()}    
             message={message}
             updatedAt={updatedAt}
@@ -109,11 +121,20 @@ const ChatBar = () => {
             color={color}    
               />)
             if(type === 'image') return (
-            <MessagesRightImage
+            <MessageRightImage
             key={shortid.generate()}    
             imgUrl={message}
             updatedAt={updatedAt}
             color={color}    
+              />)
+            if(type === 'audio') return (
+            <MessageRightAudio
+            key={shortid.generate()}    
+            audioUrl={message}
+            updatedAt={updatedAt}
+            audio={audio}
+            setAudio={setAudio}
+            i={i}    
               />)            
           }
         }) : <AlertInfo name='You do not have messages yet!' />}

src/components/HomePage/index.tsx

@@ -14,7 +14,7 @@ const HomePage = () => {
     const classes = useStyles()
     return (
         <Grid className={classes.container}
-           container spacing={0} >
+            container spacing={0} >
           <LeftBar/>
           <RightBar/>
        </Grid>

src/components/reusableComponents/DropZone/UploadAvatar/index.tsx

@@ -35,7 +35,7 @@ const {
     getRootProps,
     getInputProps
   } = useDropzone({
-    accept: 'image/jpeg,image/png',
+    accept: 'image/*',
   });
 
     useEffect(() => {
@@ -65,7 +65,7 @@ const {
           width={88}
           height={72}
         />
-        <Typography variant="h6" color="initial">*.jpeg,*.png</Typography>
+        <Typography variant="h6" color="initial">image/*</Typography>
       </div>
       <aside>
         <ul>{acceptedFileItems}</ul>

src/components/reusableComponents/DropZone/UploadPhotoAndVideo/index.tsx

@@ -17,17 +17,18 @@ const useStyles = makeStyles({
   },
 })
 
-interface IUploadPhotoAndVideo {
+interface IUploadFile {
   children:React.ReactNode,
   setFile: any,
-  setValue:any,
+  setValue: any,
+  accept: string
 }
   
-const UploadPhotoAndVideo = ({children,setFile,setValue}:IUploadPhotoAndVideo) => {
+const UploadFile = ({children,setFile,setValue,accept}:IUploadFile) => {
   const classes = useStyles()
     const { getRootProps, getInputProps, acceptedFiles } = useDropzone({
         noDrag: true,
-        accept: 'image/jpeg,image/png,video/mp4,audio/mpeg'
+        accept
     });
       useEffect(() => {
         if (acceptedFiles.slice(-1)[0]) {
@@ -46,4 +47,4 @@ const UploadPhotoAndVideo = ({children,setFile,setValue}:IUploadPhotoAndVideo) =
   );
 }
 
-export default UploadPhotoAndVideo
+export default UploadFile