diff --git a/package.json b/package.json
index cb6675f..968659b 100644
--- a/package.json
+++ b/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",
diff --git a/src/assets/voice/Siavash Ghomayshi - Yadegari.mp3 b/src/assets/voice/Siavash Ghomayshi - Yadegari.mp3
new file mode 100644
index 0000000..b91e90a
Binary files /dev/null and b/src/assets/voice/Siavash Ghomayshi - Yadegari.mp3 differ
diff --git a/src/views/QR/VoiceBox/Material-audio-player/index.js b/src/views/QR/VoiceBox/Material-audio-player/index.js
new file mode 100644
index 0000000..2962d52
--- /dev/null
+++ b/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 (
+
+
+
+ );
+}
diff --git a/src/views/QR/VoiceBox/index.js b/src/views/QR/VoiceBox/index.js
index 69bfa9b..cbb3fb6 100644
--- a/src/views/QR/VoiceBox/index.js
+++ b/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) {
{props.data.title}
-
+
) : null}
{window.innerWidth < 1000 ? (
@@ -23,7 +25,9 @@ export default function VoiceBox(props) {
{props.data.title}
-
+
+
+
) : null}
diff --git a/src/views/QR/VoiceBox/index.scss b/src/views/QR/VoiceBox/index.scss
index f4f016f..255358a 100644
--- a/src/views/QR/VoiceBox/index.scss
+++ b/src/views/QR/VoiceBox/index.scss
@@ -16,20 +16,48 @@
margin-left: 5px;
}
}
- div{
- width: 100%;
- height: 40px;
- background-color: #02733C;
+ .MuiSvgIcon-root{
+ color: #37D386 !important;
+ font-size: 50px !important;
+ }
+ .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%;
- height: 40px;
- background-color: #02733C;
+ // width: 100%;
+ // height: 40px;
+ // background-color: #02733C;
}
}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index b753bde..e3046a5 100644
--- a/yarn.lock
+++ b/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"