reza added material ui voice compo

package.json

@@ -19,8 +19,8 @@
     "history": "^5.0.0",
     "jalali-moment": "^3.3.10",
     "mapir-react-component": "^1.8.1",
+    "material-ui-audio-player": "https://github.com/RezaAshrafi77/material-ui-audio-player.git",
     "prettier": "^2.3.1",
-    "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-audio-player": "^0.17.0",
     "react-dom": "^17.0.2",
@@ -31,6 +31,7 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "react-sortable-hoc": "^2.0.0",
+    "react-soundplayer": "^1.0.5",
     "react-swipeable-views": "^0.14.0",
     "react-toastify": "^7.0.4",
     "redux": "^4.1.0",

src/views/QR/VoiceBox/Material-audio-player/index.js

@@ -0,0 +1,28 @@
+import { createMuiTheme, ThemeProvider } from "@material-ui/core";
+import AudioPlayer from "material-ui-audio-player";
+
+const muiTheme = createMuiTheme({});
+
+const src = [
+  "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
+  "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3",
+];
+
+export default function MaterialAudioPlayer(props) {
+  return (
+    <ThemeProvider theme={muiTheme}>
+      <AudioPlayer
+        elevation={1}
+        width="100%"
+        variation="default"
+        spacing={3}
+        // download={true}
+        autoplay={false}
+        order="standart"
+        preload="auto"
+        loop={false}
+        src={src}
+      />
+    </ThemeProvider>
+  );
+}

src/views/QR/VoiceBox/index.js

@@ -1,7 +1,9 @@
 import React from "react";
-
+import MaterialAudioPlayer from './Material-audio-player/index';
 import "./index.scss";
 
+
+
 export default function VoiceBox(props) {
   return (
     <>
@@ -14,7 +16,7 @@ export default function VoiceBox(props) {
             <span></span>
             {props.data.title}
           </h2>
-          <div></div>
+            <MaterialAudioPlayer />
         </div>
       ) : null}
       {window.innerWidth < 1000 ? (
@@ -23,7 +25,9 @@ export default function VoiceBox(props) {
             <span></span>
             {props.data.title}
           </h2>
-          <div></div>
+          
+            <MaterialAudioPlayer />
+          
         </div>
       ) : null}
     </>

src/views/QR/VoiceBox/index.scss

@@ -16,20 +16,48 @@
       margin-left: 5px;
     }
   }
-  div{
+  .MuiSvgIcon-root{
-    width: 100%;
+    color: #37D386 !important;
-    height: 40px;
+    font-size: 50px !important;
-    background-color: #02733C;
+  }
+  .MuiSlider-root{
+    color: #37D386;
   }
 }
+.MuiPaper-elevation1{
+  box-shadow: none !important;
+}
+.MuiGrid-container{
+  width: 20px !important;
+  flex-wrap: nowrap !important;
+  flex-direction: row-reverse;
+  background-color: rgba(255,255,255,0) !important;
+  padding: 0px !important;
+}
 
+.MuiGrid-item{
+  display: flex !important;
+  flex-direction: row !important;
+  padding: 0px !important;
+  margin-right: 5px !important;
+  p{
+    color: #02A255 !important;
+  }
+}
 .voice-box{
   width: 100%;
-  max-width: 400px;
+  max-width: 700px;
   border-radius: 10px;
   background-color: #8dfac541;
   padding: 10px 10px;
   margin: 15px auto;
+  .MuiSvgIcon-root{
+    color: #37D386 !important;
+    font-size: 50px !important;
+  }
+  .MuiSlider-root{
+    color: #37D386;
+  }
   h2{
     font-family: numeralLight;
     color: #02733C;
@@ -42,8 +70,8 @@
     }
   }
   div{
-    width: 100%;
+    // width: 100%;
-    height: 40px;
+    // height: 40px;
-    background-color: #02733C;
+    // background-color: #02733C;
   }
 }

yarn.lock

@@ -3631,7 +3631,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.6:
+classnames@^2.2.5, classnames@^2.2.6:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
   integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
@@ -5969,6 +5969,11 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
+hoist-non-react-statics@^2.3.1:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
+  integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
+
 hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
@@ -7751,6 +7756,12 @@ mapir-react-component@^1.8.1:
     react-mapbox-gl "^4.6.0"
     react-mapbox-gl-draw "^2.0.3"
 
+"material-ui-audio-player@https://github.com/RezaAshrafi77/material-ui-audio-player.git":
+  version "1.6.6"
+  resolved "https://github.com/RezaAshrafi77/material-ui-audio-player.git#2b14d5358156644e8a5995250a3396dee9043e06"
+  dependencies:
+    classnames "^2.2.6"
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -9996,6 +10007,17 @@ react-sortable-hoc@^2.0.0:
     invariant "^2.2.4"
     prop-types "^15.5.7"
 
+react-soundplayer@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/react-soundplayer/-/react-soundplayer-1.0.5.tgz#5152ca6824c938cdafdeb16a05be20db7bba6afb"
+  integrity sha512-g4OjyDehFtSK2nPueuS7phwo/ppLYvZcWdGv6Ah3mcJPouOlHbYaFKt6kT3kuce4IiFUN8Ns7tGCbaeWgecCKg==
+  dependencies:
+    classnames "^2.2.5"
+    hoist-non-react-statics "^2.3.1"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
+    soundcloud-audio "^1.3.1"
+
 react-swipeable-views-core@^0.14.0:
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/react-swipeable-views-core/-/react-swipeable-views-core-0.14.0.tgz#6ac443a7cc7bc5ea022fbd549292bb5fff361cce"
@@ -10917,6 +10939,11 @@ sort-keys@^1.0.0:
   dependencies:
     is-plain-obj "^1.0.0"
 
+soundcloud-audio@^1.3.1:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/soundcloud-audio/-/soundcloud-audio-1.4.0.tgz#2d9ceeaa8a3c63d814e18c4c2602fe3be9a99655"
+  integrity sha512-2kHyTfu+KNOLZuRKynaeTmj846deC1WbiDTu7rkd1/93lk9FxtgbGkNQSIy5H4gxZD9EEeTdXhkE7uiMwEXuEQ==
+
 source-list-map@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"